diff --git a/frontend/src/components/VideoPlayer.tsx b/frontend/src/components/VideoPlayer.tsx index 7cfeb071..58dc48d6 100644 --- a/frontend/src/components/VideoPlayer.tsx +++ b/frontend/src/components/VideoPlayer.tsx @@ -128,14 +128,19 @@ const VideoPlayer = ({ const [isMuted, setIsMuted] = useState(false); const [playbackSpeedIndex, setPlaybackSpeedIndex] = useState(3); const [lastSubtitleTack, setLastSubtitleTack] = useState(0); + const [showHelpDialog, setShowHelpDialog] = useState(false); + const [showInfoDialog, setShowInfoDialog] = useState(false); + const [infoDialogContent, setInfoDialogContent] = useState(''); - // const questionmarkPressed = useKeyPress('?'); + const questionmarkPressed = useKeyPress('?'); const mutePressed = useKeyPress('m'); const fullscreenPressed = useKeyPress('f'); const subtitlesPressed = useKeyPress('c'); const increasePlaybackSpeedPressed = useKeyPress('>'); const decreasePlaybackSpeedPressed = useKeyPress('<'); const resetPlaybackSpeedPressed = useKeyPress('='); + const arrowRightPressed = useKeyPress('ArrowRight'); + const arrowLeftPressed = useKeyPress('ArrowLeft'); const videoId = video.data.youtube_id; const videoUrl = video.data.media_url; @@ -151,6 +156,16 @@ const VideoPlayer = ({ videoSrcProgress = searchParamVideoProgress; } + const infoDialog = (content: string) => { + setInfoDialogContent(content); + setShowInfoDialog(true); + + setTimeout(() => { + setShowInfoDialog(false); + setInfoDialogContent(''); + }, 500); + }; + const handleVideoEnd = ( youtubeId: string, @@ -194,9 +209,11 @@ const VideoPlayer = ({ const newSpeed = playbackSpeedIndex + 1; if (videoRef.current && VIDEO_PLAYBACK_SPEEDS[newSpeed]) { - videoRef.current.playbackRate = VIDEO_PLAYBACK_SPEEDS[newSpeed]; + const speed = VIDEO_PLAYBACK_SPEEDS[newSpeed]; + videoRef.current.playbackRate = speed; setPlaybackSpeedIndex(newSpeed); + infoDialog(`${speed}x`); } } // eslint-disable-next-line react-hooks/exhaustive-deps @@ -207,9 +224,11 @@ const VideoPlayer = ({ const newSpeedIndex = playbackSpeedIndex - 1; if (videoRef.current && VIDEO_PLAYBACK_SPEEDS[newSpeedIndex]) { - videoRef.current.playbackRate = VIDEO_PLAYBACK_SPEEDS[newSpeedIndex]; + const speed = VIDEO_PLAYBACK_SPEEDS[newSpeedIndex]; + videoRef.current.playbackRate = speed; setPlaybackSpeedIndex(newSpeedIndex); + infoDialog(`${speed}x`); } } // eslint-disable-next-line react-hooks/exhaustive-deps @@ -220,9 +239,11 @@ const VideoPlayer = ({ const newSpeedIndex = 3; if (videoRef.current && VIDEO_PLAYBACK_SPEEDS[newSpeedIndex]) { - videoRef.current.playbackRate = VIDEO_PLAYBACK_SPEEDS[newSpeedIndex]; + const speed = VIDEO_PLAYBACK_SPEEDS[newSpeedIndex]; + videoRef.current.playbackRate = speed; setPlaybackSpeedIndex(newSpeedIndex); + infoDialog(`${speed}x`); } } }, [resetPlaybackSpeedPressed]); @@ -230,10 +251,14 @@ const VideoPlayer = ({ useEffect(() => { if (fullscreenPressed) { if (videoRef.current && videoRef.current.requestFullscreen && !document.fullscreenElement) { - videoRef.current.requestFullscreen(); + videoRef.current.requestFullscreen().catch(e => { + console.error(e); + infoDialog('Unable to enter fullscreen'); + }); } else { document.exitFullscreen().catch(e => { console.error(e); + infoDialog('Unable to exit fullscreen'); }); } } @@ -265,6 +290,31 @@ const VideoPlayer = ({ // eslint-disable-next-line react-hooks/exhaustive-deps }, [subtitlesPressed]); + useEffect(() => { + if (arrowLeftPressed) { + infoDialog('- 5 seconds'); + } + }, [arrowLeftPressed]); + + useEffect(() => { + if (arrowRightPressed) { + infoDialog('+ 5 seconds'); + } + }, [arrowRightPressed]); + + useEffect(() => { + if (questionmarkPressed) { + if (!showHelpDialog) { + setTimeout(() => { + setShowHelpDialog(false); + }, 3000); + } + + setShowHelpDialog(!showHelpDialog); + } + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [questionmarkPressed]); + return ( <>
@@ -320,6 +370,60 @@ const VideoPlayer = ({
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Show help?
Toggle mutem
Toggle fullscreenf
Toggle subtitles (if available)c
Increase speed>
Decrease speed<
Reset speed=
Back 5 seconds
Forward 5 seconds
+ +
+ +
+
+
+ + +
{infoDialogContent}
+
+
{sponsorBlock?.is_enabled && ( <> diff --git a/frontend/src/style.css b/frontend/src/style.css index e8b91ced..b212c000 100644 --- a/frontend/src/style.css +++ b/frontend/src/style.css @@ -790,7 +790,8 @@ video:-webkit-full-screen { position: absolute; z-index: 1; top: 20%; - width: 100%; + transform: translateX(-50%); + left: 50%; text-align: center; } @@ -798,7 +799,16 @@ video:-webkit-full-screen { background: rgba(0, 0, 0, 0.5); color: #eeeeee; font-size: 1.3em; - display: none; +} + +.video-modal-table { + margin: auto; + background: rgba(0, 0, 0, 0.5); +} + +.video-modal-form { + margin: auto; + background: rgba(0, 0, 0, 0.5); } .video-main video {