Fix rendering in docker (#12)

* Use main node image & upgrade fabric

* prettier

Author: OllysCoding

Containerfile

@@ -1,19 +1,7 @@
-FROM node:alpine
+FROM node:22
 
-ENV PYTHONUNBUFFERED=1
-RUN apk update
-RUN apk add --update --no-cache python3 && ln -sf python3 /usr/bin/python
-RUN apk add --update --no-cache \
-    make \
-    g++ \
-    jpeg-dev \
-    cairo-dev \
-    giflib-dev \
-    pango-dev \
-    libtool \
-    autoconf \
-    automake
-RUN apk add --update --no-cache font-noto
+RUN apt-get update
+RUN apt-get install build-essential libcairo2-dev libpango1.0-dev libjpeg-dev libgif-dev librsvg2-dev -y
 
 WORKDIR /usr/src/app
 

apps/backend/package.json

@@ -21,9 +21,8 @@
     "ajv": "^8.17.1",
     "ajv-formats": "^3.0.1",
     "canvas": "^2.11.2",
-    "cli-progress": "^3.12.0",
     "dotenv": "^16.4.7",
-    "fabric": "^4.6.0",
+    "fabric": "^6.5.4",
     "fastify": "^5.1.0",
     "ffmpeg-static": "^4.4.1",
     "ffprobe-static": "^3.1.0",
@@ -37,8 +36,6 @@
     "@swc/cli": "^0.5.2",
     "@swc/core": "^1.10.4",
     "@tsconfig/node22": "^22.0.0",
-    "@types/cli-progress": "^3.11.6",
-    "@types/fabric": "^5.3.9",
     "@types/ffmpeg-static": "^3.0.3",
     "@types/ffprobe-static": "^2.0.3",
     "@types/fluent-ffmpeg": "^2.1.27",

apps/backend/src/canvas2video/encoder.ts

@@ -1,22 +1,10 @@
 import ffmpeg from "fluent-ffmpeg";
 import * as fs from "fs";
 import * as path from "path";
-import * as cliProgress from "cli-progress";
 import { type Encoder } from "./types.js";
 import { logError } from "../logger/index.js";
 
-const progressBar = new cliProgress.SingleBar({
-  format: `Processing | {bar} | {percentage}%`,
-  barCompleteChar: "\u2588",
-  barIncompleteChar: "\u2591",
-  hideCursor: true,
-});
-
-const createDir = (
-  reject: (reason?: Error) => void,
-  silent: boolean,
-  output: string,
-) => {
+const createDir = (reject: (reason?: Error) => void, output: string) => {
   try {
     const outDir = path.dirname(output);
     if (!fs.existsSync(outDir)) {
@@ -49,9 +37,6 @@ const createFilter = (backgroundVideo: {
   ];
 };
 
-const percent: (percent?: number) => number = (percent) =>
-  percent ? parseFloat((percent as number).toFixed(2)) : 0;
-
 const outputOptions = [
   "-preset veryfast",
   "-crf 24",
@@ -63,8 +48,8 @@ const outputOptions = [
 
 const encoder: Encoder = (config) =>
   new Promise((resolve, reject) => {
-    const { frameStream, output, backgroundVideo, fps, silent = true } = config;
-    createDir(reject, silent, output);
+    const { frameStream, output, backgroundVideo, fps } = config;
+    createDir(reject, output);
 
     const outputStream = fs.createWriteStream(output);
     const command = ffmpeg();
@@ -87,25 +72,12 @@ const encoder: Encoder = (config) =>
       command.complexFilter([...createFilter(backgroundVideo)], "tmp");
 
     command.output(outputStream);
-    // command.size(`${width}x${height}`);
-
-    command.on("start", () => {
-      if (!silent) progressBar.start(100, 0);
-    });
 
     command.on("end", () => {
-      if (!silent) progressBar.stop();
-      if (!silent) console.log("Processing complete...");
       resolve({ path: output, stream: outputStream });
     });
 
-    command.on("progress", (progress) => {
-      if (!silent) progressBar.update(percent(progress.percent));
-    });
-
     command.on("error", (err: Error) => {
-      if (!silent)
-        console.log("An error occured while processing,", err.message);
       reject(new Error(err.message));
     });
 

apps/backend/src/canvas2video/renderer.ts

@@ -1,7 +1,6 @@
 import ffmpeg from "fluent-ffmpeg";
-import { fabric } from "fabric";
+import * as fabric from "fabric/node";
 import { Readable } from "stream";
-import * as cliProgress from "cli-progress";
 
 import ffmpegPath from "ffmpeg-static";
 import * as ffprobe from "ffprobe-static";
@@ -12,17 +11,10 @@ import { gsap } from "gsap";
 ffmpeg.setFfmpegPath(ffmpegPath);
 ffmpeg.setFfprobePath(ffprobe.path);
 
-const progressBar = new cliProgress.SingleBar({
-  format: `Rendering | {bar} | {percentage}%`,
-  barCompleteChar: "\u2588",
-  barIncompleteChar: "\u2591",
-  hideCursor: true,
-});
-
 const renderer: Renderer = (config) =>
   new Promise((resolve, reject) => {
     try {
-      const { width, height, fps, makeScene, silent = true } = config;
+      const { width, height, fps, makeScene } = config;
       const canvas = new fabric.StaticCanvas(null, { width, height });
       const anim = gsap.timeline({ paused: true });
       const stream = new Readable();
@@ -34,8 +26,6 @@ const renderer: Renderer = (config) =>
       const renderFrames = () => {
         anim.progress(currentFrame++ / totalFrames);
         if (currentFrame <= totalFrames) {
-          if (!silent) progressBar.update(currentFrame);
-
           canvas.renderAll();
           const buffer = Buffer.from(
             canvas.toDataURL().replace(/^data:\w+\/\w+;base64,/, ""),
@@ -44,8 +34,6 @@ const renderer: Renderer = (config) =>
           stream.push(buffer);
           renderFrames();
         } else {
-          if (!silent) console.log("\nRendering complete...");
-          if (!silent) progressBar.stop();
           stream.push(null);
           resolve(stream);
         }
@@ -55,7 +43,6 @@ const renderer: Renderer = (config) =>
         const duration = anim.duration();
         totalFrames = Math.max(1, Math.ceil((duration / 1) * fps));
 
-        if (!silent) progressBar.start(totalFrames, 0);
         renderFrames();
       });
     } catch (e) {

apps/backend/src/canvas2video/types.ts

@@ -1,13 +1,9 @@
 import { Readable, Writable } from "stream";
-import fabric from "fabric";
+import * as fabric from "fabric/node";
 
 type mediaPath = string;
 
-interface BaseConfig {
-  silent?: boolean;
-}
-
-export interface EncoderConfig extends BaseConfig {
+export interface EncoderConfig {
   frameStream: Readable;
   output: mediaPath;
   width: number;
@@ -32,13 +28,13 @@ interface EncoderOutput {
 }
 
 type makeSceneFunction = (
-  fabricInstance: typeof fabric.fabric,
-  canvas: fabric.fabric.StaticCanvas,
+  fabricInstance: typeof fabric,
+  canvas: fabric.StaticCanvas,
   anim: gsap.core.Timeline,
   compose: () => void,
 ) => void;
 
-export interface RendererConfig extends BaseConfig {
+export interface RendererConfig {
   width: number;
   height: number;
   fps: number;

apps/backend/src/fonts/index.ts

@@ -113,7 +113,7 @@ export abstract class Fonts {
                 weight: properties.weight ?? "normal",
                 style: properties.style ?? "normal",
               };
-              registerFont(fontFilePath, parsedProperties);
+              await registerFont(fontFilePath, parsedProperties);
               if (!this._fonts[parsed.family]) this._fonts[parsed.family] = [];
               this._fonts[parsed.family]?.push(parsedProperties);
               logInfo(`Successfully registered font from ${fontFilePath}`);

apps/backend/src/video-generator/index.ts

@@ -131,7 +131,6 @@ export const makeVideo = async (
     const height = 1080;
 
     const stream = await renderer({
-      silent: true,
       width,
       height,
       fps: 1,
@@ -147,7 +146,6 @@ export const makeVideo = async (
     });
 
     const baseEncoderConfig: EncoderConfig = {
-      silent: true,
       width: 1920,
       height: 1080,
       frameStream: stream,