AudioPlayer initial

src/components/main/Header/index.tsx

@@ -1,9 +1,8 @@
-import React, { FC, useCallback, useEffect } from 'react';
+import React, { FC, useCallback } from 'react';
 import { connect } from 'react-redux';
 import { push as historyPush } from 'connected-react-router';
 import { Link } from 'react-router-dom';
 import { Logo } from '~/components/main/Logo';
-import { Player } from '~/utils/player';
 
 import * as style from './style.scss';
 import { Filler } from '~/components/containers/Filler';
@@ -11,8 +10,11 @@ import { selectUser } from '~/redux/auth/selectors';
 import { Group } from '~/components/containers/Group';
 import * as MODAL_ACTIONS from '~/redux/modal/actions';
 import { DIALOGS } from '~/redux/modal/constants';
+import { pick } from 'ramda';
 
-const mapStateToProps = selectUser;
+const mapStateToProps = state => ({
+  user: pick(['username', 'is_user'])(selectUser(state)),
+});
 
 const mapDispatchToProps = {
   push: historyPush,
@@ -21,14 +23,10 @@ const mapDispatchToProps = {
 
 type IProps = ReturnType<typeof mapStateToProps> & typeof mapDispatchToProps & {};
 
-const HeaderUnconnected: FC<IProps> = ({ username, is_user, showDialog }) => {
+const HeaderUnconnected: FC<IProps> = ({ user: { username, is_user }, showDialog }) => {
   const onLogin = useCallback(() => showDialog(DIALOGS.LOGIN), [showDialog]);
   const onOpenEditor = useCallback(() => showDialog(DIALOGS.EDITOR), [showDialog]);
 
-  useEffect(() => {
-    console.log({ Player });
-  }, []);
-
   return (
     <div className={style.container}>
       <Logo />

src/components/media/AudioPlayer/index.tsx

@@ -1,5 +1,73 @@
-import React from 'react';
+import React, { useCallback, useState, useEffect } from 'react';
+import { connect } from 'react-redux';
+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';
 
-export const AudioPlayer = () => <div>PLAYER</div>;
+const mapStateToProps = state => ({
+  player: selectPlayer(state),
+});
 
-export default AudioPlayer;
+const mapDispatchToProps = {
+  playerSetFile: PLAYER_ACTIONS.playerSetFile,
+  playerPlay: PLAYER_ACTIONS.playerPlay,
+  playerPause: PLAYER_ACTIONS.playerPause,
+};
+
+type Props = ReturnType<typeof mapStateToProps> &
+  typeof mapDispatchToProps & {
+    file: IFile;
+  };
+
+const AudioPlayerUnconnected = ({
+  file,
+  player: { file: current, status },
+
+  playerSetFile,
+  playerPlay,
+  playerPause,
+}: Props) => {
+  const [playing, setPlaying] = useState(false);
+  const [progress, setProgress] = useState(0);
+
+  const onPlay = useCallback(() => {
+    if (current && current.id === file.id) {
+      if (status === PLAYER_STATES.PLAYING) return playerPause();
+      return playerPlay();
+    }
+
+    playerSetFile(file);
+  }, [file, current, status, playerPlay, playerPause, playerSetFile]);
+
+  const onProgress = useCallback(
+    ({ detail }) => {
+      if (!detail || !detail.progress) return;
+      setProgress(detail.progress);
+    },
+    [setProgress]
+  );
+
+  useEffect(() => {
+    const active = current && current.id === file.id;
+    setPlaying(current && current.id === file.id);
+
+    if (active) Player.on('playprogress', onProgress);
+
+    return () => {
+      if (active) Player.off('playprogress', onProgress);
+    };
+  }, [file, current, setPlaying, onProgress]);
+
+  return (
+    <div onClick={onPlay}>
+      - {file.url} - {progress} - {playing && 'playing'}
+    </div>
+  );
+};
+
+export const AudioPlayer = connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(AudioPlayerUnconnected);

src/components/node/Comment/index.tsx

@@ -8,8 +8,7 @@ import assocPath from 'ramda/es/assocPath';
 import append from 'ramda/es/append';
 import reduce from 'ramda/es/reduce';
 import { UPLOAD_TYPES } from '~/redux/uploads/constants';
-import { Player } from '~/utils/player';
-import classNames from 'classnames';
+import { AudioPlayer } from '~/components/media/AudioPlayer';
 
 type IProps = HTMLAttributes<HTMLDivElement> & {
   is_empty?: boolean;
@@ -65,16 +64,7 @@ const Comment: FC<IProps> = ({ comment, is_empty, is_same, is_loading, className
       {groupped.audio && (
         <div className={styles.audios}>
           {groupped.audio.map(file => (
-            <div
-              key={file.id}
-              onClick={() => {
-                Player.set(getURL(file));
-                Player.load();
-                Player.play();
-              }}
-            >
-              {file.name}
-            </div>
+            <AudioPlayer key={file.id} file={file} />
           ))}
         </div>
       )}