* 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
This commit is contained in:
PikachuEXE 2021-09-17 07:03:25 +08:00 committed by GitHub
parent 59828a101d
commit f931092b96
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 111 additions and 4 deletions

View File

@ -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'
]),

View File

@ -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"

View File

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

View File

@ -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"

View File

@ -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'
])
}
})

View File

@ -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

View File

@ -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

View File

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

View File

@ -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
@ -145,7 +146,12 @@ Settings:
Clear Default Instance: Clear Default Instance
View all Invidious instance information: View all Invidious instance information
Region for Trending: Region for Trending
#! List countries
#! 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