format viewer times

src/components/Viewer.svelte

@@ -1,13 +1,13 @@
 <div>
-    <div>
+    <div class:hidden={!duration}>
         <div bind:this={element}></div>
     </div>
 
     {#if duration}
-        {Math.round(currentTime)} / {Math.round(duration)}
+        {currentTimeText}
         <input type="range" min="0" max={duration} value={currentTime} disabled>
+        {durationText}
     {/if}
-
 </div>
 
 <script>
@@ -15,6 +15,7 @@
     import { get } from 'svelte/store'
     import YoutubePlayer from 'yt-player'
     import { entry, paused, muted, volume } from '/store.js'
+    import { secondsToElapsedTime } from '/util.js'
 
     let element
     let player
@@ -22,6 +23,12 @@
     let currentTime = null
     let duration = null
 
+    let currentTimeText = null
+    let durationText = null
+
+    $: currentTimeText = currentTime !== null ? secondsToElapsedTime(currentTime) : null
+    $: durationText = duration !== null ? secondsToElapsedTime(duration) : null
+
     $: updateEntry($entry)
     $: updatePaused($paused)
     $: updateMuted($muted)
@@ -111,5 +118,7 @@
 </script>
 
 <style>
-
+    .hidden {
+        display: none;
+    }
 </style>

src/util.js

@@ -4,6 +4,20 @@ import { execPipe, asyncFilter, asyncMap } from 'iter-tools'
 const millisecond = 1
 const second = 1000 * millisecond
 const minute = 60 * second
+const hour = 60 * minute
+
+export const secondsToElapsedTime = (seconds) => {
+    const parts = [
+        Math.floor(seconds / 3600),
+        Math.floor(seconds / 60) % 60,
+        Math.floor(seconds) % 60
+    ]
+
+    return parts
+        .filter((value, index) => value > 0 || index > 0)
+        .map(value => value < 10 ? '0' + value : value)
+        .join(':')
+}
 
 export async function* mkStatusesIterator(initialLink) {
     let buffer = []