feat: local music supports synchronization of different folders and s…

…ongs

packages/api/module/song_url.js

@@ -6,11 +6,21 @@ const crypto = require('crypto')
 const { cookieToJson } = require('../util/index')
 
 const find = (id) => {
-  return match(id)
+  return match(id, [
+    'qq',
+    'xiami',
+    'baidu',
+    'kugou',
+    'kuwo',
+    'migu',
+    'joox',
+    'youtube',
+  ])
     .then((url) => {
       return url.url
     })
     .catch((e) => {
+      console.warn(e)
       return ''
     })
 }

src/components/dialog/index.tsx

@@ -1,9 +1,23 @@
-import { defineComponent } from 'vue'
+import { defineComponent, createApp, VNodeTypes } from 'vue'
 import { Modal } from 'ant-design-vue'
+import { create } from '@/utils/index'
+
+interface Config {
+  centered: boolean
+}
 
 export const Dialog = defineComponent({
   name: 'Dialog',
-  setup() {
-    return () => <Modal centered={true}></Modal>
+  setup(props, { slots }) {
+    return () => <Modal {...props}>{slots.default && slots.default()}</Modal>
   }
 })
+
+export const instance = function(content: VNodeTypes, config: Config) {
+  const app = createApp({
+    setup() {
+      return () => <Dialog {...config}>{content}</Dialog>
+    }
+  })
+  create(app)
+}

src/electron/event/action-types.ts

@@ -34,3 +34,7 @@ export const enum UpdateType {
 export const enum ReadLocalFile {
   READ_MP3_FROM_PATH = 'READ_MP3_FROM_PATH'
 }
+
+export const enum Dialog {
+  SHOW_DIALOG = 'SHOW_DIALOG'
+}

src/electron/event/ipc-main/index.ts

@@ -1,12 +1,13 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
-import { ipcMain, IpcMainEvent, BrowserWindow, screen } from 'electron'
+import { ipcMain, IpcMainEvent, BrowserWindow, screen, dialog } from 'electron'
 import {
   Action,
   MiddlewareView,
   LyriceAction,
   UpdateType,
   DownloadIpcType,
-  ReadLocalFile
+  ReadLocalFile,
+  Dialog
 } from '../action-types'
 import store from '@/electron/store/index'
 import { readFileSync } from 'fs'
@@ -102,4 +103,14 @@ export const onIpcMainEvent = (win: BrowserWindow) => {
     const buffer = readFileSync(arg)
     event.returnValue = buffer
   })
+  ipcMain.on(Dialog.SHOW_DIALOG, (event, arg) => {
+    dialog
+      .showOpenDialog(win, {
+        title: '添加文件夹',
+        properties: ['openDirectory', 'multiSelections']
+      })
+      .then(v => {
+        event.returnValue = v
+      })
+  })
 }

src/electron/event/ipc-renderer/index.ts

@@ -12,7 +12,8 @@ import {
   LyriceAction,
   UpdateType,
   DownloadIpcType,
-  ReadLocalFile
+  ReadLocalFile,
+  Dialog
 } from '../action-types'
 
 export const getWindow = () => remote.BrowserWindow.getFocusedWindow()
@@ -25,6 +26,7 @@ type ActionType =
   | LyriceAction
   | UpdateType
   | ReadLocalFile
