janishutz/MusicPlayer
1
0
Fork 0
mirror of https://github.com/janishutz/MusicPlayerV2.git synced 2025-11-25 13:04:23 +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

4
frontend/src/app.js
View File

@@ -51,6 +51,10 @@ app.get( '/showcase.css', ( req, res ) => {
res.sendFile( path.join( __dirname + '/client/showcase.css' ) ); res.sendFile( path.join( __dirname + '/client/showcase.css' ) );
} ); } );
app.get( '/backgroundAnim.css', ( req, res ) => {
res.sendFile( path.join( __dirname + '/client/backgroundAnim.css' ) );
} );
app.get( '/clientDisplayNotifier', ( req, res ) => { app.get( '/clientDisplayNotifier', ( req, res ) => {
res.writeHead( 200, { res.writeHead( 200, {
'Content-Type': 'text/event-stream', 'Content-Type': 'text/event-stream',

37
frontend/src/client/backgroundAnim.css Normal file
View File

@@ -0,0 +1,37 @@
.background {
position: fixed;
left: -50vw;
width: 200vw;
height: 200vw;
top: -50vw;
z-index: -1;
filter: blur(10px);
background: conic-gradient( blue, green, red, blue );
animation: gradientAnim 10s infinite linear;
background-position: center;
}
.beat {
height: 100%;
width: 100%;
background-color: rgba( 0, 0, 0, 0.2 );
animation: beatAnim 0.6s infinite linear;
}
@keyframes beatAnim {
0% {
background-color: rgba( 0, 0, 0, 0.2 );
}
50% {
background-color: rgba( 0, 0, 0, 0 );
}
}
@keyframes gradientAnim {
from {
transform: rotate( 0deg );
}
to {
transform: rotate( 360deg );
}
}

8
frontend/src/client/showcase.css
View File

@@ -189,3 +189,11 @@ body {
margin-bottom: 20px; margin-bottom: 20px;
font-size: 30vh !important; font-size: 30vh !important;
} }
#canvas {
display: none;
}
#app {
background-color: rgba( 0, 0, 0, 0 );
}

4
frontend/src/client/showcase.html
View File

@@ -7,6 +7,7 @@
<meta http-equiv="X-UA-Compatible" content="ie=edge"> <meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Showcase - MusicPlayerV2</title> <title>Showcase - MusicPlayerV2</title>
<link rel="stylesheet" href="/showcase.css"> <link rel="stylesheet" href="/showcase.css">
<link rel="stylesheet" href="/backgroundAnim.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" /> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
</head> </head>
<body> <body>
@@ -41,6 +42,9 @@
<div v-else> <div v-else>
<h1>Loading...</h1> <h1>Loading...</h1>
</div> </div>
<div class="background">
<div class="beat"></div>
</div>
<canvas id="canvas"></canvas> <canvas id="canvas"></canvas>
</div> </div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>

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

@@ -43,6 +43,7 @@ createApp( {
this.queuePos = data.data.queuePos ?? 0; this.queuePos = data.data.queuePos ?? 0;
getColourPalette( '/getSongCover?filename=' + data.data.playingSong.filename ).then( palette => { getColourPalette( '/getSongCover?filename=' + data.data.playingSong.filename ).then( palette => {
this.colourPalette = palette; this.colourPalette = palette;
this.handleBackground();
} ).catch( () => { } ).catch( () => {
this.colourPalette = [ { 'r': 255, 'g': 0, 'b': 0 }, { 'r': 0, 'g': 255, 'b': 0 }, { 'r': 0, 'g': 0, 'b': 255 } ] 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; this.pos = data.data;
} else if ( data.type === 'isPlaying' ) { } else if ( data.type === 'isPlaying' ) {
this.isPlaying = data.data; this.isPlaying = data.data;
this.handleBackground();
} else if ( data.type === 'songQueue' ) { } else if ( data.type === 'songQueue' ) {
this.songs = data.data; this.songs = data.data;
} else if ( data.type === 'playingSong' ) { } else if ( data.type === 'playingSong' ) {
this.playingSong = data.data; this.playingSong = data.data;
getColourPalette( '/getSongCover?filename=' + data.data.filename ).then( palette => { getColourPalette( '/getSongCover?filename=' + data.data.filename ).then( palette => {
this.colourPalette = palette; this.colourPalette = palette;
this.handleBackground();
} ).catch( () => { } ).catch( () => {
this.colourPalette = [ { 'r': 255, 'g': 0, 'b': 0 }, { 'r': 0, 'g': 255, 'b': 0 }, { 'r': 0, 'g': 0, 'b': 255 } ] this.colourPalette = [ { 'r': 255, 'g': 0, 'b': 0 }, { 'r': 0, 'g': 255, 'b': 0 }, { 'r': 0, 'g': 0, 'b': 255 } ]
} ); } );
@@ -76,6 +79,19 @@ createApp( {
} }
}, false ); }, 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() { mounted() {
this.connect(); this.connect();