Fix: [Client] PC での左右マウスドラッグによるチャンネルタブ切り替えが上手く動かない問題を修正

どうも v-ripple ではなく <a href> リンクをタブまでドラッグすると新しいタブで開く PC ブラウザのデフォルトの挙動の方と競合していたようで、draggable="false" を付与するだけであっさり意図通り動くようになった…
tsukumijima · Jan 11, 2024 · 5af9ba9 · 5af9ba9
1 parent 82493ff
commit 5af9ba9
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 2 deletions.
diff --git a/client/src/components/Watch/Panel/Channel.vue b/client/src/components/Watch/Panel/Channel.vue
@@ -19,7 +19,8 @@
                 @slide-change="active_tab_index = $event.activeIndex">
                 <SwiperSlide v-for="[channels_type, channels] in Array.from(channelsStore.channels_list_with_pinned_for_watch)" :key="channels_type">
                     <div class="channels">
-                        <router-link v-ripple class="channel" v-for="channel in channels" :key="channel.id" :to="`/tv/watch/${channel.display_channel_id}`">
+                        <router-link v-ripple class="channel" draggable="false"
+                            v-for="channel in channels" :key="channel.id" :to="`/tv/watch/${channel.display_channel_id}`">
                             <!-- 以下では Icon コンポーネントを使うとチャンネルが多いときに高負荷になるため、意図的に SVG を直書きしている -->
                             <div class="channel__broadcaster">
                                 <img class="channel__broadcaster-icon" :src="`${Utils.api_base_url}/channels/${channel.id}/logo`">

diff --git a/client/src/views/TV/Home.vue b/client/src/views/TV/Home.vue
@@ -22,7 +22,7 @@
                     @slide-change="active_tab_index = $event.activeIndex">
                     <SwiperSlide v-for="[channels_type, channels] in Array.from(channelsStore.channels_list_with_pinned)" :key="channels_type">
                         <div class="channels" :class="`channels--tab-${channels_type} channels--length-${channels.length}`">
-                            <router-link v-ripple class="channel"
+                            <router-link v-ripple class="channel" draggable="false"
                                 v-for="channel in channels" :key="channel.id" :to="`/tv/watch/${channel.display_channel_id}`">
                                 <!-- 以下では Icon コンポーネントを使うとチャンネルが多いときに高負荷になるため、意図的に SVG を直書きしている -->
                                 <div class="channel__broadcaster">