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

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

17
src/utils/hooks/player/usePlayer.ts Normal file
View file

@ -0,0 +1,17 @@
import { useShallowSelect } from '~/utils/hooks/useShallowSelect';
import { selectPlayer } from '~/redux/player/selectors';
import { useCallback } from 'react';
import { playerPause, playerPlay, playerSeek, playerStop } from '~/redux/player/actions';
import { useDispatch } from 'react-redux';
export const usePlayer = () => {
const { status, file } = useShallowSelect(selectPlayer);
const dispatch = useDispatch();
const onPlayerPlay = useCallback(() => dispatch(playerPlay()), [dispatch]);
const onPlayerPause = useCallback(() => dispatch(playerPause()), [dispatch]);
const onPlayerSeek = useCallback((pos: number) => dispatch(playerSeek(pos)), [dispatch]);
const onPlayerStop = useCallback(() => dispatch(playerStop()), [dispatch]);
return { status, file, onPlayerPlay, onPlayerSeek, onPlayerPause, onPlayerStop };
};

8
src/utils/player.ts
View file

@ -1,6 +1,6 @@
import { store } from '~/redux/store';
import { playerSetStatus, playerStopped } from '~/redux/player/actions';
import { PLAYER_STATES } from '~/redux/player/constants';
import { PlayerState } from '~/redux/player/constants';
type PlayerEventType = keyof HTMLMediaElementEventMap;
@ -81,10 +81,8 @@ export class PlayerClass {
const Player = new PlayerClass();
// Player.element.addEventListener('playprogress', ({ detail }: CustomEvent) => console.log(detail));
Player.on('play', () => store.dispatch(playerSetStatus(PLAYER_STATES.PLAYING)));
Player.on('pause', () => store.dispatch(playerSetStatus(PLAYER_STATES.PAUSED)));
Player.on('play', () => store.dispatch(playerSetStatus(PlayerState.PLAYING)));
Player.on('pause', () => store.dispatch(playerSetStatus(PlayerState.PAUSED)));
Player.on('stop', () => store.dispatch(playerStopped()));
Player.on('error', () => store.dispatch(playerStopped()));