some more progress

frontend/src/client/appleMusic/index.html

@@ -27,13 +27,13 @@
                         <div class="player-wrapper">
                             <div class="player">
                                 <div class="controls">
-                                    <span class="material-symbols-outlined control-icon" :class="audioLoaded ? 'active': 'inactive'" @click="control( 'previous' )">skip_previous</span>
+                                    <span class="material-symbols-outlined control-icon" :class="hasSelectedPlaylist ? 'active': 'inactive'" @click="control( 'previous' )">skip_previous</span>
-                                    <span class="material-symbols-outlined control-icon" :class="audioLoaded ? 'active': 'inactive'" @click="control( 'replay10' )">replay_10</span>
+                                    <span class="material-symbols-outlined control-icon" :class="hasSelectedPlaylist ? 'active': 'inactive'" @click="control( 'replay10' )">replay_10</span>
-                                    <span class="material-symbols-outlined control-icon play-pause" v-if="!isPlaying && audioLoaded" @click="control( 'play' )">play_arrow</span>
+                                    <span class="material-symbols-outlined control-icon play-pause" v-if="!isPlaying && hasSelectedPlaylist" @click="control( 'play' )">play_arrow</span>
-                                    <span class="material-symbols-outlined control-icon play-pause" v-else-if="isPlaying && audioLoaded" @click="control( 'pause' )">pause</span>
+                                    <span class="material-symbols-outlined control-icon play-pause" v-else-if="isPlaying && hasSelectedPlaylist" @click="control( 'pause' )">pause</span>
                                     <span class="material-symbols-outlined control-icon play-pause" style="cursor: default;" v-else>play_disabled</span>
-                                    <span class="material-symbols-outlined control-icon" :class="audioLoaded ? 'active': 'inactive'" @click="control( 'forward10' )">forward_10</span>
+                                    <span class="material-symbols-outlined control-icon" :class="hasSelectedPlaylist ? 'active': 'inactive'" @click="control( 'forward10' )">forward_10</span>
-                                    <span class="material-symbols-outlined control-icon" :class="audioLoaded ? 'active': 'inactive'" @click="control( 'next' )" style="margin-right: 1vw;">skip_next</span>
+                                    <span class="material-symbols-outlined control-icon" :class="hasSelectedPlaylist ? 'active': 'inactive'" @click="control( 'next' )" style="margin-right: 1vw;">skip_next</span>
                                     <span class="material-symbols-outlined control-icon" :class="hasSelectedPlaylist ? 'active': 'inactive'" v-if="!isShuffleEnabled" @click="control( 'shuffleOn' )">shuffle</span>
                                     <span class="material-symbols-outlined control-icon" :class="hasSelectedPlaylist ? 'active': 'inactive'" v-else @click="control( 'shuffleOff' )">shuffle_on</span>
                                     <span class="material-symbols-outlined control-icon" :class="hasSelectedPlaylist ? 'active': 'inactive'" v-if="repeatMode === 'off'" @click="control( 'repeatOne' )">repeat</span>
@@ -48,9 +48,8 @@
                                     </div>
                                 </div>
                                 <div class="song-info">
-                                    <audio v-if="audioLoaded" :src="'http://localhost:8081/getSongFile?filename=' + playingSong.filename" id="music-player"></audio>
                                     <div class="song-info-wrapper">
-                                        <div v-if="audioLoaded" style="cursor: pointer;">
+                                        <div v-if="hasSelectedPlaylist" style="cursor: pointer;">
                                             <span class="material-symbols-outlined image" v-if="!playingSong.hasCoverArt">music_note</span>
                                             <img v-else :src="playingSong.coverArtURL" class="image">
                                         </div>

frontend/src/client/appleMusic/index.js

