3
0
mirror of https://github.com/Qortal/q-tube.git synced 2025-02-11 17:55:51 +00:00

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.
This commit is contained in:
Qortal Dev 2025-01-08 10:34:35 -07:00
parent 103562b3ec
commit d99701084c
5 changed files with 31 additions and 4 deletions

View File

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

View File

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

View File

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

View File

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

View File

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