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

package/dist/utils/lite-youtube-embed-stub.d.ts

@@ -1,8 +0,0 @@
-export interface LiteYouTubeEmbedProps {
-    id: string;
-    title?: string;
-    poster?: string;
-    className?: string;
-}
-export declare function LiteYouTubeEmbed({ id, title, poster, className }: LiteYouTubeEmbedProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=lite-youtube-embed-stub.d.ts.map

package/dist/utils/lite-youtube-embed-stub.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"lite-youtube-embed-stub.d.ts","sourceRoot":"","sources":["../../src/utils/lite-youtube-embed-stub.tsx"],"names":[],"mappings":"AAEA,MAAM,WAAW,qBAAqB;IACpC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,gBAAgB,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,qBAAqB,2CAWvF"}

package/dist/utils/lite-youtube-embed.d.ts

@@ -1,9 +0,0 @@
-interface LiteYouTubeEmbedProps {
-    id: string;
-    title?: string;
-    thumbnail?: string;
-    className?: string;
-}
-export declare function LiteYouTubeEmbed({ id, title, thumbnail, className }: LiteYouTubeEmbedProps): import("react/jsx-runtime").JSX.Element;
-export {};
-//# sourceMappingURL=lite-youtube-embed.d.ts.map

package/dist/utils/lite-youtube-embed.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"lite-youtube-embed.d.ts","sourceRoot":"","sources":["../../src/utils/lite-youtube-embed.tsx"],"names":[],"mappings":"AAEA,UAAU,qBAAqB;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,gBAAgB,CAAC,EAAE,EAAE,EAAE,KAAuB,EAAE,SAAS,EAAE,SAAS,EAAE,EAAE,qBAAqB,2CAoC5G"}

package/src/components/features/.video-player.md

@@ -1,44 +0,0 @@
-<!-- source-hash: ac2c9623eeb0459e6abe9a41a32951c3 -->
-A comprehensive React video player component built on ReactPlayer with custom poster overlay, loading states, and error handling for the OpenFrame platform.
-
-## Key Components
-
-- **VideoPlayer**: Main component with configurable playback options and responsive design
-- **Play**: SVG icon component for the play button overlay
-- **Loader**: Animated SVG spinner for loading states
-- **VideoPlayerProps**: TypeScript interface defining all configuration options including aspect ratio control, autoplay, and poster image settings
-
-## Usage Example
-
-```typescript
-import { VideoPlayer } from './video-player';
-
-// Basic video with poster and title
-<VideoPlayer
-  url="https://example.com/video.mp4"
-  title="Demo Video"
-  poster="https://example.com/thumbnail.jpg"
-  showTitle={true}
-  controls={true}
-/>
-
-// Auto-playing video with native aspect ratio
-<VideoPlayer
-  url="https://youtube.com/watch?v=VIDEO_ID"
-  autoPlay={true}
-  muted={true}
-  loop={true}
-  useNativeAspectRatio={true}
-  className="custom-player"
-/>
-
-// Video with custom poster click behavior
-<VideoPlayer
-  url="https://vimeo.com/123456789"
-  poster="custom-thumbnail.png"
-  showTitle={false}
-  controls={false}
-/>
-```
-
-The component handles client-side hydration, provides comprehensive error states, and integrates with OpenFrame's design system using ODS CSS classes. It supports both 16:9 aspect ratio (default) and native video dimensions through the `useNativeAspectRatio` prop.

package/src/components/features/.youtube-embed.md

