From d42c3202b56d83b193b8bc4c31fc8379d3c3cc9a Mon Sep 17 00:00:00 2001
From: Neshura <neshura@neshweb.net>
Date: Thu, 2 May 2024 04:11:12 +0200
Subject: [PATCH] Move shuffle and displaytime functions to new utilities file

---
 .../components/custom/PlayerControls.svelte   | 15 +-----------
 src/lib/states/playback-state.svelte.ts       |  9 +-------
 src/lib/utilities.ts                          | 23 +++++++++++++++++++
 src/routes/album/[albumId]/+page.svelte       |  7 ++++--
 4 files changed, 30 insertions(+), 24 deletions(-)
 create mode 100644 src/lib/utilities.ts

diff --git a/src/lib/components/custom/PlayerControls.svelte b/src/lib/components/custom/PlayerControls.svelte
index 9fdf15f..0e7af0e 100644
--- a/src/lib/components/custom/PlayerControls.svelte
+++ b/src/lib/components/custom/PlayerControls.svelte
@@ -5,6 +5,7 @@
     import {onMount} from "svelte";
     import {playbackState} from "$lib/states/playback-state.svelte";
     import {toFixedNumber} from "$lib/formatting";
+    import {displayTime} from "$lib/utilities";
     let mounted = $state(false);
 
     function changeVolume(change: number) {
@@ -27,20 +28,6 @@
         return playbackState.progress / playbackState.duration * 100 || 0;
     }
 
-    function displayTime(rawSeconds: number) {
-        const intSeconds = Math.round(rawSeconds);
-        const seconds = intSeconds % 60;
-        const minutes = Math.floor((intSeconds / 60)) % 60;
-        const hours = Math.floor((intSeconds / 3600));
-
-        if (hours == 0) {
-            return `${minutes.toString()}:${seconds.toString().padStart(2, 0)}`
-        }
-        else {
-            return `${hours}:${minutes.toString().padStart(2, 0)}:${seconds.toString().padStart(2, 0)}`
-        }
-    }
-
     onMount(() => {
         mounted = true;
     })
diff --git a/src/lib/states/playback-state.svelte.ts b/src/lib/states/playback-state.svelte.ts
index cea39a0..9ebe2c8 100644
--- a/src/lib/states/playback-state.svelte.ts
+++ b/src/lib/states/playback-state.svelte.ts
@@ -1,14 +1,7 @@
 import {PlaybackMode, PlaybackStateSvelte} from "$lib/player.svelte";
 import {OpenSubsonic, type Parameter, type Song} from "$lib/opensubsonic";
 import {queueState} from "$lib/states/play-queue.svelte";
-
-export const shuffle = (array: Array<Song>) => {
-    for (let i: number = array.length - 1; i > 0; i--) {
-        const j: number = Math.floor(Math.random() * (i + 1));
-        [array[i], array[j]] = [array[j], array[i]];
-    }
-    return array;
-};
+import {shuffle} from "$lib/utilities";
 
 interface PlaybackState {
     loopMode: PlaybackStateSvelte,
diff --git a/src/lib/utilities.ts b/src/lib/utilities.ts
new file mode 100644
index 0000000..3d423aa
--- /dev/null
+++ b/src/lib/utilities.ts
@@ -0,0 +1,23 @@
+import type {Song} from "$lib/opensubsonic";
+
+export function displayTime(rawSeconds: number) {
+    const intSeconds = Math.round(rawSeconds);
+    const seconds = intSeconds % 60;
+    const minutes = Math.floor((intSeconds / 60)) % 60;
+    const hours = Math.floor((intSeconds / 3600));
+
+    if (hours == 0) {
+        return `${minutes.toString()}:${seconds.toString().padStart(2, 0)}`
+    }
+    else {
+        return `${hours}:${minutes.toString().padStart(2, 0)}:${seconds.toString().padStart(2, 0)}`
+    }
+}
+
+export const shuffle = (array: Array<Song>) => {
+    for (let i: number = array.length - 1; i > 0; i--) {
+        const j: number = Math.floor(Math.random() * (i + 1));
+        [array[i], array[j]] = [array[j], array[i]];
+    }
+    return array;
+};
\ No newline at end of file
diff --git a/src/routes/album/[albumId]/+page.svelte b/src/routes/album/[albumId]/+page.svelte
index f022ab9..a95b3c2 100644
--- a/src/routes/album/[albumId]/+page.svelte
+++ b/src/routes/album/[albumId]/+page.svelte
@@ -10,9 +10,10 @@
         type Parameter, type Song
     } from "$lib/opensubsonic";
     import {queueState} from "$lib/states/play-queue.svelte";
-    import {playbackState, shuffle} from "$lib/states/playback-state.svelte";
+    import {playbackState} from "$lib/states/playback-state.svelte";
     import {Button} from "$lib/components/ui/button";
-
+    import {shuffle} from "$lib/utilities";
+    import {displayTime} from "$lib/utilities.js";
     class AlbumData {
         data: AlbumID3WithSongs = $state({})
     }
@@ -134,9 +135,11 @@
         <img alt={album.data.name + " Album Cover"} src={getAlbumImage()} height="312px" width="312px" class="rounded-md" />
         <div>
             <h1>{album.data.name}</h1>
+            <h2>{album.data.artist}</h2>
             <p>{album.info.notes}</p>
             <p>{album.info.lastFmUrl}</p>
             <p>{album.info.musicBrainzId}</p>
+            <p>Length: {displayTime(album.data.duration)}</p>
         </div>
     </div>
     <div class="flex">