update code to use api v2 thumbnail endpoint. remove thumbnail.php (n…

…o longer needed).
openbroadcaster · Aug 25, 2024 · a2d2360 · a2d2360
1 parent ec6a8c7
commit a2d2360
Show file tree

Hide file tree

Showing 7 changed files with 38 additions and 107 deletions.
diff --git a/.phpcs.xml.dist b/.phpcs.xml.dist
@@ -15,7 +15,6 @@
 	<file>preview.php</file>
 	<file>remote.php</file>
 	<file>strings.php</file>
-	<file>thumbnail.php</file>
 	<file>tts.php</file>
 	<file>upload.php</file>
 	<file>tools/cli</file>

diff --git a/js/media/details.js b/js/media/details.js
@@ -117,13 +117,6 @@ OB.Media.detailsPage = function (id) {
             document.querySelector("#media_details_metadata").appendChild(metaElem);
         });
 
-        // add thumbnail if available
-        if (item.thumbnail) {
-            $("#media_details_fieldset > legend").after(
-                '<img alt="" id="media_thumbnail" src="/thumbnail.php?id=' + item.id + '">',
-            );
-        }
-
         // remove unused metadata
         $.each(OB.Settings.media_required_fields, function (field, status) {
             field = field.replace(/_id$/, "");

diff --git a/js/playlist/addedit_standard.js b/js/playlist/addedit_standard.js
@@ -153,14 +153,34 @@ OB.Playlist.addeditInsertItem = function (id, description, duration, type, prope
                 type +
                 '"></div>',
         )
-            .append(
-                $("<span></span>")
-                    .append('<img src="/thumbnail.php?id=' + id + '" onerror="this.remove()" />')
-                    .addClass("playlist_addedit_thumbnail"),
-            )
+            .append($("<span></span>").addClass("playlist_addedit_thumbnail"))
             .append($("<span></span>").text(description).addClass("playlist_addedit_description"))
             .append($("<span></span>").text(duration_text).addClass("playlist_addedit_duration")),
     );
+
+    const currentId = OB.Playlist.addedit_item_last_id;
+    OB.API.request({ endpoint: "downloads/media/" + id + "/thumbnail/", raw: true }).then(function (blob) {
+        if (blob) {
+            const imageUrl = URL.createObjectURL(blob);
+            const img = document.createElement("img");
+            img.src = imageUrl;
+            img.onerror = function () {
+                this.remove();
+            }; // Remove the image if it fails to load
+            const targetElement = document.querySelector(
+                `#playlist_addedit_item_${currentId} .playlist_addedit_thumbnail`,
+            );
+            if (targetElement) {
+                targetElement.appendChild(img);
+            }
+
+            // revoke the URL when the image is loaded to free up memory
+            img.onload = function () {
+                URL.revokeObjectURL(imageUrl);
+            };
+        }
+    });
+
     //'+htmlspecialchars(description)+'<span class="playlist_addedit_duration">'+duration_text+'</span></div>');
     if (properties) {
         if (properties["crossfade"]) {

diff --git a/js/sidebar.js b/js/sidebar.js
@@ -400,12 +400,6 @@ OB.Sidebar.mediaSearch = function (more) {
                             break;
                     }
 
-                    /*
-                    var thumbnail = media[i]["thumbnail"]
-                        ? '<img loading="lazy" src="/thumbnail.php?id=' + media[i]["id"] + '" />'
-                        : "";
-                    */
-
                     var thumbnail = "";
 
                     if (media[i]["thumbnail"]) {

diff --git a/thumbnail.php b/thumbnail.php
diff --git a/tools/stream/api.php b/tools/stream/api.php
@@ -124,7 +124,7 @@
     } else {
         $thumbnail_file = 'thumbnails/' . $item['file_location'][0] . '/' . $item['file_location'][1] . '/' . $item['id'] . '.jpg';
         if (file_exists(OB_CACHE . '/' . $thumbnail_file)) {
-            $item['thumbnail'] = 'thumbnail.php?id=' . $item['id'];
+            $item['thumbnail'] = '/api/v2/downloads/media/'.$item['id'].'/thumbnail/';
         }
     }
 

diff --git a/ui/elements/preview.js b/ui/elements/preview.js
@@ -163,18 +163,24 @@ class OBElementPreview extends OBElement {
         if (videoElem) {
             let elem = this;
             let thumbnailId = this.#queue[this.#itemId].id;
-            let thumbnailLink = "/thumbnail.php?id=" + thumbnailId;
-            let validThumbnail = (await fetch(thumbnailLink)).ok;
-            if (!validThumbnail) {
-                thumbnailLink = "/images/circle.svg";
+            let poster = null;
+
+            const blob = await OB.API.request({
+                endpoint: "downloads/media/" + thumbnailId + "/thumbnail/",
+                raw: true,
+            });
+            if (blob) {
+                poster = URL.createObjectURL(blob);
+            } else {
+                poster = "/images/circle.svg";
             }
 
             switch (this.#itemType) {
                 case "audio":
                     this.#videojsPlayer = videojs(videoElem, {
                         controls: true,
                         preload: "auto",
-                        poster: thumbnailLink,
+                        poster: poster,
                         audioPosterMode: true,
                     });
 
@@ -189,7 +195,7 @@ class OBElementPreview extends OBElement {
                     this.#videojsPlayer = videojs(videoElem, {
                         controls: true,
                         preload: "auto",
-                        poster: thumbnailLink,
+                        poster: poster,
                     });
 
                     this.#videojsPlayer.ready(function () {