diff --git a/src/components/MvRow.vue b/src/components/MvRow.vue
index 477ca9c..80b6001 100644
--- a/src/components/MvRow.vue
+++ b/src/components/MvRow.vue
@@ -51,9 +51,11 @@ export default {
this.$router.push({ path: "/mv/" + id, query });
},
getUrl(mv) {
- if (mv.cover !== undefined) return mv.cover;
- if (mv.imgurl16v9 !== undefined) return mv.imgurl16v9;
- if (mv.coverUrl !== undefined) return mv.coverUrl;
+ if (mv.cover !== undefined) return mv.cover.replace(/^http:/, "https:");
+ if (mv.imgurl16v9 !== undefined)
+ return mv.imgurl16v9.replace(/^http:/, "https:");
+ if (mv.coverUrl !== undefined)
+ return mv.coverUrl.replace(/^http:/, "https:");
},
getID(mv) {
if (mv.id !== undefined) return mv.id;
diff --git a/src/components/Player.vue b/src/components/Player.vue
index 11f2d5a..34f8130 100644
--- a/src/components/Player.vue
+++ b/src/components/Player.vue
@@ -1,6 +1,6 @@
-
+
+
+ ![]()
+
+
+
+ {{ rightClickedTrack.name }}
+ {{ rightClickedTrack.ar[0].name }}
+ Play
Play Next
{
+ return {
+ artist: {
+ name: "",
+ },
+ };
+ },
+ },
},
data() {
return {
- rightClickedTrack: null,
+ rightClickedTrack: {
+ id: 0,
+ name: "",
+ ar: [{ name: "" }],
+ al: { picUrl: "" },
+ },
listStyles: {},
};
},
@@ -90,6 +113,14 @@ export default {
this.rightClickedTrack = track;
this.$refs.menu.openMenu(e);
},
+ closeMenu() {
+ this.rightClickedTrack = {
+ id: 0,
+ name: "",
+ ar: [{ name: "" }],
+ al: { picUrl: "" },
+ };
+ },
playThisList(trackID) {
if (this.dbclickTrackFunc === "default") {
this.playThisListDefault(trackID);
diff --git a/src/components/TrackListItem.vue b/src/components/TrackListItem.vue
index 37c86fb..1a6ecb3 100644
--- a/src/components/TrackListItem.vue
+++ b/src/components/TrackListItem.vue
@@ -4,8 +4,8 @@
:class="trackClass"
:style="trackStyle"
:title="track.reason"
- @mouseover="focus = true"
- @mouseleave="focus = false"
+ @mouseover="hover = true"
+ @mouseleave="hover = false"
>
![]()
{{ track.name }}
-
- -
-
+
import("@/views/artistMV.vue"),
+ meta: {
+ keepAlive: true,
+ },
+ },
{
path: "/mv/:id",
name: "mv",
diff --git a/src/store/actions.js b/src/store/actions.js
index 7d61fb5..177c59e 100644
--- a/src/store/actions.js
+++ b/src/store/actions.js
@@ -1,13 +1,16 @@
import { updateMediaSessionMetaData } from "@/utils/mediaSession";
-import { getTrackDetail, scrobble, getMP3 } from "@/api/track";
+import { getTrackDetail, scrobble } from "@/api/track";
import { isAccountLoggedIn } from "@/utils/auth";
-import { updateHttps } from "@/utils/common";
+// import { updateHttps } from "@/utils/common";
+import localforage from "localforage";
+import { cacheTrack } from "@/utils/db";
export default {
switchTrack({ state, dispatch, commit }, basicTrack) {
getTrackDetail(basicTrack.id).then((data) => {
let track = data.songs[0];
track.sort = basicTrack.sort;
+
// 获取当前的播放时间。初始化为 loading 状态时返回 howler 的实例而不是浮点数时间，比如 1.332
let time = state.howler.seek();
let currentTime = 0;
@@ -26,6 +29,7 @@ export default {
sourceid: state.player.listInfo.id,
time: currentTime,
});
+
commit("updateCurrentTrack", track);
updateMediaSessionMetaData(track);
document.title = `${track.name} · ${track.ar[0].name} - YesPlayMusic`;
@@ -42,11 +46,16 @@ export default {
});
}
if (isAccountLoggedIn()) {
- getMP3(track.id).then((data) => {
- // 未知情况下会没有返回数据导致报错，增加防范逻辑
- if (data.data[0]) {
- const url = updateHttps(data.data[0].url);
- commitMP3(url);
+ let tracks = localforage.createInstance({
+ name: "tracks",
+ });
+ tracks.getItem(`${track.id}`).then((t) => {
+ if (t !== null) {
+ commitMP3(URL.createObjectURL(t.mp3));
+ } else {
+ cacheTrack(`${track.id}`).then((t) => {
+ commitMP3(URL.createObjectURL(t.mp3));
+ });
}
});
} else {
diff --git a/src/utils/common.js b/src/utils/common.js
index ade203a..e529dd8 100644
--- a/src/utils/common.js
+++ b/src/utils/common.js
@@ -107,3 +107,89 @@ export function changeAppearance(appearance) {
.querySelector('meta[name="theme-color"]')
.setAttribute("content", appearance === "dark" ? "#222" : "#fff");
}
+
+export function splitSoundtrackAlbumTitle(title) {
+ let keywords = [
+ "Music from the Original Motion Picture Score",
+ "The Original Motion Picture Soundtrack",
+ "Original MGM Motion Picture Soundtrack",
+ "Complete Original Motion Picture Score",
+ "Original Music From The Motion Picture",
+ "Music From The Disney+ Original Movie",
+ "Original Music From The Netflix Film",
+ "Original Score to the Motion Picture",
+ "Original Motion Picture Soundtrack",
+ "Soundtrack from the Motion Picture",
+ "Original Television Soundtrack",
+ "Original Motion Picture Score",
+ "Music From the Motion Picture",
+ "Music From The Motion Picture",
+ "Complete Motion Picture Score",
+ "Music from the Motion Picture",
+ "Original Videogame Soundtrack",
+ "La Bande Originale du Film",
+ "Music from the Miniseries",
+ "Bande Originale du Film",
+ "Die Original Filmmusik",
+ "Original Soundtrack",
+ "Complete Score",
+ "Original Score",
+ ];
+ for (let keyword of keywords) {
+ if (title.includes(keyword) === false) continue;
+ return {
+ title: title
+ .replace(`(${keyword})`, "")
+ .replace(`: ${keyword}`, "")
+ .replace(`[${keyword}]`, "")
+ .replace(`- ${keyword}`, "")
+ .replace(`${keyword}`, ""),
+ subtitle: keyword,
+ };
+ }
+ return {
+ title: title,
+ subtitle: "",
+ };
+}
+
+export function splitAlbumTitle(title) {
+ let keywords = [
+ "Bonus Tracks Edition",
+ "Complete Edition",
+ "Deluxe Edition",
+ "Deluxe Version",
+ "Tour Edition",
+ ];
+ for (let keyword of keywords) {
+ if (title.includes(keyword) === false) continue;
+ return {
+ title: title
+ .replace(`(${keyword})`, "")
+ .replace(`: ${keyword}`, "")
+ .replace(`[${keyword}]`, "")
+ .replace(`- ${keyword}`, "")
+ .replace(`${keyword}`, ""),
+ subtitle: keyword,
+ };
+ }
+ return {
+ title: title,
+ subtitle: "",
+ };
+}
+
+export function bytesToSize(bytes) {
+ var marker = 1024; // Change to 1000 if required
+ var decimal = 2; // Change as required
+ var kiloBytes = marker;
+ var megaBytes = marker * marker;
+ var gigaBytes = marker * marker * marker;
+
+ if (bytes < kiloBytes) return bytes + " Bytes";
+ else if (bytes < megaBytes)
+ return (bytes / kiloBytes).toFixed(decimal) + " KB";
+ else if (bytes < gigaBytes)
+ return (bytes / megaBytes).toFixed(decimal) + " MB";
+ else return (bytes / gigaBytes).toFixed(decimal) + " GB";
+}
diff --git a/src/utils/db.js b/src/utils/db.js
new file mode 100644
index 0000000..83feeb5
--- /dev/null
+++ b/src/utils/db.js
@@ -0,0 +1,57 @@
+import axios from "axios";
+import localforage from "localforage";
+import { getMP3 } from "@/api/track";
+
+export function cacheTrack(id) {
+ let tracks = localforage.createInstance({
+ name: "tracks",
+ });
+
+ // TODO: limit cache songs number
+ // tracks.length().then(function (length) {
+ // if (length > 2) {
+ // tracks.keys().then(function (keys) {
+ // tracks.removeItem(keys[keys.length - 2]);
+ // });
+ // }
+ // });
+
+ // TODO: cache track details
+ return getMP3(id).then((data) => {
+ return axios
+ .get(data.data[0].url.replace(/^http:/, "https:"), {
+ responseType: "blob",
+ })
+ .then((data) => {
+ tracks.setItem(`${id}`, { mp3: data.data });
+ return { mp3: data.data };
+ });
+ });
+}
+
+export function countDBSize(dbName) {
+ let db = localforage.createInstance({
+ name: dbName,
+ });
+ let trackSizes = [];
+ return db
+ .iterate((value) => {
+ trackSizes.push(value.mp3.size);
+ })
+ .then(() => {
+ return {
+ bytes: trackSizes.reduce((s1, s2) => s1 + s2),
+ length: trackSizes.length,
+ };
+ })
+ .catch((err) => {
+ console.log(err);
+ });
+}
+
+export function clearDB(dbName) {
+ let db = localforage.createInstance({
+ name: dbName,
+ });
+ return db.clear();
+}
diff --git a/src/views/album.vue b/src/views/album.vue
index 7e08557..c0471a2 100644
--- a/src/views/album.vue
+++ b/src/views/album.vue
@@ -11,9 +11,8 @@
:id="album.id"
/>
-
-
- {{ album.name }}
-
+ {{ title }}
+ {{ subtitle }}
{{ album.type | formatAlbumType(album) }} by {{
@@ -53,7 +52,12 @@
@@ -103,6 +107,7 @@ import { getArtistAlbum } from "@/api/artist";
import { getTrackDetail } from "@/api/track";
import { playAlbumByID } from "@/utils/play";
import { getAlbum, albumDynamicDetail, likeAAlbum } from "@/api/album";
+import { splitSoundtrackAlbumTitle, splitAlbumTitle } from "@/utils/common";
import NProgress from "nprogress";
import { isAccountLoggedIn } from "@/utils/auth";
@@ -135,6 +140,8 @@ export default {
show: false,
moreAlbums: [],
dynamicDetail: {},
+ subtitle: "",
+ title: "",
};
},
created() {
@@ -161,7 +168,11 @@ export default {
realAlbums.find((a1) => a1.id === a.id) === undefined &&
eps.find((a1) => a1.id === a.id) === undefined
);
- return [...realAlbums, ...eps, ...restItems].slice(0, 5);
+ if (realAlbums.length === 0) {
+ return [...realAlbums, ...eps, ...restItems].slice(0, 5);
+ } else {
+ return [...realAlbums, ...restItems].slice(0, 5);
+ }
},
},
methods: {
@@ -182,10 +193,24 @@ export default {
this.dynamicDetail.isSub = !this.dynamicDetail.isSub;
});
},
+ formatTitle() {
+ let splitTitle = splitSoundtrackAlbumTitle(this.album.name);
+ let splitTitle2 = splitAlbumTitle(splitTitle.title);
+ this.title = splitTitle2.title;
+ if (splitTitle.subtitle !== "" && splitTitle2.subtitle !== "") {
+ this.subtitle = splitTitle.subtitle + " · " + splitTitle2.subtitle;
+ } else {
+ this.subtitle =
+ splitTitle.subtitle === ""
+ ? splitTitle2.subtitle
+ : splitTitle.subtitle;
+ }
+ },
loadData(id) {
getAlbum(id).then((data) => {
this.album = data.album;
this.tracks = data.songs;
+ this.formatTitle();
NProgress.done();
this.show = true;
@@ -230,8 +255,10 @@ export default {
.title {
font-size: 56px;
font-weight: 700;
- display: inline-flex;
- align-items: center;
+ }
+ .subtitle {
+ font-size: 22px;
+ font-weight: 600;
}
.artist {
font-size: 18px;
diff --git a/src/views/artist.vue b/src/views/artist.vue
index f32f03e..4d3dfd6 100644
--- a/src/views/artist.vue
+++ b/src/views/artist.vue
@@ -8,9 +8,17 @@
- {{ artist.name }}
{{ $t("artist.artist") }}
- {{ artist.musicSize }} {{ $t("common.songs") }} ·
- {{ artist.albumSize }} {{ $t("artist.withAlbums") }} ·
- {{ artist.mvSize }} {{ $t("artist.videos") }}
+ {{ artist.musicSize }} {{ $t("common.songs") }}
+ ·
+ {{ artist.albumSize }} {{ $t("artist.withAlbums") }}
+ ·
+ {{ artist.mvSize }} {{ $t("artist.videos") }}
+
{{ $t("artist.popularSongs") }}
+
-
+
@@ -113,10 +139,19 @@
@@ -301,6 +375,21 @@ h2 {
background: var(--color-primary-bg);
}
}
+
+ button {
+ color: var(--color-text);
+ background: var(--color-secondary-bg);
+ padding: 8px 12px 8px 12px;
+ font-weight: 600;
+ border-radius: 8px;
+ transition: 0.2s;
+ &:hover {
+ transform: scale(1.06);
+ }
+ &:active {
+ transform: scale(0.94);
+ }
+ }
}
.beforeAnimation {
diff --git a/yarn.lock b/yarn.lock
index 697d434..431874a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7017,6 +7017,13 @@ localforage@1.8.1:
dependencies:
lie "3.1.1"
+localforage@^1.9.0:
+ version "1.9.0"
+ resolved "https://registry.yarnpkg.com/localforage/-/localforage-1.9.0.tgz#f3e4d32a8300b362b4634cc4e066d9d00d2f09d1"
+ integrity sha512-rR1oyNrKulpe+VM9cYmcFn6tsHuokyVHFaCM3+osEmxaHTbEk8oQu6eGDfS6DQLWi/N67XRmB8ECG37OES368g==
+ dependencies:
+ lie "3.1.1"
+
locate-path@^2.0.0:
version "2.0.0"
resolved "https://registry.npm.taobao.org/locate-path/download/locate-path-2.0.0.tgz#2b568b265eec944c6d9c0de9c3dbbbca0354cd8e"
@@ -11046,7 +11053,7 @@ vue-class-component@^7.1.0:
resolved "https://registry.yarnpkg.com/vue-class-component/-/vue-class-component-7.2.6.tgz#8471e037b8e4762f5a464686e19e5afc708502e4"
integrity sha512-+eaQXVrAm/LldalI272PpDe3+i4mPis0ORiMYxF6Ae4hyuCh15W8Idet7wPUEs4N4YptgFHGys4UrgNQOMyO6w==
-vue-cli-plugin-electron-builder@^2.0.0-rc.5:
+vue-cli-plugin-electron-builder@~2.0.0-rc.4:
version "2.0.0-rc.5"
resolved "https://registry.npm.taobao.org/vue-cli-plugin-electron-builder/download/vue-cli-plugin-electron-builder-2.0.0-rc.5.tgz#87cd8d09877f5f3ae339abc0bedc47d7d2b733ac"
integrity sha1-h82NCYd/XzrjOavAvtxH19K3M6w=
{{ $t("artist.albums") }}
-
MVs
+
+
MVs
+ {{
+ $t("home.seeMore")
+ }}
+
@@ -135,6 +148,7 @@ export default {
},
showMorePopTracks: false,
mvs: [],
+ hasMoreMV: false,
};
},
computed: {
@@ -163,8 +177,9 @@ export default {
this.albumsData = data.hotAlbums;
this.latestRelease = data.hotAlbums[0];
});
- artistMv(id).then((data) => {
+ artistMv({ id }).then((data) => {
this.mvs = data.mvs;
+ this.hasMoreMV = data.hasMore;
});
},
goToAlbum(id) {
@@ -185,6 +200,12 @@ export default {
if (data.code === 200) this.artist.followed = !this.artist.followed;
});
},
+ scrollTo(div, block = "center") {
+ document.getElementById(div).scrollIntoView({
+ behavior: "smooth",
+ block,
+ });
+ },
},
created() {
this.loadData(this.$route.params.id);
@@ -211,7 +232,7 @@ export default {
.artist-info {
display: flex;
align-items: center;
- margin-bottom: 72px;
+ margin-bottom: 26px;
color: var(--color-text);
img {
height: 192px;
@@ -255,7 +276,16 @@ export default {
opacity: 0.88;
color: var(--color-text);
margin-bottom: 16px;
- margin-top: 46px;
+ padding-top: 46px;
+
+ display: flex;
+ justify-content: space-between;
+ align-items: flex-end;
+ a {
+ font-size: 13px;
+ font-weight: 600;
+ opacity: 0.68;
+ }
}
.latest-release {
diff --git a/src/views/artistMV.vue b/src/views/artistMV.vue
new file mode 100644
index 0000000..e7fcf01
--- /dev/null
+++ b/src/views/artistMV.vue
@@ -0,0 +1,96 @@
+
+
-
+
+
+
+
+
+
+
+
+
+
diff --git a/src/views/library.vue b/src/views/library.vue
index 30fbfb2..e05fc94 100644
--- a/src/views/library.vue
+++ b/src/views/library.vue
@@ -1,8 +1,8 @@
+ ![]()
{{
+ artist.name
+ }}'s Music Videos
+
+
+ {{
+ $t("explore.loadMore")
+ }}
+
+
- ![]()
{{
- user.profile.nickname
+ ![]()
{{
+ data.user.nickname
}}{{ $t("library.sLibrary") }}
@@ -129,12 +129,6 @@ export default {
data() {
return {
show: false,
- user: {
- profile: {
- avatarUrl: "",
- nickname: "",
- },
- },
playlists: [],
hasMorePlaylists: true,
likedSongsPlaylist: {
@@ -153,7 +147,7 @@ export default {
created() {
NProgress.start();
userDetail(this.data.user.userId).then((data) => {
- this.user = data;
+ this.$store.commit("updateData", { key: "user", value: data.profile });
});
},
activated() {
@@ -253,18 +247,24 @@ export default {
});
},
loadLikedAlbums() {
+ NProgress.start();
likedAlbums().then((data) => {
this.albums = data.data;
+ NProgress.done();
});
},
loadLikedArtists() {
+ NProgress.start();
likedArtists().then((data) => {
this.artists = data.data;
+ NProgress.done();
});
},
loadLikedMVs() {
+ NProgress.start();
likedMVs().then((data) => {
this.mvs = data.data;
+ NProgress.done();
});
},
},
diff --git a/src/views/playlist.vue b/src/views/playlist.vue
index 831b376..4ec7500 100644
--- a/src/views/playlist.vue
+++ b/src/views/playlist.vue
@@ -121,7 +121,7 @@ export default {
},
created() {
if (this.$route.name === "likedSongs") {
- this.loadData(this.data.user.likedSongPlaylistID);
+ this.loadData(this.data.likedSongPlaylistID);
} else {
this.loadData(this.$route.params.id);
}
diff --git a/src/views/settings.vue b/src/views/settings.vue
index c9bb454..da02c6c 100644
--- a/src/views/settings.vue
+++ b/src/views/settings.vue
@@ -74,6 +74,16 @@
+
+
+ Cached {{ tracksCache.length }} songs ({{ tracksCache.size }})
+
+
+
+ Show Github Icon
@@ -106,6 +116,22 @@
+
+
+ 🐈️ 🏳️🌈
+
+
+
+
+
+
+