From 88ecea1761c8b3ffe9cc0529cb3fd96c25b0e453 Mon Sep 17 00:00:00 2001
From: Janis Hutz <development@janishutz.com>
Date: Sun, 30 Jun 2024 14:46:22 +0200
Subject: [PATCH] Design changes

---
 .../src/components/playerView.vue             | 29 +++++++++++++++-
 .../src/components/playlistView.vue           | 21 ++++++++++--
 MusicPlayerV2-GUI/src/views/RemoteView.vue    | 33 +++++++++++--------
 MusicPlayerV2-GUI/src/views/ShowcaseView.vue  | 19 ++++++++---
 4 files changed, 80 insertions(+), 22 deletions(-)

diff --git a/MusicPlayerV2-GUI/src/components/playerView.vue b/MusicPlayerV2-GUI/src/components/playerView.vue
index 66e7d02..44ff8a4 100644
--- a/MusicPlayerV2-GUI/src/components/playerView.vue
+++ b/MusicPlayerV2-GUI/src/components/playerView.vue
@@ -62,7 +62,9 @@
                 @control="( action ) => { control( action ) }" @play-song="( song ) => { playSong( song ) }"
                 @add-new-songs="( songs ) => addNewSongs( songs )" @playlist-reorder="( move ) => moveSong( move )"
                 :is-logged-into-apple-music="player.isLoggedIn"
-                @add-new-songs-apple-music="( song ) => addNewSongFromObject( song )"></playlistView>
+                @add-new-songs-apple-music="( song ) => addNewSongFromObject( song )"
+                @delete-song="song => removeSongFromPlaylist( song )"
+                @clear-playlist="() => clearPlaylist()"></playlistView>
         </div>
         <notificationsModule ref="notifications" location="bottomleft" size="bigger"></notificationsModule>
         <popupModule @update="( data ) => popupReturnHandler( data )" ref="popup"></popupModule>
@@ -489,6 +491,31 @@
         notificationHandler.emit( 'playlist-update', playlist.value );
     }
 
+    const removeSongFromPlaylist = ( song: number ) => {
+        playlist.value = player.getQueue();
+        playlist.value.splice( song, 1 );
+        player.setPlaylist( playlist.value );
+        if ( !isPlaying.value ) {
+            player.prepare( 0 );
+            isPlaying.value = true;
+            startProgressTracker();
+        }
+        notificationHandler.emit( 'playlist-update', playlist.value );
+    }
+
+    const clearPlaylist = () => {
+        playlist.value = [];
+        player.control( 'pause' );
+        stopProgressTracker();
+        isPlaying.value = false;
+        player.setPlaylist( [] );
+        currentlyPlayingSongArtist.value = '';
+        currentlyPlayingSongName.value = 'Not playing';
+        coverArt.value = '';
+        pos.value = 0;
+        notificationHandler.emit( 'playlist-update', playlist.value );
+    }
+
     emits( 'playerStateChange', isShowingFullScreenPlayer.value ? 'show' : 'hide' );
 
     const userStore = useUserStore();
diff --git a/MusicPlayerV2-GUI/src/components/playlistView.vue b/MusicPlayerV2-GUI/src/components/playlistView.vue
index 89922d4..1f6a85a 100644
--- a/MusicPlayerV2-GUI/src/components/playlistView.vue
+++ b/MusicPlayerV2-GUI/src/components/playlistView.vue
@@ -1,13 +1,14 @@
 <template>
     <div>
-        <h1>Playlist</h1>
+        <h1>Queue</h1>
         <input type="file" multiple accept="audio/*" id="more-songs" class="small-buttons">
         <button @click="addNewSongs()" class="small-buttons" title="Load selected files"><span class="material-symbols-outlined">upload</span></button>
         <button @click="openSearch()" v-if="$props.isLoggedIntoAppleMusic" class="small-buttons" title="Search Apple Music for the song"><span class="material-symbols-outlined">search</span></button>
+        <button @click="clearPlaylist()" class="small-buttons" title="Clear the playlist"><span class="material-symbols-outlined">delete</span></button>
         <p v-if="!hasSelectedSongs">Please select at least one song to proceed</p>
         <div class="playlist-box" id="pl-box">
             <!-- TODO: Allow editing additionalInfo. Think also how to make it persist over reloads... Export to JSON and then best-guess add them? Very easy for Apple Music 'cause ID, but how for local songs? -->
-            <!-- TODO: Allow deleting songs, as well as whole playlist -->
+            <!-- TODO: Allow deleting songs, as well as whole playlist -> Handle on player side -->
             <!-- TODO: Handle long AppleMusic Playlists, as AppleMusic doesn't automatically load all songs of a playlist -->
             <div class="song" v-for="song in computedPlaylist" v-bind:key="song.id" 
                 :class="( song.id === ( $props.playlist ? $props.playlist [ $props.currentlyPlaying ?? 0 ].id : '' ) && isPlaying ? 'playing' : ' not-playing' ) 
