caleb531 / flip-book / 10499304652

import m from 'mithril';

import GIF from 'gif.js.optimized';

import GIFWorkerUrl from 'gif.js.optimized/dist/gif.worker.js?url';

import FrameComponent from './frame.jsx';

import ControlComponent from './control.jsx';

import ProgressBarComponent from './progress-bar.jsx';

import ExportGifComponent from './export-gif.jsx';

class ExportComponent {

  exportGif(story) {

    this.gifGenerator = new GIF({

      workers: 2,

      workerScript: GIFWorkerUrl

    });

    story.frames.forEach((frame) => {

      let canvas = document.createElement('canvas');

      canvas.width = Math.ceil(

        FrameComponent.width * (story.exportedGifSize / FrameComponent.height)

      );

      canvas.height = story.exportedGifSize;

      let frameComponent = new FrameComponent();

      frameComponent.oninit({ attrs: { frame } });

      frameComponent.oncreate({ dom: canvas });

      frameComponent.render({

        backgroundColor: '#fff'

      });

      this.gifGenerator.addFrame(canvas, { delay: story.frameDuration });

    });

    this.gifGenerator.on('progress', (currentProgress) => {

      this.exportProgress = currentProgress;

      m.redraw();

    });

    this.gifGenerator.on('finished', (blob) => {

      let image = new Image();

      image.onload = () => {

        setTimeout(() => {

          this.exportedImageUrl = image.src;

          m.redraw();

        }, ProgressBarComponent.delay);

      };

      image.src = URL.createObjectURL(blob);

    });

    this.exportedImageUrl = null;

    this.gifGenerator.render();

  }

  isExportingGif() {

    if (this.gifGenerator) {

      return this.gifGenerator.running;

    } else {

      return false;

    }

  }

  isGifExportFinished() {

    if (this.gifGenerator) {

      return this.gifGenerator.finishedFrames === this.gifGenerator.frames.length;

    } else {

      return false;

    }

  }

  abortGifExport() {

    if (this.gifGenerator) {

      this.gifGenerator.abort();

      this.gifGenerator = null;

    }

  }

  exportProject(story) {

    let storyJson = Object.assign({ metadata: story.metadata }, story.toJSON());

    delete storyJson.selectedFrameIndex;

    let slugName = story.metadata.name

      .toLowerCase()

      .replace(/(^\W+)|(\W+$)/gi, '')

      .replace(/\W+/gi, '-');

    let blob = new Blob([JSON.stringify(storyJson)]);

    let a = document.createElement('a');

    a.href = URL.createObjectURL(blob, { type: 'application/json' });

    a.download = `${slugName}.flipbook`;

    a.click();

  }

  async setExportedGifSize(story, size) {

    story.exportedGifSize = Number(size);

    await story.save();

  }

  view({ attrs: { story } }) {

    return (

      <div className="export-options">

        <h2>Export</h2>

        <div className="exported-gif-controls">

          <ControlComponent

            id="export-gif"

            title="Export GIF"

            label="Export GIF"

            action={() => this.exportGif(story)}

          />

          <div className="exported-gif-size">

            <label htmlFor="exported-gif-size">GIF Size:</label>

            <select

              id="exported-gif-size"

              onchange={({ target }) => this.setExportedGifSize(story, target.value)}

              {ExportComponent.exportedGifSizes.map((size) => {

                return (

                  <option selected={size === story.exportedGifSize} value={size}>

                    {`${Math.ceil(FrameComponent.width * (size / FrameComponent.height))} x ${size}`}

                  </option>

              })}

            </select>

          </div>

        </div>

        <ControlComponent

          id="export-project"

          title="Export Project Data"

          label="Export Project Data"

          action={() => this.exportProject(story)}

        />

        <ExportGifComponent

          isExportingGif={this.isExportingGif()}

          isGifExportFinished={this.isGifExportFinished()}

          exportProgress={this.exportProgress}

          exportedImageUrl={this.exportedImageUrl}

          abort={() => this.abortGifExport()}

        />

      </div>

  }

}

ExportComponent.exportedGifSizes = [1080, 720, 540, 360];

export default ExportComponent;