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

better audio player

Browse source
This commit is contained in:
Fedor Katurov 2019-10-15 17:30:31 +07:00
parent 87b9b5f514
commit c84dfdd2ab
7 changed files with 54 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -8,12 +8,15 @@ import pick from 'ramda/es/pick';
import { selectPlayer } from '~/redux/player/selectors';
import * as PLAYER_ACTIONS from '~/redux/player/actions';
import { IPlayerProgress, Player } from '~/utils/player';
import path from 'ramda/es/path';
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,
};
type IProps = ReturnType<typeof mapStateToProps> & typeof mapDispatchToProps & {};
@ -23,6 +26,7 @@ const PlayerBarUnconnected: FC<IProps> = ({
playerPlay,
playerPause,
playerSeek,
playerStop,
file,
}) => {
const [progress, setProgress] = useState<IPlayerProgress>({ progress: 0, current: 0, total: 0 });
@ -60,10 +64,10 @@ const PlayerBarUnconnected: FC<IProps> = ({
if (status === PLAYER_STATES.UNSET) return null;
const metadata: IFile['metadata'] = path(['metadata'], file);
const title =
file.metadata &&
(file.metadata.title ||
[file.metadata.id3artist, file.metadata.id3title].filter(el => !!el).join(' - '));
metadata &&
(metadata.title || [metadata.id3artist, metadata.id3title].filter(el => !!el).join(' - '));
return (
<div className={styles.place}>
@ -81,7 +85,7 @@ const PlayerBarUnconnected: FC<IProps> = ({
</div>
</div>
<div className={styles.close}>
<div className={styles.close} onClick={playerStop}>
<Icon icon="close" />
</div>
</div>

1
src/components/bars/PlayerBar/styles.scss
View file

@ -63,6 +63,7 @@
}
.info {
flex: 1;
display: flex;
min-width: 0;
align-items: center;

8
src/components/media/AudioPlayer/index.tsx
View file

@ -14,7 +14,7 @@ const mapStateToProps = state => ({
});
const mapDispatchToProps = {
playerSetFile: PLAYER_ACTIONS.playerSetFile,
playerSetFileAndPlay: PLAYER_ACTIONS.playerSetFileAndPlay,
playerPlay: PLAYER_ACTIONS.playerPlay,
playerPause: PLAYER_ACTIONS.playerPause,
playerSeek: PLAYER_ACTIONS.playerSeek,
@ -29,7 +29,7 @@ const AudioPlayerUnconnected = ({
file,
player: { file: current, status },
playerSetFile,
playerSetFileAndPlay,
playerPlay,
playerPause,
playerSeek,
@ -43,8 +43,8 @@ const AudioPlayerUnconnected = ({
return playerPlay();
}
playerSetFile(file);
}, [file, current, status, playerPlay, playerPause, playerSetFile]);
playerSetFileAndPlay(file);
}, [file, current, status, playerPlay, playerPause, playerSetFileAndPlay]);
const onProgress = useCallback(
({ detail }: { detail: IPlayerProgress }) => {