performance stonks, player improvements, optimziations, code cleanup, better download UX

app/css/player.css

@@ -5,6 +5,7 @@
     --progress: 0%;
     --buffer: 0%;
     --height: 0;
+    --download: 0%;
     color: #b6b6b6;
     --sidebar-width: 19rem;
     --ts: "";
@@ -32,6 +33,7 @@
 
 .immersed {
     cursor: none;
+    border: none !important;
 }
 
 .immersed .controls,
@@ -57,11 +59,12 @@
     position: absolute;
     z-index: 10
 }
-#dl{
-    display: none
-}
-#dl[download]{
-    display: block
+#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 {
@@ -193,7 +196,7 @@ video::cue {
     white-space: nowrap;
     align-self: center;
     padding: 0 1.2rem;
-    left: var(--left);
+    left: var(--progress);
     font-weight: 600;
     transition: .2s opacity ease;
 }
@@ -206,9 +209,16 @@ video::cue {
     top: -2rem;
 }
 
-.ctrl[disabled] {
+
+.ctrl[disabled],
+#player:fullscreen #bpip,
+#player:fullscreen #btheatre{
     display: none;
 }
+#dl:not([download]) > span{
+    cursor: not-allowed;
+    color: rgba(255,255,255,.4);
+}
 
 .controls input#progress[type=range]::before {
     top: .5rem;

app/index.html

@@ -95,7 +95,7 @@
             </div>
         </div>
     </div>
-    <div class="page-wrapper with-sidebar" data-sidebar-type="overlayed-sm-and-down">
+    <div class="page-wrapper with-sidebar" data-sidebar-type="full-height">
         <div class="sticky-alerts"></div>
 
         <div class="sidebar-overlay" onclick="halfmoon.toggleSidebar()"></div>
@@ -145,15 +145,15 @@
                             <span class="material-icons">
                                 people
                             </span>
-                            <span class="ts" id="peers">-</span>
+                            <span class="ts" id="peers">0</span>
                             <span class="material-icons">
                                 arrow_downward
                             </span>
-                            <span class="ts" id="downSpeed">-</span>
+                            <span class="ts" id="downSpeed">0 B/s</span>
                             <span class="material-icons">
                                 arrow_upward
                             </span>
-                            <span class="ts" id="upSpeed">-</span>
+                            <span class="ts" id="upSpeed">0 B/s</span>
                         </div>
                         <div class="col d-flex justify-content-end">
                             <a id="dl" class="material-icons">
@@ -340,9 +340,9 @@
     <script src="js/animeHandler.js"></script>
     <script src="js/playerHandler.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/webtorrent@latest/webtorrent.min.js"></script>
-    <script src="js/torrentHandler.js"></script>
     <script src="js/rangeParser.js"></script>
-    <script src="js/bundle.min.js"></script>
+    <script src="js/torrentHandler.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/matroska-subtitles@3.0.1/dist/matroska-subtitles.min.js"></script>
     <script src="js/subtitleHandler.js"></script>
 </body>
 

app/js/playerHandler.js

@@ -96,7 +96,6 @@ function updateBar(progressPercent) {
     progress.value = progressPercent * 10
     let bg = thumbnails.length == 0 ? "" : thumbnails[Math.floor(currentTime / 5) || 0]
     progress.style.setProperty("--background", "url(" + (bg || "") + ")")
-    progress.style.setProperty("--left", progressPercent + "%")
     progress.setAttribute("data-ts", toTS(currentTime))
 }
 
@@ -135,7 +134,7 @@ function finishThumbnails(file) {
         file.getBlobURL((err, url) => {
             thumbVid.src = url
         })
-        thumbVid.addEventListener('loadeddata', function (e) {
+        thumbVid.addEventListener('loadeddata', function () {
             loadTime();
         }, false)
 
@@ -166,7 +165,7 @@ function downloadFile(file) {
 
 let buffer;
 function resetBuffer() {
-    if (!!buffer) {
+    if (buffer) {
         clearTimeout(buffer)
         buffer = undefined
         buffering.classList.add('hidden')
@@ -280,11 +279,7 @@ updateVolume(parseInt(settings.player1))
 // PiP
 
 async function btnpip() {
-    if (video !== document.pictureInPictureElement) {
-        await video.requestPictureInPicture();
-    } else {
-        await document.exitPictureInPicture();
-    }
+    video !== document.pictureInPictureElement ? await video.requestPictureInPicture() : await document.exitPictureInPicture();
 }
 
 //miniplayer
@@ -300,22 +295,10 @@ function btntheatre() {
 // fullscreen
 
 function btnfull() {
-    if (!document.fullscreenElement) {
-        player.requestFullscreen();
-    } else if (document.exitFullscreen) {
-        document.exitFullscreen();
-    }
+    document.fullscreenElement ? document.exitFullscreen() : player.requestFullscreen();
 }
 function updateFullscreen() {
-    if (document.fullscreenElement) {
-        bfull.innerHTML = "fullscreen_exit"
-        bpip.setAttribute("disabled", "")
-        btheatre.setAttribute("disabled", "")
-    } else {
-        bfull.innerHTML = "fullscreen"
-        settings.player7 ? bpip.removeAttribute("disabled", "") : ""
-        btheatre.removeAttribute("disabled", "")
-    }
+    document.fullscreenElement ? bfull.innerHTML = "fullscreen_exit" : bfull.innerHTML = "fullscreen"
 }
 
 //seeking and skipping

app/js/subtitleHandler.js

@@ -1,12 +1,13 @@
 let tracks = [],
   subtitleStream
+const { SubtitleStream } = MatroskaSubtitles
 
 function parseSubs(stream) {
   if (video.src.endsWith(".mkv")) {
     if (subtitleStream) {
       subtitleStream = new SubtitleStream(subtitleStream)
-    } else {  
-      subtitleStream = new SubtitleStream() 
+    } else {
+      subtitleStream = new SubtitleStream()
       subtitleStream.once('tracks', function (pTracks) {
         pTracks.forEach(track => {
           tracks[track.number] = video.addTextTrack('captions', track.type, track.language || track.number)

app/js/torrentHandler.js

@@ -57,10 +57,12 @@ async function addTorrent(magnet) {
     await sw
     client.add(magnet, async function (torrent) {
         function onProgress() {
+            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, 500)
         torrent.on('download', onProgress)
         torrent.on('upload', onProgress)
         // torrent.on('warning', console.log) // too spammy for now
@@ -80,7 +82,6 @@ async function addTorrent(magnet) {
             }
         })
         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",
@@ -101,7 +102,7 @@ function serveFile(file, req) {
     const res = {
         status: 200,
         headers: {
-            'Content-Type': file._getMimeType() ? file._getMimeType() : 'video/webm',
+            'Content-Type': file._getMimeType() || 'video/webm',
             // Support range-requests
             'Accept-Ranges': 'bytes'
         }