preload preview media to allow use of seek (note coming soon will be …

…proper streaming support)
openbroadcaster · Aug 31, 2024 · 5939485 · 5939485
1 parent 368e5f3
commit 5939485
Showing 1 changed file with 23 additions and 27 deletions.
diff --git a/ui/elements/preview.js b/ui/elements/preview.js
@@ -75,35 +75,12 @@ class OBElementPreview extends OBElement {
         const sidebarLeft = document.querySelector("body").classList.contains("sidebar-left");
         if (sidebarLeft) this.root.classList.add("-flipped");
 
-        // get a nonce
-        const nonceRequest = await OB.API.request({ endpoint: "account/nonce" });
-        const nonce = nonceRequest.nonce;
-
         render(
             html`
                 <div id="preview" class="${sidebarLeft && "-flipped"}">
                     <div id="drag">
-                        ${this.#itemType === "audio"
-                            ? html`
-                                  <video-js>
-                                      <source
-                                          src="/api/v2/downloads/media/${this.#queue[this.#itemId]
-                                              .id}/preview/?nonce=${nonce}"
-                                          type="audio/mpeg"
-                                      />
-                                  </video-js>
-                              `
-                            : html``}
-                        ${this.#itemType === "video"
-                            ? html`
-                                  <video-js>
-                                      <source
-                                          src="/api/v2/downloads/media/${this.#queue[this.#itemId]
-                                              .id}/preview/?nonce=${nonce}"
-                                          type="video/mp4"
-                                      />
-                                  </video-js>
-                              `
+                        ${this.#itemType === "audio" || this.#itemType === "video"
+                            ? html` <video-js></video-js> `
                             : html``}
                         ${this.#itemType === "image" || this.#itemType === "document"
                             ? html`
@@ -153,11 +130,11 @@ class OBElementPreview extends OBElement {
         const videoElem = this.root.querySelector("video-js");
         if (videoElem) {
             let elem = this;
-            let thumbnailId = this.#queue[this.#itemId].id;
+            let mediaId = this.#queue[this.#itemId].id;
             let poster = null;
 
             const blob = await OB.API.request({
-                endpoint: "downloads/media/" + thumbnailId + "/thumbnail/",
+                endpoint: "downloads/media/" + mediaId + "/thumbnail/",
                 raw: true,
             });
             if (blob) {
@@ -166,6 +143,13 @@ class OBElementPreview extends OBElement {
                 poster = "/images/circle.svg";
             }
 
+            // get media file
+            const mediaBlob = await OB.API.request({
+                endpoint: "downloads/media/" + mediaId + "/preview/",
+                raw: true,
+            });
+            const mediaUrl = URL.createObjectURL(mediaBlob);
+
             switch (this.#itemType) {
                 case "audio":
                     this.#videojsPlayer = videojs(videoElem, {
@@ -181,6 +165,12 @@ class OBElementPreview extends OBElement {
                         });
                     });
 
+                    this.#videojsPlayer.src({ type: "audio/mpeg", src: mediaUrl });
+
+                    this.#videojsPlayer.on("dispose", function () {
+                        URL.revokeObjectURL(mediaUrl);
+                    });
+
                     break;
                 case "video":
                     this.#videojsPlayer = videojs(videoElem, {
@@ -195,6 +185,12 @@ class OBElementPreview extends OBElement {
                         });
                     });
 
+                    this.#videojsPlayer.src({ type: "video/mp4", src: mediaUrl });
+
+                    this.#videojsPlayer.on("dispose", function () {
+                        URL.revokeObjectURL(mediaUrl);
+                    });
+
                     break;
             }
         }