@flamingo-stack/openframe-frontend-core 0.0.446-snapshot.20260717214810 → 0.0.446

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

@@ -1,17 +1,12 @@
 /**
- * Mux CDN origins + playback-URL helpers — single source of truth, server-safe.
+ * Mux CDN origin constants — 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 without
+ * `lib/config/mux-config.ts`) can import these strings 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
@@ -30,36 +25,3 @@ 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,9 +2,8 @@
 
 import { useState, useRef } from 'react';
 import { Button, Input, Label, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Textarea } from '../ui';
-import { Trash2, Plus, Image as ImageIcon, Video as VideoIcon, Upload, Loader2, GripVertical } from 'lucide-react';
+import { Trash2, Plus, Image as ImageIcon, Video, 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';
@@ -114,7 +113,7 @@ export function ReleaseMediaManager({
     switch (type) {
       case 'video':
       case 'demo':
-        return <VideoIcon className="w-5 h-5 text-ods-text-secondary" />;
+        return <Video className="w-5 h-5 text-ods-text-secondary" />;
       default:
         return <ImageIcon className="w-5 h-5 text-ods-text-secondary" />;
     }
@@ -206,9 +205,12 @@ export function ReleaseMediaManager({
                 {item.media_url && (
                   <div className="aspect-video relative bg-ods-bg">
                     {item.media_type === 'video' || item.media_type === 'demo' ? (
-                      // <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" />
+                      <video
+                        src={item.media_url}
+                        className="w-full h-full object-cover"
+                        controls
+                        preload="metadata"
+                      />
                     ) : (
                       <Image
                         src={item.media_url}

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

@@ -48,18 +48,6 @@ 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
@@ -80,12 +68,6 @@ export function saveDataEnabled(): boolean {
  * 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,
@@ -157,7 +139,9 @@ export function useVideoWarmup<T extends Element = HTMLDivElement>({
     if (!isNear || !videoUrl || !resolvedOrigin) return
 
     // Save-Data gate — metered connections skip preload.
-    if (saveDataEnabled()) return
+    type Connection = { saveData?: boolean }
+    const conn = (navigator as Navigator & { connection?: Connection }).connection
+    if (conn?.saveData === true) 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,8 +29,6 @@ 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 {
@@ -229,16 +227,7 @@ 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).
@@ -261,7 +250,7 @@ export function VideoBiteCard({
     if (!el || typeof IntersectionObserver === 'undefined') return;
     const io = new IntersectionObserver(
       entries => setIsNear(entries[0]?.isIntersecting ?? false),
-      { rootMargin: NEAR_VIEWPORT_ROOT_MARGIN },
+      { rootMargin: '500px' },
     );
     io.observe(el);
     return () => io.disconnect();
@@ -403,7 +392,7 @@ export function VideoBiteCard({
               className="object-cover"
             />
           ) : (
-            <Video kind="file" url={previewUrl} firstFrameOnly layout="fill" />
+            <Video kind="file" url={bite.url} firstFrameOnly layout="fill" />
           )}
 
           {/* Play affordance for every non-playing state (resting poster,
@@ -426,19 +415,10 @@ 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.
-
-                  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. */}
+                  every non-playing state. */}
               <Video
                 kind="file"
-                url={previewUrl}
+                url={bite.url}
                 poster={bite.thumbnail_url}
                 playWhenHovered={isActive}
                 chromeless

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

@@ -1,14 +1,13 @@
 "use client";
 
-import React, { useState, useCallback } from 'react';
-import { Upload, X, Video as VideoIcon } from 'lucide-react';
+import React, { useState, useCallback, useEffect } from 'react';
+import { Upload, Sparkles, X, Video, Loader2 } 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';
 
