seek thumbnail preview, major performance stonks

app/app.html

@@ -122,7 +122,7 @@
                     <span class="sidebar-icon bg-transparent justify-content-start mr-0">
                         <i class="material-icons" aria-hidden="true">settings</i>
                     </span>
-                    Settings [WIP]
+                    Settings
                 </a>
             </div>
         </div>
@@ -259,7 +259,7 @@
                     </div>
                     <div class="custom-switch mb-10">
                         <input type="checkbox" id="player5">
-                        <label for="player5">Seek Previews [High Performance Impact]</label>
+                        <label for="player5">Seek Previews</label>
                     </div>
                     <div class="custom-switch mb-10">
                         <input type="checkbox" id="player6">
@@ -300,11 +300,11 @@
                     </div>
                     <div class="custom-switch mb-10">
                         <input type="checkbox" id="torrent2">
-                        <label for="torrent2">Autoplay</label>
+                        <label for="torrent2">Auto-Play Torrents [This Might Lead To Wrong Torrents Being Played]</label>
                     </div>
                     <div class="custom-switch mb-20">
                         <input type="checkbox" id="torrent3">
-                        <label for="torrent3">Trusted Only</label>
+                        <label for="torrent3">Trusted Only [Less Results But Higher Quality And More Seeders]</label>
                     </div>
                     <div class="btn-group" role="group">
                         <button class="btn btn-primary" type="button" id="setApply">Apply Settings</button>

app/js/playerHandler.js

@@ -110,25 +110,29 @@ function createThumbnail(vid) {
     }
 }
 
-function finishThumbnails() {
+function finishThumbnails(file) {
-    let thumbVid = document.createElement("video")
+    if (settings.player5) {
-    thumbVid.src = video.src
+        let thumbVid = document.createElement("video")
-    thumbVid.addEventListener('loadeddata', function (e) {
+        file.getBlobURL((err, url) => {
-        loadTime();
+            thumbVid.src = url
-    }, false);
+        })
+        thumbVid.addEventListener('loadeddata', function (e) {
+            loadTime();
+        }, false)
 
-    thumbVid.addEventListener('seeked', function () {
+        thumbVid.addEventListener('seeked', function () {
-        createThumbnail(thumbVid);
+            createThumbnail(thumbVid);
-        loadTime();
+            loadTime();
-    }, false);
+        }, false)
 
-    function loadTime() {
+        function loadTime() {
-        if (thumbVid.ended == false) {
+            if (thumbVid.ended == false) {
-            thumbVid.currentTime = thumbVid.currentTime + 5;
+                thumbVid.currentTime = thumbVid.currentTime + 5;
-        } else {
+            } else {
-            thumbVid.remove()
+                thumbVid.remove()
+            }
         }
-    };
+    }
 }
 
 
@@ -257,7 +261,7 @@ async function bpip() {
     }
 }
 
-if (settings.player7){
+if (settings.player7) {
     video.setAttribute("autoPictureInPicture", "");
 } else {
     video.setAttribute("disablePictureInPicture", "");
@@ -265,7 +269,7 @@ if (settings.player7){
 }
 
 //miniplayer
-if (!settings.player4){
+if (!settings.player4) {
     document.documentElement.style.setProperty("--miniplayer-display", "none");
 }
 // theathe mode
@@ -337,7 +341,7 @@ function selectLang(lang) {
     bcap()
 }
 
-document.documentElement.style.setProperty("--sub-font", `"${settings.subtitle1}"`);
+document.documentElement.style.setProperty("--sub-font", settings.subtitle1);
 // keybinds
 
 document.onkeydown = function (a) {

app/js/subtitleHandler.js

@@ -8,8 +8,6 @@ function parseSubs(range, stream) {
     } else {  
       subtitleStream = new SubtitleStream() 
       subtitleStream.once('tracks', function (pTracks) {
-        tracks = []
-        video.textTracks = {}
         pTracks.forEach(track => {
           tracks[track.number] = video.addTextTrack('captions', track.type, track.language || track.number)
         })

app/js/torrentHandler.js

@@ -54,6 +54,8 @@ async function addTorrent(magnet) {
     halfmoon.hideModal("tsearch")
     document.location.href = "#player"
     video.src = ""
+    tracks = []
+    video.textTracks = {}
     await sw
     client.add(magnet, async function (torrent) {
         function onProgress() {
@@ -65,16 +67,6 @@ async function addTorrent(magnet) {
         torrent.on('upload', onProgress)
         // torrent.on('warning', console.warn) // too spammy for now
         // torrent.on('error', console.error)
-        torrent.on('done', function () {
-            setInterval(onProgress, 5000)
-            halfmoon.initStickyAlert({
-                content: `<span class="text-break">${torrent.infoHash}</span> has finished downloading. Now seeding.`,
-                title: "Download Complete",
-                alertType: "alert-success",
-                fillType: ""
-            });
-            // finishThumbnails(); //disabled for performance and testing reasons
-        })
         torrent.on('noPeers', function () {
             halfmoon.initStickyAlert({
                 content: `Couldn't find peers for <span class="text-break">${magnet}</span>! Try a torrent with more seeders.`,
@@ -89,6 +81,16 @@ async function addTorrent(magnet) {
                 videoFile = file
             }
         })
+        torrent.on('done', function () {
+            setInterval(onProgress, 5000)
+            halfmoon.initStickyAlert({
+                content: `<span class="text-break">${torrent.infoHash}</span> has finished downloading. Now seeding.`,
+                title: "Download Complete",
+                alertType: "alert-success",
+                fillType: ""
+            });
+            finishThumbnails(videoFile);
+        })
         subtitleStream = undefined
         video.src = `${scope}webtorrent/${torrent.infoHash}/${encodeURI(videoFile.path)}`
         selPlaying(selected)