From b464b5640f5b819d2ecc0843e80d907f2d620865 Mon Sep 17 00:00:00 2001
From: Marco Sadjadi <marco@buildmymcpserver.local>
Date: Thu, 28 May 2026 03:21:04 +0200
Subject: [PATCH] feat(video): play-overlay for blocked autoplay +
 click-to-play
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Owner reported "video läuft nicht, sehe nur foto" — classic blocked-
autoplay on browsers with prefers-reduced-motion / data-saver / strict
autoplay policies. The poster sat there forever and the visitor
thought the page was broken because the only control was a tiny
mute pill they didn't realise would also start playback.

Fixes:
- Tracks `playing` state via the video element's own play/pause events
  so React knows whether the browser actually granted autoplay.
- Renders a large centre PLAY button overlay whenever the video is
  paused. The button covers the full frame (universal YouTube / Vimeo
  pattern: click anywhere on the video to play); the inner indigo
  circle with the triangle is the visual affordance, with hover scale
  for tactile feedback.
- Wires onClick directly on the <video> element too so the click-
  anywhere-to-play works whether or not the overlay happens to be up.
- Mute toggle now calls e.stopPropagation so tapping it doesn't
  accidentally trigger play/pause via the video's onClick handler.
- Best-effort .play() call in the mount effect, with the rejection
  silently swallowed — failure just means the user has to click play
  themselves, which the overlay already affords.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 apps/web/components/hero-video.tsx | 117 ++++++++++++++++++++++++-----
 1 file changed, 97 insertions(+), 20 deletions(-)

diff --git a/apps/web/components/hero-video.tsx b/apps/web/components/hero-video.tsx
index 2621aab..8649050 100644
--- a/apps/web/components/hero-video.tsx
+++ b/apps/web/components/hero-video.tsx
@@ -1,39 +1,81 @@
 'use client';
 
