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 more progress on fancy view

Browse Source
This commit is contained in:
Janis Hutz
2023-10-23 20:29:26 +02:00
parent 7f5a2d7eef
commit 3a605453be
6 changed files with 63 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/app.js
View File

@@ -66,6 +66,10 @@ app.get( '/indexDirs', ( req, res ) => {
} catch ( err ) {
files[ req.query.dir + '/' + dat[ file ] ] = 'ERROR';
}
} else if ( dat[ file ].slice( dat[ file ].indexOf( '.' ), dat[ file ].length ) === '.csv' ) {
} else if ( dat[ file ].slice( dat[ file ].indexOf( '.' ), dat[ file ].length ) === '.json' ) {
}
}
indexedData[ req.query.dir ] = files;

29
frontend/src/components/fancyView.vue
View File

@@ -1,13 +1,27 @@
<template>
<div class="fancy-view">
<span class="material-symbols-outlined image" v-if="!song.hasCoverArt">music_note</span>
<img v-else :src="'http://localhost:8081/getSongCover?filename=' + song.filename" class="image">
<span class="material-symbols-outlined fancy-view-song-art" v-if="!song.hasCoverArt">music_note</span>
<img v-else :src="'http://localhost:8081/getSongCover?filename=' + song.filename" class="fancy-view-song-art">
<button @click="exit()" id="exit-button"><span class="material-symbols-outlined" style="font-size: 4vh;">close</span></button>
<div class="controls"></div>
</div>
</template>
<style scoped>
#exit-button {
position: fixed;
right: 1vw;
top: 1vw;
background-color: rgba( 0,0,0,0 );
border: none;
cursor: pointer;
color: var( --primary-color );
}
.fancy-view {
display: block;
display: flex;
justify-content: center;
align-items: center;
position: fixed;
z-index: 20;
height: 100vh;
@@ -16,6 +30,12 @@
left: 0;
background-color: var( --background-color );
}
.fancy-view-song-art {
height: 40vh;
width: auto;
margin-bottom: 5%;
}
</style>
<script>
@@ -23,6 +43,9 @@
methods: {
control ( instruction ) {
},
exit() {
this.$emit( 'control', 'exitFancyView' );
}
},
props: {

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

@@ -1,5 +1,5 @@
<template>
<div class="media-pool">
<div class="media-pool" :style="isShowingFancyView ? 'overflow: hidden;' : ''">
<div v-if="hasLoadedSongs" style="width: 100%;" class="song-list-wrapper">
<div v-for="song in songQueue" class="song-list" :class="[ isPlaying ? ( currentlyPlaying === song.filename ? 'playing': 'not-playing' ) : 'not-playing', !isPlaying && currentlyPlaying === song.filename ? 'active-song': undefined ]">
<span class="material-symbols-outlined song-image" v-if="!loadCoverArtPreview || !song.hasCoverArt">music_note</span>
@@ -128,7 +128,7 @@
align-items: center;
width: 80%;
margin: 2px;
padding: 15px;
padding: 1vh;
border: 1px var( --border-color ) solid;
}
@@ -199,6 +199,7 @@
isPlaying: false,
songPos: 0,
repeat: false,
isShowingFancyView: false,
}
},
methods: {
@@ -235,6 +236,8 @@
this.repeat = true;
} else if ( status.type === 'repeatOff' ) {
this.repeat = false;
} else if ( status.type === 'fancyView' ) {
this.isShowingFancyView = status.status;
}
},
queueHandler ( command ) {

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

@@ -26,6 +26,7 @@
<h3>{{ playingSong.title ?? 'No song selected' }}</h3>
<p>{{ playingSong.artist }}</p>
</div>
<div class="image"></div>
</div>
<div class="playback-pos-info">
<div style="margin-right: auto;">{{ playbackPosBeautified }}</div>
@@ -33,14 +34,14 @@
</div>
<sliderView :active="audioLoaded" :position="playbackPos" :duration="playingSong.duration" @pos="( p ) => { setPos( p ) }"></sliderView>
</div>
<FancyView v-if="isShowingFancyView" :song="playingSong"></FancyView>
<FancyView v-if="isShowingFancyView" :song="playingSong" @control="instruction => { control( instruction ) }" :playing="isPlaying"></FancyView>
</div>
</template>
<style>
.song-info {
background-color: #8e9ced;
height: 80%;
height: 13vh;
width: 50%;
margin-left: auto;
margin-right: auto;
@@ -48,11 +49,11 @@
}
.image {
width: 6vh;
height: 6vh;
width: 7vh;
height: 7vh;
object-fit: cover;
object-position: center;
font-size: 6vh;
font-size: 7vh;
margin-left: 1vh;
margin-top: 1vh;
}
@@ -107,8 +108,8 @@
.playback-pos-info {
display: flex;
flex-direction: row;
width: 99%;
margin-left: 0.5%;
width: 98%;
margin-left: 1%;
position: absolute;
bottom: 17px;
}
@@ -239,6 +240,9 @@ export default {
} else if ( action === 'repeatOff' ) {
this.$emit( 'update', { 'type': 'repeatOff' } );
this.repeatMode = 'off';
} else if ( action === 'exitFancyView' ) {
this.isShowingFancyView = false;
this.$emit( 'update', { 'type': 'fancyView', 'status': false } );
}
} else if ( action === 'songsLoaded' ) {
this.hasLoadedSongs = true;
@@ -256,6 +260,9 @@ export default {
} else if ( action === 'repeatOff' ) {
this.$emit( 'update', { 'type': 'repeatOff' } );
this.repeatMode = 'off';
} else if ( action === 'exitFancyView' ) {
this.isShowingFancyView = false;
this.$emit( 'update', { 'type': 'fancyView', 'status': false } );
}
},
setPos( pos ) {
@@ -263,6 +270,7 @@ export default {
musicPlayer.currentTime = pos;
},
showFancyView() {
this.$emit( 'update', { 'type': 'fancyView', 'status': true } );
this.isShowingFancyView = true;
},
}

12
frontend/src/imageFetcher.js Normal file
View File

@@ -0,0 +1,12 @@
/*
* MusicPlayerV2 - imageFetcher.js
*
* Created by Janis Hutz 10/23/2023, Licensed under the GPL V3 License
* https://janishutz.com, development@janishutz.com
*
*
*/
module.exports.fetch = () => {
// TODO: Implement
}

2
frontend/src/views/HomeView.vue
View File

@@ -47,7 +47,7 @@
}
.logo {
height: 90%;
height: 13vh;
margin-left: 3%;
margin-right: auto;
}