mirror of
https://github.com/GiriNeko/YesPlayMusic.git
synced 2025-12-17 13:48:02 +00:00
chore: format codes
This commit is contained in:
qier222
parent
6922c716e2
commit
9351f6bc89
73 changed files with 2321 additions and 2321 deletions
|
|
@ -10,7 +10,7 @@
|
|||
|
||||
<script>
|
||||
export default {
|
||||
name: "ArtistInLine",
|
||||
name: 'ArtistInLine',
|
||||
props: {
|
||||
artists: {
|
||||
type: Array,
|
||||
|
|
@ -18,20 +18,20 @@ export default {
|
|||
},
|
||||
exclude: {
|
||||
type: String,
|
||||
default: "",
|
||||
default: '',
|
||||
},
|
||||
prefix: {
|
||||
type: String,
|
||||
default: "",
|
||||
default: '',
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
filteredArtists() {
|
||||
return this.artists.filter((a) => a.name !== this.exclude);
|
||||
return this.artists.filter(a => a.name !== this.exclude);
|
||||
},
|
||||
computedPrefix() {
|
||||
if (this.filteredArtists.length !== 0) return this.prefix;
|
||||
else return "";
|
||||
else return '';
|
||||
},
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
|
||||
<script>
|
||||
export default {
|
||||
name: "ButtonIcon",
|
||||
name: 'ButtonIcon',
|
||||
};
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<button :style="buttonStyle" :class="color">
|
||||
<svg-icon
|
||||
v-if="iconClass !== null"
|
||||
:iconClass="iconClass"
|
||||
:icon-class="iconClass"
|
||||
:style="{ marginRight: iconButton ? '0px' : '8px' }"
|
||||
/>
|
||||
<slot></slot>
|
||||
|
|
@ -11,7 +11,7 @@
|
|||
|
||||
<script>
|
||||
export default {
|
||||
name: "ButtonTwoTone",
|
||||
name: 'ButtonTwoTone',
|
||||
props: {
|
||||
iconClass: {
|
||||
type: String,
|
||||
|
|
@ -27,32 +27,32 @@ export default {
|
|||
},
|
||||
color: {
|
||||
type: String,
|
||||
default: "blue",
|
||||
default: 'blue',
|
||||
},
|
||||
backgroundColor: {
|
||||
type: String,
|
||||
default: "",
|
||||
default: '',
|
||||
},
|
||||
textColor: {
|
||||
type: String,
|
||||
default: "",
|
||||
default: '',
|
||||
},
|
||||
shape: {
|
||||
type: String,
|
||||
default: "square",
|
||||
default: 'square',
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
buttonStyle() {
|
||||
let styles = {
|
||||
borderRadius: this.shape === "round" ? "50%" : "8px",
|
||||
borderRadius: this.shape === 'round' ? '50%' : '8px',
|
||||
padding: `8px ${this.horizontalPadding}px`,
|
||||
// height: "38px",
|
||||
width: this.shape === "round" ? "38px" : "auto",
|
||||
width: this.shape === 'round' ? '38px' : 'auto',
|
||||
};
|
||||
if (this.backgroundColor !== "")
|
||||
if (this.backgroundColor !== '')
|
||||
styles.backgroundColor = this.backgroundColor;
|
||||
if (this.textColor !== "") styles.color = this.textColor;
|
||||
if (this.textColor !== '') styles.color = this.textColor;
|
||||
return styles;
|
||||
},
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
<template>
|
||||
<div class="context-menu" ref="contextMenu">
|
||||
<div ref="contextMenu" class="context-menu">
|
||||
<div
|
||||
v-if="showMenu"
|
||||
ref="menu"
|
||||
class="menu"
|
||||
tabindex="-1"
|
||||
ref="menu"
|
||||
v-if="showMenu"
|
||||
@blur="closeMenu"
|
||||
:style="{ top: top, left: left }"
|
||||
@blur="closeMenu"
|
||||
@click="closeMenu"
|
||||
>
|
||||
<slot></slot>
|
||||
|
|
@ -16,12 +16,12 @@
|
|||
|
||||
<script>
|
||||
export default {
|
||||
name: "ContextMenu",
|
||||
name: 'ContextMenu',
|
||||
data() {
|
||||
return {
|
||||
showMenu: false,
|
||||
top: "0px",
|
||||
left: "0px",
|
||||
top: '0px',
|
||||
left: '0px',
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
|
|
@ -31,8 +31,8 @@ export default {
|
|||
let largestWidth = window.innerWidth - this.$refs.menu.offsetWidth - 25;
|
||||
if (top > largestHeight) top = largestHeight;
|
||||
if (left > largestWidth) left = largestWidth;
|
||||
this.top = top + "px";
|
||||
this.left = left + "px";
|
||||
this.top = top + 'px';
|
||||
this.left = left + 'px';
|
||||
},
|
||||
|
||||
closeMenu() {
|
||||
|
|
@ -82,7 +82,7 @@ export default {
|
|||
}
|
||||
}
|
||||
|
||||
[data-theme="dark"] {
|
||||
[data-theme='dark'] {
|
||||
.menu {
|
||||
background: rgba(36, 36, 36, 0.78);
|
||||
backdrop-filter: blur(16px) contrast(120%);
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
<template>
|
||||
<div
|
||||
class="cover"
|
||||
:class="{ 'cover-hover': coverHover }"
|
||||
@mouseover="focus = true"
|
||||
@mouseleave="focus = false"
|
||||
:class="{ 'cover-hover': coverHover }"
|
||||
@click="clickCoverToPlay ? play() : goTo()"
|
||||
>
|
||||
<div class="cover-container">
|
||||
|
|
@ -11,16 +11,16 @@
|
|||
<button
|
||||
v-show="focus"
|
||||
class="play-button"
|
||||
@click.stop="play()"
|
||||
:style="playButtonStyles"
|
||||
@click.stop="play()"
|
||||
><svg-icon icon-class="play" />
|
||||
</button>
|
||||
</div>
|
||||
<img :src="imageUrl" :style="imageStyles" />
|
||||
<transition name="fade" v-if="coverHover || alwaysShowShadow">
|
||||
<transition v-if="coverHover || alwaysShowShadow" name="fade">
|
||||
<div
|
||||
class="shadow"
|
||||
v-show="focus || alwaysShowShadow"
|
||||
class="shadow"
|
||||
:style="shadowStyles"
|
||||
></div>
|
||||
</transition>
|
||||
|
|
@ -52,22 +52,22 @@ export default {
|
|||
imageStyles() {
|
||||
let styles = {};
|
||||
if (this.fixedSize !== 0) {
|
||||
styles.width = this.fixedSize + "px";
|
||||
styles.height = this.fixedSize + "px";
|
||||
styles.width = this.fixedSize + 'px';
|
||||
styles.height = this.fixedSize + 'px';
|
||||
}
|
||||
if (this.type === "artist") styles.borderRadius = "50%";
|
||||
if (this.type === 'artist') styles.borderRadius = '50%';
|
||||
return styles;
|
||||
},
|
||||
playButtonStyles() {
|
||||
let styles = {};
|
||||
styles.width = this.playButtonSize + "%";
|
||||
styles.height = this.playButtonSize + "%";
|
||||
styles.width = this.playButtonSize + '%';
|
||||
styles.height = this.playButtonSize + '%';
|
||||
return styles;
|
||||
},
|
||||
shadowStyles() {
|
||||
let styles = {};
|
||||
styles.backgroundImage = `url(${this.imageUrl})`;
|
||||
if (this.type === "artist") styles.borderRadius = "50%";
|
||||
if (this.type === 'artist') styles.borderRadius = '50%';
|
||||
return styles;
|
||||
},
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,19 +1,19 @@
|
|||
<template>
|
||||
<div class="cover-row" :style="rowStyles">
|
||||
<div
|
||||
class="item"
|
||||
v-for="item in items"
|
||||
:key="item.id"
|
||||
class="item"
|
||||
:class="{ artist: type === 'artist' }"
|
||||
>
|
||||
<Cover
|
||||
:imageUrl="getImageUrl(item)"
|
||||
:type="type"
|
||||
:id="item.id"
|
||||
:playButtonSize="type === 'artist' ? 26 : playButtonSize"
|
||||
:image-url="getImageUrl(item)"
|
||||
:type="type"
|
||||
:play-button-size="type === 'artist' ? 26 : playButtonSize"
|
||||
/>
|
||||
<div class="text">
|
||||
<div class="info" v-if="showPlayCount">
|
||||
<div v-if="showPlayCount" class="info">
|
||||
<span class="play-count"
|
||||
><svg-icon icon-class="play" />{{
|
||||
item.playCount | formatPlayCount
|
||||
|
|
@ -21,15 +21,15 @@
|
|||
</span>
|
||||
</div>
|
||||
<div class="title" :style="{ fontSize: subTextFontSize }">
|
||||
<span class="explicit-symbol" v-if="isExplicit(item)"
|
||||
<span v-if="isExplicit(item)" class="explicit-symbol"
|
||||
><ExplicitSymbol
|
||||
/></span>
|
||||
<span class="lock-icon" v-if="isPrivacy(item)">
|
||||
<span v-if="isPrivacy(item)" class="lock-icon">
|
||||
<svg-icon icon-class="lock"
|
||||
/></span>
|
||||
<router-link :to="getTitleLink(item)">{{ item.name }}</router-link>
|
||||
</div>
|
||||
<div class="info" v-if="type !== 'artist' && subText !== 'none'">
|
||||
<div v-if="type !== 'artist' && subText !== 'none'" class="info">
|
||||
<span v-html="getSubText(item)"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -38,11 +38,11 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import Cover from "@/components/Cover.vue";
|
||||
import ExplicitSymbol from "@/components/ExplicitSymbol.vue";
|
||||
import Cover from '@/components/Cover.vue';
|
||||
import ExplicitSymbol from '@/components/ExplicitSymbol.vue';
|
||||
|
||||
export default {
|
||||
name: "CoverRow",
|
||||
name: 'CoverRow',
|
||||
components: {
|
||||
Cover,
|
||||
ExplicitSymbol,
|
||||
|
|
@ -50,64 +50,64 @@ export default {
|
|||
props: {
|
||||
items: { type: Array, required: true },
|
||||
type: { type: String, required: true },
|
||||
subText: { type: String, default: "null" },
|
||||
subTextFontSize: { type: String, default: "16px" },
|
||||
subText: { type: String, default: 'null' },
|
||||
subTextFontSize: { type: String, default: '16px' },
|
||||
showPlayCount: { type: Boolean, default: false },
|
||||
columnNumber: { type: Number, default: 5 },
|
||||
gap: { type: String, default: "44px 24px" },
|
||||
gap: { type: String, default: '44px 24px' },
|
||||
playButtonSize: { type: Number, default: 22 },
|
||||
},
|
||||
computed: {
|
||||
rowStyles() {
|
||||
return {
|
||||
"grid-template-columns": `repeat(${this.columnNumber}, 1fr)`,
|
||||
'grid-template-columns': `repeat(${this.columnNumber}, 1fr)`,
|
||||
gap: this.gap,
|
||||
};
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
getSubText(item) {
|
||||
if (this.subText === "copywriter") return item.copywriter;
|
||||
if (this.subText === "description") return item.description;
|
||||
if (this.subText === "updateFrequency") return item.updateFrequency;
|
||||
if (this.subText === "creator") return "by " + item.creator.nickname;
|
||||
if (this.subText === "releaseYear")
|
||||
if (this.subText === 'copywriter') return item.copywriter;
|
||||
if (this.subText === 'description') return item.description;
|
||||
if (this.subText === 'updateFrequency') return item.updateFrequency;
|
||||
if (this.subText === 'creator') return 'by ' + item.creator.nickname;
|
||||
if (this.subText === 'releaseYear')
|
||||
return new Date(item.publishTime).getFullYear();
|
||||
if (this.subText === "artist") {
|
||||
if (this.subText === 'artist') {
|
||||
if (item.artist !== undefined)
|
||||
return `<a href="/#/artist/${item.artist.id}">${item.artist.name}</a>`;
|
||||
if (item.artists !== undefined)
|
||||
return `<a href="/#/artist/${item.artists[0].id}">${item.artists[0].name}</a>`;
|
||||
}
|
||||
if (this.subText === "albumType+releaseYear") {
|
||||
if (this.subText === 'albumType+releaseYear') {
|
||||
let albumType = item.type;
|
||||
if (item.type === "EP/Single") {
|
||||
albumType = item.size === 1 ? "Single" : "EP";
|
||||
} else if (item.type === "Single") {
|
||||
albumType = "Single";
|
||||
} else if (item.type === "专辑") {
|
||||
albumType = "Album";
|
||||
if (item.type === 'EP/Single') {
|
||||
albumType = item.size === 1 ? 'Single' : 'EP';
|
||||
} else if (item.type === 'Single') {
|
||||
albumType = 'Single';
|
||||
} else if (item.type === '专辑') {
|
||||
albumType = 'Album';
|
||||
}
|
||||
return `${albumType} · ${new Date(item.publishTime).getFullYear()}`;
|
||||
}
|
||||
if (this.subText === "appleMusic") return "by Apple Music";
|
||||
if (this.subText === 'appleMusic') return 'by Apple Music';
|
||||
},
|
||||
isPrivacy(item) {
|
||||
return this.type === "playlist" && item.privacy === 10;
|
||||
return this.type === 'playlist' && item.privacy === 10;
|
||||
},
|
||||
isExplicit(item) {
|
||||
return this.type === "album" && item.mark === 1056768;
|
||||
return this.type === 'album' && item.mark === 1056768;
|
||||
},
|
||||
getTitleLink(item) {
|
||||
return `/${this.type}/${item.id}`;
|
||||
},
|
||||
getImageUrl(item) {
|
||||
if (item.img1v1Url) {
|
||||
let img1v1ID = item.img1v1Url.split("/");
|
||||
let img1v1ID = item.img1v1Url.split('/');
|
||||
img1v1ID = img1v1ID[img1v1ID.length - 1];
|
||||
if (img1v1ID === "5639395138885805.jpg") {
|
||||
if (img1v1ID === '5639395138885805.jpg') {
|
||||
// 没有头像的歌手，网易云返回的img1v1Url并不是正方形的 😅😅😅
|
||||
return "https://p2.music.126.net/VnZiScyynLG7atLIZ2YPkw==/18686200114669622.jpg?param=512y512";
|
||||
return 'https://p2.music.126.net/VnZiScyynLG7atLIZ2YPkw==/18686200114669622.jpg?param=512y512';
|
||||
}
|
||||
}
|
||||
let img = item.img1v1Url || item.picUrl || item.coverImgUrl;
|
||||
|
|
|
|||
|
|
@ -18,24 +18,24 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import { mapMutations, mapState, mapActions } from "vuex";
|
||||
import { dailyRecommendTracks } from "@/api/playlist";
|
||||
import { isAccountLoggedIn } from "@/utils/auth";
|
||||
import sample from "lodash/sample";
|
||||
import { mapMutations, mapState, mapActions } from 'vuex';
|
||||
import { dailyRecommendTracks } from '@/api/playlist';
|
||||
import { isAccountLoggedIn } from '@/utils/auth';
|
||||
import sample from 'lodash/sample';
|
||||
|
||||
const defaultCovers = [
|
||||
"https://p2.music.126.net/0-Ybpa8FrDfRgKYCTJD8Xg==/109951164796696795.jpg",
|
||||
"https://p2.music.126.net/QxJA2mr4hhb9DZyucIOIQw==/109951165422200291.jpg",
|
||||
"https://p1.music.126.net/AhYP9TET8l-VSGOpWAKZXw==/109951165134386387.jpg",
|
||||
'https://p2.music.126.net/0-Ybpa8FrDfRgKYCTJD8Xg==/109951164796696795.jpg',
|
||||
'https://p2.music.126.net/QxJA2mr4hhb9DZyucIOIQw==/109951165422200291.jpg',
|
||||
'https://p1.music.126.net/AhYP9TET8l-VSGOpWAKZXw==/109951165134386387.jpg',
|
||||
];
|
||||
|
||||
export default {
|
||||
name: "DailyTracksCard",
|
||||
name: 'DailyTracksCard',
|
||||
data() {
|
||||
return { useAnimation: false };
|
||||
},
|
||||
computed: {
|
||||
...mapState(["dailyTracks"]),
|
||||
...mapState(['dailyTracks']),
|
||||
coverUrl() {
|
||||
return `${
|
||||
this.dailyTracks[0]?.al.picUrl || sample(defaultCovers)
|
||||
|
|
@ -46,29 +46,29 @@ export default {
|
|||
if (this.dailyTracks.length === 0) this.loadDailyTracks();
|
||||
},
|
||||
methods: {
|
||||
...mapActions(["showToast"]),
|
||||
...mapMutations(["updateDailyTracks"]),
|
||||
...mapActions(['showToast']),
|
||||
...mapMutations(['updateDailyTracks']),
|
||||
loadDailyTracks() {
|
||||
if (!isAccountLoggedIn()) return;
|
||||
dailyRecommendTracks()
|
||||
.then((result) => {
|
||||
.then(result => {
|
||||
this.updateDailyTracks(result.data.dailySongs);
|
||||
})
|
||||
.catch(() => {});
|
||||
},
|
||||
goToDailyTracks() {
|
||||
this.$router.push({ name: "dailySongs" });
|
||||
this.$router.push({ name: 'dailySongs' });
|
||||
},
|
||||
playDailyTracks() {
|
||||
if (!isAccountLoggedIn()) {
|
||||
this.showToast("此操作需要登录网易云账号");
|
||||
this.showToast('此操作需要登录网易云账号');
|
||||
return;
|
||||
}
|
||||
let trackIDs = this.dailyTracks.map((t) => t.id);
|
||||
let trackIDs = this.dailyTracks.map(t => t.id);
|
||||
this.$store.state.player.replacePlaylist(
|
||||
trackIDs,
|
||||
"/daily/songs",
|
||||
"url",
|
||||
'/daily/songs',
|
||||
'url',
|
||||
this.dailyTracks[0].id
|
||||
);
|
||||
},
|
||||
|
|
|
|||
|
|
@ -3,10 +3,10 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import SvgIcon from "@/components/SvgIcon.vue";
|
||||
import SvgIcon from '@/components/SvgIcon.vue';
|
||||
|
||||
export default {
|
||||
name: "ExplicitSymbol",
|
||||
name: 'ExplicitSymbol',
|
||||
components: {
|
||||
SvgIcon,
|
||||
},
|
||||
|
|
@ -23,8 +23,8 @@ export default {
|
|||
},
|
||||
created() {
|
||||
this.svgStyle = {
|
||||
height: this.size + "px",
|
||||
width: this.size + "px",
|
||||
height: this.size + 'px',
|
||||
width: this.size + 'px',
|
||||
};
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -12,17 +12,17 @@
|
|||
</div>
|
||||
<div class="controls">
|
||||
<div class="buttons">
|
||||
<button-icon @click.native="moveToFMTrash" title="不喜欢"
|
||||
><svg-icon icon-class="thumbs-down" id="thumbs-down"
|
||||
<button-icon title="不喜欢" @click.native="moveToFMTrash"
|
||||
><svg-icon id="thumbs-down" icon-class="thumbs-down"
|
||||
/></button-icon>
|
||||
<button-icon
|
||||
:title="$t(isPlaying ? 'player.pause' : 'player.play')"
|
||||
class="play"
|
||||
@click.native="play"
|
||||
:title="$t(isPlaying ? 'player.pause' : 'player.play')"
|
||||
>
|
||||
<svg-icon :iconClass="isPlaying ? 'pause' : 'play'"
|
||||
<svg-icon :icon-class="isPlaying ? 'pause' : 'play'"
|
||||
/></button-icon>
|
||||
<button-icon @click.native="next" :title="$t('player.next')"
|
||||
<button-icon :title="$t('player.next')" @click.native="next"
|
||||
><svg-icon icon-class="next" /></button-icon
|
||||
></div>
|
||||
<div class="card-name"><svg-icon icon-class="fm" />私人FM</div>
|
||||
|
|
@ -32,15 +32,15 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import ButtonIcon from "@/components/ButtonIcon.vue";
|
||||
import ArtistsInLine from "@/components/ArtistsInLine.vue";
|
||||
import { mapState } from "vuex";
|
||||
import ButtonIcon from '@/components/ButtonIcon.vue';
|
||||
import ArtistsInLine from '@/components/ArtistsInLine.vue';
|
||||
import { mapState } from 'vuex';
|
||||
|
||||
export default {
|
||||
name: "FMCard",
|
||||
name: 'FMCard',
|
||||
components: { ButtonIcon, ArtistsInLine },
|
||||
computed: {
|
||||
...mapState(["player"]),
|
||||
...mapState(['player']),
|
||||
track() {
|
||||
return this.player.personalFMTrack;
|
||||
},
|
||||
|
|
@ -60,7 +60,7 @@ export default {
|
|||
},
|
||||
goToAlbum() {
|
||||
if (this.track.album.id === 0) return;
|
||||
this.$router.push({ path: "/album/" + this.track.album.id });
|
||||
this.$router.push({ path: '/album/' + this.track.album.id });
|
||||
},
|
||||
moveToFMTrash() {
|
||||
this.player.moveToFMTrash();
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div class="shade" @click="clickOutside" v-show="show">
|
||||
<div class="modal" @click.stop :style="modalStyles">
|
||||
<div v-show="show" class="shade" @click="clickOutside">
|
||||
<div class="modal" :style="modalStyles" @click.stop>
|
||||
<div class="header">
|
||||
<div class="title">{{ title }}</div>
|
||||
<button class="close" @click="close"
|
||||
|
|
@ -8,7 +8,7 @@
|
|||
/></button>
|
||||
</div>
|
||||
<div class="content"><slot></slot></div>
|
||||
<div class="footer" v-if="showFooter">
|
||||
<div v-if="showFooter" class="footer">
|
||||
<!-- <button>取消</button>
|
||||
<button class="primary">确定</button> -->
|
||||
<slot name="footer"></slot>
|
||||
|
|
@ -19,13 +19,13 @@
|
|||
|
||||
<script>
|
||||
export default {
|
||||
name: "Modal",
|
||||
name: 'Modal',
|
||||
props: {
|
||||
show: Boolean,
|
||||
close: Function,
|
||||
title: {
|
||||
type: String,
|
||||
default: "Title",
|
||||
default: 'Title',
|
||||
},
|
||||
showFooter: {
|
||||
type: Boolean,
|
||||
|
|
@ -33,7 +33,7 @@ export default {
|
|||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: "50vw",
|
||||
default: '50vw',
|
||||
},
|
||||
clickOutsideHide: {
|
||||
type: Boolean,
|
||||
|
|
@ -173,7 +173,7 @@ export default {
|
|||
}
|
||||
}
|
||||
|
||||
[data-theme="dark"] {
|
||||
[data-theme='dark'] {
|
||||
.shade {
|
||||
background: rgba(0, 0, 0, 0.38);
|
||||
color: var(--color-text);
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
class="add-track-to-playlist-modal"
|
||||
:show="show"
|
||||
:close="close"
|
||||
:showFooter="false"
|
||||
:show-footer="false"
|
||||
title="添加到歌单"
|
||||
width="25vw"
|
||||
>
|
||||
|
|
@ -12,9 +12,9 @@
|
|||
><svg-icon icon-class="plus" />新建歌单</div
|
||||
>
|
||||
<div
|
||||
class="playlist"
|
||||
v-for="playlist in ownPlaylists"
|
||||
:key="playlist.id"
|
||||
class="playlist"
|
||||
@click="addTrackToPlaylist(playlist.id)"
|
||||
>
|
||||
<img :src="playlist.coverImgUrl | resizeImage(224)" />
|
||||
|
|
@ -28,13 +28,13 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import { mapActions, mapMutations, mapState } from "vuex";
|
||||
import Modal from "@/components/Modal.vue";
|
||||
import { userPlaylist } from "@/api/user";
|
||||
import { addOrRemoveTrackFromPlaylist } from "@/api/playlist";
|
||||
import { mapActions, mapMutations, mapState } from 'vuex';
|
||||
import Modal from '@/components/Modal.vue';
|
||||
import { userPlaylist } from '@/api/user';
|
||||
import { addOrRemoveTrackFromPlaylist } from '@/api/playlist';
|
||||
|
||||
export default {
|
||||
name: "ModalAddTrackToPlaylist",
|
||||
name: 'ModalAddTrackToPlaylist',
|
||||
components: {
|
||||
Modal,
|
||||
},
|
||||
|
|
@ -44,22 +44,22 @@ export default {
|
|||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState(["modals", "data"]),
|
||||
...mapState(['modals', 'data']),
|
||||
show: {
|
||||
get() {
|
||||
return this.modals.addTrackToPlaylistModal.show;
|
||||
},
|
||||
set(value) {
|
||||
this.updateModal({
|
||||
modalName: "addTrackToPlaylistModal",
|
||||
key: "show",
|
||||
modalName: 'addTrackToPlaylistModal',
|
||||
key: 'show',
|
||||
value,
|
||||
});
|
||||
},
|
||||
},
|
||||
ownPlaylists() {
|
||||
return this.playlists.filter(
|
||||
(p) =>
|
||||
p =>
|
||||
p.creator.userId === this.data.user.userId &&
|
||||
p.id !== this.data.likedSongPlaylistID
|
||||
);
|
||||
|
|
@ -69,8 +69,8 @@ export default {
|
|||
this.getUserPlaylists();
|
||||
},
|
||||
methods: {
|
||||
...mapMutations(["updateModal"]),
|
||||
...mapActions(["showToast"]),
|
||||
...mapMutations(['updateModal']),
|
||||
...mapActions(['showToast']),
|
||||
close() {
|
||||
this.show = false;
|
||||
},
|
||||
|
|
@ -79,19 +79,19 @@ export default {
|
|||
timestamp: new Date().getTime(),
|
||||
limit: 1000,
|
||||
uid: this.data.user.userId,
|
||||
}).then((data) => {
|
||||
}).then(data => {
|
||||
this.playlists = data.playlist;
|
||||
});
|
||||
},
|
||||
addTrackToPlaylist(playlistID) {
|
||||
addOrRemoveTrackFromPlaylist({
|
||||
op: "add",
|
||||
op: 'add',
|
||||
pid: playlistID,
|
||||
tracks: this.modals.addTrackToPlaylistModal.selectedTrackID,
|
||||
}).then((data) => {
|
||||
}).then(data => {
|
||||
if (data.body.code === 200) {
|
||||
this.show = false;
|
||||
this.showToast("已添加到歌单");
|
||||
this.showToast('已添加到歌单');
|
||||
} else {
|
||||
this.showToast(data.body.message);
|
||||
}
|
||||
|
|
@ -99,14 +99,14 @@ export default {
|
|||
},
|
||||
newPlaylist() {
|
||||
this.updateModal({
|
||||
modalName: "newPlaylistModal",
|
||||
key: "afterCreateAddTrackID",
|
||||
modalName: 'newPlaylistModal',
|
||||
key: 'afterCreateAddTrackID',
|
||||
value: this.modals.addTrackToPlaylistModal.selectedTrackID,
|
||||
});
|
||||
this.close();
|
||||
this.updateModal({
|
||||
modalName: "newPlaylistModal",
|
||||
key: "show",
|
||||
modalName: 'newPlaylistModal',
|
||||
key: 'show',
|
||||
value: true,
|
||||
});
|
||||
},
|
||||
|
|
|
|||
|
|
@ -8,16 +8,16 @@
|
|||
>
|
||||
<template slot="default">
|
||||
<input
|
||||
v-model="title"
|
||||
type="text"
|
||||
placeholder="歌单标题"
|
||||
maxlength="40"
|
||||
v-model="title"
|
||||
/>
|
||||
<div class="checkbox">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="checkbox-private"
|
||||
v-model="privatePlaylist"
|
||||
type="checkbox"
|
||||
/>
|
||||
<label for="checkbox-private">设置为隐私歌单</label>
|
||||
</div>
|
||||
|
|
@ -29,57 +29,57 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import Modal from "@/components/Modal.vue";
|
||||
import { mapMutations, mapState } from "vuex";
|
||||
import { createPlaylist, addOrRemoveTrackFromPlaylist } from "@/api/playlist";
|
||||
import Modal from '@/components/Modal.vue';
|
||||
import { mapMutations, mapState } from 'vuex';
|
||||
import { createPlaylist, addOrRemoveTrackFromPlaylist } from '@/api/playlist';
|
||||
|
||||
export default {
|
||||
name: "ModalNewPlaylist",
|
||||
name: 'ModalNewPlaylist',
|
||||
components: {
|
||||
Modal,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
title: "",
|
||||
title: '',
|
||||
privatePlaylist: false,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState(["modals"]),
|
||||
...mapState(['modals']),
|
||||
show: {
|
||||
get() {
|
||||
return this.modals.newPlaylistModal.show;
|
||||
},
|
||||
set(value) {
|
||||
this.updateModal({
|
||||
modalName: "newPlaylistModal",
|
||||
key: "show",
|
||||
modalName: 'newPlaylistModal',
|
||||
key: 'show',
|
||||
value,
|
||||
});
|
||||
},
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
...mapMutations(["updateModal"]),
|
||||
...mapMutations(['updateModal']),
|
||||
close() {
|
||||
this.show = false;
|
||||
this.title = "";
|
||||
this.title = '';
|
||||
this.privatePlaylist = false;
|
||||
this.resetAfterCreateAddTrackID();
|
||||
},
|
||||
createPlaylist() {
|
||||
let params = { name: this.title };
|
||||
if (this.private) params.type = 10;
|
||||
createPlaylist(params).then((data) => {
|
||||
createPlaylist(params).then(data => {
|
||||
if (data.code === 200) {
|
||||
if (this.modals.newPlaylistModal.afterCreateAddTrackID !== 0) {
|
||||
addOrRemoveTrackFromPlaylist({
|
||||
op: "add",
|
||||
op: 'add',
|
||||
pid: data.id,
|
||||
tracks: this.modals.newPlaylistModal.afterCreateAddTrackID,
|
||||
}).then((data) => {
|
||||
}).then(data => {
|
||||
if (data.body.code === 200) {
|
||||
this.showToast("已添加到歌单");
|
||||
this.showToast('已添加到歌单');
|
||||
} else {
|
||||
this.showToast(data.body.message);
|
||||
}
|
||||
|
|
@ -87,14 +87,14 @@ export default {
|
|||
});
|
||||
}
|
||||
this.close();
|
||||
this.showToast("成功创建歌单");
|
||||
this.showToast('成功创建歌单');
|
||||
}
|
||||
});
|
||||
},
|
||||
resetAfterCreateAddTrackID() {
|
||||
this.updateModal({
|
||||
modalName: "newPlaylistModal",
|
||||
key: "AfterCreateAddTrackID",
|
||||
modalName: 'newPlaylistModal',
|
||||
key: 'AfterCreateAddTrackID',
|
||||
value: 0,
|
||||
});
|
||||
},
|
||||
|
|
@ -110,7 +110,7 @@ export default {
|
|||
input {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
input[type="text"] {
|
||||
input[type='text'] {
|
||||
width: calc(100% - 24px);
|
||||
flex: 1;
|
||||
background: var(--color-secondary-bg-for-transparent);
|
||||
|
|
@ -125,12 +125,12 @@ export default {
|
|||
background: var(--color-primary-bg-for-transparent);
|
||||
opacity: 1;
|
||||
}
|
||||
[data-theme="light"] &:focus {
|
||||
[data-theme='light'] &:focus {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
.checkbox {
|
||||
input[type="checkbox" i] {
|
||||
input[type='checkbox' i] {
|
||||
margin: 3px 3px 3px 4px;
|
||||
}
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div class="mv-row" :class="{ 'without-padding': withoutPadding }">
|
||||
<div class="mv" v-for="mv in mvs" :key="getID(mv)">
|
||||
<div v-for="mv in mvs" :key="getID(mv)" class="mv">
|
||||
<div
|
||||
class="cover"
|
||||
@mouseover="hoverVideoID = getID(mv)"
|
||||
|
|
@ -10,8 +10,8 @@
|
|||
<img :src="getUrl(mv)" />
|
||||
<transition name="fade">
|
||||
<div
|
||||
class="shadow"
|
||||
v-show="hoverVideoID === getID(mv)"
|
||||
class="shadow"
|
||||
:style="{ background: 'url(' + getUrl(mv) + ')' }"
|
||||
></div>
|
||||
</transition>
|
||||
|
|
@ -28,12 +28,12 @@
|
|||
|
||||
<script>
|
||||
export default {
|
||||
name: "CoverVideo",
|
||||
name: 'CoverVideo',
|
||||
props: {
|
||||
mvs: Array,
|
||||
subtitle: {
|
||||
type: String,
|
||||
default: "artist",
|
||||
default: 'artist',
|
||||
},
|
||||
withoutPadding: { type: Boolean, default: false },
|
||||
},
|
||||
|
|
@ -48,11 +48,11 @@ export default {
|
|||
if (this.$parent.player !== undefined) {
|
||||
query = { autoplay: this.$parent.player.playing };
|
||||
}
|
||||
this.$router.push({ path: "/mv/" + id, query });
|
||||
this.$router.push({ path: '/mv/' + id, query });
|
||||
},
|
||||
getUrl(mv) {
|
||||
let url = mv.imgurl16v9 ?? mv.cover ?? mv.coverUrl;
|
||||
return url.replace(/^http:/, "https:") + "?param=464y260";
|
||||
return url.replace(/^http:/, 'https:') + '?param=464y260';
|
||||
},
|
||||
getID(mv) {
|
||||
if (mv.id !== undefined) return mv.id;
|
||||
|
|
@ -63,8 +63,8 @@ export default {
|
|||
if (mv.title !== undefined) return mv.title;
|
||||
},
|
||||
getSubtitle(mv) {
|
||||
if (this.subtitle === "artist") {
|
||||
let artistName = "null";
|
||||
if (this.subtitle === 'artist') {
|
||||
let artistName = 'null';
|
||||
let artistID = 0;
|
||||
if (mv.artistName !== undefined) {
|
||||
artistName = mv.artistName;
|
||||
|
|
@ -74,7 +74,7 @@ export default {
|
|||
artistID = mv.creator[0].userId;
|
||||
}
|
||||
return `<a href="/#/artist/${artistID}">${artistName}</a>`;
|
||||
} else if (this.subtitle === "publishTime") {
|
||||
} else if (this.subtitle === 'publishTime') {
|
||||
return mv.publishTime;
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -10,11 +10,11 @@
|
|||
></div>
|
||||
<div
|
||||
class="button max-restore codicon"
|
||||
@click="windowMaxRestore"
|
||||
:class="{
|
||||
'codicon-chrome-restore': !isWindowMaximized,
|
||||
'codicon-chrome-maximize': isWindowMaximized,
|
||||
}"
|
||||
@click="windowMaxRestore"
|
||||
></div>
|
||||
<div
|
||||
class="button close codicon codicon-chrome-close"
|
||||
|
|
@ -32,17 +32,17 @@
|
|||
</div>
|
||||
<div class="navigation-links">
|
||||
<router-link to="/" :class="{ active: this.$route.name === 'home' }">{{
|
||||
$t("nav.home")
|
||||
$t('nav.home')
|
||||
}}</router-link>
|
||||
<router-link
|
||||
to="/explore"
|
||||
:class="{ active: this.$route.name === 'explore' }"
|
||||
>{{ $t("nav.explore") }}</router-link
|
||||
>{{ $t('nav.explore') }}</router-link
|
||||
>
|
||||
<router-link
|
||||
to="/library"
|
||||
:class="{ active: this.$route.name === 'library' }"
|
||||
>{{ $t("nav.library") }}</router-link
|
||||
>{{ $t('nav.library') }}</router-link
|
||||
>
|
||||
</div>
|
||||
<div class="right-part">
|
||||
|
|
@ -52,8 +52,8 @@
|
|||
<div class="input">
|
||||
<input
|
||||
ref="searchInput"
|
||||
:placeholder="inputFocus ? '' : $t('nav.search')"
|
||||
v-model="keywords"
|
||||
:placeholder="inputFocus ? '' : $t('nav.search')"
|
||||
@keydown.enter="doSearch"
|
||||
@focus="inputFocus = true"
|
||||
@blur="inputFocus = false"
|
||||
|
|
@ -68,43 +68,43 @@
|
|||
<ContextMenu ref="userProfileMenu">
|
||||
<div class="item" @click="toSettings">
|
||||
<svg-icon icon-class="settings" />
|
||||
{{ $t("library.userProfileMenu.settings") }}
|
||||
{{ $t('library.userProfileMenu.settings') }}
|
||||
</div>
|
||||
<div class="item" @click="toLogin" v-if="!isLooseLoggedIn">
|
||||
<div v-if="!isLooseLoggedIn" class="item" @click="toLogin">
|
||||
<svg-icon icon-class="login" />
|
||||
{{ $t("login.login") }}
|
||||
{{ $t('login.login') }}
|
||||
</div>
|
||||
<div class="item" @click="logout" v-if="isLooseLoggedIn">
|
||||
<div v-if="isLooseLoggedIn" class="item" @click="logout">
|
||||
<svg-icon icon-class="logout" />
|
||||
{{ $t("library.userProfileMenu.logout") }}
|
||||
{{ $t('library.userProfileMenu.logout') }}
|
||||
</div>
|
||||
<hr />
|
||||
<div class="item" @click="toGitHub">
|
||||
<svg-icon icon-class="github" />
|
||||
{{ $t("nav.github") }}
|
||||
{{ $t('nav.github') }}
|
||||
</div>
|
||||
</ContextMenu>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from "vuex";
|
||||
import { isLooseLoggedIn, doLogout } from "@/utils/auth";
|
||||
import { mapState } from 'vuex';
|
||||
import { isLooseLoggedIn, doLogout } from '@/utils/auth';
|
||||
|
||||
// import icons for win32 title bar
|
||||
// icons by https://github.com/microsoft/vscode-codicons
|
||||
import "vscode-codicons/dist/codicon.css";
|
||||
import 'vscode-codicons/dist/codicon.css';
|
||||
|
||||
import ContextMenu from "@/components/ContextMenu.vue";
|
||||
import ButtonIcon from "@/components/ButtonIcon.vue";
|
||||
import ContextMenu from '@/components/ContextMenu.vue';
|
||||
import ButtonIcon from '@/components/ButtonIcon.vue';
|
||||
|
||||
const electron =
|
||||
process.env.IS_ELECTRON === true ? window.require("electron") : null;
|
||||
process.env.IS_ELECTRON === true ? window.require('electron') : null;
|
||||
const ipcRenderer =
|
||||
process.env.IS_ELECTRON === true ? electron.ipcRenderer : null;
|
||||
|
||||
export default {
|
||||
name: "Navbar",
|
||||
name: 'Navbar',
|
||||
components: {
|
||||
ButtonIcon,
|
||||
ContextMenu,
|
||||
|
|
@ -112,44 +112,44 @@ export default {
|
|||
data() {
|
||||
return {
|
||||
inputFocus: false,
|
||||
langs: ["zh-CN", "en", "tr"],
|
||||
keywords: "",
|
||||
langs: ['zh-CN', 'en', 'tr'],
|
||||
keywords: '',
|
||||
isWindowMaximized: false,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState(["settings", "data"]),
|
||||
...mapState(['settings', 'data']),
|
||||
isLooseLoggedIn() {
|
||||
return isLooseLoggedIn();
|
||||
},
|
||||
avatarUrl() {
|
||||
return this.data?.user?.avatarUrl && this.isLooseLoggedIn
|
||||
? `${this.data?.user?.avatarUrl}?param=512y512`
|
||||
: "http://s4.music.126.net/style/web2/img/default/default_avatar.jpg?param=60y60";
|
||||
: 'http://s4.music.126.net/style/web2/img/default/default_avatar.jpg?param=60y60';
|
||||
},
|
||||
},
|
||||
created() {
|
||||
if (process.env.IS_ELECTRON === true) {
|
||||
ipcRenderer.on("isMaximized", (event, value) => {
|
||||
ipcRenderer.on('isMaximized', (event, value) => {
|
||||
this.isWindowMaximized = value;
|
||||
});
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
go(where) {
|
||||
if (where === "back") this.$router.go(-1);
|
||||
if (where === 'back') this.$router.go(-1);
|
||||
else this.$router.go(1);
|
||||
},
|
||||
doSearch() {
|
||||
if (!this.keywords) return;
|
||||
if (
|
||||
this.$route.name === "search" &&
|
||||
this.$route.name === 'search' &&
|
||||
this.$route.params.keywords === this.keywords
|
||||
) {
|
||||
return;
|
||||
}
|
||||
this.$router.push({
|
||||
name: "search",
|
||||
name: 'search',
|
||||
params: { keywords: this.keywords },
|
||||
});
|
||||
},
|
||||
|
|
@ -157,31 +157,31 @@ export default {
|
|||
this.$refs.userProfileMenu.openMenu(e);
|
||||
},
|
||||
logout() {
|
||||
if (!confirm("确定要退出登录吗？")) return;
|
||||
if (!confirm('确定要退出登录吗？')) return;
|
||||
doLogout();
|
||||
this.$router.push({ name: "home" });
|
||||
this.$router.push({ name: 'home' });
|
||||
},
|
||||
toSettings() {
|
||||
this.$router.push({ name: "settings" });
|
||||
this.$router.push({ name: 'settings' });
|
||||
},
|
||||
toGitHub() {
|
||||
window.open("https://github.com/qier222/YesPlayMusic");
|
||||
window.open('https://github.com/qier222/YesPlayMusic');
|
||||
},
|
||||
toLogin() {
|
||||
if (process.env.IS_ELECTRON === true) {
|
||||
this.$router.push({ name: "loginAccount" });
|
||||
this.$router.push({ name: 'loginAccount' });
|
||||
} else {
|
||||
this.$router.push({ name: "login" });
|
||||
this.$router.push({ name: 'login' });
|
||||
}
|
||||
},
|
||||
windowMinimize() {
|
||||
ipcRenderer.send("minimize");
|
||||
ipcRenderer.send('minimize');
|
||||
},
|
||||
windowMaxRestore() {
|
||||
ipcRenderer.send("maximizeOrUnmaximize");
|
||||
ipcRenderer.send('maximizeOrUnmaximize');
|
||||
},
|
||||
windowClose() {
|
||||
ipcRenderer.send("close");
|
||||
ipcRenderer.send('close');
|
||||
},
|
||||
},
|
||||
};
|
||||
|
|
@ -224,7 +224,7 @@ nav {
|
|||
display: none;
|
||||
}
|
||||
|
||||
[data-electron-os="win32"] {
|
||||
[data-electron-os='win32'] {
|
||||
nav {
|
||||
padding-top: 20px;
|
||||
-webkit-app-region: no-drag;
|
||||
|
|
@ -244,7 +244,7 @@ nav {
|
|||
.title {
|
||||
padding: 8px;
|
||||
font-size: 12px;
|
||||
font-family: "Segoe UI", "Microsoft YaHei UI", "Microsoft YaHei",
|
||||
font-family: 'Segoe UI', 'Microsoft YaHei UI', 'Microsoft YaHei',
|
||||
sans-serif;
|
||||
}
|
||||
.controls {
|
||||
|
|
@ -278,7 +278,7 @@ nav {
|
|||
}
|
||||
}
|
||||
}
|
||||
&[data-theme="dark"] .win32-titlebar {
|
||||
&[data-theme='dark'] .win32-titlebar {
|
||||
--hover: #191919;
|
||||
--active: #333333;
|
||||
}
|
||||
|
|
@ -387,7 +387,7 @@ nav {
|
|||
}
|
||||
}
|
||||
|
||||
[data-theme="dark"] {
|
||||
[data-theme='dark'] {
|
||||
.search-box {
|
||||
.active {
|
||||
input,
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
|
||||
<script>
|
||||
export default {
|
||||
name: "SvgIcon",
|
||||
name: 'SvgIcon',
|
||||
props: {
|
||||
iconClass: {
|
||||
type: String,
|
||||
|
|
@ -14,7 +14,7 @@ export default {
|
|||
},
|
||||
className: {
|
||||
type: String,
|
||||
default: "",
|
||||
default: '',
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
|
|
@ -23,9 +23,9 @@ export default {
|
|||
},
|
||||
svgClass() {
|
||||
if (this.className) {
|
||||
return "svg-icon " + this.className;
|
||||
return 'svg-icon ' + this.className;
|
||||
} else {
|
||||
return "svg-icon";
|
||||
return 'svg-icon';
|
||||
}
|
||||
},
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,16 +1,16 @@
|
|||
<template>
|
||||
<transition name="fade">
|
||||
<div class="toast" v-show="toast.show">{{ toast.text }}</div>
|
||||
<div v-show="toast.show" class="toast">{{ toast.text }}</div>
|
||||
</transition>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from "vuex";
|
||||
import { mapState } from 'vuex';
|
||||
|
||||
export default {
|
||||
name: "Toast",
|
||||
name: 'Toast',
|
||||
computed: {
|
||||
...mapState(["toast"]),
|
||||
...mapState(['toast']),
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -33,7 +33,7 @@ export default {
|
|||
z-index: 100;
|
||||
}
|
||||
|
||||
[data-theme="dark"] {
|
||||
[data-theme='dark'] {
|
||||
.toast {
|
||||
background: rgba(46, 46, 46, 0.68);
|
||||
backdrop-filter: blur(16px) contrast(120%);
|
||||
|
|
|
|||
|
|
@ -8,12 +8,12 @@
|
|||
@mouseleave="hover = false"
|
||||
>
|
||||
<img
|
||||
:src="imgUrl"
|
||||
v-if="!isAlbum"
|
||||
@click="goToAlbum"
|
||||
:src="imgUrl"
|
||||
:class="{ hover: focus }"
|
||||
@click="goToAlbum"
|
||||
/>
|
||||
<div class="no" v-if="isAlbum">
|
||||
<div v-if="isAlbum" class="no">
|
||||
<button v-show="focus && track.playable && !isPlaying" @click="playTrack">
|
||||
<svg-icon
|
||||
icon-class="play"
|
||||
|
|
@ -34,7 +34,7 @@
|
|||
<div class="container">
|
||||
<div class="title">
|
||||
{{ track.name }}
|
||||
<span class="featured" v-if="isAlbum">
|
||||
<span v-if="isAlbum" class="featured">
|
||||
<ArtistsInLine
|
||||
:artists="track.ar"
|
||||
:exclude="this.$parent.albumObject.artist.name"
|
||||
|
|
@ -44,7 +44,7 @@
|
|||
><ExplicitSymbol
|
||||
/></span>
|
||||
</div>
|
||||
<div class="artist" v-if="!isAlbum">
|
||||
<div v-if="!isAlbum" class="artist">
|
||||
<span
|
||||
v-if="track.mark === 1318912"
|
||||
class="explicit-symbol before-artist"
|
||||
|
|
@ -55,11 +55,11 @@
|
|||
</div>
|
||||
<div></div>
|
||||
</div>
|
||||
<div class="album" v-if="!isTracklist && !isAlbum">
|
||||
<div v-if="!isTracklist && !isAlbum" class="album">
|
||||
<router-link :to="`/album/${album.id}`">{{ album.name }}</router-link>
|
||||
<div></div>
|
||||
</div>
|
||||
<div class="actions" v-if="!isTracklist">
|
||||
<div v-if="!isTracklist" class="actions">
|
||||
<button @click="likeThisSong">
|
||||
<svg-icon
|
||||
icon-class="heart"
|
||||
|
|
@ -67,10 +67,10 @@
|
|||
visibility: focus && !isLiked ? 'visible' : 'hidden',
|
||||
}"
|
||||
></svg-icon>
|
||||
<svg-icon icon-class="heart-solid" v-show="isLiked"></svg-icon>
|
||||
<svg-icon v-show="isLiked" icon-class="heart-solid"></svg-icon>
|
||||
</button>
|
||||
</div>
|
||||
<div class="time" v-if="!isTracklist">
|
||||
<div v-if="!isTracklist" class="time">
|
||||
{{ track.dt | formatTime }}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue