@flamingo-stack/openframe-frontend-core 0.0.397 → 0.0.398-snapshot.20260710082611

package/src/components/features/auth/complete-account-form.tsx

@@ -111,57 +111,43 @@ export function CompleteAccountForm({
         </>
       )}
 
-      {/* First + Last name */}
-      <div className="flex gap-[var(--spacing-system-l)]">
-        <div className="min-w-0 flex-1">
-          <Input
-            label="First Name"
-            placeholder="Enter First Name"
-            value={firstName}
-            error={errors?.firstName}
-            disabled={fieldsDisabled}
-            onChange={(event) => onFirstNameChange(event.target.value)}
-            onKeyDown={handleKeyDown}
-          />
-        </div>
-        <div className="min-w-0 flex-1">
-          <Input
-            label="Last Name"
-            placeholder="Enter Last Name"
-            value={lastName}
-            error={errors?.lastName}
-            disabled={fieldsDisabled}
-            onChange={(event) => onLastNameChange(event.target.value)}
-            onKeyDown={handleKeyDown}
-          />
-        </div>
-      </div>
-
-      {/* Password + Confirm */}
-      <div className="flex gap-[var(--spacing-system-l)]">
-        <div className="min-w-0 flex-1">
-          <PasswordInput
-            label="Password"
-            placeholder="Enter Password"
-            value={password}
-            error={errors?.password}
-            disabled={fieldsDisabled}
-            onChange={(event) => onPasswordChange(event.target.value)}
-            onKeyDown={handleKeyDown}
-          />
-        </div>
-        <div className="min-w-0 flex-1">
-          <PasswordInput
-            label="Confirm Password"
-            placeholder="Confirm Password"
-            value={confirmPassword}
-            error={errors?.confirmPassword}
-            disabled={fieldsDisabled}
-            onChange={(event) => onConfirmPasswordChange(event.target.value)}
-            onKeyDown={handleKeyDown}
-          />
-        </div>
-      </div>
+      {/* Name + password fields — single column on every breakpoint */}
+      <Input
+        label="First Name"
+        placeholder="Enter First Name"
+        value={firstName}
+        error={errors?.firstName}
+        disabled={fieldsDisabled}
+        onChange={(event) => onFirstNameChange(event.target.value)}
+        onKeyDown={handleKeyDown}
+      />
+      <Input
+        label="Last Name"
+        placeholder="Enter Last Name"
+        value={lastName}
+        error={errors?.lastName}
+        disabled={fieldsDisabled}
+        onChange={(event) => onLastNameChange(event.target.value)}
+        onKeyDown={handleKeyDown}
+      />
+      <PasswordInput
+        label="Password"
+        placeholder="Enter Password"
+        value={password}
+        error={errors?.password}
+        disabled={fieldsDisabled}
+        onChange={(event) => onPasswordChange(event.target.value)}
+        onKeyDown={handleKeyDown}
+      />
+      <PasswordInput
+        label="Confirm Password"
+        placeholder="Confirm Password"
+        value={confirmPassword}
+        error={errors?.confirmPassword}
+        disabled={fieldsDisabled}
+        onChange={(event) => onConfirmPasswordChange(event.target.value)}
+        onKeyDown={handleKeyDown}
+      />
 
       {/* Actions — optional back + submit */}
       <div className="flex items-center gap-[var(--spacing-system-l)]">

package/src/components/features/auth/create-organization-form.tsx

