@bendyline/squisq-react 2.0.1 → 2.2.0

package/src/DocPlayerWithSidebar.tsx

@@ -1,155 +0,0 @@
-/**
- * DocPlayerWithSidebar Component
- *
- * Wrapper that composes DocPlayer + DocControlsSidebar in a horizontal
- * flex layout. The video renders on the left with only a scrubber at the
- * bottom, and playback controls render in a vertical sidebar on the right.
- *
- * This layout eliminates black bars for portrait (9:16) video in portrait
- * viewports by placing controls in the space that would otherwise be unused.
- *
- * Uses refs + forceUpdate pattern to avoid infinite render loops between
- * the DocPlayer's callbacks and this component's state. The DocPlayer
- * fires onPlaybackStateChange frequently (every currentTime tick), so we
- * store state in a ref and only trigger re-renders at controlled intervals.
- *
- * Related Files:
- * - DocPlayer.tsx -- Core player (renders with showControls=false, showScrubber=true)
- * - DocControlsSidebar.tsx -- Vertical sidebar controls
- */
-
-import { useRef, useState, useCallback, useEffect } from 'react';
-import type { Doc } from '@bendyline/squisq/schemas';
-import type { ViewportConfig, Theme } from '@bendyline/squisq/schemas';
-import type { AudioController } from './hooks/AudioController';
-import { DocPlayer } from './DocPlayer';
-import { DocControlsSidebar } from './DocControlsSidebar';
-import type { PlaybackState, PlaybackActions } from './types';
-
-interface DocPlayerWithSidebarProps {
-  /** The Doc to play */
-  doc: Doc;
-  /** Base path for resolving media URLs (default: `'.'`) */
-  basePath?: string;
-  autoPlay?: boolean;
-  onEnded?: () => void;
-  onTimeUpdate?: (time: number) => void;
-  /** Optional audio controller (if not provided, uses default HTML5 audio) */
-  audioController?: AudioController;
-  /** Whether to render slide transitions and per-layer animations (default: true). */
-  animationsEnabled?: boolean;
-  muted?: boolean;
-  captionsEnabled?: boolean;
-  isFullscreen?: boolean;
-  onFullscreenToggle?: () => void;
-  /** Force a specific viewport preset, bypassing window-based orientation detection. */
-  forceViewport?: ViewportConfig;
-  /** Called when playing state changes */
-  onPlayingChange?: (isPlaying: boolean) => void;
-  /**
-   * Theme for rendering. Forwarded to the inner DocPlayer so the sidebar
-   * (portrait) layout matches the default (landscape) layout — without it the
-   * inner player falls back to DEFAULT_THEME, whose dark text is unreadable
-   * over a hero cover image.
-   */
-  theme?: Theme;
-}
-
-const DEFAULT_STATE: PlaybackState = {
-  isPlaying: false,
-  currentTime: 0,
-  totalDuration: 0,
-  currentBlockIndex: 0,
-  totalBlocks: 0,
-  docProgress: 0,
-  hasCaptions: false,
-  captionsEnabled: false,
-  captionMode: 'off',
-  currentSegmentIndex: 0,
-  currentSegmentName: null,
-  currentBlock: null,
-};
-
-export function DocPlayerWithSidebar({
-  doc,
-  basePath,
-  autoPlay = false,
-  onEnded,
-  onTimeUpdate,
-  audioController,
-  animationsEnabled = true,
-  muted,
-  captionsEnabled,
-  isFullscreen,
-  onFullscreenToggle,
-  forceViewport,
-  onPlayingChange,
-  theme,
-}: DocPlayerWithSidebarProps) {
-  // Store playback state in a ref to avoid triggering re-renders from DocPlayer callbacks
-  const stateRef = useRef<PlaybackState>(DEFAULT_STATE);
-  const actionsRef = useRef<PlaybackActions | null>(null);
-  const wasPlayingRef = useRef(false);
-
-  // Use a counter to force sidebar re-renders at controlled intervals
-  const [, setTick] = useState(0);
-
-  // Update ref without triggering re-render
-  const handleStateChange = useCallback(
-    (state: PlaybackState) => {
-      stateRef.current = state;
-      if (onPlayingChange && state.isPlaying !== wasPlayingRef.current) {
-        wasPlayingRef.current = state.isPlaying;
-        onPlayingChange(state.isPlaying);
-      }
-    },
-    [onPlayingChange],
-  );
-
-  const handleControlsReady = useCallback(
-    (controls: PlaybackActions & { play: () => void; pause: () => void }) => {
-      const isFirst = !actionsRef.current;
-      actionsRef.current = controls;
-      // Force one re-render on first call to show the sidebar
-      if (isFirst) setTick((t) => t + 1);
-    },
-    [],
-  );
-
-  // Periodically sync the ref to trigger sidebar UI updates
-  useEffect(() => {
-    const interval = setInterval(() => {
-      setTick((t) => t + 1);
-    }, 250); // 4 updates per second is smooth enough for time/progress display
-    return () => clearInterval(interval);
-  }, []);
-
-  return (
-    <div className="doc-player-sidebar-layout">
-      <div className="doc-player-sidebar-layout__video">
-        <DocPlayer
-          doc={doc}
-          theme={theme}
-          basePath={basePath}
-          autoPlay={autoPlay}
-          onEnded={onEnded}
-          onTimeUpdate={onTimeUpdate}
-          audioController={audioController}
-          animationsEnabled={animationsEnabled}
-          muted={muted}
-          captionsEnabled={captionsEnabled}
-          showControls={isFullscreen}
-          showScrubber={!isFullscreen}
-          onPlaybackStateChange={handleStateChange}
-          onControlsReady={handleControlsReady}
-          isFullscreen={isFullscreen}
-          onFullscreenToggle={onFullscreenToggle}
-          forceViewport={forceViewport}
-        />
-      </div>
-      {actionsRef.current && (
-        <DocControlsSidebar state={stateRef.current} actions={actionsRef.current} />
-      )}
-    </div>
-  );
-}