@@ -1,40 +0,0 @@
-<!-- source-hash: fc74dea08c8b565aa3e51c72946544d6 -->
-A React component for embedding YouTube videos with responsive design, loading states, and fallback support for the Flamingo documentation system.
-
-## Key Components
-
-- **`YouTubeEmbed`** - Main YouTube video embed component with configurable options
-- **`Play`** - SVG play button icon component
-- **`Loader`** - Animated loading spinner icon component
-- **`extractYouTubeId`** - Utility function to extract video IDs from various YouTube URL formats
-- **`YouTubeLinkParser`** - Component that automatically converts YouTube links to embedded videos
-
-## Usage Example
-
-```typescript
-import { YouTubeEmbed, extractYouTubeId } from './youtube-embed';
-
-// Basic embed
-<YouTubeEmbed videoId="dQw4w9WgXcQ" />
-
-// With custom options
-<YouTubeEmbed 
-  videoId="dQw4w9WgXcQ"
-  title="Custom Video Title"
-  showTitle={true}
-  showMeta={false}
-  minimalControls={true}
-  className="my-custom-class"
-/>
-
-// Extract video ID from URL
-const videoId = extractYouTubeId("https://www.youtube.com/watch?v=dQw4w9WgXcQ");
-// Returns: "dQw4w9WgXcQ"
-
-// Auto-convert YouTube links in markdown
-<YouTubeLinkParser href="https://youtu.be/dQw4w9WgXcQ">
-  Video Title
-</YouTubeLinkParser>
-```
-
-The component uses iframe embedding by default for better CSP compatibility, includes responsive 16:9 aspect ratio containers, and provides error handling with fallback to YouTube's website. It supports various display options including minimal controls mode and customizable meta information display.

package/src/components/features/__tests__/video-player.test.tsx