@@ -27,6 +28,7 @@
                 <span class="material-symbols-outlined move-icon" @click="moveSong( song.id, 'down' )" title="Move song down" v-if="canBeMoved( 'down', song.id )">arrow_downward</span>
                 <h3 class="song-title">{{ song.title }}</h3>
                 <p class="playing-in">{{ getTimeUntil( song ) }}</p>
+                <button @click="deleteSong( song.id )" class="small-buttons" title="Remove this song from the queue" v-if="canBeMoved( 'down', song.id ) || canBeMoved( 'up', song.id )"><span class="material-symbols-outlined">delete</span></button>
             </div>
         </div>
         <searchView ref="search" @selected-song="( song ) => { addNewSongsAppleMusic( song ) }"></searchView>
@@ -34,6 +36,7 @@
 </template>
 
 <script setup lang="ts">
+// TODO: Add logout button
     import type { AppleMusicSongData, ReadFile, Song } from '@/scripts/song';
     import { computed, ref } from 'vue';
     import searchView from './searchView.vue';
@@ -131,6 +134,18 @@
         }
     } );
 
+    const deleteSong = ( songID: string ) => {
+        for ( const song in props.playlist ) {
+            if ( props.playlist[ song ].id === songID ) {
+                emits( 'delete-song', parseInt( song ) );
+            }
+        }
+    }
+
+    const clearPlaylist = () => {
+        emits( 'clear-playlist', '' );
+    }
+
 
     const control = ( action: string ) => {
         emits( 'control', action );
@@ -183,7 +198,7 @@
         }
     }
 
-    const emits = defineEmits( [ 'play-song', 'control', 'playlist-reorder', 'add-new-songs', 'add-new-songs-apple-music' ] );
+    const emits = defineEmits( [ 'play-song', 'control', 'playlist-reorder', 'add-new-songs', 'add-new-songs-apple-music', 'delete-song', 'clear-playlist' ] );
 </script>
 
 <style scoped>
diff --git a/MusicPlayerV2-GUI/src/views/RemoteView.vue b/MusicPlayerV2-GUI/src/views/RemoteView.vue
index fe0a140..f732fb8 100644
--- a/MusicPlayerV2-GUI/src/views/RemoteView.vue
+++ b/MusicPlayerV2-GUI/src/views/RemoteView.vue
@@ -7,10 +7,10 @@
                     <img v-if="playlist[ playingSong ]" :src="playlist[ playingSong ].cover" class="fancy-view-song-art" id="current-image" crossorigin="anonymous">
                     <span v-else class="material-symbols-outlined fancy-view-song-art">music_note</span>
                     <div class="current-song">
-                        <progress max="1000" id="progress" :value="progressBar"></progress>
-                        <h1>{{ playlist[ playingSong ] ? playlist[ playingSong ].title : 'Not playing' }}</h1>
-                        <p class="additional-info" v-if="playlist[ playingSong ] ? ( playlist[ playingSong ].additionalInfo !== '' ) : false">{{ playlist[ playingSong ] ? playlist[ playingSong ].additionalInfo : '' }}</p>
+                        <h1 style="margin-bottom: 5px;">{{ playlist[ playingSong ] ? playlist[ playingSong ].title : 'Not playing' }}</h1>
                         <p>{{ playlist[ playingSong ] ? playlist[ playingSong ].artist : '' }}</p>
+                        <p class="additional-info" v-if="playlist[ playingSong ] ? ( playlist[ playingSong ].additionalInfo !== '' ) : false">{{ playlist[ playingSong ] ? playlist[ playingSong ].additionalInfo : '' }}</p>
+                        <progress max="1000" id="progress" :value="progressBar"></progress>
                     </div>
                 </div>
                 <div class="song-list-wrapper">
@@ -156,6 +156,12 @@
     }
 </script>
 
+<style>
+    #themeSelector {
+        display: none;
+    }
+</style>
+
 <style scoped>
     .remote-view {
         width: 100%;
@@ -164,6 +170,8 @@
         align-items: center;
         flex-direction: column;
         text-align: justify;
+        background-color: rgb(2, 16, 61);
+        color: white;
     }
 
     .loaded {
@@ -214,6 +222,7 @@
         padding: 1vh;
         border: 1px white solid;
         background-color: rgba( 0, 0, 0, 0.4 );
+        border-radius: 10px;
     }
 
     .song-details-wrapper {
@@ -225,14 +234,6 @@
         text-align: justify;
     }
 
