Updates to VideoPlayer controls

All controls and hotkeys work when the VideoPlayer is fullscreen

Controls are below video instead of inside of it

Controls have tooltips showing what they do and their hotkeys

Each control is a separate component that is used in both mobile and normal controls

Video Progress slider is above controls to save horizontal space

Controls will disappear when fullscreen if mouse leaves video player, or after 5 seconds of inactivity

Default port in vite.config.ts set to 3000 for simplicity.

package.json

@@ -25,6 +25,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-dropzone": "^14.2.3",
+    "react-idle-timer": "^5.7.2",
     "react-intersection-observer": "^9.4.3",
     "react-quill": "^2.0.0",
     "react-redux": "^8.0.5",

src/components/common/VideoPlayer/Components/MobileControlsBar.tsx

@@ -0,0 +1,66 @@
+import { MoreVert as MoreIcon } from "@mui/icons-material";
+import { Box, IconButton, Menu, MenuItem } from "@mui/material";
+import { useVideoContext } from "./VideoContext.ts";
+import {
+  FullscreenButton,
+  PictureInPictureButton,
+  PlaybackRate,
+  PlayButton,
+  ProgressSlider,
+  ReloadButton,
+  VideoTime,
+  VolumeButton,
+  VolumeSlider,
+} from "./VideoControls.tsx";
+
+export const MobileControlsBar = () => {
+  const { handleMenuOpen, handleMenuClose, anchorEl } = useVideoContext();
+
+  const controlGroupSX = { display: "flex", gap: "5px", alignItems: "center" };
+
+  return (
+    <>
+      <Box sx={controlGroupSX}>
+        <PlayButton />
+        <ReloadButton />
+        <ProgressSlider />
+        <VideoTime />
+      </Box>
+
+      <Box sx={controlGroupSX}>
+        <PlaybackRate />
+        <FullscreenButton />
+
+        <IconButton
+          edge="end"
+          color="inherit"
+          aria-label="menu"
+          onClick={handleMenuOpen}
+          sx={{ minWidth: "30px", paddingLeft: "0px" }}
+        >
+          <MoreIcon />
+        </IconButton>
+      </Box>
+      <Menu
+        id="simple-menu"
+        anchorEl={anchorEl.value}
+        keepMounted
+        open={Boolean(anchorEl.value)}
+        onClose={handleMenuClose}
+        PaperProps={{
+          style: {
+            width: "250px",
+          },
+        }}
+      >
+        <MenuItem>
+          <VolumeButton />
+          <VolumeSlider />
+        </MenuItem>
+        <MenuItem>
+          <PictureInPictureButton />
+        </MenuItem>
+      </Menu>
+    </>
+  );
+};

src/components/common/VideoPlayer/Components/VideoControls-State.ts

@@ -5,16 +5,8 @@ import { useEffect } from "react";
 import ReactDOM from "react-dom";
 import { useDispatch, useSelector } from "react-redux";
 import { Key } from "ts-key-enum";
-import { useIsMobile } from "../../../../hooks/useIsMobile.ts";
 import { setVideoPlaying } from "../../../../state/features/globalSlice.ts";
-import {
-  setIsMuted,
-  setMutedVolumeSetting,
-  setReduxPlaybackRate,
-  setStretchVideoSetting,
-  setVolumeSetting,
-} from "../../../../state/features/persistSlice.ts";
-import { RootState, store } from "../../../../state/store.ts";
+import { RootState } from "../../../../state/store.ts";
 import { useVideoPlayerState } from "../VideoPlayer-State.ts";
 import { VideoPlayerProps } from "../VideoPlayer.tsx";
 
@@ -38,6 +30,7 @@ export const useVideoControlsState = (
     progress,
     videoObjectFit,
     canPlay,
+    containerRef,
   } = videoPlayerState;
   const { identifier, autoPlay } = props;
 
@@ -78,16 +71,15 @@ export const useVideoControlsState = (
   const isFullscreen = useSignal(false);
 
   const enterFullscreen = () => {
-    if (!videoRef.current) return;
-    if (videoRef.current.requestFullscreen) {
-      videoRef.current.requestFullscreen();
+    if (!containerRef.current) return;
+
+    if (containerRef.current.requestFullscreen && !isFullscreen.value) {
+      containerRef.current.requestFullscreen();
     }
   };
 
   const exitFullscreen = () => {
-    if (document.exitFullscreen) {
-      document.exitFullscreen();
-    }
+    if (isFullscreen.value) document.exitFullscreen();
   };
 
   const toggleFullscreen = () => {
@@ -218,14 +210,20 @@ export const useVideoControlsState = (
     }
   };
 
-  const toggleStretchVideoSetting = () => {
-    const newStretchVideoSetting =
-      persistSelector.stretchVideoSetting === "contain" ? "fill" : "contain";
+  const setStretchVideoSetting = (value: "contain" | "fill") => {
+    videoObjectFit.value = value;
+  };
 
-    videoObjectFit.value = newStretchVideoSetting;
+  const toggleStretchVideoSetting = () => {
+    videoObjectFit.value =
+      videoObjectFit.value === "contain" ? "fill" : "contain";
   };
-  const keyboardShortcutsDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
+
+  const keyboardShortcuts = (
+    e: KeyboardEvent | React.KeyboardEvent<HTMLDivElement>
+  ) => {
     e.preventDefault();
+    // console.log("hotkey is: ", '"' + e.key + '"');
 
     switch (e.key) {
       case "o":
@@ -276,13 +274,6 @@ export const useVideoControlsState = (
       case Key.ArrowUp:
         changeVolume(0.05);
         break;
-    }
-  };
-
-  const keyboardShortcutsUp = (e: React.KeyboardEvent<HTMLDivElement>) => {
-    e.preventDefault();
-
-    switch (e.key) {
       case " ":
         togglePlay();
         break;
@@ -291,12 +282,20 @@ export const useVideoControlsState = (
         break;
 
       case "f":
-        enterFullscreen();
+        toggleFullscreen();
         break;
       case Key.Escape:
         exitFullscreen();
         break;
 
+      case "r":
+        reloadVideo();
+        break;
+
+      case "p":
+        togglePictureInPicture();
+        break;
+
       case "0":
         setProgressAbsolute(0);
         break;
@@ -360,11 +359,12 @@ export const useVideoControlsState = (
     increaseSpeed,
     togglePictureInPicture,
     toggleFullscreen,
-    keyboardShortcutsUp,
-    keyboardShortcutsDown,
+    keyboardShortcuts,
     handleCanPlay,
     toggleMute,
     showControlsFullScreen,
     setPlaying,
+    isFullscreen,
+    setStretchVideoSetting,
   };
 };