Merge branch 'main' into dev/prod

Author: DutchJavaDev

.github/workflows/main.yml

@@ -0,0 +1,50 @@
+name: Auto Bump Version
+
+on:
+  pull_request:
+    branches:
+      - main
+    types:
+      - opened
+      - synchronize
+
+permissions:
+  contents: write
+  pull-requests: write
+
+jobs:
+  bump:
+    if: contains(github.head_ref, 'frontend')
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '18'
+
+      - name: Install Node dependencies
+        working-directory: MyMusicClientSveltePwa
+        run: npm ci
+
+      - name: Bump version (no commit)
+        working-directory: MyMusicClientSveltePwa
+        run: npm version patch --no-git-tag-version
+
+      - name: Commit version bump to PR branch
+        working-directory: MyMusicClientSveltePwa
+        run: |
+            git config user.name "github-actions[bot]"
+            git config user.email "41898282+github-actions[bot]@users.noreply.github.com"
+            git fetch origin ${{ github.head_ref }}
+            git checkout -b temp-pr-branch origin/${{ github.head_ref }}
+
+            git add package.json package-lock.json
+            git commit -m "chore: bump version"
+
+            git push origin temp-pr-branch:${{ github.head_ref }}
+        env:
+            GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

MyMusicClientSveltePwa/package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "mymusicclientsveltepwa",
   "private": true,
