some progress on player

MusicPlayerV2-GUI/src/assets/appleMusicIcon.svg

@@ -0,0 +1,56 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Artwork" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="361px" height="361px" viewBox="0 0 361 361" style="enable-background:new 0 0 361 361;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill-rule:evenodd;clip-rule:evenodd;fill:url(#SVGID_1_);}
+	.st1{fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;}
+</style>
+<g id="Layer_5">
+</g>
+<g>
+	<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="180" y1="358.6047" x2="180" y2="7.7586">
+		<stop  offset="0" style="stop-color:#FA233B"/>
+		<stop  offset="1" style="stop-color:#FB5C74"/>
+	</linearGradient>
+	<path class="st0" d="M360,112.61c0-4.3,0-8.6-0.02-12.9c-0.02-3.62-0.06-7.24-0.16-10.86c-0.21-7.89-0.68-15.84-2.08-23.64
+		c-1.42-7.92-3.75-15.29-7.41-22.49c-3.6-7.07-8.3-13.53-13.91-19.14c-5.61-5.61-12.08-10.31-19.15-13.91
+		c-7.19-3.66-14.56-5.98-22.47-7.41c-7.8-1.4-15.76-1.87-23.65-2.08c-3.62-0.1-7.24-0.14-10.86-0.16C255.99,0,251.69,0,247.39,0
+		H112.61c-4.3,0-8.6,0-12.9,0.02c-3.62,0.02-7.24,0.06-10.86,0.16C80.96,0.4,73,0.86,65.2,2.27c-7.92,1.42-15.28,3.75-22.47,7.41
+		c-7.07,3.6-13.54,8.3-19.15,13.91c-5.61,5.61-10.31,12.07-13.91,19.14c-3.66,7.2-5.99,14.57-7.41,22.49
+		c-1.4,7.8-1.87,15.76-2.08,23.64c-0.1,3.62-0.14,7.24-0.16,10.86C0,104.01,0,108.31,0,112.61v134.77c0,4.3,0,8.6,0.02,12.9
+		c0.02,3.62,0.06,7.24,0.16,10.86c0.21,7.89,0.68,15.84,2.08,23.64c1.42,7.92,3.75,15.29,7.41,22.49c3.6,7.07,8.3,13.53,13.91,19.14
+		c5.61,5.61,12.08,10.31,19.15,13.91c7.19,3.66,14.56,5.98,22.47,7.41c7.8,1.4,15.76,1.87,23.65,2.08c3.62,0.1,7.24,0.14,10.86,0.16
+		c4.3,0.03,8.6,0.02,12.9,0.02h134.77c4.3,0,8.6,0,12.9-0.02c3.62-0.02,7.24-0.06,10.86-0.16c7.89-0.21,15.85-0.68,23.65-2.08
+		c7.92-1.42,15.28-3.75,22.47-7.41c7.07-3.6,13.54-8.3,19.15-13.91c5.61-5.61,10.31-12.07,13.91-19.14
+		c3.66-7.2,5.99-14.57,7.41-22.49c1.4-7.8,1.87-15.76,2.08-23.64c0.1-3.62,0.14-7.24,0.16-10.86c0.03-4.3,0.02-8.6,0.02-12.9V112.61
+		z"/>
+</g>
+<g id="Glyph_2_">
+	<g>
+		<path class="st1" d="M254.5,55c-0.87,0.08-8.6,1.45-9.53,1.64l-107,21.59l-0.04,0.01c-2.79,0.59-4.98,1.58-6.67,3
+			c-2.04,1.71-3.17,4.13-3.6,6.95c-0.09,0.6-0.24,1.82-0.24,3.62c0,0,0,109.32,0,133.92c0,3.13-0.25,6.17-2.37,8.76
+			c-2.12,2.59-4.74,3.37-7.81,3.99c-2.33,0.47-4.66,0.94-6.99,1.41c-8.84,1.78-14.59,2.99-19.8,5.01
+			c-4.98,1.93-8.71,4.39-11.68,7.51c-5.89,6.17-8.28,14.54-7.46,22.38c0.7,6.69,3.71,13.09,8.88,17.82
+			c3.49,3.2,7.85,5.63,12.99,6.66c5.33,1.07,11.01,0.7,19.31-0.98c4.42-0.89,8.56-2.28,12.5-4.61c3.9-2.3,7.24-5.37,9.85-9.11
+			c2.62-3.75,4.31-7.92,5.24-12.35c0.96-4.57,1.19-8.7,1.19-13.26l0-116.15c0-6.22,1.76-7.86,6.78-9.08c0,0,88.94-17.94,93.09-18.75
+			c5.79-1.11,8.52,0.54,8.52,6.61l0,79.29c0,3.14-0.03,6.32-2.17,8.92c-2.12,2.59-4.74,3.37-7.81,3.99
+			c-2.33,0.47-4.66,0.94-6.99,1.41c-8.84,1.78-14.59,2.99-19.8,5.01c-4.98,1.93-8.71,4.39-11.68,7.51
+			c-5.89,6.17-8.49,14.54-7.67,22.38c0.7,6.69,3.92,13.09,9.09,17.82c3.49,3.2,7.85,5.56,12.99,6.6c5.33,1.07,11.01,0.69,19.31-0.98
+			c4.42-0.89,8.56-2.22,12.5-4.55c3.9-2.3,7.24-5.37,9.85-9.11c2.62-3.75,4.31-7.92,5.24-12.35c0.96-4.57,1-8.7,1-13.26V64.46
+			C263.54,58.3,260.29,54.5,254.5,55z"/>
+	</g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

MusicPlayerV2-GUI/src/components/libraryView.vue

@@ -0,0 +1,10 @@
+<template>
+    <div>
+        <h1>Library</h1>
+        <playlistsView></playlistsView>
+    </div>
+</template>
+
+<script setup lang="ts">
+    import playlistsView from '@/components/playlistsView.vue';
+</script>

MusicPlayerV2-GUI/src/components/playerView.vue

@@ -0,0 +1,119 @@
+<template>
+    <div>
+        <div :class="'player' + ( $props.isShowingFullScreenPlayer ? '' : ' player-hidden' )">
+            <!-- TODO: Make cover art of song or otherwise MusicPlayer Logo -->
+            <img src="https://github.com/simplePCBuilding/MusicPlayerV2/raw/master/assets/logo.png" alt="MusicPlayer Logo" class="logo-player">
+            <p class="song-name">{{ currentlyPlayingSongName }}</p>
+            <div class="controls-wrapper">
+                <span class="material-symbols-outlined controls" @click="control( 'previous' )">skip_previous</span>
+                <span class="material-symbols-outlined controls" @click="control( '10s-back' )">replay_10</span>
+                <span class="material-symbols-outlined controls" v-if="!isPlaying" @click="playPause()" id="play-pause">pause</span>
+                <span class="material-symbols-outlined controls" v-else @click="playPause()" id="play-pause">play_arrow</span>
+                <span class="material-symbols-outlined controls" @click="control( '10s-forward' )">forward_10</span>
+                <span class="material-symbols-outlined controls" @click="control( 'next' )">skip_next</span>
+
+                <span class="material-symbols-outlined controls" @click="control( 'repeat' )" style="margin-left: 20px;">repeat{{ repeatMode }}</span>
+                <span class="material-symbols-outlined controls" @click="control( 'shuffle' )">shuffle{{ shuffleMode }}</span>
+            </div>
+        </div>
+        <playlistView :class="'playlist-view' + ( $props.isShowingFullScreenPlayer ? '' : ' hidden' )"></playlistView>
+    </div>
+</template>
+
+
+<script setup lang="ts">
+    // TODO: Handle resize, hide all non-essential controls when below 900px width
+
+    import { ref } from 'vue';
+    import playlistView from '@/components/playlistView.vue';
+
+    const isPlaying = ref( false );
+    const repeatMode = ref( '' );
+    const shuffleMode = ref( '' );
+    const currentlyPlayingSongName = ref( 'Not playing' );
+
+    const playPause = () => {
+        isPlaying.value = !isPlaying.value;
+        // TODO: Execute function on player
+    }
+
+    const control = ( action: string ) => {
+        if ( action === 'repeat' ) {
+            if ( repeatMode.value === '' ) {
+                repeatMode.value = '_on';
+            } else if ( repeatMode.value === '_on' ) {
+                repeatMode.value = '_one_on';
+            } else {
+                repeatMode.value = '';
+            }
+        } else if ( action === 'shuffle' ) {
+            if ( shuffleMode.value === '' ) {
+                shuffleMode.value = '_on';
+            } else {
+                shuffleMode.value = '';
+            }
+        }
+    }
+
+
+    const props = defineProps( {
+        'isShowingFullScreenPlayer': {
+            'default': false,
+            'required': true,
+            'type': Boolean
+        }
+    } );
+</script>
+
+<style scoped>
+    .player {
+        height: 15%;
+        width: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-direction: row;
+    }
+
+    .song-name {
+        margin-left: 10px;
+        margin-right: auto;
+        font-weight: bold;
+        font-size: 1.25rem;
+    }
+
+    .logo-player {
+        height: 80%;
+        margin-left: 30px;
+    }
+
+    .playlist-view {
+        height: 15%;
+        overflow: scroll;
+    }
+
+    .player-hidden {
+        height: 100%;
+    }
+
+    .hidden {
+        height: 0%;
+    }
+
+    .controls {
+        cursor: pointer;
+        font-size: 1.75rem;
+    }
+
+    .controls-wrapper {
+        margin-right: 30px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-wrap: nowrap;
+    }
+
+    #play-pause {
+        font-size: 2.5rem;
+    }
+</style>

