Frame the canvas

.changeset/config.json

@@ -1,11 +1,11 @@
 {
-  "$schema": "https://unpkg.com/@changesets/config@2.3.1/schema.json",
-  "changelog": "@changesets/cli/changelog",
-  "commit": false,
-  "fixed": [],
-  "linked": [],
-  "access": "public",
-  "baseBranch": "main",
-  "updateInternalDependencies": "patch",
-  "ignore": []
+	"$schema": "https://unpkg.com/@changesets/config@2.3.1/schema.json",
+	"changelog": "@changesets/cli/changelog",
+	"commit": false,
+	"fixed": [],
+	"linked": [],
+	"access": "public",
+	"baseBranch": "main",
+	"updateInternalDependencies": "patch",
+	"ignore": []
 }

.github/workflows/main.yml

@@ -2,7 +2,7 @@ name: CI
 on:
   push:
     branches:
-      - "**"
+      - '**'
 
 jobs:
   build:
@@ -15,7 +15,7 @@ jobs:
       - uses: actions/setup-node@v3
         with:
           node-version: 18.x
-          cache: "pnpm"
+          cache: 'pnpm'
 
       - run: pnpm install --frozen-lockfile
       - run: pnpm run lint && pnpm run build

.github/workflows/publish.yml

@@ -1,12 +1,12 @@
 name: Publish
 on:
   workflow_run:
-    workflows: ["CI"]
+    workflows: ['CI']
     types:
       - completed
   push:
     branches:
-      - "main"
+      - 'main'
 
 concurrency: ${{ github.workflow }}-${{ github.ref }}
 
@@ -22,7 +22,7 @@ jobs:
       - uses: actions/setup-node@v3
         with:
           node-version: 18.x
-          cache: "pnpm"
+          cache: 'pnpm'
 
       - run: pnpm install --frozen-lockfile
       - name: Create Release Pull Request or Publish

.prettierignore

@@ -0,0 +1,9 @@
+.DS_Store
+node_modules
+/dist
+/.changeset
+
+# Ignore files for PNPM, NPM and YARN
+pnpm-lock.yaml
+package-lock.json
+yarn.lock

.prettierrc

@@ -0,0 +1,8 @@
+{
+	"semi": false,
+	"tabWidth": 2,
+	"useTabs": true,
+	"singleQuote": true,
+	"trailingComma": "none",
+	"printWidth": 100
+}

README.md

@@ -2,7 +2,7 @@
 
 # ass-html5
 
-Display ASS/SSA subtitles on html5 videos 
+Display ASS/SSA subtitles on html5 videos
 
 ![CI workflow](https://github.com/luxluth/ass-html5/actions/workflows/main.yml/badge.svg)
 ![Publish workflow](https://github.com/luxluth/ass-html5/actions/workflows/publish.yml/badge.svg)

package.json

@@ -1,38 +1,42 @@
 {
-  "name": "ass-html5",
-  "version": "0.0.0",
-  "description": "Display ASS/SSA subtitles on html5 videos",
-  "main": "dist/index.js",
-  "module": "dist/index.mjs",
-  "types": "dist/index.d.ts",
-  "scripts": {
-    "build": "tsup",
-    "dev": "tsup --watch",
-    "release": "pnpm run build && changeset publish",
-    "lint": "tsc"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/luxluth/ass-html5.git"
-  },
-  "keywords": [
-    "ASS",
-    "SSA",
-    "subtitles",
-    "aegisub",
-    "libass"
-  ],
-  "author": "luxluth",
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/luxluth/ass-html5/issues"
-  },
-  "homepage": "https://github.com/luxluth/ass-html5#readme",
-  "devDependencies": {
-    "@changesets/cli": "^2.26.2",
-    "prettier": "^3.0.0",
-    "terser": "^5.18.2",
-    "tsup": "^7.1.0",
-    "typescript": "^5.1.6"
-  }
+	"name": "ass-html5",
+	"version": "0.0.0",
+	"description": "Display ASS/SSA subtitles on html5 videos",
+	"main": "dist/index.js",
+	"module": "dist/index.mjs",
+	"types": "dist/index.d.ts",
+	"scripts": {
+		"build": "tsup",
+		"dev": "tsup --watch",
+		"release": "pnpm run build && changeset publish",
+		"lint": "tsc",
+		"format": "prettier --write ."
+	},
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/luxluth/ass-html5.git"
+	},
+	"keywords": [
+		"ASS",
+		"SSA",
+		"subtitles",
+		"aegisub",
+		"libass"
+	],
+	"author": "luxluth",
+	"license": "MIT",
+	"bugs": {
+		"url": "https://github.com/luxluth/ass-html5/issues"
+	},
+	"homepage": "https://github.com/luxluth/ass-html5#readme",
+	"devDependencies": {
+		"@changesets/cli": "^2.26.2",
+		"prettier": "^3.0.0",
+		"terser": "^5.18.2",
+		"tsup": "^7.1.0",
+		"typescript": "^5.1.6"
+	},
+	"dependencies": {
+		"ass-compiler": "^0.1.8"
+	}
 }

src/index.ts

