refactor: Controller

Author: nonhana

components/hana/VolumeController.vue renamed to components/hana/Controller/Volume.vue

@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-const isIdle = ref(true)
 const volume = ref(0)
 const previousVolume = ref(0)
 
@@ -10,16 +9,11 @@ const volumeIcon = computed(() =>
 onMounted(() => {
   const { $audioPlayer } = useNuxtApp()
 
-  const unsubscribeIdle = $audioPlayer.subscribe((state) => {
-    isIdle.value = state.playbackState === 'idle'
-  })
-
   const unsubscribeVolume = $audioPlayer.subscribe((state) => {
     volume.value = state.volume
   })
 
   onUnmounted(() => {
-    unsubscribeIdle()
     unsubscribeVolume()
   })
 })
@@ -51,8 +45,7 @@ function handleInput(e: Event) {
 
 <template>
   <div
-    v-if="!isIdle"
-    class="relative w-14 overflow-hidden hana-card transition-all duration-300 hidden xl:block"
+    class="relative w-14 overflow-hidden hana-card transition-all duration-300"
     :style="{ height: controllerHeight }"
     @mouseenter="toggleShowVolumePanel"
     @mouseleave="toggleShowVolumePanel"
@@ -63,7 +56,7 @@ function handleInput(e: Event) {
       </p>
       <input
         id="volume-progress"
-        class="h-2 appearance-none rounded outline-none transition-[box-shadow] duration-200 accent-hana-blue dark:bg-hana-black-700 focus-visible:ring-2 focus-visible:ring-hana-blue-300 dark:accent-hana-blue-300"
+        class="h-24 w-2 rounded outline-none transition-[box-shadow] duration-200 accent-hana-blue dark:bg-hana-black-700 focus-visible:ring-2 focus-visible:ring-hana-blue-300"
         type="range"
         min="0"
         max="1"

components/hana/Controller.vue renamed to components/hana/Controller/index.vue

@@ -13,7 +13,6 @@ const { dialogCount } = toRefs(dialogStore)
 const route = useRoute()
 const { path } = toRefs(route)
 
-// #region 滚动相关逻辑
 const { progress } = useLoadingIndicator()
 const canScroll = ref(false)
 
@@ -30,9 +29,7 @@ const showPercent = ref(true)
 function toggleShowPercent() {
   showPercent.value = !showPercent.value
 }
-// #endregion
 
-// #region 评论相关逻辑
 const commentWhiteList = ['/recently'] // 在白名单中的路径不显示评论
 
 const hasComments = ref(false)
@@ -75,96 +72,18 @@ function scrollToTop() {
     })
   }
 }
-// #endregion
 
-// #region 音量控制相关逻辑
 const isIdle = ref(true)
-const volume = ref(0)
-const previousVolume = ref(0)
-
-const volumeIcon = computed(() =>
-  volume.value > 0.5 ? 'lucide:volume-2' : volume.value > 0 ? 'lucide:volume-1' : 'lucide:volume-off',
-)
 
 onMounted(() => {
   const { $audioPlayer } = useNuxtApp()
-
-  const unsubscribeIdle = $audioPlayer.subscribe((state) => {
-    isIdle.value = state.playbackState === 'idle'
-  })
-
-  const unsubscribeVolume = $audioPlayer.subscribe((state) => {
-    volume.value = state.volume
-  })
-
-  onUnmounted(() => {
-    unsubscribeIdle()
-    unsubscribeVolume()
-  })
+  onUnmounted($audioPlayer.subscribe(state => isIdle.value = state.playbackState === 'idle'))
 })
-
-function toggleMuted() {
-  const { $audioPlayer } = useNuxtApp()
-  if ($audioPlayer.getState().isMuted) {
-    $audioPlayer.setVolume(previousVolume.value)
-  }
-  else {
-    previousVolume.value = volume.value
-    $audioPlayer.setVolume(0)
-  }
-}
-
-const showVolumePanel = ref(false)
-function toggleShowVolumePanel() {
-  showVolumePanel.value = !showVolumePanel.value
-}
-
-const controllerHeight = computed(() => showVolumePanel.value ? '208px' : '56px')
-
-function handleInput(e: Event) {
-  const { $audioPlayer } = useNuxtApp()
-  const target = e.target as HTMLInputElement
-  $audioPlayer.setVolume(target.valueAsNumber)
-}
-// #endregion
 </script>
 
 <template>
   <transition-group name="controller" tag="div" class="fixed bottom-10 right-10 flex flex-col gap-4">
-    <div
-      v-if="dialogCount === 0 && !isIdle"
-      class="relative w-14 overflow-hidden hana-card transition-all duration-300"
-      :style="{ height: controllerHeight }"
-      @mouseenter="toggleShowVolumePanel"
-      @mouseleave="toggleShowVolumePanel"
-    >
-      <div class="absolute bottom-2 flex flex-col items-center gap-4">
-        <p class="text-xs text-text dark:text-hana-white-700">
-          {{ Math.round(volume * 100) }}%
-        </p>
-        <input
-          id="volume-progress"
-          class="h-24 w-2 rounded outline-none transition-[box-shadow] duration-200 accent-hana-blue dark:bg-hana-black-700 focus-visible:ring-2 focus-visible:ring-hana-blue-300"
-          type="range"
-          min="0"
-          max="1"
-          step="0.01"
-          :value="volume"
-          :aria-valuemin="0"
-          :aria-valuemax="1"
-          :aria-valuenow="volume"
-          aria-label="音量"
-          :style="`--progress: ${volume}`"
-          @input="handleInput"
-        >
-        <div
-          class="mt-auto size-10 hana-button items-end items-center justify-center font-bold"
-          @click="toggleMuted"
-        >
-          <icon :name="volumeIcon" size="20" />
-        </div>
-      </div>
-    </div>
+    <HanaControllerVolume v-if="dialogCount === 0 && !isIdle" />
 
     <div v-if="dialogCount === 0 && hasComments" class="relative hana-card">
       <HanaTooltip content="滚到评论" position="left" animation="slide">
@@ -213,22 +132,4 @@ function handleInput(e: Event) {
 .controller-leave-active {
   position: absolute;
 }
-
-#volume-progress {
-  background: linear-gradient(to right,
-    oklch(0.5 0.1102 250.04) calc(var(--progress) * 100%),
-    oklch(0.93 0.0358 205.23) calc(var(--progress) * 100%)
-  );
-  writing-mode: vertical-lr;
-  direction: rtl;
-}
-
-.dark {
-  #volume-progress {
-    background: linear-gradient(to right,
-      oklch(0.75 0.0883 226.04) calc(var(--progress) * 100%),
-      oklch(0.93 0.0358 205.23) calc(var(--progress) * 100%)
-    );
-  }
-}
 </style>