@bendyline/squisq-react 1.4.1 → 2.0.0

package/src/MediaClipLayer.tsx

@@ -27,6 +27,8 @@ export interface MediaClipLayerProps {
   isPlaying: boolean;
   basePath: string;
   renderMode?: boolean;
+  /** Silence every scheduled clip during live playback. */
+  muted?: boolean;
 }
 
 export function MediaClipLayer({
@@ -35,6 +37,7 @@ export function MediaClipLayer({
   isPlaying,
   basePath,
   renderMode = false,
+  muted = false,
 }: MediaClipLayerProps) {
   const { renderClips, activeIds } = useMediaSchedule(schedule, currentTime);
   if (renderClips.length === 0) return null;
@@ -49,6 +52,7 @@ export function MediaClipLayer({
           isPlaying={isPlaying}
           basePath={basePath}
           renderMode={renderMode}
+          muted={muted}
         />
       ))}
     </div>
@@ -62,6 +66,7 @@ interface MediaClipElementProps {
   isPlaying: boolean;
   basePath: string;
   renderMode: boolean;
+  muted: boolean;
 }
 
 function MediaClipElement({
@@ -71,6 +76,7 @@ function MediaClipElement({
   isPlaying,
   basePath,
   renderMode,
+  muted,
 }: MediaClipElementProps) {
   const ref = useRef<HTMLMediaElement | null>(null);
   const src = useMediaUrl(clip.src, basePath);
@@ -96,7 +102,7 @@ function MediaClipElement({
     } else {
       el.pause();
     }
-  }, [active, currentTime, isPlaying, renderMode, clip.sourceIn, clip.absoluteStart]);
+  }, [active, currentTime, isPlaying, renderMode, clip.sourceIn, clip.absoluteStart, src]);
 
   const isVideo = clip.kind === 'video';
   const common = {
@@ -130,6 +136,10 @@ function MediaClipElement({
   }
 
   return (
-    <audio {...common} muted={renderMode} style={{ position: 'absolute', width: 0, height: 0 }} />
+    <audio
+      {...common}
+      muted={renderMode || muted}
+      style={{ position: 'absolute', width: 0, height: 0 }}
+    />
   );
 }

package/src/__tests__/BlockRenderer.test.tsx

@@ -1,15 +1,8 @@
 import { describe, it, expect } from 'vitest';
 import { render } from '@testing-library/react';
-import { BlockRenderer, VIEWPORT } from '../BlockRenderer';
+import { BlockRenderer } from '../BlockRenderer';
 import type { Block } from '@bendyline/squisq/schemas';
 
-describe('VIEWPORT constant', () => {
-  it('has correct 1080p dimensions', () => {
-    expect(VIEWPORT.width).toBe(1920);
-    expect(VIEWPORT.height).toBe(1080);
-  });
-});
-
 describe('BlockRenderer', () => {
   const minimalBlock: Block = {
     id: 'test-block',
@@ -102,4 +95,82 @@ describe('BlockRenderer', () => {
     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}
+      />,
+    );
+
+    expect(container.querySelector('svg')?.className.baseVal).not.toContain('transition-');
+    expect(container.querySelector('[class*="anim-"]')).toBeNull();
+    expect(animatedBlock.transition).toEqual({ type: 'fade', duration: 0.5 });
+    expect(animatedBlock.layers?.map((layer) => layer.animation)).toEqual(originalAnimations);
+  });
 });

package/src/__tests__/DocControlsSlideshow.test.tsx

@@ -1,8 +1,14 @@
-import { describe, it, expect } from 'vitest';
+import { describe, it, expect, vi } from 'vitest';
 import { render, fireEvent } from '@testing-library/react';
 import { DocControlsSlideshow } from '../DocControlsSlideshow';
 import type { PlaybackState, SlideNavActions } from '../types';
 
+const slides = [
+  { id: 'intro', label: '1', summary: 'Introduction' },
+  { id: 'results', label: '2', summary: 'Key results' },
+  { id: 'next', label: '3', summary: 'What comes next' },
+];
+
 function makeState(overrides: Partial<PlaybackState> = {}): PlaybackState {
   return {
     isPlaying: false,
@@ -49,6 +55,93 @@ describe('DocControlsSlideshow', () => {
     expect(getByTestId('slide-counter').textContent).toBe('5 / 12');
   });
 
+  it('opens an upward slide picker with block summaries', () => {
+    const { getByTestId, getByRole } = render(
+      <DocControlsSlideshow
+        state={makeState({ currentBlockIndex: 1, totalBlocks: slides.length })}
+        slideNav={makeSlideNav()}
+        slides={slides}
+      />,
+    );
+
+    fireEvent.click(getByTestId('slide-counter'));
+
+    const picker = getByRole('menu', { name: 'Choose a slide' });
+    expect(picker.style.bottom).toBe('calc(100% + 8px)');
+    expect(getByTestId('slide-picker-item-0').textContent).toContain('1Introduction');
+    expect(getByTestId('slide-picker-item-1').textContent).toContain('2Key results');
+    expect(getByTestId('slide-picker-item-1').getAttribute('aria-current')).toBe('true');
+  });
+
+  it('uses the available player height above the toolbar', () => {
+    const { getByTestId } = render(
+      <div className="doc-player">
+        <DocControlsSlideshow
+          state={makeState({ currentBlockIndex: 1, totalBlocks: slides.length })}
+          slideNav={makeSlideNav()}
+          slides={slides}
+        />
+      </div>,
+    );
+    const controls = getByTestId('slideshow-controls');
+    const player = controls.parentElement as HTMLElement;
+    const rect = (top: number, height: number) =>
+      ({
+        x: 0,
+        y: top,
+        top,
+        right: 640,
+        bottom: top + height,
+        left: 0,
+        width: 640,
+        height,
+        toJSON: () => ({}),
+      }) as DOMRect;
+    const playerBounds = vi.spyOn(player, 'getBoundingClientRect').mockReturnValue(rect(0, 480));
+    const controlsBounds = vi
+      .spyOn(controls, 'getBoundingClientRect')
+      .mockReturnValue(rect(420, 40));
+
+    fireEvent.click(getByTestId('slide-counter'));
+
+    expect(getByTestId('slide-picker').style.maxHeight).toBe('396px');
+    playerBounds.mockRestore();
+    controlsBounds.mockRestore();
+  });
+
+  it('navigates directly to a selected slide and closes the picker', () => {
+    let selectedIndex = -1;
+    const { getByTestId, queryByTestId } = render(
+      <DocControlsSlideshow
+        state={makeState({ currentBlockIndex: 0, totalBlocks: slides.length })}
+        slideNav={makeSlideNav({ goToSlide: (index) => (selectedIndex = index) })}
+        slides={slides}
+      />,
+    );
+
+    fireEvent.click(getByTestId('slide-counter'));
+    fireEvent.click(getByTestId('slide-picker-item-2'));
+
+    expect(selectedIndex).toBe(2);
+    expect(queryByTestId('slide-picker')).toBeNull();
+  });
+
+  it('closes the slide picker with Escape', () => {
+    const { getByTestId, queryByTestId } = render(
+      <DocControlsSlideshow
+        state={makeState({ currentBlockIndex: 0, totalBlocks: slides.length })}
+        slideNav={makeSlideNav()}
+        slides={slides}
+      />,
+    );
+
+    fireEvent.click(getByTestId('slide-counter'));
+    fireEvent.keyDown(document, { key: 'Escape' });
+
+    expect(queryByTestId('slide-picker')).toBeNull();
+    expect(document.activeElement).toBe(getByTestId('slide-counter'));
+  });
+
   it('disables prev button on first slide', () => {
     const { getByTestId } = render(
       <DocControlsSlideshow