strudel/website/src/repl/components/ExportModal.jsx

import PlayCircleIcon from '@heroicons/react/20/solid/PlayCircleIcon';
import cx from '@src/cx.mjs';
import NumberInput from './NumberInput';
import { useEffect, useState } from 'react';
import { Textbox } from './textbox/Textbox';
import {
  setMultiChannelOrbits as setStrudelMultiChannelOrbits,
  setMaxPolyphony as setStrudelMaxPolyphony,
  getAudioContext,
} from '@strudel/webaudio';
import XMarkIcon from '@heroicons/react/24/outline/XMarkIcon';

function Checkbox({ label, value, onChange, disabled = false }) {
  return (
    <label className={cx(disabled && 'opacity-50')}>
      <input disabled={disabled} type="checkbox" checked={value} onChange={onChange} />
      {' ' + label}
    </label>
  );
}

function FormItem({ label, children, disabled }) {
  return (
    <div className="grid gap-2">
      <label className={cx(disabled && 'opacity-50')}>{label}</label>
      {children}
    </div>
  );
}

export default function ExportModal(Props) {
  const { started, isEmbedded, handleExport } = Props;

  const [downloadName, setDownloadName] = useState(''); // TODO: make a form?
  const [startCycle, setStartCycle] = useState(0);
  const [endCycle, setEndCycle] = useState(1);
  const [sampleRate, setSampleRate] = useState(48000);
  const [multiChannelOrbits, setMultiChannelOrbits] = useState(true);
  const [maxPolyphony, setMaxPolyphony] = useState(1024);
  const [exporting, setExporting] = useState(false);
  const [progress, setProgress] = useState(0);
  const [length, setLength] = useState(1);

  const refreshProgress = () => {
    const audioContext = getAudioContext();
    if (audioContext instanceof OfflineAudioContext) {
      setProgress(audioContext.currentTime);
      setLength(audioContext.length / sampleRate);
      setTimeout(refreshProgress, 100);
    }
  };

  return (
    <>
      <button
        onClick={() => {
          if (started) return;
          const modal = document.getElementById('exportModal');
          modal.showModal();
        }}
        title="export"
        className={cx(
          'flex items-center space-x-1',
          !isEmbedded ? 'p-2' : 'px-2',
          started ? 'opacity-50' : 'hover:opacity-50',
        )}
      >
        {!isEmbedded && <span>export</span>}
      </button>
      <dialog
        closedby={exporting ? 'none' : 'closerequest'}
        id="exportModal"
        className="text-md bg-background text-foreground rounded-lg backdrop:bg-background backdrop:opacity-50"
      >
        <button
          onClick={() => {
            if (exporting) return;
            const modal = document.getElementById('exportModal');
            modal.close();
          }}
          className={cx(
            'absolute text-foreground max-h-8 min-h-8 max-w-8 min-w-8 items-center p-1.5 right-2 top-2 z-50',
            exporting && 'opacity-50',
          )}
          aria-label="Close Modal"
        >
          <XMarkIcon />
        </button>
        <div className="bg-lineHighlight p-4 space-y-4 relative">
          <FormItem label="File name" disabled={exporting}>
            <Textbox
              onBlur={(e) => {
                setDownloadName(e.target.value);
              }}
              onChange={(v) => {
                setDownloadName(v);
              }}
              disabled={exporting}
              placeholder="Leave empty to use current date"
              className={cx('placeholder:opacity-50', exporting && 'opacity-50 border-opacity-50')}
              value={downloadName ?? ''}
            />
          </FormItem>
          <div className="flex flex-row gap-4">
            <FormItem label="Start cycle" disabled={exporting}>
              <Textbox
                min={1}
                max={Infinity}
                onBlur={(e) => {
                  let v = parseInt(e.target.value);
                  v = isNaN(v) ? 0 : Math.max(0, v);
                  setStartCycle(v);
                }}
                onChange={(v) => {
                  v = parseInt(v);
                  setStartCycle(v);
                }}
                type="number"
                placeholder=""
                disabled={exporting}
                className={cx(exporting && 'opacity-50 border-opacity-50')}
                value={startCycle ?? ''}
              />
            </FormItem>
            <FormItem label="End cycle" disabled={exporting}>
              <Textbox
                min={1}
                max={Infinity}
                onBlur={(e) => {
                  let v = parseInt(e.target.value);
                  v = isNaN(v) ? Math.max(startCycle + 1, parseInt(v)) : v;
                  setEndCycle(v);
                }}
                onChange={(v) => {
                  v = parseInt(v);
                  setEndCycle(v);
                }}
                type="number"
                placeholder=""
                disabled={exporting}
                className={cx(exporting && 'opacity-50 border-opacity-50')}
                value={endCycle ?? ''}
              />
            </FormItem>
          </div>
          <div className="flex flex-row gap-4">
            <FormItem label="Sample rate" disabled={exporting}>
              <Textbox
                min={1}
                max={Infinity}
                onBlur={(e) => {
                  let v = parseInt(e.target.value);
                  v = isNaN(v) ? 1 : Math.max(1, v);
                  setSampleRate(v);
                }}
                onChange={(v) => {
                  v = parseInt(v);
                  setSampleRate(v);
                }}
                type="number"
                placeholder=""
                disabled={exporting}
                className={cx(exporting && 'opacity-50 border-opacity-50')}
                value={sampleRate ?? ''}
              />
            </FormItem>
            <FormItem label="Maximum polyphony" disabled={exporting}>
              <Textbox
                min={1}
                max={Infinity}
                onBlur={(e) => {
                  let v = parseInt(e.target.value);
                  v = isNaN(v) ? Math.max(1, parseInt(v)) : v;
                  setMaxPolyphony(v);
                }}
                onChange={(v) => {
                  v = Math.max(1, parseInt(v));
                  setMaxPolyphony(v);
                }}
                type="number"
                placeholder=""
                disabled={exporting}
                className={cx(exporting && 'opacity-50 border-opacity-50')}
                value={maxPolyphony ?? ''}
              />
            </FormItem>
          </div>
          <div>
            <Checkbox
              label="Multi Channel Orbits"
              onChange={(cbEvent) => {
                const val = cbEvent.target.checked;
                setMultiChannelOrbits(val);
              }}
              disabled={exporting}
              value={multiChannelOrbits}
            />
          </div>
          <button
            className={cx('bg-background p-2 w-full rounded-md hover:opacity-50 relative', exporting && 'opacity-50')}
            disabled={exporting}
            onClick={async () => {
              setExporting(true);
              setStrudelMaxPolyphony(maxPolyphony);
              setStrudelMultiChannelOrbits(multiChannelOrbits);
              setTimeout(refreshProgress, 1000);
              await handleExport(startCycle, endCycle, sampleRate, maxPolyphony, multiChannelOrbits, downloadName).finally(() => {
                setExporting(false);
                const modal = document.getElementById('exportModal');
                setProgress(0);
                setLength(1);
                modal.close();
              });
            }}
          >
            <span className="text-foreground">{exporting ? 'Exporting...' : 'Export to WAV'}</span>
            <div
              className="bg-foreground opacity-10 absolute top-0 left-0 right-0 bottom-0"
              style={{
                width: `${(progress / length) * 100}%`,
              }}
            />
          </button>
        </div>
      </dialog>
    </>
  );
}