Optimize saving watch progress and last viewed playlist in the history (#5266)

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

@@ -98,7 +98,6 @@ export default defineComponent({
       lengthSeconds: 0,
       duration: '',
       description: '',
-      watchProgress: 0,
       published: undefined,
       isLive: false,
       is4k: false,
@@ -119,6 +118,14 @@ export default defineComponent({
       return typeof this.historyEntry !== 'undefined'
     },
 
+    watchProgress: function () {
+      if (!this.historyEntryExists || !this.saveWatchedProgress) {
+        return 0
+      }
+
+      return this.historyEntry.watchProgress
+    },
+
     listType: function () {
       return this.$store.getters.getListType
     },
@@ -494,9 +501,6 @@ export default defineComponent({
     },
   },
   watch: {
-    historyEntry() {
-      this.checkIfWatched()
-    },
     showAddToPlaylistPrompt(value) {
       if (value) { return }
       // Execute on prompt close
@@ -507,7 +511,6 @@ export default defineComponent({
   },
   created: function () {
     this.parseVideoData()
-    this.checkIfWatched()
 
     if ((this.useDeArrowTitles || this.useDeArrowThumbnails) && !this.deArrowCache) {
       this.fetchDeArrowData()
@@ -697,19 +700,6 @@ export default defineComponent({
       }
     },
 
-    checkIfWatched: function () {
-      if (this.historyEntryExists) {
-        const historyEntry = this.historyEntry
-
-        if (this.saveWatchedProgress) {
-          // For UX consistency, no progress reading if writing disabled
-          this.watchProgress = historyEntry.watchProgress
-        }
-      } else {
-        this.watchProgress = 0
-      }
-    },
-
     markAsWatched: function () {
       const videoData = {
         videoId: this.id,
@@ -733,8 +723,6 @@ export default defineComponent({
       this.removeFromHistory(this.id)
 
       showToast(this.$t('Video.Video has been removed from your history'))
-
-      this.watchProgress = 0
     },
 
     togglePlaylistPrompt: function () {

src/renderer/store/modules/history.js

@@ -108,27 +108,29 @@ const mutations = {
   },
 
   updateRecordWatchProgressInHistoryCache(state, { videoId, watchProgress }) {
-    const i = state.historyCacheSorted.findIndex((currentRecord) => {
-      return currentRecord.videoId === videoId
-    })
+    // historyCacheById and historyCacheSorted reference the same object instances,
+    // so modifying an existing object in one of them will update both.
 
-    const targetRecord = Object.assign({}, state.historyCacheSorted[i])
-    targetRecord.watchProgress = watchProgress
-    state.historyCacheSorted.splice(i, 1, targetRecord)
-    vueSet(state.historyCacheById, videoId, targetRecord)
+    const record = state.historyCacheById[videoId]
+
+    // Don't set, if the item was removed from the watch history, as we don't have any video details
+    if (record) {
+      vueSet(record, 'watchProgress', watchProgress)
+    }
   },
 
   updateRecordLastViewedPlaylistIdInHistoryCache(state, { videoId, lastViewedPlaylistId, lastViewedPlaylistType, lastViewedPlaylistItemId }) {
-    const i = state.historyCacheSorted.findIndex((currentRecord) => {
-      return currentRecord.videoId === videoId
-    })
+    // historyCacheById and historyCacheSorted reference the same object instances,
+    // so modifying an existing object in one of them will update both.
 
-    const targetRecord = Object.assign({}, state.historyCacheSorted[i])
-    targetRecord.lastViewedPlaylistId = lastViewedPlaylistId
-    targetRecord.lastViewedPlaylistType = lastViewedPlaylistType
-    targetRecord.lastViewedPlaylistItemId = lastViewedPlaylistItemId
-    state.historyCacheSorted.splice(i, 1, targetRecord)
-    vueSet(state.historyCacheById, videoId, targetRecord)
+    const record = state.historyCacheById[videoId]
+
+    // Don't set, if the item was removed from the watch history, as we don't have any video details
+    if (record) {
+      vueSet(record, 'lastViewedPlaylistId', lastViewedPlaylistId)
+      vueSet(record, 'lastViewedPlaylistType', lastViewedPlaylistType)
+      vueSet(record, 'lastViewedPlaylistItemId', lastViewedPlaylistItemId)
+    }
   },
 
   removeFromHistoryCacheById(state, videoId) {