Fix handling of DeArrow titles (#3825)

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

@@ -289,10 +289,17 @@ export default defineComponent({
     },
 
     displayTitle: function () {
-      if (this.showDistractionFreeTitles) {
-        return toDistractionFreeTitle(this.title)
+      let title
+      if (this.useDeArrowTitles && this.deArrowCache?.title) {
+        title = this.deArrowCache.title
       } else {
-        return this.title
+        title = this.title
+      }
+
+      if (this.showDistractionFreeTitles) {
+        return toDistractionFreeTitle(title)
+      } else {
+        return title
       }
     },
 
@@ -327,7 +334,7 @@ export default defineComponent({
     },
 
     deArrowCache: function () {
-      return this.$store.getters.getDeArrowCache(this.id)
+      return this.$store.getters.getDeArrowCache[this.id]
     }
   },
   watch: {
@@ -338,15 +345,13 @@ export default defineComponent({
   created: function () {
     this.parseVideoData()
     this.checkIfWatched()
+
+    if (this.useDeArrowTitles && !this.deArrowCache) {
+      this.fetchDeArrowData()
+    }
   },
   methods: {
-    getDeArrowDataEntry: async function() {
-      // Read from local cache or remote
-      // Write to cache if read from remote
-      if (!this.useDeArrowTitles) { return null }
-
-      if (this.deArrowCache) { return this.deArrowCache }
-
+    fetchDeArrowData: async function() {
       const videoId = this.id
       const data = await deArrowData(this.id)
       const cacheData = { videoId, title: null }
@@ -356,7 +361,6 @@ export default defineComponent({
 
       // Save data to cache whether data available or not to prevent duplicate requests
       this.$store.commit('addVideoToDeArrowCache', cacheData)
-      return cacheData
     },
 
     handleExternalPlayer: function () {
@@ -429,9 +433,9 @@ export default defineComponent({
       }
     },
 
-    parseVideoData: async function () {
+    parseVideoData: function () {
       this.id = this.data.videoId
-      this.title = (await this.getDeArrowDataEntry())?.title ?? this.data.title
+      this.title = this.data.title
       // this.thumbnail = this.data.videoThumbnails[4].url
 
       this.channelName = this.data.author ?? null

src/renderer/store/modules/utils.js

@@ -1,6 +1,7 @@
 import fs from 'fs/promises'
 import path from 'path'
 import i18n from '../../i18n/index'
+import { set as vueSet } from 'vue'
 
 import { IpcChannels } from '../../../constants'
 import { pathExists } from '../../helpers/filesystem'
@@ -58,8 +59,8 @@ const getters = {
     return state.sessionSearchHistory
   },
 
-  getDeArrowCache: (state) => (videoId) => {
-    return state.deArrowCache[videoId]
+  getDeArrowCache: (state) => {
+    return state.deArrowCache
   },
 
   getPopularCache () {
@@ -639,7 +640,9 @@ const mutations = {
     const sameVideo = state.deArrowCache[payload.videoId]
 
     if (!sameVideo) {
-      state.deArrowCache[payload.videoId] = payload
+      // setting properties directly doesn't trigger watchers in Vue 2,
+      // so we need to use Vue's set function
+      vueSet(state.deArrowCache, payload.videoId, payload)
     }
   },