From 6b83f929ec5161f36c9ca9cf1a90b8730d18a653 Mon Sep 17 00:00:00 2001
From: DutchJavaDev <borismulder@outlook.com>
Date: Sat, 11 Oct 2025 14:15:34 +0200
Subject: [PATCH 01/13] meaningfull name

---
 MyMusicClientSveltePwa/src/lib/scripts/storageService.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/MyMusicClientSveltePwa/src/lib/scripts/storageService.js b/MyMusicClientSveltePwa/src/lib/scripts/storageService.js
index 53941b7..036fff9 100644
--- a/MyMusicClientSveltePwa/src/lib/scripts/storageService.js
+++ b/MyMusicClientSveltePwa/src/lib/scripts/storageService.js
@@ -18,7 +18,7 @@ export function setConfiguration(config) {
   setItem(ConfigKey, config);
 }
 
-export function setPlaylists(playlists) {
+export function setCachedPlaylists(playlists) {
   setItem(PlaylistsKey, playlists);
 }
 

From 2c70293e49885f8606faf5ed18fe86e4fe3df162 Mon Sep 17 00:00:00 2001
From: DutchJavaDev <borismulder@outlook.com>
Date: Sat, 11 Oct 2025 14:15:59 +0200
Subject: [PATCH 02/13] delete playlist

---
 MyMusicClientSveltePwa/src/lib/scripts/api.js | 167 ++++++++++--------
 1 file changed, 92 insertions(+), 75 deletions(-)

diff --git a/MyMusicClientSveltePwa/src/lib/scripts/api.js b/MyMusicClientSveltePwa/src/lib/scripts/api.js
index c0a1796..be2f19f 100644
--- a/MyMusicClientSveltePwa/src/lib/scripts/api.js
+++ b/MyMusicClientSveltePwa/src/lib/scripts/api.js
@@ -5,104 +5,121 @@ const staticAudioUrl = import.meta.env.VITE_STATIC_AUDIO_URL;
 import { getConfiguration } from "./storageService";
 
 export async function fetchPlaylists() {
-    try {
-        const response = await fetch(`${baseApiUrl}/playlist`);
-        if (!response.ok) {
-            throw new Error(`HTTP error! status: ${response.status}`);
-        }
-        const playlists = await response.json();
-        return playlists.Data;
-    } catch (error) {
-        console.error("Error fetching playlists:", error);
-        return [];
+  try {
+    const response = await fetch(`${baseApiUrl}/playlist`);
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`);
     }
+    const playlists = await response.json();
+    return playlists.Data;
+  } catch (error) {
+    console.error("Error fetching playlists:", error);
+    return [];
+  }
 }
 
-export async function fetchNewPlaylist(lastKnowPlaylistId){
-        try {
-        const response = await fetch(`${baseApiUrl}/playlist?lastKnowPlaylistId=${lastKnowPlaylistId}`);
-        if (!response.ok) {
-            throw new Error(`HTTP error! status: ${response.status}`);
-        }
-        const playlists = await response.json();
-        return playlists.Data;
-    } catch (error) {
-        console.error("Error fetching playlists:", error);
-        return [];
+export async function fetchNewPlaylist(lastKnowPlaylistId) {
+  try {
+    const response = await fetch(`${baseApiUrl}/playlist?lastKnowPlaylistId=${lastKnowPlaylistId}`);
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`);
     }
+    const playlists = await response.json();
+    return playlists.Data;
+  } catch (error) {
+    console.error("Error fetching playlists:", error);
+    return [];
+  }
 }
 
 export async function fetchNewPlaylistSongs(playlistId, lastKnowSongPosition) {
-        try {
-        const response = await fetch(`${baseApiUrl}/playlist/${playlistId}?lastKnowSongPosition=${lastKnowSongPosition}`);
-        if (!response.ok) {
-            throw new Error(`HTTP error! status: ${response.status}`);
-        }
-        const songs = await response.json();
-        return songs.Data;
-    } catch (error) {
-        console.error("Error fetching playlist songs:", error);
-        return [];
+  try {
+    const response = await fetch(`${baseApiUrl}/playlist/${playlistId}?lastKnowSongPosition=${lastKnowSongPosition}`);
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`);
     }
+    const songs = await response.json();
+    return songs.Data;
+  } catch (error) {
+    console.error("Error fetching playlist songs:", error);
+    return [];
+  }
 }
 
 export async function fetchPlaylistSongs(playlistId) {
-    try {
-        const response = await fetch(`${baseApiUrl}/playlist/${playlistId}`);
-        if (!response.ok) {
-            throw new Error(`HTTP error! status: ${response.status}`);
-        }
-        const songs = await response.json();
-        return songs.Data;
-    } catch (error) {
-        console.error("Error fetching playlist songs:", error);
-        return [];
+  try {
+    const response = await fetch(`${baseApiUrl}/playlist/${playlistId}`);
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`);
     }
+    const songs = await response.json();
+    return songs.Data;
+  } catch (error) {
+    console.error("Error fetching playlist songs:", error);
+    return [];
+  }
 }
 
 export async function createPlaylist(formData) {
-    try {
-        const response = await fetch(`${baseApiUrl}/playlist`, {
-            method: "POST",
-            body: formData
-        })
-        
-        const jsonResponse = await response.json();
-
-        if (!response.ok) {
-            throw new Error(`HTTP error! status: ${jsonResponse.Data.Message}`);
-        }
-        return {
-            success: true,
-            data: jsonResponse
-        };
-    } catch (error) {
-        console.error("Error creating playlist:", error);
-        return {
-            success: false,
-            data: error
-        };
+  try {
+    const response = await fetch(`${baseApiUrl}/playlist`, {
+      method: "POST",
+      body: formData,
+    });
+
+    const jsonResponse = await response.json();
+
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${jsonResponse.Data.Message}`);
     }
+    return {
+      success: true,
+      data: jsonResponse,
+    };
+  } catch (error) {
+    console.error("Error creating playlist:", error);
+    return {
+      success: false,
+      data: error,
+    };
+  }
 }
 
-export function getImageUrl(path) {
-
-    var config = getConfiguration();
+export async function deletePlaylist(playlistId) {
+  try {
+    const response = await fetch(`${baseApiUrl}/playlist/${playlistId}`, {
+      method: "DELETE",
+    });
 
-    if(config.byPassCache){
-        return `${staticImageUrl}/${path}?cb=${new Date().getMilliseconds()}`;
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response}`);
     }
+    return {
+      success: true,
+      data: response,
+    };
+  } catch (error) {
+    console.error("Error deleting playlist:", error);
+    return;
+  }
+}
 
-    return `${staticImageUrl}/${path}`;
+export function getImageUrl(path) {
+  var config = getConfiguration();
+
+  if (config.byPassCache) {
+    return `${staticImageUrl}/${path}?cb=${new Date().getMilliseconds()}`;
+  }
+
+  return `${staticImageUrl}/${path}`;
 }
 
 export function getPlaybackUrl(source_id) {
+  var config = getConfiguration();
 
-    var config = getConfiguration();
+  if (config.byPassCache) {
+    return `${staticAudioUrl}/${source_id}.opus?cb=${new Date().getMilliseconds()}`;
+  }
 
-    if(config.byPassCache){
-        return `${staticAudioUrl}/${source_id}.opus?cb=${new Date().getMilliseconds()}`;
-    }
-
-    return `${staticAudioUrl}/${source_id}.opus`; // Assuming all audio files are in .opus format
-}
\ No newline at end of file
+  return `${staticAudioUrl}/${source_id}.opus`; // Assuming all audio files are in .opus format
+}

From bfea32e58b828054e6fb55255d795e882b9dd16e Mon Sep 17 00:00:00 2001
From: DutchJavaDev <borismulder@outlook.com>
Date: Sat, 11 Oct 2025 14:16:15 +0200
Subject: [PATCH 03/13] option to delete

---
 MyMusicClientSveltePwa/src/App.svelte | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/MyMusicClientSveltePwa/src/App.svelte b/MyMusicClientSveltePwa/src/App.svelte
index a95e824..823cc33 100644
--- a/MyMusicClientSveltePwa/src/App.svelte
+++ b/MyMusicClientSveltePwa/src/App.svelte
@@ -7,7 +7,7 @@
   import { initializeRouteService, pathName, navigateTo, component, componentParams } from "./lib/scripts/routeService.js";
   import PlayerBar from "./lib/components/PlayerBar.svelte";
   import Modals from "./lib/components/Modals.svelte";
-  import { initializePlaylistService } from "./lib/scripts/playlistService.js";
+  import { initializePlaylistService, deleteCurrentPlaylist } from "./lib/scripts/playlistService.js";
   import { initializePlaybackService } from "./lib/scripts/playbackService.js";
   import { initializeMediaSessionService } from "./lib/scripts/mediasessionService.js";
   import { searchQuery } from "./lib/scripts/util.js";
@@ -72,8 +72,9 @@
           
           <button type="button" aria-label="home" class="btn btn-dark w-100 dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fa-solid fa-plus"></i></button>
           
-          <div class="dropdown-menu bg-dark w-100">
+          <div id="actions" class="dropdown-menu w-100">
             <button class="btn btn-primary dropdown-item" data-bs-toggle="modal" data-bs-target="#createPlaylistModal" >New Playlist</button>
+            <button class="btn btn-primary dropdown-item text-danger" on:click={deleteCurrentPlaylist} disabled={!$pathName.includes("playlists")}>Delete Current Playlist</button>
           </div>
         </div>
       </div>
