Video Dialog

---
/**
 * VideoDialog — a poster with a play button that opens the video in a
 * dialog. The trigger is an invoker, so the dialog opens without any
 * script; `morph` grows it out of the poster (Dialog morph). The script is
 * what a dialog cannot do on its own: a file plays when it opens and stops
 * when it closes; an embed's src is set when the dialog opens and blanked
 * when it closes, so an iframe never loads behind a closed dialog and never
 * keeps talking after it. Measured in phase 7D: a closed dialog does not
 * stop sound, in any engine. `tracks` are the file's captions; without
 * JavaScript an embed's frame holds a link to the player instead.
 */
import type { HTMLAttributes } from 'astro/types';
import Dialog from './Dialog.astro';

interface Track {
  src: string;
  /** Language of the track (BCP 47), e.g. 'en'. */
  srclang: string;
  label?: string;
  kind?: 'captions' | 'subtitles' | 'descriptions' | 'chapters';
  default?: boolean;
}

interface Props extends HTMLAttributes<'div'> {
  /** Dialog id; unique per page. */
  id: string;
  /** A video file (several formats as an array: webm, mp4), or with `embed` the URL of a player page (YouTube, Vimeo, …). */
  src: string | string[];
  poster: string;
  /** src is an iframe URL. */
  embed?: boolean;
  /** Grow out of the poster and back into it on a view transition. */
  morph?: boolean;
  /** Dialog title, for the embed's name and the dialog's. */
  title?: string;
  /** Accessible name of the play button. */
  label?: string;
  /** CSS aspect ratio of the poster and the player. */
  ratio?: string;
  /** Text tracks for a file (WebVTT): captions, subtitles, descriptions. */
  tracks?: Track[];
  /** Add the inline click handler for browsers without invoker commands. */
  polyfill?: boolean;
}

const { id, src, poster, embed = false, morph = false, title = 'Video', label = 'Play video', ratio = '16 / 9', tracks = [], polyfill = false, class: className, style, ...rest } = Astro.props;
const sources = Array.isArray(src) ? src : [src];
const type = (u: string) => (/\.webm(\?|$)/.test(u) ? 'video/webm' : /\.mp4(\?|$)/.test(u) ? 'video/mp4' : undefined);
const inline = [`--ma-vdialog-ratio:${ratio}`, typeof style === 'string' ? style : ''].filter(Boolean).join(';');
const triggerAttrs = { command: 'show-modal', commandfor: id };
---

<div class:list={['ma-vdialog', className]} data-ma-vdialog data-embed={embed ? '' : undefined} style={inline} {...rest}>
  <button type="button" class="ma-vdialog__thumb" aria-label={label} {...triggerAttrs}>
    <img class="ma-vdialog__poster" src={poster} alt="" draggable="false" />
    <span class="ma-vdialog__play" aria-hidden="true">
      <svg viewBox="0 0 24 24" width="22" height="22"><path d="M8 5.5v13l11-6.5z" fill="currentColor" /></svg>
    </span>
  </button>
  <Dialog id={id} morph={morph} polyfill={polyfill} class="ma-vdialog__dialog" aria-label={title}>
    <Fragment slot="trigger" />
    <div class="ma-vdialog__frame">
      {embed ? (
        <>
          <iframe class="ma-vdialog__media" data-src={sources[0]} title={title} allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>
          <noscript><a class="ma-vdialog__link" href={sources[0]}>{title}</a></noscript>
        </>
      ) : (
        <video class="ma-vdialog__media" poster={poster} controls playsinline preload="none">
          {sources.map((u) => <source src={u} type={type(u)} />)}
          {tracks.map((t) => <track src={t.src} srclang={t.srclang} label={t.label} kind={t.kind ?? 'captions'} default={t.default} />)}
        </video>
      )}
    </div>
  </Dialog>
</div>

