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

finish up

Browse Source
This commit is contained in:
Janis Hutz
2023-11-10 21:34:08 +01:00
parent b802211be0
commit 9f898b3101
7 changed files with 88 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
frontend/package-lock.json generated
View File

@@ -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",

1
frontend/package.json
View File

@@ -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",

5
frontend/src/app.js
View File

@@ -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" ] }' );

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

@@ -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>

22
frontend/src/components/mediaPool.vue
View File

@@ -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() {

49
frontend/src/components/player.vue
View File

@@ -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>