fixes, improvements, mediasession

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;

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);
-}
+}

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")
     })
 }