<style is:global>
  @layer components {
    :where(.ma-vdialog__thumb) {
      position: relative;
      display: block;
      width: 100%;
      aspect-ratio: var(--ma-vdialog-ratio, 16 / 9);
      padding: 0;
      border: 1px solid var(--ma-edge);
      border-radius: 1rem;
      overflow: clip;
      background: var(--ma-ink);
      cursor: pointer;
      isolation: isolate;
    }
    :where(.ma-vdialog__thumb:focus-visible) {
      outline: 2px solid currentColor;
      outline-offset: 3px;
    }
    :where(.ma-vdialog__poster) {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      scale: 1;
      transition: scale var(--ma-dur-gentle) var(--ma-ease);
    }
    :where(.ma-vdialog__thumb:hover .ma-vdialog__poster) {
      scale: 1.03;
    }
    /* the play button, with a ring breathing behind it on the ambient duration */
    :where(.ma-vdialog__play) {
      position: absolute;
      top: 50%;
      left: 50%;
      display: grid;
      place-items: center;
      width: 4rem;
      height: 4rem;
      border-radius: 999px;
      background: var(--ma-panel);
      color: var(--ma-ink);
      box-shadow: 0 12px 32px -12px rgb(0 0 0 / 0.6);
      translate: -50% -50%;
      transition: scale var(--ma-duration) var(--ma-ease);
    }
    :where(.ma-vdialog__play)::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background: var(--ma-panel);
      opacity: 0.5;
      animation: ma-vdialog-ring var(--ma-dur-ambient) var(--ma-ease-out) infinite;
    }
    :where(.ma-vdialog__play svg) {
      position: relative;
      margin-left: 0.15em;
    }
    :where(.ma-vdialog__thumb:hover .ma-vdialog__play),
    :where(.ma-vdialog__thumb:focus-visible .ma-vdialog__play) {
      scale: 1.08;
    }
    /* the dialog is the player: no padding, the frame's ratio, an ink ground */
    :where(.ma-vdialog) .ma-dialog {
      width: min(92vw, 64rem);
      max-width: none;
      overflow: clip;
      background: var(--ma-ink);
    }
    :where(.ma-vdialog) .ma-dialog__panel {
      padding: 0;
    }
    :where(.ma-vdialog) .ma-dialog__close button {
      background: var(--ma-panel);
      color: var(--ma-ink);
      opacity: 0.9;
    }
    :where(.ma-vdialog__frame) {
      position: relative;
      aspect-ratio: var(--ma-vdialog-ratio, 16 / 9);
      background: var(--ma-ink);
    }
    /* without JavaScript an embed has no src: the frame links to the player instead */
    :where(.ma-vdialog__link) {
      position: absolute;
      inset: 0;
      display: grid;
      place-items: center;
      padding: 1rem;
      color: var(--ma-panel);
      text-align: center;
    }
    :where(.ma-vdialog__media) {
      display: block;
      width: 100%;
      height: 100%;
      border: 0;
      background: var(--ma-ink);
    }
    @media (prefers-reduced-motion: reduce) {
      :where(.ma-vdialog__poster),
      :where(.ma-vdialog__play) {
        transition: none;
        scale: 1;
      }
      :where(.ma-vdialog__play)::before {
        animation: none;
        opacity: 0;
      }
    }
  }

  @keyframes ma-vdialog-ring {
    from {
      scale: 1;
      opacity: 0.5;
    }
    to {
      scale: 1.7;
      opacity: 0;
    }
  }
</style>

<script>
  import { onMount } from '../lib/runtime';

  onMount<HTMLElement>('[data-ma-vdialog]', (root, { signal }) => {
    const dialog = root.querySelector('dialog') as HTMLDialogElement;
    const media = dialog.querySelector<HTMLVideoElement | HTMLIFrameElement>('.ma-vdialog__media')!;
    const video = media instanceof HTMLVideoElement ? media : null;
    // opening: a file plays inside the click, a user gesture the browser honours. One task later the dialog is open, or
    // opening (a morph in flight sets html[data-ma-vt]); if neither, the click opened nothing (no invoker commands, no
    // polyfill) and nothing may play behind the closed dialog. An embed gets its src then, never while the dialog is shut.
    const start = () => {
      video?.play().catch(() => {});
      setTimeout(() => {
        if (!dialog.open && !document.documentElement.hasAttribute('data-ma-vt')) stop();
        else if (!video) media.setAttribute('src', media.dataset.src!);
      });
    };
    // closing: a file pauses; an embed is blanked so it stops loading and talking
    const stop = () => {
      if (video) video.pause();
      else media.setAttribute('src', 'about:blank');
    };
    for (const t of document.querySelectorAll<HTMLElement>(`[commandfor="${dialog.id}"][command="show-modal"]`)) t.addEventListener('click', start, { signal });
    dialog.addEventListener('close', stop, { signal });
    signal.addEventListener('abort', stop);
  });
</script>