Frontend/fix media controls and flow (#30)

* readable code.. fixed some bugs on the way

* fixes audio play bug

* base sleep timer implementation

* keep track of current song, time, playlist, shuffeled, repeat

* moved functions

* chore: bump version

---------

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

Author: DutchJavaDev

MyMusicClientSveltePwa/package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "mymusicclientsveltepwa",
   "private": true,
-  "version": "0.1.5",
+  "version": "0.1.6",
   "type": "module",
   "scripts": {
     "dev": "vite --host",

MyMusicClientSveltePwa/package.json

@@ -1,65 +1,32 @@
 <!-- App.svelte -->
 <script>
-  import { onDestroy, onMount } from "svelte";
-  import { initializeRoute, pathName, navigateTo, component, componentParams } from "./lib/scripts/route.js";
-  import { initPlaybackAudio } from "./lib/scripts/playback.js";
-  import { initializeMediaSession } from "./lib/scripts/mediasession.js";
+  import { onMount, onDestroy } from "svelte";
+  import { initializeRouteService, pathName, navigateTo, component, componentParams } from "./lib/scripts/routeService.js";
   import PlayerBarComponent from "./lib/components/PlayerBarComponent.svelte";
   import Modals from "./lib/components/Modals.svelte";
-  import { initPlaylist } from "./lib/scripts/playlist.js";
-  
-  // TODO remove this import when manual refresh logic is no longer needed
-  import { clearStorage } from "./lib/scripts/storage.js";
-  import { playlistsStore, initStores, updateStores } from "./lib/scripts/api.js";
+  import { initializePlaylistService } from "./lib/scripts/playlistService.js";
+  import { initializePlaybackService } from "./lib/scripts/playbackService.js";
+  import { initializeMediaSessionService } from "./lib/scripts/mediasessionService.js";
 
   $: $pathName;
   $: $component;
 
-  let intervalId;
-
   // @ts-ignore
   const version = __APP_VERSION__;
 
   onMount(() => {
-    async function async() {
-      await initStores();
-      initPlaylist();
-      initPlaybackAudio();
-      initializeMediaSession();
-      initializeRoute();
-      backgroundFetch();
+    async function initializeServices() {
+      initializeRouteService();
+      await initializePlaylistService();
+      initializePlaybackService();
+      initializeMediaSessionService();
     }
-    async();
+    initializeServices();
   });
 
-  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 initStores();
-    backgroundFetch();
-  }
+  async function refresh() {}
 </script>
 
 <div class="app-layout bg-dark">
@@ -93,7 +60,7 @@
 
 <Modals />
 
-<audio id="audio-player" style="display: none;"></audio>
+<audio id="audio-player" preload="none" style="display: none;"></audio>
 
 <style>
   .app-layout {

MyMusicClientSveltePwa/src/App.svelte

@@ -1,23 +1,26 @@
 <script>
-  import { isPlaying, currentSong, playOrPauseAudio, playPercentage, toggleRepeat, isRepeatEnabled, setCurrentTime } from "../scripts/playback.js";
-  import { getImageUrl } from "../scripts/api.js";
-  import { nextSong, previousSong, shufflePlaylist, isShuffleEnabled } from "../scripts/playlist.js";
+// @ts-nocheck
+
+  import { isPlaying, currentSong, 
+           playPercentage, setCurrentTime, 
+           nextSong, previousSong, 
+           isShuffledEnabled, isLoopingEnabled, 
+           toggleShuffle, playOrPauseSong,
+           toggleLoop } from "../scripts/playbackService";
+  import { getImageUrl } from "../scripts/api";
+  import { get } from "svelte/store";
+  import { isTimerEnabled, timeLeft, toggleSleepTimer } from "../scripts/sleeptimerService";
 
-  $: $isPlaying;
   $: $currentSong;
+  $: $isPlaying;
   $: $playPercentage;
-  $: $isShuffleEnabled;
-  $: $isRepeatEnabled;
-
-  function next() {
-    playOrPauseAudio(nextSong());
-  }
-  function prev() {
-    playOrPauseAudio(previousSong());
-  }
-
+  $: $isShuffledEnabled;
+  $: $isLoopingEnabled;
+  $: $isTimerEnabled;
+  $: $timeLeft;
+  
   function togglePlay() {
-    playOrPauseAudio(null);
+    playOrPauseSong(get(currentSong).id);
   }
 
   function seekEvent(event) {
@@ -34,8 +37,8 @@
 </script>
 
 <!-- Modal -->
-{#if $currentSong}
-  <div class="modal fade" id="songControlModal" tabindex="-1" aria-labelledby="songControlModalLabel" aria-hidden="true">
+{#if $currentSong && $currentSong.id !== -999} <!-- Ensure currentSong is valid -->
+  <div class="modal fade" id="songControlModal" tabindex="-1" aria-labelledby="songControlModalLabel" aria-hidden="false">
     <div class="modal-dialog modal-fullscreen-sm-down">
       <div class="modal-content bg-dark">
         <div class="modal-body">
@@ -55,7 +58,7 @@
               <div class="col-12">
                 <div class="row mt-4">
                   <div class="col-4">
-                    <button aria-label="previous song" on:click={prev} class="btn btn-dark w-100">
+                    <button aria-label="previous song" on:click={previousSong} class="btn btn-dark w-100">
                       <i class="fa-solid fa-backward fa-2xl"></i>
                     </button>
                   </div>
@@ -71,7 +74,7 @@
                   </div>
 
                   <div class="col-4">
-                    <button aria-label="next song" on:click={next} class="btn btn-dark w-100">
+                    <button aria-label="next song" on:click={nextSong} class="btn btn-dark w-100">
                       <i class="fa-solid fa-forward fa-2xl"></i>
                     </button>
                   </div>
@@ -81,23 +84,23 @@
               <div class="col-12">
                 <div class="row mt-5">
                   <div class="col-4">
-                    <button disabled aria-label="sleep timer" type="button" class="btn btn-dark w-100">
-                      <i class="fa-solid fa-stopwatch-20" style="color: white !important;">
-                        <span style="font-size: 0.5rem;">
-                            &nbsp;TODO
+                    <button on:click={toggleSleepTimer} aria-label="sleep timer" type="button" class="btn btn-dark w-100">
+                      <i class="fa-solid fa-stopwatch-20" style="{$isTimerEnabled ? "color: #5bbd99;" : "color:white;"}">
+                        <span style="font-size: 0.8rem;">
+                            &nbsp;{$isTimerEnabled ? $timeLeft : ""}
                       </span>
                     </i>
                     </button>
                   </div>
 
                   <div class="col-4">
-                    <button on:click={shufflePlaylist} aria-label="shuffle playlist" type="button" class="btn btn-dark w-100">
-                      <i class="fa-solid fa-shuffle" style="{$isShuffleEnabled ? "color: #5bbd99;" : "color:white;"}"></i>
+                    <button on:click={toggleShuffle} aria-label="shuffle playlist" type="button" class="btn btn-dark w-100">
+                      <i class="fa-solid fa-shuffle" style="{$isShuffledEnabled ? "color: #5bbd99;" : "color:white;"}"></i>
                     </button>
                   </div>
                   <div class="col-4">
-                    <button on:click={toggleRepeat} aria-label="repeat song" type="button" class="btn btn-dark w-100">
-                      <i class="fa-solid fa-repeat" style="{$isRepeatEnabled ? "color: #5bbd99;" : "color:white;"}"></i>
+                    <button on:click={toggleLoop} aria-label="repeat song" type="button" class="btn btn-dark w-100">
+                      <i class="fa-solid fa-repeat" style="{$isLoopingEnabled ? "color: #5bbd99;" : "color:white;"}"></i>
                     </button>
                   </div>
                 </div>

MyMusicClientSveltePwa/src/lib/components/Modals.svelte

@@ -1,19 +1,23 @@
 <script>
-  import { isPlaying, currentSong, playOrPauseAudio, playPercentage } from "../scripts/playback.js";
+  // @ts-nocheck
+  import { get } from "svelte/store";
+  import { isPlaying, currentSong, playOrPauseSong, playPercentage } from "../scripts/playbackService";
 
-  $: $isPlaying;
   $: $currentSong;
+  $: $isPlaying;
   $: $playPercentage;
 
   function togglePlay() {
-    playOrPauseAudio(null);
+    if(get(currentSong)){
+      playOrPauseSong(get(currentSong).id);
+    }
   }
 </script>
 
 <div class="container-fluid player-bar mb-2 rounded rounded-5">
   <div class="row space-between">
     <div class="col-9 rounded-end rounded-end-0 rounded-5 border border-1 border-white" style="background: linear-gradient(to right, gray {$playPercentage}%, #5bbd99 {$playPercentage}%);">
-      <button type="button" class="btn clickable-text rounded-end rounded-end-0 rounded-5" data-bs-toggle="modal" data-bs-target="#songControlModal">
+      <button type="button" class="btn clickable-text rounded-end rounded-end-0 rounded-5" data-bs-toggle="{$currentSong ? "modal" : ""}" data-bs-target="{$currentSong ? "#songControlModal" : ""}">
         {#if $currentSong}
           {$currentSong.name}
         {:else}
@@ -23,7 +27,7 @@
     </div>
     <div class="col-3 border-start border-2">
       <button on:click={togglePlay} class="btn btn-dark border border-1 border-white play-button rounded-end rounded-end-5 w-100">
-        {#if $isPlaying}
+        {#if $currentSong && $isPlaying}
           <i class="fa-solid fa-pause"></i>
         {:else}
           <i class="fa-solid fa-play"></i>
@@ -38,7 +42,7 @@
     font-size: 0.85rem;
     max-height: 2.8rem;
     min-height: 2.8rem;
-    width: 100%;;
+    width: 100%;
     font-weight: bold;
     color: white;
     display: -webkit-box;
@@ -50,7 +54,7 @@
     margin-bottom: 2px;
   }
 
-  .player-bar{
+  .player-bar {
     background-color: gray !important;
   }
 

MyMusicClientSveltePwa/src/lib/components/PlayerBarComponent.svelte

@@ -1,12 +1,9 @@
 <script>
+// @ts-nocheck
+  import { getImageUrl } from "../scripts/api";
+  import { navigateTo } from "../scripts/routeService.js";
   // @ts-nocheck
   export let playlist = null;
-  
-  import { navigateTo } from "../scripts/route.js";
-  import { getImageUrl } from "../scripts/api";
-  import { currentPlaylistId } from "../scripts/playlist.js";
-  
-  $: $currentPlaylistId;
 
   async function viewPlaylist() {
     navigateTo(`/Playlist`, { playlistId : playlist.id });
@@ -15,7 +12,7 @@
 
 <div class="playlist-component">
   {#if playlist}
-    <button on:click={viewPlaylist} class="playlist-item btn w-100 border border-3" style="--url: url({getImageUrl(playlist.thumbnailPath)}); {$currentPlaylistId && $currentPlaylistId === playlist.id ? "border-color: #5bbd99 !important;" : ""}">
+    <button on:click={viewPlaylist} class="playlist-item btn w-100 border border-3" style="--url: url({getImageUrl(playlist.thumbnailPath)}); {true ? "border-color: #5bbd99 !important;" : ""}">
       <h3>{playlist.name}</h3>
       <p>{playlist.description}</p>
     </button>

MyMusicClientSveltePwa/src/lib/components/PlaylistComponent.svelte

@@ -1,29 +1,33 @@
 <script>
-import { playOrPauseAudio, currentSong, isPlaying } from "../scripts/playback.js";
-import { setSongs, setCurrentSong, getCurrentSong } from "../scripts/playlist.js"
+// @ts-nocheck
 
-export let song;
-export let playlistId;
+  import { getContext, onMount, setContext } from "svelte";
+  import { currentSong, isPlaying } from "../scripts/playbackService";
 
-$: $currentSong;
-$: $isPlaying;
+  export let song;
 
-function playSong() {
-  setSongs(playlistId);
-  setCurrentSong(song);
-  playOrPauseAudio(getCurrentSong());
-}
+  let playOrPauseSong;
+
+  onMount(() => {
+    playOrPauseSong = getContext("playOrPauseSong");
+  });
+
+  $: $isPlaying;
+  $: $currentSong;
 </script>
 
 {#if song}
   <div class="row mb-3 song-component">
-    <div class="col-10 bg-dark border border-1 rounded rounded-2" style="{$currentSong && $currentSong.id === song.id && $isPlaying ? "border-color:#5bbd99 !important;" : ""}">
+    <div class="col-10 bg-dark border border-1 rounded rounded-2" style={$currentSong && $currentSong.id === song.id ? "border-color:#5bbd99 !important;" : ""}>
       <div class="text-lg-start">
-        <p style="{$currentSong && $currentSong.id === song.id && $isPlaying ? "color:#5bbd99;" : ""}">{song.name}</p>
+        <p style={$currentSong && $currentSong.id === song.id ? "color:#5bbd99;" : ""}>{song.name}</p>
       </div>
     </div>
     <div class="col-2">
-      <button on:click={playSong} class="btn btn-dark play-button">
+      <button
+        on:click={() => playOrPauseSong(song.id)}
+        class="btn btn-dark play-button"
+      >
         {#if $currentSong && $currentSong.id === song.id && $isPlaying}
           <i class="fa-solid fa-pause"></i>
         {:else}

MyMusicClientSveltePwa/src/lib/components/SongComponent.svelte

@@ -1,17 +1,16 @@
 <script>
   import { onMount } from "svelte";
   import PlaylistComponent from "../components/PlaylistComponent.svelte";
-  import { playlistsStore } from "../scripts/api";
+  import { playlistsStore } from "../scripts/playlistService.js";
 
   $: $playlistsStore;
 
   onMount(() => {});
 </script>
-
 {#if $playlistsStore.length > 0}
   {#each $playlistsStore as playlist}
     <PlaylistComponent {playlist} />
   {/each}
 {:else}
   <p class="text-center">Working.....</p>
-{/if}
+{/if}