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

Media Viewer: Support keys to rewind video in fullscreen (#2888)

Browse Source
This commit is contained in:
Alexander Zinchuk 2023-03-30 18:25:46 -05:00
parent f2e9970077
commit fbdeb9fd40
1 changed files with 26 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
src/components/mediaViewer/VideoPlayer.tsx
View File

@ -9,6 +9,7 @@ import type { ApiDimensions } from '../../api/types';
import { IS_IOS, IS_TOUCH_ENV, IS_YA_BROWSER } from '../../util/windowEnvironment'; import { IS_IOS, IS_TOUCH_ENV, IS_YA_BROWSER } from '../../util/windowEnvironment';
import safePlay from '../../util/safePlay'; import safePlay from '../../util/safePlay';
import stopEvent from '../../util/stopEvent'; import stopEvent from '../../util/stopEvent';
import { clamp } from '../../util/math';
import useBuffering from '../../hooks/useBuffering'; import useBuffering from '../../hooks/useBuffering';
import useFullscreen from '../../hooks/useFullscreen'; import useFullscreen from '../../hooks/useFullscreen';
import usePictureInPicture from '../../hooks/usePictureInPicture'; import usePictureInPicture from '../../hooks/usePictureInPicture';
@ -45,6 +46,7 @@ type OwnProps = {
}; };
const MAX_LOOP_DURATION = 30; // Seconds const MAX_LOOP_DURATION = 30; // Seconds
const REWIND_STEP = 5; // Seconds
const VideoPlayer: FC<OwnProps> = ({ const VideoPlayer: FC<OwnProps> = ({
url, url,
@ -211,17 +213,35 @@ const VideoPlayer: FC<OwnProps> = ({
useEffect(() => { useEffect(() => {
if (!isMediaViewerOpen) return undefined; if (!isMediaViewerOpen) return undefined;
const togglePayingStateBySpace = (e: KeyboardEvent) => { const rewind = (dir: number) => {
if ((e.key === 'Enter' || e.key === ' ') && !isInPictureInPicture) { const video = videoRef.current!;
e.preventDefault(); video.currentTime = clamp(video.currentTime + dir * REWIND_STEP, 0, video.duration);
togglePlayState(e); };
const handleKeyDown = (e: KeyboardEvent) => {
if (isInPictureInPicture) return;
switch (e.key) {
case ' ':
case 'Enter':
e.preventDefault();
togglePlayState(e);
break;
case 'Left': // IE/Edge specific value
case 'ArrowLeft':
e.preventDefault();
rewind(-1);
break;
case 'Right': // IE/Edge specific value
case 'ArrowRight':
e.preventDefault();
rewind(1);
break;
} }
}; };
document.addEventListener('keydown', togglePayingStateBySpace, false); document.addEventListener('keydown', handleKeyDown, false);
return () => { return () => {
document.removeEventListener('keydown', togglePayingStateBySpace, false); document.removeEventListener('keydown', handleKeyDown, false);
}; };
}, [togglePlayState, isMediaViewerOpen, isInPictureInPicture]); }, [togglePlayState, isMediaViewerOpen, isInPictureInPicture]);