feat: support random play

radishes-music · Feb 8, 2021 · 2d486e3 · 2d486e3
1 parent 3badf6b
commit 2d486e3
Show file tree

Hide file tree

Showing 6 changed files with 36 additions and 14 deletions.
diff --git a/src/iconfont/index.ts b/src/iconfont/index.ts
@@ -1,7 +1,7 @@
 import $script from 'scriptjs'
 import { noop } from '@/utils/index'
 
-const ICONFONT_URL = 'font_2132275_73mcnctm9yy'
+const ICONFONT_URL = 'font_2132275_ypy5tdama8'
 
 // repair electron packaging '//' protocol problem
 $script(`https://at.alicdn.com/t/${ICONFONT_URL}.js`, noop)

diff --git a/src/pages/footer/components/music-controller/index.tsx b/src/pages/footer/components/music-controller/index.tsx
@@ -7,7 +7,8 @@ import {
   FooterActions,
   FooterMutations,
   Direction,
-  BasicEffect
+  BasicEffect,
+  PlayMode
 } from '@/interface'
 import { Platform } from '@/config/build'
 import { asyncIpc, asyncIpcOrigin } from '@/electron/event/ipc-browser'
@@ -58,6 +59,12 @@ export const MusicControl = defineComponent({
       return formatTime(currentTime.value, 's')
     })
 
+    const changePlayMode = () => {
+      useMutations(
+        FooterMutations.CHANGE_PLAYMODE,
+        playMode.value === PlayMode.RANDOM ? PlayMode.TURN : PlayMode.RANDOM
+      )
+    }
     const prevMusic = () => {
       useActions(FooterActions.CUTOVER_TRACK, Direction.PREV)
     }
@@ -243,20 +250,16 @@ export const MusicControl = defineComponent({
         ></audio>
         <div class={`${prefix}-command-center`}>
           <div class={`${prefix}-command-group`}>
-            <ve-button type="text">
+            <ve-button type="text" onClick={changePlayMode}>
               <icon
                 icon={playMode.value}
                 color="#333"
                 size={16}
                 aria-title="播放顺序"
               ></icon>
             </ve-button>
-            <ve-button type="text" class="theme-btn-color">
-              <icon
-                icon="shangyishou"
-                aria-title="上一首"
-                onClick={prevMusic}
-              ></icon>
+            <ve-button type="text" class="theme-btn-color" onClick={prevMusic}>
+              <icon icon="shangyishou" aria-title="上一首"></icon>
             </ve-button>
             <ve-button
               type="text"

diff --git a/src/pages/footer/interface.ts b/src/pages/footer/interface.ts
@@ -9,7 +9,8 @@ export const enum BasicEffect {
 }
 
 export const enum PlayMode {
-  TURN = 'turn'
+  TURN = 'turn',
+  RANDOM = 'random'
 }
 
 export const enum Direction {
@@ -84,5 +85,6 @@ export const enum FooterMutations {
   LYRICE_EMBED_MIN_WIDTH = 'LYRICE_EMBED_MIN_WIDTH',
   SEEKBACKWARD = 'SEEKBACKWARD',
   SEEKFORWARD = 'SEEKFORWARD',
-  INIT_EFFECT = 'INIT_EFFECT'
+  INIT_EFFECT = 'INIT_EFFECT',
+  CHANGE_PLAYMODE = 'CHANGE_PLAYMODE'
 }
diff --git a/src/pages/footer/sage.ts b/src/pages/footer/sage.ts
@@ -1,6 +1,6 @@
 import { toRaw } from 'vue'
 import { ActionTree, MutationTree, GetterTree } from 'vuex'
-import { isNumber, timeTos, toFixed } from '@/utils/index'
+import { isNumber, timeTos, toFixed, renderRandom } from '@/utils/index'
 import { getSongDetail, getLyric } from '@/api/index'
 import {
   FooterState,
@@ -184,6 +184,8 @@ export const actions: ActionTree<FooterState, RootState> = {
             next = index === state.musicStack.length - 1 ? 0 : index + 1
           }
           break
+        case PlayMode.RANDOM:
+          next = renderRandom(state.musicStack.length, index)
       }
       const nextMusic = state.musicStack[next]
 
@@ -297,5 +299,8 @@ export const mutations: MutationTree<FooterState> = {
     if (state.audioElement) {
       state.effect = new AudioEffect(state.audioElement)
     }
+  },
+  [FooterMutations.CHANGE_PLAYMODE](state, mode: PlayMode) {
+    state.playMode = mode
   }
 }
diff --git a/src/pages/header/component/setting.tsx b/src/pages/header/component/setting.tsx
@@ -72,13 +72,13 @@ export const Setting = defineComponent({
     }
 
     return () => (
-      <div class="setting">
+      <div class="setting vchj">
         <ve-button
           type="text"
           class="header-window-btn"
           onClick={handleOpenSetting}
         >
-          <icon icon="setting"></icon>
+          <icon icon="setting-new" size={25}></icon>
         </ve-button>
         <ve-button type="text" class="header-window-btn">
           <Popover

diff --git a/src/utils/index.ts b/src/utils/index.ts
@@ -282,3 +282,15 @@ export const scrollAnmation = (
   }
   step()
 }
+
+export const renderRandom = (extent: number, index: number) => {
+  if (extent <= 1) return extent
+  const random = (): number => {
+    const n = Math.floor(Math.random() * extent)
+    if (n !== index) {
+      return n
+    }
+    return random()
+  }
+  return random()
+}