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

Author: Arnei

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<JSX.Element[]>([]);
+  const [fullscreenPlayerIndex, setFullscreenPlayerIndex] = useState<number | undefined>(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,8 @@ const VideoPlayers: React.FC<{
           subtitleUrl={""}
           first={i === 0}
           last={i === videoCount - 1}
+          fullscreenPlayerIndex={fullscreenPlayerIndex}
+          setFullscreenPlayerIndex={setFullscreenPlayerIndex}
           selectIsPlaying={selectIsPlaying}
           selectIsMuted={selectIsMuted}
           selectVolume={selectVolume}
@@ -103,7 +109,7 @@ const VideoPlayers: React.FC<{
       );
     }
     setVideoPlayers(videoPlayers);
-  }, [primaryIndex, refs, videoCount, videos]);
+  }, [primaryIndex, refs, videoCount, videos, fullscreenPlayerIndex]);
 
 
   return (
@@ -125,6 +131,8 @@ interface VideoPlayerProps {
   subtitleUrl: string,
   first: boolean,
   last: boolean,
+  fullscreenPlayerIndex: number | undefined,
+  setFullscreenPlayerIndex: (index: number | undefined) => void,
   selectIsPlaying: (state: RootState) => boolean,
   selectIsMuted: (state: RootState) => boolean,
   selectVolume: (state: RootState) => number,
@@ -167,6 +175,8 @@ export const VideoPlayer = React.forwardRef<VideoPlayerForwardRef, VideoPlayerPr
       subtitleUrl,
       first,
       last,
+      fullscreenPlayerIndex,
+      setFullscreenPlayerIndex,
       selectCurrentlyAtInSeconds,
       selectPreviewTriggered,
       selectClickTriggered,
@@ -404,10 +414,13 @@ export const VideoPlayer = React.forwardRef<VideoPlayerForwardRef, VideoPlayerPr
       },
     });
 
+    const shouldHide = fullscreenPlayerIndex !== undefined && fullscreenPlayerIndex !== dataKey;
+
     const videoPlayerWrapperStyles = css({
+      position: "relative",   // For fullscreen buttons
       height: "100%",
       width: "100%",
-      display: "flex",
+      display: shouldHide ? "none" : "flex",
 
       // For single video, center!
       ...(first && last) && { justifyContent: "center" },
@@ -420,6 +433,9 @@ export const VideoPlayer = React.forwardRef<VideoPlayerForwardRef, VideoPlayerPr
 
       // For multi videos, in between, fit content and center!
       ...(!first && !last) && { justifyContent: "center", flexBasis: "fit-content" },
+
+      // If fullscreen, treat like single video
+      ...fullscreenPlayerIndex !== undefined && { justifyContent: "center" },
     });
 
     const render = () => {
@@ -444,6 +460,19 @@ export const VideoPlayer = React.forwardRef<VideoPlayerForwardRef, VideoPlayerPr
               config={playerConfig}
               disablePictureInPicture
             />
+            <button css={[basicButtonStyle(theme), css({
+              position: "absolute",
+              bottom: "10px",
+              right: "10px",
+            })]}
+            onClick={() => {
+              if (fullscreenPlayerIndex === undefined) {
+                setFullscreenPlayerIndex(dataKey);
+              } else {
+                setFullscreenPlayerIndex(undefined);
+              }
+            }}
+            ><LuFullscreen /></button>
           </div>
         );
       } else {