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

removed player reducer, migrated to CRA 5

Browse source
This commit is contained in:
Fedor Katurov 2022-01-07 18:32:22 +07:00
parent 88f8fe21f7
commit 558e8f8a4f
211 changed files with 7131 additions and 10318 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,12 +1,13 @@
import React, { useCallback, useEffect, useState, VFC } from 'react';
import styles from './styles.module.scss';
import { Icon } from '~/components/input/Icon';
import { PlayerState } from '~/redux/player/constants';
import { path } from 'ramda';
import { IPlayerProgress, Player } from '~/utils/player';
import { IFile } from '~/redux/types';
import React, { useCallback, VFC } from "react";
import styles from "./styles.module.scss";
import { Icon } from "~/components/input/Icon";
import { PlayerState } from "~/constants/player";
import { path } from "ramda";
import { IFile } from "~/redux/types";
import { PlayerProgress } from "~/types/player";
interface Props {
progress: PlayerProgress;
status: PlayerState;
file?: IFile;
playerPlay: () => void;
@ -21,41 +22,24 @@ const PlayerBar: VFC<Props> = ({
playerPause,
playerSeek,
playerStop,
progress,
file,
}) => {
const [progress, setProgress] = useState<IPlayerProgress>({ progress: 0, current: 0, total: 0 });
const onClick = useCallback(() => {
if (status === PlayerState.PLAYING) return playerPause();
return playerPlay();
}, [playerPlay, playerPause, status]);
const onProgress = useCallback(
({ 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(((clientX - left) / width) * 100);
},
[playerSeek]
);
useEffect(() => {
Player.on('playprogress', onProgress);
return () => {
Player.off('playprogress', onProgress);
};
}, [onProgress]);
if (status === PlayerState.UNSET) return null;
const metadata: IFile['metadata'] = path(['metadata'], file);