From eb163638138d616e505891886fb1e20c585c3301 Mon Sep 17 00:00:00 2001
From: DutchJavaDev <borismulder@outlook.com>
Date: Fri, 22 Aug 2025 23:28:53 +0200
Subject: [PATCH 1/2] test in the field

---
 MyMusicClientSveltePwa/src/App.svelte         |  6 +-
 MyMusicClientSveltePwa/src/app.css            |  4 ++
 .../src/lib/components/Modals.svelte          |  2 +-
 .../lib/components/PlayerBarComponent.svelte  |  6 +-
 .../lib/components/PlaylistComponent.svelte   | 68 ++++++++++++++++---
 .../src/lib/components/SongComponent.svelte   | 31 +++++----
 .../src/lib/pages/Home.svelte                 | 10 ++-
 .../src/lib/pages/Playlist.svelte             |  8 +--
 .../src/lib/scripts/playbackService.js        |  4 ++
 9 files changed, 104 insertions(+), 35 deletions(-)

diff --git a/MyMusicClientSveltePwa/src/App.svelte b/MyMusicClientSveltePwa/src/App.svelte
index cc1235a..c4cee60 100644
--- a/MyMusicClientSveltePwa/src/App.svelte
+++ b/MyMusicClientSveltePwa/src/App.svelte
@@ -49,11 +49,11 @@
 
   <!-- Sticky Bottom Bar -->
   <footer class="bottom-bar">
-    <div class="row w-100">
-      <div class="col-6">
+    <div class="row w-100 justify-content-center align-items-center">
+      <div class="col-4 col-lg-4 col-md-4 col-sm-4">
         <button aria-label="empty storage" class="btn btn-dark w-100" on:click={refresh}><i class="fa-solid fa-arrows-rotate"></i></button>
       </div>
-      <div class="col-6">
+      <div class="col-4 col-lg-4 col-md-4 col-sm-4">	
         <button aria-label="home" class="btn btn-dark w-100" on:click={() => navigateTo("/Home")}><i class="fa-solid fa-house"></i></button>
       </div>
     </div>
diff --git a/MyMusicClientSveltePwa/src/app.css b/MyMusicClientSveltePwa/src/app.css
index a1c8261..db756a0 100644
--- a/MyMusicClientSveltePwa/src/app.css
+++ b/MyMusicClientSveltePwa/src/app.css
@@ -21,3 +21,7 @@ body {
     font-size: 1.1rem;
   }
 }
+
+  .cursor {
+    cursor: default;
+  }
\ No newline at end of file
diff --git a/MyMusicClientSveltePwa/src/lib/components/Modals.svelte b/MyMusicClientSveltePwa/src/lib/components/Modals.svelte
index c3be855..985ee00 100644
--- a/MyMusicClientSveltePwa/src/lib/components/Modals.svelte
+++ b/MyMusicClientSveltePwa/src/lib/components/Modals.svelte
@@ -54,7 +54,7 @@
                 <img loading="lazy" class="img-fluid border border-1 rounded rounded-2 mt-1" src={getImageUrl($currentSong.thumbnail_path)} alt="404" />
               </div>
               <div class="col-12">
-                <input type="range" on:change={seekEvent} class="form-range mt-5" value={$playPercentage} min="0" max="100" step="1" />
+                <input type="range" on:change={seekEvent} class="form-range mt-5" value={$playPercentage} min="0" max="100" step="0.3" />
               </div>
               <div class="col-12">
                 <div class="row mt-4">
diff --git a/MyMusicClientSveltePwa/src/lib/components/PlayerBarComponent.svelte b/MyMusicClientSveltePwa/src/lib/components/PlayerBarComponent.svelte
index 8df4c23..0a20d5c 100644
--- a/MyMusicClientSveltePwa/src/lib/components/PlayerBarComponent.svelte
+++ b/MyMusicClientSveltePwa/src/lib/components/PlayerBarComponent.svelte
@@ -17,7 +17,7 @@
 
 <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}%, #1CC558 {$playPercentage}%);">
+    <div class="col-9 col-md-10 col-lg-11 rounded-end rounded-end-0 rounded-5" style="background: linear-gradient(to right, gray {$playPercentage}%, #1CC558 {$playPercentage}%);">
       <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}
@@ -26,8 +26,8 @@
         {/if}
       </button>
     </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">
