From de83208f30dc2c8bfa50bfb00090c9f5fceefb53 Mon Sep 17 00:00:00 2001 From: Arnei Date: Tue, 20 May 2025 10:53:23 +0200 Subject: [PATCH 1/4] Add "fullscreen" button Adds "fullscreen" buttons to the videos in the cutting tab. The goal is to give users a simple way to zoom in on a video in case they need to perceive details, like for example small text on a blackboard. TODO: Fullscreen button positioning --- src/main/SubtitleVideoArea.tsx | 3 ++ src/main/VideoPlayers.tsx | 81 +++++++++++++++++++++++++--------- 2 files changed, 62 insertions(+), 22 deletions(-) diff --git a/src/main/SubtitleVideoArea.tsx b/src/main/SubtitleVideoArea.tsx index cbf03a789..f37cd6bd4 100644 --- a/src/main/SubtitleVideoArea.tsx +++ b/src/main/SubtitleVideoArea.tsx @@ -142,6 +142,9 @@ const SubtitleVideoArea: React.FC<{ subtitleUrl={subtitleUrl} first={true} last={true} + isFullscreenPossible={false} + fullscreenPlayerIndex={undefined} + setFullscreenPlayerIndex={() => {}} selectIsPlaying={selectIsPlaying} selectIsMuted={selectIsMuted} selectCurrentlyAtInSeconds={selectCurrentlyAtInSeconds} diff --git a/src/main/VideoPlayers.tsx b/src/main/VideoPlayers.tsx index a940a259e..7ecfe7cfc 100644 --- a/src/main/VideoPlayers.tsx +++ b/src/main/VideoPlayers.tsx @@ -36,9 +36,10 @@ import { ActionCreatorWithPayload, AsyncThunk } from "@reduxjs/toolkit"; import { useTheme } from "../themes"; -import { backgroundBoxStyle } from "../cssStyles"; +import { backgroundBoxStyle, basicButtonStyle } from "../cssStyles"; import { BaseReactPlayerProps } from "react-player/base"; import { ErrorBox } from "@opencast/appkit"; +import { LuFullscreen } from "react-icons/lu"; const VideoPlayers: React.FC<{ refs?: React.MutableRefObject<(VideoPlayerForwardRef | null)[]>, @@ -56,6 +57,7 @@ const VideoPlayers: React.FC<{ const videoCount = useAppSelector(selectVideoCount); const [videoPlayers, setVideoPlayers] = useState([]); + const [fullscreenPlayerIndex, setFullscreenPlayerIndex] = useState(undefined); const videoPlayerAreaStyle = css({ display: "flex", @@ -65,7 +67,9 @@ const VideoPlayers: React.FC<{ borderRadius: "5px", gap: "10px", - maxHeight: maxHeightInPixel + "px", + maxHeight: fullscreenPlayerIndex === undefined + ? maxHeightInPixel + "px" + : maxHeightInPixel * 2 + "px", }); // Initialize video players @@ -81,6 +85,9 @@ const VideoPlayers: React.FC<{ subtitleUrl={""} first={i === 0} last={i === videoCount - 1} + isFullscreenPossible={true} + fullscreenPlayerIndex={fullscreenPlayerIndex} + setFullscreenPlayerIndex={setFullscreenPlayerIndex} selectIsPlaying={selectIsPlaying} selectIsMuted={selectIsMuted} selectVolume={selectVolume} @@ -103,7 +110,7 @@ const VideoPlayers: React.FC<{ ); } setVideoPlayers(videoPlayers); - }, [primaryIndex, refs, videoCount, videos]); + }, [primaryIndex, refs, videoCount, videos, fullscreenPlayerIndex]); return ( @@ -125,6 +132,9 @@ interface VideoPlayerProps { subtitleUrl: string, first: boolean, last: boolean, + isFullscreenPossible: boolean, + fullscreenPlayerIndex: number | undefined, + setFullscreenPlayerIndex: (index: number | undefined) => void, selectIsPlaying: (state: RootState) => boolean, selectIsMuted: (state: RootState) => boolean, selectVolume: (state: RootState) => number, @@ -167,6 +177,9 @@ export const VideoPlayer = React.forwardRef { if (!errorState) { return (
- + {/* wrapper for positioning fullscreen button*/} +
+ + {isFullscreenPossible && + + } +
); } else { From b00f941f9e912194ae56fa4f70bee470f3539a42 Mon Sep 17 00:00:00 2001 From: Arnei Date: Wed, 11 Jun 2025 10:58:40 +0200 Subject: [PATCH 2/4] Fix fullscreen for Safari This was written by @ferishili, many thanks! Fixes an issue where the video players would not show up IN SAFARI, leaving small empty boxes in their place. Only after clicking the full screen button a few times would the videos then show up. This fixes the issue by toggling the fullscreen button ourselves via code. We also confine this toggling to Safari, so that people who use reasonable browsers are not affected by any brief visual glitches this may result in. --- src/main/VideoPlayers.tsx | 32 ++++++++++++++++++++++++++++++-- 1 file changed, 30 insertions(+), 2 deletions(-) diff --git a/src/main/VideoPlayers.tsx b/src/main/VideoPlayers.tsx index 7ecfe7cfc..d9ce72e84 100644 --- a/src/main/VideoPlayers.tsx +++ b/src/main/VideoPlayers.tsx @@ -40,6 +40,7 @@ import { backgroundBoxStyle, basicButtonStyle } from "../cssStyles"; import { BaseReactPlayerProps } from "react-player/base"; import { ErrorBox } from "@opencast/appkit"; import { LuFullscreen } from "react-icons/lu"; +import { isSafari } from "react-device-detect"; const VideoPlayers: React.FC<{ refs?: React.MutableRefObject<(VideoPlayerForwardRef | null)[]>, @@ -420,10 +421,37 @@ export const VideoPlayer = React.forwardRef { + if (ready && isSafari) { + const timeout = setTimeout(() => { + setVideoPlayerWrapperDisplay("flex"); + }, 10); + return () => clearTimeout(timeout); + } + }, [ready]); + + // Watch fullscreenPlayerIndex and toggle display briefly, in order for Safari to update itself! + useEffect(() => { + if (fullscreenPlayerIndex !== undefined && isSafari) { + setVideoPlayerWrapperDisplay("none"); + const timeout = setTimeout(() => { + setVideoPlayerWrapperDisplay("flex"); + }, 10); + return () => clearTimeout(timeout); + } + }, [fullscreenPlayerIndex]); + const videoPlayerWrapperStyles = css({ height: "100%", width: "100%", - display: shouldHide ? "none" : "flex", + display: shouldHide ? "none" : videoPlayerWrapperDisplay, + + flexGrow: "1", // For single video, center! ...(first && last) && { justifyContent: "center" }, @@ -450,7 +478,7 @@ export const VideoPlayer = React.forwardRef Date: Mon, 20 Apr 2026 12:13:05 +0200 Subject: [PATCH 3/4] Add "pointer" css to fullscreen button --- src/main/VideoPlayers.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/main/VideoPlayers.tsx b/src/main/VideoPlayers.tsx index d9ce72e84..b83170d79 100644 --- a/src/main/VideoPlayers.tsx +++ b/src/main/VideoPlayers.tsx @@ -498,6 +498,7 @@ export const VideoPlayer = React.forwardRef { if (fullscreenPlayerIndex === undefined) { From b7550defdefb424060a3f73a6c9b936c649c0172 Mon Sep 17 00:00:00 2001 From: Arnei Date: Mon, 20 Apr 2026 14:43:02 +0200 Subject: [PATCH 4/4] Added aria-pressed to fullscreen button Also changed the icon to better reflect state. --- src/main/VideoPlayers.tsx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/main/VideoPlayers.tsx b/src/main/VideoPlayers.tsx index b83170d79..7e5765c1c 100644 --- a/src/main/VideoPlayers.tsx +++ b/src/main/VideoPlayers.tsx @@ -39,7 +39,7 @@ import { useTheme } from "../themes"; import { backgroundBoxStyle, basicButtonStyle } from "../cssStyles"; import { BaseReactPlayerProps } from "react-player/base"; import { ErrorBox } from "@opencast/appkit"; -import { LuFullscreen } from "react-icons/lu"; +import { LuMaximize2, LuMinimize2 } from "react-icons/lu"; import { isSafari } from "react-device-detect"; const VideoPlayers: React.FC<{ @@ -500,6 +500,7 @@ export const VideoPlayer = React.forwardRef { if (fullscreenPlayerIndex === undefined) { setFullscreenPlayerIndex(dataKey); @@ -507,7 +508,9 @@ export const VideoPlayer = React.forwardRef + > + {fullscreenPlayerIndex === undefined ? : } + }