Fixed subtitle positions to match FFmpeg

README.md

@@ -12,7 +12,7 @@ If you know a movie or show that is using the cropping feature, please let me kn
 ## Requirements
 
 This library requires the following web features:
-- [Web Worker API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API)
+- [Web Worker API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API) *(optional sine 0.6.0)*
 - [OffscreenCanvas](https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas) *(optional sine 0.5.0)*
   - If available rendering is done inside the web-worker. If `transferControlToOffscreen` isn't supported a fallback 
   is used where the subtitles are renderer on the main thread.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "libpgs",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "author": "David Schulte",
   "license": "MIT",
   "description": "Renderer for graphical subtitles (PGS) in the browser. ",

src/pgs.ts

@@ -188,7 +188,8 @@ export class Pgs {
             // Builds the subtitle.
             const pixelData = this.getPixelDataFromComposition(compositionObject, palette, ctxObjects);
             if (pixelData) {
-                compositionData.push(new SubtitleCompositionData(window, pixelData));
+                compositionData.push(new SubtitleCompositionData(
+                  compositionObject.horizontalPosition, compositionObject.verticalPosition, window, pixelData));
             }
         }
 

src/renderer.ts

@@ -63,7 +63,7 @@ export class Renderer {
      * @param dirtyArea If given, it will extend the dirty rect to include the affected subtitle area.
      */
     private drawSubtitleCompositionData(compositionData: SubtitleCompositionData, dirtyArea?: Rect): void {
-        this.context?.putImageData(compositionData.pixelData, compositionData.window.horizontalPosition, compositionData.window.verticalPosition);
+        this.context?.putImageData(compositionData.pixelData, compositionData.x, compositionData.y);
 
         // Mark this area as dirty.
         dirtyArea?.union(compositionData.window.horizontalPosition, compositionData.window.verticalPosition,

src/subtitleData.ts

@@ -30,6 +30,16 @@ export class SubtitleData {
  * This class contains the compiled subtitle data for a single composition.
  */
 export class SubtitleCompositionData {
+    /**
+     * The x position of the image in pixels from the left edge of the canvas.
+     */
+    public readonly x: number;
+
+    /**
+     * The y position of the image in pixels from the top edge of the canvas.
+     */
+    public readonly y: number;
+
     /**
      * The pgs window to draw on (the on-screen position).
      */
@@ -40,7 +50,9 @@ export class SubtitleCompositionData {
      */
     public readonly pixelData: ImageData;
 
-    public constructor(window: WindowDefinition, pixelData: ImageData) {
+    public constructor(x: number, y: number, window: WindowDefinition, pixelData: ImageData) {
+        this.x = x;
+        this.y = y;
         this.window = window;
         this.pixelData = pixelData;
     }