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-06-29 15:48:04 +02:00
parent 429bb53f36
commit 1c4aace806
16 changed files with 219 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
MusicPlayerV2-GUI/src/components/playerView.vue
View File

@@ -1,5 +1,13 @@
<template>
<div>
<div v-if="isShowingWarning" class="warning">
<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>
<div class="flash"></div>
</div>
<div class="player">
<div :class="'main-player' + ( isShowingFullScreenPlayer ? ' full-screen' : '' )">
<div :class="'song-name-wrapper' + ( isShowingFullScreenPlayer ? ' full-screen' : '' )" @click="controlUI( 'show' )">
@@ -100,6 +108,7 @@
const isConnectedToNotifier = ref( false );
const popup = ref( popupModule );
const roomName = ref( '' );
const isShowingWarning = ref( false );
let currentlyOpenPopup = '';
const emits = defineEmits( [ 'playerStateChange' ] );
@@ -194,12 +203,17 @@
popup.value.openPopup( {
title: 'Define a share name',
popupType: 'input',
subtitle: 'A share allows others to join your playlist and see the current song, the playback position and the upcoming songs. You can get the link to the page, once the share is set up. Please choose a name, which will then be part of the URL with which others can join the share',
subtitle: 'A share allows others to join your playlist and see the current song, the playback position and the upcoming songs. You can get the link to the page, once the share is set up. Please choose a name, which will then be part of the URL with which others can join the share. The anti tamper feature notifies you, whenever a user leaves the fancy view.',
data: [
{
name: 'Share Name',
dataType: 'text',
id: 'roomName'
},
{
name: 'Use Anti-Tamper?',
dataType: 'checkbox',
id: 'useAntiTamper'
}
]
} );
@@ -377,7 +391,6 @@
if ( pos.value > 0 && !hasStarted ) {
getDetails();
playingSong = player.getPlayingSong();
console.log( pos.value );
prepNiceDurationTime( playingSong );
notificationHandler.emit( 'playlist-index-update', currentlyPlayingSongIndex.value );
notificationHandler.emit( 'playback-update', isPlaying.value );
@@ -472,8 +485,8 @@
player.prepare( 0 );
isPlaying.value = true;
startProgressTracker();
notificationHandler.emit( 'playlist-update', playlist.value );
}
notificationHandler.emit( 'playlist-update', playlist.value );
}
emits( 'playerStateChange', isShowingFullScreenPlayer.value ? 'show' : 'hide' );
@@ -495,9 +508,13 @@
}
} );
const dismissNotification = () => {
isShowingWarning.value = false;
}
const popupReturnHandler = ( data: any ) => {
if ( currentlyOpenPopup === 'create-share' ) {
notificationHandler.connect( data.roomName ).then( () => {
notificationHandler.connect( data.roomName, data.useAntiTamper ?? false ).then( () => {
roomName.value = notificationHandler.getRoomName();
isConnectedToNotifier.value = true;
notificationHandler.emit( 'playlist-index-update', currentlyPlayingSongIndex.value );
@@ -505,6 +522,10 @@
notificationHandler.emit( 'playback-start-update', new Date().getTime() - pos.value * 1000 );
notificationHandler.emit( 'playlist-update', playlist.value );
notifications.value.createNotification( 'Joined share "' + data.roomName + '"!', 5, 'ok', 'normal' );
// eslint-disable-next-line @typescript-eslint/no-unused-vars
notificationHandler.registerListener( 'tampering-msg', ( _ ) => {
isShowingWarning.value = true;
} );
} ).catch( e => {
if ( e === 'ERR_CONFLICT' ) {
notifications.value.createNotification( 'A share with this name exists already!', 5, 'error', 'normal' );
@@ -517,6 +538,10 @@
}
}
window.addEventListener( 'beforeunload', () => {
notificationHandler.disconnect();
} );
defineExpose( {
logIntoAppleMusic,
getPlaylists,
@@ -764,4 +789,49 @@
position: fixed;
bottom: -50%;
}
</style>
<style scoped>
.warning {
display: flex;
justify-content: center;
align-items: center;
width: 40vw;
height: 50vh;
font-size: 2vh;
background-color: rgb(255, 0, 0);
color: white;
position: fixed;
right: 1vh;
top: 1vh;
flex-direction: column;
z-index: 1001;
}
.warning h3 {
font-size: 4vh;
}
.warning .flash {
background-color: rgba(255, 0, 0, 0.4);
animation: flashing linear infinite 1s;
width: 100vw;
height: 100vh;
top: 0;
left: 0;
position: fixed;
z-index: -1;
}
@keyframes flashing {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
</style>

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

@@ -6,7 +6,9 @@
<button @click="openSearch()" v-if="$props.isLoggedIntoAppleMusic" class="small-buttons" title="Search Apple Music for the song"><span class="material-symbols-outlined">search</span></button>
<p v-if="!hasSelectedSongs">Please select at least one song to proceed</p>
<div class="playlist-box" id="pl-box">
<!-- TODO: Allow adding more songs with search on Apple Music or loading from local disk -->
<!-- TODO: Allow editing additionalInfo. Think also how to make it persist over reloads... Export to JSON and then best-guess add them? Very easy for Apple Music 'cause ID, but how for local songs? -->
<!-- TODO: Allow deleting songs, as well as whole playlist -->
<!-- TODO: Handle long AppleMusic Playlists, as AppleMusic doesn't automatically load all songs of a playlist -->
<div class="song" v-for="song in computedPlaylist" v-bind:key="song.id"
:class="( song.id === ( $props.playlist ? $props.playlist [ $props.currentlyPlaying ?? 0 ].id : '' ) && isPlaying ? 'playing' : ' not-playing' )
+ ( ( !isPlaying && ( song.id === ( $props.playlist ? $props.playlist [ $props.currentlyPlaying ?? 0 ].id : '' ) ) ) ? ' active-song' : '' )">
@@ -186,7 +188,7 @@
<style scoped>
.playlist-box {
height: calc( 100% - 100px );
height: calc( 100% - 150px );
width: 100%;
overflow-y: scroll;
display: flex;

7
MusicPlayerV2-GUI/src/components/popupModule.vue
View File

@@ -121,7 +121,7 @@
const closePopupReturn = () => {
for ( let el in popupContent.value.data ) {
if ( !data.value[ popupContent.value.data[ parseInt( el ) ].id ] ) {
if ( !data.value[ popupContent.value.data[ parseInt( el ) ].id ] && popupContent.value.data[ parseInt( el ) ].dataType !== 'checkbox' ) {
isShowingIncomplete.value = true;
return;
}
@@ -150,6 +150,11 @@
}
isShowingPopup.value = true;
popupContent.value = popupConfig;
for ( const el in popupContent.value.data ) {
if ( popupContent.value.data[ parseInt( el ) ].dataType === 'checkbox' ) {
data.value[ popupContent.value.data[ parseInt( el ) ].id ] = false;
}
}
}
defineExpose( {

9
MusicPlayerV2-GUI/src/router/index.ts
View File

@@ -23,6 +23,15 @@ const router = createRouter( {
'title': 'App'
}
},
{
path: '/get',
name: 'get',
component: () => import( '../views/GetView.vue' ),
meta: {
'authRequired': false,
'title': 'Get'
}
},
{
path: '/share/:name',
name: 'share',

4
MusicPlayerV2-GUI/src/scripts/bizualizer.ts
View File

@@ -4,7 +4,6 @@ const colorThief = new ColorThief();
const getImageData = (): Promise<number[][]> => {
return new Promise( ( resolve ) => {
const img = ( document.getElementById( 'current-image' ) as HTMLImageElement );
console.log( img );
if ( img.complete ) {
resolve( colorThief.getPalette( img ) );
} else {
@@ -18,7 +17,6 @@ const getImageData = (): Promise<number[][]> => {
const createBackground = () => {
return new Promise( ( resolve ) => {
getImageData().then( palette => {
console.log( palette );
const colourDetails: number[][] = [];
const colours: string[] = [];
let differentEnough = true;
@@ -118,7 +116,7 @@ const micAudioHandler = () => {
}
}
prevSpectrum = currentSpectrum;
}, 20 );
}, 60 / 180 * 250 );
} );
}

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

@@ -29,11 +29,12 @@ class NotificationHandler {
/**
* Create a room token and connect to
* @param {string} roomName
* @param {boolean} useAntiTamper
* @returns {Promise<string>}
*/
connect ( roomName: string ): Promise<void> {
connect ( roomName: string, useAntiTamper: boolean ): Promise<void> {
return new Promise( ( resolve, reject ) => {
fetch( localStorage.getItem( 'url' ) + '/createRoomToken?roomName=' + roomName, { credentials: 'include' } ).then( res => {
fetch( localStorage.getItem( 'url' ) + '/createRoomToken?roomName=' + roomName + '&useAntiTamper=' + useAntiTamper, { credentials: 'include' } ).then( res => {
if ( res.status === 200 ) {
res.text().then( text => {
this.roomToken = text;

27
MusicPlayerV2-GUI/src/views/AppView.vue
View File

@@ -23,13 +23,16 @@
import libraryView from '@/components/libraryView.vue';
import { ref } from 'vue';
import type { ReadFile } from '@/scripts/song';
import router from '@/router';
import { useUserStore } from '@/stores/userStore';
const isLoggedIntoAppleMusic = ref( false );
const isReady = ref( false );
const isShowingFullScreenPlayer = ref( false );
const player = ref( playerView );
const playlists = ref( [] );
const hasFinishedLoading = ref( true );
const hasFinishedLoading = ref( false );
const userStore = useUserStore();
const handlePlayerStateChange = ( newState: string ) => {
if ( newState === 'hide' ) {
@@ -72,13 +75,21 @@
player.value.selectCustomPlaylist( playlist );
}
// fetch( localStorage.getItem( 'url' ) + '/checkUserStatus', { credentials: 'include' } ).then( res => {
// if ( res.status === 200 ) {
// res.json().then( json => {
// } );
// }
// } );
fetch( localStorage.getItem( 'url' ) + '/checkUserStatus', { credentials: 'include' } ).then( res => {
if ( res.status === 200 ) {
res.text().then( text => {
if ( text === 'ok' ) {
hasFinishedLoading.value = true;
userStore.setSubscriptionStatus( true );
} else {
userStore.setSubscriptionStatus( false );
router.push( '/get' );
}
} );
} else {
console.log( res.status );
}
} );
</script>

7
MusicPlayerV2-GUI/src/views/GetView.vue Normal file
View File

@@ -0,0 +1,7 @@
<template>
<div>
<h1>Get MusicPlayer</h1>
<p>MusicPlayer offers</p>
<a href="https://store.janishutz.com/product/com.janishutz.MusicPlayer" class="fancy-button">Subscribe</a>
</div>
</template>

2
MusicPlayerV2-GUI/src/views/HomeView.vue
View File

@@ -5,7 +5,7 @@
style="margin-top: 5vh;" title="Sign in or sign up with janishutz.com ID" v-if="status"
>{{ isTryingToSignIn ? 'Signing you in...' : 'Login / Sign up' }}</button>
<p v-else>We are sorry, but we were unable to initialize the login services. Please reload the page if you wish to retry!</p>
<p>MusicPlayer is a browser based Music Player, that allows you to connect other devices, simply with another web-browser, where you can see the current playlist with sleek animations. You can log in using your Apple Music account or load a playlist from your local disk, simply by selecting the songs using a file picker.</p>
<p style="width: 80%;">MusicPlayer is a browser based Music Player, that allows you to connect other devices, simply with another web-browser, where you can see the current playlist with sleek animations. You can log in using your Apple Music account or load a playlist from your local disk, simply by selecting the songs using a file picker.</p>
<notificationsModule ref="notifications" location="bottomleft" size="bigger"></notificationsModule>
</div>
</template>

14
MusicPlayerV2-GUI/src/views/RemoteView.vue
View File

@@ -5,7 +5,7 @@
<div v-if="hasLoaded && !showCouldNotFindRoom" style="width: 100%">
<div class="current-song-wrapper">
<img v-if="playlist[ playingSong ]" :src="playlist[ playingSong ].cover" class="fancy-view-song-art" id="current-image" crossorigin="anonymous">
<span v-else class="material-symbols-outlined">music_note</span>
<span v-else class="material-symbols-outlined fancy-view-song-art">music_note</span>
<div class="current-song">
<progress max="1000" id="progress" :value="progressBar"></progress>
<h1>{{ playlist[ playingSong ] ? playlist[ playingSong ].title : 'Not playing' }}</h1>
@@ -64,7 +64,7 @@
startTimeTracker();
}
pos.value = ( new Date().getTime() - parseInt( d.playbackStart ) ) / 1000;
progressBar.value = ( pos.value / playlist.value[ playingSong.value ].duration ) * 1000;
progressBar.value = ( pos.value / ( playlist.value[ playingSong.value ] ? playlist.value[ playingSong.value ].duration : 1 ) ) * 1000;
hasLoaded.value = true;
conn.registerListener( 'playlist', ( data ) => {
playlist.value = data;
@@ -87,7 +87,15 @@
conn.registerListener( 'playlist-index', ( data ) => {
playingSong.value = parseInt( data );
} );
} ).catch( () => {
// eslint-disable-next-line @typescript-eslint/no-unused-vars
conn.registerListener( 'delete-share', ( _ ) => {
alert( 'This share was just deleted. It is no longer available. The page will reload automatically to try and re-establish connection!' );
conn.disconnect();
location.reload();
} );
} ).catch( e => {
console.error( e );
showCouldNotFindRoom.value = true;
} );

36
MusicPlayerV2-GUI/src/views/ShowcaseView.vue
View File

@@ -1,11 +1,12 @@
<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>
<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">
<div class="current-song-wrapper">
<img v-if="playlist[ playingSong ]" :src="playlist[ playingSong ].cover" class="fancy-view-song-art" id="current-image" crossorigin="anonymous">
<span v-else class="material-symbols-outlined">music_note</span>
<span v-else class="material-symbols-outlined fancy-view-song-art">music_note</span>
<div class="current-song">
<progress max="1000" id="progress" :value="progressBar"></progress>
<h1>{{ playlist[ playingSong ] ? playlist[ playingSong ].title : 'Not playing' }}</h1>
@@ -71,6 +72,7 @@
const playbackStart = ref( 0 );
let timeTracker = 0;
const visualizationSettings = ref( 'mic' );
const isAntiTamperEnabled = ref( false );
const conn = new SocketConnection();
@@ -83,8 +85,12 @@
startTimeTracker();
}
pos.value = ( new Date().getTime() - parseInt( d.playbackStart ) ) / 1000;
progressBar.value = ( pos.value / playlist.value[ playingSong.value ].duration ) * 1000;
progressBar.value = ( pos.value / ( playlist.value[ playingSong.value ] ? playlist.value[ playingSong.value ].duration : 1 ) ) * 1000;
hasLoaded.value = true;
if ( d.useAntiTamper ) {
isAntiTamperEnabled.value = true;
notifier();
}
conn.registerListener( 'playlist', ( data ) => {
playlist.value = data;
} );
@@ -107,9 +113,17 @@
playingSong.value = parseInt( data );
setTimeout( () => {
setBackground();
}, 1000 )
}, 1000 );
} );
} ).catch( () => {
// eslint-disable-next-line @typescript-eslint/no-unused-vars
conn.registerListener( 'delete-share', ( _ ) => {
alert( 'This share was just deleted. It is no longer available. This page will reload automatically!' );
conn.disconnect();
location.reload();
} );
} ).catch( e => {
console.error( e );
showCouldNotFindRoom.value = true;
} );
@@ -178,7 +192,7 @@
const animateBeat = () => {
$( '.beat-manual' ).stop();
const duration = Math.ceil( 60 / 120 * 500 ) - 50;
const duration = Math.ceil( 60 / 180 * 500 ) - 50;
$( '.beat-manual' ).fadeIn( 50 );
setTimeout( () => {
$( '.beat-manual' ).fadeOut( duration );
@@ -225,10 +239,20 @@
body: 'Please return to the original webpage immediately!',
requireInteraction: true,
} );
conn.emit( 'tampering', '' );
}
</script>
<style scoped>
.anti-tamper {
position: fixed;
z-index: 10;
bottom: 5px;
right: 5px;
font-size: 2rem;
}
.remote-view {
width: 100%;
display: flex;
@@ -236,6 +260,7 @@
align-items: center;
flex-direction: column;
text-align: justify;
color: white;
}
.showcase-wrapper {
@@ -428,6 +453,7 @@
padding: 0;
top: 50%;
z-index: 100;
color: white;
}
</style>