Move shuffle and displaytime functions to new utilities file

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;
     })

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,

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;
+};

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">