升级到 vue3

src/renderer/utils/compositions/useLyric.js

@@ -0,0 +1,136 @@
+import { ref, onMounted, onBeforeUnmount, watch, nextTick } from '@renderer/utils/vueTools'
+import { scrollTo } from '@renderer/utils'
+
+export default ({ isPlay, lyric }) => {
+  const dom_lyric = ref(null)
+  const dom_lyric_text = ref(null)
+  const isMsDown = ref(false)
+
+  let msDownY = 0
+  let msDownScrollY = 0
+  let isStopScroll = false
+  let timeout = null
+  let cancelScrollFn
+  let dom_lines
+  let isSetedLines = false
+
+  const handleScrollLrc = () => {
+    if (!dom_lines?.length) return
+    if (cancelScrollFn) {
+      cancelScrollFn()
+      cancelScrollFn = null
+    }
+    if (isStopScroll) return
+    let dom_p = dom_lines[lyric.line]
+    cancelScrollFn = scrollTo(dom_lyric.value, dom_p ? (dom_p.offsetTop - dom_lyric.value.clientHeight * 0.38) : 0)
+  }
+  const clearLyricScrollTimeout = () => {
+    if (!timeout) return
+    clearTimeout(timeout)
+    timeout = null
+  }
+  const startLyricScrollTimeout = () => {
+    clearLyricScrollTimeout()
+    timeout = setTimeout(() => {
+      timeout = null
+      isStopScroll = false
+      if (!isPlay.value) return
+      handleScrollLrc()
+    }, 3000)
+  }
+  const handleLyricMouseDown = event => {
+    // console.log(event)
+    isMsDown.value = true
+    msDownY = event.clientY
+    msDownScrollY = dom_lyric.value.scrollTop
+  }
+  const handleMouseMsUp = event => {
+    isMsDown.value = false
+  }
+  const handleMouseMsMove = event => {
+    if (isMsDown.value) {
+      if (!isStopScroll) isStopScroll = true
+      if (cancelScrollFn) {
+        cancelScrollFn()
+        cancelScrollFn = null
+      }
+      dom_lyric.value.scrollTop = msDownScrollY + msDownY - event.clientY
+      startLyricScrollTimeout()
+    }
+  }
+
+  const handleWheel = (event) => {
+    console.log(event.deltaY)
+    if (!isStopScroll) isStopScroll = true
+    if (cancelScrollFn) {
+      cancelScrollFn()
+      cancelScrollFn = null
+    }
+    dom_lyric.value.scrollTop = dom_lyric.value.scrollTop + event.deltaY
+    startLyricScrollTimeout()
+  }
+
+  const setLyric = (lines) => {
+    const dom_line_content = document.createDocumentFragment()
+    for (const line of lines) {
+      dom_line_content.appendChild(line.dom_line)
+    }
+    dom_lyric_text.value.textContent = ''
+    dom_lyric_text.value.appendChild(dom_line_content)
+    nextTick(() => {
+      dom_lines = dom_lyric.value.querySelectorAll('.lrc-content')
+      handleScrollLrc()
+    })
+  }
+
+  const initLrc = (lines, oLines) => {
+    isSetedLines = true
+    if (oLines) {
+      if (lines.length) {
+        setLyric(lines)
+      } else {
+        if (cancelScrollFn) {
+          cancelScrollFn()
+          cancelScrollFn = null
+        }
+        cancelScrollFn = scrollTo(dom_lyric.value, 0, 300, () => {
+          if (lyric.lines !== lines) return
+          setLyric(lines)
+        }, 50)
+      }
+    } else {
+      setLyric(lines)
+    }
+  }
+
+  const scrollLine = line => {
+    if (line < 0) return
+    if (line == 0 && isSetedLines) return isSetedLines = false
+    handleScrollLrc()
+  }
+
+  watch(() => lyric.lines, initLrc)
+  watch(() => lyric.line, scrollLine)
+
+  onMounted(() => {
+    initLrc(lyric.lines, null)
+    nextTick(() => {
+      scrollLine(lyric.line)
+    })
+  })
+
+  document.addEventListener('mousemove', handleMouseMsMove)
+  document.addEventListener('mouseup', handleMouseMsUp)
+  onBeforeUnmount(() => {
+    document.removeEventListener('mousemove', handleMouseMsMove)
+    document.removeEventListener('mouseup', handleMouseMsUp)
+  })
+
+  return {
+    dom_lyric,
+    dom_lyric_text,
+    isMsDown,
+    handleLyricMouseDown,
+    handleWheel,
+  }
+}

