diff --git a/app/css2.css b/app/css2.css index daac1b6..ca0fdc3 100644 --- a/app/css2.css +++ b/app/css2.css @@ -184,7 +184,7 @@ video[src=""] { .controls input#prog[type=range]::after, .controls input#prog[type=range]::before{ pointer-events: none; - display: none; + opacity: 0; position: absolute; transform: translate(-50%,-100%); font-family: Roboto, monospace; @@ -194,6 +194,7 @@ video[src=""] { padding: 0 1.2rem; left: var(--left); font-weight: 600; + transition: .2s opacity ease; } .controls input#prog[type=range]::after{ width: 150px; @@ -208,7 +209,7 @@ video[src=""] { } .controls input#prog[type=range]:active::after, .controls input#prog[type=range]:active::before{ - display: block + opacity: 1; } .controls input[type=range]:hover::-webkit-slider-thumb { height: 12px; diff --git a/app/playerHandler.js b/app/playerHandler.js index ed28e85..015bf04 100644 --- a/app/playerHandler.js +++ b/app/playerHandler.js @@ -22,6 +22,7 @@ volume.addEventListener("input", function () { }); progress.addEventListener("input", dragBar); progress.addEventListener("mouseup", dragBarEnd); +progress.addEventListener("click", dragBarEnd); progress.addEventListener("mousedown", dragBarStart); video.addEventListener("playing", resetBuffer); video.addEventListener("loadeddata", initThumbnail); @@ -48,15 +49,17 @@ function updateDisplay() { updateBar(progressPercent || progress.value / 10); createThumbnail(video); } -function dragBar(){ +function dragBar() { + video.pause() updateBar(progress.value / 10) } -function dragBarEnd(){ +function dragBarEnd() { video.currentTime = currentTime || 0 playVideo() } -function dragBarStart(){ - video.pause() +async function dragBarStart() { + await video.pause() + updateBar(progress.value / 10) } let currentTime function updateBar(progressPercent) { @@ -65,8 +68,8 @@ function updateBar(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||"")+")") + 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)) } @@ -95,18 +98,18 @@ function createThumbnail(vid) { thumbnails[index] = canvas.toDataURL("image/jpeg") } } -function finishThumbnails(){ +function finishThumbnails() { let thumbVid = document.createElement("video") thumbVid.src = video.src thumbVid.addEventListener('loadeddata', function (e) { loadTime(); }, false); - - thumbVid.addEventListener('seeked', function() { + + thumbVid.addEventListener('seeked', function () { createThumbnail(thumbVid); loadTime(); }, false); - + function loadTime() { if (thumbVid.ended == false) { thumbVid.currentTime = thumbVid.currentTime + 5; @@ -154,7 +157,7 @@ let islooped; function toTS(sec) { - if (Number.isNaN(sec)){ + if (Number.isNaN(sec)) { return "--:--"; } let hours = Math.floor(sec / 3600), @@ -294,20 +297,24 @@ document.onkeydown = function (a) { } } //media session +function nowPlaying(sel) { + nowPlaying = sel + if ('mediaSession' in navigator) { + + navigator.mediaSession.metadata = new MediaMetadata({ + title: !!nowPlaying[0].title.english ? nowPlaying[0].title.english : nowPlaying[0].title.romaji, + artist: 'Miru', + artwork: [ + { + src: nowPlaying[0].coverImage.medium, + sizes: '128x128', + type: 'image/png' + } + ] + }); + } +} if ('mediaSession' in navigator) { - - navigator.mediaSession.metadata = new MediaMetadata({ - title: 'THE GOD OF HIGH SCHOOL', - artist: 'Miru', - artwork: [ - { - src: 'https://s4.anilist.co/file/anilistcdn/media/anime/cover/small/bx116006-XasdW0bB4n18.png', - sizes: '128x128', - type: 'image/png' - } - ] - }); - navigator.mediaSession.setActionHandler('play', bpp); navigator.mediaSession.setActionHandler('pause', bpp); navigator.mediaSession.setActionHandler('seekbackward', function () { @@ -317,4 +324,4 @@ if ('mediaSession' in navigator) { seek(2); }); navigator.mediaSession.setActionHandler('nexttrack', bnext); -} \ No newline at end of file +} diff --git a/app/torrentHandler.js b/app/torrentHandler.js index f1b4474..aadf77b 100644 --- a/app/torrentHandler.js +++ b/app/torrentHandler.js @@ -19,6 +19,10 @@ const client = new WebTorrent(), ['ws://tracker.files.fm:7072/announce'], ['ws://tracker.btsync.cf:6969/announce'], ['ws://hub.bugout.link:80/announce'] + ], + videoExtensions = [ + '.avi', '.mp4', '.m4v', '.webm', '.mov', '.mkv', '.mpg', '.mpeg', + '.ogv', '.webm', '.wmv', '.m2ts' ] client.remove('06d67cc41f44fd57241551b6d95c2d1de38121ae') @@ -78,7 +82,7 @@ function addTorrent(magnet) { }) video.src = `/webtorrent/${torrent.infoHash}/${encodeURI(videoFile.path)}` document.location.href = "#player" - nowPlaying = [selected[0], selected[1]] + nowPlaying(selected) halfmoon.toggleModal("tsearch") }) }