dynamic preview thumbnail progress

app/animeHandler.js

@@ -264,7 +264,7 @@ async function nyaaSearch(media, episode) {
         table.textContent = ""
         table.appendChild(results)
         halfmoon.toggleModal("tsearch")
-        selected = [media,parseInt(episode)]
+        selected = [media, parseInt(episode)]
     }
 }
 

app/app.html

@@ -162,6 +162,7 @@
                         <div id="buffering" class="align-self-center hidden">
                         </div>
                         <div>
+                            <img id="dThumb">
                         </div>
                     </div>
                     <div class="controls d-flex">

app/playerHandler.js

@@ -12,8 +12,11 @@ const controls = document.getElementsByClassName('ctrl'),
     btnfull = document.querySelector('#bfull'),
     elapsed = document.querySelector("#elapsed"),
     remaining = document.querySelector("#remaining"),
-    buffering = document.querySelector("#buffering")
+    buffering = document.querySelector("#buffering"),
+    thumbnail = document.querySelector("#dThumb")
 
+
+//event listeners
 volume.addEventListener("input", function () {
     updateVolume()
 });
@@ -22,6 +25,7 @@ video.addEventListener("playing", playCheck);
 video.addEventListener("playing", resetBuffer);
 video.addEventListener("canplay", updateDisplay);
 video.addEventListener("loadedmetadata", setDuration);
+video.addEventListener("loadedmetadata", initThumbnail);
 video.addEventListener("ended", bnext);
 video.addEventListener("waiting", isBuffering);
 playPause.addEventListener("click", bpp);
@@ -34,9 +38,35 @@ for (let i = 0; i < controls.length; i++) {
     })
 }
 
+// dynamic thumbnails 
+let thumbnails,
+    ratio,
+    canvas = document.createElement("canvas"),
+    context = canvas.getContext('2d');
+function initThumbnail() {
+    thumbnails = []
+    ratio = video.videoWidth / video.videoHeight;
+    w = 150
+    h = parseInt(w / ratio)
+    canvas.width = w;
+    canvas.height = h;
+}
+function createThumbnail() { 
+    let index = Math.floor(video.currentTime / 5)
+    if(thumbnails[index] == undefined){
+        context.fillRect(0, 0, w, h);
+        context.drawImage(video, 0, 0, w, h);
+        thumbnails[index] = canvas.toDataURL("image/jpeg")
+        thumbnail.src = canvas.toDataURL("image/jpeg")
+    }
+}
+
+
+//bufering spinner
+
 let buffer;
