feat: replace canvas with napi-canvas, switch container OS to alpine

Author: tyrone-sudeium

Dockerfile

@@ -1,5 +1,8 @@
-FROM node:14.20.0
+FROM node:14.20.0-alpine
 LABEL maintainer="tyrone@sudeium.com"
 
+# Add ffmpeg, runtime requirement for reddit/tiktok
+# RUN apk --no-cache add ffmpeg
+
 WORKDIR /app
 ADD . .

Production.dockerfile

@@ -1,4 +1,4 @@
-FROM node:14.20.0
+FROM node:14.20.0-alpine
 LABEL maintainer="tyrone@sudeium.com"
 
 WORKDIR /app
@@ -8,6 +8,10 @@ ADD . .
 ARG COMMIT_SHA=""
 ENV SOURCE_VERSION=${COMMIT_SHA}
 
+# Add ffmpeg, runtime requirement for reddit/tiktok
+# NOTE: Adds ~100MB :(
+# RUN apk --no-cache add ffmpeg
+
 # Layer for build (includes dev dependencies, yarn cache)
 RUN yarn install
 

docker-compose.dev.yml

@@ -1,7 +1,7 @@
 version: "3.5"
 services:
   bot:
-    image: node:14.20.0
+    image: node:14.20.0-alpine
     command: yarn debug-bot
     working_dir: /app
     ports:
@@ -13,7 +13,7 @@ services:
     env_file:
       - ./development.env
   website:
-    image: node:14.20.0
+    image: node:14.20.0-alpine
     command: yarn debug-web
     working_dir: /app
     ports:

package.json

