@bendyline/squisq-react 2.0.1 → 2.2.0

package/src/MediaClipLayer.tsx

@@ -1,145 +0,0 @@
-/**
- * MediaClipLayer
- *
- * Player-level audio/video elements for the media-clip schedule. Renders one
- * element per scheduled clip (audio, or document-spanning video) and keeps each
- * mounted so re-entry doesn't reload; the drive effect seeks/plays only the
- * clips active at the current time. Multiple concurrent clips (e.g. a
- * document-spanning narration plus a block clip) are independent elements and
- * the browser mixes their output.
- *
- * Audio clips play unmuted during live playback (silent in render mode, where
- * frames are captured without sound and audio is muxed offline). Video clips
- * play muted — their audio, if any, is reproduced by the export mux.
- */
-
-import { useEffect, useRef } from 'react';
-import type { ScheduledClip } from '@bendyline/squisq/schemas';
-import { useMediaUrl } from './hooks/MediaContext';
-import { useMediaSchedule } from './hooks/useMediaSchedule';
-
-/** Re-seek an element only when it drifts this far from its target (seconds). */
-const DRIFT = 0.25;
-
-export interface MediaClipLayerProps {
-  schedule: ScheduledClip[];
-  currentTime: number;
-  isPlaying: boolean;
-  basePath: string;
-  renderMode?: boolean;
-  /** Silence every scheduled clip during live playback. */
-  muted?: boolean;
-}
-
-export function MediaClipLayer({
-  schedule,
-  currentTime,
-  isPlaying,
-  basePath,
-  renderMode = false,
-  muted = false,
-}: MediaClipLayerProps) {
-  const { renderClips, activeIds } = useMediaSchedule(schedule, currentTime);
-  if (renderClips.length === 0) return null;
-  return (
-    <div className="doc-player__media-clips" aria-hidden>
-      {renderClips.map((clip) => (
-        <MediaClipElement
-          key={clip.id}
-          clip={clip}
-          active={activeIds.has(clip.id)}
-          currentTime={currentTime}
-          isPlaying={isPlaying}
-          basePath={basePath}
-          renderMode={renderMode}
-          muted={muted}
-        />
-      ))}
-    </div>
-  );
-}
-
-interface MediaClipElementProps {
-  clip: ScheduledClip;
-  active: boolean;
-  currentTime: number;
-  isPlaying: boolean;
-  basePath: string;
-  renderMode: boolean;
-  muted: boolean;
-}
-
-function MediaClipElement({
-  clip,
-  active,
-  currentTime,
-  isPlaying,
-  basePath,
-  renderMode,
-  muted,
-}: MediaClipElementProps) {
-  const ref = useRef<HTMLMediaElement | null>(null);
-  const src = useMediaUrl(clip.src, basePath);
-
-  useEffect(() => {
-    const el = ref.current;
-    if (!el) return;
-    if (!active) {
-      if (!el.paused) el.pause();
-      return;
-    }
-    const target = Math.max(0, clip.sourceIn + (currentTime - clip.absoluteStart));
-    if (renderMode || Math.abs(el.currentTime - target) > DRIFT) {
-      try {
-        el.currentTime = target;
-      } catch {
-        // Seeking before metadata loads throws; the next tick retries.
-      }
-    }
-    if (isPlaying && !renderMode) {
-      const p = el.play();
-      if (p) p.catch(() => {});
-    } else {
-      el.pause();
-    }
-  }, [active, currentTime, isPlaying, renderMode, clip.sourceIn, clip.absoluteStart, src]);
-
-  const isVideo = clip.kind === 'video';
-  const common = {
-    ref: ref as React.RefObject<never>,
-    src,
-    preload: 'auto' as const,
-    'data-clip-id': clip.id,
-    'data-abs-start': clip.absoluteStart,
-    'data-abs-end': clip.absoluteEnd,
-    'data-source-in': clip.sourceIn,
-  };
-
-  if (isVideo) {
-    // Document-spanning video renders full-bleed behind the blocks.
-    return (
-      <video
-        {...common}
-        muted
-        playsInline
-        style={{
-          position: 'absolute',
-          inset: 0,
-          width: '100%',
-          height: '100%',
-          objectFit: 'cover',
-          zIndex: 0,
-          pointerEvents: 'none',
-        }}
-      />
-    );
-  }
-
-  return (
-    <audio
-      {...common}
-      muted={renderMode || muted}
-      style={{ position: 'absolute', width: 0, height: 0 }}
-    />
-  );
-}

