From b3d336fe91fc2cdef2938762f7f5b0d0e84ee89c Mon Sep 17 00:00:00 2001 From: ThaUnknown Date: Mon, 28 Sep 2020 18:58:00 +0200 Subject: [PATCH] performance stonks, player improvements, optimziations, code cleanup, better download UX --- app/css/player.css | 24 +++++++++++++++++------- app/index.html | 12 ++++++------ app/js/playerHandler.js | 27 +++++---------------------- app/js/subtitleHandler.js | 5 +++-- app/js/torrentHandler.js | 5 +++-- 5 files changed, 34 insertions(+), 39 deletions(-) diff --git a/app/css/player.css b/app/css/player.css index 4162e68..f135aa3 100644 --- a/app/css/player.css +++ b/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; diff --git a/app/index.html b/app/index.html index e78a210..815b276 100644 --- a/app/index.html +++ b/app/index.html @@ -95,7 +95,7 @@ -
+
@@ -145,15 +145,15 @@ people - - + 0 arrow_downward - - + 0 B/s arrow_upward - - + 0 B/s
@@ -340,9 +340,9 @@ - - + + diff --git a/app/js/playerHandler.js b/app/js/playerHandler.js index 5d42633..47666ff 100644 --- a/app/js/playerHandler.js +++ b/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 diff --git a/app/js/subtitleHandler.js b/app/js/subtitleHandler.js index b82a103..61c37ed 100644 --- a/app/js/subtitleHandler.js +++ b/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) diff --git a/app/js/torrentHandler.js b/app/js/torrentHandler.js index 2451ea9..9ee4c58 100644 --- a/app/js/torrentHandler.js +++ b/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: `${torrent.infoHash} 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' }