Merge pull request #706 from MoYingJi/pr/b

feat(playBackground): 支持暂停时暂停背景动画

Author: imsyy

src/components/Player/PlayerBackground.vue

@@ -20,19 +20,25 @@
         v-else-if="settingStore.playerBackgroundType === 'animation'"
         :album="musicStore.songCover"
         :fps="settingStore.playerBackgroundFps ?? 60"
-        :flowSpeed="settingStore.playerBackgroundFlowSpeed ?? 4"
+        :flowSpeed="flowSpeed"
         :hasLyric="musicStore.isHasLrc"
       />
     </Transition>
   </div>
 </template>
 
 <script setup lang="ts">
-import { useMusicStore, useSettingStore } from "@/stores";
+import { useMusicStore, useSettingStore, useStatusStore } from "@/stores";
 import BackgroundRender from "../Special/BackgroundRender.vue";
 
 const musicStore = useMusicStore();
 const settingStore = useSettingStore();
+const statusStore = useStatusStore();
+
+const flowSpeed = computed(() => {
+  if (!statusStore.playStatus && settingStore.playerBackgroundPause) return 0;
+  else return settingStore.playerBackgroundFlowSpeed ?? 4;
+})
 </script>
 
 <style lang="scss" scoped>

src/components/Player/PlayerControl.vue

@@ -137,7 +137,6 @@ const { timeDisplay, toggleTimeFormat } = useTimeFormat();
   width: 100%;
   height: 80px;
   overflow: hidden;
-  cursor: pointer;
   .control-content {
     width: 100%;
     height: 100%;
@@ -250,14 +249,14 @@ const { timeDisplay, toggleTimeFormat } = useTimeFormat();
       width: 100%;
       max-width: 480px;
       font-size: 12px;
-      cursor: pointer;
       .n-slider {
         margin: 6px 8px;
         --n-handle-size: 12px;
         --n-rail-height: 4px;
       }
       span {
         opacity: 0.6;
+        cursor: pointer;
       }
     }
   }

src/components/Setting/PlaySetting.vue

@@ -235,6 +235,13 @@
             placeholder="请输入背景动画流动速度"
           />
         </n-card>
+        <n-card class="set-item">
+          <div class="label">
+            <n-text class="name">背景动画暂停时暂停</n-text>
+            <n-text class="tip" :depth="3">在暂停时是否也暂停背景动画</n-text>
+          </div>
+          <n-switch v-model:value="settingStore.playerBackgroundPause" class="set" :round="false" />
+        </n-card>
       </n-collapse-transition>
       <n-card class="set-item">
         <div class="label">

src/components/Special/BackgroundRender.vue

@@ -93,11 +93,16 @@ onMounted(() => {
   }
 });
 
-onUnmounted(() => {
+const { start: delayedDispose } = useTimeoutFn(() => {
   if (bgRenderRef.value) {
     bgRenderRef.value.dispose();
     bgRenderRef.value = undefined;
   }
+}, 500, { immediate: false });
+
+onBeforeUnmount(() => {
+  bgRenderRef.value?.pause();
+  delayedDispose();
 });
 
 watch(

src/stores/setting.ts

@@ -139,6 +139,8 @@ export interface SettingState {
   playerBackgroundFps: number;
   /** 背景动画流动速度 */
   playerBackgroundFlowSpeed: number;
+  /** 背景动画是否在歌曲暂停时暂停 */
+  playerBackgroundPause: boolean
   /** 播放器元素自动隐藏 */
   autoHidePlayerMeta: boolean;
   /** 记忆最后进度 */
@@ -339,6 +341,7 @@ export const useSettingStore = defineStore("setting", {
     playerBackgroundType: "blur",
     playerBackgroundFps: 30,
     playerBackgroundFlowSpeed: 4,
+    playerBackgroundPause: false,
     autoHidePlayerMeta: true,
     memoryLastSeek: true,
     progressTooltipShow: true,