@@ -1,142 +0,0 @@
-import { fireEvent, render } from '@testing-library/react'
-import { afterEach, beforeAll, describe, expect, it, vi } from 'vitest'
-
-/**
- * Regression test for the case-study video performance fix:
- *   plan: /Users/michaelassraf/.claude/plans/we-have-terrible-serious-radiant-turing.md
- *
- * Bug: VideoPlayer mounted two competing <video> elements on every render when no
- * `poster` prop was passed — the hidden first-frame extractor (`useVideoFirstFramePoster`)
- * raced ReactPlayer's own metadata fetch on the same URL, doubling bandwidth and
- * stalling click-to-play on big MP4s.
- *
- * Fix: opt-in `lazyMount` prop that:
- *   1. Skips `useVideoFirstFramePoster` (no hidden video)
- *   2. Sets `preload="none"` on ReactPlayer's <video> until user clicks play
- *   3. Synchronously calls .play() in the click handler for iOS user-activation safety
- *
- * Test strategy:
- *   - To detect "did the hidden poster <video> get created?", we tag the hook's
- *     unique signature — it sets `crossOrigin="anonymous"` on the element. Spy on
- *     `document.createElement` and count VIDEO elements that subsequently have
- *     `crossOrigin` set. React's own DOM render does NOT set crossOrigin on the
- *     mocked <video>, so this isolates the bug surface cleanly.
- *   - Mock `react-player` so we don't depend on its internal FilePlayer dynamic
- *     import (broken under JSDOM / Vitest's module loader).
- */
-
-// Mock react-player as a forwardRef component that exposes the same
-// `getInternalPlayer()` surface used by VideoPlayer (line ~697 lazyMount sync play).
-// Without this, `playerRef.current?.getInternalPlayer()` returns undefined under
-// the test, the `instanceof HTMLVideoElement` guard fails, and the iOS user-
-// activation path is silently never exercised by the test.
-vi.mock('react-player', async () => {
-  const React = await import('react')
-  const RP = React.forwardRef<
-    { getInternalPlayer: () => HTMLVideoElement | null },
-    { url: string; config?: { file?: { attributes?: Record<string, unknown> } } }
-  >(function MockReactPlayer({ url, config }, ref) {
-    const videoRef = React.useRef<HTMLVideoElement | null>(null)
-    React.useImperativeHandle(ref, () => ({
-      getInternalPlayer: () => videoRef.current,
-    }))
-    const preload = (config?.file?.attributes?.preload as string) ?? 'metadata'
-    return <video ref={videoRef} src={url} preload={preload as 'none' | 'metadata' | 'auto'} />
-  })
-  return { default: RP }
-})
-
-beforeAll(() => {
-  // JSDOM doesn't implement these — react-player's internals (and the poster hook) call them.
-  Object.defineProperty(HTMLMediaElement.prototype, 'canPlayType', {
-    value: () => 'maybe',
-    writable: true,
-    configurable: true,
-  })
-  Object.defineProperty(HTMLMediaElement.prototype, 'load', {
-    value: () => undefined,
-    writable: true,
-    configurable: true,
-  })
-})
-
-import { VideoPlayer } from '../video-player'
-
-const SAMPLE_MP4 = 'https://example.com/test.mp4'
-
-/**
- * Detects the poster hook's signature via the `data-poster-extractor` attribute
- * the hook sets on its hidden <video>. This is more durable than checking
- * `crossOrigin === 'anonymous'` (any future code that happens to set crossOrigin
- * on a freshly-created video would inflate the count and silently flake-pass).
- */
-function spyForHiddenPosterVideos(): { count: () => number; restore: () => void } {
-  const original = document.createElement.bind(document)
-  const tracked: HTMLVideoElement[] = []
-  document.createElement = ((tag: string, opts?: ElementCreationOptions) => {
-    const el = original(tag, opts)
-    if (tag.toLowerCase() === 'video') tracked.push(el as HTMLVideoElement)
-    return el
-  }) as typeof document.createElement
-  return {
-    count: () => tracked.filter(v => v.getAttribute('data-poster-extractor') === 'true').length,
-    restore: () => { document.createElement = original },
-  }
-}
-
-describe('VideoPlayer lazyMount', () => {
-  let videoSpy: ReturnType<typeof spyForHiddenPosterVideos> | null = null
-
-  afterEach(() => {
-    videoSpy?.restore()
-    videoSpy = null
-  })
-
-  it('does NOT instantiate a hidden poster <video> when lazyMount=true (the actual fix)', () => {
-    videoSpy = spyForHiddenPosterVideos()
-    render(<VideoPlayer url={SAMPLE_MP4} lazyMount />)
-    expect(videoSpy.count()).toBe(0)
-  })
-
-  it('renders ReactPlayer with preload="none" pre-click when lazyMount=true', () => {
-    const { container } = render(<VideoPlayer url={SAMPLE_MP4} lazyMount />)
-    const videos = container.querySelectorAll('video')
-    expect(videos.length).toBe(1)
-    expect(videos[0].getAttribute('preload')).toBe('none')
-  })
-
-  it('preserves existing preload="metadata" + poster-hook behavior when lazyMount=false (default)', () => {
-    videoSpy = spyForHiddenPosterVideos()
-    const { container } = render(<VideoPlayer url={SAMPLE_MP4} />)
-    expect(container.querySelectorAll('video')[0].getAttribute('preload')).toBe('metadata')
-    // The poster hook DOES create one hidden <video> when no poster is provided.
-    // This is the legacy behavior we explicitly opted out of via lazyMount.
-    expect(videoSpy.count()).toBeGreaterThanOrEqual(1)
-  })
-
-  it('skips the poster hook when an explicit poster is provided (existing gate, regression check)', () => {
-    videoSpy = spyForHiddenPosterVideos()
-    render(<VideoPlayer url={SAMPLE_MP4} poster="https://example.com/poster.jpg" />)
-    expect(videoSpy.count()).toBe(0)
-  })
-
-  it('calls play() synchronously inside the click handler when lazyMount=true (iOS user-activation)', () => {
-    const playSpy = vi.fn().mockResolvedValue(undefined)
-    Object.defineProperty(HTMLMediaElement.prototype, 'play', {
-      value: playSpy,
-      writable: true,
-      configurable: true,
-    })
-
-    const { container } = render(<VideoPlayer url={SAMPLE_MP4} lazyMount />)
-    // The play overlay div has `onClick={handlePlayClick}` and uses the
-    // 'group cursor-pointer' classes. Find by role/aria isn't reliable since
-    // the overlay is a styled div, so query by the unique class combo.
-    const overlay = container.querySelector('div.cursor-pointer.group') as HTMLElement | null
-    expect(overlay).toBeTruthy()
-    fireEvent.click(overlay!)
-    // play() must be called synchronously inside the click event task — if it
-    // were deferred (e.g., to a useEffect), iOS Safari would block playback.
-    expect(playSpy).toHaveBeenCalled()
-  })
-})