From da5d3ad0c273cca16a0b6f7b3ef8ecc425d4b0de Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tom=C3=A1=C5=A1=20Ml=C3=A1dek?= <t@mldk.cz>
Date: Thu, 8 Sep 2022 22:22:24 +0200
Subject: [PATCH] fix: consistent font sizing of timecode

---
 webui/src/components/display/blobs/VideoViewer.svelte | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/webui/src/components/display/blobs/VideoViewer.svelte b/webui/src/components/display/blobs/VideoViewer.svelte
index 5a5e355..2aa5dc3 100644
--- a/webui/src/components/display/blobs/VideoViewer.svelte
+++ b/webui/src/components/display/blobs/VideoViewer.svelte
@@ -21,6 +21,7 @@
 
   let timeCodeWidth: number;
   let timeCodeLeft: string;
+  let timeCodeSize: string;
 
   const seek = throttle((progress: number) => {
     if (state === State.PREVIEWING && videoEl.duration) {
@@ -32,6 +33,7 @@
           videoEl.clientWidth - timeCodeWidth / 2
         );
         timeCodeLeft = `${timeCodeLeftPx}px`;
+        timeCodeSize = `${videoEl.clientHeight / 9}px`;
       }
     }
   }, 100);
@@ -97,7 +99,8 @@
     <div
       class="timecode"
       bind:clientWidth={timeCodeWidth}
-      style="--left: {timeCodeLeft}"
+      style:left={timeCodeLeft}
+      style:font-size={timeCodeSize}
     >
       {#if videoEl?.duration && currentTime}
         {#if videoEl.duration > 3600}{String(
@@ -181,9 +184,8 @@
 
       font-feature-settings: "tnum";
       font-weight: bold;
-      font-size: 24px;
       color: white;
-      opacity: 0.85;
+      opacity: 0.66;
     }
 
     &.loading {