From 90567faab4f2e4d8b612cee85f60d77c74c3eee9 Mon Sep 17 00:00:00 2001
From: David Schulte <mail@david-schulte.de>
Date: Wed, 30 Oct 2024 21:10:03 +0100
Subject: [PATCH] Added an `aspectRatio` property to control the `object-fit`
 property of the subtitle canvas.

---
 src/pgsRenderer.ts        | 25 ++++++++++++++++++++++++-
 src/pgsRendererOptions.ts |  5 +++++
 2 files changed, 29 insertions(+), 1 deletion(-)

diff --git a/src/pgsRenderer.ts b/src/pgsRenderer.ts
index 2ed3596..ec04103 100644
--- a/src/pgsRenderer.ts
+++ b/src/pgsRenderer.ts
@@ -43,6 +43,9 @@ export class PgsRenderer {
 
         // Load initial settings
         this.$timeOffset = options.timeOffset ?? 0;
+        if (options.aspectRatio) {
+            this.aspectRatio = options.aspectRatio;
+        }
         if (options.subUrl) {
             this.loadFromUrl(options.subUrl);
         }
@@ -149,7 +152,7 @@ export class PgsRenderer {
         canvas.style.right = '0';
         canvas.style.bottom = '0';
         canvas.style.pointerEvents = 'none';
-        canvas.style.objectFit = 'contain';
+        canvas.style.objectFit = this.$aspectRatio;
         canvas.style.width = '100%';
         canvas.style.height = '100%';
         return canvas;
@@ -159,6 +162,26 @@ export class PgsRenderer {
         this.canvas.remove();
     }
 
+    private $aspectRatio: 'contain' | 'cover' | 'fill' = 'contain';
+
+    /**
+     * Gets the aspect ratio mode of the canvas.
+     */
+    public get aspectRatio(): 'contain' | 'cover' | 'fill' {
+        return this.$aspectRatio;
+    }
+
+    /**
+     * Sets the aspect ratio mode of the canvas. This should match the `object-fit` property of the video.
+     * @param aspectMode The aspect mode.
+     */
+    public set aspectRatio(aspectMode: 'contain' | 'cover' | 'fill') {
+        this.$aspectRatio = aspectMode;
+
+        // Update the canvas
+        this.canvas.style.objectFit = this.$aspectRatio;
+    }
+
     // endregion
 
     // region Dispose
diff --git a/src/pgsRendererOptions.ts b/src/pgsRendererOptions.ts
index 95a8a5b..aaeb4c4 100644
--- a/src/pgsRendererOptions.ts
+++ b/src/pgsRendererOptions.ts
@@ -18,6 +18,11 @@ export interface PgsRendererOptions {
      */
     timeOffset?: number;
 
+    /**
+     * The canvas aspect ratio mode. This should match the `object-fit` property of the video.
+     */
+    aspectRatio?: 'contain' | 'cover' | 'fill';
+
     /**
      * The initial subtitle file url to load from.
      */