thumbnails work.... this isnt going wel...

app/index.html

@@ -168,7 +168,7 @@
         </nav>
         <div class="overflow-y-hidden content-wrapper">
             <section id="player" class="overflow-hidden">
-                <video id="video" src=""></video>
+                <video id="video" src="" preload="none"></video>
                 <a href="#player" class="w-full h-full"></a>
                 <div class="player d-none flex-column justify-content-between w-full h-full">
                     <div class="stats row">

app/js/playerHandler.js

@@ -138,7 +138,7 @@ async function buildVideo(torrent, opts) { // sets video source and creates a bu
         });
         await postDownload(selectedFile)
         if (settings.player5) {
-            finishThumbnails(selectedFile);
+            finishThumbnails(`${scope}webtorrent/${torrent.infoHash}/${encodeURI(selectedFile.path)}`);
         }
         if (!torrent.store.store._store) {
             downloadFile(selectedFile)
@@ -286,18 +286,16 @@ function createThumbnail(vid, delay) {
     }
 }
 
-function finishThumbnails() {
+function finishThumbnails(src) {
     if (settings.player5 && settings.player8) {
         let thumbVid = document.createElement("video"),
             index = 0,
-            delay
+            delay = video.duration / 300 < 5 ? 5 : video.duration / 300
-        video.duration / 300 < 5 ? delay = 5 : delay = video.duration / 300
+        thumbVid.src = src
-        thumbVid.src = video.src
         thumbVid.preload = "none"
         thumbVid.volume = 0
-        thumbVid.playbackRate = 0
         thumbVid.addEventListener('loadeddata', loadTime)
-        thumbVid.addEventListener('seeked', () => {
+        thumbVid.addEventListener('canplay', () => {
             createThumbnail(thumbVid, delay);
             loadTime();
         })
@@ -310,10 +308,12 @@ function finishThumbnails() {
             } else {
                 delete thumbVid;
                 thumbVid.remove()
+                console.log("Thumbnail creating finished", index)
             }
             index++
         }
-        thumbVid.play()
+        console.log("Thumbnail creating started", thumbVid)
+        thumbVid.load()
     }
 }
 

app/js/subtitleOctopus.js

@@ -25,14 +25,12 @@ Style: Default,${Object.values(subtitle1list.options).filter(item => item.value
         })
     }
     playerData.subtitleStream.on('subtitle', (subtitle, trackNumber) => {
-        console.log(subtitle)
         if (playerData.headers && !playerData.parsed) {
             if (playerData.headers[trackNumber].type == "webvtt") convertSub(subtitle)
             let formatSub = "Dialogue: " + (subtitle.layer || 0) + "," + new Date(subtitle.time).toISOString().slice(12, -1).slice(0, -1) + "," + new Date(subtitle.time + subtitle.duration).toISOString().slice(12, -1).slice(0, -1) + "," + (subtitle.style || "Default") + "," + (subtitle.name || "") + "," + (subtitle.marginL || "0") + "," + (subtitle.marginR || "0") + "," + (subtitle.marginV || "0") + "," + (subtitle.effect || "") + "," + subtitle.text
             playerData.subtitles[trackNumber].add(formatSub)
             if (playerData.selectedHeader == trackNumber) renderSubs(trackNumber)
         }
-
     })
     playerData.subtitleStream.on('file', file => {
         if (file.mimetype == ("application/x-truetype-font" || "application/font-woff")) playerData.fonts.push(window.URL.createObjectURL(new Blob([file.data], { type: file.mimetype })))
@@ -41,7 +39,6 @@ Style: Default,${Object.values(subtitle1list.options).filter(item => item.value
 }
 let octopusTimeout
 async function renderSubs(trackNumber) {
-    console.log("test")
     if (!playerData.octopusInstance) {
         let options = {
             video: video,
@@ -52,7 +49,6 @@ async function renderSubs(trackNumber) {
             workerUrl: 'js/subtitles-octopus-worker.js',
             timeOffset: 0
         };
-        console.log("yes")
         if (!playerData.octopusInstance) playerData.octopusInstance = new SubtitlesOctopus(options);
     } else {
         if (!octopusTimeout) {
@@ -99,7 +95,7 @@ Style: Default,${Object.values(subtitle1list.options).filter(item => item.value
                 playerData.subtitles[trackNumber].add("Dialogue: " + (subtitle.layer || 0) + "," + new Date(subtitle.time).toISOString().slice(12, -1).slice(0, -1) + "," + new Date(subtitle.time + subtitle.duration).toISOString().slice(12, -1).slice(0, -1) + "," + (subtitle.style || "Default") + "," + (subtitle.name || "") + "," + (subtitle.marginL || "0") + "," + (subtitle.marginR || "0") + "," + (subtitle.marginV || "0") + "," + (subtitle.effect || "") + "," + subtitle.text)
             })
             parser.on('finish', () => {
-                console.log("Finished")
+                console.log("Sub parsing finished")
                 playerData.parsed = 1
                 playerData.subtitleStream = undefined
                 renderSubs(playerData.selectedHeader)
@@ -110,6 +106,7 @@ Style: Default,${Object.values(subtitle1list.options).filter(item => item.value
                 }
                 resolve();
             });
+            console.log("Sub parsing started")
             file.createReadStream().pipe(parser)
         }
     })

app/js/torrentHandler.js

@@ -194,9 +194,11 @@ navigator.serviceWorker.addEventListener('message', evt => {
     respondWith(response)
     async function pull(msg) {
         if (msg.data) {
-            respondWith((await asyncIterator.next()).value)
+            const chunk = (await asyncIterator.next()).value
+            respondWith(chunk)
+            if (!chunk) port.onmessage = null
         } else {
-            console.log('Closing stream', stream)
+            console.log('Closing stream')
             stream.destroy()
             port.onmessage = null
         }

app/sw.js

@@ -37,13 +37,6 @@ self.addEventListener('fetch', evt => {
 				let tm = null
 				const body = data.body === 'stream' ? new ReadableStream({
 					pull(controller) {
-						clearTimeout(tm)
-
-						tm = setTimeout(() => {
-							controller.close()
-							mc.port1.postMessage(false)
-						}, 15000)
-
 						return new Promise(rs => {
 							mc.port1.onmessage = evt => {
 								if (evt.data) {
@@ -51,10 +44,19 @@ self.addEventListener('fetch', evt => {
 								} else {
 									clearTimeout(tm)
 									controller.close() // evt.data is null, means the stream ended
-									// mc.port1.postMessage(false)
+									mc.port1.onmessage = null
 								}
 								rs()
 							}
+
+							clearTimeout(tm)
+							tm = setTimeout(() => {
+								controller.close()
+								mc.port1.postMessage(false) // send timeout
+								mc.port1.onmessage = null
+								rs()
+							}, 5000)
+
 							mc.port1.postMessage(true) // send a pull request
 						})
 					},