close
@@ -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;
+ }
\ 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
{
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 @@
-
lock
+
lock
+
Anti-Tamper is enabled. Leaving this window will cause a notification to be dispatched to the player!
@@ -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;
+ }
+ }