From 3808bc0c3a4726fc91242160bdb9cc3568491ebd Mon Sep 17 00:00:00 2001
From: Alexander Cerutti <cerutti.alexander@gmail.com>
Date: Sun, 11 Feb 2024 23:58:43 +0100
Subject: [PATCH] CaptionsRenderer: Added check to fallback if originX and
 originY do not provide a measure unit

---
 .../captions-renderer/src/TreeOrchestrator.ts    | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/packages/captions-renderer/src/TreeOrchestrator.ts b/packages/captions-renderer/src/TreeOrchestrator.ts
index 99ff1bf..b5d01ed 100644
--- a/packages/captions-renderer/src/TreeOrchestrator.ts
+++ b/packages/captions-renderer/src/TreeOrchestrator.ts
@@ -31,6 +31,8 @@ export interface OrchestratorSettings {
 const LINES_TRANSITION_TIME_MS = 250;
 const ROOT_CLASS_NAME = "region";
 
+const UNIT_REGEX = /\d+\.?\d+?[a-zA-Z%]+$/;
+
 export default class TreeOrchestrator {
 	private static DEFAULT_SETTINGS: OrchestratorSettings = {
 		lines: 2,
@@ -63,16 +65,24 @@ export default class TreeOrchestrator {
 				trackRegionSettings?.lines || settings?.lines || TreeOrchestrator.DEFAULT_SETTINGS.lines,
 		};
 
-		const [originX, originY] = trackRegionSettings?.getOrigin(
+		let [originX, originY] = trackRegionSettings?.getOrigin(
 			parent.offsetWidth,
 			parent.offsetHeight,
 		) ?? ["0%", "70%"];
 
+		if (typeof originX === "number" || !UNIT_REGEX.test(originX)) {
+			originX = `${originX}%`;
+		}
+
+		if (typeof originY === "number" || !UNIT_REGEX.test(originY)) {
+			originY = `${originY}%`;
+		}
+
 		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);