WIP

src/encoders/GIF.ts

@@ -0,0 +1,44 @@
+import GIFLib from "gif.js";
+
+class GIF {
+  private gif: GIFLib;
+
+  constructor(width: number, height: number, loop: boolean) {
+    this.gif = new GIFLib({
+      workers: 2,
+      quality: 10,
+      width,
+      height,
+      repeat: loop ? 0 : -1,
+    });
+  }
+
+  add(
+    frame:
+      | CanvasImageSource
+      | CanvasRenderingContext2D
+      | WebGLRenderingContext
+      | ImageData,
+    delay: number
+  ) {
+    this.gif.addFrame(frame, { delay });
+  }
+
+  render(): Promise<File> {
+    return new Promise((resolve) => {
+      const timestamp = Date.now();
+      this.gif.on("finished", function (blob) {
+        const file = new File([blob], `board_${timestamp}.gif`, {
+          type: "image/gif",
+          lastModified: timestamp,
+        });
+
+        resolve(file);
+      });
+
+      this.gif.render();
+    });
+  }
+}
+
+export default GIF;

src/encoders/MP4.ts

@@ -0,0 +1,37 @@
+import * as HME from "h264-mp4-encoder";
+
+class MP4 {
+  private hme: Promise<HME.H264MP4Encoder>;
+  private encoder: HME.H264MP4Encoder | null = null;
+
+  constructor(width: number, height: number) {
+    this.hme = HME.createH264MP4Encoder();
+    this.setup(width, height);
+  }
+
+  async setup(width: number, height: number) {
+    this.encoder = await this.hme;
+    this.encoder.width = width;
+    this.encoder.height = height;
+    this.encoder.initialize();
+  }
+
+  // add(frame: CanvasImageSource | string, delay: number) {
+  //   // this.encoder?.addFrameRgba()
+  // }
+
+  // async render(): Promise<File> {
+  //   const blob = await this.video.complete();
+
+  //   const timestamp = Date.now();
+
+  //   const file = new File([blob], `board_${timestamp}.webm`, {
+  //     type: "video/webm",
+  //     lastModified: timestamp,
+  //   });
+
+  //   return file;
+  // }
+}
+
+export default MP4;

src/encoders/WebM.ts

@@ -0,0 +1,35 @@
+// @ts-ignore
+import WebMWriter from "webm-writer";
+
+class WebM {
+  private video: WebMWriter;
+
+  constructor() {
+    this.video = new WebMWriter({
+      quality: 0.8,
+      fileWriter: null,
+      fd: null,
+      frameDuration: 1000,
+      transparent: false,
+    });
+  }
+
+  add(frame: CanvasImageSource | string, delay: number) {
+    this.video.addFrame(frame, delay);
+  }
+
+  async render(): Promise<File> {
+    const blob = await this.video.complete();
+
+    const timestamp = Date.now();
+
+    const file = new File([blob], `board_${timestamp}.webm`, {
+      type: "video/webm",
+      lastModified: timestamp,
+    });
+
+    return file;
+  }
+}
+
+export default WebM;

src/encoders/createAnimation.ts

@@ -0,0 +1,51 @@
+import { Style } from "../types";
+import Board from "../board/Board";
+import Game from "../game/Game";
+import GIF from "./GIF";
+import WebM from "./WebM";
+// import MP4 from "./MP4";
+
+const MOVE_TIME = 1000;
+
+const createAnimation = async (
+  pgn: string,
+  style: Style,
+  size: number = 720,
+  format: "GIF" | "WebM"
+) => {
+  const game = new Game().loadPGN(pgn);
+  const board = new Board(8).setStyle(style).setSize(size).hideBorder();
+  const animation =
+    format === "GIF" ? new GIF(board.width, board.height, true) : new WebM();
+  const header = game.getHeader();
+
+  await board.titleFrame(header);
+  board.render();
+  animation.add(format === "GIF" ? board.toImgElement() : board.canvas, 5000);
+
+  await board.frame(game.getBoardData(), header);
+  board.render();
+  animation.add(
+    format === "GIF" ? board.toImgElement() : board.canvas,
+    MOVE_TIME
+  );
+
+  while (true) {
+    const move = game.next();
+
+    if (!move) {
+      break;
+    }
+
+    await board.frame(game.getBoardData(), header, move);
+    board.render();
+    animation.add(
+      format === "GIF" ? board.toImgElement() : board.canvas,
+      MOVE_TIME
+    );
+  }
+
+  return await animation.render();
+};
+
+export default createAnimation;