forked from
juliet.paris/streamplace-spa
minimal streamplace frontend
show controls on click for mobile
+17
-2
+17
-2
src/components/VideoPlayer.tsx
+17
-2
src/components/VideoPlayer.tsx
···
16
16
const [muted, setMuted] = createSignal(true);
17
17
const [volume, setVolume] = createSignal(1);
18
18
const [errorMsg, setErrorMsg] = createSignal("");
19
+
const [showControls, setShowControls] = createSignal(false);
20
+
let controlsTimer: ReturnType<typeof setTimeout> | undefined;
21
+
22
+
const flashControls = () => {
23
+
setShowControls(true);
24
+
clearTimeout(controlsTimer);
25
+
controlsTimer = setTimeout(() => setShowControls(false), 3000);
26
+
};
19
27
20
28
const connect = async () => {
21
29
setStatus("connecting");
···
91
99
92
100
onCleanup(() => {
93
101
disconnect();
102
+
clearTimeout(controlsTimer);
94
103
});
95
104
96
105
return (
97
-
<div ref={containerEl} class="group/player relative w-full overflow-hidden bg-black">
106
+
<div
107
+
ref={containerEl}
108
+
class="group/player relative w-full overflow-hidden bg-black"
109
+
onTouchEnd={flashControls}
110
+
>
98
111
<video ref={videoEl} class="aspect-video w-full" playsinline autoplay />
99
112
100
113
{/* Status overlay */}
···
124
137
</Show>
125
138
126
139
{/* Controls */}
127
-
<div class="absolute right-0 bottom-0 left-0 flex items-center gap-2 bg-black/60 p-3 opacity-0 transition-opacity group-hover/player:opacity-100">
140
+
<div
141
+
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"}`}
142
+
>
128
143
<Show when={status() === "live"}>
129
144
<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">
130
145
LIVE