beta test

Author: DutchJavaDev

MyMusicClientSveltePwa/src/lib/components/Song.svelte

@@ -5,6 +5,12 @@
   import { currentSong, isPlaying, isLoading } from "../scripts/playbackService";
   import { getImageUrl, deleteSongFromPlaylist } from "../scripts/api";
   import { removeSongFromPlaylist } from "../scripts/playlistService";
+  import { getCurrentPlaylistId, setCurrentSongIndex, setCurrentSongTime } from "../scripts/storageService";
+  import { get } from "svelte/store";
+
+  $: $isPlaying;
+  $: $currentSong;
+  $: $isLoading;
 
   export let song;
   export let playlistId;
@@ -16,20 +22,27 @@
   });
 
   async function deleteSong() {
-    if(confirm(`Are you sure you want to delete the song "${song.name}" from this playlist?`)) {
+    if (confirm(`Are you sure you want to delete the song "${song.name}" from this playlist?`)) {
       var deleted = await deleteSongFromPlaylist(playlistId, song.id);
 
-      if(deleted) {
+      if (deleted) {
         removeSongFromPlaylist(song.id);
+        const currentPlaylistId = getCurrentPlaylistId();
+        // If the deleted playlist is the current playing playlist, stop playback
+        const _currentSong = get(currentSong);
+        if (song.id === _currentSong.id) {
+          // stop playback
+          playOrPauseSong(null);
+          currentSong.set({ id: -999, title: "", artist: "", album: "", source_id: "" });
+          setCurrentSongTime(0);
+          setCurrentSongIndex(-1);
+        }
       } else {
         alert(`Failed to delete song with ID: ${song.id} from playlist ID: ${playlistId}`);
       }
     }
   }
 
-  $: $isPlaying;
-  $: $currentSong;
-  $: $isLoading;
 </script>
 
 {#if song}
@@ -74,8 +87,7 @@
     background-size: cover;
     background-position: center;
     overflow: hidden;
-    transition:
-      transform 0.2s ease,
+    transition: transform 0.2s ease;
   }
 
   .song:hover {
@@ -110,7 +122,7 @@
   .blur {
     position: absolute;
     inset: 0;
-    background-color: rgba(0, 0, 0, 0.60);
+    background-color: rgba(0, 0, 0, 0.6);
     backdrop-filter: blur(5px);
     z-index: 1;
     border-radius: 5px;

MyMusicClientSveltePwa/src/lib/pages/Playlists.svelte

@@ -6,7 +6,7 @@
   import { playOrPauseSong, setPlaylists, updateCurrentPlaylist } from "../scripts/playbackService";
   import SongComponent from "../components/Song.svelte";
 
-  const updateIntervalTimeOut = 1500; // Update every second
+  const updateIntervalTimeOutInMs = 750; // Update every 750 ms
   let intervalId
   let updating = false
 
@@ -19,13 +19,12 @@
     setContext("playOrPauseSong", playOrPause);
 
     intervalId = setInterval(() => {
-
-      if (updating) return; // Prevent multiple updates at the same time
+      // if (updating) return; // Prevent multiple updates at the same time
       updating = true;
       songs.set(getCachedPlaylistSongs(playlistId));
       updateCurrentPlaylist(playlistId);
       updating = false;
-    }, updateIntervalTimeOut);
+    }, updateIntervalTimeOutInMs);
   });
 
   function playOrPause(songId) {

MyMusicClientSveltePwa/src/lib/scripts/playbackService.js

@@ -125,6 +125,12 @@ export function previousSong() {
 }
 
 export function playOrPauseSong(songId) {
+
+  if (songId < 0) {
+    // Invalid songId, do nothing
+    return;
+  }
+
   const _currentSong = get(currentSong);
 
   if (songId === null || songId === undefined) {

MyMusicClientSveltePwa/src/lib/scripts/playlistService.js

@@ -1,5 +1,5 @@
 import { writable, get } from "svelte/store";
-import { getCachedPlaylists, setCachedPlaylists, setPlaylistSongs, getCachedPlaylistSongs, appConfiguration, getConfiguration, getCurrentPlaylistId } from "./storageService";
+import { getCachedPlaylists, setCachedPlaylists, setCachedPlaylistSongs, getCachedPlaylistSongs, appConfiguration, getConfiguration, getCurrentPlaylistId } from "./storageService";
 import { fetchPlaylists, fetchPlaylistSongs, fetchNewPlaylist, fetchNewPlaylistSongs, deletePlaylist } from "./api";
 import { componentParams, navigateTo } from "./routeService";
 import { playOrPauseSong, setPlaylists, currentSong, playPercentage, updateCurrentPlaylist } from "./playbackService";
@@ -27,7 +27,7 @@ export async function initializePlaylistService() {
     setCachedPlaylists(fetchedPlaylists);
     for (const playlist of fetchedPlaylists) {
       const songs = await fetchPlaylistSongs(playlist.id);
-      setPlaylistSongs(playlist.id, songs);
+      setCachedPlaylistSongs(playlist.id, songs);
     }
   }
 
@@ -69,16 +69,16 @@ export async function deleteCurrentPlaylist() {
     // TODO delete resource from API, images etc
     const result = await deletePlaylist(playlistId);
     if (result.success) {
-      const currentPlaylist = getCurrentPlaylistId();
+      const currentPlaylistId = getCurrentPlaylistId();
 
       // If the deleted playlist is the current playing playlist, stop playback
-      if (currentPlaylist === playlistId) {
+      if (currentPlaylistId === playlistId) {
         // stop playback
         playOrPauseSong(null);
         setPlaylists(0);
-        currentSong.set({id: -999, title: "", artist: "", album: "", source_id: ""});
+        currentSong.set({ id: -999, title: "", artist: "", album: "", source_id: "" });
       }
-      
+
       playPercentage.set(0);
 
       // Remove playlist from cached playlists
@@ -100,11 +100,11 @@ export function removeSongFromPlaylist(songId) {
     const playlistId = playlist.id;
     const cachedSongs = getCachedPlaylistSongs(playlistId);
     const songIndex = cachedSongs.findIndex((s) => s.id === songId);
-    if (songIndex !== -1) {
-      cachedSongs.splice(songIndex, 1);
-      setPlaylistSongs(playlistId, cachedSongs);
+    const removed = cachedSongs.splice(songIndex, 1);
+
+    if (removed.length > 0) {
+      setCachedPlaylistSongs(playlistId, cachedSongs);
     }
-    updateCurrentPlaylist(playlistId);
   }
 }
 
@@ -128,10 +128,15 @@ async function backgroundUpdate() {
     const cachedSongs = getCachedPlaylistSongs(playlistId);
     const lastKnowSongPosition = cachedSongs.length;
 
-    const newSongs = await fetchNewPlaylistSongs(playlistId, lastKnowSongPosition);
-    if (newSongs.length > 0) {
-      const updatedSongs = [...cachedSongs, ...newSongs];
-      setPlaylistSongs(playlistId, updatedSongs);
-    }
+    const newPlaylistSongs = await fetchNewPlaylistSongs(playlistId, lastKnowSongPosition);
+    
+    // get the difference between cachedSongs and newPlaylistSongs
+    const songsToAdd = newPlaylistSongs.filter(song => !cachedSongs.some(cs => cs.id === song.id));
+
+    if (songsToAdd.length > 0) {
+      const updatedSongs = [...cachedSongs, ...songsToAdd];
+      setCachedPlaylistSongs(playlistId, updatedSongs);
+    } 
+
   }
 }

MyMusicClientSveltePwa/src/lib/scripts/storageService.js

@@ -22,7 +22,7 @@ export function setCachedPlaylists(playlists) {
   setItem(PlaylistsKey, playlists);
 }
 
-export function setPlaylistSongs(playlistId, songs) {
+export function setCachedPlaylistSongs(playlistId, songs) {
   const key = `${PlaylistSongsKey}${playlistId}`;
   setItem(key, songs);
 }