+    <div class="col-3 col-md-2 col-lg-1 border-start border-2">
+      <button on:click={togglePlay} class="btn btn-dark play-button rounded-end rounded-end-5 w-100">
         {#if $currentSong && $isPlaying && !$isLoading}
           <i class="fa-solid fa-pause"></i>
         {:else if !$isLoading && !$isPlaying}
diff --git a/MyMusicClientSveltePwa/src/lib/components/PlaylistComponent.svelte b/MyMusicClientSveltePwa/src/lib/components/PlaylistComponent.svelte
index afefdcf..36f1809 100644
--- a/MyMusicClientSveltePwa/src/lib/components/PlaylistComponent.svelte
+++ b/MyMusicClientSveltePwa/src/lib/components/PlaylistComponent.svelte
@@ -1,37 +1,89 @@
 <script>
-// @ts-nocheck
+  // @ts-nocheck
   import { getImageUrl } from "../scripts/api";
   import { navigateTo } from "../scripts/routeService.js";
+  import { playOrPauseSong, setPlaylists } from "../scripts/playbackService";
   // @ts-nocheck
   export let playlist = null;
 
-  async function viewPlaylist() {
-    navigateTo(`/Playlist`, { playlistId : playlist.id });
+  function viewPlaylist() {
+    navigateTo(`/Playlist`, { playlistId: playlist.id });
+  }
+
+  function playPlaylist() {
+    setPlaylists(playlist.id);
+    playOrPauseSong(null);
   }
 </script>
 
 <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)}); {true ? "border-color: #5bbd99 !important;" : ""}">
-      <h3>{playlist.name}</h3>
-      <p>{playlist.description}</p>
-    </button>
+    <div class="row me-1">
+      <button aria-label="play button" on:click={playPlaylist} class="col-2 play-btn">
+        <i class="fa-solid fa-play"></i>
+      </button>
+      <button aria-label="playlist button" on:click={viewPlaylist} class="playlist-item btn border border-3 col-10" style="--url: url({getImageUrl(playlist.thumbnailPath)});"> </button>
+      <div class="text-start col-12 cursor">
+        <p>#{playlist.name}<br />{playlist.description}</p>
+      </div>
+    </div>
   {:else}
     <p>No playlist available.</p>
   {/if}
 </div>
 
 <style>
+  p {
+    font-size: 0.7rem !important;
+  }
+
   .playlist-item {
     background-image: var(--url);
     background-size: cover;
     background-position: center;
+    border-color: transparent !important;
     font-weight: bolder;
     color: white;
-    height: 10rem;
+    min-height: 5rem;
+    transform: scale(1);
+    transition: transform 0.5s;
+  }
+
+  .playlist-item:hover {
+    transform: scale(1.05);
+    transition: transform 0.5s;
+  }
+
+  .play-btn {
+    font-size: 1.8rem;
+    background-color: rgba(131, 131, 131, 0.068) !important;
+    border: none !important;
+    color: #1cc558 !important;
+    border-top-left-radius: 10px;
+    border-bottom-left-radius: 10px;
+    border-left: #1cc558 3px solid !important;
+    transform: scale(1);
+    transition: transform 0.5s;
+  }
+
+  .play-btn:hover {
+    transform: scale(1.05);
+    transition: transform 0.5s;
   }
 
   .playlist-component {
     margin-top: 10px;
   }
+
+  .row{
+    border: #1cc55711 2px solid;
+    border-radius: 10px;
+  }
+
+  .row:hover{
+    transition: background-color 0.4s;
+    background-color: rgba(128, 128, 128, 0.096);
+    border-radius: 15px;
+    border-bottom: #1cc557 3px solid;
+  }
 </style>
diff --git a/MyMusicClientSveltePwa/src/lib/components/SongComponent.svelte b/MyMusicClientSveltePwa/src/lib/components/SongComponent.svelte
index cd18dd5..de93d45 100644
--- a/MyMusicClientSveltePwa/src/lib/components/SongComponent.svelte
+++ b/MyMusicClientSveltePwa/src/lib/components/SongComponent.svelte
@@ -1,5 +1,5 @@
 <script>
-// @ts-nocheck
+  // @ts-nocheck
 
   import { getContext, onMount, setContext } from "svelte";
   import { currentSong, isPlaying, isLoading } from "../scripts/playbackService";