src/renderer/utils/compositions/useNextTogglePlay.js

@@ -0,0 +1,36 @@
+import {
+  computed,
+  useCommit,
+} from '@renderer/utils/vueTools'
+
+const playNextModes = [
+  'listLoop',
+  'random',
+  'list',
+  'singleLoop',
+]
+
+export default ({ setting, t }) => {
+  const setPlayNextMode = useCommit('setPlayNextMode')
+
+  const nextTogglePlayName = computed(() => {
+    switch (setting.value.player.togglePlayMethod) {
+      case 'listLoop': return t('player__play_toggle_mode_list_loop')
+      case 'random': return t('player__play_toggle_mode_random')
+      case 'singleLoop': return t('player__play_toggle_mode_single_loop')
+      case 'list': return t('player__play_toggle_mode_list')
+      default: return t('player__play_toggle_mode_off')
+    }
+  })
+
+  const toggleNextPlayMode = () => {
+    let index = playNextModes.indexOf(setting.value.player.togglePlayMethod)
+    if (++index >= playNextModes.length) index = -1
+    setPlayNextMode(playNextModes[index] || '')
+  }
+
+  return {
+    nextTogglePlayName,
+    toggleNextPlayMode,
+  }
+}

src/renderer/utils/compositions/usePlayProgress.js

@@ -0,0 +1,31 @@
+import { ref, onBeforeUnmount, toRef } from '@renderer/utils/vueTools'
+import { player as eventPlayerNames } from '@renderer/event/names'
+import { playProgress } from '@renderer/core/share/playProgress'
+
+export default () => {
+  const isActiveTransition = ref(false)
+  const progress = toRef(playProgress, 'progress')
+  const nowPlayTimeStr = toRef(playProgress, 'nowPlayTimeStr')
+  const maxPlayTimeStr = toRef(playProgress, 'maxPlayTimeStr')
+
+  const handleTransitionEnd = () => {
+    isActiveTransition.value = false
+  }
+  const handleActiveTransition = () => {
+    isActiveTransition.value = true
+  }
+
+  window.eventHub.on(eventPlayerNames.activeTransition, handleActiveTransition)
+
+  onBeforeUnmount(() => {
+    window.eventHub.off(eventPlayerNames.activeTransition, handleActiveTransition)
+  })
+
+  return {
+    nowPlayTimeStr,
+    maxPlayTimeStr,
+    progress,
+    isActiveTransition,
+    handleTransitionEnd,
+  }
+}

src/renderer/utils/compositions/useToggleDesktopLyric.js

@@ -0,0 +1,34 @@
+import {
+  computed,
+  useCommit,
+} from '@renderer/utils/vueTools'
+
+export default ({ setting, t }) => {
+  const setVisibleDesktopLyric = useCommit('setVisibleDesktopLyric')
+  const setLockDesktopLyric = useCommit('setLockDesktopLyric')
+
+  const toggleDesktopLyricBtnTitle = computed(() => {
+    return `${
+      setting.value.desktopLyric.enable
+        ? t('player__desktop_lyric_off')
+        : t('player__desktop_lyric_on')
+    }（${
+      setting.value.desktopLyric.isLock
+        ? t('player__desktop_lyric_unlock')
+        : t('player__desktop_lyric_lock')
+    }）`
+  })
+
+  const toggleDesktopLyric = () => {
+    setVisibleDesktopLyric(!setting.value.desktopLyric.enable)
+  }
+  const toggleLockDesktopLyric = () => {
+    setLockDesktopLyric(!setting.value.desktopLyric.isLock)
+  }
+
+  return {
+    toggleDesktopLyricBtnTitle,
+    toggleDesktopLyric,
+    toggleLockDesktopLyric,
+  }
+}