updated yt-dlp and added lazy-loader component.

Pipfile.lock

@@ -374,32 +374,32 @@
         },
         "debugpy": {
             "hashes": [
-                "sha256:016a9fcfc2c6b57f939673c874310d8581d51a0fe0858e7fac4e240c5eb743cb",
-                "sha256:0de56aba8249c28a300bdb0672a9b94785074eb82eb672db66c8144fff673146",
-                "sha256:1a9fe0829c2b854757b4fd0a338d93bc17249a3bf69ecf765c61d4c522bb92a8",
-                "sha256:28acbe2241222b87e255260c76741e1fbf04fdc3b6d094fcf57b6c6f75ce1242",
-                "sha256:3a79c6f62adef994b2dbe9fc2cc9cc3864a23575b6e387339ab739873bea53d0",
-                "sha256:3bda0f1e943d386cc7a0e71bfa59f4137909e2ed947fb3946c506e113000f741",
-                "sha256:3ebb70ba1a6524d19fa7bb122f44b74170c447d5746a503e36adc244a20ac539",
-                "sha256:58911e8521ca0c785ac7a0539f1e77e0ce2df753f786188f382229278b4cdf23",
-                "sha256:6df9aa9599eb05ca179fb0b810282255202a66835c6efb1d112d21ecb830ddd3",
-                "sha256:7a3afa222f6fd3d9dfecd52729bc2e12c93e22a7491405a0ecbf9e1d32d45b39",
-                "sha256:7eb7bd2b56ea3bedb009616d9e2f64aab8fc7000d481faec3cd26c98a964bcdd",
-                "sha256:92116039b5500633cc8d44ecc187abe2dfa9b90f7a82bbf81d079fcdd506bae9",
-                "sha256:a2e658a9630f27534e63922ebf655a6ab60c370f4d2fc5c02a5b19baf4410ace",
-                "sha256:bfb20cb57486c8e4793d41996652e5a6a885b4d9175dd369045dad59eaacea42",
-                "sha256:caad2846e21188797a1f17fc09c31b84c7c3c23baf2516fed5b40b378515bbf0",
-                "sha256:d915a18f0597ef685e88bb35e5d7ab968964b7befefe1aaea1eb5b2640b586c7",
-                "sha256:dda73bf69ea479c8577a0448f8c707691152e6c4de7f0c4dec5a4bc11dee516e",
-                "sha256:e38beb7992b5afd9d5244e96ad5fa9135e94993b0c551ceebf3fe1a5d9beb234",
-                "sha256:edcc9f58ec0fd121a25bc950d4578df47428d72e1a0d66c07403b04eb93bcf98",
-                "sha256:efd3fdd3f67a7e576dd869c184c5dd71d9aaa36ded271939da352880c012e703",
-                "sha256:f696d6be15be87aef621917585f9bb94b1dc9e8aced570db1b8a6fc14e8f9b42",
-                "sha256:fd97ed11a4c7f6d042d320ce03d83b20c3fb40da892f994bc041bbc415d7a099"
+                "sha256:0600faef1d0b8d0e85c816b8bb0cb90ed94fc611f308d5fde28cb8b3d2ff0fe3",
+                "sha256:1523bc551e28e15147815d1397afc150ac99dbd3a8e64641d53425dba57b0ff9",
+                "sha256:15bc2f4b0f5e99bf86c162c91a74c0631dbd9cef3c6a1d1329c946586255e859",
+                "sha256:16c8dcab02617b75697a0a925a62943e26a0330da076e2a10437edd9f0bf3755",
+                "sha256:16e16df3a98a35c63c3ab1e4d19be4cbc7fdda92d9ddc059294f18910928e0ca",
+                "sha256:2cbd4d9a2fc5e7f583ff9bf11f3b7d78dfda8401e8bb6856ad1ed190be4281ad",
+                "sha256:3f8c3f7c53130a070f0fc845a0f2cee8ed88d220d6b04595897b66605df1edd6",
+                "sha256:40f062d6877d2e45b112c0bbade9a17aac507445fd638922b1a5434df34aed02",
+                "sha256:5a019d4574afedc6ead1daa22736c530712465c0c4cd44f820d803d937531b2d",
+                "sha256:5d3ccd39e4021f2eb86b8d748a96c766058b39443c1f18b2dc52c10ac2757835",
+                "sha256:62658aefe289598680193ff655ff3940e2a601765259b123dc7f89c0239b8cd3",
+                "sha256:7ee2e1afbf44b138c005e4380097d92532e1001580853a7cb40ed84e0ef1c3d2",
+                "sha256:7f8d57a98c5a486c5c7824bc0b9f2f11189d08d73635c326abef268f83950326",
+                "sha256:8a13417ccd5978a642e91fb79b871baded925d4fadd4dfafec1928196292aa0a",
+                "sha256:95378ed08ed2089221896b9b3a8d021e642c24edc8fef20e5d4342ca8be65c00",
+                "sha256:acdf39855f65c48ac9667b2801234fc64d46778021efac2de7e50907ab90c634",
+                "sha256:bd11fe35d6fd3431f1546d94121322c0ac572e1bfb1f6be0e9b8655fb4ea941e",
+                "sha256:c78ba1680f1015c0ca7115671fe347b28b446081dada3fedf54138f44e4ba031",
+                "sha256:cf327316ae0c0e7dd81eb92d24ba8b5e88bb4d1b585b5c0d32929274a66a5210",
+                "sha256:d3408fddd76414034c02880e891ea434e9a9cf3a69842098ef92f6e809d09afa",
+                "sha256:e24ccb0cd6f8bfaec68d577cb49e9c680621c336f347479b3fce060ba7c09ec1",
+                "sha256:f179af1e1bd4c88b0b9f0fa153569b24f6b6f3de33f94703336363ae62f4bf47"
             ],
             "index": "pypi",
             "markers": "python_version >= '3.8'",
-            "version": "==1.8.1"
+            "version": "==1.8.2"
         },
         "exceptiongroup": {
             "hashes": [
@@ -844,12 +844,12 @@
         },
         "python-socketio": {
             "hashes": [
-                "sha256:ae6a1de5c5209ca859dc574dccc8931c4be17ee003e74ce3b8d1306162bb4a37",
-                "sha256:b9f22a8ff762d7a6e123d16a43ddb1a27d50f07c3c88ea999334f2f89b0ad52b"
+                "sha256:194af8cdbb7b0768c2e807ba76c7abc288eb5bb85559b7cddee51a6bc7a65737",
+                "sha256:2a923a831ff70664b7c502df093c423eb6aa93c1ce68b8319e840227a26d8b69"
             ],
             "index": "pypi",
             "markers": "python_version >= '3.8'",
-            "version": "==5.11.2"
+            "version": "==5.11.3"
         },
         "pytz": {
             "hashes": [
@@ -908,11 +908,11 @@
         },
         "urllib3": {
             "hashes": [
-                "sha256:450b20ec296a467077128bff42b73080516e71b56ff59a60a02bef2232c4fa9d",
-                "sha256:d0570876c61ab9e520d776c38acbbb5b05a776d3f9ff98a5c8fd5162a444cf19"
+                "sha256:a448b2f64d686155468037e1ace9f2d2199776e17f0a46610480d311f73e3472",
+                "sha256:dd505485549a7a552833da5e6063639d0d177c04f23bc3864e41e5dc5f612168"
             ],
             "markers": "python_version >= '3.8'",
-            "version": "==2.2.1"
+            "version": "==2.2.2"
         },
         "websockets": {
             "hashes": [
@@ -1098,12 +1098,12 @@
         },
         "yt-dlp": {
             "hashes": [
-                "sha256:3566c0de240d0cd3d1c2285ce655f72ca38dfc618d634d46818b00d89d5288be",
-                "sha256:5dbedb7610ae9440cc44e744f528e078828142bbe09af950cf7e99ce69c866d9"
+                "sha256:2479540f7a7bdea30258c7a46dfbd96e0904e706247db95c94bfa5a04239698a",
+                "sha256:eb0019474ffde6979378c07555fa01173cf55bde90b172a0181b5716793aaef2"
             ],
             "index": "pypi",
             "markers": "python_version >= '3.8'",
-            "version": "==2024.5.27"
+            "version": "==2024.7.1"
         }
     },
     "develop": {}

frontend/src/components/Lazy-Loader.vue

@@ -0,0 +1,76 @@
+<template>
+  <div ref="targetEl" :style="`min-height:${fixedMinHeight ? fixedMinHeight : (minHeight)}px`">
+    <slot v-if="shouldRender"/>
+  </div>
+</template>
+
+<script>
+import {nextTick, ref} from 'vue'
+import {useIntersectionObserver} from '@vueuse/core'
+
+function onIdle(cb = () => {
+}) {
+  if ("requestIdleCallback" in window) {
+    window.requestIdleCallback(cb);
+  } else {
+    setTimeout(() => nextTick(cb), 300);
+  }
+}
+
+export default {
+  props: {
+    renderOnIdle: Boolean,
+    unrender: Boolean,
+    minHeight: Number,
+    unrenderDelay: {
+      type: Number,
+      default: 6000,
+    },
+  },
+  setup(props) {
+    const shouldRender = ref(false);
+    const targetEl = ref();
+    const fixedMinHeight = ref(0);
+    let unrenderTimer;
+    let renderTimer;
+
+    const {stop} = useIntersectionObserver(targetEl, ([{isIntersecting}]) => {
+          if (isIntersecting) {
+            // perhaps the user re-scrolled to a component that was set to unrender. In that case stop the un-rendering timer
+            clearTimeout(unrenderTimer);
+            // if we're dealing under-rendering lets add a waiting period of 200ms before rendering.
+            // If a component enters the viewport and also leaves it within 200ms it will not render at all.
+            // This saves work and improves performance when user scrolls very fast
+            renderTimer = setTimeout(() => (shouldRender.value = true), props.unrender ? 200 : 0);
+            shouldRender.value = true;
+            if (!props.unrender) {
+              stop();
+            }
+          } else if (props.unrender) {
+            // if the component was set to render, cancel that
+            clearTimeout(renderTimer);
+            unrenderTimer = setTimeout(() => {
+              if (targetEl.value?.clientHeight) {
+                fixedMinHeight.value = targetEl.value.clientHeight;
+              }
+              shouldRender.value = false;
+            }, props.unrenderDelay);
+          }
+        }, {
+          rootMargin: "600px",
+        }
+    );
+
+    if (props.renderOnIdle) {
+      onIdle(() => {
+        shouldRender.value = true;
+        if (!props.unrender) {
+          stop();
+        }
+      });
+    }
+
+    return {targetEl, shouldRender, fixedMinHeight};
+  },
+};
+</script>

frontend/src/components/Page-Completed.vue

@@ -76,7 +76,7 @@
     </div>
 
     <div class="columns is-multiline">
-      <div class="column is-6" v-for="item in sortCompleted" :key="item._id">
+      <LazyLoader :unrender="true" :min-height="210" class="column is-6" v-for="item in sortCompleted" :key="item._id">
         <div class="card" :class="{ 'is-bordered-danger': item.status === 'error', 'is-bordered-info': item.live_in || item.is_live }">
           <header class="card-header has-tooltip" v-tooltip="item.title">
             <div class="card-header-title has-text-centered is-text-overflow is-block">
@@ -188,7 +188,7 @@
             </div>
           </div>
         </div>
-      </div>
+      </LazyLoader>
     </div>
 
     <div class="content has-text-centered" v-if="!hasItems">
@@ -216,6 +216,7 @@
 import { defineProps, computed, ref, watch, defineEmits } from 'vue';
 import moment from "moment";
 import { useStorage } from '@vueuse/core'
+import LazyLoader from './Lazy-Loader'
 
 const emits = defineEmits(['deleteItem', 'addItem', 'playItem']);
 

frontend/src/components/Page-Downloading.vue

@@ -35,7 +35,7 @@
     </div>
 
     <div class="columns is-multiline">
-      <div class="column is-6" v-for="item in queue" :key="item._id">
+      <LazyLoader :unrender="true" :min-height="265" class="column is-6" v-for="item in queue" :key="item._id">
         <div class="card">
           <header class="card-header has-tooltip" v-tooltip="item.title">
             <div class="card-header-title has-text-centered is-text-overflow is-block">
@@ -96,7 +96,7 @@
             </div>
           </div>
         </div>
-      </div>
+      </LazyLoader>
     </div>
 
     <div class="content has-text-centered" v-if="!hasQueuedItems">
@@ -124,6 +124,7 @@
 import { defineProps, defineEmits, ref, watch, computed } from 'vue';
 import moment from "moment";
 import { useStorage } from '@vueuse/core'
+import LazyLoader from './Lazy-Loader'
 
 const emit = defineEmits(['deleteItem']);
 

frontend/src/components/Page-Header.vue

@@ -8,8 +8,7 @@
     </div>
     <div class="navbar-end">
       <div class="navbar-item">
-        <button v-tooltip="'Toggle Console'" class="button is-dark has-tooltip-bottom"
-          @click="$emit('toggleConsole')">
+        <button v-tooltip="'Toggle Console'" class="button is-dark has-tooltip-bottom" @click="$emit('toggleConsole')">
           <font-awesome-icon icon="fa-solid fa-terminal" />
         </button>
       </div>
@@ -96,7 +95,7 @@ const applyPreferredColorScheme = (scheme) => {
           }
         }
       } catch (e) {
-        console.debug(e);
+        // pass
       }
     }
   }
@@ -106,7 +105,7 @@ onMounted(() => {
   try {
     applyPreferredColorScheme(selectedTheme.value);
   } catch (e) {
-    console.debug(e);
+    // pass
   }
 })
 
@@ -114,7 +113,7 @@ watch(selectedTheme, (value) => {
   try {
     applyPreferredColorScheme(value);
   } catch (e) {
-    console.debug(e);
+    // pass
   }
 })