package-lock.json

@@ -7,6 +7,9 @@
     "": {
       "name": "goon-plugin",
       "version": "0.1.0",
+      "dependencies": {
+        "hls.js": "^1.5.17"
+      },
       "devDependencies": {
         "ajv": "^8.17.1",
         "ajv-formats": "^3.0.1",
@@ -2781,6 +2784,12 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/hls.js": {
+      "version": "1.6.17",
+      "resolved": "https://registry.npmjs.org/hls.js/-/hls.js-1.6.17.tgz",
+      "integrity": "sha512-NUplVGVuc1hSPwdB/9/cbRkUmLrYi75/hqiXKdA+l300pJNxDu96R7jRb2imDzWJqIUF4I5ThmAdp9GvOCXsuQ==",
+      "license": "Apache-2.0"
+    },
     "node_modules/html-encoding-sniffer": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-4.0.0.tgz",

package.json

@@ -13,6 +13,9 @@
     "test:watch": "vitest",
     "check": "tsc --noEmit"
   },
+  "dependencies": {
+    "hls.js": "^1.5.17"
+  },
   "devDependencies": {
     "ajv": "^8.17.1",
     "ajv-formats": "^3.0.1",

src/viewer/viewer.js

@@ -48,6 +48,8 @@ async function playHls(video, manifestUrl) {
       video.src = manifestUrl;
       return;
     }
+    // Clean up any existing HLS instance before creating a new one
+    destroyHls(video);
     const hls = new HLS({ debug: false, enableWorker: true, lowLatencyMode: false });
     hls.loadSource(manifestUrl);
     hls.attachMedia(video);
@@ -99,6 +101,11 @@ async function createVideoElement(entry) {
     video.src = resolveSrc(entry);
   }
 
+  // Set poster image so a thumbnail shows before playback begins
+  if (entry && typeof entry === 'object' && entry.poster) {
+    video.poster = entry.poster;
+  }
+
   return video;
 }