Load individual video in BTV player

bcc-code · Aug 22, 2023 · bcebc12 · bcebc12
1 parent 848cfb1
commit bcebc12
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 20 deletions.
diff --git a/src/Experience/Extras/VideoWithQuestion.js b/src/Experience/Extras/VideoWithQuestion.js
@@ -49,7 +49,7 @@ export default class VideoWithQuestion {
         document.querySelector('.ui-container').append(container)
 
         // Load BTV Player
-        instance.resources.loadEpisodeTextures(instance.data.video)
+        instance.resources.loadVideoInBtvPlayer(instance.data.video)
 
         const playerInterval = setInterval(() => {
             if (instance.resources.videoPlayers[instance.data.video]) {

diff --git a/src/Experience/Utils/Offline.js b/src/Experience/Utils/Offline.js
@@ -429,9 +429,6 @@ export default class Offline {
                         r.onload = function (e) {
                             const blob = offline.getArrayBufferBlob(e)
                             const videoUrl = URL.createObjectURL(blob)
-                            const videoEl = document.createElement("div")
-                            videoEl.setAttribute('id', videoName)
-                            document.getElementById('videos-container').appendChild(videoEl)
 
                             callback(videoName, videoUrl, thumbnailUrl)
                         }
@@ -441,22 +438,38 @@ export default class Offline {
 
                     f.readAsArrayBuffer(item.thumbnail)
                 }
-                else {
-                    // Load video blob as array buffer
-                    var r = new FileReader()
+            }
+            else {
+                fallback(videoName)
+            }
+        }
+    }
 
-                    r.onload = function (e) {
-                        const blob = offline.getArrayBufferBlob(e)
-                        const videoUrl = URL.createObjectURL(blob)
-                        const videoEl = document.createElement("div")
-                        videoEl.setAttribute('id', videoName)
-                        document.getElementById('video-' + videoName).appendChild(videoEl)
+    loadVideoFromIndexedDb = function (videoName, callback, fallback) {
+        if (!offline.db) {
+            fallback(videoName)
+            return
+        }
 
-                        callback(videoName, videoUrl, null)
-                    }
+        offline.transaction = offline.db.transaction([offline.store], "readonly")
+        offline.objStore = offline.transaction.objectStore(offline.store)
+        const getItem = offline.objStore.get(videoName)
+
+        getItem.onsuccess = function () {
+            if (getItem.result && getItem.result.language == _lang.getLanguageCode()) {
+                const item = getItem.result
+
+                // Load video blob as array buffer
+                var r = new FileReader()
 
-                    r.readAsArrayBuffer(item.video)
+                r.onload = function (e) {
+                    const blob = offline.getArrayBufferBlob(e)
+                    const videoUrl = URL.createObjectURL(blob)
+
+                    callback(videoName, videoUrl)
                 }
+
+                r.readAsArrayBuffer(item.video)
             }
             else {
                 fallback(videoName)

diff --git a/src/Experience/Utils/Resources.js b/src/Experience/Utils/Resources.js
@@ -200,13 +200,29 @@ export default class Resources extends EventEmitter {
     }
 
     loadEpisodeTextures(videoName) {
+        resources.addVideoDivElementToContainer(videoName, 'videos-container')
         this.offline.loadEpisodeFromIndexedDb(
             videoName,
             this.loadTexturesLocally,
             this.loadTexturesOnline
         )
     }
 
+    loadVideoInBtvPlayer(videoName) {
+        resources.addVideoDivElementToContainer(videoName, 'video-' + videoName)
+        this.offline.loadVideoFromIndexedDb(
+            videoName,
+            this.loadTexturesLocally,
+            this.loadTexturesOnline
+        )
+    }
+
+    addVideoDivElementToContainer(videoName, containerId) {
+        const videoEl = document.createElement("div")
+        videoEl.setAttribute('id', videoName)
+        document.getElementById(containerId).appendChild(videoEl)
+    }
+
     async loadTexturesLocally(videoName, videoUrl, thumbnailUrl) {
         await resources.streamLocally(videoName, videoUrl)
         resources.loadVideoThumbnail(videoName, thumbnailUrl)
@@ -243,10 +259,6 @@ export default class Resources extends EventEmitter {
     }
 
     async streamFromBtv(videoName) {
-        let btvContainer = document.createElement('div')
-        btvContainer.setAttribute('id', videoName)
-        document.getElementById('videos-container').appendChild(btvContainer)
-
         const episodeId = videoName.replace('episode-', '')
         const player = await resources.factory.create(videoName, {
             episodeId: episodeId,