@bendyline/squisq-react 2.0.1 → 2.2.0

package/src/BlockRenderer.tsx

@@ -1,194 +0,0 @@
-/**
- * BlockRenderer Component
- *
- * Renders a single block as an SVG element with all its layers.
- * Each layer is rendered back-to-front (first layer is background).
- * Handles positioning, animations, and transitions.
- */
-
-import { useId } from 'react';
-import type { Block, Layer, Transition } from '@bendyline/squisq/schemas';
-import { resolveTransitionDuration } from '@bendyline/squisq/schemas';
-import { ImageLayer } from './layers/ImageLayer';
-import { TextLayer } from './layers/TextLayer';
-import { ShapeLayer } from './layers/ShapeLayer';
-import { PathLayer } from './layers/PathLayer';
-import { MapLayer } from './layers/MapLayer';
-import { VideoLayer } from './layers/VideoLayer';
-import { TableLayer } from './layers/TableLayer';
-import { TreeLayer } from './layers/TreeLayer';
-import { getTransitionClass } from './utils/animationUtils';
-
-/** Default viewport dimensions (1080p landscape). */
-const DEFAULT_VIEWPORT = {
-  width: 1920,
-  height: 1080,
-};
-
-/** Viewport configuration type */
-export interface ViewportDimensions {
-  width: number;
-  height: number;
-}
-
-interface BlockRendererProps {
-  /** The block to render */
-  block: Block;
-  /** Current time relative to block start (seconds) */
-  blockTime: number;
-  /** Base path for resolving media URLs */
-  basePath: string;
-  /** Whether this block is entering (for transition) */
-  isEntering?: boolean;
-  /** Whether this block is exiting (for transition) */
-  isExiting?: boolean;
-  /** Transition to apply. Defaults to block.transition. */
-  transition?: Transition;
-  /** Viewport dimensions (defaults to 1920x1080 landscape) */
-  viewport?: ViewportDimensions;
-  /** Whether the doc is currently playing (controls video playback) */
-  isPlaying?: boolean;
-  /**
-   * Whether to render block transitions and layer animations (default: true).
-   * Disabling this only removes authored/render-style motion; timed video
-   * layers continue to advance normally.
-   */
-  animationsEnabled?: boolean;
-}
-
-export function BlockRenderer({
-  block,
-  blockTime,
-  basePath,
-  isEntering = false,
-  isExiting = false,
-  transition,
-  viewport = DEFAULT_VIEWPORT,
-  isPlaying,
-  animationsEnabled = true,
-}: BlockRendererProps) {
-  // Build transition class and inline style for dynamic duration
-  let transitionClass = '';
-  const transitionStyle: Record<string, string> = {};
-  const activeTransition = animationsEnabled ? (transition ?? block.transition) : undefined;
-  if (activeTransition && isEntering) {
-    transitionClass = getTransitionClass(activeTransition.type, true, activeTransition.direction);
-    transitionStyle['--transition-duration'] = `${resolveTransitionDuration(activeTransition)}s`;
-  } else if (activeTransition && isExiting) {
-    transitionClass = getTransitionClass(activeTransition.type, false, activeTransition.direction);
-    transitionStyle['--transition-duration'] = `${resolveTransitionDuration(activeTransition)}s`;
-  }
-
-  // React's instance id keeps SVG fragment references local even when the
-  // same block is rendered in a thumbnail, preview, and player at once.
-  const instanceId = useId().replace(/:/g, '');
-  const clipId = `vb-clip-${instanceId}-${block.id}`;
-
-  return (
-    <svg
-      className={`block-svg ${transitionClass}`}
-      style={transitionStyle}
-      viewBox={`0 0 ${viewport.width} ${viewport.height}`}
-      preserveAspectRatio="xMidYMid meet"
-      overflow="hidden"
-      data-block-id={block.id}
-    >
-      {/* Clip path matching the viewBox -- prevents Ken Burns animations from
-          bleeding outside the block area (foreignObject + transform: scale
-          can escape SVG overflow="hidden" in some browsers) */}
-      <defs>
-        <clipPath id={clipId}>
-          <rect x="0" y="0" width={viewport.width} height={viewport.height} />
-        </clipPath>
-      </defs>
-
-      {/* All layers clipped to viewBox bounds */}
-      <g clipPath={`url(#${clipId})`}>
-        {(block.layers ?? []).map((layer) => (
-          <LayerRenderer
-            key={layer.id}
-            layer={layer}
-            basePath={basePath}
-            viewport={viewport}
-            blockTime={blockTime}
-            isPlaying={isPlaying}
-            animationsEnabled={animationsEnabled}
-          />
-        ))}
-      </g>
-    </svg>
-  );
-}
-
-interface LayerRendererProps {
-  layer: Layer;
-  basePath: string;
-  viewport: { width: number; height: number };
-  blockTime: number;
-  isPlaying?: boolean;
-  animationsEnabled: boolean;
-}
-
-/**
- * Dispatch to the appropriate layer component based on type.
- */
-function LayerRenderer({
-  layer,
-  basePath,
-  viewport,
-  blockTime,
-  isPlaying,
-  animationsEnabled,
-}: LayerRendererProps) {
-  // Render policy must not mutate caller-owned Docs. A shallow copy is enough:
-  // every layer renderer reads animation only from the base layer field.
-  const renderedLayer: Layer =
-    animationsEnabled || !layer.animation ? layer : { ...layer, animation: undefined };
-
-  switch (renderedLayer.type) {
-    case 'image':
-      return (
-        <ImageLayer
-          layer={renderedLayer}
-          basePath={basePath}
-          viewport={viewport}
-          blockTime={blockTime}
-          animationsEnabled={animationsEnabled}
-        />
-      );
-    case 'text':
-      return <TextLayer layer={renderedLayer} viewport={viewport} blockTime={blockTime} />;
-    case 'shape':
-      return <ShapeLayer layer={renderedLayer} viewport={viewport} blockTime={blockTime} />;
-    case 'path':
-      return <PathLayer layer={renderedLayer} viewport={viewport} blockTime={blockTime} />;
-    case 'map':
-      return (
-        <MapLayer
-          layer={renderedLayer}
-          basePath={basePath}
-          viewport={viewport}
-          blockTime={blockTime}
-        />
-      );
-    case 'video':
-      return (
-        <VideoLayer
-          layer={renderedLayer}
-          basePath={basePath}
-          viewport={viewport}
-          blockTime={blockTime}
-          isPlaying={isPlaying}
-        />
-      );
-    case 'table':
-      return <TableLayer layer={renderedLayer} viewport={viewport} blockTime={blockTime} />;
-    case 'tree':
-      return <TreeLayer layer={renderedLayer} viewport={viewport} blockTime={blockTime} />;
-    default:
-      console.warn(`Unknown layer type: ${(renderedLayer as Layer).type}`);
-      return null;
-  }
-}
-
-export default BlockRenderer;

