Implement external player default viewing mode

Current limitations: does not work for the search bar, randomly encountered YT video links (e.g., in descriptions), or the video thumbnail link in the playlist list view.
kommunarr · Oct 20, 2024 · f67eacd · f67eacd
1 parent e4fc61c
commit f67eacd
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 8 deletions.
diff --git a/src/renderer/components/distraction-settings/distraction-settings.js b/src/renderer/components/distraction-settings/distraction-settings.js
@@ -203,7 +203,6 @@ export default defineComponent({
       'updateHideLiveChat',
       'updateHideActiveSubscriptions',
       'updatePlayNextVideo',
-      'updateDefaultViewingMode',
       'updateHideVideoDescription',
       'updateHideComments',
       'updateHideCommentPhotos',

diff --git a/src/renderer/components/ft-list-playlist/ft-list-playlist.js b/src/renderer/components/ft-list-playlist/ft-list-playlist.js
@@ -60,6 +60,10 @@ export default defineComponent({
       return this.$store.getters.getExternalPlayer
     },
 
+    externalPlayerIsDefaultViewingMode: function () {
+      return this.$store.getters.getDefaultViewingMode === 'external_player'
+    },
+
     defaultPlayback: function () {
       return this.$store.getters.getDefaultPlayback
     },

diff --git a/src/renderer/components/ft-list-video/ft-list-video.js b/src/renderer/components/ft-list-video/ft-list-video.js
@@ -376,6 +376,10 @@ export default defineComponent({
       return this.$store.getters.getExternalPlayer
     },
 
+    externalPlayerIsDefaultViewingMode: function () {
+      return this.$store.getters.getDefaultViewingMode === 'external_player'
+    },
+
     defaultPlayback: function () {
       return this.$store.getters.getDefaultPlayback
     },
@@ -478,6 +482,10 @@ export default defineComponent({
       return this.isInQuickBookmarkPlaylist ? 'base favorite' : 'base'
     },
 
+    watchPageLinkType() {
+      return this.externalPlayerIsDefaultViewingMode ? 'a' : 'router-link'
+    },
+
     watchPageLinkTo() {
       // For `router-link` attribute `to`
       return {
@@ -530,6 +538,11 @@ export default defineComponent({
     }
   },
   methods: {
+    handleWatchPageLinkClick: function() {
+      if (this.externalPlayerIsDefaultViewingMode) {
+        this.handleExternalPlayer()
+      }
+    },
     fetchDeArrowThumbnail: async function() {
       if (this.thumbnailPreference === 'hidden') { return }
       const videoId = this.id

diff --git a/src/renderer/components/ft-list-video/ft-list-video.vue b/src/renderer/components/ft-list-video/ft-list-video.vue
@@ -10,19 +10,22 @@
   >
     <div
       class="videoThumbnail"
-    >
-      <router-link
+    > 
+      <component
+        :is="watchPageLinkType"
         class="thumbnailLink"
         tabindex="-1"
         :to="watchPageLinkTo"
+        href="javascript:void(0)"
+        @click="handleWatchPageLinkClick"
       >
         <img
           :src="thumbnail"
           class="thumbnailImage"
           alt=""
           :style="{filter: blurThumbnailsStyle}"
         >
-      </router-link>
+      </component>
       <div
         v-if="isLive || isUpcoming || (displayDuration !== '' && displayDuration !== '0:00')"
         class="videoDuration"
@@ -34,7 +37,7 @@
         {{ isLive ? $t("Video.Live") : (isUpcoming ? $t("Video.Upcoming") : displayDuration) }}
       </div>
       <ft-icon-button
-        v-if="externalPlayer !== ''"
+        v-if="externalPlayer !== '' && !externalPlayerIsDefaultViewingMode"
         :title="$t('Video.External Player.OpenInTemplate', { externalPlayer })"
         :icon="['fas', 'external-link-alt']"
         class="externalPlayerIcon"
@@ -110,14 +113,17 @@
       />
     </div>
     <div class="info">
-      <router-link
+      <component
+        :is="watchPageLinkType"
         class="title"
         :to="watchPageLinkTo"
+        href="javascript:void(0)"
+        @click="handleWatchPageLinkClick"
       >
         <h3 class="h3Title">
           {{ displayTitle }}
         </h3>
-      </router-link>
+      </component>
       <div class="infoLine">
         <router-link
           v-if="channelId !== null"

diff --git a/src/renderer/views/Watch/Watch.js b/src/renderer/views/Watch/Watch.js
@@ -341,7 +341,6 @@ export default defineComponent({
           return
         case 'pip':
           this.startNextVideoInPip = true
-
       }
     },