package/src/DocProgressBar.tsx

@@ -1,257 +0,0 @@
-/**
- * DocProgressBar Component
- *
- * Interactive progress/scrubber bar for doc playback. Shows a track with
- * progress fill, block markers as clickable dots, hover tooltip with time
- * and block title, and a hover line indicator.
- *
- * Extracted from DocPlayer to enable reuse across different control layouts
- * (overlay, sidebar, bottom). When used in sidebar/bottom layouts, this
- * component renders at the bottom of the video while other controls are
- * externalized.
- *
- * Related Files:
- * - DocPlayer.tsx -- Parent component
- * - DocControlsOverlay.tsx -- Uses this within the overlay
- * - types.ts -- Shared type definitions
- */
-
-import { useRef, useState, useCallback } from 'react';
-import type { PlaybackState, PlaybackActions, BlockMarker } from './types';
-import { formatTime } from './types';
-import type { Block } from '@bendyline/squisq/schemas';
-
-interface DocProgressBarProps {
-  state: PlaybackState;
-  actions: PlaybackActions;
-  blockMarkers: BlockMarker[];
-  /** All expanded blocks for hover lookup */
-  expandedBlocks: Block[];
-  /** Optional: get block title for hover tooltip */
-  getBlockTitle?: (block: Block) => string;
-}
-
-export function DocProgressBar({
-  state,
-  actions,
-  blockMarkers,
-  expandedBlocks,
-  getBlockTitle,
-}: DocProgressBarProps) {
-  const progressBarRef = useRef<HTMLDivElement>(null);
-  const [hoverPosition, setHoverPosition] = useState<number | null>(null);
-
-  // Fill position tracks the same timeline as the clock readout and the block
-  // marker dots — elapsed playback time over the audio `totalDuration`. (We
-  // deliberately don't use `state.docProgress`, which is keyed to the doc's
-  // estimated `script.duration`; when that diverges from the actual playback
-  // length — e.g. the editor preview's reading-time estimate — the fill would
-  // desync from the clock and the dots.)
-  const playProgress =
-    state.totalDuration > 0 ? Math.max(0, Math.min(1, state.currentTime / state.totalDuration)) : 0;
-
-  const handleProgressHover = useCallback((e: React.MouseEvent) => {
-    const bar = progressBarRef.current;
-    if (!bar) return;
-    const rect = bar.getBoundingClientRect();
-    const x = e.clientX - rect.left;
-    const progress = Math.max(0, Math.min(1, x / rect.width));
-    setHoverPosition(progress);
-  }, []);
-
-  const handleProgressLeave = useCallback(() => {
-    setHoverPosition(null);
-  }, []);
-
-  const handleProgressKeyDown = useCallback(
-    (e: React.KeyboardEvent<HTMLDivElement>) => {
-      let next: number | null = null;
-      switch (e.key) {
-        case 'ArrowLeft':
-        case 'ArrowDown':
-          next = state.currentTime - 5;
-          break;
-        case 'ArrowRight':
-        case 'ArrowUp':
-          next = state.currentTime + 5;
-          break;
-        case 'Home':
-          next = 0;
-          break;
-        case 'End':
-          next = state.totalDuration;
-          break;
-      }
-      if (next == null) return;
-      e.preventDefault();
-      actions.seekTo(Math.max(0, Math.min(state.totalDuration, next)));
-    },
-    [actions, state.currentTime, state.totalDuration],
-  );
-
-  const getBlockAtTimeLocal = useCallback(
-    (time: number): { block: Block; index: number } | null => {
-      for (let i = expandedBlocks.length - 1; i >= 0; i--) {
-        const blk = expandedBlocks[i];
-        if (time >= blk.startTime) {
-          return { block: blk, index: i };
-        }
-      }
-      return expandedBlocks.length > 0 ? { block: expandedBlocks[0], index: 0 } : null;
-    },
-    [expandedBlocks],
-  );
-
-  return (
-    <div
-      ref={progressBarRef}
-      role="group"
-      aria-label="Playback timeline"
-      style={{
-        flex: 1,
-        height: '24px',
-        cursor: 'pointer',
-        position: 'relative',
-        display: 'flex',
-        alignItems: 'center',
-      }}
-      onClick={(e) => {
-        const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
-        const x = e.clientX - rect.left;
-        const progress = x / rect.width;
-        actions.seekTo(progress * state.totalDuration);
-      }}
-      onMouseMove={handleProgressHover}
-      onMouseLeave={handleProgressLeave}
-    >
-      {/* Track background */}
-      <div
-        role="slider"
-        tabIndex={0}
-        aria-label="Playback position"
-        aria-valuemin={0}
-        aria-valuemax={state.totalDuration}
-        aria-valuenow={Math.max(0, Math.min(state.totalDuration, state.currentTime))}
-        aria-valuetext={`${formatTime(state.currentTime)} of ${formatTime(state.totalDuration)}`}
-        onKeyDown={handleProgressKeyDown}
-        style={{
-          position: 'absolute',
-          left: 0,
-          right: 0,
-          height: '6px',
-          background: 'rgba(255,255,255,0.2)',
-          borderRadius: '3px',
-        }}
-      />
-
-      {/* Progress fill.
-          No CSS `width` transition: the fill is driven by frequent JS updates
-          (the synthetic fallback timer runs ~60fps; real audio fires
-          `timeupdate` several times/sec), so it's already smooth. A CSS
-          transition here actively breaks playback — after a discontinuous
-          backward seek, the per-frame inline-width updates on resume keep
-          interrupting the in-flight transition before it advances, so the
-          *rendered* width latches at the seek position even though the inline
-          style (and the clock) keep climbing. The result is a frozen-looking
-          bar while time advances. Update width instantly instead. */}
-      <div
-        data-testid="doc-progress-fill"
-        style={{
-          position: 'absolute',
-          left: 0,
-          width: `${playProgress * 100}%`,
-          height: '6px',
-          background: '#5b9bd5',
-          borderRadius: '3px',
-        }}
-      />
-
-      {/* Block markers (dots) */}
-      {blockMarkers.map((marker, i) => (
-        <button
-          type="button"
-          key={`${marker.block.id}-${i}`}
-          style={{
-            position: 'absolute',
-            left: `${marker.position}%`,
-            transform: 'translateX(-50%)',
-            width: '10px',
-            height: '10px',
-            borderRadius: '50%',
-            background:
-              marker.index === state.currentBlockIndex ? '#ffffff' : 'rgba(255,255,255,0.5)',
-            border: '2px solid #5b9bd5',
-            padding: 0,
-            cursor: 'pointer',
-            zIndex: 2,
-            transition: 'transform 0.15s, background 0.15s',
-          }}
-          title={marker.title}
-          aria-label={`Seek to ${marker.title}`}
-          onClick={(e) => {
-            e.stopPropagation();
-            actions.seekTo(marker.block.startTime);
-          }}
-          onMouseEnter={(e) => {
-            (e.currentTarget as HTMLElement).style.transform = 'translateX(-50%) scale(1.3)';
-          }}
-          onMouseLeave={(e) => {
-            (e.currentTarget as HTMLElement).style.transform = 'translateX(-50%)';
-          }}
-        />
-      ))}
-
-      {/* Hover tooltip */}
-      {hoverPosition !== null && (
-        <div
-          style={{
-            position: 'absolute',
-            left: `${hoverPosition * 100}%`,
-            bottom: '100%',
-            transform: 'translateX(-50%)',
-            marginBottom: '8px',
-            padding: '6px 10px',
-            background: 'rgba(0,0,0,0.9)',
-            borderRadius: '4px',
-            whiteSpace: 'nowrap',
-            pointerEvents: 'none',
-            zIndex: 10,
-          }}
-        >
-          <div style={{ color: 'white', fontSize: '12px', fontFamily: 'monospace' }}>
-            {formatTime(hoverPosition * state.totalDuration)}
-          </div>
-          {(() => {
-            const hoverTime = hoverPosition * state.totalDuration;
-            const slideInfo = getBlockAtTimeLocal(hoverTime);
-            if (slideInfo && getBlockTitle) {
-              return (
-                <div style={{ color: 'rgba(255,255,255,0.7)', fontSize: '11px', marginTop: '2px' }}>
-                  {getBlockTitle(slideInfo.block)}
-                </div>
-              );
-            }
-            return null;
-          })()}
-        </div>
-      )}
-
-      {/* Hover line indicator */}
-      {hoverPosition !== null && (
-        <div
-          style={{
-            position: 'absolute',
-            left: `${hoverPosition * 100}%`,
-            top: '50%',
-            transform: 'translate(-50%, -50%)',
-            width: '2px',
-            height: '16px',
-            background: 'rgba(255,255,255,0.6)',
-            pointerEvents: 'none',
-            zIndex: 1,
-          }}
-        />
-      )}
-    </div>
-  );
-}

