mirror of
https://github.com/janishutz/MusicPlayerV2.git
synced 2025-11-25 04:54:23 +00:00
finish up
This commit is contained in:
@@ -7,7 +7,6 @@
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title>Showcase - MusicPlayerV2</title>
|
||||
<link rel="stylesheet" href="/showcase.css">
|
||||
<script src="https://static.janishutz.com/libs/jquery/jquery.min.js"></script>
|
||||
<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>
|
||||
<body>
|
||||
|
||||
11
frontend/package-lock.json
generated
11
frontend/package-lock.json
generated
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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" ] }' );
|
||||
|
||||
@@ -8,7 +8,6 @@
|
||||
<title>Showcase - MusicPlayerV2</title>
|
||||
<link rel="stylesheet" href="/showcase.css">
|
||||
<link rel="stylesheet" href="/backgroundAnim.css">
|
||||
<script src="https://static.janishutz.com/libs/jquery/jquery.min.js"></script>
|
||||
<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>
|
||||
<body>
|
||||
@@ -67,7 +66,6 @@
|
||||
</div>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
|
||||
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
|
||||
<!-- <script src="/colorPaletteExtractor.js"></script> -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/color-thief/2.3.0/color-thief.umd.js"></script>
|
||||
<script src="/showcase.js"></script>
|
||||
</body>
|
||||
|
||||
@@ -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() {
|
||||
|
||||
@@ -13,6 +13,13 @@
|
||||
<span class="material-symbols-outlined control-icon" :class="hasLoadedSongs ? 'active': 'inactive'" v-if="repeatMode === 'off'" @click="control( 'repeatOne' )">repeat</span>
|
||||
<span class="material-symbols-outlined control-icon" :class="hasLoadedSongs ? 'active': 'inactive'" v-else-if="repeatMode === 'one'" @click="control( 'repeatAll' )">repeat_one_on</span>
|
||||
<span class="material-symbols-outlined control-icon" :class="hasLoadedSongs ? 'active': 'inactive'" v-else-if="repeatMode === 'all'" @click="control( 'repeatOff' )">repeat_on</span>
|
||||
<div class="control-icon" id="settings">
|
||||
<span class="material-symbols-outlined">info</span>
|
||||
<div id="showIP">
|
||||
<h4>IP to connect to:</h4><br>
|
||||
<p>{{ localIP }}:8081</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="song-info">
|
||||
<audio v-if="audioLoaded" :src="'http://localhost:8081/getSongFile?filename=' + playingSong.filename" id="music-player"></audio>
|
||||
@@ -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;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
@@ -143,6 +184,7 @@ export default {
|
||||
isShowingFancyView: false,
|
||||
notifier: null,
|
||||
isShowingRemainingTime: false,
|
||||
localIP: ''
|
||||
}
|
||||
},
|
||||
components: {
|
||||
@@ -395,6 +437,13 @@ export default {
|
||||
this.control( 'previous' );
|
||||
}
|
||||
} );
|
||||
fetch( 'http://localhost:8081/getLocalIP' ).then( res => {
|
||||
if ( res.status === 200 ) {
|
||||
res.text().then( ip => {
|
||||
this.localIP = ip;
|
||||
} );
|
||||
}
|
||||
} );
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user