@bendyline/squisq-react 1.4.1 → 2.0.0

package/src/__tests__/DocPlayer.test.tsx

@@ -1,7 +1,9 @@
-import { describe, it, expect } from 'vitest';
-import { render } from '@testing-library/react';
+import { afterAll, beforeAll, describe, expect, it, vi } from 'vitest';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import { DocPlayer } from '../DocPlayer';
 import type { Doc } from '@bendyline/squisq/schemas';
+import type { AudioController } from '../hooks/AudioController';
+import type { SquisqRenderAPI } from '../types';
 
 function minimalDoc(): Doc {
   return {
@@ -12,7 +14,100 @@ function minimalDoc(): Doc {
   };
 }
 
+function docWithCover(): Doc {
+  return {
+    ...minimalDoc(),
+    startBlock: {
+      title: 'Managed Cover',
+      subtitle: 'Generated by Squisq',
+    },
+  };
+}
+
+function docWithTransition(): Doc {
+  return {
+    articleId: 'transition-doc',
+    duration: 10,
+    blocks: [
+      { id: 'first', startTime: 0, duration: 5, audioSegment: 0, layers: [] },
+      {
+        id: 'second',
+        startTime: 5,
+        duration: 5,
+        audioSegment: 0,
+        transition: { type: 'fade', duration: 1 },
+        layers: [
+          {
+            type: 'text',
+            id: 'animated-title',
+            content: { text: 'Second slide', style: { fontSize: 48, color: '#fff' } },
+            position: { x: 100, y: 100 },
+            animation: { type: 'fadeIn', duration: 1 },
+          },
+        ],
+      },
+    ],
+    audio: { segments: [] },
+  };
+}
+
+function docWithThreeSlides(): Doc {
+  return {
+    articleId: 'three-slide-transition-doc',
+    duration: 15,
+    blocks: [
+      { id: 'first', startTime: 0, duration: 5, audioSegment: 0, layers: [] },
+      { id: 'second', startTime: 5, duration: 5, audioSegment: 0, layers: [] },
+      {
+        id: 'third',
+        startTime: 10,
+        duration: 5,
+        audioSegment: 0,
+        transition: { type: 'fade', duration: 1 },
+        layers: [],
+      },
+    ],
+    audio: { segments: [] },
+  };
+}
+
+function controller(overrides: Partial<AudioController> = {}): AudioController {
+  return {
+    currentTime: 0,
+    isPlaying: false,
+    currentSegment: 0,
+    totalDuration: 5,
+    isEnded: false,
+    isReady: true,
+    isAvailable: true,
+    play: vi.fn(async () => {}),
+    pause: vi.fn(async () => {}),
+    toggle: vi.fn(async () => {}),
+    seekTo: vi.fn(async () => {}),
+    skipToSegment: vi.fn(async () => {}),
+    restart: vi.fn(async () => {}),
+    ...overrides,
+  };
+}
+
+function pointerEvent(type: string, clientX: number): MouseEvent {
+  const event = new MouseEvent(type, { bubbles: true, cancelable: true, button: 0, clientX });
+  Object.defineProperties(event, {
+    pointerId: { value: 1 },
+    pointerType: { value: 'touch' },
+  });
+  return event;
+}
+
 describe('DocPlayer smoke test', () => {
+  beforeAll(() => {
+    vi.spyOn(window.HTMLMediaElement.prototype, 'pause').mockImplementation(() => {});
+  });
+
+  afterAll(() => {
+    vi.restoreAllMocks();
+  });
+
   it('renders without crashing in video mode (default)', () => {
     const { container } = render(<DocPlayer doc={minimalDoc()} basePath="/test" />);
     expect(container.firstChild).toBeTruthy();
@@ -25,6 +120,327 @@ describe('DocPlayer smoke test', () => {
     expect(container.firstChild).toBeTruthy();
   });
 
+  it('lists block summaries and jumps to a selected slideshow block', () => {
+    const audioController = controller({ totalDuration: 15 });
+    render(
+      <DocPlayer
+        doc={docWithThreeSlides()}
+        audioController={audioController}
+        displayMode="slideshow"
+      />,
+    );
+
+    fireEvent.click(screen.getByTestId('slide-counter'));
+    expect(screen.getByTestId('slide-picker-item-0').textContent).toContain('1First');
+    expect(screen.getByTestId('slide-picker-item-2').textContent).toContain('3Third');
+
+    fireEvent.click(screen.getByTestId('slide-picker-item-2'));
+    expect(audioController.seekTo).toHaveBeenCalledWith(10);
+    expect(screen.queryByTestId('slide-picker')).toBeNull();
+  });
+
+  it('uses global left and right arrows to change slides without focusing the player', () => {
+    const audioController = controller({ currentTime: 5, totalDuration: 15 });
+    render(
+      <DocPlayer
+        doc={docWithThreeSlides()}
+        audioController={audioController}
+        displayMode="slideshow"
+        globalKeyboardShortcuts
+      />,
+    );
+
+    fireEvent.keyDown(document, { key: 'ArrowLeft' });
+    fireEvent.keyDown(document, { key: 'ArrowRight' });
+
+    expect(audioController.seekTo).toHaveBeenNthCalledWith(1, 0);
+    expect(audioController.seekTo).toHaveBeenNthCalledWith(2, 10);
+  });
+
+  it('globally opens the slide picker with ArrowUp instead of changing slides', () => {
+    const audioController = controller({ currentTime: 5, totalDuration: 15 });
+    render(
+      <DocPlayer
+        doc={docWithThreeSlides()}
+        audioController={audioController}
+        displayMode="slideshow"
+        globalKeyboardShortcuts
+      />,
+    );
+
+    fireEvent.keyDown(document, { key: 'ArrowUp' });
+
+    expect(screen.getByTestId('slide-picker')).toBeTruthy();
+    expect(audioController.seekTo).not.toHaveBeenCalled();
+  });
+
+  it('globally seeks video with left and right arrows', () => {
+    const audioController = controller({ currentTime: 20, totalDuration: 60 });
+    render(
+      <DocPlayer
+        doc={docWithThreeSlides()}
+        audioController={audioController}
+        globalKeyboardShortcuts
+      />,
+    );
+
+    fireEvent.keyDown(document, { key: 'ArrowRight' });
+    fireEvent.keyDown(document, { key: 'ArrowLeft' });
+
+    expect(audioController.seekTo).toHaveBeenNthCalledWith(1, 30);
+    expect(audioController.seekTo).toHaveBeenNthCalledWith(2, 10);
+  });
+
+  it('handles a focused-player arrow only once when global shortcuts are enabled', () => {
+    const audioController = controller({ currentTime: 5, totalDuration: 15 });
+    const { container } = render(
+      <DocPlayer
+        doc={docWithThreeSlides()}
+        audioController={audioController}
+        displayMode="slideshow"
+        globalKeyboardShortcuts
+      />,
+    );
+
+    fireEvent.keyDown(container.querySelector<HTMLElement>('.doc-player')!, {
+      key: 'ArrowRight',
+    });
+
+    expect(audioController.seekTo).toHaveBeenCalledTimes(1);
+    expect(audioController.seekTo).toHaveBeenCalledWith(10);
+  });
+
+  it('does not globally intercept arrows from editable fields', () => {
+    const audioController = controller({ currentTime: 20, totalDuration: 60 });
+    render(
+      <>
+        <input aria-label="Editable field" />
+        <DocPlayer
+          doc={docWithThreeSlides()}
+          audioController={audioController}
+          globalKeyboardShortcuts
+        />
+      </>,
+    );
+
+    fireEvent.keyDown(screen.getByRole('textbox', { name: 'Editable field' }), {
+      key: 'ArrowRight',
+    });
+
+    expect(audioController.seekTo).not.toHaveBeenCalled();
+  });
+
+  it('shows the managed cover as the first slideshow entry by default', async () => {
+    const { container } = render(
+      <DocPlayer doc={docWithCover()} basePath="/test" displayMode="slideshow" />,
+    );
+    await waitFor(() => expect(container.textContent).toContain('Managed Cover'));
+    expect(screen.getByTestId('slide-counter').textContent).toBe('Cover');
+  });
+
+  it('can suppress the managed cover slide', () => {
+    const { container } = render(
+      <DocPlayer
+        doc={docWithCover()}
+        basePath="/test"
+        displayMode="slideshow"
+        showCoverSlide={false}
+      />,
+    );
+    expect(container.textContent).not.toContain('Managed Cover');
+    expect(screen.getByTestId('slide-counter').textContent).toBe('1 / 1');
+  });
+
+  it('renders the managed cover without layer animation classes when animations are disabled', async () => {
+    const { container } = render(
+      <DocPlayer
+        doc={docWithCover()}
+        basePath="/test"
+        displayMode="slideshow"
+        animationsEnabled={false}
+      />,
+    );
+
+    await waitFor(() => expect(container.textContent).toContain('Managed Cover'));
+    expect(container.querySelector('[class*="anim-"]')).toBeNull();
+  });
+
+  it('uses static cuts without an outgoing slide while preserving timeline changes', () => {
+    const doc = docWithTransition();
+    const onRenderAPIReady = vi.fn();
+    const { container, rerender } = render(
+      <DocPlayer
+        doc={doc}
+        audioController={controller({ currentTime: 0, totalDuration: 10 })}
+        showControls={false}
+        renderMode
+        animationsEnabled={false}
+        onRenderAPIReady={onRenderAPIReady}
+      />,
+    );
+
+    rerender(
+      <DocPlayer
+        doc={doc}
+        audioController={controller({ currentTime: 5.1, totalDuration: 10 })}
+        showControls={false}
+        renderMode
+        animationsEnabled={false}
+        onRenderAPIReady={onRenderAPIReady}
+      />,
+    );
+
+    expect(container.querySelector('.doc-player__block--previous')).toBeNull();
+    expect(
+      container.querySelector('.doc-player__block--active [data-block-id="second"]'),
+    ).toBeTruthy();
+    expect(container.querySelector('.transition-fade-enter')).toBeNull();
+    expect(container.querySelector('[class*="anim-"]')).toBeNull();
+  });
+
+  it('keeps a swiped-to slide entrance transition without remounting the swiped-away slide', async () => {
+    const doc = docWithThreeSlides();
+    const secondSlideController = controller({ currentTime: 5, totalDuration: 15 });
+    const { container, rerender } = render(
+      <DocPlayer
+        doc={doc}
+        audioController={secondSlideController}
+        displayMode="slideshow"
+        showControls={false}
+      />,
+    );
+    const player = container.querySelector<HTMLElement>('.doc-player');
+    expect(player).not.toBeNull();
+    vi.spyOn(player!, 'getBoundingClientRect').mockReturnValue({
+      width: 1000,
+      height: 600,
+      x: 0,
+      y: 0,
+      top: 0,
+      right: 1000,
+      bottom: 600,
+      left: 0,
+      toJSON: () => ({}),
+    });
+
+    fireEvent(player!, pointerEvent('pointerdown', 800));
+    expect(player!.classList.contains('doc-player--grabbing')).toBe(true);
+    fireEvent(window, pointerEvent('pointermove', 400));
+    expect(
+      container.querySelector<HTMLElement>('.doc-player__block--active')?.style.transform,
+    ).toBe('translateX(-400px)');
+    fireEvent(window, pointerEvent('pointerup', 400));
+
+    await waitFor(() => expect(secondSlideController.seekTo).toHaveBeenCalledWith(10), {
+      timeout: 1000,
+    });
+    rerender(
+      <DocPlayer
+        doc={doc}
+        audioController={controller({ currentTime: 10, totalDuration: 15 })}
+        displayMode="slideshow"
+        showControls={false}
+      />,
+    );
+
+    expect(
+      container.querySelector(
+        '.doc-player__block--active [data-block-id="third"].transition-fade-enter',
+      ),
+    ).toBeTruthy();
+    expect(container.querySelector('.doc-player__block--previous')).toBeNull();
+  });
+
+  it('keeps outgoing slide context for ordinary slideshow button navigation', () => {
+    const doc = docWithThreeSlides();
+    const secondSlideController = controller({ currentTime: 5, totalDuration: 15 });
+    const { container, rerender } = render(
+      <DocPlayer doc={doc} audioController={secondSlideController} displayMode="slideshow" />,
+    );
+
+    fireEvent.click(screen.getByTestId('slide-next'));
+    expect(secondSlideController.seekTo).toHaveBeenCalledWith(10);
+    rerender(
+      <DocPlayer
+        doc={doc}
+        audioController={controller({ currentTime: 10, totalDuration: 15 })}
+        displayMode="slideshow"
+      />,
+    );
+
+    expect(
+      container.querySelector('.doc-player__block--previous [data-block-id="second"]'),
+    ).toBeTruthy();
+    expect(
+      container.querySelector(
+        '.doc-player__block--active [data-block-id="third"].transition-fade-enter',
+      ),
+    ).toBeTruthy();
+  });
+
+  it('advances from slideshow cover to slide 1', async () => {
+    const { container } = render(
+      <DocPlayer doc={docWithCover()} basePath="/test" displayMode="slideshow" />,
+    );
+    await waitFor(() => expect(screen.getByTestId('slide-counter').textContent).toBe('Cover'));
+    fireEvent.click(screen.getByTestId('slide-next'));
+    await waitFor(() => expect(screen.getByTestId('slide-counter').textContent).toBe('1 / 1'));
+    expect(container.textContent).not.toContain('Managed Cover');
+  });
+
+  it('accepts controlled cover visibility for a synchronized audience mirror', async () => {
+    const states: Array<{ isCoverVisible?: boolean }> = [];
+    const { container, rerender } = render(
+      <DocPlayer
+        doc={docWithCover()}
+        audioController={controller()}
+        displayMode="slideshow"
+        showControls={false}
+        coverVisible={false}
+        onPlaybackStateChange={(state) => states.push(state)}
+      />,
+    );
+
+    await waitFor(() => expect(container.textContent).not.toContain('Managed Cover'));
+    expect(states[states.length - 1]?.isCoverVisible).toBe(false);
+    expect(screen.queryByTestId('slide-counter')).toBeNull();
+
+    rerender(
+      <DocPlayer
+        doc={docWithCover()}
+        audioController={controller()}
+        displayMode="slideshow"
+        showControls={false}
+        coverVisible
+        onPlaybackStateChange={(state) => states.push(state)}
+      />,
+    );
+
+    await waitFor(() => expect(container.textContent).toContain('Managed Cover'));
+    expect(states[states.length - 1]?.isCoverVisible).toBe(true);
+  });
+
+  it('reinitializes cover state when a new document replaces the old one', async () => {
+    const { container, rerender } = render(
+      <DocPlayer doc={docWithCover()} basePath="/test" displayMode="slideshow" />,
+    );
+    fireEvent.click(screen.getByTestId('slide-next'));
+    await waitFor(() => expect(screen.getByTestId('slide-counter').textContent).toBe('1 / 1'));
+    rerender(
+      <DocPlayer
+        doc={{
+          ...docWithCover(),
+          articleId: 'replacement',
+          startBlock: { title: 'Replacement Cover' },
+        }}
+        basePath="/test"
+        displayMode="slideshow"
+      />,
+    );
+    await waitFor(() => expect(container.textContent).toContain('Replacement Cover'));
+    expect(screen.getByTestId('slide-counter').textContent).toBe('Cover');
+  });
+
   it('renders without crashing in linear mode', () => {
     const { container } = render(
       <DocPlayer doc={minimalDoc()} basePath="/test" displayMode="linear" />,
@@ -48,6 +464,144 @@ describe('DocPlayer smoke test', () => {
     expect(typeof controls!.play).toBe('function');
     expect(typeof controls!.pause).toBe('function');
   });
+
+  it('handles keyboard shortcuts only in the focused player instance', () => {
+    const first = controller();
+    const second = controller();
+    const { container } = render(
+      <>
+        <DocPlayer doc={minimalDoc()} audioController={first} showControls={false} />
+        <DocPlayer doc={minimalDoc()} audioController={second} showControls={false} />
+      </>,
+    );
+    const players = container.querySelectorAll<HTMLElement>('.doc-player');
+    players[1].focus();
+    fireEvent.keyDown(players[1], { key: ' ' });
+    expect(second.toggle).toHaveBeenCalledOnce();
+    expect(first.toggle).not.toHaveBeenCalled();
+
+    const editable = document.createElement('div');
+    editable.setAttribute('contenteditable', 'true');
+    players[1].append(editable);
+    fireEvent.keyDown(editable, { key: ' ' });
+    expect(second.toggle).toHaveBeenCalledOnce();
+  });
+
+  it('keeps render APIs scoped to their player callbacks during sibling cleanup', () => {
+    const firstEvents: Array<SquisqRenderAPI | null> = [];
+    const secondEvents: Array<SquisqRenderAPI | null> = [];
+    const one = render(
+      <DocPlayer
+        doc={minimalDoc()}
+        renderMode
+        audioController={controller()}
+        onRenderAPIReady={(api) => firstEvents.push(api)}
+      />,
+    );
+    render(
+      <DocPlayer
+        doc={minimalDoc()}
+        renderMode
+        audioController={controller()}
+        onRenderAPIReady={(api) => secondEvents.push(api)}
+      />,
+    );
+    const secondAPI = secondEvents[secondEvents.length - 1];
+    expect(firstEvents[firstEvents.length - 1]).not.toBeNull();
+    expect(secondAPI).not.toBeNull();
+
+    one.unmount();
+
+    expect(firstEvents[firstEvents.length - 1]).toBeNull();
+    expect(secondEvents[secondEvents.length - 1]).toBe(secondAPI);
+    expect(typeof secondAPI?.seekTo).toBe('function');
+    expect('seekTo' in window).toBe(false);
+    expect('getDuration' in window).toBe(false);
+    expect('squisqActivePlayerId' in window).toBe(false);
+    expect('squisqPlayers' in window).toBe(false);
+  });
+
+  it('delivers and cleans up an instance render API through the callback', () => {
+    const observed: Array<SquisqRenderAPI | null> = [];
+    const { unmount } = render(
+      <DocPlayer
+        doc={minimalDoc()}
+        renderMode
+        audioController={controller()}
+        onRenderAPIReady={(api) => observed.push(api)}
+      />,
+    );
+
+    expect(observed[observed.length - 1]?.getDuration()).toBeGreaterThan(0);
+    unmount();
+    expect(observed[observed.length - 1]).toBeNull();
+  });
+
+  it('keeps the render API identity stable while dispatching to the latest controller', async () => {
+    const firstController = controller({ currentSegment: 0 });
+    const secondController = controller({ currentSegment: 1 });
+    const observed: Array<SquisqRenderAPI | null> = [];
+    const onRenderAPIReady = (api: SquisqRenderAPI | null) => observed.push(api);
+    const { rerender } = render(
+      <DocPlayer
+        doc={minimalDoc()}
+        renderMode
+        audioController={firstController}
+        onRenderAPIReady={onRenderAPIReady}
+      />,
+    );
+    const api = observed[observed.length - 1];
+    expect(api).not.toBeNull();
+
+    rerender(
+      <DocPlayer
+        doc={minimalDoc()}
+        renderMode
+        audioController={secondController}
+        onRenderAPIReady={onRenderAPIReady}
+      />,
+    );
+
+    expect(observed[observed.length - 1]).toBe(api);
+    await api!.seekTo(3.25);
+    expect(secondController.seekTo).toHaveBeenCalledWith(3.25);
+    expect(firstController.seekTo).not.toHaveBeenCalled();
+  });
+
+  it('refreshes instance render metadata when the doc prop changes', () => {
+    const firstDoc: Doc = { ...minimalDoc(), captions: { version: 1, phrases: [] } };
+    const observed: Array<SquisqRenderAPI | null> = [];
+    const onRenderAPIReady = (next: SquisqRenderAPI | null) => {
+      observed.push(next);
+    };
+    const { container, rerender } = render(
+      <DocPlayer
+        doc={firstDoc}
+        renderMode
+        audioController={controller()}
+        onRenderAPIReady={onRenderAPIReady}
+      />,
+    );
+    expect(container.querySelector('.doc-player')).toBeTruthy();
+    const nextDoc: Doc = {
+      ...minimalDoc(),
+      captions: {
+        version: 1,
+        phrases: [{ text: 'new caption', startTime: 0, endTime: 1, audioSegment: 0 }],
+      },
+    };
+    rerender(
+      <DocPlayer
+        doc={nextDoc}
+        renderMode
+        audioController={controller()}
+        onRenderAPIReady={onRenderAPIReady}
+      />,
+    );
+    expect(observed[observed.length - 1]?.getCaptions()).toEqual([
+      { text: 'new caption', startTime: 0, endTime: 1 },
+    ]);
+  });
 });
 
 describe('DocPlayer front door (doc / markdown resolution)', () => {

package/src/__tests__/DocProgressBar.test.tsx

@@ -1,5 +1,5 @@
-import { describe, it, expect } from 'vitest';
-import { render } from '@testing-library/react';
+import { describe, it, expect, vi } from 'vitest';
+import { fireEvent, render, screen } from '@testing-library/react';
 import { DocProgressBar } from '../DocProgressBar';
 import type { PlaybackState, PlaybackActions } from '../types';
 
@@ -73,4 +73,30 @@ describe('DocProgressBar fill', () => {
     );
     expect(fillWidth(container)).toBe('100%');
   });
+
+  it('exposes keyboard seeking and accessible marker buttons', () => {
+    const seekTo = vi.fn();
+    render(
+      <DocProgressBar
+        state={makeState({ currentTime: 12, totalDuration: 23 })}
+        actions={{ ...actions, seekTo }}
+        blockMarkers={[
+          {
+            block: { id: 'b', startTime: 8, duration: 5, audioSegment: 0, layers: [] },
+            index: 0,
+            position: 35,
+            title: 'Chapter two',
+            isSectionStart: false,
+          },
+        ]}
+        expandedBlocks={[]}
+      />,
+    );
+    const slider = screen.getByRole('slider', { name: 'Playback position' });
+    expect(slider.getAttribute('aria-valuenow')).toBe('12');
+    fireEvent.keyDown(slider, { key: 'ArrowRight' });
+    expect(seekTo).toHaveBeenCalledWith(17);
+    fireEvent.click(screen.getByRole('button', { name: 'Seek to Chapter two' }));
+    expect(seekTo).toHaveBeenLastCalledWith(8);
+  });
 });