subtitle show paused timestamp

stjet · Jun 2, 2024 · fad14c9 · fad14c9
1 parent d5fb5fc
commit fad14c9
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 2 deletions.
diff --git a/src/lib/Video.svelte b/src/lib/Video.svelte
@@ -1,12 +1,14 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
+  import { deconvert_timestamp } from '$lib/utils.ts';
 
   //exports
   export let video_src: string | boolean;
   export let sub_src: string | boolean;
   export let ytdlp: string | undefined;
   export let time_jump: number;
   export let current_time: number = 0;
+  export let show_timestamp_pause: boolean = false;
 
   //if timestamp (in seconds) changes, video should jump to that point
   //negative timestamp means ignore, do not jump
@@ -49,6 +51,16 @@
     current_time = video_ele.currentTime;
   }
 
+  let pause_timestamp: string | undefined;
+
+  //show the timestamp when paused, if show_timestamp is true
+  function on_pause() {
+    if (show_timestamp_pause) {
+      let secs = Math.round(video_ele.currentTime * 100) / 100;
+      pause_timestamp = deconvert_timestamp(secs);
+    }
+  }
+
   //if browser has input loaded with the video on page load already, load video
   onMount(() => {
     if (video_load_ele?.files) {
@@ -64,11 +76,14 @@
     <button id="use-own-button" class="default-button" on:click={use_own}>Use your own video</button>
     <br>
     <!-- svelte-ignore a11y-media-has-caption -->
-    <video bind:this={video_ele} on:timeupdate={time_update} src="{ video_src }" controls>
+    <video bind:this={video_ele} on:timeupdate={time_update} on:pause={on_pause} src="{ video_src }" controls>
       {#if typeof sub_src === "string"}
         <track kind="captions" src={"/"+sub_src} label="Lyrics" default>
       {/if}
     </video>
+    {#if pause_timestamp}
+      <span>{ pause_timestamp }</span>
+    {/if}
   {:else}
     <p>No video provided for this concert (likely due to copyright and/or bandwidth concerns). Use your own?</p>
     {#if ytdlp}

diff --git a/src/routes/subtitles/+page.svelte b/src/routes/subtitles/+page.svelte
@@ -105,7 +105,7 @@
       <input bind:value={given_time} type="text" placeholder="01:12:42"/>
       <button class="default-button" on:click={jump_to}>Jump To</button>
       <br>
-      <Video video_src={false} {sub_src} {time_jump} bind:current_time={current_time} ytdlp={undefined}></Video>
+      <Video video_src={false} show_timestamp_pause={true} {sub_src} {time_jump} bind:current_time={current_time} ytdlp={undefined}></Video>
     </div>
   </div>
 </div>