Legacy media support in MediaLoader (#12029)

* `legacyMedia` block type support

* Add settings test

* Add Storybook story

* Update index.stories.tsx

* Comment fixes

- Add title to placeholder config
- Add 'kind' to playlist items

* Test fix

* Update buildSettings.test.ts

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

@@ -4,6 +4,7 @@ import aresMedia from './aresMedia';
 import tv from './tv';
 import liveRadio from './liveRadio';
 import audio from './audio';
+import legacyMedia from './legacyMedia';
 
 import {
   ConfigBuilderReturnProps,
@@ -17,6 +18,7 @@ const BLOCK_TYPES = [
   'tv',
   'liveRadio',
   'audio',
+  'legacyMedia',
 ] as const;
 
 const blockTypeMapping: Record<
@@ -28,6 +30,7 @@ const blockTypeMapping: Record<
   tv,
   liveRadio,
   audio,
+  legacyMedia,
 };
 
 export default (blocks: MediaBlock[]) => {

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

@@ -0,0 +1,49 @@
+import { MediaOverrides } from '#app/models/types/media';
+import filterForBlockType from '#lib/utilities/blockHandlers';
+import {
+  LegacyMediaBlock,
+  ConfigBuilderProps,
+  ConfigBuilderReturnProps,
+} from '../types';
+import buildPlaceholderConfig from '../utils/buildPlaceholderConfig';
+
+export default ({
+  blocks,
+  basePlayerConfig,
+  translations,
+}: ConfigBuilderProps): ConfigBuilderReturnProps => {
+  const legacyMediaBlock: LegacyMediaBlock =
+    filterForBlockType(blocks, 'legacyMedia') ?? {};
+
+  const { model: mediaOverrides }: MediaOverrides =
+    filterForBlockType(blocks, 'mediaOverrides') || {};
+
+  const { image, format, playlist } = legacyMediaBlock?.content ?? {};
+
+  const placeholderConfig = buildPlaceholderConfig({
+    title: mediaOverrides?.pageTitleOverride || '',
+    type: format || 'video',
+    holdingImageURL: image?.href,
+    translations,
+  });
+
+  const mp4Items = playlist
+    ?.filter(item => item.format === 'mp4')
+    ?.map(item => ({ href: item.url, kind: 'programme' }));
+
+  return {
+    mediaType: format || 'video',
+    playerConfig: {
+      ...basePlayerConfig,
+      playlistObject: {
+        title: mediaOverrides?.pageTitleOverride || '',
+        holdingImageURL: image?.href,
+        items: mp4Items,
+      },
+      ui: basePlayerConfig.ui,
+      statsObject: basePlayerConfig.statsObject,
+    },
+    placeholderConfig,
+    showAds: false,
+  };
+};

src/app/components/MediaLoader/fixture.ts

@@ -374,6 +374,57 @@ export const onDemandTvBlock = {
   },
 };
 
+export const legacyMediaBlock = [
+  {
+    type: 'legacyMedia',
+    content: {
+      id: '28780250',
+      subType: 'primary',
+      format: 'video',
+      image: {
+        id: '28780250',
+        subType: 'thumbnail',
+        href: 'http://a.files.bbci.co.uk/worldservice/live/assets/images/2013/12/08/131208135805_iraq_blast_640x360_bbc_nocredit.jpg',
+        path: '/amz/worldservice/live/assets/images/2013/12/08/131208135805_iraq_blast_640x360_bbc_nocredit.jpg',
+        height: 360,
+        width: 640,
+        altText: 'اثار التفجير على احدى السيارات في بغداد',
+        copyrightHolder: '',
+      },
+      aspectRatio: '16:9',
+      live: false,
+      href: 'http://www.bbc.co.uk/arabic/meta/dps/2013/12/emp/131208_iraq_blast_.emp.xml',
+      playlist: [
+        {
+          format: '3gp',
+          bitrate: '80000',
+          url: 'https://wsodprogrf.akamaized.net/arabic/3gp/2013/12/iraqblast_16x9_lo.3gp',
+        },
+        {
+          format: '3gp',
+          bitrate: '160000',
+          url: 'https://wsodprogrf.akamaized.net/zhongwen/simp/3gp/2013/12/iraqblast_16x9_hi.3gp',
+        },
+        {
+          format: 'mp4',
+          bitrate: '168000',
+          url: 'https://wsodprogrf.akamaized.net/arabic/dps/2013/12/iraqblast_16x9_lo.mp4',
+        },
+        {
+          format: 'mp4',
+          bitrate: '320000',
+          url: 'https://wsodprogrf.akamaized.net/arabic/dps/2013/12/iraqblast_16x9_med.mp4',
+        },
+        {
+          format: 'mp4',
+          bitrate: '904000',
+          url: 'https://wsodprogrf.akamaized.net/arabic/dps/2013/12/iraqblast_16x9_hi.mp4',
+        },
+      ],
+    },
+  },
+];
+
 export const mediaOverridesBlock = {
   model: {
     language: 'hi',

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

@@ -6,6 +6,7 @@ import {
   aresMediaBlocks,
   aresMediaPortraitBlocks,
   clipMediaBlocks,
+  legacyMediaBlock,
 } from './fixture';
 import { MediaBlock } from './types';
 import readme from './README.md';
@@ -53,6 +54,14 @@ export const Portrait = () => (
   />
 );
 
+export const LegacyMediaLoader = () => (
+  <Component
+    service="pidgin"
+    pageType="article"
+    blocks={legacyMediaBlock as MediaBlock[]}
+  />
+);
+
 export const LivePageMedia = () => (
   <Component
     service="pidgin"

src/app/components/MediaLoader/types.ts

@@ -32,7 +32,7 @@ export type PlayerConfig = {
     title: string;
     summary?: string;
     holdingImageURL?: string;
-    items: PlaylistItem[];
+    items: PlaylistItem[] | LegacyPlayListItem[];
     guidance?: string;
     embedRights?: 'allowed';
     liveRewind?: boolean;
@@ -63,6 +63,11 @@ export type PlaylistItem = {
   serviceID?: string;
 };
 
+export type LegacyPlayListItem = {
+  href: string;
+  kind: string;
+};
+
 export type ConfigBuilderProps = {
   id: string;
   blocks: MediaBlock[];
@@ -208,14 +213,41 @@ export type ClipMediaBlock = {
   };
 };
 
+export type LegacyMediaBlock = {
+  type: 'legacyMedia';
+  content: {
+    id: string;
+    subType: string;
+    format: MediaType;
+    image: {
+      id: string;
+      subType: string;
+      href: string;
+      path: string;
+      height: number;
+      width: number;
+      altText: string;
+      copyrightHolder: string;
+    };
+    aspectRatio: string;
+    live: boolean;
+    href: string;
+    playlist: {
+      format: string;
+      url: string;
+    }[];
+  };
+};
+
 export type MediaBlock =
   | AresMediaBlock
   | ClipMediaBlock
-  | CaptionBlock
+  | LegacyMediaBlock
+  | LiveRadioBlock
   | OnDemandTVBlock
   | OnDemandAudioBlock
-  | MediaOverrides
-  | LiveRadioBlock;
+  | CaptionBlock
+  | MediaOverrides;
 
 export type BuildConfigProps = {
   id: string;

src/app/components/MediaLoader/utils/buildPlaceholderConfig/index.ts

@@ -7,12 +7,12 @@ import { PlaceholderConfig } from '../../types';
 
 type BuildPlaceholderConfigParams = {
   title: string;
-  duration: number;
   holdingImageURL: string;
-  placeholderImageOriginCode: string;
-  placeholderImageLocator: string;
   type: MediaType;
+  duration?: number;
   durationISO8601?: string;
+  placeholderImageOriginCode?: string;
+  placeholderImageLocator?: string;
   translations?: Translations;
   guidanceMessage?: string | null;
 };

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

@@ -14,6 +14,7 @@ import {
   buildAresMediaPlayerBlock,
   aresMediaBlock,
   aresMediaLiveStreamBlocks,
+  legacyMediaBlock,
 } from '../fixture';
 import {
   BuildConfigProps,
@@ -311,6 +312,82 @@ describe('buildSettings', () => {
       });
     });
 
+    it('Should process a LegacyMediaBlock into a valid playlist item for a "MAP" page', () => {
+      const legacyMediaOverrides = {
+        model: {
+          pageTitleOverride: 'Legacy Media Page Title',
+        },
+        type: 'mediaOverrides',
+      };
+
+      const result = buildSettings({
+        ...baseSettings,
+        service: 'arabic',
+        lang: 'ar',
+        producer: 'ARABIC',
+        counterName: 'arabic.multimedia.2013.12.131208_iraq_blast_.page',
+        blocks: [...legacyMediaBlock, legacyMediaOverrides] as MediaBlock[],
+      });
+
+      expect(result).toStrictEqual({
+        mediaType: 'video',
+        playerConfig: {
+          autoplay: true,
+          product: 'news',
+          statsObject: {
+            destination: 'WS_NEWS_LANGUAGES',
+            producer: 'ARABIC',
+          },
+          enableToucan: true,
+          appName: 'news-arabic',
+          appType: 'responsive',
+          counterName: 'arabic.multimedia.2013.12.131208_iraq_blast_.page',
+          playlistObject: {
+            title: 'Legacy Media Page Title',
+            holdingImageURL:
+              'http://a.files.bbci.co.uk/worldservice/live/assets/images/2013/12/08/131208135805_iraq_blast_640x360_bbc_nocredit.jpg',
+            items: [
+              {
+                href: 'https://wsodprogrf.akamaized.net/arabic/dps/2013/12/iraqblast_16x9_lo.mp4',
+                kind: 'programme',
+              },
+              {
+                href: 'https://wsodprogrf.akamaized.net/arabic/dps/2013/12/iraqblast_16x9_med.mp4',
+                kind: 'programme',
+              },
+              {
+                href: 'https://wsodprogrf.akamaized.net/arabic/dps/2013/12/iraqblast_16x9_hi.mp4',
+                kind: 'programme',
+              },
+            ],
+          },
+          ui: {
+            skin: 'classic',
+            controls: { enabled: true },
+            locale: { lang: 'ar' },
+            subtitles: { enabled: true, defaultOn: true },
+            fullscreen: { enabled: true },
+          },
+        },
+        placeholderConfig: {
+          mediaInfo: {
+            datetime: undefined,
+            duration: '00:00',
+            durationSpoken: 'Duration 0,00',
+            guidanceMessage: undefined,
+            title: 'Legacy Media Page Title',
+            type: 'video',
+          },
+          placeholderSrc:
+            'http://a.files.bbci.co.uk/worldservice/live/assets/images/2013/12/08/131208135805_iraq_blast_640x360_bbc_nocredit.jpg',
+          placeholderSrcset: '',
+          translatedNoJSMessage:
+            'This video cannot play in your browser. Please enable JavaScript or try a different browser.',
+        } as PlaceholderConfig,
+        showAds: false,
+      } satisfies ConfigBuilderReturnProps);
+    });
+
     it('Should process an AresMedia block into a valid playlist item for syndication.', () => {
       const result = buildSettings({
         ...baseSettings,
@@ -583,7 +660,6 @@ describe('buildSettings', () => {
       const result = buildSettings({
         ...baseSettings,
         embedded: true,
-        // @ts-expect-error partial data used for testing purposes
         blocks: myFixture as MediaBlock[],
       });
       expect(result?.playerConfig).not.toHaveProperty(

src/app/models/types/media.ts

@@ -78,9 +78,9 @@ export type LiveRadioBlock = {
 
 export type MediaOverrides = {
   model: {
-    language: string;
-    pageIdentifierOverride: string;
-    pageTitleOverride: string;
+    language?: string;
+    pageIdentifierOverride?: string;
+    pageTitleOverride?: string;
   };
   type: 'mediaOverrides';
 };

src/app/pages/MediaArticlePage/MediaArticlePage.tsx

@@ -9,6 +9,7 @@ import { ARTICLE_PAGE, MEDIA_ASSET_PAGE } from '#app/routes/utils/pageTypes';
 import { Tag } from '#app/components/LinkedData/types';
 import { Article, OptimoBylineBlock } from '#app/models/types/optimo';
 import { RequestContext } from '#app/contexts/RequestContext';
+import { MediaOverrides } from '#app/models/types/media';
 import useToggle from '../../hooks/useToggle';
 import {
   getArticleId,
@@ -173,6 +174,23 @@ const MediaArticlePage = ({ pageData }: { pageData: Article }) => {
         <MediaLoader blocks={props.blocks as MediaBlock[]} />
       </div>
     ),
+    legacyMedia: (props: ComponentToRenderProps) => {
+      const mediaOverrides: MediaOverrides = {
+        model: { pageTitleOverride: headline },
+        type: 'mediaOverrides',
+      };
+
+      return (
+        <div
+          css={({ spacings }: Theme) => [
+            `padding-top: ${spacings.TRIPLE}rem`,
+            isCpsMap && styles.cafMediaPlayer,
+          ]}
+        >
+          <MediaLoader blocks={[props, mediaOverrides] as MediaBlock[]} />
+        </div>
+      );
+    },
     text,
     byline: () =>
       hasByline ? (