minimal streamplace frontend
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

show controls on click for mobile

Juliet 1ac2b58c 02afdc55

+17 -2
+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