Merge branch 'feature/region-percentage' into develop

packages/captions-renderer/src/TreeOrchestrator.ts

@@ -66,13 +66,13 @@ export default class TreeOrchestrator {
 		const [originX, originY] = trackRegionSettings?.getOrigin(
 			parent.offsetWidth,
 			parent.offsetHeight,
-		) ?? [0, 70];
+		) ?? ["0%", "70%"];
 
 		const rootStyles: Partial<CSSStyleDeclaration> = {
 			width: `${trackRegionSettings?.width ?? 100}%`,
 			height: `${this.settings.lines * 1.5}em`,
-			left: `${originX}%`,
-			top: `${originY}%`,
+			left: originX,
+			top: originY,
 		};
 
 		Object.assign(root.style, rootStyles);

packages/server/src/Region.ts

@@ -13,20 +13,20 @@ export interface Region {
 	/**
 	 * Allows each parser how to express
 	 * the position of the region.
+	 *
+	 * @returns {[x: string, y: string]} coordinates with measure unit
 	 */
 
-	getOrigin(): [x: number | string, y: number | string];
+	getOrigin(): [x: string, y: string];
 
 	/**
 	 * Allows each parser how to express
 	 * the position of the region based on runtime data
 	 *
 	 * @param viewportWidth
 	 * @param viewportHeight
+	 * @returns {[x: string, y: string]} coordinates with measure unit
 	 */
 
-	getOrigin(
-		viewportWidth: number,
-		viewportHeight: number,
-	): [x: number | string, y: number | string];
+	getOrigin(viewportWidth: number, viewportHeight: number): [x: string, y: string];
 }

packages/webvtt-adapter/src/Parser/parseRegion.ts

@@ -19,7 +19,22 @@ export function parseRegion(rawRegionData: string): Region {
 			case "regionanchor":
 			case "viewportanchor": {
 				const [x = "0%", y = "0%"] = value.split(",");
-				region[key] = [parseInt(x), parseInt(y)];
+
+				if (!x.endsWith("%") || !y.endsWith("%")) {
+					break;
+				}
+
+				const xInteger = parseInt(x);
+				const yInteger = parseInt(y);
+
+				if (Number.isNaN(xInteger) || Number.isNaN(yInteger)) {
+					break;
+				}
+
+				const clampedX = Math.max(0, Math.min(xInteger, 100));
+				const clampedY = Math.max(0, Math.min(yInteger, 100));
+
+				region[key] = [clampedX, clampedY];
 				break;
 			}
 
@@ -92,7 +107,7 @@ class WebVTTRegion implements Region {
 	 */
 	public regionanchor?: [number, number];
 
-	public getOrigin(): [x: number, y: number] {
+	public getOrigin(): [x: string, y: string] {
 		const height = VH_LINE_HEIGHT * this.lines;
 
 		const [regionAnchorWidth = 0, regionAnchorHeight = 0] = this.regionanchor || [];
@@ -106,8 +121,8 @@ class WebVTTRegion implements Region {
 		const leftOffset = (regionAnchorWidth * this.width) / 100;
 		const topOffset = (regionAnchorHeight * height) / 100;
 
-		const originX = viewportAnchorWidth - leftOffset;
-		const originY = viewportAnchorHeight - topOffset;
+		const originX = `${viewportAnchorWidth - leftOffset}%`;
+		const originY = `${viewportAnchorHeight - topOffset}%`;
 
 		return [originX, originY];
 	}

tsconfig.build.json

@@ -17,5 +17,6 @@
 		"moduleResolution": "node",
 		"noImplicitReturns": true,
 		"lib": ["DOM", "ES2018", "ES2020"]
-	}
+	},
+	"include": ["packages/**/src/**/*"]
 }