Mouse cursor doesn't show when video is fullscreen and the mouse is i…

…dle for more than 5 seconds.

Added hotkey "c" that toggles always showing controls when fullscreen, even if idle.

Removed duplicate Other category, added Paranormal and Spirituality categories due to community requests for it.

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

@@ -30,6 +30,7 @@ export const useVideoControlsState = (
     videoObjectFit,
     canPlay,
     containerRef,
+    alwaysShowControls,
   } = videoPlayerState;
   const { identifier, autoPlay } = props;
 
@@ -218,6 +219,9 @@ export const useVideoControlsState = (
       videoObjectFit.value === "contain" ? "fill" : "contain";
   };
 
+  const toggleAlwaysShowControls = () => {
+    alwaysShowControls.value = !alwaysShowControls.value;
+  };
   const keyboardShortcuts = (
     e: KeyboardEvent | React.KeyboardEvent<HTMLDivElement>
   ) => {
@@ -228,7 +232,9 @@ export const useVideoControlsState = (
       case "o":
         toggleObjectFit();
         break;
-
+      case "c":
+        toggleAlwaysShowControls();
+        break;
       case Key.Add:
         increaseSpeed(false);
         break;

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

@@ -16,6 +16,7 @@ import { useDispatch, useSelector } from "react-redux";
 import { smallVideoSize } from "../../../constants/Misc.ts";
 import { setVideoPlaying } from "../../../state/features/globalSlice.ts";
 import {
+  setAlwaysShowControls,
   setIsMuted,
   setMutedVolumeSetting,
   setReduxPlaybackRate,
@@ -44,6 +45,9 @@ export const useVideoPlayerState = (props: VideoPlayerProps, ref: any) => {
   const videoObjectFit = useSignal<StretchVideoType>(
     persistSelector.stretchVideoSetting
   );
+  const alwaysShowControls = useSignal<boolean>(
+    persistSelector.alwaysShowControls
+  );
 
   useSignalEffect(() => {
     dispatch(setIsMuted(isMuted.value));
@@ -63,6 +67,9 @@ export const useVideoPlayerState = (props: VideoPlayerProps, ref: any) => {
   useSignalEffect(() => {
     dispatch(setStretchVideoSetting(videoObjectFit.value));
   });
+  useSignalEffect(() => {
+    dispatch(setAlwaysShowControls(alwaysShowControls.value));
+  });
 
   const anchorEl = useSignal(null);
 
@@ -312,5 +319,6 @@ export const useVideoPlayerState = (props: VideoPlayerProps, ref: any) => {
     anchorEl,
     videoObjectFit,
     isScreenSmall,
+    alwaysShowControls,
   };
 };

src/components/common/VideoPlayer/VideoPlayer.tsx

@@ -56,11 +56,13 @@ export const VideoPlayer = forwardRef<videoRefType, VideoPlayerProps>(
       videoObjectFit,
       showControlsFullScreen,
       isFullscreen,
+      alwaysShowControls,
     } = contextData;
 
     const showControls =
       !isFullscreen.value ||
-      (isFullscreen.value && showControlsFullScreen.value);
+      (isFullscreen.value && showControlsFullScreen.value) ||
+      alwaysShowControls.value;
 
     const idleTime = 5000; // Time in milliseconds
     useIdleTimeout({
@@ -76,6 +78,10 @@ export const VideoPlayer = forwardRef<videoRefType, VideoPlayerProps>(
           onKeyDown={keyboardShortcuts}
           style={{
             padding: from === "create" ? "8px" : 0,
+            cursor:
+              !showControlsFullScreen.value && isFullscreen.value
+                ? "none"
+                : "auto",
             ...videoStyles?.videoContainer,
           }}
           onMouseEnter={e => {
@@ -105,7 +111,7 @@ export const VideoPlayer = forwardRef<videoRefType, VideoPlayerProps>(
               ...videoStyles?.video,
               objectFit: videoObjectFit.value,
               height:
-                isFullscreen.value && showControlsFullScreen.value
+                isFullscreen.value && showControls
                   ? "calc(100vh - 40px)"
                   : "100%",
             }}

src/constants/Categories.ts

@@ -34,11 +34,12 @@ export const categories = [
   { id: 19, name: "Nature & Environment" },
   { id: 20, name: "Business & Finance" },
   { id: 21, name: "Personal Development" },
-  { id: 22, name: "Other" },
   { id: 23, name: "History" },
   { id: 24, name: "Anime" },
   { id: 25, name: "Cartoons" },
   { id: 26, name: "Qortal" },
+  { id: 27, name: "Paranormal" },
+  { id: 28, name: "Spirituality" },
   { id: 99, name: "Other" },
 ].sort(sortCategory);
 

src/state/features/persistSlice.ts

@@ -21,6 +21,7 @@ interface settingsState {
   volume: number;
   mutedVolume: number;
   isMuted: boolean;
+  alwaysShowControls: boolean;
 }
 
 const initialState: settingsState = {
@@ -34,6 +35,7 @@ const initialState: settingsState = {
   volume: 0.5,
   mutedVolume: 0,
   isMuted: false,
+  alwaysShowControls: false,
 };
 
 export const persistSlice = createSlice({
@@ -87,6 +89,9 @@ export const persistSlice = createSlice({
     setIsMuted: (state, action: PayloadAction<boolean>) => {
       state.isMuted = action.payload;
     },
+    setAlwaysShowControls: (state, action: PayloadAction<boolean>) => {
+      state.alwaysShowControls = action.payload;
+    },
   },
 });
 
@@ -101,6 +106,7 @@ export const {
   setVolumeSetting,
   setMutedVolumeSetting,
   setIsMuted,
+  setAlwaysShowControls,
 } = persistSlice.actions;
 
 export default persistSlice.reducer;