DAM-7996

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

@@ -8,7 +8,6 @@ import {
 	Conditional,
 	Divider,
 	formatCredits,
-	getAspectRatio,
 	Heading,
 	HeadingSection,
 	Icon,
@@ -46,11 +45,10 @@ function parseArticleItem(item, index, arcSite, phrases, id, customFields) {
 		hideVideoTitle = false,
 		hideVideoCaption = false,
 		hideVideoCredits = false,
+		viewportPercentage = 65,
+		borderRadius = false,
+		aspectRatio,
 	} = customFields;
-
-	// 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
-
 	switch (type) {
 		case "text": {
 			return content && content.length > 0 ? (
@@ -215,16 +213,6 @@ function parseArticleItem(item, index, arcSite, phrases, id, customFields) {
 			}
 
 		case "video":
-			// Calculate the aspect ratio for the item. If the item doesn't have any promo items, then 16:9 is used as a fallback
-			if (item && item.promo_items && item.promo_items.basic) {
-				// 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;
-
-				// Assign the calculated value to aspectRatio if it is non-null, otherwise assign default 16:9
-				videoAspectRatio = getAspectRatio(width, height) || "16:9";
-			}
-
 			return (
 				<MediaItem
 					key={`${type}_${index}_${key}`}
@@ -233,9 +221,11 @@ function parseArticleItem(item, index, arcSite, phrases, id, customFields) {
 					title={!hideVideoTitle ? item?.headlines?.basic : null}
 				>
 					<Video
-						aspectRatio={videoAspectRatio}
+						aspectRatio={aspectRatio}
+						viewportPercentage={viewportPercentage}
 						className="video-container"
 						embedMarkup={item.embed_html}
+						borderRadius={borderRadius}
 					/>
 				</MediaItem>
 			);
@@ -463,6 +453,33 @@ ArticleBodyChain.propTypes = {
 			defaultValue: false,
 			group: "Gallery Display Options",
 		}),
+		aspectRatio: PropTypes.oneOf(["--", "16:9", "9:16", "1:1", "4:3"]).isRequired.tag({
+			description:
+				"Aspect ratio to use in player (Defaults to the aspect ratio of the resolved video)",
+			label: "Player Aspect Ratio",
+			defaultValue: "--",
+			group: "Video Display Options",
+			labels: {
+				"--": "Video Source",
+				"16:9": "16:9",
+				"9:16": "9:16",
+				"1:1": "1:1",
+				"4:3": "4:3",
+			},
+		}),
+		viewportPercentage: PropTypes.number.tag({
+			description:
+				"Height percentage the player takes from viewport (Applies only for 9:16 videos)",
+			label: "View height percentage",
+			defaultValue: 65,
+			group: "Video Display Options",
+		}),
+		borderRadius: PropTypes.bool.tag({
+			description: "Applies only for 9:16 videos",
+			label: "Round player corners",
+			defaultValue: false,
+			group: "Video Display Options",
+		}),
 		hideVideoTitle: PropTypes.bool.tag({
 			description: "This display option applies to all Videos in the Article Body",
 			label: "Hide Title",

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

@@ -17,33 +17,6 @@ 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}</>,
 }));
 
@@ -2290,40 +2263,6 @@ describe("article-body chain", () => {
 
 			expect(wrapper.find("Video").length).toEqual(1);
 		});
-
-		it("correctly calculates the aspect ratio of a video", () => {
-			useFusionContext.mockImplementation(() => ({
-				globalContent: {
-					_id: "NGGXZJ4HAJH5DI3SS65EVBMEMQ",
-					type: "story",
-					version: "0.10.6",
-					content_elements: [
-						{
-							_id: "TLF25CWTCBBOHOVFPK4C2RR5JA",
-							type: "video",
-							headlines: {
-								basic: "Title",
-							},
-							description: {
-								basic: "Caption",
-							},
-							promo_items: {
-								basic: {
-									width: 1000,
-									height: 500,
-								},
-							},
-						},
-					],
-				},
-				arcSite: "the-sun",
-			}));
-
-			const wrapper = mount(<ArticleBodyChain />);
-
-			expect(wrapper.find("Video")).toExist();
-			expect(wrapper.find("Video").prop("aspectRatio")).toEqual("2:1");
-		});
 	});
 
 	describe("Render gallery type", () => {

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

@@ -9,7 +9,6 @@ import {
 	Carousel,
 	formatCredits,
 	formatPowaVideoEmbed,
-	getAspectRatio,
 	Icon,
 	Image,
 	MediaItem,
@@ -97,28 +96,17 @@ export const LeadArtPresentation = (props) => {
 				playthrough: customFields?.playthrough,
 			});
 
-			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;
-
-				// Assign the calculated value to aspectRatio if it is non-null, otherwise assign default 16:9
-				aspectRatio = getAspectRatio(width, height) || "16:9";
-			}
-
 			return (
 				<MediaItem
 					caption={!hideCaption ? leadArt?.description?.basic : null}
 					credit={!hideCredits ? formatCredits(leadArt.credits) : null}
 					title={!hideTitle ? leadArt?.headlines?.basic : null}
 				>
 					<Video
-						aspectRatio={aspectRatio}
+						aspectRatio={customFields?.aspectRatio}
 						embedMarkup={embedMarkup}
 						viewportPercentage={customFields?.viewportPercentage}
+						borderRadius={customFields?.borderRadius}
 					/>
 				</MediaItem>
 			);
@@ -304,6 +292,27 @@ LeadArt.propTypes = {
 			defaultValue: false,
 			group: "Video",
 		}),
