mirror of
https://github.com/GiriNeko/YesPlayMusic.git
synced 2025-12-16 13:17:46 +00:00
feat: click blank space in player jump to the lyrics page #158
This commit is contained in:
qier222
parent
86452f0420
commit
160737e736
1 changed files with 127 additions and 98 deletions
|
|
@ -1,6 +1,10 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="player">
|
<div class="player" @click="toggleLyrics">
|
||||||
<div class="progress-bar" :class="{ nyancat: settings.nyancatStyle }">
|
<div
|
||||||
|
class="progress-bar"
|
||||||
|
:class="{ nyancat: settings.nyancatStyle }"
|
||||||
|
@click.stop
|
||||||
|
>
|
||||||
<vue-slider
|
<vue-slider
|
||||||
v-model="progress"
|
v-model="progress"
|
||||||
:min="0"
|
:min="0"
|
||||||
|
|
@ -17,104 +21,117 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="controls">
|
<div class="controls">
|
||||||
<div class="playing">
|
<div class="playing">
|
||||||
<img
|
<div class="container" @click.stop>
|
||||||
:src="currentTrack.al && currentTrack.al.picUrl | resizeImage(224)"
|
<img
|
||||||
@click="goToAlbum"
|
:src="currentTrack.al && currentTrack.al.picUrl | resizeImage(224)"
|
||||||
/>
|
@click="goToAlbum"
|
||||||
<div class="track-info" :title="audioSource">
|
/>
|
||||||
<div class="name" @click="goToList">
|
<div class="track-info" :title="audioSource">
|
||||||
{{ currentTrack.name }}
|
<div class="name" @click="goToList">
|
||||||
|
{{ currentTrack.name }}
|
||||||
|
</div>
|
||||||
|
<div class="artist">
|
||||||
|
<span
|
||||||
|
v-for="(ar, index) in currentTrack.ar"
|
||||||
|
:key="ar.id"
|
||||||
|
@click="goToArtist(ar.id)"
|
||||||
|
>
|
||||||
|
<span class="ar">{{ ar.name }}</span
|
||||||
|
><span v-if="index !== currentTrack.ar.length - 1">, </span>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="artist">
|
<div class="like-button">
|
||||||
<span
|
<button-icon
|
||||||
v-for="(ar, index) in currentTrack.ar"
|
@click.native="likeCurrentSong"
|
||||||
:key="ar.id"
|
:title="$t('player.like')"
|
||||||
@click="goToArtist(ar.id)"
|
|
||||||
>
|
>
|
||||||
<span class="ar">{{ ar.name }}</span
|
<svg-icon
|
||||||
><span v-if="index !== currentTrack.ar.length - 1">, </span>
|
icon-class="heart"
|
||||||
</span>
|
v-show="!liked.songs.includes(currentTrack.id)"
|
||||||
|
></svg-icon>
|
||||||
|
<svg-icon
|
||||||
|
icon-class="heart-solid"
|
||||||
|
v-show="liked.songs.includes(currentTrack.id)"
|
||||||
|
></svg-icon>
|
||||||
|
</button-icon>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="like-button">
|
<div class="blank"></div>
|
||||||
<button-icon
|
|
||||||
@click.native="likeCurrentSong"
|
|
||||||
:title="$t('player.like')"
|
|
||||||
>
|
|
||||||
<svg-icon
|
|
||||||
icon-class="heart"
|
|
||||||
v-show="!liked.songs.includes(currentTrack.id)"
|
|
||||||
></svg-icon>
|
|
||||||
<svg-icon
|
|
||||||
icon-class="heart-solid"
|
|
||||||
v-show="liked.songs.includes(currentTrack.id)"
|
|
||||||
></svg-icon>
|
|
||||||
</button-icon>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="middle-control-buttons">
|
<div class="middle-control-buttons">
|
||||||
<button-icon @click.native="previous" :title="$t('player.previous')"
|
<div class="blank"></div>
|
||||||
><svg-icon icon-class="previous"
|
<div class="container" @click.stop>
|
||||||
/></button-icon>
|
<button-icon @click.native="previous" :title="$t('player.previous')"
|
||||||
<button-icon
|
><svg-icon icon-class="previous"
|
||||||
class="play"
|
/></button-icon>
|
||||||
@click.native="play"
|
<button-icon
|
||||||
:title="$t(player.playing ? 'player.pause' : 'player.play')"
|
class="play"
|
||||||
>
|
@click.native="play"
|
||||||
<svg-icon :iconClass="player.playing ? 'pause' : 'play'"
|
:title="$t(player.playing ? 'player.pause' : 'player.play')"
|
||||||
/></button-icon>
|
>
|
||||||
<button-icon @click.native="next" :title="$t('player.next')"
|
<svg-icon :iconClass="player.playing ? 'pause' : 'play'"
|
||||||
><svg-icon icon-class="next"
|
/></button-icon>
|
||||||
/></button-icon>
|
<button-icon @click.native="next" :title="$t('player.next')"
|
||||||
|
><svg-icon icon-class="next"
|
||||||
|
/></button-icon>
|
||||||
|
</div>
|
||||||
|
<div class="blank"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="right-control-buttons">
|
<div class="right-control-buttons">
|
||||||
<button-icon
|
<div class="blank"></div>
|
||||||
@click.native="goToNextTracksPage"
|
<div class="container" @click.stop>
|
||||||
:title="$t('player.nextUp')"
|
<button-icon
|
||||||
:class="{ active: this.$route.name === 'next' }"
|
@click.native="goToNextTracksPage"
|
||||||
><svg-icon icon-class="list"
|
:title="$t('player.nextUp')"
|
||||||
/></button-icon>
|
:class="{ active: this.$route.name === 'next' }"
|
||||||
<button-icon
|
><svg-icon icon-class="list"
|
||||||
:title="
|
/></button-icon>
|
||||||
player.repeatMode === 'one'
|
<button-icon
|
||||||
? $t('player.repeatTrack')
|
:title="
|
||||||
: $t('player.repeat')
|
player.repeatMode === 'one'
|
||||||
"
|
? $t('player.repeatTrack')
|
||||||
@click.native="repeat"
|
: $t('player.repeat')
|
||||||
:class="{ active: player.repeatMode !== 'off' }"
|
"
|
||||||
>
|
@click.native="repeat"
|
||||||
<svg-icon icon-class="repeat" v-show="player.repeatMode !== 'one'" />
|
:class="{ active: player.repeatMode !== 'off' }"
|
||||||
<svg-icon
|
>
|
||||||
icon-class="repeat-1"
|
|
||||||
v-show="player.repeatMode === 'one'"
|
|
||||||
/>
|
|
||||||
</button-icon>
|
|
||||||
<button-icon
|
|
||||||
@click.native="shuffle"
|
|
||||||
:class="{ active: player.shuffle }"
|
|
||||||
:title="$t('player.shuffle')"
|
|
||||||
><svg-icon icon-class="shuffle"
|
|
||||||
/></button-icon>
|
|
||||||
<div class="volume-control">
|
|
||||||
<button-icon :title="$t('player.mute')" @click.native="player.mute">
|
|
||||||
<svg-icon icon-class="volume" v-show="volume > 0.5" />
|
|
||||||
<svg-icon icon-class="volume-mute" v-show="volume === 0" />
|
|
||||||
<svg-icon
|
<svg-icon
|
||||||
icon-class="volume-half"
|
icon-class="repeat"
|
||||||
v-show="volume <= 0.5 && volume !== 0"
|
v-show="player.repeatMode !== 'one'"
|
||||||
|
/>
|
||||||
|
<svg-icon
|
||||||
|
icon-class="repeat-1"
|
||||||
|
v-show="player.repeatMode === 'one'"
|
||||||
/>
|
/>
|
||||||
</button-icon>
|
</button-icon>
|
||||||
<div class="volume-bar">
|
<button-icon
|
||||||
<vue-slider
|
@click.native="shuffle"
|
||||||
v-model="volume"
|
:class="{ active: player.shuffle }"
|
||||||
:min="0"
|
:title="$t('player.shuffle')"
|
||||||
:max="1"
|
><svg-icon icon-class="shuffle"
|
||||||
:interval="0.01"
|
/></button-icon>
|
||||||
:drag-on-click="true"
|
<div class="volume-control">
|
||||||
:duration="0"
|
<button-icon :title="$t('player.mute')" @click.native="player.mute">
|
||||||
:tooltip="`none`"
|
<svg-icon icon-class="volume" v-show="volume > 0.5" />
|
||||||
:dotSize="12"
|
<svg-icon icon-class="volume-mute" v-show="volume === 0" />
|
||||||
></vue-slider>
|
<svg-icon
|
||||||
|
icon-class="volume-half"
|
||||||
|
v-show="volume <= 0.5 && volume !== 0"
|
||||||
|
/>
|
||||||
|
</button-icon>
|
||||||
|
<div class="volume-bar">
|
||||||
|
<vue-slider
|
||||||
|
v-model="volume"
|
||||||
|
:min="0"
|
||||||
|
:max="1"
|
||||||
|
:interval="0.01"
|
||||||
|
:drag-on-click="true"
|
||||||
|
:duration="0"
|
||||||
|
:tooltip="`none`"
|
||||||
|
:dotSize="12"
|
||||||
|
></vue-slider>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -124,7 +141,7 @@
|
||||||
class="lyrics-button"
|
class="lyrics-button"
|
||||||
title="Lyrics"
|
title="Lyrics"
|
||||||
style="margin-left: 12px"
|
style="margin-left: 12px"
|
||||||
@click.native="toggleLyrics"
|
@click.native.stop="toggleLyrics"
|
||||||
><svg-icon icon-class="arrow-up"
|
><svg-icon icon-class="arrow-up"
|
||||||
/></button-icon>
|
/></button-icon>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -205,10 +222,8 @@ export default {
|
||||||
},
|
},
|
||||||
shuffle() {
|
shuffle() {
|
||||||
this.player.shuffle = !this.player.shuffle;
|
this.player.shuffle = !this.player.shuffle;
|
||||||
console.log(this.player);
|
|
||||||
},
|
},
|
||||||
repeat() {
|
repeat() {
|
||||||
console.log(this.player.repeatMode);
|
|
||||||
if (this.player.repeatMode === "on") {
|
if (this.player.repeatMode === "on") {
|
||||||
this.player.repeatMode = "one";
|
this.player.repeatMode = "one";
|
||||||
} else if (this.player.repeatMode === "one") {
|
} else if (this.player.repeatMode === "one") {
|
||||||
|
|
@ -305,10 +320,9 @@ export default {
|
||||||
}
|
}
|
||||||
|
|
||||||
.controls {
|
.controls {
|
||||||
flex: 1;
|
display: grid;
|
||||||
display: flex;
|
grid-template-columns: repeat(3, 1fr);
|
||||||
justify-content: flex;
|
height: 100%;
|
||||||
align-items: center;
|
|
||||||
padding: {
|
padding: {
|
||||||
right: 10vw;
|
right: 10vw;
|
||||||
left: 10vw;
|
left: 10vw;
|
||||||
|
|
@ -321,8 +335,15 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.blank {
|
||||||
|
flex-grow: 1;
|
||||||
|
}
|
||||||
|
|
||||||
.playing {
|
.playing {
|
||||||
flex: 1;
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.playing .container {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
img {
|
img {
|
||||||
|
|
@ -373,6 +394,10 @@ export default {
|
||||||
}
|
}
|
||||||
|
|
||||||
.middle-control-buttons {
|
.middle-control-buttons {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.middle-control-buttons .container {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
|
@ -389,8 +414,12 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.right-control-buttons {
|
.right-control-buttons {
|
||||||
flex: 1;
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right-control-buttons .container {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue