@flamingo-stack/openframe-frontend-core 0.0.177 → 0.0.178-snapshot.20260514174355

package/src/components/media-carousel.tsx

@@ -3,7 +3,7 @@
 import { useState, useRef, useEffect, memo, useCallback } from 'react';
 import { cn } from "../utils/cn";
 import { MediaItem } from '../utils/media-carousel-utils-stub';
-import { LiteYouTubeEmbed } from '../utils/lite-youtube-embed-stub';
+import { Video, extractYouTubeId } from './features/video';
 
 // Navigation icons
 const ChevronLeftIcon = () => (
@@ -18,17 +18,6 @@ const ChevronRightIcon = () => (
   </svg>
 );
 
-const PlayIcon = () => (
-  <svg width="24" height="24" fill="white" viewBox="0 0 24 24">
-    <path d="M8 5v14l11-7z"/>
-  </svg>
-);
-
-function getYouTubeVideoId(url: string): string | null {
-  const match = url.match(/(?:youtube\.com\/watch\?v=|youtu\.be\/)([^&\n?#]+)/);
-  return match ? match[1] : null;
-}
-
 interface MediaCarouselProps {
   media: MediaItem[];
   className?: string;
@@ -40,71 +29,6 @@ interface MediaCarouselProps {
   objectFit?: 'contain' | 'cover';
 }
 
-// Carousel-specific YouTube embed component
-const CarouselYouTubeEmbed = ({ videoId, title }: { videoId: string; title: string }) => {
-  const [mounted, setMounted] = useState(false);
-  const [isActivated, setIsActivated] = useState(false);
-  const [isLoaded, setIsLoaded] = useState(false);
-
-  useEffect(() => {
-    setMounted(true);
-  }, []);
-
-  if (!mounted) {
-    return (
-      <div className="absolute inset-0 bg-black rounded-lg overflow-hidden">
-        <div className="absolute inset-0 flex items-center justify-center">
-          <div className="text-white text-sm">Loading video...</div>
-        </div>
-      </div>
-    );
-  }
-
-  const thumbnailUrl = `https://i.ytimg.com/vi/${videoId}/maxresdefault.jpg`;
-  const embedUrl = `https://www.youtube-nocookie.com/embed/${videoId}?autoplay=1&playsinline=1&rel=0&modestbranding=1`;
-
-  const handleActivate = () => {
-    setIsActivated(true);
-    setTimeout(() => setIsLoaded(true), 100);
-  };
-
-  return (
-    <div className="absolute inset-0 bg-black">
-      {!isActivated ? (
-        <button
-          onClick={handleActivate}
-          className="absolute inset-0 cursor-pointer group"
-          aria-label={`Play video: ${title}`}
-        >
-          <img
-            src={thumbnailUrl}
-            alt={title}
-            className="w-full h-full object-cover transition-opacity group-hover:opacity-90"
-            loading="lazy"
-          />
-          <div className="absolute inset-0 flex items-center justify-center bg-black/20 group-hover:bg-black/30 transition-colors">
-            <div className="bg-red-600 rounded-full p-4 group-hover:scale-110 transition-transform">
-              <PlayIcon />
-            </div>
-          </div>
-        </button>
-      ) : (
-        <div className="absolute inset-0">
-          {isLoaded && (
-            <iframe
-              src={embedUrl}
-              title={title}
-              className="w-full h-full"
-              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-              allowFullScreen
-            />
-          )}
-        </div>
-      )}
-    </div>
-  );
-};
-
 export const MediaCarousel = memo(function MediaCarousel({ 
   media, 
   className,
@@ -116,10 +40,21 @@ export const MediaCarousel = memo(function MediaCarousel({
   const [currentIndex, setCurrentIndex] = useState(0);
   const [touchStart, setTouchStart] = useState<number | null>(null);
   const [touchEnd, setTouchEnd] = useState<number | null>(null);
-  const [playingVideos, setPlayingVideos] = useState<Set<number>>(new Set());
   const carouselRef = useRef<HTMLDivElement>(null);
   const thumbnailsRef = useRef<HTMLDivElement>(null);
 
+  // Clamp `currentIndex` whenever `media` shrinks (e.g. an admin removes
+  // a slide while the user is on the last one) so the thumbnail active
+  // state + `currentItem` lookup stay in sync. Without this, the
+  // `media[currentIndex] || media[0]` fallback renders the first slide
+  // but every thumbnail's `isActive = index === currentIndex` reads
+  // false — visually nothing is selected.
+  useEffect(() => {
+    if (currentIndex >= media.length && media.length > 0) {
+      setCurrentIndex(media.length - 1);
+    }
+  }, [media.length, currentIndex]);
+
   // Early return if no media provided
   if (!media || media.length === 0) {
     return null;
@@ -132,84 +67,19 @@ export const MediaCarousel = memo(function MediaCarousel({
     return null;
   }
 
-  // Handle video play/pause
-  const handleVideoClick = useCallback((index: number) => {
-    const item = media[index];
-    if (item.type !== 'video') return;
-    
-    // Find the video element
-    const videoElements = document.querySelectorAll(`video[data-video-index="${index}"]`);
-    const video = videoElements[0] as HTMLVideoElement;
-    
-    if (!video) {
-      console.log('❌ Video element not found for index:', index);
-      return;
-    }
-    
-    if (video.paused) {
-      const playPromise = video.play();
-      
-      if (playPromise !== undefined) {
-        playPromise
-          .then(() => {
-            const playButton = video.parentElement?.querySelector('.video-play-button');
-            if (playButton) {
-              (playButton as HTMLElement).style.display = 'none';
-            }
-          })
-          .catch((error) => {
-            if (error.name === 'NotSupportedError' || error.name === 'MediaElementError') {
-              const fallbackDiv = document.createElement('div');
-              fallbackDiv.className = 'absolute inset-0 flex items-center justify-center bg-ods-card text-center p-4';
-              fallbackDiv.innerHTML = `
-                <div>
-                  <p class="text-ods-text-primary text-sm mb-2">Video format not supported</p>
-                  <a href="${item.src}" target="_blank" rel="noopener noreferrer" 
-                     class="text-ods-accent hover:text-[#FFD700] text-sm">
-                    Open Video Directly
-                  </a>
-                </div>
-              `;
-              video.parentElement?.appendChild(fallbackDiv);
-            }
-          });
-      }
-    } else {
-      video.pause();
-      const playButton = video.parentElement?.querySelector('.video-play-button');
-      if (playButton) {
-        (playButton as HTMLElement).style.display = 'flex';
-      }
-    }
-  }, [media]);
-
-  // Navigation functions
+  // Navigation functions — `<Video>` (MuxPlayer/YT facade) owns its own
+  // play/pause lifecycle, so the previous bare-`<video>`-element pause
+  // logic in nextSlide/prevSlide/selectSlide is no longer needed.
   const nextSlide = useCallback(() => {
-    const currentVideo = document.querySelector(`[data-video-index="${currentIndex}"]`) as HTMLVideoElement;
-    if (currentVideo && !currentVideo.paused) {
-      currentVideo.pause();
-    }
-    setPlayingVideos(new Set());
     setCurrentIndex((prev) => (prev + 1) % media.length);
-  }, [currentIndex, media.length]);
+  }, [media.length]);
 
   const prevSlide = useCallback(() => {
-    const currentVideo = document.querySelector(`[data-video-index="${currentIndex}"]`) as HTMLVideoElement;
-    if (currentVideo && !currentVideo.paused) {
-      currentVideo.pause();
-    }
-    setPlayingVideos(new Set());
     setCurrentIndex((prev) => (prev - 1 + media.length) % media.length);
-  }, [currentIndex, media.length]);
+  }, [media.length]);
 
   const selectSlide = useCallback((index: number) => {
     if (index === currentIndex) return;
-    
-    const currentVideo = document.querySelector(`[data-video-index="${currentIndex}"]`) as HTMLVideoElement;
-    if (currentVideo && !currentVideo.paused) {
-      currentVideo.pause();
-    }
-    setPlayingVideos(new Set());
     setCurrentIndex(index);
   }, [currentIndex]);
 
@@ -253,92 +123,29 @@ export const MediaCarousel = memo(function MediaCarousel({
     }
   };
 
-  // Render YouTube embed
-  const renderYouTubeEmbed = (item: MediaItem, index: number) => {
-    const videoId = getYouTubeVideoId(item.src);
-    if (!videoId) {
-      return (
-        <div className="absolute inset-0 flex items-center justify-center bg-ods-card text-center p-4">
-          <div>
-            <p className="text-ods-text-primary text-sm mb-2">Invalid YouTube URL</p>
-            <a href={item.src} target="_blank" rel="noopener noreferrer" className="text-ods-accent text-sm">
-              Open Link Directly
-            </a>
-          </div>
-        </div>
-      );
-    }
-
-    return <CarouselYouTubeEmbed videoId={videoId} title={item.alt || `Video ${index + 1}`} />;
-  };
+  // Render YouTube embed via the SSoT `<Video>` — same lite-youtube
+  // facade everywhere, no carousel-local fork.
+  const renderYouTubeEmbed = (item: MediaItem, index: number) => (
+    <Video
+      kind="youtube"
+      url={item.src}
+      title={item.alt || `Video ${index + 1}`}
+      layout="fill"
+      priority={index === currentIndex}
+    />
+  );
 
-  // Render video
+  // Render video via the SSoT `<Video>` — MuxPlayer handles both HLS
+  // and plain MP4, so the carousel no longer needs its own bare
+  // `<video>` element + custom play overlay + 60 LOC of error handling.
   const renderVideo = (item: MediaItem, index: number) => (
-    <div className="absolute inset-0 bg-black">
-      <video 
-        className={`w-full h-full object-${objectFit}`}
-        poster={item.poster}
-        preload="metadata"
-        playsInline
-        controls={false}
-        muted
-        data-video-index={index}
-        onClick={() => handleVideoClick(index)}
-        onPlay={() => {
-          const playButton = document.querySelector(`[data-video-index="${index}"]`)?.parentElement?.querySelector('.video-play-button');
-          if (playButton) {
-            (playButton as HTMLElement).style.display = 'none';
-          }
-        }}
-        onPause={() => {
-          const playButton = document.querySelector(`[data-video-index="${index}"]`)?.parentElement?.querySelector('.video-play-button');
-          if (playButton) {
-            (playButton as HTMLElement).style.display = 'flex';
-          }
-        }}
-        onLoadedMetadata={(e) => {
-          const video = e.target as HTMLVideoElement;
-          video.currentTime = 1;
-        }}
-        onError={(e) => {
-          const target = e.target as HTMLVideoElement;
-          
-          if (target.crossOrigin) {
-            target.crossOrigin = '';
-            target.load();
-          } else {
-            target.style.display = 'none';
-            const fallbackDiv = document.createElement('div');
-            fallbackDiv.className = 'absolute inset-0 flex items-center justify-center bg-ods-card text-center p-4';
-            fallbackDiv.innerHTML = `
-              <div>
-                <p class="text-ods-text-primary text-sm mb-2">Video could not be loaded</p>
-                <a href="${item.src}" target="_blank" rel="noopener noreferrer" 
-                   class="text-ods-accent hover:text-[#FFD700] text-sm">
-                  Open Video Directly
-                </a>
-              </div>
-            `;
-            target.parentElement?.appendChild(fallbackDiv);
-          }
-        }}
-      >
-        <source src={item.src} type="video/mp4" />
-        <source src={item.src} type="video/webm" />
-        <source src={item.src} type="video/ogg" />
-        Your browser does not support the video tag.
-      </video>
-      
-      {/* Play Button Overlay */}
-      <div 
-        className="video-play-button absolute inset-0 flex items-center justify-center bg-black bg-opacity-20 cursor-pointer transition-opacity hover:bg-opacity-30"
-        onClick={() => handleVideoClick(index)}
-      >
-        <div className="w-16 h-16 bg-black bg-opacity-60 rounded-full flex items-center justify-center">
-          <PlayIcon />
-        </div>
-      </div>
-    </div>
+    <Video
+      url={item.src}
+      poster={item.poster}
+      muted
+      layout="fill"
+      priority={index === currentIndex}
+    />
   );
 
   // Render image
@@ -350,7 +157,6 @@ export const MediaCarousel = memo(function MediaCarousel({
         className={`w-full h-full object-${objectFit}`}
         loading="lazy"
         onError={(e) => {
-          console.log('❌ Image failed to load:', item.src);
           const target = e.target as HTMLImageElement;
           target.style.display = 'none';
         }}
@@ -360,8 +166,6 @@ export const MediaCarousel = memo(function MediaCarousel({
 
   // Render main media item
   const renderMainMedia = (item: MediaItem, index: number) => {
-    console.log('🎬 Rendering media item:', { type: item.type, src: item.src.substring(0, 100) + '...' });
-    
     switch (item.type) {
       case 'youtube':
         return renderYouTubeEmbed(item, index);
@@ -379,7 +183,10 @@ export const MediaCarousel = memo(function MediaCarousel({
     
     let thumbnailSrc = item.src;
     if (item.type === 'youtube') {
-      const videoId = getYouTubeVideoId(item.src);
+      // Use the SSoT `extractYouTubeId` (strict URL parsing, ReDoS-safe)
+      // rather than a local regex so YouTube id extraction has a single
+      // implementation across the lib.
+      const videoId = extractYouTubeId(item.src);
       thumbnailSrc = videoId ? `https://img.youtube.com/vi/${videoId}/mqdefault.jpg` : item.src;
     } else if (item.type === 'video' && item.poster) {
       thumbnailSrc = item.poster;

package/src/components/shared/product-release/release-detail-page.tsx

@@ -11,8 +11,7 @@ import { ImageGalleryModal } from '../../ui/image-gallery-modal';
 import { GitHubIcon } from '../../icons/github-icon';
 import { AlertTriangle, ExternalLink, BookMarked } from 'lucide-react';
 import { formatReleaseDate } from '../../../utils/date-formatters';
-import { YouTubeEmbed, extractYouTubeId } from '../../features/youtube-embed';
-import { VideoPlayer } from '../../features/video-player';
+import { Video } from '../../features/video';
 import { DetailPageSkeleton } from '../detail-page-skeleton';
 import type { ChangelogEntry } from '../../../types/product-release';
 import type { VideoTeaser } from '../../../types/video-processing';
@@ -308,7 +307,7 @@ export function ReleaseDetailPage({
                 }}
               >
                 {mediaItem.media_type === 'video' || mediaItem.media_type === 'demo' ? (
-                  <VideoPlayer url={mediaItem.media_url} useNativeAspectRatio={false} />
+                  <Video url={mediaItem.media_url} layout="native" />
                 ) : (
                   <img src={mediaItem.media_url} alt={mediaItem.title || `Media ${index + 1}`} className="w-full h-full object-cover" />
                 )}
@@ -340,25 +339,33 @@ export function ReleaseDetailPage({
           />
         ) : (
           <>
-            {youtubeUrl && (() => {
-              const videoId = extractYouTubeId(youtubeUrl);
-              return videoId ? (
-                <YouTubeEmbed videoId={videoId} title={`${releaseTitle} - Video`} showTitle={false} showMeta={true} />
-              ) : null;
-            })()}
+            {/*
+              Fallback when no `VideoDisplaySection` is injected. `<Video>` is the
+              SSoT for every video surface — single source of truth across YouTube,
+              HLS, and MP4 paths.
+            */}
+            {youtubeUrl && (
+              <Video
+                kind="youtube"
+                url={youtubeUrl}
+                title={`${releaseTitle} - Video`}
+                layout="native"
+              />
+            )}
             {!youtubeUrl && mainVideoUrl && (
-              <div className="flex justify-center w-full">
-                <div className="w-full max-w-3xl">
-                  <VideoPlayer url={mainVideoUrl} srtContent={release?.srt_content as string | undefined} captionsUrl={release?.captionsUrl as string | undefined} />
-                </div>
-              </div>
+              <Video
+                url={mainVideoUrl}
+                srtContent={release?.srt_content as string | undefined}
+                captionsUrl={release?.captionsUrl as string | undefined}
+                layout="centered"
+              />
             )}
             {highlightVideoUrl && (
-              <div className="flex justify-center w-full">
-                <div className="w-full max-w-3xl">
-                  <VideoPlayer url={highlightVideoUrl} poster={highlightVideoThumbnail} />
-                </div>
-              </div>
+              <Video
+                url={highlightVideoUrl}
+                poster={highlightVideoThumbnail}
+                layout="centered"
+              />
             )}
           </>
         )}

package/src/hooks/index.ts

@@ -15,3 +15,6 @@ export * from './state'
 
 // NATS hooks
 export * from './nats/use-nats-client'
+
+// Viewport / lazy-mount primitive (shared IO singleton)
+export * from './use-near-viewport'

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

@@ -0,0 +1,118 @@
+/**
+ * useNearViewport — module-level shared IntersectionObserver in hook form.
+ *
+ * Single IO instance per `rootMargin` value, shared across every component
+ * that mounts the hook. Reduces overhead vs. one IO per component on
+ * grid/list pages where many subscribers observe the viewport with the same
+ * margin. Promoted from the inline singleton at
+ * `multi-platform-hub/components/shared/video-bites-display.tsx:21-43`,
+ * which is the only IO pattern in either repo today.
+ *
+ * Usage:
+ * ```tsx
+ * function MyCard() {
+ *   const { ref, isNear } = useNearViewport('500px');
+ *   return <div ref={ref}>{isNear ? <HeavyChild /> : <Placeholder />}</div>;
+ * }
+ * ```
+ *
+ * StrictMode safety: cleanup uses an identity check on the registered
+ * callback so React's dev double-mount (mount → cleanup → re-mount) does
+ * not drop the second mount's freshly-set subscription. The IO callback
+ * also checks `subscribers.get(target)` before invoking so a fire that
+ * races with unmount cannot crash on a torn-down component.
+ *
+ * The hook fires once — on first intersection it sets `isNear=true` and
+ * unobserves the element. Callers that need re-observation should
+ * unmount and remount (or fork the hook for two-way behavior).
+ */
+
+import { useEffect, useRef, useState, useCallback } from 'react';
+
+// Per-rootMargin IO map. Multiple call sites with different margins each
+// get their own singleton observer.
+const observers = new Map<string, IntersectionObserver>();
+const subscribers = new WeakMap<Element, () => void>();
+
+function getObserverFor(rootMargin: string): IntersectionObserver {
+  const existing = observers.get(rootMargin);
+  if (existing) return existing;
+
+  const io = new IntersectionObserver(
+    (entries) => {
+      entries.forEach((entry) => {
+        if (!entry.isIntersecting) return;
+        // Race-safe: re-read the callback at fire time. A late IO firing
+        // after cleanup must not invoke a stale callback.
+        const cb = subscribers.get(entry.target);
+        if (cb) {
+          cb();
+          io.unobserve(entry.target);
+          subscribers.delete(entry.target);
+        }
+      });
+    },
+    { rootMargin }
+  );
+  observers.set(rootMargin, io);
+  return io;
+}
+
+export interface UseNearViewportResult<T extends Element = HTMLElement> {
+  /** Ref to attach to the element you want to gate on visibility. */
+  ref: (node: T | null) => void;
+  /** Flips to `true` once the element enters within `rootMargin` of the viewport. Never flips back. */
+  isNear: boolean;
+}
+
+/**
+ * @param rootMargin Margin around the viewport (CSS-style string).
+ *                   '500px' = element starts mounting 500px before scroll-in.
+ *                   '1000px' = a full viewport's worth of lookahead.
+ *                   '0px' = strict on-screen detection.
+ */
+export function useNearViewport<T extends Element = HTMLElement>(
+  rootMargin: string = '500px'
+): UseNearViewportResult<T> {
+  const [isNear, setIsNear] = useState(false);
+  const elRef = useRef<T | null>(null);
+
+  // Subscribe/unsubscribe on element change.
+  const ref = useCallback(
+    (node: T | null) => {
+      const prev = elRef.current;
+
+      // Unsubscribe previous, if any. Identity-check the callback so a
+      // StrictMode re-mount that has already re-registered keeps its sub.
+      if (prev) {
+        const stillOurs = subscribers.get(prev);
+        if (stillOurs) {
+          subscribers.delete(prev);
+          observers.get(rootMargin)?.unobserve(prev);
+        }
+      }
+
+      elRef.current = node;
+      if (!node) return;
+
+      const cb = () => setIsNear(true);
+      subscribers.set(node, cb);
+      getObserverFor(rootMargin).observe(node);
+    },
+    [rootMargin]
+  );
+
+  // Unsubscribe on unmount. Identity check guards the StrictMode race.
+  useEffect(() => {
+    return () => {
+      const el = elRef.current;
+      if (!el) return;
+      if (subscribers.get(el)) {
+        subscribers.delete(el);
+        observers.get(rootMargin)?.unobserve(el);
+      }
+    };
+  }, [rootMargin]);
+
+  return { ref, isNear };
+}