mirror of
https://github.com/qier222/YesPlayMusic.git
synced 2024-12-01 13:03:42 +08:00
* fix: goToList bug * lyrics page title go to fix * change
This commit is contained in:
parent
5566b2e344
commit
0442214555
|
@ -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
22
src/utils/playList.js
Normal 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}`;
|
||||||
|
}
|
||||||
|
}
|
|
@ -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>
|
||||||
|
|
Loading…
Reference in New Issue
Block a user