feat: basic rendering of queue on share screen

web/src/components/shared/SharedQueue.vue

@@ -3,17 +3,27 @@
         computed,
         ref
     } from 'vue';
-    import type {
-        Song
-    } from '@/ts/dtype/playlist';
+    import {
+        currentQueue,
+        currentQueueIdx
+    } from '@/ts/shared/state';
 
-    const props = defineProps<{
-        'songs': Song[],
-        'idx': number
-    }>();
-    const songs = computed( () => props.songs?.slice( props.idx + 1 ) ?? [] );
+    const songs = computed( () => currentQueue.value?.slice( currentQueueIdx.value + 1 ) ?? [] );
     // TODO: Move this out of this file
     const showArtworks = ref( false );
+    const timeToPlay = computed( () => {
+        return ( idx: number ) => {
+            let total = 0;
+
+            for ( let i = 0; i < idx; i++ ) {
+                total += songs.value[ i ]!.duration;
+            }
+
+            total += currentQueue.value[ currentQueueIdx.value ]?.duration ?? 0;
+
+            return Math.round( total / 60 );
+        };
+    } );
 </script>
 
 <template>
@@ -34,7 +44,7 @@
                 <p>{{ song['additional-info'] }}</p>
             </div>
             <div class="song-actions">
-                <p>In {{ song.duration }}min</p>
+                <p>In {{ timeToPlay( index ) }}min</p>
             </div>
         </div>
     </div>

web/src/ts/messages/index.ts

