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

some work on background animation

Browse Source
This commit is contained in:
Janis Hutz
2023-11-03 09:52:39 +01:00
parent 5c04672b0d
commit 77112455c8
5 changed files with 70 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
frontend/src/client/showcase.js
View File

@@ -43,6 +43,7 @@ createApp( {
this.queuePos = data.data.queuePos ?? 0;
getColourPalette( '/getSongCover?filename=' + data.data.playingSong.filename ).then( palette => {
this.colourPalette = palette;
this.handleBackground();
} ).catch( () => {
this.colourPalette = [ { 'r': 255, 'g': 0, 'b': 0 }, { 'r': 0, 'g': 255, 'b': 0 }, { 'r': 0, 'g': 0, 'b': 255 } ]
} );
@@ -50,12 +51,14 @@ createApp( {
this.pos = data.data;
} else if ( data.type === 'isPlaying' ) {
this.isPlaying = data.data;
this.handleBackground();
} else if ( data.type === 'songQueue' ) {
this.songs = data.data;
} else if ( data.type === 'playingSong' ) {
this.playingSong = data.data;
getColourPalette( '/getSongCover?filename=' + data.data.filename ).then( palette => {
this.colourPalette = palette;
this.handleBackground();
} ).catch( () => {
this.colourPalette = [ { 'r': 255, 'g': 0, 'b': 0 }, { 'r': 0, 'g': 255, 'b': 0 }, { 'r': 0, 'g': 0, 'b': 255 } ]
} );
@@ -76,7 +79,20 @@ createApp( {
}
}, false );
},
},
handleBackground() {
let colours = {};
for ( let i = 0; i < 3; i++ ) {
colours[ i ] = 'rgb(' + this.colourPalette[ i ].r + ',' + this.colourPalette[ i ].g + ',' + this.colourPalette[ i ].b + ')';
}
$( '.background' ).css( 'background', `conic-gradient( ${ colours[ 0 ] }, ${ colours[ 1 ] }, ${ colours[ 2 ] }, ${ colours[ 0 ] } } )` );
if ( this.playingSong.bpm && this.isPlaying ) {
$( '.beat' ).show();
$( '.beat' ).css( 'animation-duration', 60 / this.playingSong.bpm );
} else {
$( '.beat' ).hide();
}
}
},
mounted() {
this.connect();
}