mirror of
https://github.com/GiriNeko/YesPlayMusic.git
synced 2025-12-18 06:07:48 +00:00
refactor: move all states+actions inside player.vue to Player.js
This commit is contained in:
qier222
parent
5355caa4e4
commit
fab0227ed3
6 changed files with 187 additions and 205 deletions
|
|
@ -2,10 +2,10 @@
|
|||
<transition name="slide-up">
|
||||
<div class="lyrics-page" :class="{ 'no-lyric': noLyric }">
|
||||
<div
|
||||
v-if="this.$store.state.settings.showLyricsDynamicBackground"
|
||||
v-if="settings.showLyricsDynamicBackground"
|
||||
class="dynamic-background"
|
||||
>
|
||||
<div v-show="this.$store.state.showLyrics">
|
||||
<div v-show="showLyrics">
|
||||
<div
|
||||
class="top-right"
|
||||
:style="{ backgroundImage: `url(${imageUrl})` }"
|
||||
|
|
@ -55,11 +55,11 @@
|
|||
<div class="buttons">
|
||||
<button-icon
|
||||
:title="$t('player.like')"
|
||||
@click.native="playerRef.likeCurrentSong"
|
||||
@click.native="likeASong(player.currentTrack.id)"
|
||||
>
|
||||
<svg-icon
|
||||
:icon-class="
|
||||
playerRef.isCurrentTrackLiked ? 'heart-solid' : 'heart'
|
||||
player.isCurrentTrackLiked ? 'heart-solid' : 'heart'
|
||||
"
|
||||
/>
|
||||
</button-icon>
|
||||
|
|
@ -69,80 +69,77 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="progress-bar">
|
||||
<span>{{ formatTrackTime(progress) || "0:00" }}</span>
|
||||
<span>{{ formatTrackTime(player.progress) || "0:00" }}</span>
|
||||
<div class="slider">
|
||||
<vue-slider
|
||||
v-model="progress"
|
||||
v-model="player.progress"
|
||||
:min="0"
|
||||
:max="progressMax"
|
||||
:max="player.currentTrackDuration"
|
||||
:interval="1"
|
||||
:drag-on-click="true"
|
||||
:duration="0"
|
||||
:dotSize="12"
|
||||
:dot-size="12"
|
||||
:height="2"
|
||||
:tooltipFormatter="formatTrackTime"
|
||||
@drag-end="setSeek"
|
||||
ref="progress"
|
||||
:tooltip-formatter="formatTrackTime"
|
||||
@drag-end="player.seek"
|
||||
></vue-slider>
|
||||
</div>
|
||||
<span>{{ formatTrackTime(progressMax) }}</span>
|
||||
<span>{{ formatTrackTime(player.currentTrackDuration) }}</span>
|
||||
</div>
|
||||
<div class="media-controls">
|
||||
<button-icon
|
||||
v-show="!player.isPersonalFM"
|
||||
@click.native="playerRef.repeat"
|
||||
:title="
|
||||
player.repeatMode === 'one'
|
||||
? $t('player.repeatTrack')
|
||||
: $t('player.repeat')
|
||||
"
|
||||
:class="{ active: player.repeatMode !== 'off' }"
|
||||
@click.native="player.switchRepeatMode"
|
||||
>
|
||||
<svg-icon
|
||||
icon-class="repeat"
|
||||
v-show="player.repeatMode !== 'one'"
|
||||
icon-class="repeat"
|
||||
/>
|
||||
<svg-icon
|
||||
icon-class="repeat-1"
|
||||
v-show="player.repeatMode === 'one'"
|
||||
icon-class="repeat-1"
|
||||
/>
|
||||
</button-icon>
|
||||
<div class="middle">
|
||||
<button-icon
|
||||
v-show="!player.isPersonalFM"
|
||||
@click.native="playerRef.previous"
|
||||
:title="$t('player.previous')"
|
||||
@click.native="player.playPrevTrack"
|
||||
>
|
||||
<svg-icon icon-class="previous" />
|
||||
</button-icon>
|
||||
<button-icon
|
||||
v-show="player.isPersonalFM"
|
||||
@click.native="moveToFMTrash"
|
||||
title="不喜欢"
|
||||
@click.native="player.moveToFMTrash"
|
||||
>
|
||||
<svg-icon icon-class="thumbs-down" />
|
||||
</button-icon>
|
||||
<button-icon
|
||||
id="play"
|
||||
@click.native="playerRef.play"
|
||||
:title="$t(player.playing ? 'player.pause' : 'player.play')"
|
||||
@click.native="player.playOrPause"
|
||||
>
|
||||
<svg-icon
|
||||
:icon-class="playerRef.playing ? 'pause' : 'play'"
|
||||
/>
|
||||
<svg-icon :icon-class="player.playing ? 'pause' : 'play'" />
|
||||
</button-icon>
|
||||
<button-icon
|
||||
@click.native="playerRef.next"
|
||||
:title="$t('player.next')"
|
||||
@click.native="player.playNextTrack"
|
||||
>
|
||||
<svg-icon icon-class="next" />
|
||||
</button-icon>
|
||||
</div>
|
||||
<button-icon
|
||||
v-show="!player.isPersonalFM"
|
||||
@click.native="playerRef.shuffle"
|
||||
:title="$t('player.shuffle')"
|
||||
:class="{ active: player.shuffle }"
|
||||
@click.native="player.switchShuffle"
|
||||
>
|
||||
<svg-icon icon-class="shuffle" />
|
||||
</button-icon>
|
||||
|
|
@ -153,21 +150,22 @@
|
|||
<div class="right-side">
|
||||
<transition name="slide-fade">
|
||||
<div
|
||||
v-show="!noLyric"
|
||||
ref="lyricsContainer"
|
||||
class="lyrics-container"
|
||||
:style="lyricFontSize"
|
||||
ref="lyricsContainer"
|
||||
v-show="!noLyric"
|
||||
>
|
||||
<div class="line" id="line-1"></div>
|
||||
<div id="line-1" class="line"></div>
|
||||
<div
|
||||
v-for="(line, index) in lyricWithTranslation"
|
||||
:id="`line${index}`"
|
||||
:key="index"
|
||||
class="line"
|
||||
:class="{
|
||||
highlight: highlightLyricIndex === index,
|
||||
}"
|
||||
v-for="(line, index) in lyricWithTranslation"
|
||||
:key="index"
|
||||
:id="`line${index}`"
|
||||
@click="clickLyricLine(line.time)"
|
||||
@dblclick="clickLyricLine(line.time, true)"
|
||||
><span v-html="formatLine(line)"></span
|
||||
></div>
|
||||
</div>
|
||||
|
|
@ -186,7 +184,7 @@
|
|||
// The lyrics page of Apple Music is so gorgeous, so I copy the design.
|
||||
// Some of the codes are from https://github.com/sl1673495/vue-netease-music
|
||||
|
||||
import { mapState, mapMutations } from "vuex";
|
||||
import { mapState, mapMutations, mapActions } from "vuex";
|
||||
import VueSlider from "vue-slider-component";
|
||||
import { formatTrackTime } from "@/utils/common";
|
||||
import { getLyric } from "@/api/track";
|
||||
|
|
@ -209,24 +207,13 @@ export default {
|
|||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState(["player"]),
|
||||
...mapState(["player", "settings", "showLyrics"]),
|
||||
currentTrack() {
|
||||
return this.player.currentTrack;
|
||||
},
|
||||
imageUrl() {
|
||||
return this.player.currentTrack?.al?.picUrl + "?param=1024y1024";
|
||||
},
|
||||
progress: {
|
||||
get() {
|
||||
return this.playerRef.progress;
|
||||
},
|
||||
set(value) {
|
||||
this.playerRef.setProgress(value);
|
||||
},
|
||||
},
|
||||
progressMax() {
|
||||
return this.playerRef.progressMax;
|
||||
},
|
||||
lyricWithTranslation() {
|
||||
let ret = [];
|
||||
// 空内容的去除
|
||||
|
|
@ -266,9 +253,6 @@ export default {
|
|||
playerRef() {
|
||||
return this.$parent.$refs.player ? this.$parent.$refs.player : {};
|
||||
},
|
||||
showLyrics() {
|
||||
return this.$store.state.showLyrics;
|
||||
},
|
||||
noLyric() {
|
||||
return this.lyric.length == 0;
|
||||
},
|
||||
|
|
@ -301,6 +285,7 @@ export default {
|
|||
},
|
||||
methods: {
|
||||
...mapMutations(["toggleLyrics"]),
|
||||
...mapActions(["likeASong"]),
|
||||
getLyric() {
|
||||
if (!this.currentTrack.id) return;
|
||||
return getLyric(this.currentTrack.id).then((data) => {
|
||||
|
|
@ -319,18 +304,13 @@ export default {
|
|||
formatTrackTime(value) {
|
||||
return formatTrackTime(value);
|
||||
},
|
||||
setSeek() {
|
||||
let value = this.$refs.progress.getValue();
|
||||
this.playerRef.setProgress(value);
|
||||
this.playerRef.player.seek(value);
|
||||
},
|
||||
seek(value) {
|
||||
this.playerRef.setProgress(value);
|
||||
this.playerRef.player.seek(value);
|
||||
},
|
||||
clickLyricLine(value) {
|
||||
clickLyricLine(value, startPlay = false) {
|
||||
// TODO: 双击选择还会选中文字，考虑搞个右键菜单复制歌词
|
||||
if (window.getSelection().toString().length === 0) {
|
||||
this.seek(value);
|
||||
this.player.seek(value);
|
||||
}
|
||||
if (startPlay === true) {
|
||||
this.player.play();
|
||||
}
|
||||
},
|
||||
setLyricsInterval() {
|
||||
|
|
@ -476,7 +456,6 @@ export default {
|
|||
}
|
||||
|
||||
.svg-icon {
|
||||
opacity: 0.58;
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue