WS-NA - Bug Fix - Use correct Tipo Image for in-situ promos (Arabic-only)

src/app/components/Curation/HierarchicalGrid/index.test.tsx

@@ -246,6 +246,7 @@ describe('Hierarchical Grid Curation', () => {
         blocks: aresMediaBlocks,
         uniqueId: `in-situ-${inSituPromo.id}`,
         loadPlayerOnInitialRender: true,
+        holdingImageURL: inSituPromo.imageUrl,
       }),
       undefined,
     );

src/app/components/Curation/HierarchicalGrid/index.tsx

@@ -205,6 +205,7 @@ const HiearchicalGrid = ({
                       blocks={inSituMediaBlocks}
                       uniqueId={`in-situ-${promo.id || i}`}
                       loadPlayerOnInitialRender
+                      holdingImageURL={promo.imageUrl}
                     />
                   </div>
                   <div className="promo-text">{promoText}</div>

src/app/components/MediaLoader/configs/aresMedia.ts

@@ -29,6 +29,7 @@ export default ({
   showAdsBasedOnLocation = false,
   embedded,
   lang,
+  holdingImageURL: holdingImageURLOverride,
 }: ConfigBuilderProps): ConfigBuilderReturnProps => {
   const { model: aresMedia }: AresMediaBlock =
     filterForBlockType(blocks, 'aresMedia') ?? {};
@@ -87,13 +88,15 @@ export default ({
   // Referred to as 'clip PID', 'episode PID' or 'parent PID'
   const parentPID = aresMediaMetadata?.id;
 
-  const holdingImageURL = rawImage
-    ? buildIChefURL({
-        originCode,
-        locator,
-        resolution: DEFAULT_WIDTH,
-      })
-    : aresMediaMetadata?.imageUrl;
+  const holdingImageURL =
+    holdingImageURLOverride?.replace('{width}', String(DEFAULT_WIDTH)) ||
+    (rawImage
+      ? buildIChefURL({
+          originCode,
+          locator,
+          resolution: DEFAULT_WIDTH,
+        })
+      : aresMediaMetadata?.imageUrl);
 
   const isLive = aresMediaMetadata?.live ?? false;
 
@@ -116,8 +119,10 @@ export default ({
     guidanceMessage,
     holdingImageURL,
     translations,
-    placeholderImageOriginCode: originCode,
-    placeholderImageLocator: locator,
+    placeholderImageOriginCode: holdingImageURLOverride
+      ? undefined
+      : originCode,
+    placeholderImageLocator: holdingImageURLOverride ? undefined : locator,
   });
 
   const ampIframeUrl = getAmpIframeUrl({ id, parentPID, versionPID, lang });

src/app/components/MediaLoader/index.test.tsx

@@ -385,6 +385,25 @@ describe('MediaLoader', () => {
         );
       },
     );
+
+    it('passes a supplied holding image to the player configuration', async () => {
+      const buildConfigSpy = jest.spyOn(buildConfig, 'default');
+      const holdingImageURL =
+        'https://ichef.bbci.co.uk/ace/ws/{width}/cpsprodpb/promo-image.jpg.webp';
+
+      await act(async () => {
+        render(
+          <MediaPlayer
+            blocks={aresMediaBlocks as MediaBlock[]}
+            holdingImageURL={holdingImageURL}
+          />,
+        );
+      });
+
+      expect(buildConfigSpy).toHaveBeenCalledWith(
+        expect.objectContaining({ holdingImageURL }),
+      );
+    });
   });
 
   describe('AMP', () => {

src/app/components/MediaLoader/index.tsx

@@ -218,6 +218,7 @@ type Props = {
   uniqueId?: string;
   eventMapping?: EventMapping;
   loadPlayerOnInitialRender?: boolean;
+  holdingImageURL?: string;
 };
 
 const MediaLoader = ({
@@ -227,6 +228,7 @@ const MediaLoader = ({
   uniqueId,
   eventMapping,
   loadPlayerOnInitialRender = false,
+  holdingImageURL,
 }: Props) => {
   const { lang, service, translations, defaultImage } = use(ServiceContext);
   const { pageIdentifier } = use(EventTrackingContext);
@@ -268,6 +270,7 @@ const MediaLoader = ({
     showAdsBasedOnLocation,
     embedded,
     defaultImage,
+    holdingImageURL,
   });
 
   if (!config) return null;

src/app/components/MediaLoader/types.ts

@@ -124,6 +124,7 @@ export type ConfigBuilderProps = {
   embedded?: boolean;
   lang: string;
   defaultImage: string;
+  holdingImageURL?: string;
 };
 
 export type Orientations = 'landscape' | 'portrait';
@@ -382,4 +383,5 @@ export type BuildConfigProps = {
   showAdsBasedOnLocation?: boolean;
   embedded?: boolean;
   defaultImage: string;
+  holdingImageURL?: string;
 };

src/app/components/MediaLoader/utils/buildSettings.client.test.ts

@@ -412,6 +412,24 @@ describe('buildSettings', () => {
   });
 
   describe('AresMedia', () => {
+    it('uses a supplied holding image instead of the Ares media image', () => {
+      const holdingImageURL =
+        'https://ichef.bbci.co.uk/ace/ws/{width}/cpsprodpb/promo-image.jpg.webp';
+      const result = buildSettings({
+        ...baseSettings,
+        blocks: aresMediaBlocks as MediaBlock[],
+        holdingImageURL,
+      });
+
+      expect(result?.playerConfig.playlistObject?.holdingImageURL).toBe(
+        holdingImageURL.replace('{width}', '512'),
+      );
+      expect(result?.placeholderConfig).toMatchObject({
+        placeholderSrc: holdingImageURL.replace('{width}', '512'),
+        placeholderSrcset: '',
+      });
+    });
+
     it('Should process an AresMedia block into a valid playlist item for an "article" page.', () => {
       const result = buildSettings({
         ...baseSettings,

src/app/components/MediaLoader/utils/buildSettings.ts

@@ -40,6 +40,7 @@ const buildSettings = ({
   showAdsBasedOnLocation = false,
   embedded,
   defaultImage,
+  holdingImageURL,
 }: BuildConfigProps) => {
   const { model: mediaOverrides } =
     filterForBlockType(blocks, 'mediaOverrides') || {};
@@ -86,6 +87,7 @@ const buildSettings = ({
     embedded,
     lang,
     defaultImage,
+    holdingImageURL,
   });
 
   if (!config) return null;