feat(web): Added timestamp

TheTipo01 · Nov 10, 2023 · b42e514 · b42e514
1 parent 91ecd8f
commit b42e514
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 5 deletions.
diff --git a/web/src/lib/utilities.js b/web/src/lib/utilities.js
@@ -1,3 +1,5 @@
+import { P } from "flowbite-svelte";
+
 // Function to add an object to the array
 export function AddObjectToArray(promise, objectToAdd) {
     return promise.then((array) => {
@@ -50,6 +52,13 @@ export function ClearArray(promise) {
     })
 }
 
+// Function to get the frames
+export function GetFrames(promise) {
+    return promise.then(array => {
+        return array[0].frames;
+    })
+}
+
 // Function to get the GuildID from URL query
 export function GetGuildID() {
     let query = new URLSearchParams(window.location.search);
@@ -79,4 +88,27 @@ export function GetFolders(favorites) {
     }
 
     return folders;
+}
+
+// Function to get timestamp
+export function GetTime(seconds) {
+    let minutes = Math.floor(seconds / 60);
+    let hours = Math.floor(seconds / 3600);
+    seconds = Math.floor(seconds % 60);
+
+    seconds = seconds < 10 ? "0" + seconds : seconds;
+
+    if(hours !== 0) {
+        minutes = minutes < 10 ? "0" + minutes : minutes;
+        hours = hours < 10 ? "0" + hours : hours;
+        return `${hours}:${minutes}:${seconds}`;
+    }
+    if(minutes !== 0) {
+        minutes = minutes < 10 ? "0" + minutes : minutes;
+        return `${minutes}:${seconds}`;
+    }
+
+    return `00:${seconds}`;
+
+
 }
diff --git a/web/src/routes/+page.svelte b/web/src/routes/+page.svelte
@@ -23,6 +23,7 @@
     let token = '';
     let host = '';
     let activetab = "queue";
+    let playing;
     let queue = null;
 
     onMount(() => {
@@ -51,6 +52,7 @@
                     Resume: 3,
                     Clear: 4,
                     Finished: 5,
+                    Playing: 6,
                 });
                 let signal = JSON.parse(e.data)
                 switch (signal.notification) {
@@ -61,6 +63,7 @@
                     case Notification.Finished: // Song skipped or finished
                         queue = RemoveFirstObjectFromArray(queue);
                         queue = SetPause(queue, false);
+                        playing = false;
                         break;
                     case Notification.Clear: // Queue cleared
                         queue = ClearArray(queue);
@@ -69,6 +72,10 @@
                     case Notification.Resume:
                     case Notification.Pause: // Song paused or resumed
                         queue = TogglePause(queue);
+                        playing = !playing;
+                        break;
+                    case Notification.Playing:
+                        playing = true;
                         break;
                 }
             }
@@ -98,7 +105,7 @@
         </div>
         {#if activetab === "queue"}
             {#if GuildId !== '' && token !== '' && host !== '' && queue != null}
-                <Queue GuildId={GuildId} token={token} host={host} queue={queue}/>
+                <Queue GuildId={GuildId} token={token} host={host} queue={queue} playing={playing}/>
             {/if}
         {/if}
     </TabItem>

diff --git a/web/src/routes/queue.svelte b/web/src/routes/queue.svelte
@@ -1,23 +1,36 @@
 <script>
     // Various Components and functions
     import {A, Avatar, Button, Checkbox, Heading, Input, Label, Modal, P} from "flowbite-svelte";
-    import {AddToQueueHTML, GetQueue, RemoveFromQueue} from "../lib/queue";
+    import {AddToQueueHTML, RemoveFromQueue} from "../lib/queue";
     import {ToggleSong} from "../lib/song";
+    import {GetTime, GetFrames} from "$lib/utilities"
     import PlaySolid from "flowbite-svelte-icons/PlaySolid.svelte";
     import PauseSolid from "flowbite-svelte-icons/PauseSolid.svelte";
     import Error from "./errors.svelte"
+	import { onMount } from "svelte";
 
     // props
     export let GuildId;
     export let token;
     export let host;
     export let queue;
+    export let playing;
 
 
     // variables
+    const FrameSeconds = 50.00067787;
     let code = queue;
     let showModal = false;
     let isPlaylist = false;
+    let seconds = 0;
+    let timestamp;
+    
+    // Playback time
+    onMount(async () => {
+        if(seconds === 0) seconds = await GetFrames(queue) / FrameSeconds;
+        setInterval(function() { if(playing){seconds += 1; } timestamp = GetTime(Math.round(seconds))}, 1000);
+    })
+    
 
 </script>
 
@@ -33,12 +46,13 @@
             <!-- Song input -->
             <div>
                 <Label for="song" class="mb-2">Song Link/Name</Label>
-                <Input type="text" id="song" on:keydown={(e) => {
+                <Input type="text" id="song" autofocus on:keydown={(e) => {
                     if (e.key === "Enter") {
                         code = AddToQueueHTML(GuildId, token, host);
                         showModal = false;
                     }
-                }} required/>
+                }} 
+                required/>
             </div>
             <!-- Checkboxes -->
             <div class="flex gap-3">
@@ -73,7 +87,13 @@
                 <!-- Left side of the grid shows the current song -->
                 <div class="justify-self-center">
                     <!-- Thumbnail and pause/resume buttons -->
-                    <A href={json[0].link}><img alt="thumbnail" src={json[0].thumbnail} href={json.link} class="max-w-3xl"/></A>
+                    <div >
+                        <A href={json[0].link}><img alt="thumbnail" src={json[0].thumbnail} href={json.link} class="max-w-3xl"/></A>
+                        {#if timestamp != undefined}
+                        <P align="center"> {timestamp} / {json[0].duration} </P>
+                        {/if}
+                    </div>
+
 
                     <div class="mt-5 grid grid-cols-2 gap-2">
                         <!-- Pause -->