mirror of
https://github.com/qier222/YesPlayMusic.git
synced 2024-11-22 10:13:02 +08:00
feat: click blank space in player jump to the lyrics page #158
This commit is contained in:
qier222
parent
86452f0420
commit
160737e736
|
|
@ -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,104 +21,117 @@
|
|||
</div>
|
||||
<div class="controls">
|
||||
<div class="playing">
|
||||
<img
|
||||
:src="currentTrack.al && currentTrack.al.picUrl | resizeImage(224)"
|
||||
@click="goToAlbum"
|
||||
/>
|
||||
<div class="track-info" :title="audioSource">
|
||||
<div class="name" @click="goToList">
|
||||
{{ currentTrack.name }}
|
||||
<div class="container" @click.stop>
|
||||
<img
|
||||
:src="currentTrack.al && currentTrack.al.picUrl | resizeImage(224)"
|
||||
@click="goToAlbum"
|
||||
/>
|
||||
<div class="track-info" :title="audioSource">
|
||||
<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 class="artist">
|
||||
<span
|
||||
v-for="(ar, index) in currentTrack.ar"
|
||||
:key="ar.id"
|
||||
@click="goToArtist(ar.id)"
|
||||
<div class="like-button">
|
||||
<button-icon
|
||||
@click.native="likeCurrentSong"
|
||||
:title="$t('player.like')"
|
||||
>
|
||||
<span class="ar">{{ ar.name }}</span
|
||||
><span v-if="index !== currentTrack.ar.length - 1">, </span>
|
||||
</span>
|
||||
<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 class="like-button">
|
||||
<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 class="blank"></div>
|
||||
</div>
|
||||
<div class="middle-control-buttons">
|
||||
<button-icon @click.native="previous" :title="$t('player.previous')"
|
||||
><svg-icon icon-class="previous"
|
||||
/></button-icon>
|
||||
<button-icon
|
||||
class="play"
|
||||
@click.native="play"
|
||||
:title="$t(player.playing ? 'player.pause' : 'player.play')"
|
||||
>
|
||||
<svg-icon :iconClass="player.playing ? 'pause' : 'play'"
|
||||
/></button-icon>
|
||||
<button-icon @click.native="next" :title="$t('player.next')"
|
||||
><svg-icon icon-class="next"
|
||||
/></button-icon>
|
||||
<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>
|
||||
<button-icon
|
||||
class="play"
|
||||
@click.native="play"
|
||||
:title="$t(player.playing ? 'player.pause' : 'player.play')"
|
||||
>
|
||||
<svg-icon :iconClass="player.playing ? 'pause' : 'play'"
|
||||
/></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 class="right-control-buttons">
|
||||
<button-icon
|
||||
@click.native="goToNextTracksPage"
|
||||
:title="$t('player.nextUp')"
|
||||
:class="{ active: this.$route.name === 'next' }"
|
||||
><svg-icon icon-class="list"
|
||||
/></button-icon>
|
||||
<button-icon
|
||||
:title="
|
||||
player.repeatMode === 'one'
|
||||
? $t('player.repeatTrack')
|
||||
: $t('player.repeat')
|
||||
"
|
||||
@click.native="repeat"
|
||||
:class="{ active: player.repeatMode !== 'off' }"
|
||||
>
|
||||
<svg-icon icon-class="repeat" v-show="player.repeatMode !== 'one'" />
|
||||
<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" />
|
||||
<div class="blank"></div>
|
||||
<div class="container" @click.stop>
|
||||
<button-icon
|
||||
@click.native="goToNextTracksPage"
|
||||
:title="$t('player.nextUp')"
|
||||
:class="{ active: this.$route.name === 'next' }"
|
||||
><svg-icon icon-class="list"
|
||||
/></button-icon>
|
||||
<button-icon
|
||||
:title="
|
||||
player.repeatMode === 'one'
|
||||
? $t('player.repeatTrack')
|
||||
: $t('player.repeat')
|
||||
"
|
||||
@click.native="repeat"
|
||||
:class="{ active: player.repeatMode !== 'off' }"
|
||||
>
|
||||
<svg-icon
|
||||
icon-class="volume-half"
|
||||
v-show="volume <= 0.5 && volume !== 0"
|
||||
icon-class="repeat"
|
||||
v-show="player.repeatMode !== 'one'"
|
||||
/>
|
||||
<svg-icon
|
||||
icon-class="repeat-1"
|
||||
v-show="player.repeatMode === 'one'"
|
||||
/>
|
||||
</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>
|
||||
<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
|
||||
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>
|
||||
|
|
@ -124,7 +141,7 @@
|
|||
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;
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user