ui bugs fixed

Author: DutchJavaDev

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

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>

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];

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];