package/src/CaptionOverlay.tsx

@@ -1,111 +0,0 @@
-/**
- * CaptionOverlay Component
- *
- * Displays closed captions synchronized with audio playback.
- * Supports two styles:
- *
- * - `'standard'` (default): Traditional broadcast captions — small white text
- *   on a semi-transparent black badge at the top of the player.
- * - `'social'`: Social media-style (Instagram/TikTok) — large centered words
- *   with the active word highlighted in the theme's primary color.
- */
-
-import type { CaptionTrack, ViewportConfig } from '@bendyline/squisq/schemas';
-import { getCaptionAtTime } from '@bendyline/squisq/schemas';
-import type { Theme } from '@bendyline/squisq/schemas';
-import type { CaptionStyle } from './types';
-import { SocialCaptionOverlay } from './SocialCaptionOverlay';
-
-interface CaptionOverlayProps {
-  /** Caption track with timestamped phrases */
-  captions: CaptionTrack | undefined;
-  /** Current playback time in seconds */
-  currentTime: number;
-  /** Whether captions are enabled */
-  enabled?: boolean;
-  /** Font size in pixels for standard style (default: 16) */
-  fontSize?: number;
-  /** Caption display style (default: 'standard') */
-  captionStyle?: CaptionStyle;
-  /** Theme for social-style caption colors and fonts */
-  theme?: Theme;
-  /** Viewport config for social-style font scaling */
-  viewport?: ViewportConfig;
-}
-
-export function CaptionOverlay({
-  captions,
-  currentTime,
-  enabled = true,
-  fontSize = 16,
-  captionStyle = 'standard',
-  theme,
-  viewport,
-}: CaptionOverlayProps) {
-  // Delegate to social overlay when that style is active
-  if (captionStyle === 'social') {
-    return (
-      <SocialCaptionOverlay
-        captions={captions}
-        currentTime={currentTime}
-        enabled={enabled}
-        theme={theme}
-        viewport={viewport}
-      />
-    );
-  }
-
-  // Standard caption rendering
-  const phrase = enabled && captions ? getCaptionAtTime(captions, currentTime) : null;
-  const captionText = phrase?.text ?? null;
-
-  return (
-    <div
-      className="caption-overlay"
-      style={{
-        position: 'absolute',
-        top: '6px',
-        left: '50%',
-        transform: 'translateX(-50%)',
-        zIndex: 50,
-        pointerEvents: 'none',
-        maxWidth: '100%',
-        width: '100%',
-        textAlign: 'center',
-        opacity: captionText ? 1 : 0,
-        transition: 'opacity 0.15s ease-in-out',
-        padding: '0 4px',
-        boxSizing: 'border-box',
-      }}
-    >
-      {captionText && (
-        <div
-          style={{
-            display: 'inline-block',
-            padding: '3px 10px',
-            background: 'rgba(0, 0, 0, 0.65)',
-            borderRadius: '4px',
-            backdropFilter: 'blur(4px)',
-          }}
-        >
-          <span
-            style={{
-              color: '#ffffff',
-              fontSize: `${fontSize}px`,
-              fontFamily: "'Hanken Grotesk', system-ui, sans-serif",
-              fontWeight: 500,
-              lineHeight: 1.25,
-              textShadow: '0 1px 3px rgba(0,0,0,0.5)',
-              whiteSpace: 'pre-wrap',
-              wordWrap: 'break-word',
-            }}
-          >
-            {captionText}
-          </span>
-        </div>
-      )}
-    </div>
-  );
-}
-
-export default CaptionOverlay;