@@ -0,0 +1,75 @@
+import { parse } from 'ass-compiler'
+import { ASSOptions } from './types'
+import { newCanvas } from './utils'
+
+export default class ASS {
+    assText: string
+    video: HTMLVideoElement | string
+    videoElement: HTMLVideoElement | null = null
+    canvas: HTMLCanvasElement| null = null
+    constructor(
+        options: ASSOptions
+    ) {
+        this.assText = options.assText
+        this.video = options.video
+    }
+
+    init() {
+        if (typeof this.video == 'string') {
+            this.videoElement = document.querySelector(this.video)
+            if (this.videoElement === null) {
+                throw new Error("Unable to find the video element")
+            }
+        } else {
+            this.videoElement = this.video
+        }
+        console.log(this.videoElement)
+        this.setCanvasSize()
+
+        this.videoElement?.addEventListener('loadedmetadata', () => {
+            this.setCanvasSize()
+        })
+
+        window.addEventListener('resize', () => {
+            this.setCanvasSize();
+        });
+    }
+
+
+    setCanvasSize() {
+        console.log("set Canva size")
+        const { videoWidth, videoHeight, offsetTop, offsetLeft } = this.videoElement as HTMLVideoElement
+        const aspectRatio = videoWidth / videoHeight;
+
+        const maxWidth = this.videoElement?.clientWidth || 0;
+        const maxHeight = this.videoElement?.clientHeight || 0;
+
+        let width = maxWidth;
+        let height = maxHeight;
+        let x = offsetLeft;
+        let y = offsetTop;
+
+        if (maxHeight * aspectRatio > maxWidth) {
+            width = maxWidth;
+            height = width / aspectRatio;
+            y += (maxHeight - height) / 2;
+        } else {
+            height = maxHeight;
+            width = height * aspectRatio;
+            x += (maxWidth - width) / 2;
+        }
+
+        if (this.canvas === null) {
+            this.canvas = newCanvas(y, x, width, height, this.videoElement as HTMLVideoElement)
+        } else {
+            this.canvas.style.position = 'absolute';
+            this.canvas.style.top = y + 'px';
+            this.canvas.style.left = x + 'px';
+            this.canvas.style.width = width + 'px';
+            this.canvas.style.height = height + 'px';
+            this.canvas.width = width;
+            this.canvas.height = height;
+        }
+
+    }
+}

src/types.ts

@@ -0,0 +1,11 @@
+export type ASSOptions = {
+    /**
+     * The ass text string
+     */
+    assText: string,
+    /**
+     * The video to display the subtile on.
+     * Can be either an `HTMLVideoElement` or `string` (html query selector)
+     */
+    video: HTMLVideoElement | string
+}

src/utils.ts

@@ -0,0 +1,57 @@
+/**
+ * Convert a color in RGBA format to Aegisub format
+ * @param aegisubColor The color in Aegisub format
+ * @returns The color in RGBA format
+ */
+export function convertAegisubToRGBA(aegisubColor: string) {
+	aegisubColor = aegisubColor.replace(/&H/g, '').replace(/&/g, '')
+	let alpha = parseInt(aegisubColor.slice(0, 2), 16) / 255 + 1
+	let red = parseInt(aegisubColor.slice(2, 4), 16)
+	let green = parseInt(aegisubColor.slice(4, 6), 16)
+	let blue = parseInt(aegisubColor.slice(6, 8), 16)
+
+	return 'rgba(' + red + ',' + green + ',' + blue + ',' + alpha + ')'
+}
+
+export function ruleOfThree(
+	value: number,
+	valueMin: number,
+) {
+	return (valueMin * 100) / value
+}
+
+export function genRandomString(ln: number) {
+	const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+	let randomString = '';
+
+	for (let i = 0; i < ln; i++) {
+	const randomIndex = Math.floor(Math.random() * characters.length);
+	randomString += characters.charAt(randomIndex);
+	}
+
+	return randomString;
+}
+
+export function newCanvas(top: number, left: number, width: number, height: number, insertAfter?: HTMLElement, zIndex?: number) {
+	const canvas = document.createElement('canvas');
+	canvas.style.position = 'absolute';
+	canvas.style.width = width + 'px';
+	canvas.style.height = height + 'px';
+	canvas.width = width;
+	canvas.height = height;
+	canvas.style.top = top + 'px';
+	canvas.style.left = left + 'px';
+	canvas.style.pointerEvents = 'none';
+	canvas.width = width;
+	canvas.height = height;
+
+	if (zIndex) {
+		canvas.style.zIndex = zIndex.toString();
+	}
+
+	if (insertAfter) {
+		insertAfter.after(canvas);
+	}
+	return canvas;
+}
+

tsconfig.json

@@ -1,12 +1,13 @@
 {
-  "compilerOptions": {
-    "target": "es2016", /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
-    "module": "commonjs", /* Specify what module code is generated. */
-    "esModuleInterop": true, /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */
-    "forceConsistentCasingInFileNames": true, /* Ensure that casing is correct in imports. */
-    "strict": true, /* Enable all strict type-checking options. */
-    "skipLibCheck": true, /* Skip type checking all .d.ts files. */
-    "noUncheckedIndexedAccess": true,
-    "noEmit": true
-  }
+	"compilerOptions": {
+		"target": "esnext" /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */,
+		"module": "commonjs" /* Specify what module code is generated. */,
+		"esModuleInterop": true /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */,
+		"forceConsistentCasingInFileNames": true /* Ensure that casing is correct in imports. */,
+		"strict": true /* Enable all strict type-checking options. */,
+		"skipLibCheck": true /* Skip type checking all .d.ts files. */,
+		"noUncheckedIndexedAccess": true,
+		"noEmit": true,
+		"lib": ["esnext", "dom"]
+	}
 }

tsup.config.ts

@@ -1,10 +1,11 @@
 import { defineConfig } from 'tsup'
 
 export default defineConfig({
-    entryPoints: ['src/index.ts'],
-    format: ['cjs', 'esm'],
-    dts: true,
-    clean: true,
-    splitting: true,
-    platform: 'browser',
+	entryPoints: ['src/index.ts'],
+	format: ['cjs', 'esm'],
+	dts: true,
+	clean: true,
+	splitting: true,
+	platform: 'browser',
+	target: 'es2018',
 })