@@ -89,6 +90,16 @@
 <audio id="audio-player" preload="none" style="display: none;"></audio>
 
 <style>
+
+  #actions{
+    background-color: #1e1e1e;
+  }
+
+  #actions button{
+    padding: 5px auto;
+    border: 5px solid red;
+  }
+
   .app-layout {
     display: flex;
     flex-direction: column;

From a63b7c57ac362a023aef790941df92fa90929ab5 Mon Sep 17 00:00:00 2001
From: DutchJavaDev <borismulder@outlook.com>
Date: Sat, 11 Oct 2025 14:16:30 +0200
Subject: [PATCH 04/13] this is still a bit buggy, wip

---
 .../src/lib/scripts/playbackService.js        |  4 +
 .../src/lib/scripts/playlistService.js        | 85 ++++++++++++++-----
 2 files changed, 70 insertions(+), 19 deletions(-)

diff --git a/MyMusicClientSveltePwa/src/lib/scripts/playbackService.js b/MyMusicClientSveltePwa/src/lib/scripts/playbackService.js
index 0206531..b9ad2e2 100644
--- a/MyMusicClientSveltePwa/src/lib/scripts/playbackService.js
+++ b/MyMusicClientSveltePwa/src/lib/scripts/playbackService.js
@@ -104,6 +104,10 @@ export function initializePlaybackService() {
   });
 }
 
