feat: basic design of share page, various small fixes

web/src/ts/dtype/global.d.ts

@@ -8,5 +8,8 @@ declare global {
         'musicplayer:playpause': CustomEvent<void>;
         'musicplayer:playindex': CustomEvent<void>;
         'musicplayer:seek': CustomEvent<void>;
+        'musicplayer:update': CustomEvent<void>;
+        'musicplayer:reauth': CustomEvent<void>;
+        'musicplayer:autherror': CustomEvent<void>;
     }
 }

web/src/ts/messages/index.ts

@@ -12,6 +12,9 @@ import {
 import {
     playbackPercentage
 } from '../player/status-tracking';
+import {
+    reauth
+} from '../util/reauth';
 import request from '../request';
 
 const RETRY_CAP = 10;
@@ -43,6 +46,8 @@ const createRoom = async ( name: string, antiTamper: boolean ): Promise<boolean>
     useAntiTamper.value = antiTamper;
     room.value = name;
 
+    document.addEventListener( 'musicplayer:autherror', reauth );
+
     return await connect();
 };
 
@@ -50,6 +55,11 @@ const closeRoom = async () => {
     // TODO: Trigger close on backend and disconnect.
     isConnected.value = false;
     localStorage.removeItem( 'room' );
+    connection?.close();
+
+    try {
+        document.removeEventListener( 'musicplayer:autherror', reauth );
+    } catch { /* empty */ }
 };
 
 const connect = (): Promise<boolean> => {
@@ -102,9 +112,14 @@ let stateLock = false;
 const sendPlaylistData = () => {
     if ( isConnected.value && !playlistLock ) {
         playlistLock = true;
-        request.post( `/room/${ room.value }/update/playlist`, JSON.stringify( {
-            'playlist': queue.value
-        } ) );
+
+        try {
+            request.post( `/room/${ room.value }/update/playlist`, JSON.stringify( {
+                'playlist': queue.value
+            } ) );
+        } catch ( e ) {
+            console.error( e );
+        }
 
         setTimeout( () => {
             playlistLock = false;
@@ -112,15 +127,20 @@ const sendPlaylistData = () => {
     }
 };
 
-const sendStateData = () => {
+const sendStateData = async () => {
     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() - 100,
-            'offset': playbackPercentage.value * ( queue.value[ queueIdx.value ]?.duration ?? 0 )
-        } ) );
+
+        try {
+            request.post( `/room/${ room.value }/update/state`, JSON.stringify( {
+                'playing': isPlaying.value,
+                'index': queueIdx.value,
+                'start': new Date().getTime() - 100,
+                'offset': playbackPercentage.value * ( queue.value[ queueIdx.value ]?.duration ?? 0 )
+            } ) );
+        } catch ( e ) {
+            console.error( e );
+        }
 
         setTimeout( () => {
             stateLock = false;
@@ -135,6 +155,7 @@ const useRoomWatchers = () => {
         document.addEventListener( 'musicplayer:playindex', sendStateData );
         document.addEventListener( 'musicplayer:seek', sendStateData );
         document.addEventListener( 'musicplayer:playpause', sendStateData );
+        document.addEventListener( 'musicplayer:update', sendPlaylistData );
     } );
 
     onUnmounted( () => {
@@ -149,6 +170,10 @@ const useRoomWatchers = () => {
         try {
             document.addEventListener( 'musicplayer:playpause', sendStateData );
         } catch { /* empty */ }
+
+        try {
+            document.addEventListener( 'musicplayer:update', sendPlaylistData );
+        } catch { /* empty */ }
     } );
 
     if ( room.value ) connect();

web/src/ts/request.ts

@@ -28,7 +28,8 @@ const wrapper = async ( url: string, opts: RequestInit ): Promise<Response> => {
     if ( res.ok ) {
         return res;
     } else if ( res.status === 403 || res.status === 401 ) {
-        // TODO: Handle these errors better (probably do something like in the old version, but better)
+        document.dispatchEvent( new CustomEvent( 'musicplayer:autherror' ) );
+
         throw new AuthError( 'ERR_USER_UNAUTHORIZED' );
     } else if ( res.status === 402 ) {
         throw new UnownedError( 'ERR_USER_UNOWNED' );

web/src/ts/shared/index.ts

@@ -7,6 +7,7 @@ import {
     currentQueueIdx,
     isPlaying,
     playbackOffset,
+    playbackProgress,
     playbackTime,
     startTime
 } from './state';
@@ -44,7 +45,7 @@ const connect = (): Promise<void> => {
             startTime.value = data.state.start;
             playbackTime.value = data.state.offset;
             playbackOffset.value = data.state.offset;
-
+            playbackProgress.value = data.state.offset / ( data.playlist[ data.state.index ]?.duration ?? -1 );
             resolve();
         };
 

web/src/ts/shared/state.ts

@@ -19,3 +19,5 @@ export const showArtworks = ref( false );
 export const playbackTime = ref( 0 );
 
 export const playbackOffset = ref( 0 );
+
+export const playbackProgress = ref( 0 );

web/src/ts/util/reauth.ts

@@ -0,0 +1,17 @@
+export const reauth = () => {
+    localStorage.setItem( 'close-tab', 'true' );
+
+    const listener = () => {
+        if ( localStorage.getItem( 'reauth-ok' ) === 'true' ) {
+            try {
+                window.removeEventListener( 'storage', listener );
+            } catch { /* empty */ }
+
+            localStorage.removeItem( 'reauth-ok' );
+
+            document.dispatchEvent( new CustomEvent( 'musicplayer:reauth' ) );
+        }
+    };
+
+    window.addEventListener( 'storage', listener );
+};