@@ -16,8 +16,9 @@ const app = Vue.createApp( {
             isPlaying: false,
             isShuffleEnabled: false,
             repeatMode: 'off',
-            audioLoaded: false,
+            playbackPosBeautified: '',
-            // TODO: Set audio loaded to true
+            durationBeautified: '',
+            isShowingRemainingTime: false,
 
             // slider
             offset: 0,
@@ -151,6 +152,126 @@ const app = Vue.createApp( {
         },
         calcPlaybackPos() {
             this.pos = Math.round( ( this.originalPos + parseInt( this.sliderPos ) ) / ( document.getElementById( 'progress-slider-' + this.name ).clientWidth - 5 ) * this.duration );
+        },
+        sendUpdate( update ) {
+            let data = {};
+            if ( update === 'pos' ) {
+                data = this.pos;
+            } else if ( update === 'playingSong' ) {
+                data = this.playingSong;
+            } else if ( update === 'isPlaying' ) {
+                data = this.isPlaying;
+            } else if ( update === 'songQueue' ) {
+                data = this.songQueue;
+            } else if ( update === 'queuePos' ) {
+                data = this.queuePos;
+            }
+            let fetchOptions = {
+                method: 'post',
+                body: JSON.stringify( { 'type': update, 'data': data } ),
+                headers: {
+                    'Content-Type': 'application/json',
+                    'charset': 'utf-8'
+                },
+            };
+            fetch( 'http://localhost:8081/statusUpdate', fetchOptions ).catch( err => {
+                console.error( err );
+            } );
+        },
+        control( action ) {
+            if ( action === 'play' ) {
+                this.musicKit.play();
+                this.progressTracker = setInterval( () => {
+                    this.pos = this.musicKit.currentPlaybackTime;
+
+                    const minuteCount = Math.floor( this.pos / 60 );
+                    this.playbackPosBeautified = minuteCount + ':';
+                    if ( ( '' + minuteCount ).length === 1 ) {
+                        this.playbackPosBeautified = '0' + minuteCount + ':';
+                    }
+                    const secondCount = Math.floor( this.pos - minuteCount * 60 );
+                    if ( ( '' + secondCount ).length === 1 ) {
+                        this.playbackPosBeautified += '0' + secondCount;
+                    } else {
+                        this.playbackPosBeautified += secondCount;
+                    }
+
+                    if ( this.isShowingRemainingTime ) {
+                        const minuteCounts = Math.floor( ( this.playingSong.duration - this.pos ) / 60 );
+                        this.durationBeautified = '-' + String( minuteCounts ) + ':';
+                        if ( ( '' + minuteCounts ).length === 1 ) {
+                            this.durationBeautified = '-0' + minuteCounts + ':';
+                        }
+                        const secondCounts = Math.floor( ( this.playingSong.duration - this.pos ) - minuteCounts * 60 );
+                        if ( ( '' + secondCounts ).length === 1 ) {
+                            this.durationBeautified += '0' + secondCounts;
+                        } else {
+                            this.durationBeautified += secondCounts;
+                        }
+                    }
+                }, 20 );
+                this.sendUpdate( 'pos' );
+                this.sendUpdate( 'isPlaying' );
+            } else if ( action === 'pause' ) {
+                this.musicKit.pause();
+                this.sendUpdate( 'pos' );
+                try {
+                    clearInterval( this.progressTracker );
+                    clearInterval( this.notifier );
+                } catch ( err ) {};
+                this.isPlaying = false;
+                this.sendUpdate( 'isPlaying' );
+            } else if ( action === 'replay10' ) {
+                this.musicKit.seekToTime( this.musicKit.currentPlaybackTime > 10 ? musicPlayer.currentPlaybackTime - 10 : 0 );
+                this.playbackPos = musicPlayer.currentTime;
+                this.sendUpdate( 'pos' );
+            } else if ( action === 'forward10' ) {
+                if ( musicPlayer.currentTime < ( musicPlayer.duration - 10 ) ) {
+                    musicPlayer.currentTime = musicPlayer.currentTime + 10;
+                    this.playbackPos = musicPlayer.currentTime;
+                    this.sendUpdate( 'pos' );
+                } else {
+                    if ( this.repeatMode !== 'one' ) {
+                        this.control( 'next' );
+                    } else {
+                        musicPlayer.currentTime = 0;
+                        this.playbackPos = musicPlayer.currentTime;
+                        this.sendUpdate( 'pos' );
+                    }
+                }
+            } else if ( action === 'reset' ) {
+                clearInterval( this.progressTracker );
+                this.playbackPos = 0;
+                musicPlayer.currentTime = 0;
+                this.sendUpdate( 'pos' );
+            } else if ( action === 'next' ) {
+                this.$emit( 'update', { 'type': 'next' } );
+            } else if ( action === 'previous' ) {
+                if ( this.playbackPos > 3 ) {
+                    this.playbackPos = 0;
+                    musicPlayer.currentTime = 0;
+                    this.sendUpdate( 'pos' );
+                } else {
+                    this.$emit( 'update', { 'type': 'previous' } );
+                }
+            } else if ( action === 'shuffleOff' ) {
+                this.$emit( 'update', { 'type': 'shuffleOff' } );
+                this.isShuffleEnabled = false;
+            } else if ( action === 'shuffleOn' ) {
+                this.$emit( 'update', { 'type': 'shuffle' } );
+                this.isShuffleEnabled = true;
+            } else if ( action === 'repeatOne' ) {
+                this.repeatMode = 'one';
+            } else if ( action === 'repeatAll' ) {
+                this.$emit( 'update', { 'type': 'repeat' } );
+                this.repeatMode = 'all';
+            } else if ( action === 'repeatOff' ) {
+                this.$emit( 'update', { 'type': 'repeatOff' } );
+                this.repeatMode = 'off';
+            } else if ( action === 'exitFancyView' ) {
+                this.isShowingFancyView = false;
+                this.$emit( 'update', { 'type': 'fancyView', 'status': false } );
+            }
         }
     },
     watch: {