complete (foss version release expected in October)

MusicPlayerV2-GUI/src/components/playerView.vue

@@ -4,7 +4,7 @@
             <h3>WARNING!</h3>
             <p>A client display is being tampered with!</p>
             <p>A desktop notification with a warning has already been dispatched.</p>
-            <button @click="dismissNotification()">Ok</button>
+            <button @click="dismissNotification()" class="simple-button">Ok</button>
 
             <div class="flash"></div>
         </div>
@@ -44,7 +44,7 @@
 
                     <div class="shuffle-repeat" v-if="isShowingFullScreenPlayer">
                         <span class="material-symbols-outlined controls" @click="control( 'repeat' )" style="margin-right: auto;">repeat{{ repeatMode }}</span>
-                        <div style="margin-right: auto;">
+                        <div style="margin-right: auto; pointer-events: all;">
                             <span class="material-symbols-outlined controls" @click="control( 'start-share' )" title="Share your playlist on a public playlist page (opens a configuration window)" v-if="!isConnectedToNotifier">share</span>
                             <div v-else>
                                 <span class="material-symbols-outlined controls" @click="control( 'stop-share' )" title="Stop sharing your playlist on a public playlist page">close</span>
@@ -869,4 +869,19 @@
             opacity: 0;
         }
     }
+
+    .simple-button {
+        padding: 10px 15px;
+        border: none;
+        background-color: rgb(0, 0, 51);
+        color: white;
+        font-size: 1rem;
+        border-radius: 15px;
+        cursor: pointer;
+        transition: all 0.5s;
+    }
+
+    .simple-button:hover {
+        border-radius: 5px;
+    }
 </style>

MusicPlayerV2-GUI/src/scripts/connection.ts