@@ -1,7 +1,3 @@
-import {
-    duration,
-    playbackPercentage
-} from '../player/status-tracking';
 import {
     isPlaying,
     queue,
@@ -11,6 +7,9 @@ import {
     ref,
     watch
 } from 'vue';
+import {
+    playbackPercentage
+} from '../player/status-tracking';
 import request from '../request';
 
 const RETRY_CAP = 10;
@@ -56,6 +55,8 @@ const connect = (): Promise<boolean> => {
     return new Promise( ( resolve, reject ) => {
         if ( !useAntiTamper.value ) {
             isConnected.value = true;
+            sendPlaylistData();
+            sendStateData();
 
             return resolve( true );
         }
@@ -67,6 +68,8 @@ const connect = (): Promise<boolean> => {
         connection.onopen = () => {
             isConnected.value = true;
             console.log( '[SSE] Connection established successfully' );
+            sendPlaylistData();
+            sendStateData();
             resolve( true );
         };
 
@@ -91,25 +94,45 @@ const connect = (): Promise<boolean> => {
     } );
 };
 
+// FIXME: This is not a sensible solution, but easy for now (i.e. solve properly)
+let playlistLock = false;
+let stateLock = false;
+
+const sendPlaylistData = () => {
+    if ( isConnected.value && !playlistLock ) {
+        playlistLock = true;
+        request.post( `/room/${ room.value }/update/playlist`, JSON.stringify( {
+            'playlist': queue.value
+        } ) );
+
+        setTimeout( () => {
+            playlistLock = false;
+        }, 500 );
+    }
+};
+
+const sendStateData = () => {
+    if ( isConnected.value && !stateLock ) {
+        stateLock = true;
+        request.post( `/room/${ room.value }/update/state`, JSON.stringify( {
+            'playing': isPlaying.value,
+            'index': queueIdx.value,
+            'start': new Date().getTime() - ( playbackPercentage.value * ( queue.value[ queueIdx.value ]?.duration ?? 0 ) ) - 100
+        } ) );
+
+        setTimeout( () => {
+            stateLock = false;
+        }, 500 );
+    }
+};
+
 const useRoomWatchers = () => {
-    watch( queue, () => {
-        if ( isConnected.value )
-            request.post( `/room/${ room.value }/update/playlist`, JSON.stringify( {
-                'playlist': queue.value
-            } ) );
-    } );
+    watch( queue, sendPlaylistData );
 
     watch( [
         isPlaying,
         queueIdx
-    ], () => {
-        if ( isConnected.value )
-            request.post( `/room/${ room.value }/update/state`, JSON.stringify( {
-                'playing': isPlaying.value,
-                'index': queueIdx.value,
-                'start': new Date().getTime() - ( playbackPercentage.value * duration.value ) - 100
-            } ) );
-    } );
+    ], sendStateData );
 
     if ( room.value ) connect();
 };

web/src/ts/shared/index.ts

@@ -1,3 +1,16 @@
+import {
+    type StateUpdate,
+    messageHandler
+} from './messageHandler';
+import {
+    currentQueue,
+    currentQueueIdx,
+    isPlaying,
+    startTime
+} from './state';
+import type {
+    Song
+} from '../dtype/playlist';
 import request from '../request';
 
 const RETRY_CAP = 10;
@@ -8,21 +21,38 @@ let hasConnected = false;
 let retries = 0;
 
 // TODO: Persist settings in local storage
+// TODO: Polling instead of sse
 
 const connect = (): Promise<void> => {
     return new Promise( ( resolve, reject ) => {
         room = location.pathname.substring( location.pathname.lastIndexOf( '/' ) + 1 );
         connection = new EventSource( request.backendURL + `/room/${ room }/connect` );
 
-        connection.onopen = () => {
+        connection.onopen = async () => {
             hasConnected = true;
             console.log( '[SSE] Connection established successfully' );
+            const data = await ( await request.get( `/room/${ room }/poll` ) ).json() as {
+                'playlist': Song[],
+                'state': StateUpdate
+            };
+
+            currentQueue.value = data.playlist;
+            currentQueueIdx.value = data.state.index;
+            isPlaying.value = data.state.playing;
+            startTime.value = data.state.start;
+
             resolve();
         };
 
         connection.onmessage = msg => {
-            console.log( msg.data );
-            // TODO: On connect, retrieve data from poll endpoint
+            if ( msg.data === 'close' ) {
+                connection?.close();
+
+                // TODO: Show popup informing user that share was closed
+                return;
+            }
+
+            messageHandler( msg.data );
         };
 
         connection.onerror = () => {

web/src/ts/shared/messageHandler.ts

@@ -0,0 +1,46 @@
+import {
+    currentQueue,
+    currentQueueIdx,
+    isPlaying,
+    startTime
+} from './state';
+import type {
+    Song
+} from '../dtype/playlist';
+
+interface ReceivedJSONMessage {
+    'type': 'state' | 'playlist';
+    'data': unknown;
+}
+
+export interface StateUpdate {
+    'playing': boolean;
+    'index': number;
+    'start': number;
+}
+
+export const messageHandler = ( msg: string ) => {
+    if ( msg.startsWith( 'json:' ) ) {
+        try {
+            const data = JSON.parse( msg.substring( 5 ) ) as ReceivedJSONMessage;
+
+            if ( data.type === 'playlist' ) {
+                currentQueue.value = ( data.data as {
+                    'playlist': Song[]
+                } ?? {
+                    'playlist': []
+                } ).playlist;
+            } else if ( data.type === 'state' ) {
+                const state = data.data as StateUpdate;
+
+                currentQueueIdx.value = state.index;
+                isPlaying.value = state.playing;
+                startTime.value = state.start;
+            } else {
+                console.log( '[SSE] Received unknown data', data.type );
+            }
+        } catch ( err ) {
+            console.error( 'JSON DECODE failed with error', err );
+        }
+    }
+};

web/src/ts/shared/state.ts

@@ -0,0 +1,15 @@
+import {
+    type Ref,
+    ref
+} from 'vue';
+import type {
+    Song
+} from '../dtype/playlist';
+
+export const currentQueue: Ref<Song[]> = ref( [] );
+
+export const isPlaying = ref( false );
+
+export const currentQueueIdx = ref( -1 );
+
+export const startTime = ref( new Date().getTime() );

web/src/views/SharedView.vue

@@ -13,7 +13,7 @@
                 <CurrentSong />
             </div>
             <div>
-                <SharedQueue :songs="[]" :idx="-1" />
+                <SharedQueue />
             </div>
         </div>
     </div>