+export function stopPlayback() {
+  playOrPauseSong(currentSong.id);
+}
+
 export function nextSong() {
   songIndex = (songIndex + 1) % playlistSongs.length; // Loop back to start if at end of playlist
   const nextSong = playlistSongs[songIndex];
diff --git a/MyMusicClientSveltePwa/src/lib/scripts/playlistService.js b/MyMusicClientSveltePwa/src/lib/scripts/playlistService.js
index e36a801..66172e4 100644
--- a/MyMusicClientSveltePwa/src/lib/scripts/playlistService.js
+++ b/MyMusicClientSveltePwa/src/lib/scripts/playlistService.js
@@ -1,22 +1,30 @@
-import { writable } from "svelte/store";
-import { getCachedPlaylists, setPlaylists, setPlaylistSongs, getCachedPlaylistSongs, appConfiguration, getConfiguration } from "./storageService";
-import { fetchPlaylists, fetchPlaylistSongs, fetchNewPlaylist, fetchNewPlaylistSongs } from "./api";
+import { writable, get } from "svelte/store";
+import { getCachedPlaylists, setCachedPlaylists, setPlaylistSongs, getCachedPlaylistSongs, appConfiguration, getConfiguration, getCurrentPlaylistId } from "./storageService";
+import { fetchPlaylists, fetchPlaylistSongs, fetchNewPlaylist, fetchNewPlaylistSongs, deletePlaylist } from "./api";
+import { componentParams, navigateTo } from "./routeService";
+import { playOrPauseSong, setPlaylists, currentSong } from "./playbackService";
 
 export const playlistsStore = writable([]);
 
-let updateInterval; 
+let _componentParams;
+
+let updateInterval;
 let isUpdating = false;
 let intervalId;
 
 // Check storage for stored playlists, if empty fetch from API
 export async function initializePlaylistService() {
+  componentParams.subscribe((value) => {
+    _componentParams = value;
+  });
+
   const cachedPlaylists = getCachedPlaylists();
   if (cachedPlaylists.length > 0) {
     playlistsStore.set(cachedPlaylists);
   } else {
     const fetchedPlaylists = await fetchPlaylists();
     playlistsStore.set(fetchedPlaylists);
-    setPlaylists(fetchedPlaylists);
+    setCachedPlaylists(fetchedPlaylists);
     for (const playlist of fetchedPlaylists) {
       const songs = await fetchPlaylistSongs(playlist.id);
       setPlaylistSongs(playlist.id, songs);
@@ -26,8 +34,8 @@ export async function initializePlaylistService() {
   updateInterval = getConfiguration().fetchTimer * 1000; // Need to multiply by 1000 to get milliseconds
   // Subscribe to configuration changes
   // If fetchTimer is updated, clear the old interval and set a new one
-  
-  appConfiguration.subscribe(config => {
+
+  appConfiguration.subscribe((config) => {
     if (intervalId) {
       clearInterval(intervalId);
     }
@@ -36,19 +44,53 @@ export async function initializePlaylistService() {
     console.log("Update interval set to:", updateInterval, "ms");
 
     intervalId = setInterval(() => {
-    
-    if (isUpdating) return; // Prevent multiple updates at the same time
-    
-    isUpdating = true;
-    
-    backgroundUpdate();
-    
-    isUpdating = false;
-
-  }, updateInterval);
+      if (isUpdating) return; // Prevent multiple updates at the same time
+
+      isUpdating = true;
+
+      backgroundUpdate();
+
+      isUpdating = false;
+    }, updateInterval);
   });
 }
 
+export async function deleteCurrentPlaylist() {
+  const playlistId = _componentParams.playlistId;
+
+  // check if playlistId actually exists in cached playlists
+  const cachedPlaylists = getCachedPlaylists();
+  const playlistIndex = cachedPlaylists.findIndex((/** @type {{ id: any; }} */ p) => p.id === playlistId);
+
+  if (playlistIndex === -1) {
+    alert("Playlist not found.");
+    return;
+  }
+
+  if (confirm("Are you sure you want to delete the current playlist? This action cannot be undone.")) {
+    // TODO delete resource from API, images etc
+    const result = await deletePlaylist(playlistId);
+    if (result.success) {
+      const currentPlaylist = getCurrentPlaylistId();
+
+            // If the deleted playlist is the current playing playlist, stop playback
+      if (currentPlaylist === playlistId) {
+        // stop playback
+        playOrPauseSong(null);
+        setPlaylists(0);
+      }
+
+      // Remove playlist from cached playlists
+      cachedPlaylists.splice(playlistIndex, 1);
+      setCachedPlaylists(cachedPlaylists);
+      playlistsStore.set(cachedPlaylists);
+      alert("Playlist deleted successfully.");
+
+      navigateTo("/");
+    }
+  }
+}
+
 async function backgroundUpdate() {
   // update playlists in the background
   const lastItemInex = -1;
@@ -59,7 +101,7 @@ async function backgroundUpdate() {
 
   if (newPlaylists.length > 0) {
     cachedPlaylists.push(...newPlaylists);
-    setPlaylists(cachedPlaylists);
+    setCachedPlaylists(cachedPlaylists);
     playlistsStore.set(cachedPlaylists);
   }
 
@@ -68,6 +110,12 @@ async function backgroundUpdate() {
     const playlistId = playlist.id;
     const cachedSongs = getCachedPlaylistSongs(playlistId);
     const lastKnowSongPosition = cachedSongs.length;
+
+    if (playlistId === 22) {
+      console.log("Updating playlist:", playlistId, "Last known song position:", lastKnowSongPosition);
+      console.log("Cached songs:", cachedSongs);
+    }
+
     const newSongs = await fetchNewPlaylistSongs(playlistId, lastKnowSongPosition);
     if (newSongs.length > 0) {
       const updatedSongs = [...cachedSongs, ...newSongs];
@@ -75,4 +123,3 @@ async function backgroundUpdate() {
     }
   }
 }
-

From 5d3c167d4e299ac120e3925aff36856ab60bc7f6 Mon Sep 17 00:00:00 2001
From: DutchJavaDev <Borismulder@outlook.com>
Date: Sat, 11 Oct 2025 12:16:54 +0000
Subject: [PATCH 05/13] reminder lol

---
 MyMusicBoxApi/http/playlist.go | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/MyMusicBoxApi/http/playlist.go b/MyMusicBoxApi/http/playlist.go
index f5c50dd..8257fc1 100644
--- a/MyMusicBoxApi/http/playlist.go
+++ b/MyMusicBoxApi/http/playlist.go
@@ -119,6 +119,8 @@ func (handler *PlaylistHandler) DeletePlaylist(ctx *gin.Context) {
 
 	err = handler.PlaylistTable.DeletePlaylist(id)
 
+	// TODO delete background image if its not the default image for it
+
 	if err != nil {
 		ctx.JSON(http.StatusInternalServerError, models.ErrorResponse(err))
 		return

From 03a27405eb6dde8a5319849961a15726f5e46727 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Sat, 11 Oct 2025 12:24:41 +0000
Subject: [PATCH 06/13] chore: bump version

---
 MyMusicClientSveltePwa/package-lock.json | 4 ++--
 MyMusicClientSveltePwa/package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/MyMusicClientSveltePwa/package-lock.json b/MyMusicClientSveltePwa/package-lock.json
index 6f1d14a..c031e29 100644
--- a/MyMusicClientSveltePwa/package-lock.json
+++ b/MyMusicClientSveltePwa/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "mymusicclientsveltepwa",
-  "version": "0.1.11",
+  "version": "0.1.12",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "mymusicclientsveltepwa",
-      "version": "0.1.11",
+      "version": "0.1.12",
       "dependencies": {
         "@sveltestrap/sveltestrap": "^7.1.0"
       },
diff --git a/MyMusicClientSveltePwa/package.json b/MyMusicClientSveltePwa/package.json
index 88d5e0a..3cda706 100644
--- a/MyMusicClientSveltePwa/package.json
+++ b/MyMusicClientSveltePwa/package.json
@@ -1,7 +1,7 @@
 {
   "name": "mymusicclientsveltepwa",
   "private": true,
-  "version": "0.1.11",
+  "version": "0.1.12",
   "type": "module",
   "scripts": {
     "dev": "vite --host",

From 9cb9c890a6cd6b17b9425913ef2ddba7307caafe Mon Sep 17 00:00:00 2001
From: DutchJavaDev <borismulder@outlook.com>
Date: Mon, 13 Oct 2025 21:45:09 +0200
Subject: [PATCH 07/13] ui bugs fixed

---
 .../src/lib/components/Modals.svelte          |  5 +++--
 .../src/lib/components/PlayerBar.svelte       | 10 ++++-----
 .../src/lib/scripts/playbackService.js        | 22 +++++++++++--------
 .../src/lib/scripts/playlistService.js        | 14 +++++-------
 4 files changed, 26 insertions(+), 25 deletions(-)

diff --git a/MyMusicClientSveltePwa/src/lib/components/Modals.svelte b/MyMusicClientSveltePwa/src/lib/components/Modals.svelte
index 45b7fd5..ca194e1 100644
--- a/MyMusicClientSveltePwa/src/lib/components/Modals.svelte
+++ b/MyMusicClientSveltePwa/src/lib/components/Modals.svelte
@@ -31,7 +31,7 @@
     }
   }
 
-  async function handleCreatePlaylistSubmit(e) {
+  async function handleCreatePlaylistSubmit(event) {
     event.preventDefault();
     const formData = new FormData(event.target);
     var response = await createPlaylist(formData);
@@ -42,11 +42,12 @@
       // Close modal
       const modalElement = document.getElementById('createPlaylistModal');
       const modalInstance = bootstrap.Modal.getInstance(modalElement);
+      
+      // clear form
       modalInstance.hide();
       
       // clear form
       event.target.reset();
-
     } else {
       alert(`Failed to create playlist: ${response.data}`);
     }
diff --git a/MyMusicClientSveltePwa/src/lib/components/PlayerBar.svelte b/MyMusicClientSveltePwa/src/lib/components/PlayerBar.svelte
index bb7fa2f..a453f4d 100644
--- a/MyMusicClientSveltePwa/src/lib/components/PlayerBar.svelte
+++ b/MyMusicClientSveltePwa/src/lib/components/PlayerBar.svelte
@@ -18,12 +18,12 @@
 
 <div class="container-fluid player-bar mb-2">
   <div class="row space-between">
-    <div class="image-placeholder col-2 col-md-2 col-lg-2" style="--url: url({getImageUrl($currentSong.thumbnail_path)});">
+    <div class="image-placeholder col-2 col-md-2 col-lg-2" style="--url: url({$currentSong.id !== -999 ? getImageUrl($currentSong.thumbnail_path) : "" });">
       &nbsp;
     </div>
-    <div class="col-8 col-md-8 col-lg-9" style="background: linear-gradient(to right, #1DB954 {$playPercentage}%, #2c2c2c {$playPercentage}%);">
-      <button type="button" class="btn clickable-text" data-bs-toggle="{$currentSong ? "modal" : ""}" data-bs-target="{$currentSong ? "#songControlModal" : ""}">
-        {#if $currentSong}
+    <div class="col-8 col-md-8 col-lg-9" style="background: linear-gradient(to right, #1DB954 {($currentSong && $currentSong.id !== -999) ? $playPercentage:0}%, #2c2c2c {($currentSong && $currentSong.id !== -999) ? $playPercentage:0}%);">
+      <button type="button" class="btn clickable-text" data-bs-toggle="{($currentSong && $currentSong.id !== -999) ? "modal" : ""}" data-bs-target="{($currentSong && $currentSong.id !== -999) ? "#songControlModal" : ""}">
+        {#if $currentSong && $currentSong.id !== -999}
           {$currentSong.name}
         {:else}
           No song playing
@@ -32,7 +32,7 @@
     </div>
     <div class="col-2 col-md-2 col-lg-1">
       <button on:click={togglePlay} class="btn play-button w-100">
-        {#if $currentSong && $isPlaying && !$isLoading}
+        {#if ($currentSong && $currentSong.id !== -999) && $isPlaying && !$isLoading}
           <i class="fa-solid fa-pause"></i>
         {:else if !$isLoading && !$isPlaying}
           <i class="fa-solid fa-play"></i>
diff --git a/MyMusicClientSveltePwa/src/lib/scripts/playbackService.js b/MyMusicClientSveltePwa/src/lib/scripts/playbackService.js
index b9ad2e2..ba40c32 100644
--- a/MyMusicClientSveltePwa/src/lib/scripts/playbackService.js
+++ b/MyMusicClientSveltePwa/src/lib/scripts/playbackService.js
@@ -50,7 +50,10 @@ export function initializePlaybackService() {
     songIndex = getCurrentSongIndex();
     isPlaying.set(false);
     setCurrentTime(getCurrentSongTime());
-    playOrPauseSong(playlistSongs[songIndex].id);
+
+    if(playlistSongs.length > 0 && songIndex >= 0 && songIndex <= playlistSongs.length){
+      playOrPauseSong(playlistSongs[songIndex].id);
+    }
   }
 
   audioElement.addEventListener("play", () => {
@@ -74,10 +77,15 @@ export function initializePlaybackService() {
     updateMediaSessionPlaybackState(false);
   });
 
-  // audioElement.addEventListener("playing", () => {
-  //   isPlaying.set(true);
-  //   updateMediaSessionPlaybackState(true);
-  // });
+  audioElement.addEventListener("playing", () => {
+    if(!get(isPlaying)){
+      isPlaying.set(true);
+    }
+    if(get(isLoading)){
+      isLoading.set(false);
+    }
+    updateMediaSessionPlaybackState(true);
+  });
 
   audioElement.addEventListener("timeupdate", () => {
     const percentage = (audioElement.currentTime / audioElement.duration) * 100;
@@ -104,10 +112,6 @@ export function initializePlaybackService() {
   });
 }
 
-export function stopPlayback() {
-  playOrPauseSong(currentSong.id);
-}
-
 export function nextSong() {
   songIndex = (songIndex + 1) % playlistSongs.length; // Loop back to start if at end of playlist
   const nextSong = playlistSongs[songIndex];
diff --git a/MyMusicClientSveltePwa/src/lib/scripts/playlistService.js b/MyMusicClientSveltePwa/src/lib/scripts/playlistService.js
index 66172e4..fbf69df 100644
--- a/MyMusicClientSveltePwa/src/lib/scripts/playlistService.js
+++ b/MyMusicClientSveltePwa/src/lib/scripts/playlistService.js
@@ -2,7 +2,7 @@ import { writable, get } from "svelte/store";
 import { getCachedPlaylists, setCachedPlaylists, setPlaylistSongs, getCachedPlaylistSongs, appConfiguration, getConfiguration, getCurrentPlaylistId } from "./storageService";
 import { fetchPlaylists, fetchPlaylistSongs, fetchNewPlaylist, fetchNewPlaylistSongs, deletePlaylist } from "./api";
 import { componentParams, navigateTo } from "./routeService";
-import { playOrPauseSong, setPlaylists, currentSong } from "./playbackService";
+import { playOrPauseSong, setPlaylists, currentSong, playPercentage } from "./playbackService";
 
 export const playlistsStore = writable([]);
 
@@ -41,8 +41,6 @@ export async function initializePlaylistService() {
     }
     updateInterval = config.fetchTimer * 1000; // Need to multiply by 1000 to get milliseconds
 
-    console.log("Update interval set to:", updateInterval, "ms");
-
     intervalId = setInterval(() => {
       if (isUpdating) return; // Prevent multiple updates at the same time
 
@@ -73,12 +71,15 @@ export async function deleteCurrentPlaylist() {
     if (result.success) {
       const currentPlaylist = getCurrentPlaylistId();
 
-            // If the deleted playlist is the current playing playlist, stop playback
+      // If the deleted playlist is the current playing playlist, stop playback
       if (currentPlaylist === playlistId) {
         // stop playback
         playOrPauseSong(null);
         setPlaylists(0);
+        currentSong.set({id: -999, title: "", artist: "", album: "", source_id: ""});
       }
+      
+      playPercentage.set(0);
 
       // Remove playlist from cached playlists
       cachedPlaylists.splice(playlistIndex, 1);
@@ -111,11 +112,6 @@ async function backgroundUpdate() {
     const cachedSongs = getCachedPlaylistSongs(playlistId);
     const lastKnowSongPosition = cachedSongs.length;
 
-    if (playlistId === 22) {
-      console.log("Updating playlist:", playlistId, "Last known song position:", lastKnowSongPosition);
-      console.log("Cached songs:", cachedSongs);
-    }
-
     const newSongs = await fetchNewPlaylistSongs(playlistId, lastKnowSongPosition);
     if (newSongs.length > 0) {
       const updatedSongs = [...cachedSongs, ...newSongs];

From e3d05fb7f68412085491705583d2065b93a10205 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Mon, 13 Oct 2025 19:45:40 +0000
Subject: [PATCH 08/13] chore: bump version

---
 MyMusicClientSveltePwa/package-lock.json | 4 ++--
 MyMusicClientSveltePwa/package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/MyMusicClientSveltePwa/package-lock.json b/MyMusicClientSveltePwa/package-lock.json
index c031e29..a9a2323 100644
--- a/MyMusicClientSveltePwa/package-lock.json
+++ b/MyMusicClientSveltePwa/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "mymusicclientsveltepwa",
-  "version": "0.1.12",
+  "version": "0.1.13",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "mymusicclientsveltepwa",
-      "version": "0.1.12",
+      "version": "0.1.13",
       "dependencies": {
         "@sveltestrap/sveltestrap": "^7.1.0"
       },
diff --git a/MyMusicClientSveltePwa/package.json b/MyMusicClientSveltePwa/package.json
index 3cda706..96df691 100644
--- a/MyMusicClientSveltePwa/package.json
+++ b/MyMusicClientSveltePwa/package.json
@@ -1,7 +1,7 @@
 {
   "name": "mymusicclientsveltepwa",
   "private": true,
-  "version": "0.1.12",
+  "version": "0.1.13",
   "type": "module",
   "scripts": {
     "dev": "vite --host",

From cfe09b58229f23cf5f29bba062a5345407359f27 Mon Sep 17 00:00:00 2001
From: DutchJavaDev <Borismulder@outlook.com>
Date: Mon, 13 Oct 2025 19:46:16 +0000
Subject: [PATCH 09/13] old model

---
 MyMusicBoxApi/http/playlist.go | 9 +--------
 1 file changed, 1 insertion(+), 8 deletions(-)

diff --git a/MyMusicBoxApi/http/playlist.go b/MyMusicBoxApi/http/playlist.go
index 8257fc1..48b9f43 100644
--- a/MyMusicBoxApi/http/playlist.go
+++ b/MyMusicBoxApi/http/playlist.go
@@ -2,7 +2,6 @@ package http
 
 import (
 	"fmt"
-	"mime/multipart"
 	"musicboxapi/configuration"
 	"musicboxapi/database"
 	"musicboxapi/logging"
@@ -44,13 +43,6 @@ func (handler *PlaylistHandler) FetchPlaylists(ctx *gin.Context) {
 	ctx.JSON(http.StatusOK, models.OkResponse(playlists, fmt.Sprintf("Found %d playlist", len(playlists))))
 }
 
-type FormSt struct {
-	Name        string               `form:"playlistName"`
-	Image       multipart.FileHeader `form:"backgroundImage"`
-	IsPublic    string               `form:"publicPlaylist"`
-	Description string               `form:"playlistDescription"`
-}
-
 func (hanlder *PlaylistHandler) InsertPlaylist(ctx *gin.Context) {
 
 	var playlistModel models.CreatePlaylistModel
@@ -58,6 +50,7 @@ func (hanlder *PlaylistHandler) InsertPlaylist(ctx *gin.Context) {
 	err := ctx.ShouldBind(&playlistModel)
 
 	if err != nil {
+		logging.Error("Failed to bind model")
 		logging.ErrorStackTrace(err)
 		ctx.JSON(http.StatusInternalServerError, models.ErrorResponse(err))
 		return

From beb9e52a07c9310fab88688a518ce1bb781440c9 Mon Sep 17 00:00:00 2001
From: DutchJavaDev <Borismulder@outlook.com>
Date: Mon, 13 Oct 2025 20:32:23 +0000
Subject: [PATCH 10/13] tests fixed

---
 MyMusicBoxApi/http/playlist_test.go | 23 +++++++++++++++++------
 MyMusicBoxApi/models/http.go        |  4 ++--
 2 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/MyMusicBoxApi/http/playlist_test.go b/MyMusicBoxApi/http/playlist_test.go
index 5b3f5a7..eef14d5 100644
--- a/MyMusicBoxApi/http/playlist_test.go
+++ b/MyMusicBoxApi/http/playlist_test.go
@@ -5,6 +5,8 @@ import (
 	"context"
 	"encoding/json"
 	"fmt"
+	"io"
+	"mime/multipart"
 	"musicboxapi/database"
 	"musicboxapi/models"
 	"net/http"
@@ -145,14 +147,23 @@ func TestInsertPlaylist(t *testing.T) {
 	router.POST(route, playlistHandler.InsertPlaylist)
 
 	recorder := httptest.NewRecorder()
+	recorder.Header().Set("Content-Type", "multipart/form-data")
 
-	body := models.Playlist{
-		Description: "Cool playlist",
-	}
+	buf := &bytes.Buffer{}
+	w := multipart.NewWriter(buf)
+	w.WriteField("playlistDescription", "Cool playlist")
+	w.WriteField("playlistName", "Banger Songs")
+	w.WriteField("publicPlaylist", "on")
 
-	bodyBytes, _ := json.Marshal(body)
+	imgWrite, err := w.CreateFormFile("backgroundImage", "default.png")
 
-	req, _ := http.NewRequest("POST", route, bytes.NewBuffer(bodyBytes))
+	io.Copy(imgWrite, bytes.NewReader([]byte("0")))
+
+	w.Close()
+
+	req, _ := http.NewRequest("POST", route, buf)
+
+	req.Header.Add("Content-Type", w.FormDataContentType())
 
 	// Act
 	router.ServeHTTP(recorder, req)
@@ -162,7 +173,7 @@ func TestInsertPlaylist(t *testing.T) {
 
 	var rawResult map[string]any
 
-	err := json.Unmarshal(recorder.Body.Bytes(), &rawResult)
+	err = json.Unmarshal(recorder.Body.Bytes(), &rawResult)
 
 	assert.Equal(t, nil, err)
 
diff --git a/MyMusicBoxApi/models/http.go b/MyMusicBoxApi/models/http.go
index ce17808..e62b8c2 100644
--- a/MyMusicBoxApi/models/http.go
+++ b/MyMusicBoxApi/models/http.go
@@ -7,9 +7,9 @@ type DownloadRequestModel struct {
 }
 
 type CreatePlaylistModel struct {
-	Name        string                `form:"playlistName"`
+	Name        string                `form:"playlistName" binding:"required"`
 	Image       *multipart.FileHeader `form:"backgroundImage"`
-	IsPublic    string                `form:"publicPlaylist"`
+	IsPublic    string                `form:"publicPlaylist" binding:"required"`
 	Description string                `form:"playlistDescription"`
 }
 

From eede57a31fb88605a7064ebca4f6a63b885bde56 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Mon, 13 Oct 2025 20:32:43 +0000
Subject: [PATCH 11/13] chore: bump version

---
 MyMusicClientSveltePwa/package-lock.json | 4 ++--
 MyMusicClientSveltePwa/package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/MyMusicClientSveltePwa/package-lock.json b/MyMusicClientSveltePwa/package-lock.json
index a9a2323..b5ea955 100644
--- a/MyMusicClientSveltePwa/package-lock.json
+++ b/MyMusicClientSveltePwa/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "mymusicclientsveltepwa",
-  "version": "0.1.13",
+  "version": "0.1.14",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "mymusicclientsveltepwa",
-      "version": "0.1.13",
+      "version": "0.1.14",
       "dependencies": {
         "@sveltestrap/sveltestrap": "^7.1.0"
       },
diff --git a/MyMusicClientSveltePwa/package.json b/MyMusicClientSveltePwa/package.json
index 96df691..707c6db 100644
--- a/MyMusicClientSveltePwa/package.json
+++ b/MyMusicClientSveltePwa/package.json
@@ -1,7 +1,7 @@
 {
   "name": "mymusicclientsveltepwa",
   "private": true,
-  "version": "0.1.13",
+  "version": "0.1.14",
   "type": "module",
   "scripts": {
     "dev": "vite --host",

From ed1967c7bcd605c9e263a149bdabde824389f2d7 Mon Sep 17 00:00:00 2001
From: DutchJavaDev <borismulder@outlook.com>
Date: Mon, 13 Oct 2025 22:34:41 +0200
Subject: [PATCH 12/13] boink

---
 MyMusicClientSveltePwa/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/MyMusicClientSveltePwa/package.json b/MyMusicClientSveltePwa/package.json
index 707c6db..7024519 100644
--- a/MyMusicClientSveltePwa/package.json
+++ b/MyMusicClientSveltePwa/package.json
@@ -1,7 +1,7 @@
 {
   "name": "mymusicclientsveltepwa",
   "private": true,
-  "version": "0.1.14",
+  "version": "0.1.10",
   "type": "module",
   "scripts": {
     "dev": "vite --host",

From 6f5536a4328f6cd996499e30059c0149f27737bc Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Mon, 13 Oct 2025 20:35:07 +0000
Subject: [PATCH 13/13] chore: bump version

---
 MyMusicClientSveltePwa/package-lock.json | 4 ++--
 MyMusicClientSveltePwa/package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/MyMusicClientSveltePwa/package-lock.json b/MyMusicClientSveltePwa/package-lock.json
index b5ea955..6f1d14a 100644
--- a/MyMusicClientSveltePwa/package-lock.json
+++ b/MyMusicClientSveltePwa/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "mymusicclientsveltepwa",
-  "version": "0.1.14",
+  "version": "0.1.11",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "mymusicclientsveltepwa",
-      "version": "0.1.14",
+      "version": "0.1.11",
       "dependencies": {
         "@sveltestrap/sveltestrap": "^7.1.0"
       },
diff --git a/MyMusicClientSveltePwa/package.json b/MyMusicClientSveltePwa/package.json
index 7024519..88d5e0a 100644
--- a/MyMusicClientSveltePwa/package.json
+++ b/MyMusicClientSveltePwa/package.json
@@ -1,7 +1,7 @@
 {
   "name": "mymusicclientsveltepwa",
   "private": true,
-  "version": "0.1.10",
+  "version": "0.1.11",
   "type": "module",
   "scripts": {
     "dev": "vite --host",