package/src/DocControlsBottom.tsx

@@ -1,109 +0,0 @@
-/**
- * DocControlsBottom Component
- *
- * Horizontal control strip that renders below the doc player video.
- * An alternative to the overlay for landscape mode -- controls sit in a
- * separate bar below the video instead of overlapping the content.
- *
- * Contains: restart, play/pause, time display, progress bar, segment
- * indicator, CC toggle. Same controls as the overlay but in an external bar.
- *
- * Related Files:
- * - DocControlsOverlay.tsx -- Overlay variant (default landscape)
- * - DocControlsSidebar.tsx -- Sidebar variant (portrait)
- * - DocProgressBar.tsx -- Shared progress bar component
- * - types.ts -- PlaybackState/PlaybackActions interfaces
- */
-
-import { DocProgressBar } from './DocProgressBar';
-import type { PlaybackState, PlaybackActions, BlockMarker } from './types';
-import { formatTime } from './types';
-import type { Block } from '@bendyline/squisq/schemas';
-
-interface DocControlsBottomProps {
-  state: PlaybackState;
-  actions: PlaybackActions;
-  blockMarkers: BlockMarker[];
-  expandedBlocks: Block[];
-  getBlockTitle?: (block: Block) => string;
-}
-
-export function DocControlsBottom({
-  state,
-  actions,
-  blockMarkers,
-  expandedBlocks,
-  getBlockTitle,
-}: DocControlsBottomProps) {
-  return (
-    <div className="doc-controls-bottom">
-      {/* Restart button */}
-      <button
-        className="bottom-ctrl-btn"
-        onClick={actions.restart}
-        title="Restart"
-        aria-label="Restart from beginning"
-      >
-        <svg viewBox="0 0 24 24" fill="currentColor" width="18" height="18">
-          <path d="M12 5V1L7 6l5 5V7c3.31 0 6 2.69 6 6s-2.69 6-6 6-6-2.69-6-6H4c0 4.42 3.58 8 8 8s8-3.58 8-8-3.58-8-8-8z" />
-        </svg>
-      </button>
-
-      {/* Play/Pause button */}
-      <button
-        className="bottom-ctrl-btn bottom-play-btn"
-        onClick={actions.toggle}
-        aria-label={state.isPlaying ? 'Pause' : 'Play'}
-      >
-        {state.isPlaying ? (
-          <svg viewBox="0 0 24 24" fill="currentColor" width="20" height="20">
-            <path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z" />
-          </svg>
-        ) : (
-          <svg viewBox="0 0 24 24" fill="currentColor" width="20" height="20">
-            <path d="M8 5v14l11-7z" />
-          </svg>
-        )}
-      </button>
-
-      {/* Time display */}
-      <span className="bottom-time">
-        {formatTime(state.currentTime)} / {formatTime(state.totalDuration)}
-      </span>
-
-      {/* Progress bar */}
-      <DocProgressBar
-        state={state}
-        actions={actions}
-        blockMarkers={blockMarkers}
-        expandedBlocks={expandedBlocks}
-        getBlockTitle={getBlockTitle}
-      />
-
-      {/* Segment indicator */}
-      <span className="bottom-segment">
-        {state.currentBlockIndex + 1}/{state.totalBlocks}
-      </span>
-
-      {/* Caption mode cycle */}
-      {state.hasCaptions && (
-        <button
-          className={`bottom-ctrl-btn ${state.captionMode !== 'off' ? 'bottom-ctrl-btn--active' : ''}`}
-          onClick={() => actions.cycleCaptionMode()}
-          title={
-            state.captionMode === 'off'
-              ? 'Captions: Off'
-              : state.captionMode === 'standard'
-                ? 'Captions: Standard'
-                : 'Captions: Social'
-          }
-          aria-label="Cycle caption style"
-        >
-          <svg viewBox="0 0 24 24" fill="currentColor" width="18" height="18">
-            <path d="M19 4H5a2 2 0 00-2 2v12a2 2 0 002 2h14a2 2 0 002-2V6a2 2 0 00-2-2zm-8 7H9.5v-.5h-2v3h2V13H11v1a1 1 0 01-1 1H7a1 1 0 01-1-1v-4a1 1 0 011-1h3a1 1 0 011 1v1zm7 0h-1.5v-.5h-2v3h2V13H18v1a1 1 0 01-1 1h-3a1 1 0 01-1-1v-4a1 1 0 011-1h3a1 1 0 011 1v1z" />
-          </svg>
-        </button>
-      )}
-    </div>
-  );
-}

