forked from
juliet.paris/streamplace-spa
minimal streamplace frontend
hide cursor in fullscreen
+11
-2
+11
-2
src/components/VideoPlayer.tsx
+11
-2
src/components/VideoPlayer.tsx
···
17
17
const [muted, setMuted] = createSignal(true);
18
18
const [volume, setVolume] = createSignal(1);
19
19
const [showControls, setShowControls] = createSignal(false);
20
+
const [isFullscreen, setIsFullscreen] = createSignal(false);
20
21
let controlsTimer: ReturnType<typeof setTimeout> | undefined;
21
22
let pollTimer: ReturnType<typeof setInterval> | undefined;
22
23
···
100
101
if (status() === "live") videoEl.play().catch(() => {});
101
102
};
102
103
104
+
const onFullscreenChange = () => {
105
+
setIsFullscreen(!!document.fullscreenElement);
106
+
};
107
+
103
108
onMount(() => {
104
109
videoEl.muted = true;
105
110
videoEl.addEventListener("pause", resumeOnPause);
111
+
document.addEventListener("fullscreenchange", onFullscreenChange);
106
112
poll();
107
113
pollTimer = setInterval(poll, 10_000);
108
114
});
···
112
118
clearInterval(pollTimer);
113
119
clearTimeout(controlsTimer);
114
120
videoEl.removeEventListener("pause", resumeOnPause);
121
+
document.removeEventListener("fullscreenchange", onFullscreenChange);
115
122
});
116
123
117
124
return (
118
125
<div
119
126
ref={containerEl}
120
-
class="group/player relative w-full overflow-hidden bg-black"
127
+
class="relative w-full overflow-hidden bg-black"
128
+
style={{ cursor: isFullscreen() && !showControls() ? "none" : "auto" }}
129
+
onMouseMove={flashControls}
121
130
onTouchEnd={flashControls}
122
131
>
123
132
<video ref={videoEl} class="aspect-video w-full" playsinline autoplay />
···
139
148
140
149
{/* Controls */}
141
150
<div
142
-
class={`absolute right-0 bottom-0 left-0 flex items-center gap-2 bg-black/60 p-3 transition-opacity group-hover/player:opacity-100 ${showControls() ? "opacity-100" : "opacity-0"}`}
151
+
class={`absolute right-0 bottom-0 left-0 flex items-center gap-2 bg-black/60 p-3 transition-opacity ${showControls() ? "opacity-100" : "opacity-0"}`}
143
152
>
144
153
<Show when={status() === "live"}>
145
154
<span class="bg-sp-accent mr-1 flex items-center gap-1.5 rounded-sm px-1.5 py-0.5 text-xs font-medium text-black">