add padding to galleries, WAIT lookup now shows image, subtitle resizing detection now doesnt clean out subtites, resizing has a timeout buffer

app/css/misc.css

@@ -122,7 +122,7 @@ input:invalid {
     grid-auto-rows: auto;
     justify-content: center;
     grid-gap: 2rem;
-    padding: 4rem
+    padding: 2rem 4rem
 }
 
 #browse.loading .gallery {

app/index.html

@@ -250,10 +250,6 @@
                     </div>
                 </div>
             </section>
-            <section id="browse" class="flex-column">
-                <div class="gallery browse overflow-y-auto">
-                </div>
-            </section>
             <section id="home" class="flex-column overflow-y-auto">
                 <div class="h-full p-10">
                     <a class="d-flex px-20 align-items-end pointer text-decoration-none" id="homeContinueMore"
@@ -594,12 +590,16 @@
                     </div>
                 </div>
             </section>
-            <section id="downloads" class="flex-column">
-                <div class="gallery downloads overflow-y-auto">
+            <section id="browse" class="flex-column overflow-y-auto">
+                <div class="gallery browse">
                 </div>
             </section>
-            <section id="playlist" class="flex-column">
-                <div class="gallery playlist overflow-y-auto">
+            <section id="downloads" class="flex-column overflow-y-auto">
+                <div class="gallery downloads">
+                </div>
+            </section>
+            <section id="playlist" class="flex-column overflow-y-auto">
+                <div class="gallery playlist">
                 </div>
             </section>
             <section id="settingsTab" class="overflow-y-auto">

app/js/animeHandler.js

@@ -38,7 +38,7 @@ if (searchParams.get("link")) {
 }
 function traceAnime(image, type) { //WAIT lookup logic
     halfmoon.initStickyAlert({
-        content: `Looking Up Anime ${type == "uri" ? "" : `For <span class="text-break">${image}</span>`}`
+        content: `Looking up anime for image.<br><img class="w-200 rounded pt-5" src="${image}">`
     })
     let options,
         url = `https://trace.moe/api/search?url=${image}`
@@ -55,6 +55,13 @@ function traceAnime(image, type) { //WAIT lookup logic
             if (result.docs[0].similarity >= 0.85) {
                 let res = await alRequest({ method: "SearchIDSingle", id: result.docs[0].anilist_id })
                 viewAnime(res.data.Media)
+            } else {
+                halfmoon.initStickyAlert({
+                    content: `Couldn't find anime for specified image! Try to remove black bars, or use a more detailed image.`,
+                    title: "Search Failed",
+                    alertType: "alert-danger",
+                    fillType: ""
+                });
             }
         });
 }

app/js/interface.js

@@ -15,7 +15,7 @@ async function loadHomePage() {
                 browse.classList.remove("loading")
                 browseGallery.appendChild(frag)
                 browseGallery.scrollTop = 0
-                browseGallery.onscroll = undefined
+                browse.onscroll = undefined
             },
             planning: async function (page) {
                 if (!page) gallerySkeleton(browseGallery)
@@ -113,7 +113,7 @@ async function loadHomePage() {
         gallery.appendChild(gallerySkeletonFrag(10))
     }
     function galleryAppend(opts) {
-        if (opts.method) opts.gallery.onscroll = function () {
+        if (opts.method) browse.onscroll = function () {
             if (this.scrollTop + this.clientHeight > this.scrollHeight - 800 && !loadTimeout) {
                 loadTimeout = setTimeout(function () { loadTimeout = undefined }, 1000)
                 homeLoadFunctions[opts.method](opts.page + 1)

app/js/subtitles-octopus.js

@@ -60,7 +60,7 @@ var SubtitlesOctopus = function (options) {
 
     self.hasAlphaBug = false;
 
-    (function() {
+    (function () {
         if (typeof ImageData.prototype.constructor === 'function') {
             try {
                 // try actually calling ImageData, as on some browsers it's reported
@@ -579,8 +579,8 @@ var SubtitlesOctopus = function (options) {
 
                         if (self.debug) {
                             console.info('oneshot received (start=' +
-                                    data.eventStart + ', empty=' + data.emptyFinish +
-                                    '), render: ' + Math.round(data.spentTime) + ' ms');
+                                data.eventStart + ', empty=' + data.emptyFinish +
+                                '), render: ' + Math.round(data.spentTime) + ' ms');
                         }
                         self.oneshotState.renderRequested = false;
                         if (Math.abs(data.lastRenderedTime - self.oneshotState.requestNextTimestamp) < 0.01) {
@@ -723,7 +723,7 @@ var SubtitlesOctopus = function (options) {
             }
         }
 
-        return {'width': width, 'height': height};
+        return { 'width': width, 'height': height };
     }
 
     self.resize = function (width, height, top, left) {
@@ -748,36 +748,52 @@ var SubtitlesOctopus = function (options) {
 
 
         if (
-          self.canvas.width != width ||
-          self.canvas.height != height ||
-          self.canvas.style.top != top ||
-          self.canvas.style.left != left
+            self.canvas.width != width ||
+            self.canvas.height != height ||
+            self.canvas.style.top != top ||
+            self.canvas.style.left != left
         ) {
-            self.canvas.width = width;
-            self.canvas.height = height;
 
             if (videoSize != null) {
                 self.canvasParent.style.position = 'relative';
                 self.canvas.style.display = 'block';
                 self.canvas.style.position = 'absolute';
-                self.canvas.style.width = videoSize.width + 'px';
-                self.canvas.style.height = videoSize.height + 'px';
                 self.canvas.style.top = top + 'px';
                 self.canvas.style.left = left + 'px';
                 self.canvas.style.pointerEvents = 'none';
             }
-
-            self.worker.postMessage({
-                target: 'canvas',
-                width: self.canvas.width,
-                height: self.canvas.height
-            });
-            self.resetRenderAheadCache(true);
+            if (!(self.canvas.width == width && self.canvas.height == height)) {
+                // only re-paint if dimensions actually changed
+                self.canvas.width = width;
+                self.canvas.height = height;
+                if (videoSize != null) {
+                    self.canvas.style.width = videoSize.width + 'px';
+                    self.canvas.style.height = videoSize.height + 'px';
+                }
+                self.worker.postMessage({
+                    target: 'canvas',
+                    width: self.canvas.width,
+                    height: self.canvas.height
+                });
+                self.resetRenderAheadCache(true);
+            }
         }
     };
 
     self.resizeWithTimeout = function () {
-        self.resize();
+        //dont spam re-paints like crazy when re-sizing with animations, but still update instantly without them
+        if (self.resizeTimeoutBuffer) {
+            clearTimeout(self.resizeTimeoutBuffer)
+            self.resizeTimeoutBuffer = setTimeout(() => {
+                self.resizeTimeoutBuffer = undefined
+                self.resize();
+            }, 50)
+        } else {
+            self.resize();
+            self.resizeTimeoutBuffer = setTimeout(() => {
+                self.resizeTimeoutBuffer = undefined
+            }, 50)
+        }
     };
 
     self.runBenchmark = function () {

app/js/torrentHandler.js

@@ -82,7 +82,7 @@ loadOfflineStorage()
 
 // cleanup torrent and store
 function cleanupTorrents() {
-     // creates an array of all non-offline store torrents and removes them
+    // creates an array of all non-offline store torrents and removes them
     client.torrents.filter(torrent => !offlineTorrents[torrent.infoHash]).forEach(torrent => torrent.destroy({ destroyStore: true }))
 }