gods-eye-view/src/ui/sceneControls.js

/** Own Scene panel listeners and presentation through project reads and actions. */
import { sceneElements, renderSceneOptions, renderSceneShots, presentSceneButtons, presentSceneProgress, presentSceneRuntime } from './scenePresentation.js';

export class SceneControls {
  constructor({ read, actions, elements = sceneElements() }) {
    this.read = read;
    this.actions = actions;
    this.elements = elements;
    this.destroyed = false;
    this.actionGeneration = 0;
    this.removers = [];
    this.rowRemovers = [];
    this.playbackKeyRemover = null;
    if (!elements.select) return;
    this.renderSceneSelect();
    this.renderShotList();
    this.listen(elements.select, 'change', () => this.run('selectScene', elements.select.value));
    for (const [element, action] of Object.entries({ new: 'create', delete: 'deleteScene', capture: 'capture', update: 'update', next: 'next', export: 'export', download: 'download' })) {
      this.listen(elements[element], 'click', () => this.run(action));
    }
    this.listen(elements.start, 'click', () => this.run('start', this.read().selectedSceneId));
    this.listen(elements.stop, 'click', () => this.run('stop', 'Stopped'));
    this.listen(elements.import, 'click', () => elements.file?.click());
    this.listen(elements.file, 'change', async () => {
      const file = elements.file?.files?.[0];
      if (!file) return;
      await this.run('import', file);
      if (!this.destroyed) elements.file.value = '';
    });
    this.updateStatus('Ready');
    this.setProgress(0);
    this.setButtons(false);
  }

  listen(target, type, callback, removers = this.removers) {
    if (!target) return;
    const listener = (event) => { if (!this.destroyed) return callback(event); };
    target.addEventListener(type, listener);
    removers.push(() => target.removeEventListener(type, listener));
  }

  run(action, ...args) {
    if (this.destroyed) return;
    const generation = ++this.actionGeneration;
    const failed = () => {
      if (!this.destroyed && generation === this.actionGeneration) this.updateStatus('Scene action failed');
    };
    try {
      const result = this.actions[action](...args);
      return result?.then ? Promise.resolve(result).catch(failed) : result;
    } catch {
      failed();
    }
  }

  renderSceneSelect() {
    if (!this.destroyed) renderSceneOptions(this.elements.select, this.read());
  }

  renderShotList() {
    if (this.destroyed) return;
    for (const remove of this.rowRemovers.splice(0)) remove();
    renderSceneShots(this.elements.shots, this.read(), {
      listen: (element, type, callback) => this.listen(element, type, callback, this.rowRemovers),
      select: (id) => this.run('selectShot', id),
      rename: (sceneId, shotId, title) => this.run('renameShot', sceneId, shotId, title),
      load: (sceneId, shotId) => this.run('load', sceneId, shotId),
      remove: (sceneId, shotId) => this.run('deleteShot', sceneId, shotId),
    });
  }

  setButtons(running) {
    if (!this.destroyed) presentSceneButtons(this.elements, running, this.read().hasRun);
  }

  setProgress(progress) {
    if (!this.destroyed) presentSceneProgress(this.elements.progress, progress);
  }

  updateStatus(text) {
    if (!this.destroyed && this.elements.status) this.elements.status.textContent = text;
  }

  updateRuntime(text) {
    if (!this.destroyed) presentSceneRuntime(this.elements.runtime, text);
  }

  setPlaybackActive(active) {
    if (this.destroyed && active) return;
    document.body.classList.toggle('scene-playback-mode', active);
  }

  setPlaybackKeyboardEnabled(enabled) {
    if (!enabled) {
      this.playbackKeyRemover?.();
      this.playbackKeyRemover = null;
    } else if (!this.destroyed && !this.playbackKeyRemover) {
      const onKeyDown = (event) => {
        if (!this.destroyed && event.key === 'Escape' && this.read().running) this.run('stop', 'Stopped (Esc)');
      };
      document.addEventListener('keydown', onKeyDown);
      this.playbackKeyRemover = () => document.removeEventListener('keydown', onKeyDown);
    }
  }

  destroy() {
    if (this.destroyed) return;
    this.destroyed = true;
    this.actionGeneration++;
    this.setPlaybackKeyboardEnabled(false);
    for (const remove of [...this.removers.splice(0), ...this.rowRemovers.splice(0)]) remove();
    if (this.elements.shots) this.elements.shots.textContent = '';
    presentSceneRuntime(this.elements.runtime, '');
    this.setPlaybackActive(false);
  }
}