From d99701084c380730d410f94ea5de091d9391df52 Mon Sep 17 00:00:00 2001 From: IrohDW Date: Wed, 8 Jan 2025 10:34:35 -0700 Subject: [PATCH] Mouse cursor doesn't show when video is fullscreen and the mouse is idle 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. --- .../VideoPlayer/Components/VideoControls-State.ts | 8 +++++++- src/components/common/VideoPlayer/VideoPlayer-State.ts | 8 ++++++++ src/components/common/VideoPlayer/VideoPlayer.tsx | 10 ++++++++-- src/constants/Categories.ts | 3 ++- src/state/features/persistSlice.ts | 6 ++++++ 5 files changed, 31 insertions(+), 4 deletions(-) diff --git a/src/components/common/VideoPlayer/Components/VideoControls-State.ts b/src/components/common/VideoPlayer/Components/VideoControls-State.ts index 14c280c..838c079 100644 --- a/src/components/common/VideoPlayer/Components/VideoControls-State.ts +++ b/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 ) => { @@ -228,7 +232,9 @@ export const useVideoControlsState = ( case "o": toggleObjectFit(); break; - + case "c": + toggleAlwaysShowControls(); + break; case Key.Add: increaseSpeed(false); break; diff --git a/src/components/common/VideoPlayer/VideoPlayer-State.ts b/src/components/common/VideoPlayer/VideoPlayer-State.ts index a41a87d..4d4a762 100644 --- a/src/components/common/VideoPlayer/VideoPlayer-State.ts +++ b/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( persistSelector.stretchVideoSetting ); + const alwaysShowControls = useSignal( + 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, }; }; diff --git a/src/components/common/VideoPlayer/VideoPlayer.tsx b/src/components/common/VideoPlayer/VideoPlayer.tsx index 9e25487..d104d7c 100644 --- a/src/components/common/VideoPlayer/VideoPlayer.tsx +++ b/src/components/common/VideoPlayer/VideoPlayer.tsx @@ -56,11 +56,13 @@ export const VideoPlayer = forwardRef( 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( 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( ...videoStyles?.video, objectFit: videoObjectFit.value, height: - isFullscreen.value && showControlsFullScreen.value + isFullscreen.value && showControls ? "calc(100vh - 40px)" : "100%", }} diff --git a/src/constants/Categories.ts b/src/constants/Categories.ts index 63ac90e..0c76bc3 100644 --- a/src/constants/Categories.ts +++ b/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); diff --git a/src/state/features/persistSlice.ts b/src/state/features/persistSlice.ts index c2e2c6f..9fb89e4 100644 --- a/src/state/features/persistSlice.ts +++ b/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) => { state.isMuted = action.payload; }, + setAlwaysShowControls: (state, action: PayloadAction) => { + state.alwaysShowControls = action.payload; + }, }, }); @@ -101,6 +106,7 @@ export const { setVolumeSetting, setMutedVolumeSetting, setIsMuted, + setAlwaysShowControls, } = persistSlice.actions; export default persistSlice.reducer;