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

optimized scrolls

Browse source
This commit is contained in:
Fedor Katurov 2019-10-23 10:42:25 +07:00
parent 948817e8fc
commit f169de370a
12 changed files with 110 additions and 98 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,4 +1,4 @@
import React, { useCallback, useState, useEffect } from 'react';
import React, { useCallback, useState, useEffect, memo } from 'react';
import { connect } from 'react-redux';
import { selectPlayer } from '~/redux/player/selectors';
import * as PLAYER_ACTIONS from '~/redux/player/actions';
@ -25,76 +25,85 @@ type Props = ReturnType<typeof mapStateToProps> &
file: IFile;
};
const AudioPlayerUnconnected = ({
file,
player: { file: current, status },
const AudioPlayerUnconnected = memo(
({
file,
player: { file: current, status },
playerSetFileAndPlay,
playerPlay,
playerPause,
playerSeek,
}: Props) => {
const [playing, setPlaying] = useState(false);
const [progress, setProgress] = useState<IPlayerProgress>({
progress: 0,
current: 0,
total: 0,
});
playerSetFileAndPlay,
playerPlay,
playerPause,
playerSeek,
}: Props) => {
const [playing, setPlaying] = useState(false);
const [progress, setProgress] = useState<IPlayerProgress>({ progress: 0, current: 0, total: 0 });
const onPlay = useCallback(() => {
if (current && current.id === file.id) {
if (status === PLAYER_STATES.PLAYING) return playerPause();
return playerPlay();
}
const onPlay = useCallback(() => {
if (current && current.id === file.id) {
if (status === PLAYER_STATES.PLAYING) return playerPause();
return playerPlay();
}
playerSetFileAndPlay(file);
}, [file, current, status, playerPlay, playerPause, playerSetFileAndPlay]);
playerSetFileAndPlay(file);
}, [file, current, status, playerPlay, playerPause, playerSetFileAndPlay]);
const onProgress = useCallback(
({ detail }: { detail: IPlayerProgress }) => {
if (!detail || !detail.total) return;
setProgress(detail);
},
[setProgress]
);
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]
);
const onSeek = useCallback(
event => {
event.stopPropagation();
const { clientX, target } = event;
const { left, width } = target.getBoundingClientRect();
playerSeek((clientX - left) / width);
},
[playerSeek]
);
useEffect(() => {
const active = current && current.id === file.id;
setPlaying(current && current.id === file.id);
useEffect(() => {
const active = current && current.id === file.id;
setPlaying(current && current.id === file.id);
if (active) Player.on('playprogress', onProgress);
if (active) Player.on('playprogress', onProgress);
return () => {
if (active) Player.off('playprogress', onProgress);
};
}, [file, current, setPlaying, onProgress]);
return () => {
if (active) Player.off('playprogress', onProgress);
};
}, [file, current, setPlaying, onProgress]);
const title =
file.metadata &&
(file.metadata.title ||
[file.metadata.id3artist, file.metadata.id3title].filter(el => !!el).join(' - '));
const title =
file.metadata &&
(file.metadata.title ||
[file.metadata.id3artist, file.metadata.id3title].filter(el => !!el).join(' - '));
return (
<div onClick={onPlay} className={classNames(styles.wrap, { playing })}>
<div className={styles.playpause}>
{playing && status === PLAYER_STATES.PLAYING ? (
<Icon icon="pause" />
) : (
<Icon icon="play" />
)}
</div>
<div className={styles.content}>
<div className={styles.title}>{title || 'Unknown'}</div>
return (
<div onClick={onPlay} className={classNames(styles.wrap, { playing })}>
<div className={styles.playpause}>
{playing && status === PLAYER_STATES.PLAYING ? <Icon icon="pause" /> : <Icon icon="play" />}
</div>
<div className={styles.content}>
<div className={styles.title}>{title || 'Unknown'}</div>
<div className={styles.progress} onClick={onSeek}>
<div className={styles.bar} style={{ width: `${progress.progress}%` }} />
<div className={styles.progress} onClick={onSeek}>
<div className={styles.bar} style={{ width: `${progress.progress}%` }} />
</div>
</div>
</div>
</div>
);
};
);
}
);
export const AudioPlayer = connect(
mapStateToProps,