@flamingo-stack/openframe-frontend-core 0.0.182 → 0.0.183-snapshot.20260514223203

package/src/components/features/video.tsx

@@ -30,8 +30,9 @@
  *   layout="native"   → intrinsic aspect ratio. Bites grid, blog cards.
  */
 
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 import MuxPlayer from '@mux/mux-player-react';
+import { PlayIcon } from '../icons-v2-generated/media-playback/play-icon';
 
 // =============================================================================
 // URL classifiers (private — `<Video>` is the only consumer)
@@ -279,7 +280,14 @@ function FilePlayer({
       playsInline
       muted={muted}
       preferCmcd="header"
-      accentColor="var(--ods-accent)"
+      // MuxPlayer's built-in default is `#fa50b5` (Mux brand pink) — when
+      // its `--media-accent-color` resolves to nothing the player falls
+      // through to that hardcoded pink. The `var(--ods-accent,
+      // var(--color-accent-primary))` chain hits the platform-aware
+      // ODS token first, then the semantic accent alias if `--ods-accent`
+      // is ever undefined on a `data-app-type` we haven't themed yet.
+      // NEVER let Mux pink leak onto a non-Flamingo platform.
+      accentColor="var(--ods-accent, var(--color-accent-primary))"
       className={className}
       // Fill the wrapping aspect-ratio container instead of MuxPlayer's
       // intrinsic size. Without this, MuxPlayer renders at its default
@@ -338,6 +346,26 @@ interface YouTubeFacadeInnerProps {
   minimalControls?: boolean;
 }
 
+const YT_NOCOOKIE_ORIGIN = 'https://www.youtube-nocookie.com';
+
+// YouTube IFrame Player API state codes — documented integers.
+// https://developers.google.com/youtube/iframe_api_reference#Playback_status
+const YT_STATE_ENDED = 0;
+const YT_STATE_PLAYING = 1;
+
+// Sub-second delay before we blur the iframe after PLAYING. Zero would
+// cancel YouTube's mount-time "controls visible" intro flash entirely
+// (jarring); ~1s lets the user briefly see playback started, then we
+// kick YouTube's internal idle timer by removing DOM focus from the
+// iframe. Net result: controls fade ~1s after playback begins,
+// matching the user-locked target.
+const YT_PLAYING_BLUR_DELAY_MS = 1000;
+
+interface YouTubeInfoDeliveryMessage {
+  event?: string;
+  info?: { playerState?: number };
+}
+
 function YouTubeFacadeInner({
   videoId,
   title,
@@ -346,92 +374,124 @@ function YouTubeFacadeInner({
   minimalControls,
 }: YouTubeFacadeInnerProps): React.ReactElement {
   const [activated, setActivated] = useState(false);
-  // Wrapper ref used by the outside-click dismissal — clicks inside this
-  // box keep the iframe mounted; clicks anywhere else tear the iframe
-  // down so YouTube's persistent native controls go with it.
-  const wrapperRef = useRef<HTMLDivElement | null>(null);
-
-  const embedParams = new URLSearchParams({
-    autoplay: '1',
-    rel: '0',
-    modestbranding: '1',
-    playsinline: '1',
-  });
-  if (minimalControls) {
-    embedParams.set('controls', '0');
-    embedParams.set('showinfo', '0');
-    embedParams.set('fs', '0');
-    embedParams.set('iv_load_policy', '3');
-    embedParams.set('cc_load_policy', '0');
-    embedParams.set('disablekb', '1');
-  }
-  const embedUrl = `https://www.youtube-nocookie.com/embed/${videoId}?${embedParams.toString()}`;
-  const posterJpg = `https://i.ytimg.com/vi/${videoId}/mqdefault.jpg`;
-  const posterWebp = `https://i.ytimg.com/vi_webp/${videoId}/mqdefault.webp`;
-
-  // Outside-click dismissal — when the iframe is mounted, listen for any
-  // pointerdown on the document. Clicks INSIDE the wrapper bubble through
-  // the iframe DOM element but never reach our handler when they occur on
-  // YouTube's own UI (the iframe is a separate browsing context, so
-  // pointer events fired inside it don't propagate to our document).
-  // Clicks OUTSIDE the wrapper fire here normally — we tear down the
-  // iframe by flipping `activated` to false. The iframe unmounts, taking
-  // YouTube's persistent native controls with it. A second click on the
-  // play poster re-mounts the iframe with `autoplay=1` (a user gesture,
-  // so iOS Safari + Chrome autoplay restrictions are satisfied).
+  const iframeRef = useRef<HTMLIFrameElement | null>(null);
+
+  // Embed URL + poster URLs only change when `videoId` or `minimalControls`
+  // do — memoize so we don't rebuild URLSearchParams on every render.
+  //
+  // `enablejsapi=1` opens the postMessage state channel we subscribe to
+  // below — without it, YouTube ignores `event:listening` messages and
+  // we can't detect PLAYING / ENDED to drive the auto-hide accelerator.
+  const { embedUrl, posterJpg, posterWebp } = useMemo(() => {
+    const params = new URLSearchParams({
+      autoplay: '1',
+      rel: '0',
+      modestbranding: '1',
+      playsinline: '1',
+      enablejsapi: '1',
+    });
+    if (minimalControls) {
+      params.set('controls', '0');
+      params.set('fs', '0');
+      params.set('iv_load_policy', '3');
+      params.set('cc_load_policy', '0');
+      params.set('disablekb', '1');
+    }
+    return {
+      embedUrl: `${YT_NOCOOKIE_ORIGIN}/embed/${videoId}?${params.toString()}`,
+      posterJpg: `https://i.ytimg.com/vi/${videoId}/mqdefault.jpg`,
+      posterWebp: `https://i.ytimg.com/vi_webp/${videoId}/mqdefault.webp`,
+    };
+  }, [videoId, minimalControls]);
+
+  // ---------------------------------------------------------------------------
+  // YouTube control-fade accelerator (user-locked target: ~1s).
+  //
+  // YouTube's native idle timer for the bottom control bar is 5–10s when
+  // the iframe holds DOM focus. The IFrame Player API has no public
+  // `hideControls` command (full `func` list verified — none expose
+  // visibility). The one legal lever from outside the iframe is
+  // `iframe.blur()`, which kicks YouTube into its post-focus idle path
+  // (~2s minimum).
+  //
+  // Subscribe to YouTube's state channel via the documented lite-mode
+  // postMessage handshake — no full `iframe_api.js` library needed:
+  // <https://developers.google.com/youtube/iframe_api_reference>.
   //
-  // We hook `pointerdown` (not `click`) so the dismissal feels instant —
-  // by the time `click` fires the user has already seen the controls
-  // overlay another beat.
+  //   - PLAYING (1) arrives once autoplay kicks in. Wait ~1s (so the user
+  //     briefly sees that the player started), then blur the iframe so
+  //     YouTube's idle timer fires immediately.
+  //
+  //   - ENDED (0) → tear down the iframe. Playback is already over so
+  //     there's nothing to interrupt, and removing the iframe kills the
+  //     residual "More videos" suggestion grid YouTube leaves on screen.
+  //
+  // PAUSED (2) is deliberately unhandled — the user paused on purpose,
+  // leave YouTube's UI alone so they can resume.
+  //
+  // Playback is NEVER stopped by anything in this facade. Outside-click,
+  // Escape, tab-switch — all no-ops. The only state flip is on natural
+  // end-of-video (ENDED).
+  // ---------------------------------------------------------------------------
   useEffect(() => {
     if (!activated) return;
+    const iframe = iframeRef.current;
+    if (!iframe) return;
 
-    function handleOutsideClick(event: PointerEvent) {
-      const target = event.target as Node | null;
-      if (!target) return;
-      if (wrapperRef.current?.contains(target)) return;
-      setActivated(false);
+    function subscribe() {
+      iframe?.contentWindow?.postMessage(
+        '{"event":"listening"}',
+        YT_NOCOOKIE_ORIGIN,
+      );
     }
 
-    document.addEventListener('pointerdown', handleOutsideClick);
-    return () => document.removeEventListener('pointerdown', handleOutsideClick);
-  }, [activated]);
-
-  // Escape-key dismissal — keyboard users should have parity with the
-  // pointer outside-click. Same tear-down semantics.
-  useEffect(() => {
-    if (!activated) return;
-
-    function handleEscape(event: KeyboardEvent) {
-      if (event.key === 'Escape') setActivated(false);
+    iframe.addEventListener('load', subscribe);
+    subscribe();
+
+    let blurTimer: ReturnType<typeof setTimeout> | null = null;
+
+    function handleMessage(event: MessageEvent) {
+      if (event.origin !== YT_NOCOOKIE_ORIGIN) return;
+      if (typeof event.data !== 'string') return;
+      let payload: YouTubeInfoDeliveryMessage | null = null;
+      try {
+        payload = JSON.parse(event.data);
+      } catch {
+        return;
+      }
+      if (!payload || payload.event !== 'infoDelivery') return;
+      const state = payload.info?.playerState;
+      if (typeof state !== 'number') return;
+
+      if (state === YT_STATE_PLAYING) {
+        if (blurTimer !== null) return;
+        blurTimer = setTimeout(() => {
+          blurTimer = null;
+          iframeRef.current?.blur();
+        }, YT_PLAYING_BLUR_DELAY_MS);
+        return;
+      }
+      if (state === YT_STATE_ENDED) {
+        setActivated(false);
+      }
     }
 
-    document.addEventListener('keydown', handleEscape);
-    return () => document.removeEventListener('keydown', handleEscape);
+    window.addEventListener('message', handleMessage);
+    return () => {
+      iframe.removeEventListener('load', subscribe);
+      window.removeEventListener('message', handleMessage);
+      if (blurTimer !== null) clearTimeout(blurTimer);
+    };
   }, [activated]);
 
-  // Early-return rendering. The previous imperative implementation
-  // (`document.createElement('iframe')` + state flip) had a subtle bug
-  // where the play-button overlay could linger past activation because
-  // React's commit phase and the imperative DOM mutation raced. Two
-  // mutually-exclusive return paths eliminate that race entirely — when
-  // `activated` flips, React unmounts the button branch and mounts the
-  // iframe branch in a single commit.
-  //
-  // Autoplay on iOS Safari: the user gesture (the button's onClick) and
-  // the iframe mount happen in the SAME React commit, which flushes
-  // synchronously inside event handlers. iOS treats the iframe insertion
-  // as still being inside the user-activation tick, so `autoplay=1` plays.
-  // (Verified empirically; lite-youtube-embed uses imperative DOM for
-  // legacy-React compatibility — modern React's sync-commit-on-event
-  // makes the JSX path equivalent.)
   const wrapperClass = `relative w-full ${className ?? ''}`;
   const wrapperStyle = { paddingBottom: '56.25%' as const };
 
   if (activated) {
     return (
-      <div ref={wrapperRef} className={wrapperClass} style={wrapperStyle}>
+      <div className={wrapperClass} style={wrapperStyle}>
         <iframe
+          ref={iframeRef}
           src={embedUrl}
           allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
           allowFullScreen
@@ -443,7 +503,7 @@ function YouTubeFacadeInner({
   }
 
   return (
-    <div ref={wrapperRef} className={wrapperClass} style={wrapperStyle}>
+    <div className={wrapperClass} style={wrapperStyle}>
       <button
         type="button"
         aria-label={`Play: ${title}`}
@@ -463,9 +523,7 @@ 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">
-            <svg width={24} height={24} fill="currentColor" viewBox="0 0 24 24" className="ml-1">
-              <polygon points="5,3 19,12 5,21" />
-            </svg>
+            <PlayIcon size={24} color="currentColor" className="ml-1" />
           </span>
         </div>
       </button>

package/src/components/media-carousel.tsx

@@ -4,6 +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';
 
 // Navigation icons
 const ChevronLeftIcon = () => (
@@ -215,9 +216,7 @@ export const MediaCarousel = memo(function MediaCarousel({
         {(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">
-              <svg width="12" height="12" fill="white" viewBox="0 0 24 24">
-                <path d="M8 5v14l11-7z"/>
-              </svg>
+              <PlayIcon size={12} color="white" />
             </div>
           </div>
         )}

package/src/styles/ods-colors.css

@@ -173,6 +173,16 @@
 
   /* Adaptive Current Color (Platform-Specific) */
   --ods-current: var(--color-text-primary); /* Default to primary text */
+
+  /* Adaptive Accent Color (Platform-Specific).
+   * Defaults to yellow — matches OpenMSP / OpenFrame brand. Every
+   * `[data-app-type="X"]` block below overrides this for its platform.
+   * Critical: MuxPlayer reads this via `accentColor="var(--ods-accent)"`
+   * and falls back to its built-in `#fa50b5` (pink) if the variable is
+   * undefined. Keeping a `:root` default guarantees the video player
+   * never paints with Mux's brand color on a platform we haven't
+   * explicitly themed yet. */
+  --ods-accent: var(--ods-open-yellow-base);
 }
 
 
@@ -196,6 +206,53 @@
   --ods-accent: var(--ods-open-yellow-base);
 }
 
+[data-app-type="openmsp"] {
+  /* OpenMSP brand: yellow primary (#FFC008). Matches `openmsp.config.tsx`
+   * brandColors.primary. Before this block existed, OpenMSP had no
+   * `--ods-accent` defined, so the MuxPlayer video controls inherited
+   * its built-in pink (`#fa50b5`) — wrong brand color on every video
+   * surface in the OpenMSP platform. */
+  --color-accent-primary: var(--ods-open-yellow-base);
+  --color-accent-hover: var(--ods-open-yellow-hover);
+  --color-accent-active: var(--ods-open-yellow-action);
+  --color-accent-focus: var(--ods-open-yellow-base);
+  --color-focus-ring: var(--ods-open-yellow-base);
+  --color-focus-visible: var(--ods-open-yellow-base);
+  --color-link: var(--ods-open-yellow-base);
+  --color-link-hover: var(--ods-open-yellow-hover);
+  --color-bg: var(--ods-system-greys-background);
+  --color-bg-card: var(--ods-system-greys-black);
+  --color-bg-hover: var(--ods-system-greys-black-hover);
+  --color-bg-active: var(--ods-system-greys-black-action);
+
+  /* OpenMSP uses yellow as adaptive color */
+  --ods-current: var(--ods-open-yellow-base);
+  --ods-accent: var(--ods-open-yellow-base);
+}
+
+[data-app-type="flamingo-teaser"] {
+  /* Flamingo Teaser uses the same Flamingo pink brand as the full
+   * Flamingo app — matches `flamingo-teaser.config.tsx`. Without this
+   * block the video player would fall back to MuxPlayer's pink default,
+   * which is coincidentally close but not the brand pink. */
+  --color-accent-primary: var(--ods-flamingo-pink-base);
+  --color-accent-hover: var(--ods-flamingo-pink-hover);
+  --color-accent-active: var(--ods-flamingo-pink-action);
+  --color-accent-focus: var(--ods-flamingo-pink-base);
+  --color-focus-ring: var(--ods-flamingo-pink-base);
+  --color-focus-visible: var(--ods-flamingo-pink-base);
+  --color-link: var(--ods-flamingo-pink-base);
+  --color-link-hover: var(--ods-flamingo-pink-hover);
+  --color-bg: var(--ods-system-greys-background);
+  --color-bg-card: var(--ods-system-greys-black);
+  --color-bg-hover: var(--ods-system-greys-black-hover);
+  --color-bg-active: var(--ods-system-greys-black-action);
+
+  /* Flamingo Teaser uses pink as adaptive color */
+  --ods-current: var(--ods-flamingo-pink-base);
+  --ods-accent: var(--ods-flamingo-pink-base);
+}
+
 [data-app-type="flamingo"] {
   --color-accent-primary: var(--ods-flamingo-pink-base);
   --color-accent-hover: var(--ods-flamingo-pink-hover);

package/src/types/case-study.ts

@@ -25,7 +25,7 @@ export interface CaseStudy {
 
   // Testimonial video (text testimonials come from MSP profile)
   testimonial_video_url: string | null // YouTube URL (preferred when both exist)
-  uploaded_video_url: string | null // Uploaded video file URL (fallback when no YouTube)
+  main_video_url: string | null // Uploaded video file URL (fallback when no YouTube)
   main_video_thumbnail?: string | null // Manual poster image URL for testimonial video. Standardized name matches main_video_thumbnail on customer_interviews/webinars/podcasts/investor_updates/product_releases per lib/data/entity-video-utils.ts ENTITY_FIELD_CONFIG. Optional for backward-compat with existing literal CaseStudy constructions across hub + external lib consumers.
 
   // Video enhancement fields
@@ -80,7 +80,7 @@ export interface CreateCaseStudyData {
   solution?: string
   results?: string
   testimonial_video_url?: string // YouTube URL
-  uploaded_video_url?: string // Uploaded video file URL
+  main_video_url?: string // Uploaded video file URL
   main_video_thumbnail?: string | null // Manual poster image URL for testimonial video (standardized name across all video-bearing entities). Nullable so admin form can explicitly clear a stale poster from the DB when the testimonial video is removed or the source is switched to YouTube.
   // Video enhancement fields
   video_source_type?: 'youtube' | 'uploaded' // Deprecated

package/src/types/supabase.ts

@@ -292,7 +292,7 @@ export type Database = {
           description: string | null
           cover_url: string | null
           audio_url: string | null
-          video_url: string | null
+          main_video_url: string | null
           media_type: string | null
           duration_seconds: number | null
           status: string | null
@@ -313,7 +313,7 @@ export type Database = {
           description?: string | null
           cover_url?: string | null
           audio_url?: string | null
-          video_url?: string | null
+          main_video_url?: string | null
           media_type?: string | null
           duration_seconds?: number | null
           status?: string | null
@@ -334,7 +334,7 @@ export type Database = {
           description?: string | null
           cover_url?: string | null
           audio_url?: string | null
-          video_url?: string | null
+          main_video_url?: string | null
           media_type?: string | null
           duration_seconds?: number | null
           status?: string | null
@@ -368,7 +368,7 @@ export type Database = {
           end_at: string | null
           timezone: string | null
           registration_url: string | null
-          recording_url: string | null
+          main_video_url: string | null
           hosts: Json | null
           platform_id: string
           is_deleted: boolean | null
@@ -386,7 +386,7 @@ export type Database = {
           end_at?: string | null
           timezone?: string | null
           registration_url?: string | null
-          recording_url?: string | null
+          main_video_url?: string | null
           hosts?: Json | null
           platform_id: string
           is_deleted?: boolean | null
@@ -404,7 +404,7 @@ export type Database = {
           end_at?: string | null
           timezone?: string | null
           registration_url?: string | null
-          recording_url?: string | null
+          main_video_url?: string | null
           hosts?: Json | null
           platform_id?: string
           is_deleted?: boolean | null