package/src/InlineAudioPlayer.tsx

@@ -1,46 +0,0 @@
-/**
- * InlineAudioPlayer
- *
- * Small inline HTML5 audio player for `<audio>` tags embedded directly in
- * a markdown document — e.g. a narration recording the user wants to
- * audition in the editor. Resolves the `src` through `MediaContext` so a
- * container-backed `audio/foo.webm` path returns a playable blob URL.
- *
- * Deliberately thin: native browser controls, no autoplay. The
- * MarkdownRenderer swaps this in for raw `<audio>` htmlElements; the
- * editor-react Tiptap audio node reuses it for its NodeView.
- */
-import { useMediaUrl } from './hooks/MediaContext.js';
-
-export interface InlineAudioPlayerProps {
-  /** Source path — resolved through MediaContext when relative. */
-  src: string;
-  /** Base path used when no MediaProvider is in context. */
-  basePath?: string;
-  /** Whether to show native controls. Defaults to true. */
-  controls?: boolean;
-  /** `preload` attribute passthrough. Defaults to `'metadata'`. */
-  preload?: 'none' | 'metadata' | 'auto';
-  /** Extra className on the wrapper. */
-  className?: string;
-}
-
-export function InlineAudioPlayer({
-  src,
-  basePath = '',
-  controls = true,
-  preload = 'metadata',
-  className,
-}: InlineAudioPlayerProps) {
-  const resolvedSrc = useMediaUrl(src, basePath);
-
-  if (!resolvedSrc) return null;
-
-  return (
-    <span className={`squisq-inline-audio-player ${className ?? ''}`.trim()}>
-      <audio src={resolvedSrc} controls={controls} preload={preload} />
-    </span>
-  );
-}
-
-export default InlineAudioPlayer;

