diff --git a/backend/ui/index.html b/backend/ui/index.html index 3651e5d..10a5b4f 100644 --- a/backend/ui/index.html +++ b/backend/ui/index.html @@ -7,7 +7,6 @@ Showcase - MusicPlayerV2 - diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 90bf055..5f56049 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -16,6 +16,7 @@ "csv-parser": "^3.0.0", "electron-squirrel-startup": "^1.0.0", "express-session": "^1.17.3", + "ip": "^1.1.8", "jquery": "^3.7.1", "music-metadata": "^7.13.0", "node-fetch": "^2.7.0", @@ -8230,6 +8231,11 @@ "node": ">=10" } }, + "node_modules/ip": { + "version": "1.1.8", + "resolved": "https://registry.npmjs.org/ip/-/ip-1.1.8.tgz", + "integrity": "sha512-PuExPYUiu6qMBQb4l06ecm6T6ujzhmh+MeJcW9wa89PoAz5pvd4zPgN5WJV104mb6S2T1AwNIAaB70JNrLQWhg==" + }, "node_modules/ipaddr.js": { "version": "2.0.1", "resolved": "https://registry.npmmirror.com/ipaddr.js/-/ipaddr.js-2.0.1.tgz", @@ -21212,6 +21218,11 @@ "integrity": "sha512-7PnF4oN3CvZF23ADhA5wRaYEQpJ8qygSkbtTXWBeXWXmEVRXK+1ITciHWwHhsjv1TmW0MgacIv6hEi5pX5NQdA==", "dev": true }, + "ip": { + "version": "1.1.8", + "resolved": "https://registry.npmjs.org/ip/-/ip-1.1.8.tgz", + "integrity": "sha512-PuExPYUiu6qMBQb4l06ecm6T6ujzhmh+MeJcW9wa89PoAz5pvd4zPgN5WJV104mb6S2T1AwNIAaB70JNrLQWhg==" + }, "ipaddr.js": { "version": "2.0.1", "resolved": "https://registry.npmmirror.com/ipaddr.js/-/ipaddr.js-2.0.1.tgz", diff --git a/frontend/package.json b/frontend/package.json index edd57d9..ef14e14 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -32,6 +32,7 @@ "csv-parser": "^3.0.0", "electron-squirrel-startup": "^1.0.0", "express-session": "^1.17.3", + "ip": "^1.1.8", "jquery": "^3.7.1", "music-metadata": "^7.13.0", "node-fetch": "^2.7.0", diff --git a/frontend/src/app.js b/frontend/src/app.js index 7d7337c..24f1576 100644 --- a/frontend/src/app.js +++ b/frontend/src/app.js @@ -8,6 +8,7 @@ const dialog = require( 'electron' ).dialog; const session = require( 'express-session' ); const indexer = require( './indexer.js' ); const axios = require( 'axios' ); +const ip = require( 'ip' ); app.use( bodyParser.urlencoded( { extended: false } ) ); @@ -66,6 +67,10 @@ app.get( '/', ( request, response ) => { response.sendFile( path.join( __dirname + '/client/showcase.html' ) ); } ); +app.get( '/getLocalIP', ( req, res ) => { + res.send( ip.address() ); +} ); + app.get( '/openSongs', ( req, res ) => { // res.send( '{ "data": [ "/home/janis/Music/KB2022" ] }' ); res.send( '{ "data": [ "/mnt/storage/SORTED/Music/audio/KB2022" ] }' ); diff --git a/frontend/src/client/showcase.html b/frontend/src/client/showcase.html index 8cc5596..6e526b5 100644 --- a/frontend/src/client/showcase.html +++ b/frontend/src/client/showcase.html @@ -8,7 +8,6 @@ Showcase - MusicPlayerV2 - @@ -67,7 +66,6 @@ - diff --git a/frontend/src/components/mediaPool.vue b/frontend/src/components/mediaPool.vue index 1f354c9..38c12f3 100644 --- a/frontend/src/components/mediaPool.vue +++ b/frontend/src/components/mediaPool.vue @@ -276,8 +276,30 @@ for ( let el in newOrder ) { this.songQueue.push( processArray[ newOrder[ el ] ] ); } + let fetchOptions = { + method: 'post', + body: JSON.stringify( { 'type': 'songQueue', 'data': this.songQueue } ), + headers: { + 'Content-Type': 'application/json', + 'charset': 'utf-8' + }, + }; + fetch( 'http://localhost:8081/statusUpdate', fetchOptions ).catch( err => { + console.error( err ); + } ); } else if ( command === 'shuffleOff' ) { this.songQueue = JSON.parse( JSON.stringify( this.allSongs ) ); + let fetchOptions = { + method: 'post', + body: JSON.stringify( { 'type': 'songQueue', 'data': this.songQueue } ), + headers: { + 'Content-Type': 'application/json', + 'charset': 'utf-8' + }, + }; + fetch( 'http://localhost:8081/statusUpdate', fetchOptions ).catch( err => { + console.error( err ); + } ); } }, loadSongs() { diff --git a/frontend/src/components/player.vue b/frontend/src/components/player.vue index 70a8431..a3bc19b 100644 --- a/frontend/src/components/player.vue +++ b/frontend/src/components/player.vue @@ -13,6 +13,13 @@ repeat repeat_one_on repeat_on +
+ info +
+

IP to connect to:


+

{{ localIP }}:8081

+
+
@@ -119,6 +126,40 @@ position: absolute; bottom: 17px; } + + #showIP { + background-color: rgb(63, 63, 63); + display: none; + position: absolute; + min-height: 16vh; + padding: 2vh; + min-width: 20vw; + z-index: 10; + justify-content: center; + align-items: center; + flex-direction: column; + font-size: 70%; + border-radius: 5px 10px 10px 10px; + } + + #showIP h4, #showIP p { + margin: 0; + } + + #settings:hover #showIP { + display: flex; + } + + #showIP::before { + content: " "; + position: absolute; + bottom: 100%; /* At the bottom of the tooltip */ + left: 0; + margin-left: 3px; + border-width: 10px; + border-style: solid; + border-color: transparent transparent rgb(63, 63, 63) transparent; + } \ No newline at end of file