From 95170194af005d174659932105a719551853a24c Mon Sep 17 00:00:00 2001
From: Janis Hutz <development@janishutz.com>
Date: Wed, 14 Aug 2024 13:56:49 +0200
Subject: [PATCH] complete (foss version release expected in October)

---
 .../src/components/playerView.vue             | 19 +++-
 MusicPlayerV2-GUI/src/scripts/connection.ts   | 89 ++++++++++---------
 .../src/scripts/notificationHandler.ts        | 12 +--
 MusicPlayerV2-GUI/src/views/ShowcaseView.vue  | 26 +++++-
 backend/src/app.ts                            | 11 ++-
 5 files changed, 105 insertions(+), 52 deletions(-)

diff --git a/MusicPlayerV2-GUI/src/components/playerView.vue b/MusicPlayerV2-GUI/src/components/playerView.vue
index 84401ed..b410dd9 100644
--- a/MusicPlayerV2-GUI/src/components/playerView.vue
+++ b/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>
\ No newline at end of file
diff --git a/MusicPlayerV2-GUI/src/scripts/connection.ts b/MusicPlayerV2-GUI/src/scripts/connection.ts
index 62cac43..2075224 100644
--- a/MusicPlayerV2-GUI/src/scripts/connection.ts
+++ b/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,50 +38,57 @@ class SocketConnection {
      */
     connect (): Promise<any> {
         return new Promise( ( resolve, reject ) => {
-            if ( this.useSocket ) {
-                this.socket.connect();
-                this.socket.emit( 'join-room', this.roomName, ( res: { status: boolean, msg: string, data: any } ) => {
-                    if ( res.status === true ) {
-                        this.isConnected = true;
-                        resolve( res.data );
-                    } else {
-                        console.debug( res.msg );
-                        reject( 'ERR_ROOM_CONNECTING' );
-                    }
-                } );
-            } else {
-                fetch( localStorage.getItem( 'url' ) + '/socket/joinRoom?room=' + this.roomName, { credentials: 'include' } ).then( res => {
-                    if ( res.status === 200 ) {
-                        this.eventSource = new EventSource( localStorage.getItem( 'url' ) + '/socket/connection?room=' + this.roomName, { withCredentials: true } );
-
-                        this.eventSource.onmessage = ( e ) => {
-                            const d = JSON.parse( e.data );
-                            if ( this.toBeListenedForItems[ d.type ] ) {
-                                this.toBeListenedForItems[ d.type ]( d.data );
-                            } else if ( d.type === 'basics' ) {
-                                resolve( d.data );
-                            }
+            if ( this.reconnectRetryCount < 5 ) {
+                if ( this.useSocket ) {
+                    this.socket.connect();
+                    this.socket.emit( 'join-room', this.roomName, ( res: { status: boolean, msg: string, data: any } ) => {
+                        if ( res.status === true ) {
+                            this.isConnected = true;
+                            resolve( res.data );
+                        } else {
+                            console.debug( res.msg );
+                            reject( 'ERR_ROOM_CONNECTING' );
                         }
+                    } );
+                } else {
+                    fetch( localStorage.getItem( 'url' ) + '/socket/joinRoom?room=' + this.roomName, { credentials: 'include' } ).then( res => {
+                        if ( res.status === 200 ) {
+                            this.eventSource = new EventSource( localStorage.getItem( 'url' ) + '/socket/connection?room=' + this.roomName, { withCredentials: true } );
 
-                        this.eventSource.onerror = ( e ) => {
-                            if ( this.isConnected ) {
-                                this.isConnected = false;
-                                console.log( '[ SSE Connection ] - ' + new Date().toISOString() +  ': Reconnecting due to connection error!' );
-                                console.debug( e );
-                                
-                                this.eventSource = undefined;
-                                
-                                setTimeout( () => {
-                                    this.connect();
-                                }, 500 );
+                            this.eventSource.onmessage = ( e ) => {
+                                const d = JSON.parse( e.data );
+                                if ( this.toBeListenedForItems[ d.type ] ) {
+                                    this.toBeListenedForItems[ d.type ]( d.data );
+                                } else if ( d.type === 'basics' ) {
+                                    this.isConnected = true;
+                                    resolve( d.data );
+                                }
                             }
-                        };
-                    } else {
+
+                            this.eventSource.onerror = ( e ) => {
+                                if ( this.isConnected ) {
+                                    this.isConnected = false;
+                                    console.log( '[ SSE Connection ] - ' + new Date().toISOString() +  ': Reconnecting due to connection error!' );
+                                    console.debug( e );
+                                    
+                                    this.eventSource = undefined;
+                                    
+                                    this.reconnectRetryCount += 1;
+                                    setTimeout( () => {
+                                        this.connect();
+                                    }, 500 * this.reconnectRetryCount );
+                                }
+                            };
+                        } else {
+                            reject( 'ERR_ROOM_CONNECTING' );
+                        }
+                    } ).catch( () => {
                         reject( 'ERR_ROOM_CONNECTING' );
-                    }
-                } ).catch( () => {
-                    reject( 'ERR_ROOM_CONNECTING' );
-                } );
+                    } );
+                }
+            } else {
+                alert( 'Could not reconnect to the share. Please reload the page to retry!' );
+                reject( 'ERR_ROOM_CONNECTING' );
             }
         } );
     }
diff --git a/MusicPlayerV2-GUI/src/scripts/notificationHandler.ts b/MusicPlayerV2-GUI/src/scripts/notificationHandler.ts
index 59d148f..6ccd166 100644
--- a/MusicPlayerV2-GUI/src/scripts/notificationHandler.ts
+++ b/MusicPlayerV2-GUI/src/scripts/notificationHandler.ts
@@ -61,7 +61,7 @@ class NotificationHandler {
                                 }
                             } );
                         } else {
-                            this.sseConnect().then( data => {
+                            this.sseConnect().then( () => {
                                 resolve();
                             } ).catch(  );
                         }
@@ -156,12 +156,12 @@ class NotificationHandler {
      * @returns {void}
      */
     registerListener ( event: string, cb: ( data: any ) => void ): void {
-        if ( this.isConnected ) {
-            if ( this.useSocket ) {
+        if ( this.useSocket ) {
+            if ( this.isConnected ) {
                 this.socket.on( event, cb );
-            } else {
-                this.toBeListenedForItems[ event ] = cb;
-            }
+            } 
+        } else {
+            this.toBeListenedForItems[ event ] = cb;
         }
     }
 
diff --git a/MusicPlayerV2-GUI/src/views/ShowcaseView.vue b/MusicPlayerV2-GUI/src/views/ShowcaseView.vue
index 8aba5f4..9a018ae 100644
--- a/MusicPlayerV2-GUI/src/views/ShowcaseView.vue
+++ b/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 {
diff --git a/backend/src/app.ts b/backend/src/app.ts
index 339441f..9147383 100644
--- a/backend/src/app.ts
+++ b/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 {