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:
parent
103562b3ec
commit
d99701084c
@ -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;
|
||||||
|
@ -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,
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
@ -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%",
|
||||||
}}
|
}}
|
||||||
|
@ -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);
|
||||||
|
|
||||||
|
@ -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;
|
||||||
|
Loading…
x
Reference in New Issue
Block a user