Move fetching of the sponsorblock segments out of the store (#2684)

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

@@ -13,6 +13,7 @@ import 'videojs-contrib-quality-levels'
 import 'videojs-http-source-selector'
 
 import { IpcChannels } from '../../../constants'
+import { sponsorBlockSkipSegments } from '../../helpers/sponsorblock'
 
 export default Vue.extend({
   name: 'FtVideoPlayer',
@@ -547,32 +548,30 @@ export default Vue.extend({
     },
 
     initializeSponsorBlock() {
-      this.sponsorBlockSkipSegments({
+      sponsorBlockSkipSegments(this.videoId, this.sponsorSkips.seekBar)
-        videoId: this.videoId,
+        .then((skipSegments) => {
-        categories: this.sponsorSkips.seekBar
+          if (skipSegments.length === 0) {
-      }).then((skipSegments) => {
+            return
-        if (skipSegments.length === 0) {
+          }
-          return
-        }
 
-        this.player.ready(() => {
+          this.player.ready(() => {
-          this.player.on('timeupdate', () => {
+            this.player.on('timeupdate', () => {
-            this.skipSponsorBlocks(skipSegments)
+              this.skipSponsorBlocks(skipSegments)
-          })
+            })
 
-          skipSegments.forEach(({
+            skipSegments.forEach(({
-            category,
+              category,
-            segment: [startTime, endTime]
+              segment: [startTime, endTime]
-          }) => {
+            }) => {
-            this.addSponsorBlockMarker({
+              this.addSponsorBlockMarker({
-              time: startTime,
+                time: startTime,
-              duration: endTime - startTime,
+                duration: endTime - startTime,
-              color: 'var(--primary-color)',
+                color: 'var(--primary-color)',
-              category: category
+                category: category
+              })
             })
           })
         })
-      })
     },
 
     skipSponsorBlocks(skipSegments) {
@@ -1927,7 +1926,6 @@ export default Vue.extend({
       'calculateColorLuminance',
       'updateDefaultCaptionSettings',
       'showToast',
-      'sponsorBlockSkipSegments',
       'parseScreenshotCustomFileName',
       'updateScreenshotFolderPath',
       'getPicturesPath',

src/renderer/helpers/sponsorblock.js

@@ -0,0 +1,32 @@
+import store from '../store/index'
+
+export async function sponsorBlockSkipSegments(videoId, categories) {
+  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
+    .map(byte => byte.toString(16).padStart(2, '0'))
+    .slice(0, 4)
+    .join('')
+
+  const requestUrl = `${store.getters.getSponsorBlockUrl}/api/skipSegments/${videoIdHashPrefix}?categories=${JSON.stringify(categories)}`
+
+  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
+      .filter((result) => result.videoID === videoId)
+      .flatMap((result) => result.segments)
+  } catch (error) {
+    console.error('failed to fetch SponsorBlock segments', requestUrl, error)
+    throw error
+  }
+}

src/renderer/store/modules/sponsorblock.js

@@ -1,55 +0,0 @@
-const state = {}
-const getters = {}
-
-const actions = {
-  sponsorBlockSkipSegments ({ rootState }, { videoId, categories }) {
-    return new Promise((resolve, reject) => {
-      const videoIdBuffer = new TextEncoder().encode(videoId)
-
-      crypto.subtle.digest('SHA-256', videoIdBuffer).then((hashBuffer) => {
-        const hashArray = Array.from(new Uint8Array(hashBuffer))
-
-        const videoIdHashPrefix = hashArray
-          .map(byte => byte.toString(16).padStart(2, '0'))
-          .slice(0, 4)
-          .join('')
-
-        const requestUrl = `${rootState.settings.sponsorBlockUrl}/api/skipSegments/${videoIdHashPrefix}?categories=${JSON.stringify(categories)}`
-
-        fetch(requestUrl)
-          .then((response) => {
-            // 404 means that there are no segments registered for the video
-            if (response.status === 404) {
-              resolve([])
-              return
-            }
-
-            response.json()
-              .then((json) => {
-                const segments = json
-                  .filter((result) => result.videoID === videoId)
-                  .flatMap((result) => result.segments)
-                resolve(segments)
-              })
-              .catch((error) => {
-                console.error('failed to fetch SponsorBlock segments', requestUrl, error)
-                reject(error)
-              })
-          })
-          .catch((error) => {
-            console.error('failed to fetch SponsorBlock segments', requestUrl, error)
-            reject(error)
-          })
-      })
-    })
-  }
-}
-
-const mutations = {}
-
-export default {
-  state,
-  getters,
-  actions,
-  mutations
-}