@@ -110,33 +110,27 @@ export function CreateOrganizationForm({
         <p className="text-h4 text-ods-text-secondary">Start your journey with OpenFrame.</p>
       </div>
 
-      {/* Email + Organization Name — side by side on every breakpoint */}
-      <div className="flex gap-[var(--spacing-system-l)]">
-        <div className="min-w-0 flex-1">
-          <Input
-            type="email"
-            label="Email"
-            placeholder="username@mail.com"
-            value={email}
-            error={errors?.email ?? emailStatus?.message}
-            errorVariant={errors?.email ? 'error' : emailStatus?.variant}
-            disabled={fieldsDisabled}
-            onChange={(event) => onEmailChange(event.target.value)}
-            onKeyDown={handleKeyDown}
-          />
-        </div>
-        <div className="min-w-0 flex-1">
-          <Input
-            label="Organization Name"
-            placeholder="Your Company Name"
-            value={organizationName}
-            error={errors?.organizationName}
-            disabled={fieldsDisabled}
-            onChange={(event) => onOrganizationNameChange(event.target.value)}
-            onKeyDown={handleKeyDown}
-          />
-        </div>
-      </div>
+      {/* Email + Organization Name — single column on every breakpoint */}
+      <Input
+        type="email"
+        label="Email"
+        placeholder="username@mail.com"
+        value={email}
+        error={errors?.email ?? emailStatus?.message}
+        errorVariant={errors?.email ? 'error' : emailStatus?.variant}
+        disabled={fieldsDisabled}
+        onChange={(event) => onEmailChange(event.target.value)}
+        onKeyDown={handleKeyDown}
+      />
+      <Input
+        label="Organization Name"
+        placeholder="Your Company Name"
+        value={organizationName}
+        error={errors?.organizationName}
+        disabled={fieldsDisabled}
+        onChange={(event) => onOrganizationNameChange(event.target.value)}
+        onKeyDown={handleKeyDown}
+      />
 
       {/* Domain */}
       <div className="flex flex-col">
@@ -151,8 +145,7 @@ export function CreateOrganizationForm({
           onChange={(event) => onDomainChange(event.target.value)}
           onKeyDown={handleKeyDown}
         />
-        {/* Top padding clears the absolutely-positioned field message */}
-        {domainSlot && <div className="pt-[var(--spacing-system-l)]">{domainSlot}</div>}
+        {domainSlot && <div className="pt-[var(--spacing-system-s)]">{domainSlot}</div>}
       </div>
 
       {/* Terms & Privacy */}

package/src/components/features/auth/openframe-sso-signup-form.tsx

@@ -102,57 +102,43 @@ export function OpenFrameSsoSignUpForm({
         onKeyDown={handleKeyDown}
       />
 
-      {/* First + Last name */}
-      <div className="flex gap-[var(--spacing-system-l)]">
-        <div className="min-w-0 flex-1">
-          <Input
-            label="First Name"
-            placeholder="Enter First Name"
-            value={firstName}
-            error={errors?.firstName}
-            disabled={fieldsDisabled}
-            onChange={(event) => onFirstNameChange(event.target.value)}
-            onKeyDown={handleKeyDown}
-          />
-        </div>
-        <div className="min-w-0 flex-1">
-          <Input
-            label="Last Name"
-            placeholder="Enter Last Name"
-            value={lastName}
-            error={errors?.lastName}
-            disabled={fieldsDisabled}
-            onChange={(event) => onLastNameChange(event.target.value)}
-            onKeyDown={handleKeyDown}
-          />
-        </div>
-      </div>
-
-      {/* Password + Confirm */}
-      <div className="flex gap-[var(--spacing-system-l)]">
-        <div className="min-w-0 flex-1">
-          <PasswordInput
-            label="Password"
-            placeholder="Enter Password"
-            value={password}
-            error={errors?.password}
-            disabled={fieldsDisabled}
-            onChange={(event) => onPasswordChange(event.target.value)}
-            onKeyDown={handleKeyDown}
-          />
-        </div>
-        <div className="min-w-0 flex-1">
-          <PasswordInput
-            label="Confirm Password"
-            placeholder="Confirm Password"
-            value={confirmPassword}
-            error={errors?.confirmPassword}
-            disabled={fieldsDisabled}
-            onChange={(event) => onConfirmPasswordChange(event.target.value)}
-            onKeyDown={handleKeyDown}
-          />
-        </div>
-      </div>
+      {/* Name + password fields — single column on every breakpoint */}
+      <Input
+        label="First Name"
+        placeholder="Enter First Name"
+        value={firstName}
+        error={errors?.firstName}
+        disabled={fieldsDisabled}
+        onChange={(event) => onFirstNameChange(event.target.value)}
+        onKeyDown={handleKeyDown}
+      />
+      <Input
+        label="Last Name"
+        placeholder="Enter Last Name"
+        value={lastName}
+        error={errors?.lastName}
+        disabled={fieldsDisabled}
+        onChange={(event) => onLastNameChange(event.target.value)}
+        onKeyDown={handleKeyDown}
+      />
+      <PasswordInput
+        label="Password"
+        placeholder="Enter Password"
+        value={password}
+        error={errors?.password}
+        disabled={fieldsDisabled}
+        onChange={(event) => onPasswordChange(event.target.value)}
+        onKeyDown={handleKeyDown}
+      />
+      <PasswordInput
+        label="Confirm Password"
+        placeholder="Confirm Password"
+        value={confirmPassword}
+        error={errors?.confirmPassword}
+        disabled={fieldsDisabled}
+        onChange={(event) => onConfirmPasswordChange(event.target.value)}
+        onKeyDown={handleKeyDown}
+      />
 
       {/* Forgot password + Continue */}
       <div className="flex items-center gap-[var(--spacing-system-l)]">

package/src/components/features/index.ts

@@ -60,6 +60,7 @@ export * from './warning-block'
 // `video-bites-shared` is the SERVER-SAFE leaf (also its own published subpath).
 export * from './cards-strip'
 export * from './video'
+export * from './video-center-badge'
 export * from './video-ratio-tabs'
 export * from './video-bites-shared'
 export * from './video-bites-strip'

package/src/components/features/video-bites-strip.tsx

@@ -36,9 +36,12 @@ import {
   sortBitesByCreatedAtDesc,
   type VideoBiteStripProfile,
 } from './video-bites-shared';
+import Image from '../../embed-shims/next-image';
 import { CardsStrip, STRIP_CELL_MAX_WIDTH } from './cards-strip';
+import { useCoverImageFallback } from '../chat/entity-cards/use-cover-image-fallback';
 import { UserDisplay } from '../user-display';
 import { Chevron02RightIcon } from '../icons-v2-generated/arrows/chevron-02-right-icon';
+import { VideoPlayBadge } from './video-center-badge';
 
 // NOTE: the title constant / profile adapter / sort comparator live in the
 // server-safe leaf `video-bites-shared.ts` (its own published subpath). The
@@ -252,7 +255,23 @@ export function VideoBiteCard({
     io.observe(el);
     return () => io.disconnect();
   }, [gateControlled]);
-  const showPlayer = gateControlled ? playerMounted : isNear;
+  const showMedia = gateControlled ? playerMounted : isNear;
+
+  // Player mounts at NEAR-VIEWPORT (not on first hover) so hover playback is
+  // INSTANT for any card the user can reach — mounting on activation made
+  // freshly-scrolled cards stall for seconds while MuxPlayer initialized and
+  // buffered. Always-mounted players are visually safe now that every bite
+  // carries a poster: the player renders with a transparent media background
+  // over the card's poster layer, so a not-yet-decoded player never shows as
+  // a black rectangle (the original wrap-seam flash came from POSTERLESS
+  // mounted players, not from mounting itself).
+  const showPlayer = showMedia;
+
+  // Poster resolution — THE shared entity-card cover fallback chain
+  // (use-cover-image-fallback): the bite's real thumbnail_url, dropped on
+  // load error. When it resolves to null (no thumbnail yet, or it failed)
+  // the media zone falls back to the first-frame <video> facade below.
+  const { src: posterSrc, onError: onPosterError } = useCoverImageFallback(bite.thumbnail_url);
 
   const navigate = () => {
     if (bite.onNavigate) bite.onNavigate();
@@ -342,26 +361,65 @@ export function VideoBiteCard({
       // same as the old single-box layout). Editor mode: width-driven.
       style={{ aspectRatio: cssAspect, ...(height !== undefined ? { height, maxWidth: STRIP_CELL_MAX_WIDTH } : {}) }}
     >
-      {showPlayer ? (
+      {showMedia ? (
         // Clones: `inert` (not just the wrapper's aria-hidden) — the player's
         // shadow-DOM center control is otherwise still tab-reachable inside a
         // hidden subtree (axe aria-hidden-focus). Hover preview on clones
         // keeps working: playback is driven imperatively from the CARD's own
         // pointer handlers, never from focus/clicks on the player chrome.
         <div className="absolute inset-0" inert={isClone || undefined}>
-          {/* CONTROLLED hover playback keyed to CARD hover (`isActive`): the
-              detail overlay is part of the card, so moving the pointer onto
-              it keeps playing. Sound at 50% (pre-activation: muted start +
-              live unmute on the user's first gesture); chrome = center
-              play/pause only (Figma card look). */}
-          <Video
-            kind="file"
-            url={bite.url}
-            poster={bite.thumbnail_url}
-            playWhenHovered={isActive}
-            centerControlsOnly
-            layout="fill"
-          />
+          {/* Poster layer. Preferred: the bite's REAL thumbnail (generated at
+              Vizard-ingestion time by vizard-persistence-utils via Shotstack
+              capture — the provider sends no cover), resolved through the
+              shared cover fallback chain. Fallback when it's absent or fails
+              to load: the <Video> component's `firstFrameOnly` facade paints
+              the `#t=0.1` frame. Either way the box is never a black
+              rectangle, and original + clone paint the IDENTICAL image so the
+              marquee's wrap seam stays pixel-invisible. */}
+          {posterSrc ? (
+            <Image
+              src={posterSrc}
+              alt=""
+              fill
+              unoptimized
+              onError={onPosterError}
+              className="object-cover"
+            />
+          ) : (
+            <Video kind="file" url={bite.url} firstFrameOnly layout="fill" />
+          )}
+
+          {/* Play affordance for every non-playing state (resting poster,
+              facade, mounted-but-paused): <VideoPlayBadge> — a pixel replica
+              of MuxPlayer's pre-play center button (media-chrome's own PAUSED
+              center control is a different, smaller bare glyph, so the
+              mounted player runs chromeless and the replica keeps all states
+              identical to the mux button). Hidden while playing. */}
+          {!isActive && <VideoPlayBadge className="absolute inset-0 z-10 m-auto" />}
+          {showPlayer && (
+            // `--media-background-color: transparent` (inherited into
+            // media-chrome) — the freshly-mounted player must not blank the
+            // facade behind it with its default black fill while it loads.
+            <div
+              className="absolute inset-0"
+              style={{ '--media-background-color': 'transparent' } as React.CSSProperties}
+            >
+              {/* CONTROLLED hover playback keyed to CARD hover (`isActive`): the
+                  detail overlay is part of the card, so moving the pointer onto
+                  it keeps playing. Sound at 50% (pre-activation: muted start +
+                  live unmute on the user's first gesture); CHROMELESS — the
+                  card's mux-replica badge above is the play affordance for
+                  every non-playing state. */}
+              <Video
+                kind="file"
+                url={bite.url}
+                poster={bite.thumbnail_url}
+                playWhenHovered={isActive}
+                chromeless
+                layout="fill"
+              />
+            </div>
+          )}
         </div>
       ) : (
         // Aspect-matched placeholder until the card nears the viewport (CLS-free).

package/src/components/features/video-center-badge.tsx

@@ -0,0 +1,77 @@
+'use client'
+
+/**
+ * THE center media glyphs — the single visual identity for every play/unmute
+ * affordance over video, across the whole project: a SOLID WHITE GLYPH
+ * (`text-ods-text-primary`), NO background disc, with a soft drop-shadow for
+ * legibility over arbitrary frames. Accent color appears ONLY while the
+ * icon's own control is hovered (hosts pass `group-hover:text-ods-accent`;
+ * mux-player controls get the same via `::part(button):hover` in
+ * styles/app-globals.css).
+ *
+ * Glyphs come from THE icon system — never inline SVG paths here:
+ * PlayFilledIcon / VolumeOffFilledIcon (components/icons — the FILLED
+ * media-chrome-matching glyphs, so custom affordances are pixel-identical to
+ * MuxPlayer's native center button on real players).
+ *
+ * Consumers:
+ *   - <VideoBiteCard> resting/paused posters (md)
+ *   - <YouTubeFacade> poster (lg)
+ *   - <MediaCarousel> video thumbnails (sm)
+ *   - <FilePlayer>'s unmute chip (VideoUnmuteGlyph, md)
+ *   - MuxPlayer's native center pre-play button is stripped to the same bare
+ *     glyph language via CSS (see styles/app-globals.css).
+ */
+
+import React from 'react'
+import { PlayFilledIcon } from '../icons/play-filled-icon'
+import { VolumeOffFilledIcon } from '../icons/volume-off-filled-icon'
+import { cn } from '../../utils/cn'
+
+export type VideoCenterBadgeSize = 'sm' | 'md' | 'lg'
+
+const SIZES: Record<VideoCenterBadgeSize, number> = {
+  sm: 20, // gallery thumbnails
+  md: 56, // strip cards + unmute chip
+  lg: 64, // hero facades
+}
+
+/** Soft legibility shadow — NOT a background (per design: bare glyphs). */
+const GLYPH_SHADOW = 'drop-shadow(0 1px 4px rgba(0,0,0,0.5))'
+
+export interface VideoPlayBadgeProps {
+  size?: VideoCenterBadgeSize
+  className?: string
+}
+
+/** Bare play glyph (the icon system's PlayIcon). Decorative
+ *  (`pointer-events-none`) — the host surface owns activation. */
+export function VideoPlayBadge({ size = 'md', className }: VideoPlayBadgeProps): React.ReactElement {
+  return (
+    <div
+      className={cn('pointer-events-none flex items-center justify-center text-ods-text-primary transition-colors', className)}
+      style={{ filter: GLYPH_SHADOW }}
+    >
+      <PlayFilledIcon size={SIZES[size]} color="currentColor" />
+    </div>
+  )
+}
+
+export interface VideoUnmuteGlyphProps {
+  size?: VideoCenterBadgeSize
+  className?: string
+}
+
+/** Bare muted-volume glyph (the icon system's VolumeOffFilledIcon). Rendered
+ *  by FilePlayer's unmute button; exported here so play + unmute share one
+ *  identity. */
+export function VideoUnmuteGlyph({ size = 'md', className }: VideoUnmuteGlyphProps): React.ReactElement {
+  return (
+    <VolumeOffFilledIcon
+      size={SIZES[size]}
+      color="currentColor"
+      className={className}
+      style={{ filter: GLYPH_SHADOW }}
+    />
+  )
+}

package/src/components/features/video.tsx

@@ -32,8 +32,7 @@
 
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import MuxPlayer from '@mux/mux-player-react';
-import { PlayIcon } from '../icons-v2-generated/media-playback/play-icon';
-import { VolumeXmarkIcon } from '../icons-v2-generated/audio-and-visual/volume-xmark-icon';
+import { VideoPlayBadge, VideoUnmuteGlyph } from './video-center-badge';
 import { fetchPriorityProp } from '../../utils/fetch-priority';
 
 // =============================================================================
@@ -250,9 +249,12 @@ interface VideoFileProps extends VideoCommonProps {
    *  true → start hover playback, false → pause. When provided, the internal
    *  pointer handlers are disabled. */
   playWhenHovered?: boolean;
-  /** Hide the bottom control bar, keep only the CENTER play/pause control
-   *  (bite-strip cards per Figma). */
-  centerControlsOnly?: boolean;
+  /** Render ONLY a lightweight first-frame preview — a metadata-only element
+   *  seeked to `#t=0.1` (media-fragment trick; paints on iOS Safari where a
+   *  fragmentless metadata load stays blank). No chrome, no playback, no
+   *  MuxPlayer cost — the resting facade layer under strip cards when no
+   *  poster asset exists. All player props are ignored. */
+  firstFrameOnly?: boolean;
 }
 
 interface VideoYouTubeProps extends VideoCommonProps {
@@ -272,7 +274,7 @@ interface VideoAutoProps extends VideoCommonProps {
   chromeless?: boolean;
   playOnHover?: boolean;
   playWhenHovered?: boolean;
-  centerControlsOnly?: boolean;
+  firstFrameOnly?: boolean;
 }
 
 export type VideoProps = VideoFileProps | VideoYouTubeProps | VideoAutoProps;
@@ -297,6 +299,8 @@ export function Video(props: VideoProps): React.ReactElement | null {
         className={props.className}
         minimalControls={props.minimalControls}
       />
+    ) : 'firstFrameOnly' in props && props.firstFrameOnly ? (
+      <FirstFramePreview url={url} className={props.className} />
     ) : (
       <FilePlayer
         url={url}
@@ -309,7 +313,6 @@ export function Video(props: VideoProps): React.ReactElement | null {
         chromeless={'chromeless' in props ? props.chromeless : undefined}
         playOnHover={'playOnHover' in props ? props.playOnHover : undefined}
         playWhenHovered={'playWhenHovered' in props ? props.playWhenHovered : undefined}
-        centerControlsOnly={'centerControlsOnly' in props ? props.centerControlsOnly : undefined}
         className={props.className}
       />
     );
@@ -373,6 +376,35 @@ function wrapWithLayout(
   }
 }
 
+// -----------------------------------------------------------------------------
+// First-frame preview — the `firstFrameOnly` facade branch
+// -----------------------------------------------------------------------------
+
+/** First-frame paint through the SAME FilePlayer/MuxPlayer pipeline as
+ *  playback (one rendering path for every file source — HLS included, which a
+ *  plain `<video>` couldn't decode in Chromium): a chromeless, muted,
+ *  metadata-only instance whose `#t=0.1` media fragment seeks-and-paints the
+ *  first frame (also fixes iOS Safari, which stays blank on a fragmentless
+ *  metadata load). The transparent media background keeps the box showing the
+ *  card surface (never black) until the frame decodes. */
+function FirstFramePreview({ url, className }: { url: string; className?: string }): React.ReactElement {
+  return (
+    <div
+      aria-hidden
+      className="h-full w-full"
+      style={{ '--media-background-color': 'transparent' } as React.CSSProperties}
+    >
+      <FilePlayer
+        url={`${url}#t=0.1`}
+        preload="metadata"
+        muted
+        chromeless
+        className={className}
+      />
+    </div>
+  );
+}
+
 // -----------------------------------------------------------------------------
 // File branch — MuxPlayer (handles both .m3u8 HLS and plain .mp4)
 // -----------------------------------------------------------------------------
@@ -388,7 +420,8 @@ interface FilePlayerProps {
   chromeless?: boolean;
   playOnHover?: boolean;
   playWhenHovered?: boolean;
-  centerControlsOnly?: boolean;
+  /** Media preload hint — the firstFrameOnly facade passes 'metadata'. */
+  preload?: 'none' | 'metadata' | 'auto';
   className?: string;
 }
 
@@ -403,12 +436,9 @@ function FilePlayer({
   chromeless,
   playOnHover,
   playWhenHovered,
-  centerControlsOnly,
+  preload,
   className,
 }: FilePlayerProps): React.ReactElement {
-  // centerControlsOnly: the center play button shows at REST only — while
-  // playing, ALL chrome hides (no pause sign over the hover-preview).
-  const [isPlaying, setIsPlaying] = useState(false);
   // True while hover playback is running MUTED because the browser's autoplay
   // policy blocked sound (no user activation yet). Drives the center unmute
   // control — the industry pattern (muted autoplay + explicit unmute button)
@@ -546,11 +576,10 @@ function FilePlayer({
   const player = (
     <MuxPlayer
       ref={hoverPlayerRef as React.Ref<never>}
-      onPlay={centerControlsOnly ? () => setIsPlaying(true) : undefined}
-      onPause={centerControlsOnly ? () => setIsPlaying(false) : undefined}
       src={url}
       poster={poster || undefined}
       streamType="on-demand"
+      preload={preload}
       playsInline
       muted={muted}
       preferCmcd="header"
@@ -581,15 +610,6 @@ function FilePlayer({
         width: '100%',
         height: '100%',
         ...(chromeless ? ({ '--controls': 'none' } as React.CSSProperties) : {}),
-        ...(centerControlsOnly && !chromeless
-          ? ({
-              '--bottom-controls': 'none',
-              '--top-controls': 'none',
-              // While playing, hide the center control too — no pause sign
-              // over the hover-preview; it reappears when playback pauses.
-              ...(isPlaying ? { '--center-controls': 'none' } : {}),
-            } as React.CSSProperties)
-          : {}),
       }}
     >
       {captionsUrl ? (
@@ -616,9 +636,11 @@ function FilePlayer({
       aria-label="Unmute"
       title="Unmute"
       onClick={unmuteNow}
-      className="absolute inset-0 z-10 m-auto flex h-14 w-14 items-center justify-center text-ods-text-primary transition-opacity hover:opacity-75"
+      // White at rest, ACCENT while the icon itself is hovered — the same
+      // hover language as every mux control icon (see app-globals.css).
+      className="absolute inset-0 z-10 m-auto flex h-14 w-14 items-center justify-center text-ods-text-primary transition-colors hover:text-ods-accent"
     >
-      <VolumeXmarkIcon size={56} />
+      <VideoUnmuteGlyph />
     </button>
   ) : null;
 
@@ -882,9 +904,10 @@ function YouTubeFacadeInner({
           />
         </picture>
         <div className="absolute inset-0 flex items-center justify-center bg-ods-bg-inverse bg-opacity-20 transition-opacity duration-200 group-hover:bg-opacity-30">
-          <span className="flex items-center justify-center w-16 h-16 rounded-full bg-ods-accent text-ods-text-on-accent shadow-lg transition-transform duration-200 group-hover:scale-110">
-            <PlayIcon size={24} color="currentColor" className="ml-1" />
-          </span>
+          {/* THE shared center play badge (video-center-badge.tsx) — same disc
+              as strip cards / carousel thumbs / unmute chip; hero size + the
+              facade's hover-scale affordance. */}
+          <VideoPlayBadge size="lg" className="transition-transform duration-200 group-hover:scale-110 group-hover:text-ods-accent" />
         </div>
       </button>
     </div>

package/src/components/icons/index.ts

@@ -35,6 +35,8 @@ export { VendorDirectoryIcon } from './vendor-directory-icon';
 export { OpenSourceIcon } from './open-source-icon';
 export { CommunityHubIcon } from './community-hub-icon';
 export { AboutIcon } from './about-icon';
+export { PlayFilledIcon } from './play-filled-icon';
+export { VolumeOffFilledIcon } from './volume-off-filled-icon';
 export { UserIcon } from './user-icon';
 export { HamburgerIcon } from './hamburger-icon';
 export { MenuIcon } from './menu-icon';