package/src/DocControlsOverlay.tsx

@@ -1,190 +0,0 @@
-/**
- * DocControlsOverlay Component
- *
- * The default overlay controls that render at the bottom of the doc player
- * video with a gradient background. Contains all playback controls: restart,
- * play/pause, time display, progress bar with block markers, segment indicator,
- * and caption toggle.
- *
- * This is the original control layout extracted from DocPlayer. It's used
- * for the 'overlay' controls layout mode (Flow mode, landscape default).
- *
- * Related Files:
- * - DocPlayer.tsx -- Parent component
- * - DocProgressBar.tsx -- Progress bar sub-component
- * - types.ts -- Shared type definitions
- */
-
-import { DocProgressBar } from './DocProgressBar';
-import type { PlaybackState, PlaybackActions, BlockMarker } from './types';
-import { formatTime } from './types';
-import type { Block } from '@bendyline/squisq/schemas';
-
-interface DocControlsOverlayProps {
-  state: PlaybackState;
-  actions: PlaybackActions;
-  blockMarkers: BlockMarker[];
-  expandedBlocks: Block[];
-  getBlockTitle?: (block: Block) => string;
-}
-
-export function DocControlsOverlay({
-  state,
-  actions,
-  blockMarkers,
-  expandedBlocks,
-  getBlockTitle,
-}: DocControlsOverlayProps) {
-  return (
-    <div
-      className="doc-player__controls"
-      style={{
-        position: 'absolute',
-        bottom: 0,
-        left: 0,
-        right: 0,
-        padding: '12px 16px',
-        background: 'linear-gradient(transparent, rgba(0,0,0,0.8))',
-        display: 'flex',
-        alignItems: 'center',
-        gap: '8px',
-        zIndex: 100,
-      }}
-    >
-      {/* Restart button */}
-      <button
-        onClick={actions.restart}
-        style={{
-          background: 'none',
-          border: 'none',
-          color: 'rgba(255,255,255,0.7)',
-          cursor: 'pointer',
-          padding: '8px',
-          fontSize: '14px',
-          display: 'flex',
-          alignItems: 'center',
-        }}
-        title="Restart"
-        aria-label="Restart from beginning"
-      >
-        <svg viewBox="0 0 24 24" fill="currentColor" width="18" height="18">
-          <path d="M12 5V1L7 6l5 5V7c3.31 0 6 2.69 6 6s-2.69 6-6 6-6-2.69-6-6H4c0 4.42 3.58 8 8 8s8-3.58 8-8-3.58-8-8-8z" />
-        </svg>
-      </button>
-
-      {/* Play/Pause button */}
-      <button
-        onClick={actions.toggle}
-        style={{
-          background: 'rgba(255,255,255,0.2)',
-          border: 'none',
-          borderRadius: '50%',
-          color: 'white',
-          cursor: 'pointer',
-          padding: '10px',
-          fontSize: '16px',
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          width: '40px',
-          height: '40px',
-        }}
-        aria-label={state.isPlaying ? 'Pause' : 'Play'}
-      >
-        {state.isPlaying ? (
-          <svg viewBox="0 0 24 24" fill="currentColor" width="20" height="20">
-            <path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z" />
-          </svg>
-        ) : (
-          <svg viewBox="0 0 24 24" fill="currentColor" width="20" height="20">
-            <path d="M8 5v14l11-7z" />
-          </svg>
-        )}
-      </button>
-
-      {/* Time display */}
-      <span style={{ color: 'white', fontSize: '12px', minWidth: '80px', fontFamily: 'monospace' }}>
-        {formatTime(state.currentTime)} / {formatTime(state.totalDuration)}
-      </span>
-
-      {/* Progress bar */}
-      <DocProgressBar
-        state={state}
-        actions={actions}
-        blockMarkers={blockMarkers}
-        expandedBlocks={expandedBlocks}
-        getBlockTitle={getBlockTitle}
-      />
-
-      {/* Segment indicator */}
-      <span style={{ color: 'rgba(255,255,255,0.5)', fontSize: '11px', whiteSpace: 'nowrap' }}>
-        {state.currentBlockIndex + 1}/{state.totalBlocks}
-      </span>
-
-      {/* Caption mode cycle button: off → standard → social → off */}
-      {state.hasCaptions && (
-        <button
-          onClick={() => actions.cycleCaptionMode()}
-          style={{
-            background: state.captionMode !== 'off' ? 'rgba(255,255,255,0.2)' : 'none',
-            border: 'none',
-            color: state.captionMode !== 'off' ? 'white' : 'rgba(255,255,255,0.5)',
-            cursor: 'pointer',
-            padding: '8px',
-            fontSize: '12px',
-            display: 'flex',
-            alignItems: 'center',
-            gap: '4px',
-            borderRadius: '4px',
-          }}
-          title={
-            state.captionMode === 'off'
-              ? 'Captions: Off (click for Standard)'
-              : state.captionMode === 'standard'
-                ? 'Captions: Standard (click for Social)'
-                : 'Captions: Social (click to turn off)'
-          }
-          aria-label="Cycle caption style"
-        >
-          <svg viewBox="0 0 24 24" fill="currentColor" width="18" height="18">
-            <path d="M19 4H5a2 2 0 00-2 2v12a2 2 0 002 2h14a2 2 0 002-2V6a2 2 0 00-2-2zm-8 7H9.5v-.5h-2v3h2V13H11v1a1 1 0 01-1 1H7a1 1 0 01-1-1v-4a1 1 0 011-1h3a1 1 0 011 1v1zm7 0h-1.5v-.5h-2v3h2V13H18v1a1 1 0 01-1 1h-3a1 1 0 01-1-1v-4a1 1 0 011-1h3a1 1 0 011 1v1z" />
-          </svg>
-          {state.captionMode !== 'off' && (
-            <span style={{ fontSize: '10px', textTransform: 'uppercase', letterSpacing: '0.5px' }}>
-              {state.captionMode === 'standard' ? 'CC' : 'SM'}
-            </span>
-          )}
-        </button>
-      )}
-
-      {/* Fullscreen toggle button */}
-      {actions.toggleFullscreen && (
-        <button
-          onClick={actions.toggleFullscreen}
-          style={{
-            background: state.isFullscreen ? 'rgba(255,255,255,0.2)' : 'none',
-            border: 'none',
-            color: state.isFullscreen ? 'white' : 'rgba(255,255,255,0.5)',
-            cursor: 'pointer',
-            padding: '8px',
-            display: 'flex',
-            alignItems: 'center',
-            borderRadius: '4px',
-          }}
-          title={state.isFullscreen ? 'Exit fullscreen (F)' : 'Fullscreen (F)'}
-          aria-label={state.isFullscreen ? 'Exit fullscreen' : 'Enter fullscreen'}
-        >
-          {state.isFullscreen ? (
-            <svg viewBox="0 0 24 24" fill="currentColor" width="18" height="18">
-              <path d="M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z" />
-            </svg>
-          ) : (
-            <svg viewBox="0 0 24 24" fill="currentColor" width="18" height="18">
-              <path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z" />
-            </svg>
-          )}
-        </button>
-      )}
-    </div>
-  );
-}