-    .song-list .song-image {
-        width: 5vw;
-        height: 5vw;
-        object-fit: cover;
-        object-position: center;
-        font-size: 5vw;
-    }
-
     .pause-icon {
         width: 5vw;
         height: 5vw;
@@ -260,6 +261,7 @@
         max-width: 80%;
         text-align: center;
         background-color: rgba( 0, 0, 0, 0.4 );
+        border-radius: 10px;
     }
 
     .fancy-view-song-art {
@@ -269,6 +271,7 @@
         object-position: center;
         margin-bottom: 10px;
         font-size: 30vh !important;
+        border-radius: 30px;
     }
 
     #app {
@@ -276,14 +279,17 @@
     }
 
     #progress, #progress::-webkit-progress-bar {
-        background-color: rgba(45, 28, 145);
-        color: rgba(45, 28, 145);
+        background-color: rgb(82, 82, 82);
+        color: rgb(82, 82, 82);
         width: 30vw;
+        height: 10px;
         border: none;
         border-radius: 0px;
         accent-color: white;
         -webkit-appearance: none;
         appearance: none;
+        border-radius: 10px;
+        margin-bottom: 5px;
     }
 
     #progress::-moz-progress-bar {
@@ -320,6 +326,7 @@
         margin: 0;
         padding: 0;
         top: 50%;
+        color: white;
     }
 
     .time-until {
diff --git a/MusicPlayerV2-GUI/src/views/ShowcaseView.vue b/MusicPlayerV2-GUI/src/views/ShowcaseView.vue
index e525983..8aba5f4 100644
--- a/MusicPlayerV2-GUI/src/views/ShowcaseView.vue
+++ b/MusicPlayerV2-GUI/src/views/ShowcaseView.vue
@@ -8,10 +8,10 @@
                     <img v-if="playlist[ playingSong ]" :src="playlist[ playingSong ].cover" class="fancy-view-song-art" id="current-image" crossorigin="anonymous">
                     <span v-else class="material-symbols-outlined fancy-view-song-art">music_note</span>
                     <div class="current-song">
-                        <progress max="1000" id="progress" :value="progressBar"></progress>
-                        <h1>{{ playlist[ playingSong ] ? playlist[ playingSong ].title : 'Not playing' }}</h1>
-                        <p class="additional-info" v-if="playlist[ playingSong ] ? ( playlist[ playingSong ].additionalInfo !== '' ) : false">{{ playlist[ playingSong ] ? playlist[ playingSong ].additionalInfo : '' }}</p>
+                        <h1 style="margin-bottom: 5px;">{{ playlist[ playingSong ] ? playlist[ playingSong ].title : 'Not playing' }}</h1>
                         <p>{{ playlist[ playingSong ] ? playlist[ playingSong ].artist : '' }}</p>
+                        <p class="additional-info" v-if="playlist[ playingSong ] ? ( playlist[ playingSong ].additionalInfo !== '' ) : false">{{ playlist[ playingSong ] ? playlist[ playingSong ].additionalInfo : '' }}</p>
+                        <progress max="1000" id="progress" :value="progressBar"></progress>
                     </div>
                 </div>
                 <div class="mode-selector-wrapper">
@@ -282,6 +282,7 @@
         width: 5vw;
         height: 5vw;
         background-color: rgba( 0, 0, 0, 0.6 );
+        border-radius: 10px;
     }
 
     .playing-symbols-wrapper {
@@ -328,6 +329,7 @@
     }
 
     .song-list-wrapper {
+        border-radius: 10px;
         width: 100%;
         display: flex;
         justify-content: center;
@@ -345,6 +347,7 @@
         padding: 1vh;
         border: 1px white solid;
         background-color: rgba( 0, 0, 0, 0.4 );
+        border-radius: 10px;
     }
 
     .song-details-wrapper {
@@ -361,6 +364,7 @@
         object-fit: cover;
         object-position: center;
         font-size: 5vw;
+        border-radius: 10px;
     }
 
     .pause-icon {
@@ -392,6 +396,7 @@
         padding: 1vh;
         text-align: center;
         background-color: rgba( 0, 0, 0, 0.4 );
+        border-radius: 10px;
     }
 
     .fancy-view-song-art {
@@ -401,6 +406,7 @@
         object-position: center;
         margin-bottom: 10px;
         font-size: 30vh !important;
+        border-radius: 30px;
     }
 
     #app {
@@ -408,14 +414,17 @@
     }
 
     #progress, #progress::-webkit-progress-bar {
-        background-color: rgba(45, 28, 145);
-        color: rgba(45, 28, 145);
+        background-color: rgb(82, 82, 82);
+        color: rgb(82, 82, 82);
         width: 30vw;
+        height: 10px;
         border: none;
         border-radius: 0px;
         accent-color: white;
         -webkit-appearance: none;
         appearance: none;
+        border-radius: 10px;
+        margin-bottom: 5px;
     }
 
     #progress::-moz-progress-bar {