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

progress on internal fancy view

Browse Source
This commit is contained in:
Janis Hutz
2023-10-30 08:56:09 +01:00
parent 5de8382285
commit 5199dac5b1
2 changed files with 79 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -3,13 +3,34 @@
<span class="material-symbols-outlined fancy-view-song-art" v-if="!song.hasCoverArt">music_note</span> <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"> <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> <button @click="exit()" id="exit-button"><span class="material-symbols-outlined" style="font-size: 4vh;">close</span></button>
<div class="controls-wrapper">
<div class="song-info">
<h3>{{ song.title }}</h3>
<p>{{ song.artist }}</p>
</div>
<div class="controls"> <div class="controls">
<div> <span class="material-symbols-outlined control-icon" @click="control( 'previous' )">skip_previous</span>
<span class="material-symbols-outlined control-icon" @click="control( 'replay10' )">replay_10</span>
<span class="material-symbols-outlined control-icon play-pause" v-if="!isPlaying" @click="control( 'play' )">play_arrow</span>
<span class="material-symbols-outlined control-icon play-pause" v-else-if="isPlaying" @click="control( 'pause' )">pause</span>
<span class="material-symbols-outlined control-icon" @click="control( 'forward10' )">forward_10</span>
<span class="material-symbols-outlined control-icon" @click="control( 'next' )">skip_next</span>
</div>
<div class="slider-wrapper">
<sliderView :active="true" :position="playbackPos" :duration="song.duration" @pos="( p ) => { setPos( p ) }"
name="fancy" class="slider"></sliderView>
<div class="playback-pos-info">
<div style="margin-right: auto;">{{ playbackPosBeautified }}</div> <div style="margin-right: auto;">{{ playbackPosBeautified }}</div>
<div>{{ durationBeautified }}</div> <div>{{ durationBeautified }}</div>
</div> </div>
<sliderView :active="true" :position="playbackPos" :duration="song.duration" @pos="( p ) => { setPos( p ) }" </div>
name="fancy"></sliderView> <div class="shuffle-repeat-wrapper">
<span class="material-symbols-outlined control-icon" v-if="!shuffle" @click="control( 'shuffleOn' )">shuffle</span>
<span class="material-symbols-outlined control-icon" v-else @click="control( 'shuffleOff' )">shuffle_on</span>
<span class="material-symbols-outlined control-icon" v-if="repeatMode === 'off'" @click="control( 'repeatOne' )">repeat</span>
<span class="material-symbols-outlined control-icon" v-else-if="repeatMode === 'one'" @click="control( 'repeatAll' )">repeat_one_on</span>
<span class="material-symbols-outlined control-icon" v-else-if="repeatMode === 'all'" @click="control( 'repeatOff' )">repeat_on</span>
</div>
</div> </div>
</div> </div>
</template> </template>
@@ -30,6 +51,7 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
position: fixed; position: fixed;
flex-direction: column;
z-index: 20; z-index: 20;
height: 100vh; height: 100vh;
width: 100vw; width: 100vw;
@@ -38,10 +60,57 @@
background-color: var( --background-color ); background-color: var( --background-color );
} }
.controls-wrapper {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.slider-wrapper {
position: relative;
margin-top: 40px;
width: 40vh;
margin-bottom: 20px
}
.fancy-view-song-art { .fancy-view-song-art {
height: 40vh; height: 40vh;
width: auto; width: auto;
margin-bottom: 5%; margin-bottom: 20px;
}
.controls {
width: 50vw;
display: flex;
justify-content: center;
align-items: center;
}
.control-icon {
cursor: pointer;
font-size: 3vh;
user-select: none;
}
.play-pause {
font-size: 5vh;
}
.playback-pos-info {
display: flex;
flex-direction: row;
width: 98%;
margin-left: 1%;
position: absolute;
bottom: 17px;
left: 0;
}
.shuffle-repeat-wrapper {
display: flex;
justify-content: center;
align-items: center;
} }
</style> </style>
@@ -49,8 +118,8 @@
import SliderView from './sliderView.vue'; import SliderView from './sliderView.vue';
export default { export default {
methods: { methods: {
control ( instruction, value ) { control ( instruction ) {
this.$emit( 'control', instruction );
}, },
setPos ( pos ) { setPos ( pos ) {
this.$emit( 'posUpdate', pos ); this.$emit( 'posUpdate', pos );

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

@@ -42,7 +42,7 @@
</div> </div>
</template> </template>
<style> <style scoped>
.song-info { .song-info {
background-color: #8e9ced; background-color: #8e9ced;
height: 13vh; height: 13vh;