muerwre/vault-frontend
1
0
Fork 0
mirror of https://github.com/muerwre/vault-frontend.git synced 2025-04-25 04:46:40 +07:00
Code Packages Activity Actions

refactored playerbar component

Browse source
This commit is contained in:
Fedor Katurov 2021-11-21 17:31:50 +07:00
parent 6ca4c514bf
commit df217b41f7
9 changed files with 78 additions and 53 deletions
Download patch file Download diff file Expand all files Collapse all files

40
src/components/bars/PlayerBar/index.tsx
View file

@ -1,26 +1,21 @@
import React, { FC, useCallback, useEffect, useState } from 'react';
import React, { useCallback, useEffect, useState, VFC } from 'react';
import styles from './styles.module.scss';
import { Icon } from '~/components/input/Icon';
import { PLAYER_STATES } from '~/redux/player/constants';
import { connect } from 'react-redux';
import { pick } from 'ramda';
import { selectPlayer } from '~/redux/player/selectors';
import * as PLAYER_ACTIONS from '~/redux/player/actions';
import { IPlayerProgress, Player } from '~/utils/player';
import { PlayerState } from '~/redux/player/constants';
import { path } from 'ramda';
import { IPlayerProgress, Player } from '~/utils/player';
import { IFile } from '~/redux/types';
const mapStateToProps = state => pick(['status', 'file'], selectPlayer(state));
const mapDispatchToProps = {
playerPlay: PLAYER_ACTIONS.playerPlay,
playerPause: PLAYER_ACTIONS.playerPause,
playerSeek: PLAYER_ACTIONS.playerSeek,
playerStop: PLAYER_ACTIONS.playerStop,
};
interface Props {
status: PlayerState;
file?: IFile;
playerPlay: () => void;
playerPause: () => void;
playerSeek: (pos: number) => void;
playerStop: () => void;
}
type IProps = ReturnType<typeof mapStateToProps> & typeof mapDispatchToProps & {};
const PlayerBarUnconnected: FC<IProps> = ({
const PlayerBar: VFC<Props> = ({
status,
playerPlay,
playerPause,
@ -31,7 +26,7 @@ const PlayerBarUnconnected: FC<IProps> = ({
const [progress, setProgress] = useState<IPlayerProgress>({ progress: 0, current: 0, total: 0 });
const onClick = useCallback(() => {
if (status === PLAYER_STATES.PLAYING) return playerPause();
if (status === PlayerState.PLAYING) return playerPause();
return playerPlay();
}, [playerPlay, playerPause, status]);
@ -61,7 +56,7 @@ const PlayerBarUnconnected: FC<IProps> = ({
};
}, [onProgress]);
if (status === PLAYER_STATES.UNSET) return null;
if (status === PlayerState.UNSET) return null;
const metadata: IFile['metadata'] = path(['metadata'], file);
const title =
@ -73,7 +68,7 @@ const PlayerBarUnconnected: FC<IProps> = ({
<div className={styles.wrap}>
<div className={styles.status}>
<div className={styles.playpause} onClick={onClick}>
{status === PLAYER_STATES.PLAYING ? <Icon icon="pause" /> : <Icon icon="play" />}
{status === PlayerState.PLAYING ? <Icon icon="pause" /> : <Icon icon="play" />}
</div>
<div className={styles.info}>
@ -93,7 +88,4 @@ const PlayerBarUnconnected: FC<IProps> = ({
);
};
export const PlayerBar = connect(
mapStateToProps,
mapDispatchToProps
)(PlayerBarUnconnected);
export { PlayerBar };