feat: added song loading status

src/components/loading/index.tsx

@@ -7,11 +7,14 @@ import './index.less'
 
 export const Loading = defineComponent({
   name: 'Loading',
-  setup() {
+  props: {
+    size: String
+  },
+  setup(props) {
     return function() {
       return (
         <div class="box-view">
-          <VantLoading type="spinner"></VantLoading>
+          <VantLoading type="spinner" {...props}></VantLoading>
         </div>
       )
     }

src/iconfont/index.ts

@@ -1,7 +1,7 @@
 import $script from 'scriptjs'
 import { noop } from '@/utils/index'
 
-const ICONFONT_URL = 'font_2132275_jivowrjkpg'
+const ICONFONT_URL = 'font_2132275_j86516oavzq'
 
 // repair electron packaging '//' protocol problem
 $script(`https://at.alicdn.com/t/${ICONFONT_URL}.js`, noop)

src/pages/footer/components/music-controller/index.less

@@ -39,9 +39,18 @@
   font-size: 12px;
 }
 
+@keyframes loading {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
 .theme-btn-color {
   color: var(--base-color);
   svg {
     fill: #5a5a5a !important;
   }
+  &--loading {
+    animation: loading 2s infinite linear;
+  }
 }

src/pages/footer/components/music-controller/index.tsx

@@ -1,4 +1,12 @@
-import { defineComponent, ref, toRefs, onMounted, computed, watch } from 'vue'
+import {
+  defineComponent,
+  ref,
+  toRefs,
+  onMounted,
+  computed,
+  watch,
+  watchEffect
+} from 'vue'
 import { toFixed, formatTime, sleep, isElectron } from '@/utils/index'
 import { Block } from '@/components/process-bar/block'
 import { ProgressBar } from '@/components/process-bar/index'
@@ -13,6 +21,7 @@ import {
 import { asyncIpc, asyncIpcOrigin } from '@/electron/event/ipc-browser'
 import { MiddlewareView, LyricsAction } from '@/electron/event/action-types'
 import './index.less'
+import classNames from 'classnames'
 
 const prefix = 'music'
 
@@ -36,7 +45,8 @@ export const MusicControl = defineComponent({
       currentTime,
       visibleFlash,
       duration,
-      effect
+      effect,
+      musicUrlLoading
     } = toRefs(useState())
 
     const musicDes = computed(() => useGetter('musicDes'))
@@ -49,6 +59,16 @@ export const MusicControl = defineComponent({
       })
     }
 
+    let cacheIcon = playingIcon.value
+    watchEffect(() => {
+      if (musicUrlLoading.value) {
+        cacheIcon = playingIcon.value
+        playingIcon.value = 'loading'
+      } else {
+        playingIcon.value = cacheIcon
+      }
+    })
+
     const durationTime = computed(() => {
       return formatTime(duration.value || 0, 's')
     })
@@ -71,6 +91,8 @@ export const MusicControl = defineComponent({
     }
 
     const handlePlayPaues = async () => {
+      // loading disabled play/paues
+      if (musicUrlLoading.value) return
       // It can be called after being triggered by the user
       if (!effect.value) {
         useMutations(FooterMutations.INIT_EFFECT)
@@ -262,7 +284,9 @@ export const MusicControl = defineComponent({
             <ve-button
               type="text"
               onClick={handlePlayPaues}
-              class="theme-btn-color"
+              class={classNames('theme-btn-color', {
+                'theme-btn-color--loading': musicUrlLoading.value
+              })}
             >
               <icon
                 icon={playingIcon.value}

src/pages/footer/interface.ts

@@ -29,6 +29,8 @@ export interface FooterState {
   playMode: PlayMode
   music?: SongsDetail
   musicUrl: string
+  musicUrlLoading: boolean
+  musicSourceLoading: boolean
   musicLyricsOrigin: string
   musciHistory: SongsDetail[]
   musicStack: SongsDetail[]
@@ -65,6 +67,7 @@ export const enum FooterActions {
 
 export const enum FooterMutations {
   SET_MUSIC_URL = 'SET_MUSIC_SINGLE_URL',
+  SET_MUSIC_URL_LOADING = 'SET_MUSIC_URL_LOADING',
   SET_LOCAL_MUSIC_URL = 'SET_LOCAL_MUSIC_URL',
   CLEAR_LOCAL_MUSIC_URL = 'CLEAR_LOCAL_MUSIC_URL',
   PLAY_MUSIC = 'PLAY_MUSIC',

src/pages/footer/sage.ts

@@ -144,6 +144,7 @@ export const actions: ActionTree<FooterState, RootState> = {
     { state, dispatch, commit },
     payload: number | { url: string; id: number }
   ) {
+    commit(FooterMutations.SET_MUSIC_URL_LOADING, true)
     let id, url
     if (typeof payload === 'number') {
       const data = await getMusicUrl(payload)
@@ -162,6 +163,7 @@ export const actions: ActionTree<FooterState, RootState> = {
       state.music = payload as SongsDetail
     }
     commit(FooterMutations.SET_MUSIC_URL, url)
+    commit(FooterMutations.SET_MUSIC_URL_LOADING, false)
   },
   async [FooterActions.SET_MUSIC_DEFAILT]({ state }, id: number | number[]) {
     const data = await getSongDetail(id)
@@ -200,6 +202,9 @@ export const actions: ActionTree<FooterState, RootState> = {
 }
 
 export const mutations: MutationTree<FooterState> = {
+  [FooterMutations.SET_MUSIC_URL_LOADING](state, loading: boolean) {
+    state.musicUrlLoading = loading
+  },
   [FooterMutations.LYRICS_EMBED_MIN_WIDTH](state, width: number) {
     state.lyriceEmbedMinWidth = width
   },

src/pages/footer/state.ts

@@ -8,6 +8,8 @@ export const state = {
   effect: null,
   playMode: PlayMode.TURN,
   musicUrl: '',
+  musicUrlLoading: false,
+  musicSourceLoading: true,
   musicLyricsOrigin: '',
   musciHistory: [],
   musicStack: [],

src/utils/http.ts

@@ -23,7 +23,7 @@ const baseURL = isDevelopment
 const http: AxiosInstance = Axios.create({
   withCredentials: true,
   baseURL: baseURL,
-  timeout: 20000
+  timeout: 30000
 })
 
 if (!isDevelopment && isElectron()) {