@flamingo-stack/openframe-frontend-core 0.0.446 → 0.0.447

package/src/components/features/mux-origins.ts

@@ -1,12 +1,17 @@
 /**
- * Mux CDN origin constants — single source of truth, server-safe.
+ * Mux CDN origins + playback-URL helpers — single source of truth, server-safe.
  *
  * Lives in its own NON-`'use client'` module so server-side hub
  * modules (webhook handlers, URL builders, hostname comparisons in
- * `lib/config/mux-config.ts`) can import these strings without
+ * `lib/config/mux-config.ts`) can import these without
  * tripping Next.js's client-reference poisoning. Re-exported from
  * `use-video-warmup.ts` for backward-compat with client-side callers.
  *
+ * The Mux-HLS detection in `toMuxPreviewUrl` intentionally overlaps the
+ * hub's `lib/config/mux-config.ts` `isMuxHlsUrl` — same documented
+ * cross-repo duplication umbrella as the origin constants (the hub's
+ * server code cannot depend on this package's client-marked siblings).
+ *
  * Bug history (2026-05-29): when these constants lived in
  * `use-video-warmup.ts` (which is `'use client'`), the hub's
  * server-side `new URL(MUX_STREAM_ORIGIN).hostname` evaluation crashed
@@ -25,3 +30,36 @@ export const MUX_STREAM_ORIGIN = 'https://stream.mux.com'
 
 /** Server-generated thumbnails (`/{playback_id}/thumbnail.jpg`). */
 export const MUX_IMAGE_ORIGIN = 'https://image.mux.com'
+
+/** Valid values for Mux's `max_resolution` playback modifier (720p is the floor). */
+export type MuxMaxResolution = '720p' | '1080p' | '1440p' | '2160p'
+
+/**
+ * Cap the renditions offered by a public Mux HLS manifest for small
+ * preview players (e.g. the ~234px video-bite hover cards) by appending
+ * Mux's `max_resolution` playback modifier.
+ *
+ * Why a URL param and not a player prop: MuxPlayer's `maxResolution`
+ * prop only applies when playing via `playbackId` — our SSOT passes
+ * `src` URLs. And on Safari (native HLS, no hls.js) manifest-level
+ * filtering is the ONLY rendition cap; hls.js's `capLevelToPlayerSize`
+ * doesn't exist there.
+ *
+ * Pass-through (returns `url` unchanged) for: non-Mux hosts (Supabase
+ * MP4s, YouTube), non-`.m3u8` paths (MP4 renditions), signed URLs
+ * (`?token=` — Mux forbids loose modifiers alongside a token; they must
+ * live in the JWT), and unparseable strings.
+ */
+export function toMuxPreviewUrl(url: string, maxResolution: MuxMaxResolution = '720p'): string {
+  let parsed: URL
+  try {
+    parsed = new URL(url)
+  } catch {
+    return url
+  }
+  if (parsed.origin !== MUX_STREAM_ORIGIN) return url
+  if (!parsed.pathname.endsWith('.m3u8')) return url
+  if (parsed.searchParams.has('token')) return url
+  parsed.searchParams.set('max_resolution', maxResolution)
+  return parsed.toString()
+}

package/src/components/features/release-media-manager.tsx

@@ -2,8 +2,9 @@
 
 import { useState, useRef } from 'react';
 import { Button, Input, Label, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Textarea } from '../ui';
-import { Trash2, Plus, Image as ImageIcon, Video, Upload, Loader2, GripVertical } from 'lucide-react';
+import { Trash2, Plus, Image as ImageIcon, Video as VideoIcon, Upload, Loader2, GripVertical } from 'lucide-react';
 import Image from '../../embed-shims/next-image';
