janishutz/MusicPlayer
1
0
Fork 0
mirror of https://github.com/janishutz/MusicPlayerV2.git synced 2025-11-25 04:54:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

basically done

Browse Source
This commit is contained in:
Janis Hutz
2024-08-14 12:18:24 +02:00
parent a2711b76dd
commit e54f5178a1
7 changed files with 381 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
MusicPlayerV2-GUI/index.html
View File

@@ -14,6 +14,9 @@
</head>
<body>
<div id="app"></div>
<script>
localStorage.setItem( 'music-player-config', 'sse' );// Or 'ws'
</script>
<script type="module" src="/src/main.ts"></script>
</body>
</html>

13
MusicPlayerV2-GUI/src/components/playlistView.vue
View File

@@ -28,7 +28,7 @@
<span class="material-symbols-outlined move-icon" @click="moveSong( song.id, 'down' )" title="Move song down" v-if="canBeMoved( 'down', song.id )">arrow_downward</span>
<h3 class="song-title">{{ song.title }}</h3>
<div>
<input type="text" placeholder="Additional information for remote display" v-model="song.additionalInfo">
<input type="text" placeholder="Additional information for remote display" v-model="song.additionalInfo" @focusin="kbControl( 'on' )" @focusout="kbControl( 'off' )">
<p class="playing-in">{{ getTimeUntil( song ) }}</p>
</div>
<button @click="deleteSong( song.id )" class="small-buttons" title="Remove this song from the queue" v-if="canBeMoved( 'down', song.id ) || canBeMoved( 'up', song.id )"><span class="material-symbols-outlined">delete</span></button>
@@ -43,6 +43,9 @@
import type { AppleMusicSongData, ReadFile, Song } from '@/scripts/song';
import { computed, ref } from 'vue';
import searchView from './searchView.vue';
import { useUserStore } from '@/stores/userStore';
const userStore = useUserStore();
const search = ref( searchView );
const props = defineProps( {
@@ -83,6 +86,14 @@
return pl;
} );
const kbControl = ( action: string ) => {
if ( action === 'off' ) {
userStore.setKeyboardUsageStatus( false );
} else {
userStore.setKeyboardUsageStatus( true );
}
}
const openSearch = () => {
if ( search.value ) {
search.value.controlSearch( 'show' );

89
MusicPlayerV2-GUI/src/scripts/connection.ts
View File

@@ -9,12 +9,16 @@
// These functions handle connections to the backend with socket.io
import { io, type Socket } from "socket.io-client"
import { io, type Socket } from "socket.io-client";
import type { SSEMap } from "./song";
class SocketConnection {
socket: Socket;
roomName: string;
isConnected: boolean;
useSocket: boolean;
eventSource?: EventSource;
toBeListenedForItems: SSEMap;
constructor () {
this.socket = io( localStorage.getItem( 'url' ) ?? '', {
@@ -22,6 +26,8 @@ class SocketConnection {
} );
this.roomName = location.pathname.split( '/' )[ 2 ];
this.isConnected = false;
this.useSocket = localStorage.getItem( 'music-player-config' ) === 'ws';
this.toBeListenedForItems = {};
}
/**
@@ -30,16 +36,51 @@ class SocketConnection {
*/
connect (): Promise<any> {
return new Promise( ( resolve, reject ) => {
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 );
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 );
}
}
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 );
}
};
} else {
reject( 'ERR_ROOM_CONNECTING' );
}
} ).catch( () => {
reject( 'ERR_ROOM_CONNECTING' );
}
} );
} );
}
} );
}
@@ -51,7 +92,19 @@ class SocketConnection {
*/
emit ( event: string, data: any ): void {
if ( this.isConnected ) {
this.socket.emit( event, { 'roomName': this.roomName, 'data': data } );
if ( this.useSocket ) {
this.socket.emit( event, { 'roomName': this.roomName, 'data': data } );
} else {
fetch( localStorage.getItem( 'url' ) + '/socket/update', {
method: 'post',
body: JSON.stringify( { 'event': event, 'roomName': this.roomName, 'data': data } ),
credentials: 'include',
headers: {
'Content-Type': 'application/json',
'charset': 'utf-8'
}
} ).catch( () => {} );
}
}
}
@@ -62,8 +115,12 @@ class SocketConnection {
* @returns {void}
*/
registerListener ( event: string, cb: ( data: any ) => void ): void {
if ( this.isConnected ) {
this.socket.on( event, cb );
if ( this.useSocket ) {
if ( this.isConnected ) {
this.socket.on( event, cb );
}
} else {
this.toBeListenedForItems[ event ] = cb;
}
}
@@ -73,7 +130,11 @@ class SocketConnection {
*/
disconnect (): void {
if ( this.isConnected ) {
this.socket.disconnect();
if ( this.useSocket ) {
this.socket.disconnect();
} else {
this.eventSource!.close();
}
}
}
}

142
MusicPlayerV2-GUI/src/scripts/notificationHandler.ts
View File

@@ -10,12 +10,17 @@
// These functions handle connections to the backend with socket.io
import { io, type Socket } from "socket.io-client"
import type { SSEMap } from "./song";
class NotificationHandler {
socket: Socket;
roomName: string;
roomToken: string;
isConnected: boolean;
useSocket: boolean;
eventSource?: EventSource;
toBeListenedForItems: SSEMap;
reconnectRetryCount: number;
constructor () {
this.socket = io( localStorage.getItem( 'url' ) ?? '', {
@@ -24,6 +29,9 @@ class NotificationHandler {
this.roomName = '';
this.roomToken = '';
this.isConnected = false;
this.useSocket = localStorage.getItem( 'music-player-config' ) === 'ws';
this.toBeListenedForItems = {};
this.reconnectRetryCount = 0;
}
/**
@@ -39,18 +47,24 @@ class NotificationHandler {
res.text().then( text => {
this.roomToken = text;
this.roomName = roomName;
this.socket.connect();
this.socket.emit( 'create-room', {
name: this.roomName,
token: this.roomToken
}, ( res: { status: boolean, msg: string } ) => {
if ( res.status === true ) {
this.isConnected = true;
if ( this.useSocket ) {
this.socket.connect();
this.socket.emit( 'create-room', {
name: this.roomName,
token: this.roomToken
}, ( res: { status: boolean, msg: string } ) => {
if ( res.status === true ) {
this.isConnected = true;
resolve();
} else {
reject( 'ERR_ROOM_CONNECTING' );
}
} );
} else {
this.sseConnect().then( data => {
resolve();
} else {
reject( 'ERR_ROOM_CONNECTING' );
}
} );
} ).catch( );
}
} );
} else if ( res.status === 409 ) {
reject( 'ERR_CONFLICT' );
@@ -61,6 +75,56 @@ class NotificationHandler {
} );
}
sseConnect (): Promise<void> {
return new Promise( ( resolve, reject ) => {
if ( this.reconnectRetryCount < 5 ) {
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.onopen = () => {
this.isConnected = true;
this.reconnectRetryCount = 0;
resolve();
}
this.eventSource.onmessage = ( e ) => {
const d = JSON.parse( e.data );
if ( this.toBeListenedForItems[ d.type ] ) {
this.toBeListenedForItems[ d.type ]( d.data );
}
}
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.sseConnect();
}, 500 * this.reconnectRetryCount );
}
};
} else {
reject( 'ERR_ROOM_CONNECTING' );
}
} ).catch( () => {
reject( 'ERR_ROOM_CONNECTING' );
} );
} else {
if ( confirm( 'Connection lost and it could not be reestablished. Please click ok to retry or press cancel to stop retrying. Your share will be deleted as a result thereof.' ) ) {
this.reconnectRetryCount = 0;
this.sseConnect();
} else {
this.disconnect();
}
}
} );
}
/**
* Emit an event
* @param {string} event The event to emit
@@ -69,7 +133,19 @@ class NotificationHandler {
*/
emit ( event: string, data: any ): void {
if ( this.isConnected ) {
this.socket.emit( event, { 'roomToken': this.roomToken, 'roomName': this.roomName, 'data': data } );
if ( this.useSocket ) {
this.socket.emit( event, { 'roomToken': this.roomToken, 'roomName': this.roomName, 'data': data } );
} else {
fetch( localStorage.getItem( 'url' ) + '/socket/update', {
method: 'post',
body: JSON.stringify( { 'event': event, 'roomName': this.roomName, 'roomToken': this.roomToken, 'data': data } ),
credentials: 'include',
headers: {
'Content-Type': 'application/json',
'charset': 'utf-8'
}
} ).catch( () => {} );
}
}
}
@@ -81,7 +157,11 @@ class NotificationHandler {
*/
registerListener ( event: string, cb: ( data: any ) => void ): void {
if ( this.isConnected ) {
this.socket.on( event, cb );
if ( this.useSocket ) {
this.socket.on( event, cb );
} else {
this.toBeListenedForItems[ event ] = cb;
}
}
}
@@ -91,15 +171,33 @@ class NotificationHandler {
*/
disconnect (): void {
if ( this.isConnected ) {
this.socket.emit( 'delete-room', {
name: this.roomName,
token: this.roomToken
}, ( res: { status: boolean, msg: string } ) => {
this.socket.disconnect();
if ( !res.status ) {
alert( 'Unable to delete the room you were just in. The name will be blocked until the next server restart!' );
}
} );
if ( this.useSocket ) {
this.socket.emit( 'delete-room', {
name: this.roomName,
token: this.roomToken
}, ( res: { status: boolean, msg: string } ) => {
this.socket.disconnect();
if ( !res.status ) {
alert( 'Unable to delete the room you were just in. The name will be blocked until the next server restart!' );
}
} );
} else {
fetch( localStorage.getItem( 'url' ) + '/socket/deleteRoom', {
method: 'post',
body: JSON.stringify( { 'roomName': this.roomName, 'roomToken': this.roomToken } ),
credentials: 'include',
headers: {
'Content-Type': 'application/json',
'charset': 'utf-8'
}
} ).then( res => {
if ( res.status === 200 ) {
this.eventSource!.close();
} else {
alert( 'Unable to delete the room you were just in. The name will be blocked until the next server restart!' );
}
} ).catch( () => {} );
}
}
}

4
MusicPlayerV2-GUI/src/scripts/song.d.ts vendored
View File

@@ -88,4 +88,8 @@ export interface AppleMusicSongData {
export interface SongMove {
songID: string;
newPos: number;
}
export interface SSEMap {
[key: string]: ( data: any ) => void;
}