diff --git a/frontend/src/app.js b/frontend/src/app.js
index 7d57654..6ca61e1 100644
--- a/frontend/src/app.js
+++ b/frontend/src/app.js
@@ -51,6 +51,10 @@ app.get( '/showcase.css', ( req, res ) => {
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 ) => {
res.writeHead( 200, {
'Content-Type': 'text/event-stream',
diff --git a/frontend/src/client/backgroundAnim.css b/frontend/src/client/backgroundAnim.css
new file mode 100644
index 0000000..0b2d7e4
--- /dev/null
+++ b/frontend/src/client/backgroundAnim.css
@@ -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 );
+ }
+}
\ No newline at end of file
diff --git a/frontend/src/client/showcase.css b/frontend/src/client/showcase.css
index b3fe7a5..26796ed 100644
--- a/frontend/src/client/showcase.css
+++ b/frontend/src/client/showcase.css
@@ -188,4 +188,12 @@ body {
object-position: center;
margin-bottom: 20px;
font-size: 30vh !important;
+}
+
+#canvas {
+ display: none;
+}
+
+#app {
+ background-color: rgba( 0, 0, 0, 0 );
}
\ No newline at end of file
diff --git a/frontend/src/client/showcase.html b/frontend/src/client/showcase.html
index be80008..d59337c 100644
--- a/frontend/src/client/showcase.html
+++ b/frontend/src/client/showcase.html
@@ -7,6 +7,7 @@
Showcase - MusicPlayerV2
+
@@ -41,6 +42,9 @@
Loading...
+
diff --git a/frontend/src/client/showcase.js b/frontend/src/client/showcase.js
index 47553a5..4d84231 100644
--- a/frontend/src/client/showcase.js
+++ b/frontend/src/client/showcase.js
@@ -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();
}