From 906301a61e52536364fdf4d9c96129096bc45cae Mon Sep 17 00:00:00 2001
From: ThaUnknown <kapi.skowronek@gmail.com>
Date: Tue, 29 Sep 2020 00:34:01 +0200
Subject: [PATCH] some attempts at memory leak fixes, minor fixes and
 optimization, temp disabled cache

---
 app/css/player.css       | 55 ++++++++++++++++++++--------------------
 app/index.html           |  5 +++-
 app/js/playerHandler.js  | 26 ++++---------------
 app/js/torrentHandler.js | 42 ++++++++++++++++--------------
 app/sw.js                | 30 +++++++++++-----------
 5 files changed, 75 insertions(+), 83 deletions(-)

diff --git a/app/css/player.css b/app/css/player.css
index f135aa3..b08ffaf 100644
--- a/app/css/player.css
+++ b/app/css/player.css
@@ -32,8 +32,7 @@
 }
 
 .immersed {
-    cursor: none;
-    border: none !important;
+    cursor: none
 }
 
 .immersed .controls,
@@ -59,13 +58,6 @@
     position: absolute;
     z-index: 10
 }
-#player {
-    border-width: 0;
-    border-top-width: 1px;
-    border-image-slice: 1;
-    border-style: solid;
-    border-image-source: linear-gradient(90deg, #e5204c var(--download),  rgba(0, 0, 0, .8) var(--download))
-}
 
 #player:target .player {
     display: flex !important
@@ -98,13 +90,18 @@ video::cue {
 .stats {
     background: linear-gradient(to bottom, rgba(0, 0, 0, .8), rgba(0, 0, 0, .4) 25%, rgba(0, 0, 0, .2) 50%, rgba(0, 0, 0, .1) 75%, transparent);
     transition: .5s opacity ease;
+    border-width: 0;
+    border-top-width: 1px;
+    border-image-slice: 1;
+    border-style: solid;
+    border-image-source: linear-gradient(90deg, #e5204c var(--download), rgba(0, 0, 0, .8) var(--download))
 }
 
 .player {
     position: absolute;
     user-select: none;
     opacity: 1;
-    font-family: Roboto,Arial,Helvetica,sans-serif
+    font-family: Roboto, Arial, Helvetica, sans-serif
 }
 
 .controls>*:hover {
@@ -135,13 +132,17 @@ video::cue {
     font-weight: 600
 }
 
-#progress {
+#progress,
+.prog {
     width: 100%;
+    height: 100%;
     position: relative;
 }
+
 #video {
     width: 100%;
 }
+
 .volume {
     display: flex;
     width: auto
@@ -170,14 +171,14 @@ video::cue {
     outline: none;
 }
 
-.controls input#volume[type=range]::-webkit-slider-runnable-track {
+input#volume[type=range]::-webkit-slider-runnable-track {
     width: 50%;
     height: 3px;
     cursor: pointer;
     background: linear-gradient(90deg, #e5204c var(--volume-level), rgba(255, 255, 255, .2) var(--volume-level))
 }
 
-.controls input#progress[type=range]::-webkit-slider-runnable-track {
+input#progress[type=range]::-webkit-slider-runnable-track {
     width: 50%;
     height: 3px;
     cursor: pointer;
@@ -185,13 +186,13 @@ video::cue {
 }
 
 
-.controls input#progress[type=range]::after,
-.controls input#progress[type=range]::before {
+input#progress[type=range] ~ img,
+input#progress[type=range]::before {
     pointer-events: none;
     opacity: 0;
     position: absolute;
     transform: translate(-50%, -100%);
-    font-family: Roboto,Arial,Helvetica,sans-serif;
+    font-family: Roboto, Arial, Helvetica, sans-serif;
     color: #ececec;
     white-space: nowrap;
     align-self: center;
@@ -201,42 +202,42 @@ video::cue {
     transition: .2s opacity ease;
 }
 
-.controls input#progress[type=range]::after {
-    width: 150px;
-    background: var(--background);
+input#progress[type=range] ~ img {
     content: "";
     height: var(--height);
     top: -2rem;
+    width: 150px;
 }
 
 
 .ctrl[disabled],
 #player:fullscreen #bpip,
-#player:fullscreen #btheatre{
+#player:fullscreen #btheatre {
     display: none;
 }
-#dl:not([download]) > span{
+
+#dl:not([download])>span {
     cursor: not-allowed;
-    color: rgba(255,255,255,.4);
+    color: rgba(255, 255, 255, .4);
 }
 
-.controls input#progress[type=range]::before {
+input#progress[type=range]::before {
     top: .5rem;
     content: attr(data-ts);
 }
 
