From f67eacdf889d87009ac7895932974ef181d6b517 Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Sun, 20 Oct 2024 12:16:45 -0500
Subject: [PATCH] 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.
---
 .../distraction-settings.js                    |  1 -
 .../ft-list-playlist/ft-list-playlist.js       |  4 ++++
 .../components/ft-list-video/ft-list-video.js  | 13 +++++++++++++
 .../components/ft-list-video/ft-list-video.vue | 18 ++++++++++++------
 src/renderer/views/Watch/Watch.js              |  1 -
 5 files changed, 29 insertions(+), 8 deletions(-)

diff --git a/src/renderer/components/distraction-settings/distraction-settings.js b/src/renderer/components/distraction-settings/distraction-settings.js
index eb584eaff6b0f..002631739795b 100644
--- 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
index 98747cef34c23..1642292fa0037 100644
--- 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
index 67acb17bb96a1..0963c6fd501df 100644
--- 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
index 7d63dcf983228..a4a4adf6ab7c8 100644
--- a/src/renderer/components/ft-list-video/ft-list-video.vue
+++ b/src/renderer/components/ft-list-video/ft-list-video.vue
@@ -10,11 +10,14 @@
   >
     <div
       class="videoThumbnail"
-    >
-      <router-link
+    > 
+      <component
+        :is="watchPageLinkType"
         class="thumbnailLink"
         tabindex="-1"
         :to="watchPageLinkTo"
+        href="javascript:void(0)"
+        @click="handleWatchPageLinkClick"
       >
         <img
           :src="thumbnail"
@@ -22,7 +25,7 @@
           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
index 3e956930520c1..146d6acf42a7a 100644
--- 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
-          
       }
     },