* fix: goToList bug

* lyrics page title go to fix

* change
This commit is contained in:
memorydream 2021-10-28 22:02:58 +08:00 committed by qier222
parent 5566b2e344
commit 0442214555
No known key found for this signature in database
GPG Key ID: 9C85007ED905F14D
3 changed files with 48 additions and 20 deletions

View File

@ -30,16 +30,19 @@
@click="goToAlbum" @click="goToAlbum"
/> />
<div class="track-info" :title="audioSource"> <div class="track-info" :title="audioSource">
<div class="name" @click="goToList"> <div
:class="['name', { hasList: hasList() }]"
@click="hasList() && goToList()"
>
{{ currentTrack.name }} {{ currentTrack.name }}
</div> </div>
<div class="artist"> <div class="artist">
<span <span
v-for="(ar, index) in currentTrack.ar" v-for="(ar, index) in currentTrack.ar"
:key="ar.id" :key="ar.id"
@click="ar.id !== 0 && goToArtist(ar.id)" @click="ar.id && goToArtist(ar.id)"
> >
<span :class="ar.id !== 0 ? 'ar' : ''"> {{ ar.name }} </span <span :class="{ ar: ar.id }"> {{ ar.name }} </span
><span v-if="index !== currentTrack.ar.length - 1">, </span> ><span v-if="index !== currentTrack.ar.length - 1">, </span>
</span> </span>
</div> </div>
@ -173,6 +176,7 @@ import '@/assets/css/slider.css';
import ButtonIcon from '@/components/ButtonIcon.vue'; import ButtonIcon from '@/components/ButtonIcon.vue';
import VueSlider from 'vue-slider-component'; import VueSlider from 'vue-slider-component';
import { goToListSource, hasListSource } from '@/utils/playList';
export default { export default {
name: 'Player', name: 'Player',
@ -217,22 +221,11 @@ export default {
let sec = (~~(value % 60)).toString().padStart(2, '0'); let sec = (~~(value % 60)).toString().padStart(2, '0');
return `${min}:${sec}`; return `${min}:${sec}`;
}, },
hasList() {
return hasListSource();
},
goToList() { goToList() {
if (this.player.playlistSource.id === this.data.likedSongPlaylistID) { goToListSource();
this.$router.push({ path: '/library/liked-songs' });
} else if (this.player.playlistSource.type === 'url') {
this.$router.push({ path: this.player.playlistSource.id });
} else if (this.player.playlistSource.type === 'cloudDisk') {
this.$router.push({ path: '/library' });
} else {
this.$router.push({
path:
'/' +
this.player.playlistSource.type +
'/' +
this.player.playlistSource.id,
});
}
}, },
goToAlbum() { goToAlbum() {
if (this.player.currentTrack.al.id === 0) return; if (this.player.currentTrack.al.id === 0) return;
@ -319,12 +312,14 @@ export default {
opacity: 0.88; opacity: 0.88;
color: var(--color-text); color: var(--color-text);
margin-bottom: 4px; margin-bottom: 4px;
cursor: pointer;
display: -webkit-box; display: -webkit-box;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
-webkit-line-clamp: 1; -webkit-line-clamp: 1;
overflow: hidden; overflow: hidden;
word-break: break-all; word-break: break-all;
}
.hasList {
cursor: pointer;
&:hover { &:hover {
text-decoration: underline; text-decoration: underline;
} }

22
src/utils/playList.js Normal file
View File

@ -0,0 +1,22 @@
import router from '../router';
import state from '../store/state';
export function hasListSource() {
return !state.player.isPersonalFM && state.player.playlistSource.id !== 0;
}
export function goToListSource() {
router.push({ path: getListSourcePath() });
}
export function getListSourcePath() {
if (state.player.playlistSource.id === state.data.likedSongPlaylistID) {
return '/library/liked-songs';
} else if (state.player.playlistSource.type === 'url') {
return state.player.playlistSource.id;
} else if (state.player.playlistSource.type === 'cloudDisk') {
return '/library';
} else {
return `/${state.player.playlistSource.type}/${state.player.playlistSource.id}`;
}
}

View File

@ -46,10 +46,14 @@
<div class="track-info"> <div class="track-info">
<div class="title" :title="currentTrack.name"> <div class="title" :title="currentTrack.name">
<router-link <router-link
:to="`/${player.playlistSource.type}/${player.playlistSource.id}`" v-if="hasList()"
:to="`${getListPath()}`"
@click.native="toggleLyrics" @click.native="toggleLyrics"
>{{ currentTrack.name }} >{{ currentTrack.name }}
</router-link> </router-link>
<span v-else>
{{ currentTrack.name }}
</span>
</div> </div>
<div class="subtitle"> <div class="subtitle">
<router-link <router-link
@ -209,6 +213,7 @@ import { lyricParser } from '@/utils/lyrics';
import ButtonIcon from '@/components/ButtonIcon.vue'; import ButtonIcon from '@/components/ButtonIcon.vue';
import * as Vibrant from 'node-vibrant'; import * as Vibrant from 'node-vibrant';
import Color from 'color'; import Color from 'color';
import { hasListSource, getListSourcePath } from '@/utils/playList';
export default { export default {
name: 'Lyrics', name: 'Lyrics',
@ -385,6 +390,12 @@ export default {
this.background = `linear-gradient(to top left, ${color}, ${color2})`; this.background = `linear-gradient(to top left, ${color}, ${color2})`;
}); });
}, },
hasList() {
return hasListSource();
},
getListPath() {
return getListSourcePath();
},
}, },
}; };
</script> </script>