@@ -19,25 +19,22 @@
 
 {#if song}
   <div class="row mb-3 song-component">
-    <div class="col-10 border border-1 rounded rounded-2" style={$currentSong && $currentSong.id === song.id ? "border-color:#1CC558 !important;" : ""}>
-      <div class="text-lg-start">
-        <p style={$currentSong && $currentSong.id === song.id ? "color:#1CC558;" : ""}>{song.name}</p>
-      </div>
-    </div>
     <div class="col-2">
-      <button
-        on:click={() => playOrPauseSong(song.id)}
-        class="btn btn-dark play-button"
-      >
+      <button on:click={() => playOrPauseSong(song.id)} class="btn btn-dark w-100 play-button">
         {#if $currentSong && $currentSong.id === song.id && $isPlaying}
           <i class="fa-solid fa-pause"></i>
         {:else if $isLoading && $currentSong.id === song.id}
-          <i class="fa-solid fa-spinner fa-spin"></i>  
+          <i class="fa-solid fa-spinner fa-spin"></i>
         {:else}
           <i class="fa-solid fa-play"></i>
         {/if}
       </button>
     </div>
+    <div class="col-10 border border-1 rounded rounded-2 cursor" style={$currentSong && $currentSong.id === song.id ? "border-color:#1CC558 !important;" : "border-color: gray !important;"}>
+      <div class="text-lg-start">
+        <p style={$currentSong && $currentSong.id === song.id ? "color:#1CC558;" : ""}>{song.name}</p>
+      </div>
+    </div>
   </div>
 {:else}
   <p>No song available.</p>
@@ -46,7 +43,7 @@
 <style>
   .song-component {
     height: 2.5rem;
-    color: white;
+    color: #B3B3B3;
     font-weight: bolder;
   }
 
@@ -66,8 +63,16 @@
     width: 3rem;
     height: 3rem;
     display: flex;
-    color: #1CC558;
+    color: #1cc558;
+    background-color: transparent !important;
+    border: none !important;
     align-items: center;
     justify-content: center;
+    border-left: #1CC558 2px solid !important;
+  }
+
+  .play-button:hover {
+    background-color: rgba(28, 197, 88, 0.1) !important;
+    transition: background-color 0.3s ease;
   }
 </style>
diff --git a/MyMusicClientSveltePwa/src/lib/pages/Home.svelte b/MyMusicClientSveltePwa/src/lib/pages/Home.svelte
index b620793..cba2fc7 100644
--- a/MyMusicClientSveltePwa/src/lib/pages/Home.svelte
+++ b/MyMusicClientSveltePwa/src/lib/pages/Home.svelte
@@ -8,9 +8,13 @@
   onMount(() => {});
 </script>
 {#if $playlistsStore.length > 0}
-  {#each $playlistsStore as playlist}
-    <PlaylistComponent {playlist} />
-  {/each}
+<div class="row">
+   {#each $playlistsStore as playlist}
+      <div class="col-12 col-lg-4 col-md-4 col-sm-6">
+        <PlaylistComponent {playlist} />
+      </div>
+    {/each}
+</div>
 {:else}
   <p class="text-center">Working.....</p>
 {/if}
\ No newline at end of file
diff --git a/MyMusicClientSveltePwa/src/lib/pages/Playlist.svelte b/MyMusicClientSveltePwa/src/lib/pages/Playlist.svelte
index bcc13df..b118b61 100644
--- a/MyMusicClientSveltePwa/src/lib/pages/Playlist.svelte
+++ b/MyMusicClientSveltePwa/src/lib/pages/Playlist.svelte
@@ -39,13 +39,13 @@
 </script>
 
 {#if $songs.length > 0}
-  <div class="playlist-page">
-    <div class="playlist-songs">
+  <div class="row">
       {#each $songs as song}
-        <SongComponent {song} {playlistId} />
+        <div class="col-12 col-lg-4">
+          <SongComponent {song} {playlistId} />
+        </div>
       {/each}
     </div>
-  </div>
 {:else}
   <p>No songs in playlist.</p>
 {/if}
diff --git a/MyMusicClientSveltePwa/src/lib/scripts/playbackService.js b/MyMusicClientSveltePwa/src/lib/scripts/playbackService.js
index 3610957..50c2840 100644
--- a/MyMusicClientSveltePwa/src/lib/scripts/playbackService.js
+++ b/MyMusicClientSveltePwa/src/lib/scripts/playbackService.js
@@ -119,6 +119,10 @@ export function previousSong() {
 export function playOrPauseSong(songId) {
   const _currentSong = get(currentSong);
 
+  if (songId === null || songId === undefined) {
+    songId = playlistSongs[0].id; // Default to first song if no songId provided
+  }
+
   if (!_currentSong || _currentSong.id != songId) {
     // new song selected
     playPercentage.set(0);

From 959df7699a09fcff578ea405d5d9096a7ce26191 Mon Sep 17 00:00:00 2001
From: DutchJavaDev <borismulder@outlook.com>
Date: Thu, 28 Aug 2025 20:36:53 +0200
Subject: [PATCH 2/2] test

---
 .../src/lib/scripts/playbackService.js                 | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/MyMusicClientSveltePwa/src/lib/scripts/playbackService.js b/MyMusicClientSveltePwa/src/lib/scripts/playbackService.js
index 50c2840..0206531 100644
--- a/MyMusicClientSveltePwa/src/lib/scripts/playbackService.js
+++ b/MyMusicClientSveltePwa/src/lib/scripts/playbackService.js
@@ -61,7 +61,6 @@ export function initializePlaybackService() {
 
   audioElement.addEventListener("ended", () => {
     isPlaying.set(false);
-    updateMediaSessionPlaybackState(false);
     if (get(isLoopingEnabled)) {
       audioElement.currentTime = 0;
       audioElement.load();
@@ -75,10 +74,10 @@ export function initializePlaybackService() {
     updateMediaSessionPlaybackState(false);
   });
 
-  audioElement.addEventListener("playing", () => {
-    isPlaying.set(true);
-    updateMediaSessionPlaybackState(true);
-  });
+  // audioElement.addEventListener("playing", () => {
+  //   isPlaying.set(true);
+  //   updateMediaSessionPlaybackState(true);
+  // });
 
   audioElement.addEventListener("timeupdate", () => {
     const percentage = (audioElement.currentTime / audioElement.duration) * 100;
@@ -99,6 +98,7 @@ export function initializePlaybackService() {
     isPlaying.set(true);
     await audioElement.play();
   });
+
   audioElement.addEventListener("error", (e) => {
     console.error("Error loading audio:", e);
   });