|
|
@ -39,23 +39,23 @@
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="subtitle">
|
|
|
|
<div class="subtitle">
|
|
|
|
<router-link
|
|
|
|
<router-link
|
|
|
|
:to="`/artist/${currentTrack.ar[0].id}`"
|
|
|
|
:to="`/artist/${artist.id}`"
|
|
|
|
@click.native="toggleLyrics"
|
|
|
|
@click.native="toggleLyrics"
|
|
|
|
>{{ currentTrack.ar[0].name }}
|
|
|
|
>{{ artist.name }}
|
|
|
|
</router-link>
|
|
|
|
</router-link>
|
|
|
|
-
|
|
|
|
-
|
|
|
|
<router-link
|
|
|
|
<router-link
|
|
|
|
:to="`/album/${currentTrack.al.id}`"
|
|
|
|
:to="`/album/${album.id}`"
|
|
|
|
|
|
|
|
:title="album.name"
|
|
|
|
@click.native="toggleLyrics"
|
|
|
|
@click.native="toggleLyrics"
|
|
|
|
:title="currentTrack.al.name"
|
|
|
|
>{{ album.name }}
|
|
|
|
>{{ currentTrack.al.name }}
|
|
|
|
|
|
|
|
</router-link>
|
|
|
|
</router-link>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="buttons">
|
|
|
|
<div class="buttons">
|
|
|
|
<button-icon
|
|
|
|
<button-icon
|
|
|
|
@click.native="playerRef.likeCurrentSong"
|
|
|
|
|
|
|
|
:title="$t('player.like')"
|
|
|
|
:title="$t('player.like')"
|
|
|
|
|
|
|
|
@click.native="playerRef.likeCurrentSong"
|
|
|
|
>
|
|
|
|
>
|
|
|
|
<svg-icon
|
|
|
|
<svg-icon
|
|
|
|
:icon-class="
|
|
|
|
:icon-class="
|
|
|
@ -214,18 +214,18 @@ export default {
|
|
|
|
return this.player.currentTrack;
|
|
|
|
return this.player.currentTrack;
|
|
|
|
},
|
|
|
|
},
|
|
|
|
imageUrl() {
|
|
|
|
imageUrl() {
|
|
|
|
return this.player.currentTrack.al.picUrl + "?param=1024y1024";
|
|
|
|
return this.player.currentTrack?.al?.picUrl + "?param=1024y1024";
|
|
|
|
},
|
|
|
|
},
|
|
|
|
progress: {
|
|
|
|
progress: {
|
|
|
|
get() {
|
|
|
|
get() {
|
|
|
|
return this.$parent.$refs.player.progress;
|
|
|
|
return this.playerRef.progress;
|
|
|
|
},
|
|
|
|
},
|
|
|
|
set(value) {
|
|
|
|
set(value) {
|
|
|
|
this.$parent.$refs.player.setProgress(value);
|
|
|
|
this.playerRef.setProgress(value);
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
progressMax() {
|
|
|
|
progressMax() {
|
|
|
|
return this.$parent.$refs.player.progressMax;
|
|
|
|
return this.playerRef.progressMax;
|
|
|
|
},
|
|
|
|
},
|
|
|
|
lyricWithTranslation() {
|
|
|
|
lyricWithTranslation() {
|
|
|
|
let ret = [];
|
|
|
|
let ret = [];
|
|
|
@ -264,7 +264,7 @@ export default {
|
|
|
|
};
|
|
|
|
};
|
|
|
|
},
|
|
|
|
},
|
|
|
|
playerRef() {
|
|
|
|
playerRef() {
|
|
|
|
return this.$parent.$refs.player;
|
|
|
|
return this.$parent.$refs.player ? this.$parent.$refs.player : {};
|
|
|
|
},
|
|
|
|
},
|
|
|
|
showLyrics() {
|
|
|
|
showLyrics() {
|
|
|
|
return this.$store.state.showLyrics;
|
|
|
|
return this.$store.state.showLyrics;
|
|
|
@ -272,6 +272,14 @@ export default {
|
|
|
|
noLyric() {
|
|
|
|
noLyric() {
|
|
|
|
return this.lyric.length == 0;
|
|
|
|
return this.lyric.length == 0;
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
artist() {
|
|
|
|
|
|
|
|
// console.log(this.currentTrack);
|
|
|
|
|
|
|
|
// return this.currentTrack?.ar[0] || { id: 0, name: "unknown" };
|
|
|
|
|
|
|
|
return { id: 0, name: "unknown" };
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
album() {
|
|
|
|
|
|
|
|
return { id: 0, name: "unknown" };
|
|
|
|
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
created() {
|
|
|
|
created() {
|
|
|
|
this.getLyric();
|
|
|
|
this.getLyric();
|
|
|
@ -282,6 +290,7 @@ export default {
|
|
|
|
methods: {
|
|
|
|
methods: {
|
|
|
|
...mapMutations(["toggleLyrics"]),
|
|
|
|
...mapMutations(["toggleLyrics"]),
|
|
|
|
getLyric() {
|
|
|
|
getLyric() {
|
|
|
|
|
|
|
|
if (!this.currentTrack.id) return;
|
|
|
|
return getLyric(this.currentTrack.id).then((data) => {
|
|
|
|
return getLyric(this.currentTrack.id).then((data) => {
|
|
|
|
if (!data?.lrc?.lyric) {
|
|
|
|
if (!data?.lrc?.lyric) {
|
|
|
|
this.lyric = [];
|
|
|
|
this.lyric = [];
|
|
|
@ -300,12 +309,12 @@ export default {
|
|
|
|
},
|
|
|
|
},
|
|
|
|
setSeek() {
|
|
|
|
setSeek() {
|
|
|
|
let value = this.$refs.progress.getValue();
|
|
|
|
let value = this.$refs.progress.getValue();
|
|
|
|
this.$parent.$refs.player.setProgress(value);
|
|
|
|
this.playerRef.setProgress(value);
|
|
|
|
this.$parent.$refs.player.player.seek(value);
|
|
|
|
this.playerRef.player.seek(value);
|
|
|
|
},
|
|
|
|
},
|
|
|
|
seek(value) {
|
|
|
|
seek(value) {
|
|
|
|
this.$parent.$refs.player.setProgress(value);
|
|
|
|
this.playerRef.setProgress(value);
|
|
|
|
this.$parent.$refs.player.player.seek(value);
|
|
|
|
this.playerRef.player.seek(value);
|
|
|
|
},
|
|
|
|
},
|
|
|
|
clickLyricLine(value) {
|
|
|
|
clickLyricLine(value) {
|
|
|
|
if (window.getSelection().toString().length === 0) {
|
|
|
|
if (window.getSelection().toString().length === 0) {
|
|
|
@ -336,9 +345,9 @@ export default {
|
|
|
|
const showLyricsTranslation = this.$store.state.settings
|
|
|
|
const showLyricsTranslation = this.$store.state.settings
|
|
|
|
.showLyricsTranslation;
|
|
|
|
.showLyricsTranslation;
|
|
|
|
if (showLyricsTranslation && line.contents[1]) {
|
|
|
|
if (showLyricsTranslation && line.contents[1]) {
|
|
|
|
return `<span>${line.contents[0]}<br/>${line.contents[1]}</span>`;
|
|
|
|
return `<span>${line?.contents[0]}<br/>${line.contents[1]}</span>`;
|
|
|
|
} else {
|
|
|
|
} else {
|
|
|
|
return `<span>${line.contents[0]}</span>`;
|
|
|
|
return `<span>${line?.contents[0]}</span>`;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
|
|
|
moveToFMTrash() {
|
|
|
|
moveToFMTrash() {
|
|
|
|