janishutz/MusicPlayer
1
0
Fork 0
mirror of https://github.com/janishutz/MusicPlayerV2.git synced 2025-11-26 21:34: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

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;
},
}