technically working player

MusicPlayerV2-GUI/src/components/playerView.vue

@@ -2,8 +2,10 @@
     <div>
         <div :class="'player' + ( 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" @click="controlUI( 'show' )">
+            <img src="https://github.com/simplePCBuilding/MusicPlayerV2/raw/master/assets/logo.png" alt="MusicPlayer Logo" class="logo-player" @click="controlUI( 'show' )" v-if="coverArt === ''">
+            <img :src="coverArt" alt="MusicPlayer Logo" class="logo-player" @click="controlUI( 'show' )" v-else>
             <p class="song-name" @click="controlUI( 'show' )">{{ currentlyPlayingSongName }}</p>
+            <p>{{ nicePlaybackPos }} / {{ niceDuration }}</p>
             <div class="controls-wrapper">
                 <span class="material-symbols-outlined controls next-previous" @click="control( 'previous' )" id="previous">skip_previous</span>
                 <span class="material-symbols-outlined controls forward-back" @click="control( 'back' )" :style="'rotate: -' + 360 * clickCountBack + 'deg;'">replay_10</span>
@@ -18,7 +20,7 @@
         </div>
         <div :class="'playlist-view' + ( isShowingFullScreenPlayer ? '' : ' hidden' )">
             <span class="material-symbols-outlined close-fullscreen" @click="controlUI( 'hide' )">close</span>
-            <playlistView></playlistView>
+            <playlistView :playlist="playlist" class="pl-wrapper"></playlistView>
         </div>
     </div>
 </template>
@@ -27,9 +29,10 @@
 <script setup lang="ts">
     // TODO: Handle resize, hide all non-essential controls when below 900px width
 
-    import { ref } from 'vue';
+    import { ref, type Ref } from 'vue';
     import playlistView from '@/components/playlistView.vue';
     import MusicKitJSWrapper from '@/scripts/music-player';
+    import type { Song } from '@/scripts/song';
 
     const isPlaying = ref( false );
     const repeatMode = ref( '' );
@@ -39,6 +42,11 @@
     const clickCountBack = ref( 0 );
     const isShowingFullScreenPlayer = ref( false );
     const player = new MusicKitJSWrapper();
+    const playlist: Ref<Song[]> = ref( [] );
+    const coverArt = ref( '' );
+    const nicePlaybackPos = ref( '' );
+    const niceDuration = ref( '' );
+    const isShowingRemainingTime = ref( false );
 
     const emits = defineEmits( [ 'playerStateChange' ] );
 
@@ -47,8 +55,10 @@
         // TODO: Execute function on player
         if ( isPlaying.value ) {
             player.control( 'play' );
+            startProgressTracker();
         } else {
             player.control( 'pause' );
+            stopProgressTracker();
         }
     }
 
@@ -56,21 +66,44 @@
         if ( action === 'repeat' ) {
             if ( repeatMode.value === '' ) {
                 repeatMode.value = '_on';
+                player.setRepeatMode( 'all' );
             } else if ( repeatMode.value === '_on' ) {
                 repeatMode.value = '_one_on';
+                player.setRepeatMode( 'once' );
             } else {
                 repeatMode.value = '';
+                player.setRepeatMode( 'off' );
             }
         } else if ( action === 'shuffle' ) {
             if ( shuffleMode.value === '' ) {
                 shuffleMode.value = '_on';
+                player.setShuffle( true );
             } else {
                 shuffleMode.value = '';
+                player.setShuffle( false );
             }
         } else if ( action === 'forward' ) {
             clickCountForward.value += 1;
+            player.control( 'skip-10' );
         } else if ( action === 'back' ) {
             clickCountBack.value += 1;
+            player.control( 'back-10' );
+        } else if ( action === 'next' ) {
+            stopProgressTracker();
+            player.control( 'next' );
+            currentlyPlayingSongName.value = 'Loading...';
+            setTimeout( () => {
+                getDetails();
+                startProgressTracker();
+            }, 2000 );
+        } else if ( action === 'previous' ) {
+            stopProgressTracker();
+            player.control( 'previous' );
+            currentlyPlayingSongName.value = 'Loading...';
+            setTimeout( () => {
+                getDetails();
+                startProgressTracker();
+            }, 2000 );
         }
     }
 
@@ -101,12 +134,87 @@
         player.init();
     }
 
+    const selectPlaylist = ( id: string ) => {
+        currentlyPlayingSongName.value = 'Loading...';
+        player.setPlaylistByID( id ).then( () => {
+            isPlaying.value = true;
+            setTimeout( () => {
+                startProgressTracker();
+                getDetails();
+            }, 2000 );
+        } );
+    }
+
+    const getDetails = () => {
+        const details = player.getPlayingSong();
+        currentlyPlayingSongName.value = details.title;
+        coverArt.value = details.cover;
+        // console.log( player.getQueue() );
+        playlist.value = player.getPlaylist();
+    }
+
+
+    let progressTracker = 0;
+    const startProgressTracker = () => {
+        const playingSong = player.getPlayingSong();
+        const minuteCounts = Math.floor( ( playingSong.duration ) / 60 );
+        niceDuration.value = String( minuteCounts ) + ':';
+        if ( ( '' + minuteCounts ).length === 1 ) {
+            niceDuration.value = '0' + minuteCounts + ':';
+        }
+        const secondCounts = Math.floor( ( playingSong.duration ) - minuteCounts * 60 );
+        if ( ( '' + secondCounts ).length === 1 ) {
+            niceDuration.value += '0' + secondCounts;
+        } else {
+            niceDuration.value += secondCounts;
+        }
+        progressTracker = setInterval( () => {
+            const pos = player.getPlaybackPos();
+            if ( pos > playingSong.duration - 1 ) {
+                control( 'next' );
+            }
+
+            const minuteCount = Math.floor( pos / 60 );
+            nicePlaybackPos.value = minuteCount + ':';
+            if ( ( '' + minuteCount ).length === 1 ) {
+                nicePlaybackPos.value = '0' + minuteCount + ':';
+            }
+            const secondCount = Math.floor( pos - minuteCount * 60 );
+            if ( ( '' + secondCount ).length === 1 ) {
+                nicePlaybackPos.value += '0' + secondCount;
+            } else {
+                nicePlaybackPos.value += secondCount;
+            }
+
+            if ( isShowingRemainingTime.value ) {
+                const minuteCounts = Math.floor( ( playingSong.duration - pos ) / 60 );
+                niceDuration.value = '-' + String( minuteCounts ) + ':';
+                if ( ( '' + minuteCounts ).length === 1 ) {
+                    niceDuration.value = '-0' + minuteCounts + ':';
+                }
+                const secondCounts = Math.floor( ( playingSong.duration - pos ) - minuteCounts * 60 );
+                if ( ( '' + secondCounts ).length === 1 ) {
+                    niceDuration.value += '0' + secondCounts;
+                } else {
+                    niceDuration.value += secondCounts;
+                }
+            }
+        }, 50 );
+    }
+
+    const stopProgressTracker = () => {
+        try {
+            clearInterval( progressTracker );
+        } catch ( _ ) { /* empty */ }
+    }
+
     defineExpose( {
         logIntoAppleMusic,
         getPlaylists,
         controlUI,
         getAuth,
         skipLogin,
+        selectPlaylist,
     } );
 </script>
 
@@ -141,7 +249,6 @@
     }
 
     .playlist-view {
-        height: 15%;
         overflow: scroll;
     }
 
@@ -214,4 +321,8 @@
     .hidden .close-fullscreen {
         display: none;
     }
+
+    .pl-wrapper {
+        height: 80vh;
+    }
 </style>