diff --git a/src/index.ts b/src/index.ts index a1a8059..cfa6563 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,4 +1,5 @@ import { parse } from 'ass-compiler' +import { Renderer } from './renderer' import { ASSOptions } from './types' import { newCanvas } from './utils' @@ -7,6 +8,7 @@ export default class ASS { video: HTMLVideoElement | string videoElement: HTMLVideoElement | null = null canvas: HTMLCanvasElement| null = null + renderer: Renderer | null = null constructor( options: ASSOptions ) { @@ -23,21 +25,23 @@ export default class ASS { } else { this.videoElement = this.video } - console.log(this.videoElement) + this.setCanvasSize() - + this.renderer = new Renderer(parse(this.assText), this.canvas as HTMLCanvasElement) this.videoElement?.addEventListener('loadedmetadata', () => { this.setCanvasSize() }) window.addEventListener('resize', () => { this.setCanvasSize(); + this.renderer?.redraw() }); + + this.renderer.render() } setCanvasSize() { - console.log("set Canva size") const { videoWidth, videoHeight, offsetTop, offsetLeft } = this.videoElement as HTMLVideoElement const aspectRatio = videoWidth / videoHeight; diff --git a/src/renderer.ts b/src/renderer.ts new file mode 100644 index 0000000..19c9ce3 --- /dev/null +++ b/src/renderer.ts @@ -0,0 +1,20 @@ +import type { ParsedASS } from "ass-compiler"; +export class Renderer { + parsedAss: ParsedASS + canvas: HTMLCanvasElement + ctx: CanvasRenderingContext2D + constructor(parsedASS: ParsedASS, canvas: HTMLCanvasElement) { + this.parsedAss = parsedASS + this.canvas = canvas + this.ctx = canvas.getContext("2d") as CanvasRenderingContext2D + if (this.ctx === null) { throw new Error("Unable to initilize the Canvas 2D context") } + let data = [ + {parsedAss : this.parsedAss}, + {canvas : this.canvas}, + {ctx : this.ctx} + ] + console.debug(data) + } + render() {} + redraw() {} +}