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

get player working, some features still missing

Browse Source
This commit is contained in:
Janis Hutz
2023-11-17 19:36:57 +01:00
parent da4924b453
commit 2f57ce7257
2 changed files with 71 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
frontend/src/app.js
View File

@@ -135,6 +135,7 @@ const sendUpdate = ( update ) => {
currentDetails[ 'playingSong' ][ 'startTime' ] = new Date().getTime(); currentDetails[ 'playingSong' ][ 'startTime' ] = new Date().getTime();
for ( let client in connectedClients ) { for ( let client in connectedClients ) {
connectedClients[ client ].write( 'data: ' + JSON.stringify( { 'type': 'playingSong', 'data': currentDetails[ 'playingSong' ] } ) + '\n\n' ); connectedClients[ client ].write( 'data: ' + JSON.stringify( { 'type': 'playingSong', 'data': currentDetails[ 'playingSong' ] } ) + '\n\n' );
connectedClients[ client ].write( 'data: ' + JSON.stringify( { 'type': 'pos', 'data': currentDetails[ 'pos' ] } ) + '\n\n' );
} }
} else if ( update === 'playingSong' ) { } else if ( update === 'playingSong' ) {
currentDetails[ update ][ 'startTime' ] = new Date().getTime(); currentDetails[ update ][ 'startTime' ] = new Date().getTime();
@@ -142,9 +143,6 @@ const sendUpdate = ( update ) => {
currentDetails[ 'playingSong' ][ 'startTime' ] = new Date().getTime(); currentDetails[ 'playingSong' ][ 'startTime' ] = new Date().getTime();
for ( let client in connectedClients ) { for ( let client in connectedClients ) {
connectedClients[ client ].write( 'data: ' + JSON.stringify( { 'type': 'playingSong', 'data': currentDetails[ 'playingSong' ] } ) + '\n\n' ); connectedClients[ client ].write( 'data: ' + JSON.stringify( { 'type': 'playingSong', 'data': currentDetails[ 'playingSong' ] } ) + '\n\n' );
}
for ( let client in connectedClients ) {
connectedClients[ client ].write( 'data: ' + JSON.stringify( { 'type': 'pos', 'data': currentDetails[ 'pos' ] } ) + '\n\n' ); connectedClients[ client ].write( 'data: ' + JSON.stringify( { 'type': 'pos', 'data': currentDetails[ 'pos' ] } ) + '\n\n' );
} }
} }
@@ -168,6 +166,10 @@ const sendUpdate = ( update ) => {
axios.post( remoteURL + '/statusUpdate', { 'type': 'playingSong', 'data': currentDetails[ 'playingSong' ], 'authKey': authKey } ).catch( err => { axios.post( remoteURL + '/statusUpdate', { 'type': 'playingSong', 'data': currentDetails[ 'playingSong' ], 'authKey': authKey } ).catch( err => {
console.error( err ); console.error( err );
} ); } );
axios.post( remoteURL + '/statusUpdate', { 'type': 'pos', 'data': currentDetails[ 'pos' ], 'authKey': authKey } ).catch( err => {
console.error( err );
} );
} }
axios.post( remoteURL + '/statusUpdate', { 'type': update, 'data': currentDetails[ update ], 'authKey': authKey } ).catch( err => { axios.post( remoteURL + '/statusUpdate', { 'type': update, 'data': currentDetails[ update ], 'authKey': authKey } ).catch( err => {
console.error( err ); console.error( err );

93
frontend/src/client/appleMusic/index.js
View File

@@ -22,6 +22,7 @@ const app = Vue.createApp( {
localIP: '', localIP: '',
hasLoadedPlaylists: false, hasLoadedPlaylists: false,
isPreparingToPlay: false, isPreparingToPlay: false,
filenameForAdditionalInfo: '',
// slider // slider
offset: 0, offset: 0,
@@ -92,7 +93,11 @@ const app = Vue.createApp( {
this.queuePos = this.musicKit.nowPlayingItemIndex; this.queuePos = this.musicKit.nowPlayingItemIndex;
this.sendUpdate( 'playingSong' ); this.sendUpdate( 'playingSong' );
this.sendUpdate( 'pos' ); this.sendUpdate( 'pos' );
this.sendUpdate( 'isPlaying' );
this.sendUpdate( 'queuePos' ); this.sendUpdate( 'queuePos' );
setTimeout( () => {
this.sendUpdate( 'pos' );
}, 500 );
} }
} ); } );
this.apiGetRequest( 'https://api.music.apple.com/v1/me/library/playlists', this.playlistHandler ); this.apiGetRequest( 'https://api.music.apple.com/v1/me/library/playlists', this.playlistHandler );
@@ -138,30 +143,18 @@ const app = Vue.createApp( {
} ); } );
} else return false; } else return false;
}, },
getAdditionalSongInfo() {
// TODO: Implement
if ( this.filenameForAdditionalInfo ) {
}
},
selectPlaylist( id ) { selectPlaylist( id ) {
this.isPreparingToPlay = true; this.isPreparingToPlay = true;
this.musicKit.setQueue( { playlist: id } ).then( () => { this.musicKit.setQueue( { playlist: id } ).then( () => {
try { try {
this.control( 'play' ); this.control( 'play' );
const songQueue = this.musicKit.queue.items; this.loadPlaylist();
for ( let item in songQueue ) {
this.songQueue[ item ] = {
'artist': songQueue[ item ].attributes.artistName,
'title': songQueue[ item ].attributes.name,
'year': songQueue[ item ].attributes.releaseDate,
'genre': songQueue[ item ].attributes.genreNames,
'duration': Math.round( songQueue[ item ].durationInMillis / 1000 ),
'filename': songQueue[ item ].id,
'coverArtOrigin': 'api',
'hasCoverArt': true,
'queuePos': item,
}
let url = songQueue[ item ].attributes.artwork.url;
url = url.replace( '{w}', songQueue[ item ].attributes.artwork.width );
url = url.replace( '{h}', songQueue[ item ].attributes.artwork.height );
this.songQueue[ item ][ 'coverArtURL' ] = url;
}
this.sendUpdate( 'songQueue' );
// TODO: Load additional data from file // TODO: Load additional data from file
this.hasSelectedPlaylist = true; this.hasSelectedPlaylist = true;
this.isPreparingToPlay = false; this.isPreparingToPlay = false;
@@ -212,6 +205,7 @@ const app = Vue.createApp( {
}, },
sendUpdate( update ) { sendUpdate( update ) {
let data = {}; let data = {};
let up = update;
if ( update === 'pos' ) { if ( update === 'pos' ) {
data = this.pos; data = this.pos;
} else if ( update === 'playingSong' ) { } else if ( update === 'playingSong' ) {
@@ -223,10 +217,13 @@ const app = Vue.createApp( {
} else if ( update === 'queuePos' ) { } else if ( update === 'queuePos' ) {
this.queuePos = this.musicKit.nowPlayingItemIndex >= 0 ? this.musicKit.nowPlayingItemIndex : 0; this.queuePos = this.musicKit.nowPlayingItemIndex >= 0 ? this.musicKit.nowPlayingItemIndex : 0;
data = this.queuePos; data = this.queuePos;
} else if ( update === 'posReset' ) {
data = 0;
up = 'pos';
} }
let fetchOptions = { let fetchOptions = {
method: 'post', method: 'post',
body: JSON.stringify( { 'type': update, 'data': data } ), body: JSON.stringify( { 'type': up, 'data': data } ),
headers: { headers: {
'Content-Type': 'application/json', 'Content-Type': 'application/json',
'charset': 'utf-8' 'charset': 'utf-8'
@@ -236,7 +233,27 @@ const app = Vue.createApp( {
console.error( err ); console.error( err );
} ); } );
}, },
// TODO: Reload queue if shuffle enabled loadPlaylist() {
const songQueue = this.musicKit.queue.items;
for ( let item in songQueue ) {
this.songQueue[ item ] = {
'artist': songQueue[ item ].attributes.artistName,
'title': songQueue[ item ].attributes.name,
'year': songQueue[ item ].attributes.releaseDate,
'genre': songQueue[ item ].attributes.genreNames,
'duration': Math.round( songQueue[ item ].attributes.durationInMillis / 1000 ),
'filename': songQueue[ item ].id,
'coverArtOrigin': 'api',
'hasCoverArt': true,
'queuePos': item,
}
let url = songQueue[ item ].attributes.artwork.url;
url = url.replace( '{w}', songQueue[ item ].attributes.artwork.width );
url = url.replace( '{h}', songQueue[ item ].attributes.artwork.height );
this.songQueue[ item ][ 'coverArtURL' ] = url;
}
this.sendUpdate( 'songQueue' );
},
control( action ) { control( action ) {
if ( action === 'play' ) { if ( action === 'play' ) {
if( !this.musicKit || !this.isPlaying ) { if( !this.musicKit || !this.isPlaying ) {
@@ -325,6 +342,8 @@ const app = Vue.createApp( {
} else if ( action === 'next' ) { } else if ( action === 'next' ) {
this.musicKit.skipToNextItem().then( () => { this.musicKit.skipToNextItem().then( () => {
this.sendUpdate( 'queuePos' ); this.sendUpdate( 'queuePos' );
this.pos = 0;
this.sendUpdate( 'posReset' );
} ); } );
} else if ( action === 'previous' ) { } else if ( action === 'previous' ) {
if ( this.pos > 3 ) { if ( this.pos > 3 ) {
@@ -337,14 +356,18 @@ const app = Vue.createApp( {
} else { } else {
this.musicKit.skipToPreviousItem().then( () => { this.musicKit.skipToPreviousItem().then( () => {
this.sendUpdate( 'queuePos' ); this.sendUpdate( 'queuePos' );
this.pos = 0;
this.sendUpdate( 'posReset' );
} ); } );
} }
} else if ( action === 'shuffleOff' ) { } else if ( action === 'shuffleOff' ) {
this.isShuffleEnabled = false; this.isShuffleEnabled = false;
this.musicKit.shuffleMode = MusicKit.PlayerShuffleMode.off; this.musicKit.shuffleMode = MusicKit.PlayerShuffleMode.off;
this.loadPlaylist();
} else if ( action === 'shuffleOn' ) { } else if ( action === 'shuffleOn' ) {
this.musicKit.shuffleMode = MusicKit.PlayerShuffleMode.songs; this.musicKit.shuffleMode = MusicKit.PlayerShuffleMode.songs;
this.isShuffleEnabled = true; this.isShuffleEnabled = true;
this.loadPlaylist();
} else if ( action === 'repeatOne' ) { } else if ( action === 'repeatOne' ) {
this.repeatMode = 'one'; this.repeatMode = 'one';
this.musicKit.repeatMode = MusicKit.PlayerRepeatMode.one; this.musicKit.repeatMode = MusicKit.PlayerRepeatMode.one;
@@ -357,18 +380,18 @@ const app = Vue.createApp( {
} }
}, },
play( song ) { play( song ) {
// TODO: Look into this... seems to cancel the playlist and then autoplay similar music
// TODO: Also look at stability of player
let foundSong = 0; let foundSong = 0;
for ( let s in this.songQueue ) { for ( let s in this.songQueue ) {
if ( this.songQueue[ s ] === song ) { if ( this.songQueue[ s ] === song ) {
foundSong = s; foundSong = s;
} }
} }
this.musicKit.play().then( () => { this.musicKit.changeToMediaItem( this.musicKit.queue.items[ foundSong ] ).then( () => {
this.musicKit.changeToMediaAtIndex( foundSong ).catch( ( err ) => { this.sendUpdate( 'queuePos' );
console.log( err ); this.pos = 0;
} ); this.sendUpdate( 'posReset' );
} ).catch( ( err ) => {
console.log( err );
} ); } );
}, },
}, },
@@ -381,6 +404,22 @@ const app = Vue.createApp( {
} }
}, },
created() { created() {
document.addEventListener( 'keydown', ( e ) => {
if ( e.key === ' ' ) {
e.preventDefault();
if ( !this.isPlaying ) {
this.control( 'play' );
} else {
this.control( 'pause' );
}
} else if ( e.key === 'ArrowRight' ) {
e.preventDefault();
this.control( 'next' );
} else if ( e.key === 'ArrowLeft' ) {
e.preventDefault();
this.control( 'previous' );
}
} );
if ( !window.MusicKit ) { if ( !window.MusicKit ) {
document.addEventListener( 'musickitloaded', () => { document.addEventListener( 'musickitloaded', () => {
self.initMusicKit(); self.initMusicKit();