some small updates

MusicPlayerV2-GUI/src/components/playerView.vue

@@ -99,11 +99,11 @@
         if ( isPlaying.value ) {
             player.control( 'play' );
             startProgressTracker();
-            
         } else {
             player.control( 'pause' );
             stopProgressTracker();
         }
+        notificationHandler.emit( 'playback', isPlaying.value );
     }
 
     const toggleRemaining = () => {
@@ -115,10 +115,12 @@
             isPlaying.value = false;
             player.control( 'pause' );
             stopProgressTracker();
+            notificationHandler.emit( 'playback', isPlaying.value );
         } else if ( action === 'play' ) {
             isPlaying.value = true;
             player.control( 'play' );
             startProgressTracker();
+            notificationHandler.emit( 'playback', isPlaying.value );
         } else if ( action === 'repeat' ) {
             if ( repeatMode.value === '' ) {
                 repeatMode.value = '_on';
@@ -135,18 +137,30 @@
                 shuffleMode.value = '_on';
                 player.setShuffle( true );
                 getDetails();
+                notificationHandler.emit( 'playlist', playlist.value );
             } else {
                 shuffleMode.value = '';
                 player.setShuffle( false );
                 getDetails();
+                notificationHandler.emit( 'playlist', playlist.value );
             }
             getDetails();
         } else if ( action === 'forward' ) {
             clickCountForward.value += 1;
-            player.control( 'skip-10' );
+            if( player.control( 'skip-10' ) ) {
+                setTimeout( () => {
+                    startProgressTracker();
+                    getDetails();
+                }, 2000 );
+            }
         } else if ( action === 'back' ) {
             clickCountBack.value += 1;
-            player.control( 'back-10' );
+            if( player.control( 'back-10' ) ) {
+                setTimeout( () => {
+                    startProgressTracker();
+                    getDetails();
+                }, 2000 );
+            }
         } else if ( action === 'next' ) {
             stopProgressTracker();
             player.control( 'next' );
@@ -170,6 +184,10 @@
         } else if ( action === 'start-share' ) {
             // TODO: Open popup, then send data with popup returns
             notificationHandler.connect( 'test' );
+        } else if ( action === 'stop-share' ) {
+            if ( confirm( 'Do you really want to stop sharing?' ) ) {
+                notificationHandler.disconnect();
+            }
         }
     }
 
@@ -215,6 +233,8 @@
             setTimeout( () => {
                 startProgressTracker();
                 getDetails();
+                notificationHandler.emit( 'playlist', playlist.value );
+                // TODO: Add playback-start emit as well. For every time elapsed before starting to play current section, move start time back
             }, 2000 );
         } );
     }
@@ -330,6 +350,9 @@
             }
 
             if ( pos.value > 0 && !hasStarted ) {
+                notificationHandler.emit( 'playlist-index', currentlyPlayingSongIndex.value );
+                notificationHandler.emit( 'playback', isPlaying.value );
+                notificationHandler.emit( 'playback-start', new Date().getTime() - pos.value * 1000 );
                 hasStarted = true;
             }
 

MusicPlayerV2-GUI/src/scripts/notificationHandler.ts

@@ -83,7 +83,7 @@ class NotificationHandler {
      */
     disconnect (): void {
         this.socket.disconnect();
-        this.socket.emit( 'create-room', {
+        this.socket.emit( 'delete-room', {
             name: this.roomName,
             token: this.roomToken
         }, ( res: { status: boolean, msg: string } ) => {

MusicPlayerV2-GUI/src/views/ShowcaseView.vue

@@ -61,7 +61,7 @@
 
 <script setup lang="ts">
     import type { Song } from '@/scripts/song';
-    import { ref, type Ref } from 'vue';
+    import { computed, ref, type Ref } from 'vue';
     import { ColorThief } from 'colorthief';
 
     const hasLoaded = ref( false );
@@ -75,46 +75,42 @@
     const visualizationSettings = ref( 'mic' );
     const micAnalyzer = ref( 0 );
     const beatDetected = ref( false );
-    colorThief: null,
-    lastDispatch: new Date().getTime() - 5000,
-    isReconnecting: false,
-    computed: {
-        songQueue() {
-            let ret = [];
-            let pos = 0;
-            for ( let song in this.songs ) {
-                if ( pos >= this.queuePos ) {
-                    ret.push( this.songs[ song ] );
-                }
-                pos += 1;
+    const colorThief = new ColorThief();
+    const songQueue = computed( () => {
+        let ret = [];
+        let pos = 0;
+        for ( let song in songs.value ) {
+            if ( pos >= playingSong.value ) {
+                ret.push( songs.value[ song ] );
             }
-            return ret;
-        },
-        getTimeUntil() {
-            return ( song ) => {
-                let timeRemaining = 0;
-                for ( let i = this.queuePos; i < Object.keys( this.songs ).length - 1; i++ ) {
-                    if ( this.songs[ i ] == song ) {
-                        break;
-                    }
-                    timeRemaining += parseInt( this.songs[ i ].duration );
+            pos += 1;
+        }
+        return ret;
+    } );
+    const getTimeUntil = computed( () => {
+        return ( song ) => {
+            let timeRemaining = 0;
+            for ( let i = this.queuePos; i < Object.keys( this.songs ).length - 1; i++ ) {
+                if ( this.songs[ i ] == song ) {
+                    break;
                 }
-                if ( this.isPlaying ) {
-                    if ( timeRemaining === 0 ) {
-                        return 'Currently playing';
-                    } else {
-                        return 'Playing in less than ' + Math.ceil( timeRemaining / 60 - this.pos / 60 )  + 'min';
-                    }
+                timeRemaining += parseInt( this.songs[ i ].duration );
+            }
+            if ( isPlaying.value ) {
+                if ( timeRemaining === 0 ) {
+                    return 'Currently playing';
                 } else {
-                    if ( timeRemaining === 0 ) {
-                        return 'Plays next';
-                    } else {
-                        return 'Playing less than ' + Math.ceil( timeRemaining / 60 - this.pos / 60 )  + 'min after starting to play';
-                    }
+                    return 'Playing in less than ' + Math.ceil( timeRemaining / 60 - this.pos / 60 )  + 'min';
+                }
+            } else {
+                if ( timeRemaining === 0 ) {
+                    return 'Plays next';
+                } else {
+                    return 'Playing less than ' + Math.ceil( timeRemaining / 60 - this.pos / 60 )  + 'min after starting to play';
                 }
             }
         }
-    },
+    } );
     methods: {
         startTimeTracker () {
             this.timeTracker = setInterval( () => {