@@ -49,6 +48,16 @@ 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;
@@ -86,6 +95,7 @@ export function VideoSourceSelector({
   uploadEmptyText = 'No video uploaded yet. Click "Upload Video" to add one.',
   disabled = false,
   VideoPreviewComponent,
+  resolveVideoUrl,
   UploadProgressComponent,
   title = 'Video',
   showTitle = true,
@@ -139,7 +149,7 @@ export function VideoSourceSelector({
       {/* Section Title */}
       {showTitle && (
         <h3 className="text-h5 text-ods-text-primary flex items-center gap-2">
-          <VideoIcon className="h-5 w-5" />
+          <Video className="h-5 w-5" />
           {title}
         </h3>
       )}
@@ -246,8 +256,10 @@ export function VideoSourceSelector({
                 isAIGenerated={isAIGenerated}
               />
             ) : (
+              // Default simple preview (resolver-aware — see DefaultVideoPreview)
               <DefaultVideoPreview
                 videoUrl={mainVideoUrl}
+                resolveVideoUrl={resolveVideoUrl}
                 onDelete={handleDeleteVideo}
                 disabled={disabled}
               />
@@ -264,27 +276,55 @@ export function VideoSourceSelector({
 }
 
 interface DefaultVideoPreviewProps {
-  /** Uploaded video URL — MP4 or Mux HLS manifest, both playable via <Video>. */
+  /** Uploaded video URL (possibly an HLS manifest a native `<video>` can't play). */
   videoUrl: string;
+  /** Optional resolver → playable MP4 URL; omit for as-is (backward-compatible) behaviour. */
+  resolveVideoUrl?: (url: string) => Promise<string>;
   onDelete: () => void;
   disabled?: boolean;
 }
 
 /**
- * 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.
+ * 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.
  */
-function DefaultVideoPreview({ videoUrl, onDelete, disabled }: DefaultVideoPreviewProps) {
+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]);
+
   return (
     <div className="relative rounded-lg border border-ods-border overflow-hidden">
-      {/* 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>
+      {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
+        />
+      )}
       <button
         type="button"
         onClick={onDelete}

package/src/components/features/video.tsx

@@ -34,21 +34,6 @@ 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)
@@ -268,19 +253,8 @@ 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. `poster`/`fit`/`className` are honored; all other
-   *  player props are ignored. */
+   *  poster asset exists. All 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 {
@@ -301,8 +275,6 @@ interface VideoAutoProps extends VideoCommonProps {
   playOnHover?: boolean;
   playWhenHovered?: boolean;
   firstFrameOnly?: boolean;
-  preload?: 'none' | 'metadata' | 'auto';
-  fit?: 'contain' | 'cover';
 }
 
 export type VideoProps = VideoFileProps | VideoYouTubeProps | VideoAutoProps;
@@ -328,12 +300,7 @@ export function Video(props: VideoProps): React.ReactElement | null {
         minimalControls={props.minimalControls}
       />
     ) : 'firstFrameOnly' in props && props.firstFrameOnly ? (
-      <FirstFramePreview
-        url={url}
-        poster={props.poster}
-        fit={'fit' in props ? props.fit : undefined}
-        className={props.className}
-      />
+      <FirstFramePreview url={url} className={props.className} />
     ) : (
       <FilePlayer
         url={url}
@@ -346,8 +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}
-        preload={'preload' in props ? props.preload : undefined}
-        fit={'fit' in props ? props.fit : undefined}
         className={props.className}
       />
     );
@@ -422,30 +387,16 @@ 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,
-  poster,
-  fit,
-  className,
-}: {
-  url: string;
-  poster?: string | null;
-  fit?: 'contain' | 'cover';
-  className?: string;
-}): React.ReactElement {
+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}
     >
-      {/* 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`}
-        poster={poster}
-        fit={fit}
+        preload="metadata"
         muted
         chromeless
         className={className}
@@ -469,11 +420,8 @@ interface FilePlayerProps {
   chromeless?: boolean;
   playOnHover?: boolean;
   playWhenHovered?: boolean;
-  /** Media preload hint — see the public `VideoFileProps.preload` JSDoc.
-   *  When omitted, defaults to 'metadata' ('none' under Save-Data). */
+  /** Media preload hint — the firstFrameOnly facade passes 'metadata'. */
   preload?: 'none' | 'metadata' | 'auto';
-  /** Object-fit — 'cover' maps to media-chrome's `--media-object-fit`. */
-  fit?: 'contain' | 'cover';
   className?: string;
 }
 
@@ -489,21 +437,8 @@ 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)
@@ -519,22 +454,7 @@ 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
@@ -561,17 +481,6 @@ 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) {
@@ -614,14 +523,13 @@ 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, clearPerfListener]);
+  }, [clearActivationWaiter]);
 
   // Explicit unmute affordance: the click IS the user activation the autoplay
   // policy wants, so unmuting here always succeeds (and the window-level
@@ -671,7 +579,7 @@ function FilePlayer({
       src={url}
       poster={poster || undefined}
       streamType="on-demand"
-      preload={effectivePreload}
+      preload={preload}
       playsInline
       muted={muted}
       preferCmcd="header"
@@ -698,13 +606,10 @@ 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,26 +1100,6 @@ 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,11 +200,7 @@ 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, 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.
+ * (details/summary, video, iframe, kbd, mark, etc.).
  *
  * The allow-list mirrors HTML5 + the elements the chat shell wires
  * component overrides for. Kept lower-case; matched case-insensitively.
@@ -219,8 +215,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 ('video' intentionally excluded — see the header comment)
-  'img', 'picture', 'source', 'audio', 'iframe', 'track',
+  // Media
+  'img', 'picture', 'source', 'audio', 'video', 'iframe', 'track',
   // Forms (rehype-raw allows them; mostly harmless for chat output)
   'button', 'input', 'label', 'select', 'option', 'optgroup', 'textarea', 'form', 'fieldset', 'legend',
 ])
@@ -656,8 +652,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, iframe,
-  // etc.) still renders ('video' is excluded — see SAFE_HTML_TAGS).
+  // unchanged so legitimate inline HTML (details/summary, video,
+  // iframe, etc.) still renders.
   const processedContent = useMemo(
     () => escapeUnknownHtmlTags(preprocessContent ? preprocessContent(content) : content),
     [preprocessContent, content],

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

@@ -58,14 +58,6 @@ 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;
@@ -80,7 +72,7 @@ export interface UseNearViewportResult<T extends Element = HTMLElement> {
  *                   '0px' = strict on-screen detection.
  */
 export function useNearViewport<T extends Element = HTMLElement>(
-  rootMargin: string = NEAR_VIEWPORT_ROOT_MARGIN
+  rootMargin: string = '500px'
 ): UseNearViewportResult<T> {
   const [isNear, setIsNear] = useState(false);
   const elRef = useRef<T | null>(null);