Saving & downloading

import { useEffect, useState } from 'react';
import { Viewer, DocumentGate, saveFile, useDocuments } from '@embedpdf/react/runtime';
import type { OpenInput, PdfSaveMode } from '@embedpdf/react/runtime';
import { Stage, stagePlugin } from '@embedpdf/react/stage';
import { RenderLayer, renderPlugin } from '@embedpdf/react/render';
import { cloudEngine } from '@cloudpdf/engine';

import './download.css';

const engine = cloudEngine();
const plugins = [stagePlugin(), renderPlugin()];

const ebook: OpenInput = { kind: 'share', shareToken: 'shr_WGj1goAtlNN_fQ5OswPrbJQM' };

const megabytes = (bytes: Uint8Array) => `${(bytes.byteLength / 1_000_000).toFixed(2)} MB`;

function DownloadBar() {
  const documents = useDocuments();
  const [mode, setMode] = useState<PdfSaveMode>('incremental');
  const [sizes, setSizes] = useState<Record<PdfSaveMode, string> | null>(null);

  // How big each kind of download is: the same document, written two ways.
  useEffect(() => {
    const cancel = new AbortController();
    const { signal } = cancel;
    Promise.all([
      documents.download(undefined, { signal }),
      documents.download(undefined, { mode: 'rewrite', signal }),
    ])
      .then(([incremental, rewrite]) =>
        setSizes({ incremental: megabytes(incremental), rewrite: megabytes(rewrite) }),
      )
      .catch(() => {}); // cancelled: the example went away
    return () => cancel.abort();
  }, [documents]);

  const download = async () => saveFile(await documents.download(undefined, { mode }), 'ebook.pdf');

  return (
    <div className="toolbar">
      <div className="segmented" role="group" aria-label="Kind of download">
        <button
          type="button"
          aria-pressed={mode === 'incremental'}
          onClick={() => setMode('incremental')}
        >
          Incremental
        </button>
        <button type="button" aria-pressed={mode === 'rewrite'} onClick={() => setMode('rewrite')}>
          Rewrite
        </button>
      </div>
      <button
        type="button"
        className="download"
        disabled={!documents.canDownload()}
        onClick={download}
      >
        Download
      </button>
      <output className="sizes">
        {sizes ? (
          <>
            Incremental <strong>{sizes.incremental}</strong> · Rewrite{' '}
            <strong>{sizes.rewrite}</strong>
          </>
        ) : (
          'Measuring…'
        )}
      </output>
    </div>
  );
}

export default function App() {
  return (
    <Viewer
      engine={engine}
      plugins={plugins}
      initialDocuments={[{ source: ebook, name: 'ebook.pdf' }]}
    >
      <DocumentGate fallback={<p className="loading">Opening…</p>}>
        <DownloadBar />
        <Stage className="stage">{() => <RenderLayer />}</Stage>
      </DocumentGate>
    </Viewer>
  );
}

import { useEffect, useState } from 'react';
import {
  Viewer,
  DocumentGate,
  saveFile,
  useDocument,
  useDocuments,
  useDocumentsEvent,
} from '@embedpdf/react/runtime';
import type { OpenInput } from '@embedpdf/react/runtime';
import { Stage, stagePlugin } from '@embedpdf/react/stage';
import { RenderLayer, renderPlugin } from '@embedpdf/react/render';
import { metadataPlugin, useMetadata, useMetadataState } from '@embedpdf/react/metadata';
import { cloudEngine } from '@cloudpdf/engine';

import './unsaved.css';

const engine = cloudEngine();
const plugins = [stagePlugin(), renderPlugin(), metadataPlugin()];

const ebook: OpenInput = { kind: 'share', shareToken: 'shr_WGj1goAtlNN_fQ5OswPrbJQM' };

function TitleBar() {
  const documents = useDocuments();
  const metadata = useMetadata();
  const title = useMetadataState((state) => state.metadata?.title ?? '');
  const { hasUnsavedChanges } = useDocument();

  // A change on load: the document gets a new title, so it has something to lose.
  useEffect(() => {
    void metadata.update({ title: 'Quarterly report (draft)' });
  }, [metadata]);

  // While there's something to lose, the browser asks before the page closes.
  useEffect(() => {
    if (!hasUnsavedChanges) return;
    const warn = (event: BeforeUnloadEvent) => event.preventDefault();
    window.addEventListener('beforeunload', warn);
    return () => window.removeEventListener('beforeunload', warn);
  }, [hasUnsavedChanges]);

  return (
    <div className="toolbar">
      <input
        className="field"
        aria-label="Title"
        defaultValue={title}
        key={title}
        onBlur={(event) => metadata.update({ title: event.target.value })}
      />
      <span className="badge" data-unsaved={hasUnsavedChanges}>
        {hasUnsavedChanges ? 'Unsaved changes' : 'Downloaded'}
      </span>
      <button
        type="button"
        className="button"
        onClick={async () => saveFile(await documents.download(), 'report.pdf')}
      >
        Download
      </button>
    </div>
  );
}

function ChangeLog() {
  const [entries, setEntries] = useState<string[]>([]);
  useDocumentsEvent(
    (documents) => documents.onUnsavedChangesChanged,
    ({ hasUnsavedChanges }) =>
      setEntries((previous) => [
        hasUnsavedChanges
          ? 'It has changes that weren’t downloaded'
          : 'Downloaded: nothing to lose',
        ...previous,
      ]),
  );
  return (
    <ul className="log" aria-live="polite">
      {entries.slice(0, 3).map((entry, index) => (
        <li key={entries.length - index}>{entry}</li>
      ))}
    </ul>
  );
}

export default function App() {
  return (
    <Viewer
      engine={engine}
      plugins={plugins}
      initialDocuments={[{ source: ebook, name: 'report.pdf' }]}
    >
      <DocumentGate fallback={<p className="loading">Opening…</p>}>
        <TitleBar />
        <ChangeLog />
        <Stage className="stage">{() => <RenderLayer />}</Stage>
      </DocumentGate>
    </Viewer>
  );
}