* Implement setting for disabling external link opening (#1427)

* * Implement setting for disabling external link opening

* * Implement setting for disabling external link opening in dropdown

* * Place proper tooltip content on setting tooltip

* Implement "open link after prompt"

* Fix new setting placement and long translation entry value issue

* fix via increasing width instead of truncating text

* * Access new perference via computed property

* ~ Move the code comment back to original place

* * Update prompt to show URL

* Fix missing :key for element with v-for

* Do Nothing > No Action

* $ Use shortcut to preference value in conditional statements

* Update translation text

* move and update tooltip text

* Rename "Open Link After Prompt" > "Ask Before Opening Link"

Also fix the translation value

src/renderer/App.js

@@ -40,7 +40,14 @@ export default Vue.extend({
       blogBannerMessage: '',
       latestBlogUrl: '',
       updateChangelog: '',
-      changeLogTitle: ''
+      changeLogTitle: '',
+
+      lastExternalLinkToBeOpened: '',
+      showExternalLinkOpeningPrompt: false,
+      externalLinkOpeningPromptValues: [
+        'yes',
+        'no'
+      ]
     }
   },
   computed: {
@@ -96,6 +103,17 @@ export default Vue.extend({
     },
     defaultInvidiousInstance: function () {
       return this.$store.getters.getDefaultInvidiousInstance
+    },
+
+    externalLinkOpeningPromptNames: function () {
+      return [
+        this.$t('Yes'),
+        this.$t('No')
+      ]
+    },
+
+    externalLinkHandling: function () {
+      return this.$store.getters.getExternalLinkHandling
     }
   },
   watch: {
@@ -309,8 +327,18 @@ export default Vue.extend({
 
         if (isYoutubeLink) {
           this.handleYoutubeLink(el.href)
+        } else if (this.externalLinkHandling === 'doNothing') {
+          // Let user know opening external link is disabled via setting
+          this.showToast({
+            message: this.$t('External link opening has been disabled in the general settings')
+          })
+        } else if (this.externalLinkHandling === 'openLinkAfterPrompt') {
+          // Storing the URL is necessary as
+          // there is no other way to pass the URL to click callback
+          this.lastExternalLinkToBeOpened = el.href
+          this.showExternalLinkOpeningPrompt = true
         } else {
-          // Open links externally by default
+          // Open links externally
           this.openExternalLink(el.href)
         }
       })
@@ -408,6 +436,18 @@ export default Vue.extend({
       ipcRenderer.send('appReady')
     },
 
+    handleExternalLinkOpeningPromptAnswer: function (option) {
+      this.showExternalLinkOpeningPrompt = false
+
+      if (option === 'yes' && this.lastExternalLinkToBeOpened.length > 0) {
+        // Maybe user should be notified
+        // if `lastExternalLinkToBeOpened` is empty
+
+        // Open links externally
+        this.openExternalLink(this.lastExternalLinkToBeOpened)
+      }
+    },
+
     ...mapMutations([
       'setInvidiousInstancesList'
     ]),

src/renderer/App.vue

@@ -57,6 +57,14 @@
         />
       </ft-flex-box>
     </ft-prompt>
+    <ft-prompt
+      v-if="showExternalLinkOpeningPrompt"
+      :label="$t('Are you sure you want to open this link?')"
+      :extra-labels="[lastExternalLinkToBeOpened]"
+      :option-names="externalLinkOpeningPromptNames"
+      :option-values="externalLinkOpeningPromptValues"
+      @click="handleExternalLinkOpeningPromptAnswer"
+    />
     <ft-toast />
     <ft-progress-bar
       v-if="showProgressBar"

src/renderer/components/ft-prompt/ft-prompt.js

@@ -15,6 +15,10 @@ export default Vue.extend({
       type: String,
       default: ''
     },
+    extraLabels: {
+      type: Array,
+      default: () => { return [] }
+    },
     optionNames: {
       type: Array,
       default: () => { return [] }

src/renderer/components/ft-prompt/ft-prompt.vue

@@ -8,6 +8,15 @@
         <h2 class="center">
           {{ label }}
         </h2>
+        <p
+          v-for="extraLabel in extraLabels"
+          :key="extraLabel"
+          class="center"
+        >
+          <strong>
+            {{ extraLabel }}
+          </strong>
+        </p>
         <ft-flex-box>
           <ft-button
             v-for="(option, index) in optionNames"

src/renderer/components/general-settings/general-settings.js

@@ -50,6 +50,11 @@ export default Vue.extend({
         'start',
         'middle',
         'end'
+      ],
+      externalLinkHandlingValues: [
+        '',
+        'openLinkAfterPrompt',
+        'doNothing'
       ]
     }
   },
@@ -150,6 +155,18 @@ export default Vue.extend({
         this.$t('Settings.General Settings.Thumbnail Preference.Middle'),
         this.$t('Settings.General Settings.Thumbnail Preference.End')
       ]
+    },
+
+    externalLinkHandling: function () {
+      return this.$store.getters.getExternalLinkHandling
+    },
+
+    externalLinkHandlingNames: function () {
+      return [
+        this.$t('Settings.General Settings.External Link Handling.Open Link'),
+        this.$t('Settings.General Settings.External Link Handling.Ask Before Opening Link'),
+        this.$t('Settings.General Settings.External Link Handling.No Action')
+      ]
     }
   },
   mounted: function () {
@@ -218,7 +235,8 @@ export default Vue.extend({
       'updateListType',
       'updateThumbnailPreference',
       'updateForceLocalBackendForLegacy',
-      'updateCurrentLocale'
+      'updateCurrentLocale',
+      'updateExternalLinkHandling'
     ])
   }
 })

src/renderer/components/general-settings/general-settings.sass

@@ -1 +1,10 @@
 @use "../../sass-partials/settings"
+
+.select
+  min-width: 240px
+  width: auto
+
+// https://vue-loader.vuejs.org/guide/scoped-css.html#deep-selectors
+.select::v-deep .select-text
+  min-width: 240px
+  width: auto

src/renderer/components/general-settings/general-settings.vue

@@ -84,6 +84,14 @@
         :tooltip="$t('Tooltips.General Settings.Region for Trending')"
         @change="updateRegion"
       />
+      <ft-select
+        :placeholder="$t('Settings.General Settings.External Link Handling.External Link Handling')"
+        :value="externalLinkHandling"
+        :select-names="externalLinkHandlingNames"
+        :select-values="externalLinkHandlingValues"
+        :tooltip="$t('Tooltips.General Settings.External Link Handling')"
+        @change="updateExternalLinkHandling"
+      />
     </div>
     <ft-flex-box class="generalSettingsFlexBox">
       <ft-input

src/renderer/store/modules/settings.js

@@ -179,6 +179,7 @@ const state = {
   displayVideoPlayButton: true,
   enableSearchSuggestions: true,
   enableSubtitles: true,
+  externalLinkHandling: '',
   externalPlayer: '',
   externalPlayerExecutable: '',
   externalPlayerIgnoreWarnings: false,

static/locales/en-US.yaml

@@ -35,6 +35,7 @@ Version $ is now available!  Click for more details: Version $ is now available!
 Download From Site: Download From Site
 A new blog is now available, $. Click to view more: A new blog is now available, $.
   Click to view more
+Are you sure you want to open this link?: Are you sure you want to open this link?
 
 # Search Bar
 Search / Go to URL: Search / Go to URL
@@ -146,6 +147,11 @@ Settings:
     View all Invidious instance information: View all Invidious instance information
     Region for Trending: Region for Trending
     #! List countries
+    External Link Handling:
+      External Link Handling: External Link Handling
+      Open Link: Open Link
+      Ask Before Opening Link: Ask Before Opening Link
+      No Action: No Action
   Theme Settings:
     Theme Settings: Theme Settings
     Match Top Bar with Main Color: Match Top Bar with Main Color
@@ -616,6 +622,9 @@ Tooltips:
     Region for Trending: The region of trends allows you to pick which country's trending
       videos you want to have displayed. Not all countries displayed are actually
       supported by YouTube.
+    External Link Handling: |
+      Choose the default behavior when a link, which cannot be opened in FreeTube, is clicked.
+      By default FreeTube will open the clicked link in your default browser.
   Player Settings:
     Force Local Backend for Legacy Formats: Only works when the Invidious API is your
       default. When enabled, the local API will run and use the legacy formats returned
@@ -669,6 +678,7 @@ Default Invidious instance has been set to $: Default Invidious instance has bee
 Default Invidious instance has been cleared: Default Invidious instance has been cleared
 'The playlist has ended.  Enable loop to continue playing': 'The playlist has ended.  Enable
   loop to continue playing'
+External link opening has been disabled in the general settings: 'External link opening has been disabled in the general settings'
 
 Yes: Yes
 No: No