package/src/SocialCaptionOverlay.tsx

@@ -1,255 +0,0 @@
-/**
- * SocialCaptionOverlay Component
- *
- * Social media-style captions (Instagram/TikTok): large centered words
- * showing 3-5 words at a time with the currently-spoken word highlighted
- * in the theme's primary color. Font and colors are pulled from the
- * active theme.
- *
- * Words are gathered across all caption phrases into a continuous stream,
- * then chunked into uniform groups for smooth, consistent pacing.
- *
- * Supports two timing modes:
- * 1. Precise: uses per-word timestamps from CaptionPhrase.words
- * 2. Interpolated: distributes timing evenly within each phrase
- */
-
-import { useMemo } from 'react';
-import type { CaptionTrack, CaptionPhrase, ViewportConfig } from '@bendyline/squisq/schemas';
-import type { Theme } from '@bendyline/squisq/schemas';
-import { resolveFontFamily } from '@bendyline/squisq/schemas';
-
-/** Target words per visible chunk. */
-const TARGET_CHUNK_SIZE = 4;
-const MIN_CHUNK_SIZE = 2;
-const MAX_CHUNK_SIZE = 6;
-
-/** A timed word derived from phrase data. */
-interface TimedWord {
-  text: string;
-  startTime: number;
-  endTime: number;
-}
-
-/** A chunk of words displayed together. */
-interface WordChunk {
-  words: TimedWord[];
-  startTime: number;
-  endTime: number;
-}
-
-/**
- * Resolve per-word timing for a single phrase.
- * Uses precise word timestamps when available, otherwise interpolates.
- */
-function resolvePhraseTiming(phrase: CaptionPhrase): TimedWord[] {
-  // Use precise timing when available
-  if (phrase.words && phrase.words.length > 0) {
-    return phrase.words.map((w) => ({
-      text: w.text,
-      startTime: w.startTime,
-      endTime: w.endTime,
-    }));
-  }
-
-  // Interpolate: split text into words, distribute evenly
-  const rawWords = phrase.text.split(/\s+/).filter((w) => w.length > 0);
-  if (rawWords.length === 0) return [];
-
-  const duration = phrase.endTime - phrase.startTime;
-  const wordDuration = duration / rawWords.length;
-
-  return rawWords.map((text, i) => ({
-    text,
-    startTime: phrase.startTime + i * wordDuration,
-    endTime: phrase.startTime + (i + 1) * wordDuration,
-  }));
-}
-
-/**
- * Build a continuous stream of timed words from ALL caption phrases,
- * then group into uniform display chunks. This eliminates the "pulsy"
- * feeling caused by per-phrase chunking with variable phrase lengths.
- */
-function buildWordStream(captions: CaptionTrack): { words: TimedWord[]; chunks: WordChunk[] } {
-  // Gather all words across all phrases
-  const allWords: TimedWord[] = [];
-  for (const phrase of captions.phrases) {
-    allWords.push(...resolvePhraseTiming(phrase));
-  }
-
-  if (allWords.length === 0) return { words: [], chunks: [] };
-
-  // Determine uniform chunk size
-  let chunkSize = TARGET_CHUNK_SIZE;
-  if (allWords.length > chunkSize) {
-    const numChunks = Math.ceil(allWords.length / chunkSize);
-    chunkSize = Math.ceil(allWords.length / numChunks);
-    chunkSize = Math.min(MAX_CHUNK_SIZE, Math.max(MIN_CHUNK_SIZE, chunkSize));
-  } else {
-    chunkSize = Math.max(MIN_CHUNK_SIZE, allWords.length);
-  }
-
-  // Build chunks
-  const chunks: WordChunk[] = [];
-  for (let i = 0; i < allWords.length; i += chunkSize) {
-    const chunkWords = allWords.slice(i, i + chunkSize);
-    chunks.push({
-      words: chunkWords,
-      startTime: chunkWords[0].startTime,
-      endTime: chunkWords[chunkWords.length - 1].endTime,
-    });
-  }
-
-  return { words: allWords, chunks };
-}
-
-interface SocialCaptionOverlayProps {
-  captions: CaptionTrack | undefined;
-  currentTime: number;
-  enabled?: boolean;
-  theme?: Theme;
-  viewport?: ViewportConfig;
-}
-
-export function SocialCaptionOverlay({
-  captions,
-  currentTime,
-  enabled = true,
-  theme,
-  viewport,
-}: SocialCaptionOverlayProps) {
-  // Build the word stream once when captions change (memoized)
-  const { chunks } = useMemo(
-    () => (captions ? buildWordStream(captions) : { words: [], chunks: [] }),
-    [captions],
-  );
-
-  if (!enabled || chunks.length === 0) {
-    return (
-      <div
-        className="social-caption-overlay"
-        style={{
-          position: 'absolute',
-          bottom: '18%',
-          left: 0,
-          right: 0,
-          zIndex: 50,
-          pointerEvents: 'none',
-          opacity: 0,
-          transition: 'opacity 0.15s ease-in-out',
-        }}
-      />
-    );
-  }
-
-  // Find the active chunk and word using binary-style search
-  let activeChunk: WordChunk | null = null;
-  let activeWordIndex = -1;
-
-  for (const chunk of chunks) {
-    if (currentTime >= chunk.startTime && currentTime < chunk.endTime) {
-      activeChunk = chunk;
-      break;
-    }
-  }
-
-  // If between chunks (gap), show the nearest chunk
-  if (!activeChunk) {
-    for (let i = 0; i < chunks.length - 1; i++) {
-      if (currentTime >= chunks[i].endTime && currentTime < chunks[i + 1].startTime) {
-        // In a gap — show the chunk we just left (feels more natural)
-        activeChunk = chunks[i];
-        activeWordIndex = activeChunk.words.length - 1;
-        break;
-      }
-    }
-    // Past all chunks
-    if (!activeChunk && chunks.length > 0 && currentTime >= chunks[chunks.length - 1].startTime) {
-      activeChunk = chunks[chunks.length - 1];
-      activeWordIndex = activeChunk.words.length - 1;
-    }
-  }
-
-  if (!activeChunk) return null;
-
-  // Find active word within chunk (if not already set from gap handling)
-  if (activeWordIndex === -1) {
-    for (let i = 0; i < activeChunk.words.length; i++) {
-      const word = activeChunk.words[i];
-      if (currentTime >= word.startTime && currentTime < word.endTime) {
-        activeWordIndex = i;
-        break;
-      }
-    }
-    // Fallback: last word before currentTime
-    if (activeWordIndex === -1) {
-      for (let i = activeChunk.words.length - 1; i >= 0; i--) {
-        if (currentTime >= activeChunk.words[i].startTime) {
-          activeWordIndex = i;
-          break;
-        }
-      }
-    }
-    // Final fallback
-    if (activeWordIndex === -1) activeWordIndex = 0;
-  }
-
-  // Theme-derived styling
-  const primaryColor = theme?.colors?.primary ?? '#5b9bd5';
-  const fontFamily = theme?.typography?.titleFont
-    ? resolveFontFamily(theme.typography.titleFont, '"PT Serif", Georgia, serif')
-    : '"PT Serif", Georgia, serif';
-
-  // Scale font to viewport — aim for ~5.5% of viewport height
-  const viewportHeight = viewport?.height ?? 720;
-  const baseFontSize = Math.round(viewportHeight * 0.055);
-  const fontSize = Math.max(24, Math.min(72, baseFontSize));
-
-  return (
-    <div
-      className="social-caption-overlay"
-      style={{
-        position: 'absolute',
-        bottom: '18%',
-        left: 0,
-        right: 0,
-        zIndex: 50,
-        pointerEvents: 'none',
-        textAlign: 'center',
-        padding: '0 8%',
-        boxSizing: 'border-box',
-        opacity: 1,
-        transition: 'opacity 0.15s ease-in-out',
-      }}
-    >
-      <div
-        style={{
-          display: 'inline-block',
-          lineHeight: 1.3,
-        }}
-      >
-        {activeChunk.words.map((word, i) => {
-          const isActive = i === activeWordIndex;
-          return (
-            <span
-              key={`${word.startTime}-${i}`}
-              style={{
-                fontFamily,
-                fontSize: `${fontSize}px`,
-                fontWeight: isActive ? 800 : 600,
-                color: isActive ? primaryColor : 'rgba(255, 255, 255, 0.9)',
-                textShadow: '0 2px 8px rgba(0,0,0,0.7), 0 0 20px rgba(0,0,0,0.4)',
-                marginRight: i < activeChunk!.words.length - 1 ? '0.3em' : undefined,
-                transition: 'color 0.1s ease, font-weight 0.1s ease',
-                textTransform: 'uppercase',
-              }}
-            >
-              {word.text}
-            </span>
-          );
-        })}
-      </div>
-    </div>
-  );
-}