-function resetBuffer(){
-    if (!!buffer){
+function resetBuffer() {
+    if (!!buffer) {
         clearTimeout(buffer)
         buffer = undefined
         buffering.classList.add('hidden')
@@ -46,7 +76,7 @@ function resetBuffer(){
 function isBuffering() {
     buffer = setTimeout(displayBuffer, 150)
 }
-function displayBuffer (){
+function displayBuffer() {
     buffering.classList.remove('hidden')
     resetTimer()
 }
@@ -119,6 +149,7 @@ function playCheck() {
     if (!islooped && !video.paused) {
         islooped = true;
         updateDisplay();
+        createThumbnail();
         setTimeout(function () {
             islooped = false;
             playCheck();
@@ -145,7 +176,7 @@ function bpp() {
 }
 
 function bnext() {
-    nyaaSearch(nowPlaying[0], nowPlaying[1]+1)
+    nyaaSearch(nowPlaying[0], nowPlaying[1] + 1)
 }
 
 //volume shit

app/rangeParser.js

@@ -6,7 +6,7 @@
  */
 'use strict'
 
-function rangeParser (size, str, options) {
+function rangeParser(size, str, options) {
   if (typeof str !== 'string') {
     throw new TypeError('argument str must be a string')
   }
@@ -34,7 +34,7 @@ function rangeParser (size, str, options) {
     if (isNaN(start)) {
       start = size - end
       end = size - 1
-    // nnn-
+      // nnn-
     } else if (isNaN(end)) {
       end = size - 1
     }
@@ -66,7 +66,7 @@ function rangeParser (size, str, options) {
     : ranges
 }
 
-function combineRanges (ranges) {
+function combineRanges(ranges) {
   var ordered = ranges.map(mapWithIndex).sort(sortByRangeStart)
 
   for (var j = 0, i = 1; i < ordered.length; i++) {
@@ -95,7 +95,7 @@ function combineRanges (ranges) {
   return combined
 }
 
-function mapWithIndex (range, index) {
+function mapWithIndex(range, index) {
   return {
     start: range.start,
     end: range.end,
@@ -103,17 +103,17 @@ function mapWithIndex (range, index) {
   }
 }
 
-function mapWithoutIndex (range) {
+function mapWithoutIndex(range) {
   return {
     start: range.start,
     end: range.end
   }
 }
 
-function sortByRangeIndex (a, b) {
+function sortByRangeIndex(a, b) {
   return a.index - b.index
 }
 
-function sortByRangeStart (a, b) {
+function sortByRangeStart(a, b) {
   return a.start - b.start
 }

app/sw.js

@@ -1,10 +1,10 @@
 // Activate event
 // Be sure to call self.clients.claim()
-self.addEventListener('activate', evt =>  {
-	// `claim()` sets this worker as the active worker for all clients that
-	// match the workers scope and triggers an `oncontrollerchange` event for
-	// the clients.
-	return self.clients.claim()
+self.addEventListener('activate', evt => {
+  // `claim()` sets this worker as the active worker for all clients that
+  // match the workers scope and triggers an `oncontrollerchange` event for
+  // the clients.
+  return self.clients.claim()
 })
 
 self.addEventListener('fetch', evt => {
@@ -31,30 +31,30 @@ self.addEventListener('fetch', evt => {
 
   evt.respondWith(
     clients.matchAll({ type: 'window', includeUncontrolled: true })
-    .then(getConsumer)
-    .then(([data, consumer]) => {
-      const readable = 'body' in data ? data.body : new ReadableStream({
-        pull(controller) {
-          console.log('requesting data')
-          return new Promise(rs => {
-            consumer.port1.onmessage = evt => {
-              evt.data
-                ? controller.enqueue(evt.data) // evt.data is Uint8Array
-                : controller.close() // evt.data is null, means the stream ended
-              rs()
-            }
-            consumer.port1.postMessage(true) // send a pull request
-          })
-        },
-        cancel() {
-          // This event is never executed
-          console.log('request aborted')
-          consumer.port1.postMessage(false) // send a cancel request
-        }
-      })
+      .then(getConsumer)
+      .then(([data, consumer]) => {
+        const readable = 'body' in data ? data.body : new ReadableStream({
+          pull(controller) {
+            console.log('requesting data')
+            return new Promise(rs => {
+              consumer.port1.onmessage = evt => {
+                evt.data
+                  ? controller.enqueue(evt.data) // evt.data is Uint8Array
+                  : controller.close() // evt.data is null, means the stream ended
+                rs()
+              }
+              consumer.port1.postMessage(true) // send a pull request
+            })
+          },
+          cancel() {
+            // This event is never executed
+            console.log('request aborted')
+            consumer.port1.postMessage(false) // send a cancel request
+          }
+        })
 
-      return new Response(readable, data)
-    })
-    .catch(console.error)
+        return new Response(readable, data)
+      })
+      .catch(console.error)
   )
 })

app/torrentHandler.js

@@ -31,7 +31,7 @@ WEBTORRENT_ANNOUNCE = announceList
         return url.indexOf('wss://') === 0 || url.indexOf('ws://') === 0
     })
 
-    var nowPlaying
+var nowPlaying
 function addTorrent(magnet) {
     if (client.torrents[0]) {
         client.remove(client.torrents[0].infoHash)
@@ -42,8 +42,8 @@ function addTorrent(magnet) {
 
         torrent.on('download', onProgress)
         torrent.on('upload', onProgress)
-        // torrent.on('warning', console.log) // too spammy for now
-        // torrent.on('error', console.log)
+        torrent.on('warning', console.warn) // too spammy for now
+        torrent.on('error', console.error)
         torrent.on('done', function () {
             setInterval(onProgress, 5000)
             halfmoon.initStickyAlert({