From eb618e0ccdc230d6d6fa0004816edf729b4a65f5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tom=C3=A1=C5=A1=20Ml=C3=A1dek?= <t@mldk.cz>
Date: Sat, 30 Apr 2022 20:29:07 +0200
Subject: [PATCH] [ui] video viewer improvements

fix layout before thumb loads
fix vertical overflow
don't start video on thumb click
---
 .../display/blobs/VideoViewer.svelte          | 33 +++++++++++++++----
 1 file changed, 27 insertions(+), 6 deletions(-)

diff --git a/webui/src/components/display/blobs/VideoViewer.svelte b/webui/src/components/display/blobs/VideoViewer.svelte
index 9701aae..4212e03 100644
--- a/webui/src/components/display/blobs/VideoViewer.svelte
+++ b/webui/src/components/display/blobs/VideoViewer.svelte
@@ -17,7 +17,7 @@
   let videoEl: HTMLVideoElement;
 
   const seek = throttle((progress: number) => {
-    if (state === State.PREVIEWING) {
+    if (state === State.PREVIEWING && videoEl.duration) {
       videoEl.currentTime = videoEl.duration * progress;
     }
   }, 100);
@@ -39,8 +39,10 @@
   }
 
   function startPlaying() {
-    state = State.PLAYING;
-    videoEl.play();
+    if (detail) {
+      state = State.PLAYING;
+      videoEl.play();
+    }
   }
 </script>
 
@@ -49,6 +51,7 @@
     <Spinner />
 
     <img
+      class="thumb"
       src="api/thumb/{address}"
       alt={address}
       on:load={() => (state = State.PREVIEW)}
@@ -78,11 +81,23 @@
 
 <style lang="scss">
   .video-viewer {
+    min-width: 0;
+    min-height: 0;
+
+    &,
+    .player {
+      display: flex;
+      align-items: center;
+      min-height: 0;
+      flex-direction: column;
+    }
+
     video {
       width: 100%;
       max-height: 100%;
+      min-height: 0;
 
-      background: rgba(128, 128, 128, 128);
+      // background: rgba(128, 128, 128, 128);
 
       transition: filter 0.2s;
     }
@@ -107,10 +122,10 @@
       line-height: 1;
 
       border-radius: calc($size / 4);
-      border: .07em solid white;
+      border: 0.07em solid white;
 
       .icon {
-        margin-left: .04em;
+        margin-left: 0.04em;
       }
 
       opacity: 0;
@@ -128,6 +143,12 @@
       }
     }
 
+    .loading img {
+      min-width: 640px;
+      min-height: 480px;
+      background: gray;
+    }
+
     &.previewing video {
       cursor: pointer;
     }