player seeking

src/components/media/AudioPlayer/index.tsx

@@ -4,7 +4,7 @@ import { selectPlayer } from '~/redux/player/selectors';
 import * as PLAYER_ACTIONS from '~/redux/player/actions';
 import { IFile } from '~/redux/types';
 import { PLAYER_STATES } from '~/redux/player/constants';
-import { Player } from '~/utils/player';
+import { Player, IPlayerProgress } from '~/utils/player';
 import classNames from 'classnames';
 import * as styles from './styles.scss';
 import { Icon } from '~/components/input/Icon';
@@ -17,6 +17,7 @@ const mapDispatchToProps = {
   playerSetFile: PLAYER_ACTIONS.playerSetFile,
   playerPlay: PLAYER_ACTIONS.playerPlay,
   playerPause: PLAYER_ACTIONS.playerPause,
+  playerSeek: PLAYER_ACTIONS.playerSeek,
 };
 
 type Props = ReturnType<typeof mapStateToProps> &
@@ -31,9 +32,10 @@ const AudioPlayerUnconnected = ({
   playerSetFile,
   playerPlay,
   playerPause,
+  playerSeek,
 }: Props) => {
   const [playing, setPlaying] = useState(false);
-  const [progress, setProgress] = useState(0);
+  const [progress, setProgress] = useState<IPlayerProgress>({ progress: 0, current: 0, total: 0 });
 
   const onPlay = useCallback(() => {
     if (current && current.id === file.id) {
@@ -45,13 +47,23 @@ const AudioPlayerUnconnected = ({
   }, [file, current, status, playerPlay, playerPause, playerSetFile]);
 
   const onProgress = useCallback(
-    ({ detail }) => {
-      if (!detail || !detail.progress) return;
-      setProgress(detail.progress);
+    ({ detail }: { detail: IPlayerProgress }) => {
+      if (!detail || !detail.total) return;
+      setProgress(detail);
     },
     [setProgress]
   );
 
+  const onSeek = useCallback(
+    event => {
+      event.stopPropagation();
+      const { clientX, target } = event;
+      const { left, width } = target.getBoundingClientRect();
+      playerSeek((clientX - left) / width);
+    },
+    [playerSeek]
+  );
+
   useEffect(() => {
     const active = current && current.id === file.id;
     setPlaying(current && current.id === file.id);
@@ -63,14 +75,16 @@ const AudioPlayerUnconnected = ({
     };
   }, [file, current, setPlaying, onProgress]);
 
+  console.log({ progress });
+
   return (
     <div onClick={onPlay} className={classNames(styles.wrap, { playing })}>
       <div className={styles.playpause}>
         {playing && status === PLAYER_STATES.PLAYING ? <Icon icon="pause" /> : <Icon icon="play" />}
       </div>
       <div className={styles.content}>
-        <div className={styles.progress}>
-          <div className={styles.bar} style={{ width: `${progress}%` }} />
+        <div className={styles.progress} onClick={onSeek}>
+          <div className={styles.bar} style={{ width: `${progress.progress}%` }} />
         </div>
         <div className={styles.title}>{file.url}</div>
       </div>

src/components/media/AudioPlayer/styles.scss

@@ -10,7 +10,7 @@
     }
 
     .title {
-      top: 15px;
+      top: 20px;
       opacity: 1;
       font-size: 12px;
       padding-right: 140px;
@@ -46,7 +46,7 @@
   display: flex;
   flex-direction: column;
   min-width: 0;
-  padding: 0 $gap;
+  padding: 0 $gap * 2 0 $gap;
   position: relative;
 }
 
@@ -58,7 +58,7 @@
   bottom: 0;
   left: 0;
   width: 100%;
-  opacity: 0.2;
+  opacity: 0.7;
   pointer-events: none;
   touch-action: none;
   padding: 0 10px;
@@ -67,6 +67,7 @@
   top: 0;
   text-align: left;
   transition: all 0.5s;
+  font: $font_16_medium;
 }
 
 .progress {
@@ -77,6 +78,7 @@
   touch-action: none;
   transition: opacity 0.5s;
   left: 0;
+  cursor: pointer;
 
   &::after {
     content: ' ';
@@ -98,4 +100,5 @@
   top: 5px;
   border-radius: 5px;
   min-width: 10px;
+  transition: width 0.5s;
 }

src/components/node/Comment/styles.scss

@@ -5,10 +5,11 @@
 
   padding: $gap;
   font-weight: 300;
-  font: $font_16_regular;
+  font: $font_16_medium;
   min-height: $comment_height;
   box-sizing: border-box;
   position: relative;
+  color: #cccccc;
 
   b {
     font-weight: 600;

src/redux/player/actions.ts

@@ -18,3 +18,8 @@ export const playerPlay = () => ({
 export const playerPause = () => ({
   type: PLAYER_ACTIONS.PAUSE,
 });
+
+export const playerSeek = (seek: number) => ({
+  type: PLAYER_ACTIONS.SEEK,
+  seek,
+});

src/redux/player/constants.ts

@@ -6,6 +6,7 @@ export const PLAYER_ACTIONS = {
 
   PLAY: `${prefix}PLAY`,
   PAUSE: `${prefix}PAUSE`,
+  SEEK: `${prefix}SEEK`,
 };
 
 export const PLAYER_STATES = {

src/redux/player/sagas.ts

@@ -1,6 +1,6 @@
 import { takeLatest } from 'redux-saga/effects';
 import { PLAYER_ACTIONS } from './constants';
-import { playerSetFile } from './actions';
+import { playerSetFile, playerSeek } from './actions';
 import { Player } from '~/utils/player';
 import { getURL } from '~/utils/dom';
 
@@ -17,8 +17,14 @@ function pauseSaga() {
   Player.pause();
 }
 
+function seekSaga({ seek }: ReturnType<typeof playerSeek>) {
+  Player.jumpToPercent(seek * 100);
+  console.log(seek * 100);
+}
+
 export default function* playerSaga() {
   yield takeLatest(PLAYER_ACTIONS.SET_FILE, setFileSaga);
   yield takeLatest(PLAYER_ACTIONS.PAUSE, pauseSaga);
   yield takeLatest(PLAYER_ACTIONS.PLAY, playSaga);
+  yield takeLatest(PLAYER_ACTIONS.SEEK, seekSaga);
 }

src/utils/player.ts

@@ -9,6 +9,12 @@ type PlayerEventListener = (
   event: HTMLMediaElementEventMap[keyof HTMLMediaElementEventMap]
 ) => void;
 
+export interface IPlayerProgress {
+  current: number;
+  total: number;
+  progress: number;
+}
+
 export class PlayerClass {
   public constructor() {
     this.element.addEventListener('timeupdate', () => {