themes-lcars/templates/overrides/lcars/video-embed.ninjatpl
Alex Dunmow 885dd372e7 feat(lcars): Wave A theme rebuild — sci-fi podcast persona (WO-TF-020)
Full LCARS library-computer interface for a sci-fi podcast/media outfit.
Codeless .bnp. Re-skins every mandatory builtin inside LCARS framing and
ships the full Wave A surface.

- 49 mandatory template overrides (chrome, marketing, primitives, commerce,
  blog family, auth, page-suggestions), field-faithful re-skins of the frozen
  builtin defaults; identity carried by the lcars-* class system.
- 8 page templates (default+sidebar rail, full-width, full-display, landing,
  article, blog-index, contact, auth) with elbow-frame chrome.
- 4 persona blocks: episode_console, crew_roster, stardate_log,
  transmission_status. Legacy lcars_header/sidebar/panel removed (now overrides
  + page chrome).
- 5 dual-mode presets (canonical black + daylight-ops cream), all 19 tokens.
- Bundled Antonio + Share Tech Mono (OFL); email-safe LCARS wrapper.
- Seed "Subspace Signal": home, about, 3 episodes+articles, contact
  (hail_signals table + row_inserted email-admins workflow), login.
- GO BIG motion: dependency-free canvas panel-sweep on the hero (lazy-init,
  reduced-motion static frame, no-JS fallback).

Build + check-safety green. Visual UNVERIFIED until Wave B. Known frozen-cms
limits (contract §11 auth/404 non-dispatch, §12 provider-backed empty lists)
authored faithfully.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-05 12:22:22 +08:00

12 lines
1.6 KiB
Plaintext

{# video-embed override — click-to-load facade; carries data-bn-video / data-video-url / data-video-media so the host facade JS binds. #}
{% if aspect == "4:3" %}{% set vratio = "4 / 3" %}{% elif aspect == "1:1" %}{% set vratio = "1 / 1" %}{% elif aspect == "21:9" %}{% set vratio = "21 / 9" %}{% else %}{% set vratio = "16 / 9" %}{% endif %}
<figure class="{{ class }}" style="margin:2rem 0;">
<div class="lcars-video-frame" data-bn-video data-video-url="{{ url|default:'' }}" data-video-media="{% if media %}{{ media|mediaURL }}{% endif %}" style="position:relative;width:100%;overflow:hidden;border:1px solid hsl(var(--border));border-radius:4px;background:hsl(var(--muted));aspect-ratio:{{ vratio }};">
<button type="button" data-bn-video-play class="lcars-video-play" aria-label="Play video{% if title %}: {{ title }}{% endif %}" style="position:absolute;inset:0;display:flex;align-items:center;justify-content:center;width:100%;height:100%;border:0;background:none;cursor:pointer;">
{% if poster %}{% img poster alt=title|default:"" class="lcars-video-poster" %}{% endif %}
<span class="lcars-video-play-badge" style="position:relative;display:inline-flex;align-items:center;justify-content:center;width:4rem;height:4rem;border-radius:4px;background:hsl(var(--accent));color:hsl(var(--accent-foreground));">::lucide:play:lg::</span>
</button>
</div>
{% if caption %}<figcaption class="lcars-stat-label" style="margin-top:0.5rem;text-align:center;">{{ caption }}</figcaption>{% endif %}
</figure><style>.lcars-video-frame .lcars-video-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}</style>