Leatherface/mastodon
1
0
Fork 0
mirror of https://github.com/glitch-soc/mastodon.git synced 2025-12-17 09:48:42 +00:00
Code Issues Packages Projects Releases Wiki Activity

[Glitch] Fix being unable to hide controls in full screen video in web UI

Browse Source 
Port 70e14c1ed0 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
This commit is contained in:
Eugen Rochko
2025-03-31 10:17:57 +02:00
committed by Claire
parent 3af85c90f6
commit da5a957d8f
2 changed files with 26 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
app/javascript/flavours/glitch/features/video/index.tsx
View File

@@ -57,6 +57,7 @@ const messages = defineMessages({
}); });
const DOUBLE_CLICK_THRESHOLD = 250; const DOUBLE_CLICK_THRESHOLD = 250;
const HOVER_FADE_DELAY = 4000;
export const formatTime = (secondsNum: number) => { export const formatTime = (secondsNum: number) => {
const hours = Math.floor(secondsNum / 3600); const hours = Math.floor(secondsNum / 3600);
@@ -236,6 +237,7 @@ export const Video: React.FC<{
const seekRef = useRef<HTMLDivElement>(null); const seekRef = useRef<HTMLDivElement>(null);
const volumeRef = useRef<HTMLDivElement>(null); const volumeRef = useRef<HTMLDivElement>(null);
const doubleClickTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(); const doubleClickTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>();
const hoverTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>();
const [style, api] = useSpring(() => ({ const [style, api] = useSpring(() => ({
progress: '0%', progress: '0%',
@@ -670,6 +672,26 @@ export const Video: React.FC<{
const handleMouseEnter = useCallback(() => { const handleMouseEnter = useCallback(() => {
setHovered(true); setHovered(true);
if (hoverTimeoutRef.current) {
clearTimeout(hoverTimeoutRef.current);
}
hoverTimeoutRef.current = setTimeout(() => {
setHovered(false);
}, HOVER_FADE_DELAY);
}, [setHovered]);
const handleMouseMove = useCallback(() => {
setHovered(true);
if (hoverTimeoutRef.current) {
clearTimeout(hoverTimeoutRef.current);
}
hoverTimeoutRef.current = setTimeout(() => {
setHovered(false);
}, HOVER_FADE_DELAY);
}, [setHovered]); }, [setHovered]);
const handleMouseLeave = useCallback(() => { const handleMouseLeave = useCallback(() => {
@@ -801,6 +823,7 @@ export const Video: React.FC<{
style={{ aspectRatio }} style={{ aspectRatio }}
ref={playerRef} ref={playerRef}
onMouseEnter={handleMouseEnter} onMouseEnter={handleMouseEnter}
onMouseMove={handleMouseMove}
onMouseLeave={handleMouseLeave} onMouseLeave={handleMouseLeave}
onClick={handleClickRoot} onClick={handleClickRoot}
onKeyDown={handleKeyDown} onKeyDown={handleKeyDown}

4
app/javascript/flavours/glitch/styles/components.scss
View File

@@ -7480,8 +7480,10 @@ img.modal-warning {
&.fullscreen { &.fullscreen {
width: 100% !important; width: 100% !important;
height: 100% !important;
margin: 0; margin: 0;
height: 100% !important;
outline: none;
border-radius: 0;
video { video {
max-width: 100% !important; max-width: 100% !important;