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>