+import { Video } from './video';
 
 export interface ReleaseMediaItem {
   media_type: 'image' | 'video' | 'screenshot' | 'demo';
@@ -113,7 +114,7 @@ export function ReleaseMediaManager({
     switch (type) {
       case 'video':
       case 'demo':
-        return <Video className="w-5 h-5 text-ods-text-secondary" />;
+        return <VideoIcon className="w-5 h-5 text-ods-text-secondary" />;
       default:
         return <ImageIcon className="w-5 h-5 text-ods-text-secondary" />;
     }
@@ -205,12 +206,9 @@ export function ReleaseMediaManager({
                 {item.media_url && (
                   <div className="aspect-video relative bg-ods-bg">
                     {item.media_type === 'video' || item.media_type === 'demo' ? (
-                      <video
-                        src={item.media_url}
-                        className="w-full h-full object-cover"
-                        controls
-                        preload="metadata"
-                      />
+                      // <Video> SSOT (MuxPlayer) — plays Mux HLS + MP4 alike;
+                      // fit="cover" crops to the aspect-video cell.
+                      <Video kind="file" url={item.media_url} fit="cover" className="w-full h-full" />
                     ) : (
                       <Image
                         src={item.media_url}

package/src/components/features/use-video-warmup.ts

@@ -48,6 +48,18 @@ import { useChatRuntime } from '../../contexts/chat-runtime-context'
 export { MUX_STREAM_ORIGIN, MUX_IMAGE_ORIGIN } from './mux-origins'
 import { MUX_STREAM_ORIGIN, MUX_IMAGE_ORIGIN } from './mux-origins'
 
+/**
+ * Save-Data detection — the ONE source of truth for "is this a metered
+ * connection". Consumed by the preload gate below and by `video.tsx`'s
+ * default `preload` policy. SSR-safe (returns false on the server).
+ */
+export function saveDataEnabled(): boolean {
+  if (typeof navigator === 'undefined') return false
+  type Connection = { saveData?: boolean }
+  const conn = (navigator as Navigator & { connection?: Connection }).connection
+  return conn?.saveData === true
+}
+
 /**
  * Preconnect-only variant — fires the three video-bearing origin
  * preconnects (Supabase Storage + Mux stream + Mux image) without
@@ -68,6 +80,12 @@ import { MUX_STREAM_ORIGIN, MUX_IMAGE_ORIGIN } from './mux-origins'
  * any equivalent provider that wires the field) get the origin
  * automatically. The explicit `supabaseStorageOrigin` argument
  * overrides the runtime value when set.
+ *
+ * The hub's `app/layout.tsx` also emits STATIC `<link rel="preconnect">`
+ * tags for the same Mux origins (document-parse-time warmup; React
+ * dedupes against these runtime calls via the matching
+ * crossOrigin="anonymous"). A change to the origin list here must be
+ * mirrored there.
  */
 export function useVideoOriginPreconnect({
   supabaseStorageOrigin,
@@ -139,9 +157,7 @@ export function useVideoWarmup<T extends Element = HTMLDivElement>({
     if (!isNear || !videoUrl || !resolvedOrigin) return
 
     // Save-Data gate — metered connections skip preload.
-    type Connection = { saveData?: boolean }
-    const conn = (navigator as Navigator & { connection?: Connection }).connection
-    if (conn?.saveData === true) return
+    if (saveDataEnabled()) return
 
     // Origin gate: only preload Supabase-hosted MP4s. Mux HLS warms
     // via the manifest fetch when MuxPlayer mounts; YouTube has no

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

@@ -29,6 +29,8 @@ import React, { useMemo, useRef, useState, useEffect } from 'react';
 import { cn } from '../../utils/cn';
 import { Video } from './video';
 import { useVideoWarmup } from './use-video-warmup';
+import { toMuxPreviewUrl } from './mux-origins';
+import { NEAR_VIEWPORT_ROOT_MARGIN } from '../../hooks/use-near-viewport';
 import { detectAspectRatio, RATIO_TO_CSS_ASPECT, ratioToCategory } from './video-ratio-tabs';
 import type { VideoTeaserWithRatio } from './video-ratio-tabs';
 import {
@@ -227,7 +229,16 @@ export function VideoBiteCard({
   const cssAspect = RATIO_TO_CSS_ASPECT[ratioToCategory(detectAspectRatio(bite.aspect_ratio))];
   const targetHref = bite.href ?? sectionHref;
   const hasTarget = !!(targetHref || bite.onNavigate || onBiteNavigate);
+  // Strip keys and navigation stay on the RAW bite.url — only playback gets
+  // the rendition-capped preview URL below, so keys are stable regardless of
+  // the cap and original + clone share one HTTP cache entry per URL.
   const key = cardKey ?? `${bite.url}__${index}`;
+  // Rendition-capped playback URL for this ~234px preview card: public Mux
+  // HLS manifests get `?max_resolution=720p` (the only Safari-side cap —
+  // native HLS ignores hls.js's player-size capping); everything else passes
+  // through unchanged. Used by BOTH the first-frame facade and the hover
+  // player so the two layers share the manifest fetch.
+  const previewUrl = toMuxPreviewUrl(bite.url);
 
   // Hover activation: controlled by the strip (activeKey) or self-managed
   // when rendered standalone (admin editor).
@@ -250,7 +261,7 @@ export function VideoBiteCard({
     if (!el || typeof IntersectionObserver === 'undefined') return;
     const io = new IntersectionObserver(
       entries => setIsNear(entries[0]?.isIntersecting ?? false),
-      { rootMargin: '500px' },
+      { rootMargin: NEAR_VIEWPORT_ROOT_MARGIN },
     );
     io.observe(el);
     return () => io.disconnect();
@@ -392,7 +403,7 @@ export function VideoBiteCard({
               className="object-cover"
             />
           ) : (
-            <Video kind="file" url={bite.url} firstFrameOnly layout="fill" />
+            <Video kind="file" url={previewUrl} firstFrameOnly layout="fill" />
           )}
 
           {/* Play affordance for every non-playing state (resting poster,
@@ -415,10 +426,19 @@ export function VideoBiteCard({
                   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. */}
+                  every non-playing state.
+
+                  INVARIANTS (do not regress):
+                  - No explicit `preload` — the SSOT default ('metadata',
+                    'none' under Save-Data) buffers manifest + ~1 segment on
+                    mount, which is exactly what makes hover start instant.
+                  - The poster <Image> layer above stays mounted UNDER this
+                    player permanently, and play() is imperative — never gated
+                    on poster load — so there is no black flash and no
+                    loading state between hover and first frame. */}
               <Video
                 kind="file"
-                url={bite.url}
+                url={previewUrl}
                 poster={bite.thumbnail_url}
                 playWhenHovered={isActive}
                 chromeless

package/src/components/features/video-source-selector.tsx

@@ -1,13 +1,14 @@
 "use client";
 
-import React, { useState, useCallback, useEffect } from 'react';
-import { Upload, Sparkles, X, Video, Loader2 } from 'lucide-react';
+import React, { useState, useCallback } from 'react';
+import { Upload, X, Video as VideoIcon } from 'lucide-react';
 import { AIGeneratedBadge } from '../ui/ai-generated-badge';
 import { Button } from '../ui/button';
 import { Input } from '../ui/input';
 import { Label } from '../ui/label';
 import { Badge } from '../ui/badge';
 import { YouTubeIcon } from '../icons/youtube-icon';
+import { Video } from './video';
 
 export type VideoSourceType = 'youtube' | 'uploaded';
 
@@ -48,16 +49,6 @@ export interface VideoSourceSelectorProps {
     onDelete: () => void;
     isAIGenerated?: boolean;
   }>;
-  /**
-   * Optional: resolve the uploaded video URL before it's handed to the DEFAULT
-   * `<video>` preview (no-op when a `VideoPreviewComponent` is supplied — that
-   * component owns its own rendering). Lets a consumer swap a URL that a native
-   * `<video>` can't play — e.g. a Mux HLS manifest (`stream.mux.com/{id}.m3u8`),
-   * which Chrome/Firefox/Edge can't play natively — for a playable MP4. Without
-   * it the URL is used as-is (backward compatible). A rejected resolve degrades
-   * gracefully to the original URL.
-   */
-  resolveVideoUrl?: (url: string) => Promise<string>;
   /** Optional: Upload progress bar component */
   UploadProgressComponent?: React.ComponentType<{
     progress: number;
@@ -95,7 +86,6 @@ export function VideoSourceSelector({
   uploadEmptyText = 'No video uploaded yet. Click "Upload Video" to add one.',
   disabled = false,
   VideoPreviewComponent,
-  resolveVideoUrl,
   UploadProgressComponent,
   title = 'Video',
   showTitle = true,
@@ -149,7 +139,7 @@ export function VideoSourceSelector({
       {/* Section Title */}
       {showTitle && (
         <h3 className="text-h5 text-ods-text-primary flex items-center gap-2">
-          <Video className="h-5 w-5" />
+          <VideoIcon className="h-5 w-5" />
           {title}
         </h3>
       )}
@@ -256,10 +246,8 @@ export function VideoSourceSelector({
                 isAIGenerated={isAIGenerated}
               />
             ) : (
-              // Default simple preview (resolver-aware — see DefaultVideoPreview)
               <DefaultVideoPreview
                 videoUrl={mainVideoUrl}
-                resolveVideoUrl={resolveVideoUrl}
                 onDelete={handleDeleteVideo}
                 disabled={disabled}
               />
@@ -276,55 +264,27 @@ export function VideoSourceSelector({
 }
 
 interface DefaultVideoPreviewProps {
-  /** Uploaded video URL (possibly an HLS manifest a native `<video>` can't play). */
+  /** Uploaded video URL — MP4 or Mux HLS manifest, both playable via <Video>. */
   videoUrl: string;
-  /** Optional resolver → playable MP4 URL; omit for as-is (backward-compatible) behaviour. */
-  resolveVideoUrl?: (url: string) => Promise<string>;
   onDelete: () => void;
   disabled?: boolean;
 }
 
 /**
- * Default `<video>` preview for {@link VideoSourceSelector} when no
- * `VideoPreviewComponent` is supplied. When `resolveVideoUrl` is provided the URL
- * is resolved (e.g. Mux HLS → MP4) before it reaches the native `<video>`, which
- * can't play HLS on Chrome/Firefox/Edge; a rejected resolve degrades to the
- * original URL. Without a resolver the URL is used synchronously, unchanged.
+ * Default preview for {@link VideoSourceSelector} when no
+ * `VideoPreviewComponent` is supplied. Renders through the `<Video>` SSOT
+ * (MuxPlayer), which plays Mux HLS manifests directly on every browser —
+ * no HLS→MP4 resolve step needed for playback.
  */
-function DefaultVideoPreview({ videoUrl, resolveVideoUrl, onDelete, disabled }: DefaultVideoPreviewProps) {
-  // `undefined` only while an async resolve is in flight (first paint); otherwise
-  // the (possibly resolved) URL. Synchronous passthrough when there's no resolver.
-  const [resolvedUrl, setResolvedUrl] = useState<string | undefined>(
-    resolveVideoUrl ? undefined : videoUrl,
-  );
-
-  useEffect(() => {
-    if (!resolveVideoUrl) {
-      setResolvedUrl(videoUrl);
-      return;
-    }
-    // Guard against a late resolve overwriting a newer URL / unmounted preview.
-    let active = true;
-    setResolvedUrl(undefined);
-    resolveVideoUrl(videoUrl)
-      .then((url) => { if (active) setResolvedUrl(url); })
-      .catch(() => { if (active) setResolvedUrl(videoUrl); });
-    return () => { active = false; };
-  }, [videoUrl, resolveVideoUrl]);
-
+function DefaultVideoPreview({ videoUrl, onDelete, disabled }: DefaultVideoPreviewProps) {
   return (
     <div className="relative rounded-lg border border-ods-border overflow-hidden">
-      {resolvedUrl === undefined ? (
-        <div className="w-full h-[200px] flex items-center justify-center bg-black">
-          <Loader2 className="h-6 w-6 animate-spin text-ods-accent" />
-        </div>
-      ) : (
-        <video
-          src={resolvedUrl}
-          className="w-full h-auto max-h-[300px] object-contain bg-black"
-          controls
-        />
-      )}
+      {/* aspect-video box: MuxPlayer fills its container (width/height 100%),
+          so the wrapper must reserve the height the intrinsic-sized native
+          <video> used to provide. */}
+      <div className="w-full aspect-video max-h-[300px]">
+        <Video kind="file" url={videoUrl} />
+      </div>
       <button
         type="button"
         onClick={onDelete}

package/src/components/features/video.tsx

@@ -34,6 +34,21 @@ import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import MuxPlayer from '@mux/mux-player-react';
 import { VideoPlayBadge, VideoUnmuteGlyph } from './video-center-badge';
 import { fetchPriorityProp } from '../../utils/fetch-priority';
+import { saveDataEnabled } from './use-video-warmup';
+
+// =============================================================================
+// Dev-only hover→playing latency instrumentation gate. Always on in dev
+// builds; opt-in in production via `localStorage.VIDEO_PERF_DEBUG` so an
+// "instant hover" regression can be measured on a live deployment.
+// =============================================================================
+function videoPerfDebugEnabled(): boolean {
+  if (process.env.NODE_ENV !== 'production') return true;
+  try {
+    return typeof localStorage !== 'undefined' && localStorage.getItem('VIDEO_PERF_DEBUG') !== null;
+  } catch {
+    return false;
+  }
+}
 
 // =============================================================================
 // Suppress Google Cast SDK loading (CSP-friendly)
@@ -253,8 +268,19 @@ interface VideoFileProps extends VideoCommonProps {
    *  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. */
+   *  poster asset exists. `poster`/`fit`/`className` are honored; all other
+   *  player props are ignored. */
   firstFrameOnly?: boolean;
+  /** Media preload hint. When omitted, the SSOT default applies:
+   *  `'metadata'` (manifest + ~1 segment buffered on mount — instant
+   *  hover/click start, bounded by playback-core's maxBufferLength=1 clamp),
+   *  downgraded to `'none'` on Save-Data connections. Pass a value only to
+   *  override the policy deliberately. */
+  preload?: 'none' | 'metadata' | 'auto';
+  /** Object-fit for the media inside the player box. Default `'contain'`
+   *  (MuxPlayer default); `'cover'` crops to fill — aspect-cropped grid
+   *  cells and social-post mockups. */
+  fit?: 'contain' | 'cover';
 }
 
 interface VideoYouTubeProps extends VideoCommonProps {
@@ -275,6 +301,8 @@ interface VideoAutoProps extends VideoCommonProps {
   playOnHover?: boolean;
   playWhenHovered?: boolean;
   firstFrameOnly?: boolean;
+  preload?: 'none' | 'metadata' | 'auto';
+  fit?: 'contain' | 'cover';
 }
 
 export type VideoProps = VideoFileProps | VideoYouTubeProps | VideoAutoProps;
@@ -300,7 +328,12 @@ export function Video(props: VideoProps): React.ReactElement | null {
         minimalControls={props.minimalControls}
       />
     ) : 'firstFrameOnly' in props && props.firstFrameOnly ? (
-      <FirstFramePreview url={url} className={props.className} />
+      <FirstFramePreview
+        url={url}
+        poster={props.poster}
+        fit={'fit' in props ? props.fit : undefined}
+        className={props.className}
+      />
     ) : (
       <FilePlayer
         url={url}
@@ -313,6 +346,8 @@ 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}
+        preload={'preload' in props ? props.preload : undefined}
+        fit={'fit' in props ? props.fit : undefined}
         className={props.className}
       />
     );
@@ -387,16 +422,30 @@ function wrapWithLayout(
  *  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 {
+function FirstFramePreview({
+  url,
+  poster,
+  fit,
+  className,
+}: {
+  url: string;
+  poster?: string | null;
+  fit?: 'contain' | 'cover';
+  className?: string;
+}): React.ReactElement {
   return (
     <div
       aria-hidden
       className="h-full w-full"
       style={{ '--media-background-color': 'transparent' } as React.CSSProperties}
     >
+      {/* No explicit `preload` — inherits the SSOT default ('metadata',
+          'none' under Save-Data) so posterless facade cards honor the
+          Save-Data policy like every other surface. */}
       <FilePlayer
         url={`${url}#t=0.1`}
-        preload="metadata"
+        poster={poster}
+        fit={fit}
         muted
         chromeless
         className={className}
@@ -420,8 +469,11 @@ interface FilePlayerProps {
   chromeless?: boolean;
   playOnHover?: boolean;
   playWhenHovered?: boolean;
-  /** Media preload hint — the firstFrameOnly facade passes 'metadata'. */
+  /** Media preload hint — see the public `VideoFileProps.preload` JSDoc.
+   *  When omitted, defaults to 'metadata' ('none' under Save-Data). */
   preload?: 'none' | 'metadata' | 'auto';
+  /** Object-fit — 'cover' maps to media-chrome's `--media-object-fit`. */
+  fit?: 'contain' | 'cover';
   className?: string;
 }
 
@@ -437,8 +489,21 @@ function FilePlayer({
   playOnHover,
   playWhenHovered,
   preload,
+  fit,
   className,
 }: FilePlayerProps): React.ReactElement {
+  // Explicit preload policy — never rely on the browser/MuxPlayer implicit
+  // default. 'metadata' makes playback-core load the manifest immediately
+  // and clamp buffering to maxBufferLength=1/maxBufferSize=1 (manifest +
+  // ~1 segment, then idle); play() restores full buffering automatically.
+  // That bounded prefetch is what makes hover/click start instant. Save-Data
+  // connections get 'none' (nothing until play()). SSR note: the server pass
+  // always emits 'metadata' (saveDataEnabled() is false server-side); for
+  // Save-Data users React reconciles the property to 'none' during hydration.
+  // The mux-player custom element upgrades from client JS, so the window for
+  // an early manifest fetch is at most one bounded manifest+segment — the
+  // Save-Data verification gate covers it (see plan A2.4).
+  const effectivePreload = preload ?? (saveDataEnabled() ? 'none' : 'metadata');
   // 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)
@@ -454,7 +519,22 @@ function FilePlayer({
     pause?: () => void;
     muted?: boolean;
     volume?: number;
+    addEventListener?: (type: string, listener: () => void) => void;
+    removeEventListener?: (type: string, listener: () => void) => void;
   } | null>(null);
+  // Dev/opt-in hover→'playing' latency metric (see videoPerfDebugEnabled).
+  // One listener at a time — re-entering hover replaces it; hover-leave and
+  // unmount clear it so no stale listener survives across generations.
+  const perfListenerRef = useRef<(() => void) | null>(null);
+  const clearPerfListener = useCallback(() => {
+    if (perfListenerRef.current) {
+      try {
+        hoverPlayerRef.current?.removeEventListener?.('playing', perfListenerRef.current);
+      } catch { /* element already torn down */ }
+      perfListenerRef.current = null;
+    }
+  }, []);
+  useEffect(() => clearPerfListener, [clearPerfListener]);
   // Tracks whether the pointer is STILL over the player. A fast hover-out
   // pauses the in-flight play(), which rejects it with AbortError — that must
   // NOT trigger the muted retry (it would restart playback after the pointer
@@ -481,6 +561,17 @@ function FilePlayer({
     const generation = ++hoverGenerationRef.current;
     const el = hoverPlayerRef.current;
     if (!el) return;
+    if (videoPerfDebugEnabled()) {
+      clearPerfListener();
+      const startedAt = performance.now();
+      const onPlaying = () => {
+        clearPerfListener();
+        // eslint-disable-next-line no-console
+        console.debug('[Video] hover→playing %dms', Math.round(performance.now() - startedAt));
+      };
+      perfListenerRef.current = onPlaying;
+      try { el.addEventListener?.('playing', onPlaying); } catch { /* ignore */ }
+    }
     try {
       el.volume = 0.5;
       if (userHasInteracted) {
@@ -523,13 +614,14 @@ function FilePlayer({
         activationWaiters.add(waiter);
       }
     } catch { /* ignore */ }
-  }, []);
+  }, [clearActivationWaiter, clearPerfListener]);
   const stopHoverPlayback = useCallback(() => {
     hoverActiveRef.current = false;
     setHoverMutedFallback(false);
     clearActivationWaiter();
+    clearPerfListener();
     try { hoverPlayerRef.current?.pause?.(); } catch { /* already torn down */ }
-  }, [clearActivationWaiter]);
+  }, [clearActivationWaiter, clearPerfListener]);
 
   // Explicit unmute affordance: the click IS the user activation the autoplay
   // policy wants, so unmuting here always succeeds (and the window-level
@@ -579,7 +671,7 @@ function FilePlayer({
       src={url}
       poster={poster || undefined}
       streamType="on-demand"
-      preload={preload}
+      preload={effectivePreload}
       playsInline
       muted={muted}
       preferCmcd="header"
@@ -606,10 +698,13 @@ function FilePlayer({
       // hides only the bottom bar (center play/pause stays) — the
       // bite-strip card look per Figma. Merged (never replacing) into the
       // sizing style; custom properties need the CSSProperties cast.
+      // `--media-object-fit: cover` is media-chrome's documented object-fit
+      // var — the `fit="cover"` crop for grid cells / mockups.
       style={{
         width: '100%',
         height: '100%',
         ...(chromeless ? ({ '--controls': 'none' } as React.CSSProperties) : {}),
+        ...(fit === 'cover' ? ({ '--media-object-fit': 'cover' } as React.CSSProperties) : {}),
       }}
     >
       {captionsUrl ? (

package/src/components/ui/rich-markdown-renderer.tsx

@@ -1100,6 +1100,26 @@ const RichMarkdownInner: React.FC<InnerProps> = ({
       return <MarkdownImage src={src.trim()} alt={alt} />;
     },
 
+    // Raw <video> tags in stored content (e.g. the hub's blog publisher
+    // injects `<video src class="w-full my-8 rounded-lg" controls>` via
+    // injectVideoInBlogContent) pass through rehypeRaw — route them to the
+    // <Video> SSOT (MuxPlayer) instead of a native element so Mux HLS
+    // manifests play on every browser and playback UX is unified. The
+    // incoming className is forwarded so existing embeds keep their
+    // width/margin/rounding.
+    video: ({ src, poster, className }: any) => {
+      if (!src || typeof src !== 'string' || src.trim() === '') {
+        return null;
+      }
+      return (
+        <div className={`overflow-hidden ${className || 'w-full my-8 rounded-lg'}`}>
+          <div className="w-full aspect-video">
+            <Video kind="file" url={src.trim()} poster={typeof poster === 'string' ? poster : undefined} />
+          </div>
+        </div>
+      );
+    },
+
     // Style lists
     ul: ({ children }: any) => (
       <ul className={`list-disc list-outside my-4 ml-8 space-y-2 ${

package/src/components/ui/simple-markdown-renderer.tsx

@@ -200,7 +200,11 @@ function cardAwareUrlTransform(url: string, key: string): string {
  * 18 logs "tag is unrecognized in this browser" for every unknown tag;
  * React 19 throws on tags with reserved kebab-case forms. We pre-escape
  * to keep the renderer pristine without losing legitimate inline HTML
- * (details/summary, video, iframe, kbd, mark, etc.).
+ * (details/summary, iframe, kbd, mark, etc.). `video` is deliberately
+ * NOT allow-listed: chat strips <video> tags server-side, and all video
+ * playback goes through the <Video> SSOT — a stray tag renders as
+ * escaped literal text (visible + debuggable) rather than a native
+ * player outside the unified pipeline.
  *
  * The allow-list mirrors HTML5 + the elements the chat shell wires
  * component overrides for. Kept lower-case; matched case-insensitively.
@@ -215,8 +219,8 @@ const SAFE_HTML_TAGS = new Set([
   'ruby', 's', 'samp', 'section', 'small', 'span', 'strong', 'sub', 'summary',
   'sup', 'table', 'tbody', 'td', 'tfoot', 'th', 'thead', 'time', 'tr', 'u',
   'ul', 'var', 'wbr',
-  // Media
-  'img', 'picture', 'source', 'audio', 'video', 'iframe', 'track',
+  // Media ('video' intentionally excluded — see the header comment)
+  'img', 'picture', 'source', 'audio', 'iframe', 'track',
   // Forms (rehype-raw allows them; mostly harmless for chat output)
   'button', 'input', 'label', 'select', 'option', 'optgroup', 'textarea', 'form', 'fieldset', 'legend',
 ])
@@ -652,8 +656,8 @@ const SimpleMarkdownRendererImpl: React.FC<SimpleMarkdownRendererProps> = ({
   // logs a noisy "tag is unrecognized in this browser" warning AND can
   // crash the SimpleMarkdownRenderer when the tag has a kebab-case
   // form React rejects outright). Allow-listed tags pass through
-  // unchanged so legitimate inline HTML (details/summary, video,
-  // iframe, etc.) still renders.
+  // unchanged so legitimate inline HTML (details/summary, iframe,
+  // etc.) still renders ('video' is excluded — see SAFE_HTML_TAGS).
   const processedContent = useMemo(
     () => escapeUnknownHtmlTags(preprocessContent ? preprocessContent(content) : content),
     [preprocessContent, content],

package/src/hooks/use-near-viewport.ts

@@ -58,6 +58,14 @@ function getObserverFor(rootMargin: string): IntersectionObserver {
   return io;
 }
 
+/**
+ * Default near-viewport lookahead — the SSOT for "mount media on approach".
+ * Shared by this hook's default AND the raw two-way IntersectionObservers in
+ * `cards-strip.tsx` / `video-bites-strip.tsx` (which need mount+unmount, not
+ * this hook's fire-once semantics, but must agree on the distance).
+ */
+export const NEAR_VIEWPORT_ROOT_MARGIN = '500px';
+
 export interface UseNearViewportResult<T extends Element = HTMLElement> {
   /** Ref to attach to the element you want to gate on visibility. */
   ref: (node: T | null) => void;
@@ -72,7 +80,7 @@ export interface UseNearViewportResult<T extends Element = HTMLElement> {
  *                   '0px' = strict on-screen detection.
  */
 export function useNearViewport<T extends Element = HTMLElement>(
-  rootMargin: string = '500px'
+  rootMargin: string = NEAR_VIEWPORT_ROOT_MARGIN
 ): UseNearViewportResult<T> {
   const [isNear, setIsNear] = useState(false);
   const elRef = useRef<T | null>(null);