MusicPlayerV2-GUI/src/components/playlistView.vue

@@ -0,0 +1,5 @@
+<template>
+    <div>
+        <h1>Playlist</h1>
+    </div>
+</template>

MusicPlayerV2-GUI/src/components/playlistsView.vue

@@ -0,0 +1,5 @@
+<template>
+    <div>
+        <h1>Your playlists</h1>
+    </div>
+</template>

MusicPlayerV2-GUI/src/views/AppView.vue

@@ -1,15 +1,31 @@
 <template>
-    <div class="home-view">
+    <div class="app-view">
-        <img src="https://github.com/simplePCBuilding/MusicPlayerV2/raw/master/assets/logo.png" alt="MusicPlayer Logo" class="logo">
+        <div class="home-view" v-if="isLoggedIntoAppleMusic">
-        <h1>MusicPlayer</h1>
+            <libraryView></libraryView>
+            <playerView class="player-view" :is-showing-full-screen-player="isShowingFullScreenPlayer"></playerView>
+        </div>
+        <div v-else class="home-view">
+            <img src="@/assets/appleMusicIcon.svg" alt="Apple Music Icon">
+            <button class="fancy-button" style="margin-top: 20px;">Log into Apple Music</button>
+        </div>
     </div>
 </template>
 
 <script setup lang="ts">
+    import playerView from '@/components/playerView.vue';
+    import libraryView from '@/components/libraryView.vue';
+    import { ref } from 'vue';
     
+    const isLoggedIntoAppleMusic = ref( true );
+    const isShowingFullScreenPlayer = ref( false );
 </script>
 
 <style scoped>
+    .app-view {
+        height: 100vh;
+        width: 100vw;
+    }
+
     .home-view {
         height: 100vh;
         display: flex;
@@ -21,4 +37,13 @@
     .logo {
         height: 50vh;
     }
+
+    .player-view {
+        height: 10vh;
+        width: calc( 100vw - 20px );
+        position: fixed;
+        bottom: 10px;
+        left: 10px;
+        background-color: var( --secondary-color );
+    }
 </style>

old/frontend/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "musicplayerv2",
-  "version": "0.1.0",
+  "version": "1.0.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "musicplayerv2",
-      "version": "0.1.0",
+      "version": "1.0.0",
       "hasInstallScript": true,
       "license": "GPL-3.0-or-later",
       "dependencies": {