-.controls input#progress[type=range]:active::after,
-.controls input#progress[type=range]:active::before {
+input#progress[type=range]:active ~ img,
+input#progress[type=range]:active::before {
     opacity: 1;
 }
 
-.controls input[type=range]:hover::-webkit-slider-thumb {
+input[type=range]:hover::-webkit-slider-thumb {
     height: 12px;
     width: 12px;
     margin-top: -4px
 }
 
-.controls input[type=range]::-webkit-slider-thumb {
+input[type=range]::-webkit-slider-thumb {
     height: 0;
     width: 0;
     border-radius: 50%;
diff --git a/app/index.html b/app/index.html
index 815b276..699de3a 100644
--- a/app/index.html
+++ b/app/index.html
@@ -181,7 +181,10 @@
                             <input type="range" value="100" id="volume">
                         </div>
                         <span class="ts" id="elapsed">00:00</span>
-                        <input type="range" min="0" max="1000" value="0" id="progress">
+                        <div class="prog">
+                            <input type="range" min="0" max="1000" value="0" id="progress">
+                            <img id="thumb">
+                        </div>
                         <span class="ts" id="remaining">00:00</span>
                         <div class="subtitles dropdown dropup with-arrow">
                             <span class="material-icons ctrl" title="Subtitles [C]" id="bcap" data-toggle="dropdown"
diff --git a/app/js/playerHandler.js b/app/js/playerHandler.js
index 1bd2f19..4fe60f6 100644
--- a/app/js/playerHandler.js
+++ b/app/js/playerHandler.js
@@ -1,22 +1,4 @@
 const controls = document.getElementsByClassName('ctrl')
-// btnfull = document.querySelector('#bfull'),
-// btnpp = document.querySelector('#bpp')
-// player = document.querySelector('#player'),
-// volume = document.querySelector('#vol'),
-// progress = document.querySelector('#prog'),
-// peers = document.querySelector('#peers'),
-// downSpeed = document.querySelector('#down'),
-// upSpeed = document.querySelector('#up'),
-// playPause = document.querySelector('#ptoggle'),
-// btnpp = document.querySelector('#bpp'),
-// btnm = document.querySelector("#bmute"),
-// btnpip = document.querySelector('#bpip'),
-// elapsed = document.querySelector("#elapsed"),
-// remaining = document.querySelector("#remaining"),
-// buffering = document.querySelector("#buffering"),
-// nowPlayingDisplay = document.querySelector("#nowPlayingDisplay")
-// dl = document.querySelector("#dl")
-
 
 // event listeners
 volume.addEventListener("input", function () {
@@ -52,6 +34,7 @@ function resetVideo() {
     }
     video.src = ""
     video.id = "video"
+    video.volume = settings.player1 / 100
     video.style.setProperty("--sub-font", settings.subtitle1);
     video.addEventListener("playing", resetBuffer);
     video.addEventListener("loadeddata", initThumbnail);
@@ -75,6 +58,8 @@ function updateDisplay() {
 function dragBar() {
     video.pause()
     updateBar(progress.value / 10)
+    let bg = thumbnails.length == 0 ? "" : thumbnails[Math.floor(currentTime / 5) || 0]
+    thumb.src = bg || ""
 }
 
 function dragBarEnd() {
@@ -92,11 +77,10 @@ function updateBar(progressPercent) {
     if (document.location.href.endsWith("#player")) {
         currentTime = video.duration * progressPercent / 100
         progress.style.setProperty("--progress", progressPercent + "%");
+        thumb.style.setProperty("--progress", progressPercent + "%");
         elapsed.innerHTML = toTS(currentTime);
         remaining.innerHTML = toTS(video.duration - currentTime);
         progress.value = progressPercent * 10
-        let bg = thumbnails.length == 0 ? "" : thumbnails[Math.floor(currentTime / 5) || 0]
-        progress.style.setProperty("--background", "url(" + (bg || "") + ")")
         progress.setAttribute("data-ts", toTS(currentTime))
     }
 }
@@ -115,7 +99,7 @@ function initThumbnail() {
         h = parseInt(w / ratio)
         canvas.width = w;
         canvas.height = h;
-        progress.style.setProperty("--height", h + "px");
+        thumb.style.setProperty("--height", h + "px");
     }
 }
 
diff --git a/app/js/torrentHandler.js b/app/js/torrentHandler.js
index 62310ad..fc134f2 100644
--- a/app/js/torrentHandler.js
+++ b/app/js/torrentHandler.js
@@ -1,9 +1,14 @@
-const client = new WebTorrent(),
-    announceList = [
+var client = new WebTorrent()
+window.onbeforeunload = ()=>{
+    client.torrents[0].store.destroy()
+    client.torrents[0].destroy()
+    client.destroy()
+ }
+const announceList = [
         ['wss://tracker.openwebtorrent.com'],
         ['wss://tracker.btorrent.xyz'],
-        ['wss://tracker.webtorrent.io'],
-        ['wss://tracker.fastcast.nz'],
+        // ['wss://tracker.webtorrent.io'],
+        // ['wss://tracker.fastcast.nz'],
         ['wss://video.blender.org:443/tracker/socket'],
         ['wss://tube.privacytools.io:443/tracker/socket'],
         ['wss://tracker.sloppyta.co:443/announce'],
@@ -45,10 +50,12 @@ WEBTORRENT_ANNOUNCE = announceList
         return url.indexOf('wss://') === 0 || url.indexOf('ws://') === 0
     })
 let nowPlaying,
-    maxTorrents = 1
+    maxTorrents = 1,
+    selectedTorrent
 async function addTorrent(magnet) {
     if (client.torrents.length >= maxTorrents) {
-        client.remove(client.torrents[0].infoHash)
+        client.torrents[0].store.destroy()
+        client.torrents[0].destroy()
     }
     halfmoon.hideModal("tsearch")
     document.location.href = "#player"
@@ -56,19 +63,6 @@ async function addTorrent(magnet) {
     selected ? selPlaying(selected) : ""
     await sw
     client.add(magnet, async function (torrent) {
-        function onProgress() {
-            if (document.location.href.endsWith("#player")) {
-                player.style.setProperty("--download", torrent.progress * 100 + "%");
-                peers.textContent = torrent.numPeers
-                downSpeed.textContent = prettyBytes(torrent.downloadSpeed) + '/s'
-                upSpeed.textContent = prettyBytes(torrent.uploadSpeed) + '/s'
-            }
-        }
-        setInterval(onProgress, 100)
-        // torrent.on('download', onProgress)
-        // torrent.on('upload', onProgress)
-        // torrent.on('warning', console.log) // too spammy for now
-        // torrent.on('error', console.log)
         torrent.on('noPeers', function () {
             halfmoon.initStickyAlert({
                 content: `Couldn't find peers for <span class="text-break">${torrent.infoHash}</span>! Try a torrent with more seeders.`,
@@ -83,6 +77,7 @@ async function addTorrent(magnet) {
                 videoFile = file
             }
         })
+        selectedTorrent = torrent
         torrent.on('done', function () {
             halfmoon.initStickyAlert({
                 content: `<span class="text-break">${torrent.infoHash}</span> has finished downloading. Now seeding.`,
@@ -98,6 +93,15 @@ async function addTorrent(magnet) {
     })
 
 }
+function onProgress() {
+    if (document.location.href.endsWith("#player") && selectedTorrent) {
+        player.style.setProperty("--download", selectedTorrent.progress * 100 + "%");
+        peers.textContent = selectedTorrent.numPeers
+        downSpeed.textContent = prettyBytes(selectedTorrent.downloadSpeed) + '/s'
+        upSpeed.textContent = prettyBytes(selectedTorrent.uploadSpeed) + '/s'
+    }
+}
+setInterval(onProgress, 100)
 
 
 function serveFile(file, req) {
diff --git a/app/sw.js b/app/sw.js
index 37d8f9b..5baf2cf 100644
--- a/app/sw.js
+++ b/app/sw.js
@@ -17,25 +17,25 @@ const FILES_TO_CACHE = [
 ];
 
 self.addEventListener('install', (evt) => {
-  evt.waitUntil(
-    caches.open(CACHE_NAME).then((cache) => {
-      return cache.addAll(FILES_TO_CACHE);
-    })
-  );
+  // evt.waitUntil(
+  //   caches.open(CACHE_NAME).then((cache) => {
+  //     return cache.addAll(FILES_TO_CACHE);
+  //   })
+  // );
   self.skipWaiting();
 });
 
 self.addEventListener('activate', (evt) => {
-  evt.waitUntil(
-    caches.keys().then((keyList) => {
-      return Promise.all(keyList.map((key) => {
-        if (key !== CACHE_NAME) {
-          return caches.delete(key);
-        }
-      }));
-    })
-  );
-  self.clients.claim();
+  // evt.waitUntil(
+  //   caches.keys().then((keyList) => {
+  //     return Promise.all(keyList.map((key) => {
+  //       if (key !== CACHE_NAME) {
+  //         return caches.delete(key);
+  //       }
+  //     }));
+  //   })
+  // );
+  return self.clients.claim();
 });
 
 self.addEventListener('fetch', evt => {