package/src/InlineVideoPlayer.tsx

@@ -1,70 +0,0 @@
-/**
- * InlineVideoPlayer
- *
- * Small inline HTML5 video player for `<video>` tags embedded directly in
- * a markdown document — e.g. a recording dropped into the doc by the
- * recorder. Resolves the `src` through `MediaContext` (same path
- * `VideoLayer` uses) so a container-backed `audio/foo.webm` or
- * `video/foo.mp4` resolves to a blob URL instead of 404-ing on the
- * filesystem path.
- *
- * Deliberately thin: native browser controls, intrinsic aspect ratio,
- * no autoplay. The MarkdownRenderer swaps this in for a raw `<video>`
- * htmlElement; the editor-react Tiptap video node uses the same
- * component for its NodeView.
- */
-import { useMediaUrl } from './hooks/MediaContext.js';
-
-export interface InlineVideoPlayerProps {
-  /** Source path — resolved through MediaContext when relative. */
-  src: string;
-  /** Base path used when no MediaProvider is in context. */
-  basePath?: string;
-  /** Optional explicit width (pixels or CSS length). */
-  width?: number | string;
-  /** Optional explicit height (pixels or CSS length). */
-  height?: number | string;
-  /** Optional poster image src — also resolved through MediaContext. */
-  poster?: string;
-  /** Whether to show native controls. Defaults to true. */
-  controls?: boolean;
-  /** `preload` attribute passthrough. Defaults to `'metadata'`. */
-  preload?: 'none' | 'metadata' | 'auto';
-  /** Extra className on the wrapper. */
-  className?: string;
-}
-
-export function InlineVideoPlayer({
-  src,
-  basePath = '',
-  width,
-  height,
-  poster,
-  controls = true,
-  preload = 'metadata',
-  className,
-}: InlineVideoPlayerProps) {
-  const resolvedSrc = useMediaUrl(src, basePath);
-  // Always call the hook (Rules of Hooks); only use the result if a poster
-  // was actually requested. Empty input → fallback path which we discard.
-  const resolvedPoster = useMediaUrl(poster ?? '', basePath);
-  const posterUrl = poster ? resolvedPoster : undefined;
-
-  if (!resolvedSrc) return null;
-
-  return (
-    <span className={`squisq-inline-video-player ${className ?? ''}`.trim()}>
-      <video
-        src={resolvedSrc}
-        poster={posterUrl}
-        controls={controls}
-        preload={preload}
-        width={width}
-        height={height}
-        playsInline
-      />
-    </span>
-  );
-}
-
-export default InlineVideoPlayer;