@flamingo-stack/openframe-frontend-core 0.0.397 → 0.0.398

package/dist/index.js

@@ -186,6 +186,7 @@ import {
   ContextItemsSkeleton,
   ContextMenuRow,
   CreateOrganizationForm,
+  CrossfadePanels,
   CursorPagination,
   CursorPaginationSimple,
   CustomerInterviewCard,
@@ -606,7 +607,9 @@ import {
   VideoBitesDisplay,
   VideoBitesStrip,
   VideoClipsSection,
+  VideoPlayBadge,
   VideoSourceSelector,
+  VideoUnmuteGlyph,
   ViewToggle,
   WaitlistForm,
   WarningBlock,
@@ -913,7 +916,7 @@ import {
   validateEmailDomain,
   validateEmailDomainList,
   validatePhoneNumber
-} from "./chunk-CK5UZLIN.js";
+} from "./chunk-B2K5COVE.js";
 import {
   CommandApprovalToast,
   DEFAULT_MIN_FILL_MS,
@@ -1024,7 +1027,7 @@ import {
   validateSchema,
   validateVariables,
   variablesToUrlParams
-} from "./chunk-KQESCGVG.js";
+} from "./chunk-ZSZRJWY3.js";
 import {
   PLAY_ICON_PATH
 } from "./chunk-OYGFWWLQ.js";
@@ -1167,6 +1170,7 @@ import {
   PackageIcon,
   PatchPolicyIcon,
   PilotIcon,
+  PlayFilledIcon,
   PlusCircleIcon,
   PodbeanIcon,
   PoliciesIcon,
@@ -1209,6 +1213,7 @@ import {
   VendorDirectoryIcon,
   VendorShowcaseMainIcon,
   VendorsIcon,
+  VolumeOffFilledIcon,
   WhatsAppIcon,
   WindowsIcon,
   XIcon,
@@ -1216,7 +1221,7 @@ import {
   YouTubeIcon,
   getDeviceTypeIcon,
   renderSvgIcon
-} from "./chunk-LQHMXPOJ.js";
+} from "./chunk-N7YBNHVT.js";
 import "./chunk-W72U7OU7.js";
 import {
   cn,
@@ -1439,6 +1444,7 @@ export {
   CopyIcon,
   CpuIcon,
   CreateOrganizationForm,
+  CrossfadePanels,
   CursorPagination,
   CursorPaginationSimple,
   CustomExternalLinkIcon,
@@ -1794,6 +1800,7 @@ export {
   PilotIcon,
   PlatformBadge,
   PlatformFilterComponent,
+  PlayFilledIcon,
   PlusCircleIcon,
   PodbeanIcon,
   PoliciesIcon,
@@ -2018,8 +2025,11 @@ export {
   VideoBitesDisplay,
   VideoBitesStrip,
   VideoClipsSection,
+  VideoPlayBadge,
   VideoSourceSelector,
+  VideoUnmuteGlyph,
   ViewToggle,
+  VolumeOffFilledIcon,
   WaitlistForm,
   WarningBlock,
   WhatIShippedCard,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flamingo-stack/openframe-frontend-core",
-  "version": "0.0.397",
+  "version": "0.0.398",
   "description": "Shared design system and components for all Flamingo platforms",
   "type": "module",
   "main": "./dist/index.js",
@@ -257,9 +257,9 @@
     "test:ui": "vitest --ui",
     "test:run": "vitest run",
     "test:coverage": "vitest run --coverage",
-    "yalc:watch": "NODE_OPTIONS='--max-old-space-size=4096' nodemon --watch src --watch tsconfig.json --watch tsup.config.ts --watch tailwind.config.ts --watch package.json -e ts,tsx,json,css --ignore dist --ignore node_modules --ignore '*.lock' --ignore .yalc --ignore yalc.lock --exec 'rm -rf dist && tsup && tsc -p tsconfig.declarations.json && yalc push --changed'",
-    "yalc:push": "yalc push",
-    "yalc:publish": "yalc publish",
+    "yalc:watch": "NODE_OPTIONS='--max-old-space-size=4096' nodemon --watch src --watch tsconfig.json --watch tsup.config.ts --watch tailwind.config.ts --watch package.json -e ts,tsx,json,css --ignore dist --ignore node_modules --ignore '*.lock' --ignore .yalc --ignore yalc.lock --exec 'rm -rf dist && tsup && tsc -p tsconfig.declarations.json && yalc push --changed ${YALC_STORE_FOLDER:+--store-folder \"$YALC_STORE_FOLDER\"}'",
+    "yalc:push": "yalc push ${YALC_STORE_FOLDER:+--store-folder \"$YALC_STORE_FOLDER\"}",
+    "yalc:publish": "yalc publish ${YALC_STORE_FOLDER:+--store-folder \"$YALC_STORE_FOLDER\"}",
     "generate:icons": "node scripts/generate-icons.mjs",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build"

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';

package/src/components/icons/play-filled-icon.tsx

@@ -0,0 +1,36 @@
+import type { SVGProps } from "react";
+
+export interface PlayFilledIconProps
+  extends Omit<SVGProps<SVGSVGElement>, "width" | "height"> {
+  className?: string;
+  size?: number;
+  color?: string;
+}
+
+/**
+ * Solid play triangle — the SAME glyph media-chrome/MuxPlayer renders in its
+ * native center play button, so custom video affordances (strip cards,
+ * facades, carousels) stay pixel-consistent with real player chrome.
+ * Hand-maintained (not in the Figma-generated set, which has only the
+ * outline `PlayIcon`).
+ */
+export function PlayFilledIcon({
+  className = "",
+  size = 24,
+  color = "currentColor",
+  ...props
+}: PlayFilledIconProps) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      fill="none"
+      viewBox="0 0 24 24"
+      className={className}
+      {...props}
+    >
+      <path fill={color} d="m6 21 15-9L6 3v18Z" />
+    </svg>
+  );
+}

package/src/components/icons/volume-off-filled-icon.tsx

@@ -0,0 +1,38 @@
+import type { SVGProps } from "react";
+
+export interface VolumeOffFilledIconProps
+  extends Omit<SVGProps<SVGSVGElement>, "width" | "height"> {
+  className?: string;
+  size?: number;
+  color?: string;
+}
+
+/**
+ * Solid muted-volume glyph (speaker + slash) — the filled companion to
+ * `PlayFilledIcon`, matching media-chrome's icon family so video unmute
+ * affordances read identically to real player chrome. Hand-maintained (the
+ * Figma-generated set has only outline volume icons).
+ */
+export function VolumeOffFilledIcon({
+  className = "",
+  size = 24,
+  color = "currentColor",
+  ...props
+}: VolumeOffFilledIconProps) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      fill="none"
+      viewBox="0 0 24 24"
+      className={className}
+      {...props}
+    >
+      <path
+        fill={color}
+        d="M16.5 12A4.5 4.5 0 0 0 14 7.97v2.21l2.45 2.45c.03-.2.05-.41.05-.63Zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51A8.796 8.796 0 0 0 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71ZM4.27 3 3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06a8.99 8.99 0 0 0 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3ZM12 4 9.91 6.09 12 8.18V4Z"
+      />
+    </svg>
+  );
+}

package/src/components/media-carousel.tsx

@@ -4,7 +4,7 @@ import { useState, useRef, useEffect, memo, useCallback } from 'react';
 import { cn } from "../utils/cn";
 import { MediaItem } from '../utils/media-carousel-utils-stub';
 import { Video, extractYouTubeId } from './features/video';
-import { PlayIcon } from './icons-v2-generated/media-playback/play-icon';
+import { VideoPlayBadge } from './features/video-center-badge';
 
 // Navigation icons
 const ChevronLeftIcon = () => (
@@ -215,9 +215,7 @@ export const MediaCarousel = memo(function MediaCarousel({
         {/* Play icon overlay for videos */}
         {(item.type === 'video' || item.type === 'youtube') && (
           <div className="absolute inset-0 flex items-center justify-center bg-black/30">
-            <div className="bg-black/70 rounded-full p-1">
-              <PlayIcon size={12} color="white" />
-            </div>
+            <VideoPlayBadge size="sm" />
           </div>
         )}