@@ -31,12 +31,12 @@
   },
   "homepage": "https://github.com/tyrone-sudeium/aethebot#readme",
   "dependencies": {
-    "@discordjs/opus": "^0.1.0",
+    "@discordjs/opus": "^0.9",
+    "@napi-rs/canvas": "^0.1",
     "@types/ws": "^7.2.1",
     "@tyrone-sudeium/napi-gif-encoder": "^0.0.1",
     "anchorme": "^1.1.2",
     "array-flatten": "^3.0.0",
-    "canvas": "^2.0.0-alpha.12",
     "chrono-node": "^2.3.1",
     "discord.js": "12",
     "emoji-regex": "^9.2.2",
@@ -53,7 +53,7 @@
   "devDependencies": {
     "@types/minimist": "^1.2.0",
     "@types/moment-timezone": "^0.5.9",
-    "@types/node": "^12",
+    "@types/node": "^14",
     "@types/redis": "^2.8.31",
     "@types/uuid": "^3.4.5",
     "@types/xml2js": "^0.4.3",
@@ -63,7 +63,7 @@
     "eslint-plugin-import": "=2.20.0",
     "ffmpeg-binaries": "^3.2.2-3",
     "nodemon": "1.19.3",
-    "typescript": "^3.2.2"
+    "typescript": "^4.9"
   },
   "resolutions": {
     "**/needle": "^2.6.0"

res/font/OpenSans-SemiBold.ttf

@@ -24,13 +24,11 @@ import { GalaxyBrainFeature } from "./memegen/galaxy_brain"
 import { VinceMcMahonFeature } from "./memegen/vince"
 import { PingFeature } from "./ping/"
 import { ReactorFeature } from "./reactor"
-import { RedditVideoFeature } from "./video/reddit_video"
 import { RegionalIndicatorFeature } from "./regional_indicator"
 import { RerollFeature } from "./reroll"
 import { ScomoFeature } from "./scomo"
 import { ServerFeaturesManager } from "./server_features"
 import { ShitcoinFeature } from "./shitcoin"
-import { TikTokVideoFeature } from "./video/tiktok_video"
 import { TimehelperFeature } from "./timehelper"
 import { UptimeFeature } from "./uptime"
 import { VoiceNoiseFeature } from "./voicenoise/"
@@ -74,8 +72,6 @@ export const allFeatures: GlobalFeatureConstructor<GlobalFeature>[] = [
 export const allServerFeatures: ServerFeatureConstructor<ServerFeature>[] = [
     AutoKimFeature,
     ReactorFeature,
-    RedditVideoFeature,
-    TikTokVideoFeature,
     TimPostFeature,
     ReactionRolesFeature,
 ]

src/features/index.ts

@@ -11,10 +11,10 @@
  * This source code is licensed under the permissive MIT license.
  */
 
-import { CanvasRenderingContext2D } from "canvas"
+import { SKRSContext2D } from "@napi-rs/canvas"
 
 export interface Drawable {
     height: number
     width: number
-    drawInContext(ctx: CanvasRenderingContext2D, offset?: {x: number; y: number}): void
+    drawInContext(ctx: SKRSContext2D, offset?: {x: number; y: number}): void
 }

src/features/memegen/drawable.d.ts

@@ -13,7 +13,7 @@
 
 import * as Path from "path"
 import * as Discord from "discord.js"
-import { createCanvas, Image, loadImage } from "canvas"
+import { createCanvas, Image, loadImage } from "@napi-rs/canvas"
 import { removeBotMentions } from "../../util/remove_mentions"
 import { GlobalFeature, MessageContext } from "../feature"
 import { Drawable } from "./drawable"

src/features/memegen/galaxy_brain.ts

@@ -11,7 +11,8 @@
  * This source code is licensed under the permissive MIT license.
  */
 
-import { Image, CanvasRenderingContext2D } from "canvas"
+import * as Path from "path"
+import { Image, SKRSContext2D, GlobalFonts } from "@napi-rs/canvas"
 import { Rect } from "../../util/rect"
 import { Drawable } from "./drawable"
 
@@ -20,8 +21,15 @@ interface WrapTextResult {
     adjustedFontSize: number
 }
 
-function renderTextInRect(ctx: CanvasRenderingContext2D,
+let fontsRegistered = false
+
+function renderTextInRect(ctx: SKRSContext2D,
                           text: string, font: string, rect: Rect, maxFontSize?: number): void {
+    if (!fontsRegistered) {
+        const fontPath = Path.join(__dirname, "..", "..", "..", "res", "font", "OpenSans-SemiBold.ttf")
+        GlobalFonts.registerFromPath(fontPath, "OpenSans")
+        fontsRegistered = true
+    }
     // start with a large font size
     let fontSize = maxFontSize || rect.height
     let res = wrappedTextAtSize(ctx, text, font, rect.width, fontSize)
@@ -57,7 +65,7 @@ function renderTextInRect(ctx: CanvasRenderingContext2D,
     }
 }
 
-function wrappedTextAtSize(ctx: CanvasRenderingContext2D,
+function wrappedTextAtSize(ctx: SKRSContext2D,
                            text: string, fontFace: string, maxWidth: number, fontSize: number): WrapTextResult | null {
     const words = text.split(" ")
     const lines = []
@@ -113,11 +121,11 @@ export class MemeTile implements Drawable {
         this.width = width
     }
 
-    public drawInContext(ctx: CanvasRenderingContext2D, offset?: {x: number; y: number}): void {
+    public drawInContext(ctx: SKRSContext2D, offset?: {x: number; y: number}): void {
         offset = offset || {x: 0, y: 0}
         const textRect = new Rect(offset.x, offset.y, this.width / 2, this.height)
         ctx.fillStyle = "#000"
-        renderTextInRect(ctx, this.text, "Arial", textRect, 36)
+        renderTextInRect(ctx, this.text, "OpenSans", textRect, 36)
         ctx.drawImage(this.image, this.width / 2, offset.y, this.width / 2, this.height)
     }
 }

src/features/memegen/meme_tile.ts

@@ -12,7 +12,7 @@
  * This source code is licensed under the permissive MIT license.
  */
 
-import { CanvasRenderingContext2D } from "canvas"
+import { SKRSContext2D } from "@napi-rs/canvas"
 import { Drawable } from "./drawable"
 
 export class Separator implements Drawable {
@@ -23,7 +23,7 @@ export class Separator implements Drawable {
         this.width = width
         this.height = height
     }
-    public drawInContext(ctx: CanvasRenderingContext2D, offset?: {x: number; y: number}): void {
+    public drawInContext(ctx: SKRSContext2D, offset?: {x: number; y: number}): void {
         ctx.fillStyle = this.color
         offset = offset || {x: 0, y: 0}
         ctx.fillRect(offset.x, offset.y, this.width, this.height)