diff --git a/package.json b/package.json index e2f0256..a6248e0 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "splayer", - "version": "1.1.2", + "version": "1.1.3", "author": "imsyy", "home": "https://imsyy.top", "github": "https://github.com/imsyy/SPlayer", diff --git a/src/App.vue b/src/App.vue index 6b8e369..4fecc80 100644 --- a/src/App.vue +++ b/src/App.vue @@ -10,7 +10,12 @@ :native-scrollbar="false" embedded > -
+
{ .main { max-width: 1400px; margin: 0 auto; + div:nth-of-type(2) { + transition: all 0.3s; + } + &.playlist { + div:nth-of-type(2) { + transform: scale(0.98); + } + } } } diff --git a/src/components/Comment/index.vue b/src/components/Comment/index.vue index f837419..e54fb73 100644 --- a/src/components/Comment/index.vue +++ b/src/components/Comment/index.vue @@ -14,7 +14,12 @@ redVipAnnualCount @@ -25,7 +30,12 @@ > associator diff --git a/src/components/DataList/PlayList.vue b/src/components/DataList/PlayList.vue deleted file mode 100644 index 8db399f..0000000 --- a/src/components/DataList/PlayList.vue +++ /dev/null @@ -1,178 +0,0 @@ - - - - - diff --git a/src/components/DataModel/PlayListDrawer.vue b/src/components/DataModel/PlayListDrawer.vue new file mode 100644 index 0000000..23f30f7 --- /dev/null +++ b/src/components/DataModel/PlayListDrawer.vue @@ -0,0 +1,223 @@ + + + + + diff --git a/src/components/Nav/index.vue b/src/components/Nav/index.vue index 5377f44..183c1a6 100644 --- a/src/components/Nav/index.vue +++ b/src/components/Nav/index.vue @@ -18,11 +18,7 @@ > 发现 - + 我的 @@ -44,7 +40,8 @@ size="small" :src=" user.getUserData.avatarUrl - ? user.getUserData.avatarUrl + ? user.getUserData.avatarUrl.replace(/^http:/, 'https:') + + '?param=60y60' : '/images/ico/user-filling.svg' " :img-props="{ class: 'avatarImg' }" @@ -109,7 +106,8 @@ const userDataRender = () => { round: true, style: "margin-right: 12px", src: user.userLogin - ? user.getUserData.avatarUrl + ? user.getUserData.avatarUrl.replace(/^http:/, "https:") + + "?param=60y60" : "/images/ico/user-filling.svg", fallbackSrc: "/images/ico/user-filling.svg", }), diff --git a/src/components/Player/BigPlayer.vue b/src/components/Player/BigPlayer.vue index 6ae4a24..e3eeb08 100644 --- a/src/components/Player/BigPlayer.vue +++ b/src/components/Player/BigPlayer.vue @@ -181,6 +181,7 @@ const lrcAllLeave = () => { }; // 全屏切换 +const timeOut = ref(null); const screenfullIcon = shallowRef(FullscreenRound); const screenfullChange = () => { if (screenfull.isEnabled) { @@ -189,7 +190,7 @@ const screenfullChange = () => { ? FullscreenRound : FullscreenExitRound; // 延迟一段时间执行列表滚动 - setTimeout(() => { + timeOut.value = setTimeout(() => { lrcMouseStatus.value = false; lyricsScroll(music.getPlaySongLyricIndex); }, 500); @@ -248,6 +249,10 @@ onMounted(() => { }); }); +onBeforeUnmount(() => { + clearTimeout(timeOut.value); +}); + // 监听页面是否打开 watch( () => music.showBigPlayer, @@ -256,6 +261,7 @@ watch( console.log("开启播放器", music.getPlaySongLyricIndex); nextTick(() => { lyricsScroll(music.getPlaySongLyricIndex); + music.showPlayList = false; }); } } diff --git a/src/components/Player/CountDown.vue b/src/components/Player/CountDown.vue index 5a42173..2181262 100644 --- a/src/components/Player/CountDown.vue +++ b/src/components/Player/CountDown.vue @@ -3,7 +3,11 @@
● ● @@ -30,9 +34,11 @@ const totalDuration = ref( watch( () => music.getPlaySongTime.currentTime, (val) => { - const remainingTime = totalDuration.value - val - 0.5; - const progress = 1 - remainingTime / totalDuration.value; - remainingPoint.value = Number(Math.floor(3 * progress)); + if (music.getPlaySongLyric.lrc[0]) { + const remainingTime = totalDuration.value - val - 0.5; + const progress = 1 - remainingTime / totalDuration.value; + remainingPoint.value = Number(Math.floor(3 * progress)); + } } ); @@ -40,10 +46,12 @@ watch( watch( () => music.getPlaySongLyric?.lrc, (val) => { - totalDuration.value = music.getPlaySongLyric.hasYrc - ? music.getPlaySongLyric?.yrc[0].time - : val[0].time; - remainingPoint.value = 0; + if (music.getPlaySongLyric.lrc[0]) { + totalDuration.value = music.getPlaySongLyric.hasYrc + ? music.getPlaySongLyric?.yrc[0].time + : val[0].time; + remainingPoint.value = 0; + } } ); diff --git a/src/components/Player/index.vue b/src/components/Player/index.vue index b7f7c5b..fb0f23d 100644 --- a/src/components/Player/index.vue +++ b/src/components/Player/index.vue @@ -168,10 +168,8 @@ @click="music.setPlaySongMode()" />
-
- +
+ + + + @@ -249,8 +251,8 @@ import { storeToRefs } from "pinia"; import { musicStore, settingStore } from "@/store"; import { useRouter } from "vue-router"; import AddPlaylist from "@/components/DataModel/AddPlaylist.vue"; +import PlayListDrawer from "@/components/DataModel/PlayListDrawer.vue"; import AllArtists from "@/components/DataList/AllArtists.vue"; -import PlayList from "@/components/DataList/PlayList.vue"; import BigPlayer from "./BigPlayer.vue"; import debounce from "@/utils/debounce"; @@ -259,6 +261,7 @@ const setting = settingStore(); const music = musicStore(); const { persistData } = storeToRefs(music); const addPlayListRef = ref(null); +const PlayListDrawerRef = ref(null); // 重试次数 const testNumber = ref(0); @@ -562,7 +565,7 @@ watch( bottom: -90px; left: 0; transition: all 0.3s; - z-index: 2; + z-index: 2004; &.show { bottom: 0; } @@ -606,23 +609,6 @@ watch( align-items: center; max-width: 1400px; margin: 0 auto; - @media (max-width: 620px) { - display: flex; - flex-direction: row; - justify-content: space-between; - .data { - .time { - display: none; - } - } - .control { - margin-left: auto; - .prev, - .next { - display: none; - } - } - } .data { display: flex; flex-direction: row; @@ -794,6 +780,12 @@ watch( display: flex; align-items: center; justify-content: center; + &.open { + .n-icon { + background-color: $mainColor; + color: var(--n-color-embedded); + } + } } .volume { display: flex; @@ -810,6 +802,26 @@ watch( } } } + @media (max-width: 620px) { + display: flex; + flex-direction: row; + justify-content: space-between; + .data { + .time { + display: none; + } + } + .control { + margin-left: auto; + .prev, + .next { + display: none; + } + .play-state { + margin: 0; + } + } + } } } diff --git a/src/components/SearchInp/index.vue b/src/components/SearchInp/index.vue index e012dcb..8d212ea 100644 --- a/src/components/SearchInp/index.vue +++ b/src/components/SearchInp/index.vue @@ -328,6 +328,14 @@ watch( } } ); + +// 监听播放列表显隐 +watch( + () => music.showPlayList, + (val) => { + if (val) inputActive.value = false; + } +);