diff --git a/webui/src/components/display/blobs/VideoViewer.svelte b/webui/src/components/display/blobs/VideoViewer.svelte index dc1e11e..6924156 100644 --- a/webui/src/components/display/blobs/VideoViewer.svelte +++ b/webui/src/components/display/blobs/VideoViewer.svelte @@ -16,10 +16,22 @@ let state = State.LOADING; let videoEl: HTMLVideoElement; + let currentTime: number; + + let timeCodeWidth: number; + let timeCodeLeft: string; const seek = throttle((progress: number) => { if (state === State.PREVIEWING && videoEl.duration) { - videoEl.currentTime = videoEl.duration * progress; + currentTime = videoEl.duration * progress; + + if (timeCodeWidth) { + let timeCodeLeftPx = Math.min( + Math.max(videoEl.clientWidth * progress, timeCodeWidth / 2), + videoEl.clientWidth - timeCodeWidth / 2 + ); + timeCodeLeft = `${timeCodeLeftPx}px`; + } } }, 100); @@ -73,6 +85,7 @@ on:click|preventDefault={startPlaying} controls={state === State.PLAYING} bind:this={videoEl} + bind:currentTime /> {/if}
+