Stirling-PDF/frontend/src/core/components/viewer/SpreadAPIBridge.tsx

import { useEffect, useRef } from 'react';
import { useSpread, SpreadMode } from '@embedpdf/plugin-spread/react';
import { useViewer } from '@app/contexts/ViewerContext';
import { useActiveDocumentId } from '@app/components/viewer/useActiveDocumentId';
import { useDocumentReady } from '@app/components/viewer/hooks/useDocumentReady';

/**
 * SpreadAPIBridge - Updated for embedPDF v2.6.0
 * Connects the PDF spread mode (single/dual page) plugin to the shared ViewerContext.
 */
export function SpreadAPIBridge() {
  const activeDocumentId = useActiveDocumentId();
  const documentReady = useDocumentReady();

  // Don't render the inner component until we have a valid document ID and document is ready
  if (!activeDocumentId || !documentReady) {
    return null;
  }

  return <SpreadAPIBridgeInner documentId={activeDocumentId} />;
}

function SpreadAPIBridgeInner({ documentId }: { documentId: string }) {
  const { provides: spread, spreadMode } = useSpread(documentId);
  const { registerBridge, triggerImmediateSpreadUpdate } = useViewer();

  // Keep spread ref updated to avoid re-running effect when object reference changes
  const spreadRef = useRef(spread);
  useEffect(() => {
    spreadRef.current = spread;
  }, [spread]);

  useEffect(() => {
    const currentSpread = spreadRef.current;
    if (!currentSpread || spreadMode === undefined) {
      return;
    }

    const newState = {
      spreadMode,
      isDualPage: spreadMode !== SpreadMode.None,
    };

    registerBridge('spread', {
      state: newState,
      api: {
        setSpreadMode: (mode: SpreadMode) => {
          currentSpread.setSpreadMode(mode);
        },
        getSpreadMode: () => currentSpread.getSpreadMode(),
        toggleSpreadMode: () => {
          const current = currentSpread.getSpreadMode();
          const nextMode = current === SpreadMode.None ? SpreadMode.Odd : SpreadMode.None;
          currentSpread.setSpreadMode(nextMode);
        },
        SpreadMode,
      },
    });

    triggerImmediateSpreadUpdate(spreadMode);

    return () => {
      registerBridge('spread', null);
    };
  }, [spreadMode, registerBridge, triggerImmediateSpreadUpdate]);

  return null;
}