buildmymcpserver/apps/web/components/hero-video.tsx

'use client';

import { Play, Volume2, VolumeX } from 'lucide-react';
import { useCallback, useEffect, useRef, useState } from 'react';

/**
 * Hero video player with two controls:
 *
 *   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.
 *
 *   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.
 *
 * 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);

  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) {
      // Keep playback running after the user enables sound — mobile
      // Safari pauses on muted-property change mid-playback.
      v.play().catch(() => undefined);
    }
  }, []);

  return (
    <>
      <video
        ref={videoRef}
        autoPlay
        muted
        loop
        playsInline
        preload="auto"
        poster="/videos/hero-poster.jpg"
        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-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)',
          borderColor: 'var(--color-border)',
          color: muted ? 'var(--color-fg-muted)' : 'var(--color-accent)',
        }}
      >
        {muted ? <VolumeX size={18} /> : <Volume2 size={18} />}
      </button>
    </>
  );
}