-import { Volume2, VolumeX } from 'lucide-react';
-import { useCallback, useRef, useState } from 'react';
+import { Play, Volume2, VolumeX } from 'lucide-react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 
 /**
- * Hero video player with a frosted-glass mute toggle.
+ * Hero video player with two controls:
  *
- * Why not the native `controls` attribute: it pulls in a chrome bar that
- * fights the section's design vocabulary. We need exactly one control —
- * mute / unmute — so we render just that, styled to match the rest of
- * the brand (frosted indigo-bordered pill, bottom-right of the video).
+ *   1. Big PLAY overlay shown while the video is paused. Browsers
+ *      block autoplay for users with `prefers-reduced-motion`, on data
+ *      saver, or with strict autoplay policies — so the poster sits
+ *      there forever and the visitor thinks the page is broken. The
+ *      overlay gives them an explicit, unmissable affordance to start
+ *      it. We also wire `onClick` on the <video> element itself so
+ *      clicking anywhere on the frame plays / pauses, matching the
+ *      universal YouTube / Vimeo pattern.
  *
- * Default state is MUTED because every modern browser blocks autoplay
- * for unmuted media. The toggle is the user's explicit affordance to
- * turn the voice-over on; we keep the `muted` attribute on the element
- * as the initial value so the autoplay still fires.
+ *   2. Frosted mute toggle pinned bottom-right. Always visible so the
+ *      visitor can flip the voice-over on whether they hit play
+ *      themselves or it autoplayed.
  *
- * On unmute we also call `.play()` defensively — some browsers (mobile
- * Safari especially) pause the element when the muted property flips,
- * even mid-playback. The promise is swallowed because a rejection here
- * just means the user has to click again, which the toggle already
+ * Initial state is muted (browser autoplay requires it). On mount we
+ * attempt `.play()` defensively — the promise resolves silently if
+ * autoplay was granted, rejects silently if blocked. Either way the
+ * `play` / `pause` event listeners keep our React state in sync with
+ * whatever the element is actually doing.
+ *
+ * On unmute we re-call `.play()` because mobile Safari pauses on a
+ * muted-property change mid-playback. Swallow the promise — failure
+ * just means the user can hit play again, which the overlay already
  * affords.
  */
 export function HeroVideo() {
   const videoRef = useRef<HTMLVideoElement>(null);
   const [muted, setMuted] = useState(true);
+  const [playing, setPlaying] = useState(false);
 
-  const toggleMute = useCallback(() => {
+  useEffect(() => {
+    const v = videoRef.current;
+    if (!v) return;
+
+    // Sync React state with whatever the element actually does.
+    const onPlay = () => setPlaying(true);
+    const onPause = () => setPlaying(false);
+    v.addEventListener('play', onPlay);
+    v.addEventListener('pause', onPause);
+
+    // Best-effort autoplay. Promise rejection = user has to click play.
+    v.play().catch(() => undefined);
+
+    return () => {
+      v.removeEventListener('play', onPlay);
+      v.removeEventListener('pause', onPause);
+    };
+  }, []);
+
+  const togglePlay = useCallback(() => {
+    const v = videoRef.current;
+    if (!v) return;
+    if (v.paused) {
+      v.play().catch(() => undefined);
+    } else {
+      v.pause();
+    }
+  }, []);
+
+  const toggleMute = useCallback((e: React.MouseEvent) => {
+    // Stop propagation so clicking the mute pill doesn't also
+    // play/pause via the video's onClick handler.
+    e.stopPropagation();
     const v = videoRef.current;
     if (!v) return;
     const next = !v.muted;
     v.muted = next;
     setMuted(next);
     if (!next && v.paused) {
-      // Best-effort: keep playback running after the user enables sound.
+      // Keep playback running after the user enables sound — mobile
+      // Safari pauses on muted-property change mid-playback.
       v.play().catch(() => undefined);
     }
   }, []);
@@ -48,21 +90,56 @@ export function HeroVideo() {
         playsInline
         preload="auto"
         poster="/videos/hero-poster.jpg"
-        className="size-full object-cover"
+        onClick={togglePlay}
+        className="size-full cursor-pointer object-cover"
         aria-label="Animation: a prompt becomes a live MCP server, with secrets staying isolated from the AI pipeline"
       >
         <source src="/videos/hero.webm" type="video/webm" />
         <source src="/videos/hero.mp4" type="video/mp4" />
       </video>
 
+      {/* Centre PLAY button — shown only while paused. Covers the
+          whole video so clicking anywhere starts playback; the inner
+          circle is the visual affordance. */}
+      {!playing && (
+        <button
+          type="button"
+          onClick={togglePlay}
+          aria-label="Play video"
+          className="group absolute inset-0 z-10 flex items-center justify-center"
+          style={{
+            backgroundColor: 'color-mix(in oklab, var(--color-bg) 30%, transparent)',
+          }}
+        >
+          <div
+            className="flex size-20 items-center justify-center rounded-full border backdrop-blur transition-transform duration-200 ease-out group-hover:scale-110"
+            style={{
+              backgroundColor:
+                'color-mix(in oklab, var(--color-bg-elevated) 80%, transparent)',
+              borderColor: 'var(--color-accent)',
+              boxShadow:
+                '0 0 32px rgba(99, 102, 241, 0.45), 0 12px 40px rgba(0,0,0,0.55)',
+              color: 'var(--color-accent)',
+            }}
+          >
+            {/* `translate-x-0.5` optically centres the play triangle —
+                its visual centre of mass is left of its bounding box. */}
+            <Play size={32} fill="currentColor" className="translate-x-0.5" />
+          </div>
+        </button>
+      )}
+
+      {/* Mute toggle — always visible, top of z-stack so it stays
+          clickable even when the play overlay is up. */}
       <button
         type="button"
         onClick={toggleMute}
         aria-label={muted ? 'Unmute video' : 'Mute video'}
         aria-pressed={!muted}
-        className="absolute bottom-4 right-4 z-10 inline-flex size-10 items-center justify-center rounded-full border backdrop-blur transition-colors duration-150 hover:text-[--color-fg] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[--color-accent]"
+        className="absolute bottom-4 right-4 z-20 inline-flex size-10 items-center justify-center rounded-full border backdrop-blur transition-colors duration-150 hover:text-[--color-fg] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[--color-accent]"
         style={{
-          backgroundColor: 'color-mix(in oklab, var(--color-bg-elevated) 75%, transparent)',
+          backgroundColor:
+            'color-mix(in oklab, var(--color-bg-elevated) 75%, transparent)',
           borderColor: 'var(--color-border)',
           color: muted ? 'var(--color-fg-muted)' : 'var(--color-accent)',
         }}