-  "version": "0.0.0",
+  "version": "0.1.5",
   "type": "module",
   "scripts": {
     "dev": "vite --host",
@@ -14,6 +14,7 @@
     "prettier-plugin-svelte": "^3.4.0",
     "svelte": "^5.33.19",
     "vite": "^6.3.5",
+    "vite-plugin-package-version": "^1.1.0",
     "vite-plugin-pwa": "^1.0.0"
   },
   "dependencies": {

MyMusicClientSveltePwa/package.json

@@ -1,8 +1,7 @@
 <!-- App.svelte -->
 <script>
-  import { onMount } from "svelte";
+  import { onDestroy, onMount } from "svelte";
   import { initializeRoute, pathName, navigateTo, component, componentParams } from "./lib/scripts/route.js";
-  import { updateStores } from "./lib/scripts/api.js";
   import { initPlaybackAudio } from "./lib/scripts/playback.js";
   import { initializeMediaSession } from "./lib/scripts/mediasession.js";
   import PlayerBarComponent from "./lib/components/PlayerBarComponent.svelte";
@@ -11,34 +10,63 @@
   
   // TODO remove this import when manual refresh logic is no longer needed
   import { clearStorage } from "./lib/scripts/storage.js";
-  import { playlistsStore } from "./lib/scripts/api.js";
+  import { playlistsStore, initStores, updateStores } from "./lib/scripts/api.js";
 
   $: $pathName;
   $: $component;
 
+  let intervalId;
+
+  // @ts-ignore
+  const version = __APP_VERSION__;
+
   onMount(() => {
     async function async() {
-      await updateStores();
+      await initStores();
       initPlaylist();
       initPlaybackAudio();
       initializeMediaSession();
       initializeRoute();
+      backgroundFetch();
     }
     async();
   });
 
+  async function backgroundFetch() {
+    const fetchInterval = 1000 * 15; // 15 seconds
+    let isRunning = false;
+
+    intervalId = setInterval(async () => {
+      if (isRunning) return; // Prevent concurrent executions
+      
+      isRunning = true; 
+
+      try {
+        await updateStores();
+      } catch (error) {
+        console.error("Error during background fetch:", error);
+      } finally {
+        isRunning = false;
+      }
+    }, fetchInterval);
+  }
+
   // This is a temporary function to handle refresh logic.
   // It can be replaced with a more specific implementation later.
   async function refresh() {
+    clearInterval(intervalId);
     clearStorage();
     playlistsStore.set([]);
-    await updateStores();
+    await initStores();
+    backgroundFetch();
   }
 </script>
 
 <div class="app-layout bg-dark">
   <!-- Sticky Top Bar -->
-  <header class="top-bar"><div class="container-fluid h-100">{$pathName}</div></header>
+  <header class="top-bar">
+    <div class="container-fluid h-100">{$pathName} <span style="font-size: 0.8rem;">(v{version})</span></div>
+  </header>
 
   <!-- Scrollable Content -->
   <main class="scrollable-content">

MyMusicClientSveltePwa/src/App.svelte

@@ -10,9 +10,8 @@
 
 {#if $playlistsStore.length > 0}
   {#each $playlistsStore as playlist}
-  <PlaylistComponent {playlist} />
-{/each}
+    <PlaylistComponent {playlist} />
+  {/each}
 {:else}
   <p class="text-center">Working.....</p>
 {/if}
-

MyMusicClientSveltePwa/src/lib/pages/Home.svelte

@@ -1,18 +1,31 @@
 <script>
   // @ts-nocheck
 
-  import { onMount } from "svelte";
+  import { onDestroy, onMount } from "svelte";
   import { writable } from "svelte/store";
   import SongComponent from "../components/SongComponent.svelte";
- import { getPlaylistSongs } from "../scripts/api";
+  import { getPlaylistSongs, writablePlaylistsStore } from "../scripts/api";
+  import { setSongs } from "../scripts/playlist";
+  import { on } from "svelte/events";
 
   let songs = writable([]);
   export let playlistId = -1;
 
-  $: $songs;
+  let intervalId;
+
+  $: writablePlaylistsStore[playlistId];
 
   onMount(() => {
     songs.set(getPlaylistSongs(playlistId));
+    writablePlaylistsStore[playlistId].subscribe((value) => {
+      songs.set(value);
+    });
+
+  });
+
+  onDestroy(() => {
+    console.log("Cleaning up interval for playlist songs");
+    clearInterval(intervalId);
   });
 </script>
 

MyMusicClientSveltePwa/src/lib/pages/Playlist.svelte

@@ -1,50 +1,100 @@
 // @ts-nocheck
-import { writable } from "svelte/store";
+import { writable, get } from "svelte/store";
 import { storePlaylists, storePlaylistSongs, getPlaylistsStore, getPlaylistSongsStore } from "./storage.js";
 
 const baseApiUrl = import.meta.env.VITE_BASE_API_URL;
 
-let playlistsArray = new Array();
-let playlistsSongsMap = new Map();
+const playlistsArray = new Array();
+const playlistsSongsMap = new Map();
 
 export const playlistsStore = writable([]);
 
-export async function updateStores() {
+export const writablePlaylistsStore = [];
+
+export async function initStores() {
   // check localStorage for playlists and songs
   // if not found, fetch from API
-  let cachedPlaylists = getPlaylistsStore();
+  const cachedPlaylists = getPlaylistsStore();
 
   if (cachedPlaylists.length > 0) {
     for (const playlist of cachedPlaylists) {
-      playlistsArray.push(playlist);  
+      playlistsArray.push(playlist);
       let songs = getPlaylistSongsStore(playlist.id);
       playlistsSongsMap.set(playlist.id, songs);
+
+      writablePlaylistsStore[playlist.id] = writable(songs);
     }
 
     playlistsStore.set(playlistsArray);
     console.log("Loaded playlists from localStorage");
   } else {
-    let playlists = await fetch(`${baseApiUrl}/playlist`)
+    console.log("Fetching playlists from API");
+    const playlists = await fetch(`${baseApiUrl}/playlist`)
       .then((response) => response.json())
       .then((data) => data.Data)
       .catch((error) => console.error("Error fetching playlists:", error));
 
-    playlistsArray = [];
+    playlistsArray.length = 0;;
     playlistsSongsMap.clear();
 
     for (const playlist of playlists) {
       playlistsArray.push(playlist);
-      let songs = await fetchPlaylistSongs(playlist.id);
+      const songs = await fetchPlaylistSongs(playlist.id);
       playlistsSongsMap.set(playlist.id, songs);
 
       storePlaylistSongs(playlist.id, songs);
+
+      writablePlaylistsStore[playlist.id] = writable(songs);
     }
 
     playlistsStore.set(playlistsArray);
     storePlaylists(playlistsArray);
   }
 }
 
+export async function updateStores() {
+  // Update plaists
+  const cachedPlaylists = getPlaylistsStore();
+  const lastKnowPlaylistId = cachedPlaylists.at(-1).id;
+  const playlists = await fetchPlaylists(lastKnowPlaylistId);
+
+  for (const playlist of playlists) {
+    playlistsArray.push(playlist);
+  }
+
+  playlistsStore.set(playlistsArray);
+  storePlaylists(playlistsArray);
+
+  // Update songs for each playlist
+  console.log("starting to update songs for each playlist");
+  for (const playlist of playlistsArray) {
+    
+    let lastKnowSongPosition = playlistsSongsMap.get(playlist.id).length;
+
+    if (!lastKnowSongPosition) {
+      lastKnowSongPosition = 0; // Default to 0 if no songs are found
+    }
+
+    const songs = await fetchPlaylistSongs(playlist.id, lastKnowSongPosition);
+
+    if (songs.length > 0) {
+      // Add local notification for new songs?
+      console.log(`Found (${songs.length}) new songs for playlist ID: ${playlist.id} with last known song position: ${lastKnowSongPosition}`);
+      playlistsSongsMap.set(playlist.id, [...playlistsSongsMap.get(playlist.id), ...songs]);
+      storePlaylistSongs(playlist.id, playlistsSongsMap.get(playlist.id));
+
+      const songList = get(writablePlaylistsStore[playlist.id]);
+
+      for (const song of songs) {
+        songList.push(song);
+      }
+
+      writablePlaylistsStore[playlist.id].set(songList);
+    }
+  }
+  console.log("Finished updating songs for each playlist");
+}
+
 export function getImageUrl(imagePath) {
   if (!imagePath) return null;
   return `${baseApiUrl}/images/${imagePath}`;
@@ -69,8 +119,16 @@ export function getPlaylistById(playlistId) {
   }
 }
 
-async function fetchPlaylistSongs(playlistId) {
-  let songs = await fetch(`${baseApiUrl}/playlist/${playlistId}`)
+async function fetchPlaylists(lastKnowPlaylistId) {
+  const playlists = await fetch(`${baseApiUrl}/playlist?lastKnowPlaylistId=${lastKnowPlaylistId}`)
+    .then((response) => response.json())
+    .then((data) => data.Data)
+    .catch((error) => console.error("Error fetching playlists:", error));
+  return playlists;
+}
+
+async function fetchPlaylistSongs(playlistId, lastKnowSongId = 0) {
+  const songs = await fetch(`${baseApiUrl}/playlist/${playlistId}?lastKnowSongPosition=${lastKnowSongId}`)
     .then((response) => response.json())
     .then((data) => data.Data)
     .catch((error) => console.error("Error fetching playlist songs:", error));

MyMusicClientSveltePwa/src/lib/scripts/api.js

@@ -32,20 +32,14 @@ export function getCurrentPlaylistId() {
 }
 
 export function setSongs(playlistId) {
-  if (get(currentPlaylistId) === playlistId) {
-    return; // No need to update if the same playlist is set
-  }
   currentPlaylistId.set(playlistId); // Update the current playlist ID
   originalPlaylist = getPlaylistSongs(playlistId);
   currentPlaylist = originalPlaylist.slice(); // Create a copy of the original playlist
-  currentIndex = 0; // Reset index when setting new songs
-
   storeCurrentPlaylist(currentPlaylist, playlistId, get(isShuffleEnabled), get(isRepeatEnabled));
 }
 
 export function getCurrentSong() {
   let song = currentPlaylist[currentIndex];
-  storeCurrentSong(currentIndex, 0);
   return song;
 }
 

MyMusicClientSveltePwa/src/lib/scripts/playlist.js

@@ -31,7 +31,6 @@ export function storeCurrentSong(index, time = 0) {
 
 export function storeCurrentPlaylist(playlist, id, shuffle = false, repeat = false) {
     let data = { playlist, id, shuffle, repeat };
-    console.log("Storing current playlist:", data);
     setItem(currentPlaylistKey, data);
 }