Merge branch 'feature/consistent-sharable-video-url-local' into custo…

…m-builds/current

* feature/consistent-sharable-video-url-local: (30 commits)
  * Update places generating sharable YT video URLs to always return prefix https://youtu.be/
  Translated using Weblate (Chinese (Traditional))
  Translated using Weblate (Chinese (Simplified))
  Add dearrow support for thumbnails (FreeTubeApp#4520)
  Translated using Weblate (French)
  Fix hardware acceleration flag for Linux (FreeTubeApp#4532)
  Translated using Weblate (Bengali)
  Translated using Weblate (Czech)
  Translated using Weblate (Hungarian)
  Translated using Weblate (Turkish)
  Translated using Weblate (Spanish)
  Translated using Weblate (Arabic)
  Translated using Weblate (Italian)
  Translated using Weblate (Polish)
  Translated using Weblate (Russian)
  Translated using Weblate (French)
  Translated using Weblate (Chinese (Simplified))
  Add toggle to suppress sending additional args to external players (FreeTubeApp#4515)
  Translated using Weblate (English (United Kingdom))
  Translated using Weblate (Italian)
  ...

src/main/index.js

@@ -166,9 +166,11 @@ function runApp() {
   let mainWindow
   let startupUrl
 
-  app.commandLine.appendSwitch('enable-accelerated-video-decode')
-  app.commandLine.appendSwitch('enable-file-cookies')
-  app.commandLine.appendSwitch('ignore-gpu-blacklist')
+  if (process.platform === 'linux') {
+    // Enable hardware acceleration via VA-API
+    // https://chromium.googlesource.com/chromium/src/+/refs/heads/main/docs/gpu/vaapi.md
+    app.commandLine.appendSwitch('enable-features', 'VaapiVideoDecodeLinuxGL')
+  }
 
   // Work around for context menus in the devtools being displayed behind the window
   // https://github.com/electron/electron/issues/38790

src/renderer/components/external-player-settings/external-player-settings.js

@@ -37,6 +37,9 @@ export default defineComponent({
     externalPlayerIgnoreWarnings: function () {
       return this.$store.getters.getExternalPlayerIgnoreWarnings
     },
+    externalPlayerIgnoreDefaultArgs: function () {
+      return this.$store.getters.getExternalPlayerIgnoreDefaultArgs
+    },
     externalPlayerCustomArgs: function () {
       return this.$store.getters.getExternalPlayerCustomArgs
     },
@@ -58,6 +61,7 @@ export default defineComponent({
       'updateExternalPlayer',
       'updateExternalPlayerExecutable',
       'updateExternalPlayerIgnoreWarnings',
+      'updateExternalPlayerIgnoreDefaultArgs',
       'updateExternalPlayerCustomArgs'
     ])
   }

src/renderer/components/external-player-settings/external-player-settings.vue

@@ -21,6 +21,14 @@
         :tooltip="$t('Tooltips.External Player Settings.Ignore Warnings')"
         @change="updateExternalPlayerIgnoreWarnings"
       />
+      <ft-toggle-switch
+        :label="$t('Settings.External Player Settings.Ignore Default Arguments')"
+        :default-value="externalPlayerIgnoreDefaultArgs"
+        :disabled="externalPlayer===''"
+        :compact="true"
+        :tooltip="$t('Tooltips.External Player Settings.Ignore Default Arguments')"
+        @change="updateExternalPlayerIgnoreDefaultArgs"
+      />
     </ft-flex-box>
     <ft-flex-box
       v-if="externalPlayer !== ''"

src/renderer/components/ft-list-video/ft-list-video.js

@@ -8,9 +8,11 @@ import {
   openExternalLink,
   showToast,
   toLocalePublicationString,
-  toDistractionFreeTitle
+  toDistractionFreeTitle,
+  deepCopy
 } from '../../helpers/utils'
-import { deArrowData } from '../../helpers/sponsorblock'
+import { deArrowData, deArrowThumbnail } from '../../helpers/sponsorblock'
+import debounce from 'lodash.debounce'
 
 export default defineComponent({
   name: 'FtListVideo',
@@ -99,6 +101,7 @@ export default defineComponent({
       isPremium: false,
       hideViews: false,
       addToPlaylistPromptCloseCallback: null,
+      debounceGetDeArrowThumbnail: null,
     }
   },
   computed: {
@@ -185,11 +188,12 @@ export default defineComponent({
     },
 
     youtubeShareUrl: function () {
+      const videoUrl = `https://youtu.be/${this.id}`
       if (this.playlistSharable) {
         // `index` seems can be ignored
-        return `https://youtu.be/${this.id}?list=${this.playlistIdFinal}`
+        return `${videoUrl}&list=${this.playlistIdFinal}`
       }
-      return `https://youtu.be/${this.id}`
+      return videoUrl
     },
 
     youtubeChannelUrl: function () {
@@ -303,6 +307,14 @@ export default defineComponent({
     },
 
     thumbnail: function () {
+      if (this.thumbnailPreference === 'hidden') {
+        return require('../../assets/img/thumbnail_placeholder.svg')
+      }
+
+      if (this.useDeArrowThumbnails && this.deArrowCache?.thumbnail != null) {
+        return this.deArrowCache.thumbnail
+      }
+
       let baseUrl
       if (this.backendPreference === 'invidious') {
         baseUrl = this.currentInvidiousInstance
@@ -317,8 +329,6 @@ export default defineComponent({
           return `${baseUrl}/vi/${this.id}/mq2.jpg`
         case 'end':
           return `${baseUrl}/vi/${this.id}/mq3.jpg`
-        case 'hidden':
-          return require('../../assets/img/thumbnail_placeholder.svg')
         default:
           return `${baseUrl}/vi/${this.id}/mqdefault.jpg`
       }
@@ -367,6 +377,13 @@ export default defineComponent({
       }
     },
 
+    displayDuration: function () {
+      if (this.useDeArrowTitles && (this.duration === '' || this.duration === '0:00') && this.deArrowCache?.videoDuration) {
+        return formatDurationAsTimestamp(this.deArrowCache.videoDuration)
+      }
+      return this.duration
+    },
+
     playlistIdTypePairFinal() {
       if (this.playlistId) {
         return {
@@ -424,6 +441,10 @@ export default defineComponent({
       return this.$store.getters.getUseDeArrowTitles
     },
 
+    useDeArrowThumbnails: function () {
+      return this.$store.getters.getUseDeArrowThumbnails
+    },
+
     deArrowCache: function () {
       return this.$store.getters.getDeArrowCache[this.id]
     },
@@ -444,21 +465,54 @@ export default defineComponent({
     this.parseVideoData()
     this.checkIfWatched()
 
-    if (this.useDeArrowTitles && !this.deArrowCache) {
+    if ((this.useDeArrowTitles || this.useDeArrowThumbnails) && !this.deArrowCache) {
       this.fetchDeArrowData()
     }
+
+    if (this.useDeArrowThumbnails && this.deArrowCache && this.deArrowCache.thumbnail == null) {
+      if (this.debounceGetDeArrowThumbnail == null) {
+        this.debounceGetDeArrowThumbnail = debounce(this.fetchDeArrowThumbnail, 1000)
+      }
+
+      this.debounceGetDeArrowThumbnail()
+    }
   },
   methods: {
+    fetchDeArrowThumbnail: async function() {
+      if (this.thumbnailPreference === 'hidden') { return }
+      const videoId = this.id
+      const thumbnail = await deArrowThumbnail(videoId, this.deArrowCache.thumbnailTimestamp)
+      if (thumbnail) {
+        const deArrowCacheClone = deepCopy(this.deArrowCache)
+        deArrowCacheClone.thumbnail = thumbnail
+        this.$store.commit('addThumbnailToDeArrowCache', deArrowCacheClone)
+      }
+    },
     fetchDeArrowData: async function() {
       const videoId = this.id
       const data = await deArrowData(this.id)
-      const cacheData = { videoId, title: null }
+      const cacheData = { videoId, title: null, videoDuration: null, thumbnail: null, thumbnailTimestamp: null }
       if (Array.isArray(data?.titles) && data.titles.length > 0 && (data.titles[0].locked || data.titles[0].votes >= 0)) {
         cacheData.title = data.titles[0].title
       }
+      if (Array.isArray(data?.thumbnails) && data.thumbnails.length > 0 && (data.thumbnails[0].locked || data.thumbnails[0].votes >= 0)) {
+        cacheData.thumbnailTimestamp = data.thumbnails.at(0).timestamp
+      } else if (data?.videoDuration != null) {
+        cacheData.thumbnailTimestamp = data.videoDuration * data.randomTime
+      }
+      cacheData.videoDuration = data?.videoDuration ? Math.floor(data.videoDuration) : null
 
       // Save data to cache whether data available or not to prevent duplicate requests
       this.$store.commit('addVideoToDeArrowCache', cacheData)
+
+      // fetch dearrow thumbnails if enabled
+      if (this.useDeArrowThumbnails && this.deArrowCache?.thumbnail === null) {
+        if (this.debounceGetDeArrowThumbnail == null) {
+          this.debounceGetDeArrowThumbnail = debounce(this.fetchDeArrowThumbnail, 1000)
+        }
+
+        this.debounceGetDeArrowThumbnail()
+      }
     },
 
     handleExternalPlayer: function () {

src/renderer/components/ft-list-video/ft-list-video.vue

@@ -24,14 +24,14 @@
         >
       </router-link>
       <div
-        v-if="isLive || isUpcoming || (duration !== '' && duration !== '0:00')"
+        v-if="isLive || isUpcoming || (displayDuration !== '' && displayDuration !== '0:00')"
         class="videoDuration"
         :class="{
           live: isLive,
           upcoming: isUpcoming
         }"
       >
-        {{ isLive ? $t("Video.Live") : (isUpcoming ? $t("Video.Upcoming") : duration) }}
+        {{ isLive ? $t("Video.Live") : (isUpcoming ? $t("Video.Upcoming") : displayDuration) }}
       </div>
       <ft-icon-button
         v-if="externalPlayer !== ''"

src/renderer/components/ft-share-button/ft-share-button.js

@@ -127,11 +127,12 @@ export default defineComponent({
       if (this.isPlaylist) {
         return this.youtubePlaylistUrl
       }
+      const videoUrl = `https://youtu.be/${this.id}`
       if (this.playlistSharable) {
         // `index` seems can be ignored
-        return `https://www.youtube.com/watch?v=${this.id}&list=${this.playlistId}`
+        return `${videoUrl}&list=${this.playlistId}`
       }
-      return `https://youtu.be/${this.id}`
+      return videoUrl
     },
 
     youtubeEmbedURL() {

src/renderer/components/sponsor-block-settings/sponsor-block-settings.js

@@ -42,7 +42,13 @@ export default defineComponent({
 
     useDeArrowTitles: function () {
       return this.$store.getters.getUseDeArrowTitles
-    }
+    },
+    useDeArrowThumbnails: function () {
+      return this.$store.getters.getUseDeArrowThumbnails
+    },
+    deArrowThumbnailGeneratorUrl: function () {
+      return this.$store.getters.getDeArrowThumbnailGeneratorUrl
+    },
   },
   methods: {
     handleUpdateSponsorBlock: function (value) {
@@ -53,12 +59,22 @@ export default defineComponent({
       this.updateUseDeArrowTitles(value)
     },
 
+    handleUpdateUseDeArrowThumbnails: function (value) {
+      this.updateUseDeArrowThumbnails(value)
+    },
+
     handleUpdateSponsorBlockUrl: function (value) {
       const sponsorBlockUrlWithoutTrailingSlash = value.replace(/\/$/, '')
       const sponsorBlockUrlWithoutApiSuffix = sponsorBlockUrlWithoutTrailingSlash.replace(/\/api$/, '')
       this.updateSponsorBlockUrl(sponsorBlockUrlWithoutApiSuffix)
     },
 
+    handleUpdateDeArrowThumbnailGeneratorUrl: function (value) {
+      const urlWithoutTrailingSlash = value.replace(/\/$/, '')
+      const urlWithoutApiSuffix = urlWithoutTrailingSlash.replace(/\/api$/, '')
+      this.updateDeArrowThumbnailGeneratorUrl(urlWithoutApiSuffix)
+    },
+
     handleUpdateSponsorBlockShowSkippedToast: function (value) {
       this.updateSponsorBlockShowSkippedToast(value)
     },
@@ -67,7 +83,9 @@ export default defineComponent({
       'updateUseSponsorBlock',
       'updateSponsorBlockUrl',
       'updateSponsorBlockShowSkippedToast',
-      'updateUseDeArrowTitles'
+      'updateUseDeArrowTitles',
+      'updateUseDeArrowThumbnails',
+      'updateDeArrowThumbnailGeneratorUrl'
     ])
   }
 })

src/renderer/components/sponsor-block-settings/sponsor-block-settings.vue

@@ -14,9 +14,15 @@
         :tooltip="$t('Tooltips.SponsorBlock Settings.UseDeArrowTitles')"
         @change="handleUpdateUseDeArrowTitles"
       />
+      <ft-toggle-switch
+        :label="$t('Settings.SponsorBlock Settings.UseDeArrowThumbnails')"
+        :default-value="useDeArrowThumbnails"
+        :tooltip="$t('Tooltips.SponsorBlock Settings.UseDeArrowThumbnails')"
+        @change="handleUpdateUseDeArrowThumbnails"
+      />
     </ft-flex-box>
     <template
-      v-if="useSponsorBlock || useDeArrowTitles"
+      v-if="useSponsorBlock || useDeArrowTitles || useDeArrowThumbnails"
     >
       <ft-flex-box
         v-if="useSponsorBlock"
@@ -37,6 +43,19 @@
           @input="handleUpdateSponsorBlockUrl"
         />
       </ft-flex-box>
+      <ft-flex-box
+        v-if="useDeArrowThumbnails"
+      >
+        <ft-input
+          v-if="useDeArrowThumbnails"
+          :placeholder="$t('Settings.SponsorBlock Settings[\'DeArrow Thumbnail Generator API Url (Default is https://dearrow-thumb.ajay.app)\']')"
+          :show-action-button="false"
+          :show-label="true"
+          :value="deArrowThumbnailGeneratorUrl"
+          @input="handleUpdateDeArrowThumbnailGeneratorUrl"
+        />
+      </ft-flex-box>
+
       <ft-flex-box
         v-if="useSponsorBlock"
       >

src/renderer/helpers/sponsorblock.js

@@ -56,3 +56,31 @@ export async function deArrowData(videoId) {
     throw error
   }
 }
+
+export async function deArrowThumbnail(videoId, timestamp) {
+  let requestUrl = `${store.getters.getDeArrowThumbnailGeneratorUrl}/api/v1/getThumbnail?videoID=` + videoId
+  if (timestamp != null) {
+    requestUrl += `&time=${timestamp}`
+  }
+
+  try {
+    const response = await fetch(requestUrl)
+
+    // 404 means that there are no thumbnails found for the video
+    if (response.status === 404) {
+      return undefined
+    }
+
+    if (response.ok) {
+      return response.url
+    }
+
+    // this usually means that a thumbnail was not generated on the server yet so we'll log the error but otherwise ignore it.
+    const json = await response.json()
+    console.error(json)
+    return undefined
+  } catch (error) {
+    console.error('failed to fetch DeArrow data', requestUrl, error)
+    throw error
+  }
+}

src/renderer/store/modules/settings.js

@@ -190,6 +190,7 @@ const state = {
   externalPlayer: '',
   externalPlayerExecutable: '',
   externalPlayerIgnoreWarnings: false,
+  externalPlayerIgnoreDefaultArgs: false,
   externalPlayerCustomArgs: '',
   expandSideBar: false,
   forceLocalBackendForLegacy: false,
@@ -299,6 +300,8 @@ const state = {
   allowDashAv1Formats: false,
   commentAutoLoadEnabled: false,
   useDeArrowTitles: false,
+  useDeArrowThumbnails: false,
+  deArrowThumbnailGeneratorUrl: 'https://dearrow-thumb.ajay.app'
 }
 
 const stateWithSideEffects = {