ztr/TelegramPWA
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Audio: Fix seeking while playing (#1776)

Browse Source
This commit is contained in:
Alexander Zinchuk 2022-03-19 21:19:54 +01:00
parent 12f5acb7e0
commit 539bd66a1d
1 changed files with 10 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/components/common/Audio.tsx
View File

@ -80,15 +80,15 @@ const Audio: FC<OwnProps> = ({
onCancelUpload, onCancelUpload,
onDateClick, onDateClick,
}) => { }) => {
const { cancelMessageMediaDownload, downloadMessageMedia } = getActions();
const { content: { audio, voice, video }, isMediaUnread } = message; const { content: { audio, voice, video }, isMediaUnread } = message;
const isVoice = Boolean(voice || video); const isVoice = Boolean(voice || video);
const isSeeking = useRef<boolean>(false); const isSeeking = useRef<boolean>(false);
const playStateBeforeSeeking = useRef<boolean>(false);
// eslint-disable-next-line no-null/no-null // eslint-disable-next-line no-null/no-null
const seekerRef = useRef<HTMLDivElement>(null); const seekerRef = useRef<HTMLDivElement>(null);
const lang = useLang(); const lang = useLang();
const { isRtl } = lang; const { isRtl } = lang;
const dispatch = getActions();
const [isActivated, setIsActivated] = useState(false); const [isActivated, setIsActivated] = useState(false);
const shouldLoad = (isActivated || PRELOAD) && lastSyncTime; const shouldLoad = (isActivated || PRELOAD) && lastSyncTime;
@ -120,7 +120,7 @@ const Audio: FC<OwnProps> = ({
} = useBuffering(); } = useBuffering();
const { const {
isPlaying, playProgress, playPause, play, pause, setCurrentTime, duration, isPlaying, playProgress, playPause, setCurrentTime, duration,
} = useAudioPlayer( } = useAudioPlayer(
makeTrackId(message), makeTrackId(message),
getMediaDuration(message)!, getMediaDuration(message)!,
@ -184,11 +184,11 @@ const Audio: FC<OwnProps> = ({
const handleDownloadClick = useCallback(() => { const handleDownloadClick = useCallback(() => {
if (isDownloading) { if (isDownloading) {
dispatch.cancelMessageMediaDownload({ message }); cancelMessageMediaDownload({ message });
} else { } else {
dispatch.downloadMessageMedia({ message }); downloadMessageMedia({ message });
} }
}, [dispatch, isDownloading, message]); }, [cancelMessageMediaDownload, downloadMessageMedia, isDownloading, message]);
const handleSeek = useCallback((e: MouseEvent | TouchEvent) => { const handleSeek = useCallback((e: MouseEvent | TouchEvent) => {
if (isSeeking.current && seekerRef.current) { if (isSeeking.current && seekerRef.current) {
@ -203,15 +203,12 @@ const Audio: FC<OwnProps> = ({
const handleStartSeek = useCallback((e: MouseEvent | TouchEvent) => { const handleStartSeek = useCallback((e: MouseEvent | TouchEvent) => {
if (e instanceof MouseEvent && e.button === 2) return; if (e instanceof MouseEvent && e.button === 2) return;
isSeeking.current = true; isSeeking.current = true;
playStateBeforeSeeking.current = isPlaying;
pause();
handleSeek(e); handleSeek(e);
}, [handleSeek, pause, isPlaying]); }, [handleSeek]);
const handleStopSeek = useCallback(() => { const handleStopSeek = useCallback(() => {
isSeeking.current = false; isSeeking.current = false;
if (playStateBeforeSeeking.current) play(); }, []);
}, [play]);
const handleDateClick = useCallback(() => { const handleDateClick = useCallback(() => {
onDateClick!(message.id, message.chatId); onDateClick!(message.id, message.chatId);
@ -270,10 +267,8 @@ const Audio: FC<OwnProps> = ({
const buttonClassNames = ['toggle-play']; const buttonClassNames = ['toggle-play'];
if (shouldRenderCross) { if (shouldRenderCross) {
buttonClassNames.push('loading'); buttonClassNames.push('loading');
} else if (isPlaying) { } else {
buttonClassNames.push('pause'); buttonClassNames.push(isPlaying ? 'pause' : 'play');
} else if (!isPlaying) {
buttonClassNames.push('play');
} }
const contentClassName = buildClassName('content', withSeekline && 'with-seekline'); const contentClassName = buildClassName('content', withSeekline && 'with-seekline');