package/src/__tests__/BlockRenderer.test.tsx

@@ -1,235 +0,0 @@
-import { describe, it, expect } from 'vitest';
-import { render } from '@testing-library/react';
-import { BlockRenderer } from '../BlockRenderer';
-import type { Block } from '@bendyline/squisq/schemas';
-
-describe('BlockRenderer', () => {
-  const minimalBlock: Block = {
-    id: 'test-block',
-    startTime: 0,
-    duration: 5,
-    audioSegment: 0,
-    layers: [],
-  };
-
-  it('renders an SVG element', () => {
-    const { container } = render(
-      <BlockRenderer block={minimalBlock} blockTime={0} basePath="/test" />,
-    );
-    const svg = container.querySelector('svg');
-    expect(svg).toBeTruthy();
-  });
-
-  it('renders with correct viewBox', () => {
-    const { container } = render(
-      <BlockRenderer block={minimalBlock} blockTime={0} basePath="/test" />,
-    );
-    const svg = container.querySelector('svg');
-    expect(svg?.getAttribute('viewBox')).toBe('0 0 1920 1080');
-  });
-
-  it('renders with custom viewport', () => {
-    const { container } = render(
-      <BlockRenderer
-        block={minimalBlock}
-        blockTime={0}
-        basePath="/test"
-        viewport={{ width: 1080, height: 1920 }}
-      />,
-    );
-    const svg = container.querySelector('svg');
-    expect(svg?.getAttribute('viewBox')).toBe('0 0 1080 1920');
-  });
-
-  it('pans dominant cover images across portrait frames without adding zoom', () => {
-    const portraitHero: Block = {
-      ...minimalBlock,
-      layers: [
-        {
-          type: 'image',
-          id: 'portrait-hero',
-          content: { src: 'wide-hero.jpg', alt: 'Wide hero', fit: 'cover' },
-          position: { x: 0, y: 0, width: '100%', height: '100%' },
-          animation: { type: 'slowZoom', duration: 9, direction: 'in' },
-        },
-      ],
-    };
-
-    const { container } = render(
-      <BlockRenderer
-        block={portraitHero}
-        blockTime={0}
-        basePath="/test"
-        viewport={{ width: 1080, height: 1920 }}
-      />,
-    );
-
-    const layer = container.querySelector('[data-layer-id="portrait-hero"]');
-    const image = layer?.querySelector('img');
-    expect(layer?.getAttribute('data-image-framing')).toBe('portrait-pan');
-    expect(image?.classList.contains('squisq-image--portrait-pan-right')).toBe(true);
-    expect(layer?.classList.contains('anim-slowZoom-in')).toBe(false);
-    expect(image?.style.objectFit).toBe('cover');
-    expect(image?.style.getPropertyValue('--portrait-pan-duration')).toBe('9s');
-  });
-
-  it('keeps smaller portrait cover tiles static', () => {
-    const portraitTile: Block = {
-      ...minimalBlock,
-      layers: [
-        {
-          type: 'image',
-          id: 'portrait-tile',
-          content: { src: 'tile.jpg', alt: 'Tile', fit: 'cover' },
-          position: { x: '5%', y: '5%', width: '42%', height: '42%' },
-        },
-      ],
-    };
-
-    const { container } = render(
-      <BlockRenderer
-        block={portraitTile}
-        blockTime={0}
-        basePath="/test"
-        viewport={{ width: 1080, height: 1920 }}
-      />,
-    );
-
-    expect(container.querySelector('[data-image-framing="portrait-pan"]')).toBeNull();
-  });
-
-  it('renders text layers', () => {
-    const blockWithText: Block = {
-      id: 'text-block',
-      startTime: 0,
-      duration: 5,
-      audioSegment: 0,
-      layers: [
-        {
-          type: 'text',
-          id: 'title',
-          content: {
-            text: 'Hello World',
-            style: {
-              fontSize: 48,
-              color: '#ffffff',
-            },
-          },
-          position: { x: 100, y: 100 },
-        },
-      ],
-    };
-
-    const { container } = render(
-      <BlockRenderer block={blockWithText} blockTime={0} basePath="/test" />,
-    );
-    // Text should be rendered somewhere in the SVG
-    expect(container.textContent).toContain('Hello World');
-  });
-
-  it('renders shape layers', () => {
-    const blockWithShape: Block = {
-      id: 'shape-block',
-      startTime: 0,
-      duration: 5,
-      audioSegment: 0,
-      layers: [
-        {
-          type: 'shape',
-          id: 'bg',
-          content: {
-            shape: 'rect',
-            fill: '#000000',
-          },
-          position: { x: 0, y: 0, width: 1920, height: 1080 },
-        },
-      ],
-    };
-
-    const { container } = render(
-      <BlockRenderer block={blockWithShape} blockTime={0} basePath="/test" />,
-    );
-    const rect = container.querySelector('rect');
-    expect(rect).toBeTruthy();
-  });
-
-  it('namespaces SVG definitions per renderer instance', () => {
-    const { container } = render(
-      <>
-        <BlockRenderer block={minimalBlock} blockTime={0} basePath="/test" />
-        <BlockRenderer block={minimalBlock} blockTime={0} basePath="/test" />
-      </>,
-    );
-    const ids = Array.from(container.querySelectorAll('clipPath')).map((node) => node.id);
-    expect(ids).toHaveLength(2);
-    expect(new Set(ids).size).toBe(2);
-  });
-
-  it('renders transitions and layer animations by default', () => {
-    const animatedBlock: Block = {
-      ...minimalBlock,
-      transition: { type: 'fade', duration: 0.5 },
-      layers: [
-        {
-          type: 'text',
-          id: 'animated-title',
-          content: { text: 'Animated', style: { fontSize: 48, color: '#fff' } },
-          position: { x: 100, y: 100 },
-          animation: { type: 'fadeIn', duration: 1 },
-        },
-      ],
-    };
-
-    const { container } = render(
-      <BlockRenderer block={animatedBlock} blockTime={0} basePath="/test" isEntering />,
-    );
-
-    expect(container.querySelector('svg')?.classList.contains('transition-fade-enter')).toBe(true);
-    expect(
-      container
-        .querySelector('[data-layer-id="animated-title"]')
-        ?.classList.contains('anim-fadeIn'),
-    ).toBe(true);
-  });
-
-  it('suppresses transitions and every layer animation without mutating the block', () => {
-    const animatedBlock: Block = {
-      ...minimalBlock,
-      transition: { type: 'fade', duration: 0.5 },
-      layers: [
-        {
-          type: 'text',
-          id: 'animated-title',
-          content: { text: 'Static', style: { fontSize: 48, color: '#fff' } },
-          position: { x: 100, y: 100 },
-          animation: { type: 'fadeIn', duration: 1 },
-        },
-        {
-          type: 'image',
-          id: 'animated-hero',
-          content: { src: 'hero.jpg', alt: 'Hero', fit: 'cover' },
-          position: { x: 0, y: 0, width: '100%', height: '100%' },
-          animation: { type: 'slowZoom', duration: 5 },
-        },
-      ],
-    };
-    const originalAnimations = animatedBlock.layers?.map((layer) => layer.animation);
-
-    const { container } = render(
-      <BlockRenderer
-        block={animatedBlock}
-        blockTime={0}
-        basePath="/test"
-        isEntering
-        animationsEnabled={false}
-        viewport={{ width: 1080, height: 1920 }}
-      />,
-    );
-
-    expect(container.querySelector('svg')?.className.baseVal).not.toContain('transition-');
-    expect(container.querySelector('[class*="anim-"]')).toBeNull();
-    expect(container.querySelector('[data-image-framing="portrait-pan"]')).toBeNull();
-    expect(animatedBlock.transition).toEqual({ type: 'fade', duration: 0.5 });
-    expect(animatedBlock.layers?.map((layer) => layer.animation)).toEqual(originalAnimations);
-  });
-});