fix: defer video loading to improve general performance

eXaminator · Jul 3, 2021 · 21bb617 · 21bb617
1 parent 750ae80
commit 21bb617
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 9 deletions.
diff --git a/src/index.css b/src/index.css
@@ -33,6 +33,12 @@
     opacity: 0;
 }
 
+.filepicker .video-parent.-loading:hover:after {
+    opacity: .8;
+    content: '\f021';
+    animation: animation-preview-spin 1.5s linear infinite;
+}
+
 .filepicker .video-preview {
     box-sizing: border-box;
     border: 1px solid #000;
@@ -61,4 +67,10 @@
     object-position: 50% 50%;
     margin-right: 10px;
     border: none;
-}
+}
+
+@keyframes animation-preview-spin {
+    100% {
+        transform: rotate(360deg);
+    }
+}
diff --git a/src/index.js b/src/index.js
@@ -5,25 +5,29 @@ Hooks.on('renderFilePicker', (filePicker, html) => {
         const path = $parent.data('path');
         const width = $img.attr('width');
         const height = $img.attr('height');
-        const $video = $(`<video preload="metadata" class="fas video-preview" src="${path}" loop width="${width}" height="${height}"></video>`);
+        const $video = $(`<video class="fas video-preview" loop width="${width}" height="${height}"></video>`);
         $img.replaceWith($video);
 
         const video = $video.get(0);
+        let playTimeout = null;
+        $parent.addClass('video-parent -loading');
 
-        video.addEventListener('durationchange', () => {
-            video.currentTime = Math.round(video.duration / 2);
+        video.addEventListener('loadeddata', () => {
+            $parent.removeClass('-loading');
         }, false);
 
-        $parent.addClass('video-parent');
-
         $parent.hover(
             () => {
-                video.currentTime = 0;
-                video.play().catch(() => null);
+                playTimeout = setTimeout(() => {
+                    if (!video.src) video.src = path;
+                    video.currentTime = 0;
+                    video.play().catch(e => console.error(e));
+                }, !!video.src ? 0 : 750);
             },
             () => {
+                clearTimeout(playTimeout);
                 video.pause();
-                video.currentTime = Math.round(video.duration / 2);
+                video.currentTime = 0;
             },
         );
     });