Some bugs fixes

luxluth · Jul 12, 2023 · 01512ee · 01512ee
1 parent 2eed41c
commit 01512ee
Show file tree

Hide file tree

Showing 8 changed files with 852 additions and 719 deletions.
diff --git a/README.md b/README.md
@@ -10,9 +10,6 @@ Display ASS/SSA subtitles on html5 videos
 ![npm bundle size](https://img.shields.io/bundlephobia/min/ass-html5)
 ![npm](https://img.shields.io/npm/v/ass-html5?logo=npm&color=white&link=https%3A%2F%2Fwww.npmjs.com%2Fpackage%2Fass-html5)
 
-
 **🏗 PROJECT UNDER DEVELOPEMENT 🏗**
 
 </div>
-
-
diff --git a/src/animate.ts b/src/animate.ts
@@ -1,4 +1,4 @@
-import type { ASSAnimation } from "./types";
+import type { ASSAnimation } from './types'
 export class Animate {
-    constructor() {}
+	constructor() {}
 }
diff --git a/src/index.ts b/src/index.ts
@@ -4,88 +4,92 @@ 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
-    renderer: Renderer | null = null
-    constructor(
-        options: ASSOptions
-    ) {
-        this.assText = options.assText
-        this.video = options.video
-    }
+	assText: string
+	video: HTMLVideoElement | string
+	videoElement: HTMLVideoElement | null = null
+	canvas: HTMLCanvasElement | null = null
+	renderer: Renderer | 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 }
-
-        this.setCanvasSize()
-        this.renderer = new Renderer(parse(this.assText), this.canvas as HTMLCanvasElement, this.videoElement)
-        this.videoElement?.addEventListener('loadedmetadata', () => {
-            this.setCanvasSize()
-        })
+	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
+		}
 
-        window.addEventListener('resize', () => {
-            this.setCanvasSize();
-            this.renderer?.redraw()
-        });
+		this.setCanvasSize()
+		this.renderer = new Renderer(
+			parse(this.assText),
+			this.canvas as HTMLCanvasElement,
+			this.videoElement
+		)
+		this.videoElement?.addEventListener('loadedmetadata', () => {
+			this.setCanvasSize()
+		})
 
-        this.renderer.render()
-    }
+		window.addEventListener('resize', () => {
+			this.setCanvasSize()
+			this.renderer?.redraw()
+		})
 
-    destroy() {
-        this.videoElement?.removeEventListener('loadedmetadata', () => {
-            this.setCanvasSize()
-        })
-        window.removeEventListener('resize', () => {
-            this.setCanvasSize();
-            this.renderer?.redraw()
-        })
+		this.renderer.render()
+	}
 
-        this.canvas?.remove()
-        this.canvas = null
+	destroy() {
+		this.videoElement?.removeEventListener('loadedmetadata', () => {
+			this.setCanvasSize()
+		})
+		window.removeEventListener('resize', () => {
+			this.setCanvasSize()
+			this.renderer?.redraw()
+		})
 
-        this.renderer?.destroy()
-        this.renderer = null
-    }
+		this.canvas?.remove()
+		this.canvas = null
 
+		this.renderer?.destroy()
+		this.renderer = null
+	}
 
-    private setCanvasSize() {
-        const { videoWidth, videoHeight, offsetTop, offsetLeft } = this.videoElement as HTMLVideoElement
-        const aspectRatio = videoWidth / videoHeight;
+	private setCanvasSize() {
+		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;
+		const maxWidth = this.videoElement?.clientWidth || 0
+		const maxHeight = this.videoElement?.clientHeight || 0
 
-        let width = maxWidth;
-        let height = maxHeight;
-        let x = offsetLeft;
-        let y = offsetTop;
+		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 (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;
-        }
-
-    }
+		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
+		}
+	}
 }