Toggle opacity of controls on hover

englishm · Dec 2, 2024 · 6b4ff96 · 6b4ff96
1 parent 3ce7fa1
commit 6b4ff96
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 14 deletions.
diff --git a/web/src/components/play-button.tsx b/web/src/components/play-button.tsx
@@ -6,7 +6,7 @@ export const PlayButton = (props: PlayButtonProps) => {
 	return (
 		<button
 			class="
-				absolute bottom-4 left-4 flex h-4 w-8 items-center justify-center
+				absolute bottom-0 left-4 flex h-4 w-8 items-center justify-center
 				rounded bg-black/70 px-6 py-4 shadow-lg
 				hover:bg-black/80 focus:bg-black/100 focus:outline-none
 			"

diff --git a/web/src/components/watch.tsx b/web/src/components/watch.tsx
@@ -17,6 +17,8 @@ export default function Watch(props: { name: string }) {
 	const [error, setError] = createSignal<Error | undefined>()
 	const [player, setPlayer] = createSignal<Player | undefined>()
 	const [showCatalog, setShowCatalog] = createSignal(false)
+	const [hovered, setHovered] = createSignal(false)
+	const [showControls, setShowControls] = createSignal(true)
 
 	createEffect(() => {
 		const namespace = props.name
@@ -29,14 +31,6 @@ export default function Watch(props: { name: string }) {
 		Player.create({ url, fingerprint, canvas, namespace }, tracknum).then(setPlayer).catch(setError)
 	})
 
-	createEffect(() => {
-		const playerInstance = player()
-		if (!playerInstance) return
-
-		onCleanup(() => playerInstance.close())
-		playerInstance.closed().then(setError).catch(setError)
-	})
-
 	const play = () => {
 		player()?.play().catch(setError)
 	}
@@ -62,17 +56,47 @@ export default function Watch(props: { name: string }) {
 		return JSON.stringify(catalog, null, 2)
 	})
 
+	createEffect(() => {
+		const playerInstance = player()
+		if (!playerInstance) return
+
+		onCleanup(() => playerInstance.close())
+		playerInstance.closed().then(setError).catch(setError)
+	})
+
+	createEffect(() => {
+		if (hovered()) {
+			setShowControls(true)
+			return
+		}
+
+		const timeoutId = setTimeout(() => setShowControls(false), 3000)
+		onCleanup(() => clearTimeout(timeoutId))
+	})
+
 	// NOTE: The canvas automatically has width/height set to the decoded video size.
 	// TODO shrink it if needed via CSS
 	return (
 		<>
 			<Fail error={error()} />
 			<div class="relative aspect-video w-full">
-				<canvas ref={canvas} onClick={play} class="h-full w-full rounded-lg" />
-				<PlayButton play={play} />
-				<div class="absolute bottom-4 right-4 flex h-[40px] w-fit items-center justify-evenly gap-[4px] rounded bg-black/70 p-2">
-					<VolumeButton mute={mute} />
-					<TrackSelect trackNum={tracknum} getVideoTracks={getVideoTracks} switchTrack={switchTrack} />
+				<canvas
+					ref={canvas}
+					onClick={play}
+					class="h-full w-full rounded-lg"
+					onMouseEnter={() => setHovered(true)}
+					onMouseLeave={() => setHovered(false)}
+				/>
+				<div
+					class={`mr-px-4 ml-px-4 ${
+						showControls() ? "opacity-100" : "opacity-0"
+					} absolute bottom-4 flex h-[40px] w-[100%] items-center gap-[4px] rounded transition-opacity duration-200 `}
+				>
+					<PlayButton play={play} />
+					<div class="absolute bottom-0 right-4 flex h-[32px] w-fit items-center justify-evenly gap-[4px] rounded bg-black/70 p-2">
+						<VolumeButton mute={mute} />
+						<TrackSelect trackNum={tracknum} getVideoTracks={getVideoTracks} switchTrack={switchTrack} />
+					</div>
 				</div>
 			</div>
 			<h3>Debug</h3>