升级到 vue3

src/renderer/plugins/Dialog/Dialog.vue

@@ -10,8 +10,14 @@
 
 <script>
 import Modal from '@renderer/components/material/Modal'
-import Btn from '@renderer/components/material/Btn'
+import Btn from '@renderer/components/base/Btn'
 export default {
+  props: {
+    afterLeave: {
+      type: Function,
+      default: () => {},
+    },
+  },
   components: {
     Modal,
     Btn,
@@ -27,10 +33,10 @@ export default {
   },
   computed: {
     cancelBtnText() {
-      return this.cancelButtonText || this.$t('base.cancel_button_text')
+      return this.cancelButtonText || this.$t('cancel_button_text')
     },
     confirmBtnText() {
-      return this.confirmButtonText || this.$t('base.confirm_button_text')
+      return this.confirmButtonText || this.$t('confirm_button_text')
     },
   },
   beforeDestroy() {
@@ -38,14 +44,9 @@ export default {
     el.parentNode.removeChild(el)
   },
   methods: {
-    afterLeave(el, done) {
-      this.$destroy()
-    },
     handleCancel() {
-
     },
     handleComfirm() {
-
     },
   },
 }

src/renderer/plugins/Dialog/index.js

@@ -1,7 +1,8 @@
 import Dialog from './Dialog'
 import i18n from '../i18n'
 import store from '@renderer/store'
-import Vue from 'vue'
+import { createApp } from 'vue'
+
 
 const defaultOptions = {
   message: '',
@@ -12,13 +13,18 @@ const defaultOptions = {
 
 const dialog = {
   install(Vue, options) {
-    const DialogConstructor = Vue.extend(Dialog)
-
-    const dialog = function Dialog(options) {
+    const dialog = function(options) {
       const { message, showCancel, cancelButtonText, confirmButtonText } =
         Object.assign({}, defaultOptions, typeof options == 'string' ? { message: options } : options || {})
       return new Promise((resolve, reject) => {
-        let instance = new DialogConstructor({ i18n, store }).$mount(document.createElement('div'))
+        let app = createApp(Dialog, {
+          afterLeave() {
+            app?.unmount()
+            app = null
+          },
+        }).use(i18n).use(store)
+
+        let instance = app.mount(document.createElement('div'))
 
         // 属性设置
         instance.visible = true
@@ -47,8 +53,8 @@ const dialog = {
         : { ...options, showCancel: true },
     )
 
-    Vue.prototype.$dialog = dialog
+    Vue.config.globalProperties.$dialog = dialog
   },
 }
 
-Vue.use(dialog)
+export default dialog

src/renderer/plugins/Tips/Tips.js

@@ -1,7 +1,5 @@
 import Tips from './Tips.vue'
-import Vue from 'vue'
-
-const TipsConstructor = Vue.extend(Tips)
+import { createApp } from 'vue'
 
 const addAutoCloseTimer = (instance, time) => {
   if (!time) return
@@ -16,9 +14,16 @@ const clearAutoCloseTimer = instance => {
   instance.autoCloseTimer = null
 }
 
-export default ({ position, message, autoCloseTime } = {}) => {
+export default ({ position, message, autoCloseTime } = {}, props) => {
   if (!position) return
-  let instance = new TipsConstructor().$mount(document.createElement('div'))
+  let app = createApp(Tips, {
+    afterLeave() {
+      app.unmount()
+      app = null
+    },
+  })
+
+  let instance = app.mount(document.createElement('div'))
 
   // Tips实例挂载到刚创建的div
   // 属性设置
@@ -31,7 +36,7 @@ export default ({ position, message, autoCloseTime } = {}) => {
   document.body.appendChild(instance.$el)
 
   instance.cancel = () => {
-    instance.$emit('beforeClose', instance)
+    props.beforeClose(instance)
     clearAutoCloseTimer(instance)
     instance.visible = false
     instance = null

src/renderer/plugins/Tips/Tips.vue

@@ -6,6 +6,12 @@
 
 <script>
 export default {
+  props: {
+    afterLeave: {
+      type: Function,
+      default: () => {},
+    },
+  },
   data() {
     return {
       visible: false,
@@ -27,14 +33,11 @@ export default {
       })
     },
   },
-  beforeDestroy() {
+  beforeUnmount() {
     const el = this.$el
     el.parentNode.removeChild(el)
   },
   methods: {
-    afterLeave(el, done) {
-      this.$destroy()
-    },
     handleGetOffsetXY(left, top) {
       const tipsWidth = this.$refs.dom_tips.clientWidth
       const tipsHeight = this.$refs.dom_tips.clientHeight
@@ -58,7 +61,7 @@ export default {
 </script>
 
 <style lang="less" module>
-@import '../../assets/styles/layout.less';
+@import '@renderer/assets/styles/layout.less';
 
 .tips {
   position: fixed;
@@ -86,7 +89,7 @@ export default {
 }
 
 each(@themes, {
-  :global(#container.@{value}) {
+  :global(#root.@{value}) {
     ~.tips {
       color: ~'@{color-@{value}-theme_2-font}';
       background: ~'@{color-@{value}-theme_2-background_1}';

src/renderer/plugins/Tips/index.js

@@ -26,11 +26,12 @@ const showTips = debounce(event => {
       top: event.y + 12,
       left: event.x + 8,
     },
-  })
-  instance.$on('beforeClose', closeInstance => {
-    if (instance !== closeInstance) return
-    prevTips = null
-    instance = null
+  }, {
+    beforeClose(closeInstance) {
+      if (instance !== closeInstance) return
+      prevTips = null
+      instance = null
+    },
   })
 }, 400)
 

src/renderer/plugins/i18n.js

@@ -7,16 +7,16 @@
  */
 
 // Lib imports
-import Vue from 'vue'
-import VueI18n from 'vue-i18n'
-import messages from '@renderer/lang'
+import { createI18n } from 'vue-i18n'
+import { messages } from '@/lang'
 
-Vue.use(VueI18n)
 
-const i18n = window.i18n = new VueI18n({
+const i18n = createI18n({
   locale: 'zh-cn',
   fallbackLocale: 'zh-cn',
   messages,
 })
 
+window.i18n = i18n.global
+
 export default i18n

src/renderer/plugins/index.js

@@ -1,3 +1,7 @@
 // import './axios'
-import './Dialog'
+import dialog from './Dialog'
 import './Tips'
+
+export default app => {
+  app.use(dialog)
+}

src/renderer/plugins/lyric/index.js

@@ -0,0 +1,24 @@
+import { onBeforeUnmount, ref, computed, useI18n, watch, useCommit } from '@renderer/utils/vueTools'
+import { formatPlayTime2 } from '@renderer/utils'
+
+import { setLoopPlay } from '../player'
+
+export default ({ setting }) => {
+  const { t } = useI18n()
+
+  const toggleDesktopLyricBtnTitle = computed(() => {
+    return `${
+      setting.value.desktopLyric.enable
+        ? t('desktop_lyric__off')
+        : t('desktop_lyric__on')
+    }（${
+      setting.value.desktopLyric.isLock
+        ? t('desktop_lyric__unlock')
+        : t('desktop_lyric__lock')
+    }）`
+  })
+
+  return {
+    toggleDesktopLyricBtnTitle,
+  }
+}

src/renderer/plugins/lyric/useLyric.js

@@ -0,0 +1,48 @@
+import { useRefGetter, reactive, computed, watch, useCommit } from '@renderer/utils/vueTools'
+import Lyric from '@renderer/utils/lyric-font-player'
+import { getCurrentTime } from '@renderer/plugins/player'
+import { setDesktopLyricInfo } from '@renderer/utils/tools'
+
+// let lrc = window.lrc
+
+export default ({ setting, musicInfo, isPlay, listId, setStatusText }) => {
+  const lyric = reactive({
+    lines: [],
+    text: '',
+    line: 0,
+  })
+
+  const lrc = window.lrc = new Lyric({
+    lineClassName: 'lrc-content',
+    fontClassName: 'font',
+    shadowContent: false,
+    activeLineClassName: 'active',
+    onPlay: (line, text) => {
+      lyric.text = text
+      lyric.line = line
+      setStatusText(text)
+      // console.log(line, text)
+    },
+    onSetLyric: lines => { // listening lyrics seting event
+      // console.log(lines) // lines is array of all lyric text
+      lyric.lines = lines
+      lyric.line = 0
+    },
+    // offset: 80,
+  })
+
+
+  const setLyric = () => {
+    lrc.setLyric(
+      setting.value.player.isPlayLxlrc && musicInfo.value.lxlrc ? musicInfo.vlaue.lxlrc : musicInfo.vlaue.lrc,
+      setting.value.player.isShowLyricTranslation && musicInfo.value.tlrc ? musicInfo.value.tlrc : '',
+    )
+    if (isPlay.value && (musicInfo.value.url || listId.value == 'download')) {
+      const time = getCurrentTime() * 1000
+      setDesktopLyricInfo('play', time)
+      lrc.play(time)
+    }
+  }
+  watch(setting.value.player.isShowLyricTranslation, setLyric)
+  watch(setting.value.player.isPlayLxlrc, setLyric)
+}

src/renderer/plugins/player.js

@@ -0,0 +1,150 @@
+let audio
+
+export const createAudio = () => {
+  if (audio) return
+  window.audio = audio = new window.Audio()
+  audio.controls = false
+  audio.autoplay = true
+  audio.preload = 'auto'
+}
+
+export const setResource = src => {
+  if (audio) audio.src = src
+}
+
+export const setPlay = () => {
+  audio?.play()
+}
+
+export const setPause = () => {
+  audio?.pause()
+}
+
+export const setStop = () => {
+  if (audio) {
+    audio.src = null
+    audio.removeAttribute('src')
+  }
+}
+
+export const isEmpty = () => !audio?.src
+
+export const setLoopPlay = isLoop => {
+  if (audio) audio.loop = isLoop
+}
+
+export const getMute = () => {
+  return audio?.muted ?? false
+}
+
+export const setMute = isMute => {
+  if (audio) audio.muted = isMute
+}
+
+export const getCurrentTime = () => {
+  return audio?.currentTime ?? 0
+}
+
+export const setCurrentTime = time => {
+  if (audio) audio.currentTime = time
+}
+
+export const setMediaDeviceId = mediaDeviceId => {
+  return audio ? audio.setSinkId(mediaDeviceId) : Promise.resolve()
+}
+
+export const setVolume = volume => {
+  if (audio) audio.volume = volume
+}
+
+export const getDuration = () => {
+  return audio?.duration ?? 0
+}
+
+export const getPlaybackRate = () => {
+  return audio?.playbackRate ?? 1
+}
+
+export const onPlaying = callback => {
+  audio.addEventListener('playing', callback)
+  return () => {
+    audio.removeEventListener('playing', callback)
+  }
+}
+
+export const onPause = callback => {
+  audio.addEventListener('pause', callback)
+  return () => {
+    audio.removeEventListener('pause', callback)
+  }
+}
+
+export const onEnded = callback => {
+  audio.addEventListener('ended', callback)
+  return () => {
+    audio.removeEventListener('ended', callback)
+  }
+}
+
+export const onError = callback => {
+  audio.addEventListener('error', callback)
+  return () => {
+    audio.removeEventListener('error', callback)
+  }
+}
+
+export const onLoadeddata = callback => {
+  audio.addEventListener('loadeddata', callback)
+  return () => {
+    audio.removeEventListener('loadeddata', callback)
+  }
+}
+
+export const onLoadstart = callback => {
+  audio.addEventListener('loadstart', callback)
+  return () => {
+    audio.removeEventListener('loadstart', callback)
+  }
+}
+
+export const onCanplay = callback => {
+  audio.addEventListener('canplay', callback)
+  return () => {
+    audio.removeEventListener('canplay', callback)
+  }
+}
+
+export const onEmptied = callback => {
+  audio.addEventListener('emptied', callback)
+  return () => {
+    audio.removeEventListener('emptied', callback)
+  }
+}
+
+export const onTimeupdate = callback => {
+  audio.addEventListener('timeupdate', callback)
+  return () => {
+    audio.removeEventListener('timeupdate', callback)
+  }
+}
+
+// 缓冲中
+export const onWaiting = callback => {
+  audio.addEventListener('waiting', callback)
+  return () => {
+    audio.removeEventListener('waiting', callback)
+  }
+}
+
+// 可见性改变
+export const onVisibilityChange = callback => {
+  document.addEventListener('visibilitychange', callback)
+  return () => {
+    document.removeEventListener('visibilitychange', callback)
+  }
+}
+
+
+export const getErrorCode = () => {
+  return audio?.error?.code
+}