minimal streamplace frontend
0
fork

Configure Feed

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

hide cursor in fullscreen

Juliet 086e1e36 8e08e996

+11 -2
+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">