+		viewportPercentage: PropTypes.number.tag({
+			description:
+				"Height percentage the player takes from viewport (Applies only for 9:16 videos)",
+			label: "View height percentage",
+			defaultValue: 65,
+			group: "Video",
+		}),
+		aspectRatio: PropTypes.oneOf(["--", "16:9", "9:16", "1:1", "4:3"]).isRequired.tag({
+			description:
+				"Aspect ratio to use in player (Defaults to the aspect ratio of the resolved video)",
+			label: "Player Aspect Ratio",
+			defaultValue: "--",
+			group: "Video",
+			labels: {
+				"--": "Video Source",
+				"16:9": "16:9",
+				"9:16": "9:16",
+				"1:1": "1:1",
+				"4:3": "4:3",
+			},
+		}),
 		hideTitle: PropTypes.bool.tag({
 			description:
 				"This display option applies to Lead Art media types: Images, Gallery, and Video",
@@ -325,6 +334,12 @@ LeadArt.propTypes = {
 			defaultValue: false,
 			group: "Display Options",
 		}),
+		borderRadius: PropTypes.bool.tag({
+			label: "Round player corners",
+			description: "Applies only for 9:16 videos",
+			defaultValue: false,
+			group: "Video",
+		}),
 		imageLoadingStrategy: PropTypes.oneOf(["lazy", "eager"]).tag({
 			label: "Image Loading Strategy",
 			defaultValue: "eager",

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

@@ -2,40 +2,10 @@ import React from "react";
 import { render } from "@testing-library/react";
 import getProperties from "fusion:properties";
 import { useFusionContext } from "fusion:context";
-import { useContent } from "fusion:content";
 import LeadArt from "./default";
 
-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"),
 	})),
@@ -316,28 +286,4 @@ describe("LeadArt", () => {
 		const { container } = render(<LeadArt customFields={{}} />);
 		expect(container.firstChild).toBeNull();
 	});
-
-	it("correctly calculates the aspect ratio of a vertical video", () => {
-		const globalContent = {
-			promo_items: {
-				lead_art: {
-					type: "video",
-					promo_items: {
-						basic: {
-							width: 49,
-							height: 49,
-						},
-					},
-				},
-			},
-		};
-
-		useFusionContext.mockImplementation(() => ({ globalContent }));
-		useContent.mockImplementation(() => globalContent);
-		const wrapper = mount(<LeadArt customFields={{}} />);
-
-		expect(useContent).toHaveBeenCalledTimes(0);
-		expect(wrapper.find("Video")).toExist();
-		expect(wrapper.find("Video").prop("aspectRatio")).toEqual("1:1");
-	});
 });

blocks/product-gallery-block/README.md

@@ -6,8 +6,8 @@ As a Page Builder user, I want to add the Product Gallery - Arc Block to my PDP
 
 | **Prop**               | **Required** | **Type** | **Description**                                            |
 | ---------------------- | ------------ | -------- | ---------------------------------------------------------- |
-| isFeaturedImageEnabled | no          | boolean  | Display the product’s featured image.                      |
-| indicatorType          | no          | string   | Type of indicator to be displayed, like thumbnail or dots. |
+| isFeaturedImageEnabled | no           | boolean  | Display the product’s featured image.                      |
+| indicatorType          | no           | string   | Type of indicator to be displayed, like thumbnail or dots. |
 
 ## ANS Schema