Video blocks use util fxn, and tests updated

blocks/article-body-block/chains/article-body/default.jsx

@@ -7,6 +7,7 @@ import {
 	Conditional,
 	Divider,
 	formatCredits,
+	getAspectRatio,
 	Heading,
 	HeadingSection,
 	Icon,
@@ -46,19 +47,6 @@ function parseArticleItem(item, index, arcSite, phrases, id, customFields) {
 		hideVideoCredits = false,
 	} = customFields;
 
-	// Helper function to find the Greatest Common Denominator (GCD) of two numbers. This is used to calculate the aspect ratio
-	const gcd = (valA, valB) => {
-		let a = Math.abs(valA);
-		let b = Math.abs(valB);
-		while (b) {
-			const temp = b;
-			b = a % b;
-			a = temp;
-		}
-
-		return a;
-	};
-
 	// This is up here to prevent a lexical declaration in a case block (which throws an error). It goes with the "video" case
 	let videoAspectRatio = "16:9"; // Default to 16:9
 
@@ -231,12 +219,9 @@ function parseArticleItem(item, index, arcSite, phrases, id, customFields) {
 				// Get the width and height of the promo item and calculate the aspect ratio
 				const width = item?.promo_items.basic.width;
 				const height = item?.promo_items.basic.height;
-				const divisor = gcd(width, height);
-				const aspectWidth = width / divisor;
-				const aspectHeight = height / divisor;
 
-				// Assign the new value to videoAspectRatio
-				videoAspectRatio = `${aspectWidth}:${aspectHeight}`;
+				// Assign the calculated value to aspectRatio if it is non-null, otherwise assign default 16:9
+				videoAspectRatio = getAspectRatio(width, height) || "16:9";
 			}
 
 			return (

blocks/article-body-block/chains/article-body/default.test.jsx

@@ -18,6 +18,33 @@ jest.mock("fusion:properties", () =>
 jest.mock("@wpmedia/arc-themes-components", () => ({
 	...jest.requireActual("@wpmedia/arc-themes-components"),
 	isServerSide: jest.fn(),
+	getAspectRatio: (width, height) => {
+		// This arrow function is equivalent to what is in @wpmedia/arc-themes-components/src/utils/get-aspect-ratio/utils.js
+		// Helper function to find GCD
+		const gcd = (valA, valB) => {
+			let a = Math.abs(valA);
+			let b = Math.abs(valB);
+			while (b) {
+				const temp = b;
+				b = a % b;
+				a = temp;
+			}
+
+			return a;
+		};
+
+		// Return undefined if height === 0, so there is no division by zero error
+		if (height === 0) {
+			return undefined;
+		}
+
+		// Calculate the aspect ratio
+		const divisor = gcd(width, height);
+		const aspectWidth = width / divisor;
+		const aspectHeight = height / divisor;
+
+		return `${aspectWidth}:${aspectHeight}`;
+	},
 	LazyLoad: ({ children }) => <>{children}</>,
 }));
 

blocks/lead-art-block/features/leadart/default.jsx

@@ -9,6 +9,7 @@ import {
 	Carousel,
 	formatCredits,
 	formatPowaVideoEmbed,
+	getAspectRatio,
 	Icon,
 	Image,
 	MediaItem,
@@ -96,32 +97,16 @@ export const LeadArtPresentation = (props) => {
 				playthrough: customFields?.playthrough,
 			});
 
-			// Helper function to find the Greatest Common Denominator (GCD) of two numbers. This is used to calculate the aspect ratio
-			const gcd = (valA, valB) => {
-				let a = Math.abs(valA);
-				let b = Math.abs(valB);
-				while (b) {
-					const temp = b;
-					b = a % b;
-					a = temp;
-				}
-
-				return a;
-			};
-
 			let aspectRatio = "16:9"; // Default to 16:9
 
 			// Make sure that the content source exists and has an existing promo item
 			if (leadArt && leadArt.promo_items && leadArt.promo_items.basic) {
 				// Get the width and height of the promo item and calculate the aspect ratio
 				const width = leadArt?.promo_items.basic.width;
 				const height = leadArt?.promo_items.basic.height;
-				const divisor = gcd(width, height);
-				const aspectWidth = width / divisor;
-				const aspectHeight = height / divisor;
 
-				// Assign the calculated value to aspectRatio
-				aspectRatio = `${aspectWidth}:${aspectHeight}`;
+				// Assign the calculated value to aspectRatio if it is non-null, otherwise assign default 16:9
+				aspectRatio = getAspectRatio(width, height) || "16:9";
 			}
 
 			return (

blocks/lead-art-block/features/leadart/default.test.jsx

@@ -9,6 +9,33 @@ const { mount } = require("enzyme");
 
 jest.mock("@wpmedia/arc-themes-components", () => ({
 	...jest.requireActual("@wpmedia/arc-themes-components"),
+	getAspectRatio: (width, height) => {
+		// This arrow function is equivalent to what is in @wpmedia/arc-themes-components/src/utils/get-aspect-ratio/utils.js
+		// Helper function to find GCD
+		const gcd = (valA, valB) => {
+			let a = Math.abs(valA);
+			let b = Math.abs(valB);
+			while (b) {
+				const temp = b;
+				b = a % b;
+				a = temp;
+			}
+
+			return a;
+		};
+
+		// Return undefined if height === 0, so there is no division by zero error
+		if (height === 0) {
+			return undefined;
+		}
+
+		// Calculate the aspect ratio
+		const divisor = gcd(width, height);
+		const aspectWidth = width / divisor;
+		const aspectHeight = height / divisor;
+
+		return `${aspectWidth}:${aspectHeight}`;
+	},
 	usePhrases: jest.fn(() => ({
 		t: jest.fn().mockReturnValue("gallery-expand"),
 	})),

blocks/video-player-block/features/video-player/default.test.jsx

@@ -12,6 +12,33 @@ jest.mock("@wpmedia/arc-themes-components", () => {
 		...original,
 		formatCredits: (value) => value,
 		formatPowaVideoEmbed: (value) => value,
+		getAspectRatio: (width, height) => {
+			// This arrow function is equivalent to what is in @wpmedia/arc-themes-components/src/utils/get-aspect-ratio/utils.js
+			// Helper function to find GCD
+			const gcd = (valA, valB) => {
+				let a = Math.abs(valA);
+				let b = Math.abs(valB);
+				while (b) {
+					const temp = b;
+					b = a % b;
+					a = temp;
+				}
+
+				return a;
+			};
+
+			// Return undefined if height === 0, so there is no division by zero error
+			if (height === 0) {
+				return undefined;
+			}
+
+			// Calculate the aspect ratio
+			const divisor = gcd(width, height);
+			const aspectWidth = width / divisor;
+			const aspectHeight = height / divisor;
+
+			return `${aspectWidth}:${aspectHeight}`;
+		},
 		Video: ({ embedMarkup }) => <div dangerouslySetInnerHTML={{ __html: embedMarkup }} />,
 	};
 });