girineko/YesPlayMusic
1
0
Fork 0
mirror of https://github.com/GiriNeko/YesPlayMusic.git synced 2025-12-16 13:17:46 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: click blank space in player jump to the lyrics page #158

Browse source
This commit is contained in:
qier222 2021-01-31 18:42:57 +08:00
parent 86452f0420
commit 160737e736
1 changed files with 127 additions and 98 deletions
Download patch file Download diff file Expand all files Collapse all files

53
src/components/Player.vue
View file

@ -1,6 +1,10 @@
<template>
<div class="player">
<div class="progress-bar" :class="{ nyancat: settings.nyancatStyle }">
<div class="player" @click="toggleLyrics">
<div
class="progress-bar"
:class="{ nyancat: settings.nyancatStyle }"
@click.stop
>
<vue-slider
v-model="progress"
:min="0"
@ -17,6 +21,7 @@
</div>
<div class="controls">
<div class="playing">
<div class="container" @click.stop>
<img
:src="currentTrack.al && currentTrack.al.picUrl | resizeImage(224)"
@click="goToAlbum"
@ -52,7 +57,11 @@
</button-icon>
</div>
</div>
<div class="blank"></div>
</div>
<div class="middle-control-buttons">
<div class="blank"></div>
<div class="container" @click.stop>
<button-icon @click.native="previous" :title="$t('player.previous')"
><svg-icon icon-class="previous"
/></button-icon>
@ -67,7 +76,11 @@
><svg-icon icon-class="next"
/></button-icon>
</div>
<div class="blank"></div>
</div>
<div class="right-control-buttons">
<div class="blank"></div>
<div class="container" @click.stop>
<button-icon
@click.native="goToNextTracksPage"
:title="$t('player.nextUp')"
@ -83,7 +96,10 @@
@click.native="repeat"
:class="{ active: player.repeatMode !== 'off' }"
>
<svg-icon icon-class="repeat" v-show="player.repeatMode !== 'one'" />
<svg-icon
icon-class="repeat"
v-show="player.repeatMode !== 'one'"
/>
<svg-icon
icon-class="repeat-1"
v-show="player.repeatMode === 'one'"
@ -119,12 +135,13 @@
</div>
</div>
</div>
</div>
<button-icon
class="lyrics-button"
title="Lyrics"
style="margin-left: 12px"
@click.native="toggleLyrics"
@click.native.stop="toggleLyrics"
><svg-icon icon-class="arrow-up"
/></button-icon>
</div>
@ -205,10 +222,8 @@ export default {
},
shuffle() {
this.player.shuffle = !this.player.shuffle;
console.log(this.player);
},
repeat() {
console.log(this.player.repeatMode);
if (this.player.repeatMode === "on") {
this.player.repeatMode = "one";
} else if (this.player.repeatMode === "one") {
@ -305,10 +320,9 @@ export default {
}
.controls {
flex: 1;
display: flex;
justify-content: flex;
align-items: center;
display: grid;
grid-template-columns: repeat(3, 1fr);
height: 100%;
padding: {
right: 10vw;
left: 10vw;
@ -321,8 +335,15 @@ export default {
}
}
.blank {
flex-grow: 1;
}
.playing {
flex: 1;
display: flex;
}
.playing .container {
display: flex;
align-items: center;
img {
@ -373,6 +394,10 @@ export default {
}
.middle-control-buttons {
display: flex;
}
.middle-control-buttons .container {
flex: 1;
display: flex;
justify-content: center;
@ -389,8 +414,12 @@ export default {
}
}
}
.right-control-buttons {
flex: 1;
display: flex;
}
.right-control-buttons .container {
display: flex;
justify-content: flex-end;
align-items: center;