@@ -19,6 +19,7 @@ class SocketConnection {
     useSocket: boolean;
     eventSource?: EventSource;
     toBeListenedForItems: SSEMap;
+    reconnectRetryCount: number;
 
     constructor () {
         this.socket = io( localStorage.getItem( 'url' ) ?? '', {
@@ -28,6 +29,7 @@ class SocketConnection {
         this.isConnected = false;
         this.useSocket = localStorage.getItem( 'music-player-config' ) === 'ws';
         this.toBeListenedForItems = {};
+        this.reconnectRetryCount = 0;
     }
 
     /**
@@ -36,6 +38,7 @@ class SocketConnection {
      */
     connect (): Promise<any> {
         return new Promise( ( resolve, reject ) => {
+            if ( this.reconnectRetryCount < 5 ) {
                 if ( this.useSocket ) {
                     this.socket.connect();
                     this.socket.emit( 'join-room', this.roomName, ( res: { status: boolean, msg: string, data: any } ) => {
@@ -57,6 +60,7 @@ class SocketConnection {
                                 if ( this.toBeListenedForItems[ d.type ] ) {
                                     this.toBeListenedForItems[ d.type ]( d.data );
                                 } else if ( d.type === 'basics' ) {
+                                    this.isConnected = true;
                                     resolve( d.data );
                                 }
                             }
@@ -69,9 +73,10 @@ class SocketConnection {
                                     
                                     this.eventSource = undefined;
                                     
+                                    this.reconnectRetryCount += 1;
                                     setTimeout( () => {
                                         this.connect();
-                                }, 500 );
+                                    }, 500 * this.reconnectRetryCount );
                                 }
                             };
                         } else {
@@ -81,6 +86,10 @@ class SocketConnection {
                         reject( 'ERR_ROOM_CONNECTING' );
                     } );
                 }
+            } else {
+                alert( 'Could not reconnect to the share. Please reload the page to retry!' );
+                reject( 'ERR_ROOM_CONNECTING' );
+            }
         } );
     }
 

MusicPlayerV2-GUI/src/scripts/notificationHandler.ts

@@ -61,7 +61,7 @@ class NotificationHandler {
                                 }
                             } );
                         } else {
-                            this.sseConnect().then( data => {
+                            this.sseConnect().then( () => {
                                 resolve();
                             } ).catch(  );
                         }
@@ -156,14 +156,14 @@ class NotificationHandler {
      * @returns {void}
      */
     registerListener ( event: string, cb: ( data: any ) => void ): void {
-        if ( this.isConnected ) {
         if ( this.useSocket ) {
+            if ( this.isConnected ) {
                 this.socket.on( event, cb );
+            } 
         } else {
             this.toBeListenedForItems[ event ] = cb;
         }
     }
-    }
 
     /**
      * Disconnect from the server

MusicPlayerV2-GUI/src/views/ShowcaseView.vue

@@ -1,6 +1,7 @@
 <template>
     <div>
-        <span class="anti-tamper material-symbols-outlined" title="Anti-Tamper is enabled. Leaving this window will cause a notification to be dispatched to the player!" v-if="isAntiTamperEnabled">lock</span>
+        <span class="anti-tamper material-symbols-outlined" v-if="isAntiTamperEnabled" @click="secureModeInfo( 'toggle' )">lock</span>
+        <div class="anti-tamper-info" v-if="isShowingSecureModeInfo && isAntiTamperEnabled" @click="secureModeInfo( 'hide' )">Anti-Tamper is enabled. Leaving this window will cause a notification to be dispatched to the player!</div>
         <div class="info">Designed and developed by Janis Hutz <a href="https://janishutz.com" target="_blank" style="text-decoration: none; color: white;">https://janishutz.com</a></div>
         <div class="remote-view">
             <div v-if="hasLoaded && !showCouldNotFindRoom" class="showcase-wrapper">
@@ -242,6 +243,17 @@
 
         conn.emit( 'tampering', '' );
     }
+
+    const isShowingSecureModeInfo = ref( false );
+    const secureModeInfo = ( action: string ) => {
+        if ( action === 'toggle' ) {
+            isShowingSecureModeInfo.value = !isShowingSecureModeInfo.value;
+        } else if ( action === 'show' ) {
+            isShowingSecureModeInfo.value = true;
+        } else {
+            isShowingSecureModeInfo.value = false;
+        }
+    }
 </script>
 
 <style scoped>
@@ -251,6 +263,18 @@
         bottom: 5px;
         right: 5px;
         font-size: 2rem;
+        cursor: default;
+    }
+
+    .anti-tamper-info {
+        position: fixed;
+        z-index: 10;
+        bottom: calc( 10px + 2rem );
+        right: 5px;
+        max-width: 20rem;
+        background-color: black;
+        color: white;
+        padding: 5px;
     }
 
     .remote-view {

backend/src/app.ts

@@ -272,13 +272,14 @@ const run = () => {
     
     app.post( '/socket/update', bodyParser.json(), ( request: express.Request, response: express.Response ) => {
         if ( socketData[ request.body.roomName ] ) {
-            if ( request.body.update === 'tampering' ) {
+            if ( request.body.event === 'tampering' ) {
                 const clients = clientReference[ request.body.roomName ];
                 for ( let client in clients ) {
                     if ( importantClients[ clients[ client ] ] ) {
-                        importantClients[ clients[ client ] ].response.write( 'data: ' + JSON.stringify( { 'update': 'tampering', 'data': true } ) + '\n\n' );
+                        importantClients[ clients[ client ] ].response.write( 'data: ' + JSON.stringify( { 'type': 'tampering-msg', 'data': true } ) + '\n\n' );
                     }
                 }
+                response.send( 'ok' );
             } else {
                 if ( socketData[ request.body.roomName ].roomToken === request.body.roomToken ) {
                     let send = false;
@@ -313,8 +314,12 @@ const run = () => {
                     } else {
                         response.status( 404 ).send( 'ERR_CANNOT_SEND' );
                     }
+                } else {
+                    response.status( 403 ).send( 'ERR_UNAUTHORIZED' );
                 }
             }
+        } else {
+            response.status( 400 ).send( 'ERR_WRONG_REQUEST' );
         }
     } );
 
@@ -328,7 +333,7 @@ const run = () => {
                     const clients = clientReference[ request.body.roomName ];
                     for ( let client in clients ) {
                         if ( connectedClients[ clients[ client ] ] ) {
-                            connectedClients[ clients[ client ] ].response.write( 'data: ' + JSON.stringify( { 'update': 'delete-share', 'data': true } ) + '\n\n' );
+                            connectedClients[ clients[ client ] ].response.write( 'data: ' + JSON.stringify( { 'type': 'delete-share', 'data': true } ) + '\n\n' );
                         }
                     }
                 } else {