Add DeArrow support for ft-list-video titles

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

@@ -10,6 +10,7 @@ import {
   toLocalePublicationString,
   toDistractionFreeTitle
 } from '../../helpers/utils'
+import { deArrow } from '../../helpers/sponsorblock'
 
 export default defineComponent({
   name: 'FtListVideo',
@@ -316,6 +317,14 @@ export default defineComponent({
     currentLocale: function () {
       return this.$i18n.locale.replace('_', '-')
     },
+
+    deArrowTitles: function () {
+      return this.$store.getters.getDeArrowTitles
+    },
+
+    deArrowCache: function () {
+      return this.$store.getters.getDeArrowCache
+    }
   },
   watch: {
     historyIndex() {
@@ -327,6 +336,37 @@ export default defineComponent({
     this.checkIfWatched()
   },
   methods: {
+    getTitle: async function() {
+      if (this.deArrowTitles) {
+        const videoId = this.id
+        const cached = this.deArrowCache.findIndex(video => video.videoId === videoId)
+        if (cached === -1) {
+          const data = await deArrow(this.id)
+          if (data) {
+            data.videoId = videoId
+            this.$store.commit('addVideoToDeArrowCache', data)
+
+            if (data.titles.length > 0 && data.titles[0].locked) {
+              this.title = data.titles[0].title
+            }
+          } else {
+            this.$store.commit('addVideoToDeArrowCache', { videoId })
+          }
+        } else {
+          const data = this.deArrowCache[cached]
+          if (data && data.titles.length > 0 && data.titles[0].locked) {
+            this.title = data.titles[0].title
+          }
+        }
+      }
+
+      if (this.showDistractionFreeTitles) {
+        return toDistractionFreeTitle(this.title)
+      } else {
+        return this.title
+      }
+    },
+
     handleExternalPlayer: function () {
       this.$emit('pause-player')
 
@@ -397,9 +437,10 @@ export default defineComponent({
       }
     },
 
-    parseVideoData: function () {
+    parseVideoData: async function () {
       this.id = this.data.videoId
       this.title = this.data.title
+      await this.getTitle()
       // this.thumbnail = this.data.videoThumbnails[4].url
 
       this.channelName = this.data.author

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

@@ -74,7 +74,7 @@
           query: playlistIdFinal ? {playlistId: playlistIdFinal} : {}
         }"
       >
-        {{ displayTitle }}
+        {{ title }}
       </router-link>
       <div class="infoLine">
         <router-link

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

@@ -38,13 +38,21 @@ export default defineComponent({
     },
     sponsorBlockShowSkippedToast: function () {
       return this.$store.getters.getSponsorBlockShowSkippedToast
+    },
+
+    deArrowTitles: function () {
+      return this.$store.getters.getDeArrowTitles
     }
   },
   methods: {
     handleUpdateSponsorBlock: function (value) {
       this.updateUseSponsorBlock(value)
     },
 
+    handleUpdateDeArrowTitles: function (value) {
+      this.updateDeArrowTitles(value)
+    },
+
     handleUpdateSponsorBlockUrl: function (value) {
       const sponsorBlockUrlWithoutTrailingSlash = value.replace(/\/$/, '')
       const sponsorBlockUrlWithoutApiSuffix = sponsorBlockUrlWithoutTrailingSlash.replace(/\/api$/, '')
@@ -58,7 +66,8 @@ export default defineComponent({
     ...mapActions([
       'updateUseSponsorBlock',
       'updateSponsorBlockUrl',
-      'updateSponsorBlockShowSkippedToast'
+      'updateSponsorBlockShowSkippedToast',
+      'updateDeArrowTitles'
     ])
   }
 })

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

@@ -19,6 +19,13 @@
           @change="handleUpdateSponsorBlockShowSkippedToast"
         />
       </ft-flex-box>
+      <ft-flex-box class="settingsFlexStart500px">
+        <ft-toggle-switch
+          :label="$t('Settings.SponsorBlock Settings.DeArrowTitles')"
+          :default-value="deArrowTitles"
+          @change="handleUpdateDeArrowTitles"
+        />
+      </ft-flex-box>
       <ft-flex-box>
         <ft-input
           :placeholder="$t('Settings.SponsorBlock Settings[\'SponsorBlock API Url (Default is https://sponsor.ajay.app)\']')"

src/renderer/helpers/sponsorblock.js

@@ -1,16 +1,17 @@
 import store from '../store/index'
-
-export async function sponsorBlockSkipSegments(videoId, categories) {
+async function getVideoHash(videoId) {
   const videoIdBuffer = new TextEncoder().encode(videoId)
 
   const hashBuffer = await crypto.subtle.digest('SHA-256', videoIdBuffer)
   const hashArray = Array.from(new Uint8Array(hashBuffer))
 
-  const videoIdHashPrefix = hashArray
+  return hashArray
     .map(byte => byte.toString(16).padStart(2, '0'))
     .slice(0, 4)
     .join('')
-
+}
+export async function sponsorBlockSkipSegments(videoId, categories) {
+  const videoIdHashPrefix = await getVideoHash(videoId)
   const requestUrl = `${store.getters.getSponsorBlockUrl}/api/skipSegments/${videoIdHashPrefix}?categories=${JSON.stringify(categories)}`
 
   try {
@@ -30,3 +31,23 @@ export async function sponsorBlockSkipSegments(videoId, categories) {
     throw error
   }
 }
+
+export async function deArrow(videoId) {
+  const videoIdHashPrefix = (await getVideoHash(videoId)).substring(0, 4)
+  const requestUrl = `${store.getters.getSponsorBlockUrl}/api/branding/${videoIdHashPrefix}`
+
+  try {
+    const response = await fetch(requestUrl)
+
+    // 404 means that there are no segments registered for the video
+    if (response.status === 404) {
+      return []
+    }
+
+    const json = await response.json()
+    return json[videoId] ?? undefined
+  } catch (error) {
+    console.error('failed to fetch DeArrow data', requestUrl, error)
+    throw error
+  }
+}

src/renderer/store/modules/settings.js

@@ -286,6 +286,7 @@ const state = {
   settingsPassword: '',
   allowDashAv1Formats: false,
   commentAutoLoadEnabled: false,
+  deArrowTitles: false,
 }
 
 const stateWithSideEffects = {

src/renderer/store/modules/utils.js

@@ -27,6 +27,7 @@ const state = {
     movies: null
   },
   cachedPlaylist: null,
+  deArrowCache: [],
   showProgressBar: false,
   progressBarPercentage: 0,
   regionNames: [],
@@ -57,6 +58,10 @@ const getters = {
     return state.sessionSearchHistory
   },
 
+  getDeArrowCache () {
+    return state.deArrowCache
+  },
+
   getPopularCache () {
     return state.popularCache
   },
@@ -469,6 +474,10 @@ const actions = {
     commit('setSessionSearchHistory', [])
   },
 
+  clearDeArrowCache ({ commit }) {
+    commit('setDeArrowCache', [])
+  },
+
   async getExternalPlayerCmdArgumentsData ({ commit }, payload) {
     const fileName = 'external-player-map.json'
     let fileData
@@ -614,6 +623,20 @@ const mutations = {
     state.sessionSearchHistory = history
   },
 
+  setDeArrowCache (state, cache) {
+    state.deArrowCache = cache
+  },
+
+  addVideoToDeArrowCache (state, payload) {
+    const sameVideo = state.deArrowCache.findIndex((video) => {
+      return video.videoId === payload.videoId
+    })
+
+    if (sameVideo !== -1) {
+      state.deArrowCache[sameVideo.videoId] = payload
+    }
+  },
+
   addToSessionSearchHistory (state, payload) {
     const sameSearch = state.sessionSearchHistory.findIndex((search) => {
       return search.query === payload.query && searchFiltersMatch(payload.searchSettings, search.searchSettings)

static/locales/en-US.yaml

@@ -410,6 +410,7 @@ Settings:
     Enable SponsorBlock: Enable SponsorBlock
     'SponsorBlock API Url (Default is https://sponsor.ajay.app)': SponsorBlock API Url (Default is https://sponsor.ajay.app)
     Notify when sponsor segment is skipped: Notify when sponsor segment is skipped
+    DeArrowTitles: DeArrow Titles
     Skip Options:
       Skip Option: Skip Option
       Auto Skip: Auto Skip