+  | Dialog
 
 export function sendAsyncIpcRendererEvent(
   action: ActionType,

src/electron/preload/init.ts

@@ -1,4 +1,9 @@
-// runtime web
+/**
+ * runtime: web
+ * The electron package cannot be imported directly, it can only be imported dynamically.
+ * Because webpack will import the corresponding package when analyzing dependencies,
+ * an electron-related error will be prompted in the browser host.
+ */
 
 import { Platform } from '@/config/build'
 import { DownloadMutations, LocalMusicMutations } from '@/interface'
@@ -12,24 +17,44 @@ const initStorage = async () => {
     const v = await import('@/electron/utils/index')
     const downloadState = store.state.Download
     const localMusicState = store.state.LocalMusic
-    const os = v.getUserOS()
-    const userMusicPath = v.join(os.homedir + '/Music')
 
+    const os = v.getUserOS()
+    const userDownloadPath = v.join(os.homedir + '/Downloads')
     if (!downloadState.downloadPath) {
       store.commit(
         DownloadNameSpaced + '/' + DownloadMutations.SET_DOWNLOAD_PATH,
-        userMusicPath
+        userDownloadPath
       )
     }
 
+    const userMusicPath = v.join(os.homedir + '/Music')
     if (!localMusicState.normalPath) {
       store.commit(
         LocalMusicNameSpaced + '/' + LocalMusicMutations.SET_NORMAL_PATH,
         userMusicPath
       )
     }
 
-    const songs = await v.readPathMusic(localMusicState.normalPath)
+    const paths = [
+      {
+        path: userMusicPath,
+        name: '我的音乐',
+        check: true
+      },
+      {
+        path: userDownloadPath,
+        name: '下载',
+        check: true
+      }
+    ]
+    if (!localMusicState.localPath.length) {
+      store.commit(
+        LocalMusicNameSpaced + '/' + LocalMusicMutations.SET_LOCAL_PATH,
+        paths
+      )
+    }
+
+    const songs = await v.readPathMusic(paths.map(item => item.path))
 
     store.commit(
       LocalMusicNameSpaced + '/' + LocalMusicMutations.SET_LOCAL_MUSIC,

src/electron/utils/index.ts

@@ -112,15 +112,16 @@ export const getMp3Tags = async (
   }
 }
 
-export const readPathMusic = async (abPath: string) => {
-  const files = readdirSync(abPath).filter(mp3 => /\.mp3$/.test(mp3))
-
+export const readPathMusic = async (abPath: string[]) => {
   const fls: LocalSongsDetail[] = []
-  for (let i = 0; i < files.length; i++) {
-    const file = files[i]
-    const path = join(abPath, file)
-    const mp3 = await getMp3Tags(path, file)
-    fls.push(mp3)
+  for (let i = 0; i < abPath.length; i++) {
+    const files = readdirSync(abPath[i]).filter(mp3 => /\.mp3$/.test(mp3))
+    for (let j = 0; j < files.length; j++) {
+      const file = files[j]
+      const path = join(abPath[i], file)
+      const mp3 = await getMp3Tags(path, file)
+      fls.push(mp3)
+    }
   }
 
   return fls

src/global.d.ts

@@ -8,17 +8,9 @@ declare interface MediaMetadataTypeParams {
     type: string
   }[]
 }
+
 declare interface MediaMetadataType {
   new (option: MediaMetadataTypeParams): MediaMetadataTypeParams
 }
+
 declare const MediaMetadata: MediaMetadataType
-declare module '@/mp3/jsmediatags' {
-  export * from '@types/jsmediatags/index'
-}
-declare module 'mp3-duration' {
-  const Fn = (
-    path: string,
-    callback: (err: unknown, duration: number) => void
-  ) => unknown
-  export default Fn
-}

src/layout/container.less

@@ -8,7 +8,7 @@
   height: 100%;
   box-shadow: -1px 2px 6px 2px #dcdcdc;
   transition: width 0.2s, height 0.2s, transform 0.2s;
-  transform: matrix(1, 0, 0, 1, 0, 0);
+  // transform: matrix(1, 0, 0, 1, 0, 0);
   will-change: transform;
   backface-visibility: hidden;
   &-sm {

src/pages/download/children/song.tsx

@@ -35,7 +35,7 @@ export const DownloadSong = defineComponent({
           <PlayAll onClick={handlePlayAll} />
           {VUE_APP_PLATFORM === Platform.ELECTRON && (
             <div class="download-song-head--dir">
-              存储目录：{state.downloadPath}{' '}
+              存储目录：{state.downloadPath}
               <ve-button type="text" onClick={handleOpenExplorer}>
                 打开目录
               </ve-button>

src/pages/footer/components/lyrice-embed/index.less

@@ -22,7 +22,7 @@
   &-left {
     min-width: 270px;
     height: 100%;
-    margin-top: 100px;
+    margin-top: 50px;
     margin-right: 80px;
     div&-pic {
       display: flex;

src/pages/music/children/song.tsx

@@ -3,15 +3,15 @@ import { PlayAll } from '@/components-business/button'
 import { Button } from 'ant-design-vue'
 import { Table } from '@/components-business/table'
 import { useLocalMusicModule } from '@/modules'
-import { SongsDetail, FooterMutations } from '@/interface'
+import { SongsDetail, FooterMutations, LocalMusicMutations } from '@/interface'
 import { useFooterModule } from '@/modules/index'
 import { importIpc } from '@/electron/event/ipc-browser'
 import { ReadLocalFile } from '@/electron/event/action-types'
 
 export const LocalMusicSong = defineComponent({
   name: 'LocalMusicSong',
   setup() {
-    const { useState } = useLocalMusicModule()
+    const { useState, useMutations } = useLocalMusicModule()
     const footerModule = useFooterModule()
     const state = useState()
 
@@ -31,6 +31,14 @@ export const LocalMusicSong = defineComponent({
       })
       footerModule.useMutations(FooterMutations.PLAY_MUSIC)
     }
+    const handleSyncMusic = async () => {
+      const v = await import('@/electron/utils/index')
+      const songs = await v.readPathMusic(
+        state.localPath.map(item => item.path)
+      )
+
+      useMutations(LocalMusicMutations.SET_LOCAL_MUSIC, songs)
+    }
 
     onUnmounted(() => {
       // Release the URL object
@@ -41,7 +49,9 @@ export const LocalMusicSong = defineComponent({
       <div class="local-music-song">
         <div class="local-music-head">
           <PlayAll onClick={handlePlayAll} />
-          <Button shape="round">同步音乐</Button>
+          <Button shape="round" onClick={handleSyncMusic}>
+            同步音乐
+          </Button>
         </div>
         <div class="local-music-body">
           <Table

src/pages/music/interface.ts

@@ -1,13 +1,22 @@
 import { SongsDetail } from '@/interface'
 
+export interface LocalMusicPath {
+  name: string
+  path: string
+  check: boolean
+}
+
 export interface LocalMusicState {
   normalPath: string
   localMusic: SongsDetail[]
+  localPath: LocalMusicPath[]
 }
 
 export const enum LocalMusicActions {}
 
 export const enum LocalMusicMutations {
   SET_NORMAL_PATH = 'SET_NORMAL_PATH',
-  SET_LOCAL_MUSIC = 'SET_LOCAL_MUSIC'
+  SET_LOCAL_MUSIC = 'SET_LOCAL_MUSIC',
+  SET_LOCAL_PATH = 'SET_LOCAL_PATH',
+  SET_LOCAL_INCREMENT_PATH = 'SET_LOCAL_INCREMENT_PATH'
 }

src/pages/music/sage.ts

@@ -1,5 +1,10 @@
 import { ActionTree, MutationTree } from 'vuex'
-import { LocalMusicState, LocalMusicMutations, SongsDetail } from '@/interface'
+import {
+  LocalMusicState,
+  LocalMusicMutations,
+  SongsDetail,
+  LocalMusicPath
+} from '@/interface'
 import { RootState } from '@/store/index'
 
 export const actions: ActionTree<LocalMusicState, RootState> = {}
@@ -10,5 +15,11 @@ export const mutations: MutationTree<LocalMusicState> = {
   },
   [LocalMusicMutations.SET_LOCAL_MUSIC](state, songs: SongsDetail[]) {
     state.localMusic = songs
+  },
+  [LocalMusicMutations.SET_LOCAL_PATH](state, paths: LocalMusicPath[]) {
+    state.localPath = paths
+  },
+  [LocalMusicMutations.SET_LOCAL_INCREMENT_PATH](state, path: LocalMusicPath) {
+    state.localPath.push(path)
   }
 }

src/pages/music/state.ts

@@ -2,5 +2,6 @@ import { LocalMusicState } from '@/interface'
 
 export const state: LocalMusicState = {
   normalPath: '',
-  localMusic: []
+  localMusic: [],
+  localPath: []
 }

src/pages/music/view/index.less

@@ -1,4 +1,23 @@
 .local-music {
+  &-directory {
+    &-description {
+      margin-bottom: 30px;
+      font-size: 12px;
+    }
+    &-group {
+      margin-bottom: 30px;
+      .van-checkbox {
+        margin-bottom: 10px;
+      }
+    }
+    &-footer {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      width: 180px;
+      margin: 0 auto;
+    }
+  }
   &-head {
     display: flex;
     align-items: center;