feat: add ProgressBar

src/components/Layout/Footer/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Icon, Tooltip } from '@blueprintjs/core'
 
-// import Slider from 'components/Slider'
+import ProgressBar from 'components/ProgressBar'
 import Artists from 'components/Artists'
 import AudioTimer from 'components/AudioTimer'
 import { PlayMusicStateContext, PlayMusicDispatchContext, ACTIONS } from 'reducers/playMusic'
@@ -21,7 +21,7 @@ const Footer = () => {
   const audioRef = useRef<HTMLAudioElement>()
 
   useEffect(() => {
-    if (musicId === -1) {
+    if (musicId === 0) {
       return
     }
 
@@ -48,22 +48,14 @@ const Footer = () => {
     dispatch({ type: ACTIONS.TOGGLE_PLAY_STATUS })
   }
 
-  // const [slider, setSlider] = useState(0)
-
-  console.log('audio.duration => ', music?.song.duration)
-
   return (
     <div className={styles.root}>
-      {/* <div className={styles.progress}>
-        <Slider
-          value={slider}
-          max={music?.song.duration}
-          onRelease={(value) => {
-            console.log(value)
-            setSlider(value)
-          }}
-        />
-      </div> */}
+      {musicId ? (
+        <div className={styles.progressBar}>
+          <ProgressBar audio={audio} />
+        </div>
+      ) : null}
+
       <div className={styles.songWrap}>
         <img src={music?.picUrl ? `${music?.picUrl}?param=40y40` : undefined} />
         <div>

src/components/Layout/Footer/style.module.css

@@ -17,9 +17,9 @@
   background-color: #fff;
 }
 
-.progress {
+.progressBar {
   position: absolute;
-  top: -8px;
+  top: -2px;
   left: 0;
   width: 100%;
 }

src/components/ProgressBar/index.tsx

@@ -0,0 +1,83 @@
+import React from 'react'
+
+import useInterval from 'hooks/useInterval'
+import { formatTime } from 'helpers/time'
+import styles from './style.module.css'
+
+const { useState, useRef } = React
+
+interface IProps {
+  audio?: HTMLAudioElement
+}
+
+const ProgressBar: React.FC<IProps> = ({ audio }) => {
+  const [label, setLabel] = useState('')
+  const [donePercent, setDonePercent] = useState(0)
+  const barRef = useRef<HTMLDivElement | null>()
+
+  useInterval(() => {
+    const duration = audio?.duration
+    const currentTime = audio?.currentTime || 0
+    const percent = duration ? (currentTime / duration) : 0
+
+    setLabel(formatTime(audio?.currentTime))
+    setDonePercent(percent)
+  }, donePercent < 1 ? 500 : null)
+
+  const getPercent = (event: React.MouseEvent<HTMLDivElement>) => {
+    const clickX = event.pageX
+    const percent = barRef.current ? clickX / barRef.current.offsetWidth : 0
+    return percent
+  }
+
+  const handleBarClick = (event: React.MouseEvent<HTMLDivElement>) => {
+    const percent = getPercent(event)
+
+    // 修改audio的currentTime即可，百分比会在interval中自动重新计算
+    if (audio) {
+      audio.currentTime = audio.duration * percent
+    }
+  }
+
+  // TODO: Fix Drag Interaction
+  const handleDragOver = (event: React.DragEvent<HTMLDivElement>) => {
+    event.preventDefault()
+    event.dataTransfer.dropEffect = 'link'
+
+    const percent = getPercent(event)
+    setDonePercent(percent)
+  }
+
+  const handleDrop = (event: React.DragEvent<HTMLDivElement>) => {
+    event.preventDefault()
+
+    const percent = getPercent(event)
+
+    if (audio) {
+      audio.currentTime = audio.duration * percent
+    }
+  }
+
+  if (!audio) {
+    return null
+  }
+
+  return (
+    <div
+      className={styles.root}
+      onClick={handleBarClick}
+      ref={(ref) => barRef.current = ref}
+      onDragOver={handleDragOver}
+      onDrop={handleDrop}
+    >
+      <div className={styles.doneWrap} style={{ width: `${donePercent * 100}%` }}>
+        <div className={styles.done}></div>
+        <div className={styles.controllDot} draggable>
+          <div className={styles.label}>{label}</div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default ProgressBar

src/components/ProgressBar/style.module.css

@@ -0,0 +1,51 @@
+@value colors: "~styles/colors.module.css";
+@value red from colors;
+
+.root {
+  width: 100%;
+  &:hover {
+    .controllDot {
+      display: block;
+    }
+  }
+}
+
+.doneWrap {
+  position: relative;
+
+  .done {
+    width: 100%;
+    height: 2px;
+    background-color: red;
+  }
+
+  .controllDot {
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    background-color: red;
+    position: relative;
+    z-index: 10;
+    display: none;
+    position: absolute;
+    right: 0;
+    top: 0;
+    transform: translate(50%, -50%);
+
+    &:hover {
+      display: block;
+    }
+
+    .label {
+      padding: 0 5px;
+      position: absolute;
+      top: 13px;
+      left: 50%;
+      transform: translate(-50%, 0);
+      border-radius: 3px;
+      color: #fff;
+      font-size: 0.9em;
+      background-color: rgba(0, 0, 0, 0.6);
+    }
+  }
+}

src/reducers/playMusic.ts

@@ -26,7 +26,7 @@ export interface IState {
 }
 
 export const initialState = {
-  musicId: -1,
+  musicId: 0,
   isPlaying: false
 }