WSTEAMA 1315 - Move logic that creates SMP settings object in Simorgh

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

@@ -1,25 +1,28 @@
 import filterForBlockType from '#app/lib/utilities/blockHandlers';
 import clipMedia from './clipMedia';
 import aresMedia from './aresMedia';
-import { AresMediaBlock, ClipMediaBlock, MediaBlock } from '../types';
+import tvMedia from './tvMedia';
+import {
+  ConfigBuilderReturnProps,
+  MediaBlock,
+  ConfigBuilderProps,
+} from '../types';
 
-export default (blocks: MediaBlock[]) => {
-  const aresMediaBlock: AresMediaBlock = filterForBlockType(
-    blocks,
-    'aresMedia',
-  );
-
-  const clipMediaBlock: ClipMediaBlock = filterForBlockType(
-    blocks,
-    'clipMedia',
-  );
+const blockTypeMapping: Record<
+  string,
+  (arg0: ConfigBuilderProps) => ConfigBuilderReturnProps
+> = {
+  aresMedia,
+  clipMedia,
+  tvMedia,
+};
 
-  switch (true) {
-    case !!aresMediaBlock:
-      return aresMedia;
-    case !!clipMediaBlock:
-      return clipMedia;
-    default:
-      return null;
-  }
+/* eslint-disable no-console */
+/* eslint-disable no-restricted-syntax */
+export default (blocks: MediaBlock[]) => {
+  const availableMediaType =
+    ['aresMedia', 'clipMedia', 'tvMedia'].find(mediaType =>
+      filterForBlockType(blocks, mediaType),
+    ) || '';
+  return blockTypeMapping[availableMediaType];
 };

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

@@ -0,0 +1,49 @@
+import filterForBlockType from '#lib/utilities/blockHandlers';
+import { ConfigBuilderProps, ConfigBuilderReturnProps } from '../types';
+import buildPlaceholderConfig from '../utils/buildPlaceholderConfig';
+
+export default ({
+  blocks,
+  basePlayerConfig,
+  translations,
+}: ConfigBuilderProps): ConfigBuilderReturnProps => {
+  const { model: tvMediaBlock } = filterForBlockType(blocks, 'tvMedia');
+
+  const placeholderConfig = buildPlaceholderConfig({
+    title: tvMediaBlock.episodeTitle,
+    duration: tvMediaBlock?.versions?.[0]?.duration,
+    durationISO8601: tvMediaBlock?.versions?.[0]?.durationISO8601,
+    type: 'video',
+    holdingImageURL: `https://${tvMediaBlock.imageUrl}`,
+    placeholderImageLocator: `https://${tvMediaBlock.imageUrl}`,
+    placeholderImageOriginCode: 'pips',
+    translations,
+  });
+
+  return {
+    playerConfig: {
+      ...basePlayerConfig,
+      autoplay: false,
+      statsObject: {
+        ...basePlayerConfig.statsObject,
+        episodePID: tvMediaBlock.id,
+      },
+      playlistObject: {
+        title: tvMediaBlock.episodeTitle,
+        holdingImageURL: `https://${tvMediaBlock.imageUrl}`,
+        items: [
+          {
+            versionID: tvMediaBlock?.versions?.[0]?.versionId,
+            kind: tvMediaBlock.smpKind,
+            duration: tvMediaBlock?.versions?.[0]?.duration,
+          },
+        ],
+        summary: tvMediaBlock.synopses.short,
+        ...(tvMediaBlock.embedding && { embedRights: 'allowed' }),
+      },
+    },
+    mediaType: 'video',
+    placeholderConfig,
+    showAds: false,
+  };
+};

src/app/components/MediaLoader/types.ts

@@ -15,6 +15,7 @@ export type PlayerConfig = {
     clipPID?: string;
     destination: string;
     producer: string | '';
+    episodePID?: string;
   };
   mediator?: { host: string };
   ui: PlayerUiConfig;
@@ -46,6 +47,8 @@ export type PlaylistItem = {
   kind: string;
   duration: number;
   live?: boolean;
+  embedRights?: 'allowed';
+  vpid?: string;
 };
 
 export type ConfigBuilderProps = {
@@ -233,11 +236,49 @@ export type SyndicationAresMediaBlock = {
   };
 };
 
+export type TvMediaBlock = {
+  type: 'tvMedia';
+  model: {
+    id: string;
+    subType: 'episode';
+    format: 'Video';
+    title: string;
+    synopses: {
+      short: string;
+      medium: string;
+    };
+    imageUrl: string;
+    embedding: boolean;
+    advertising: boolean;
+    versions: [
+      {
+        versionId: string;
+        types: string[];
+        duration: number;
+        durationISO8601: string;
+        warnings: Record<string, string>;
+        availableTerritories: {
+          uk: boolean;
+          nonUk: boolean;
+          world: boolean;
+        };
+        availableFrom: number;
+        availabilityStatus: string;
+      },
+    ];
+    availability: string;
+    smpKind: string;
+    episodeTitle: string;
+    type: 'audio' | 'video';
+  };
+};
+
 export type MediaBlock =
   | AresMediaBlock
   | ClipMediaBlock
   | CaptionBlock
-  | SyndicationAresMediaBlock;
+  | SyndicationAresMediaBlock
+  | TvMediaBlock;
 
 export type BuildConfigProps = {
   blocks: MediaBlock[];

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

@@ -1,4 +1,7 @@
 import { PageTypes, Services } from '#app/models/types/global';
+import { MEDIA_PAGE } from '#app/routes/utils/pageTypes';
+import hindiTvProgramme from '#data/hindi/bbc_hindi_tv/tv_programmes/w13xttlw.json';
+import { service as hindiServiceConfig } from '#app/lib/config/services/hindi';
 import buildSettings from './buildSettings';
 import { aresMediaBlocks, clipMediaBlocks } from '../fixture';
 import {
@@ -397,4 +400,94 @@ describe('buildSettings', () => {
       );
     });
   });
+
+  describe('OnDemandTv', () => {
+    const hindiTvBaseSettings = {
+      counterName: 'hindi.bbc_hindi_tv.tv.w172zm8920nck2z.page',
+      lang: 'hi',
+      service: 'hindi' as Services,
+      statsDestination: 'WS_NEWS_LANGUAGES',
+      producer: 'HINDI',
+      translations: hindiServiceConfig.default.translations,
+    } as BuildConfigProps;
+
+    const hindiTvMediaBlocks = hindiTvProgramme.content.blocks.map(
+      tvMediaBlock => {
+        return {
+          type: 'tvMedia',
+          model: {
+            ...tvMediaBlock,
+          },
+        };
+      },
+    );
+    it('Should process a On Demand TV block into a valid playlist item.', () => {
+      const result = buildSettings({
+        ...hindiTvBaseSettings,
+        blocks: hindiTvMediaBlocks as MediaBlock[],
+        pageType: MEDIA_PAGE,
+      });
+
+      expect(result).toStrictEqual({
+        playerConfig: {
+          product: 'news',
+          enableToucan: true,
+          appType: 'responsive',
+          autoplay: false,
+          externalEmbedUrl: '',
+          mediator: { host: 'open.test.bbc.co.uk' },
+          appName: 'news-hindi',
+          counterName: 'hindi.bbc_hindi_tv.tv.w172zm8920nck2z.page',
+          statsObject: {
+            destination: 'WS_NEWS_LANGUAGES',
+            producer: 'HINDI',
+            episodePID: 'w172zm89sk8n4lc',
+          },
+          ui: {
+            controls: { enabled: true },
+            fullscreen: { enabled: true },
+            locale: {
+              lang: 'hi',
+            },
+            subtitles: {
+              defaultOn: true,
+              enabled: true,
+            },
+          },
+          playlistObject: {
+            title: 'दुनिया',
+            holdingImageURL:
+              'https://ichef.bbci.co.uk/images/ic/$recipe/p0jlxsx8.jpg',
+            items: [
+              {
+                versionID: 'w1mskyp9nwh0dvl',
+                kind: 'programme',
+                duration: 1192,
+              },
+            ],
+            summary:
+              'ताज़ा अंतरराष्ट्रीय, क्षेत्रीय ख़बरों और विश्लेषण के लिए देखिए बीबीसी दुनिया',
+          },
+        },
+        mediaType: 'video',
+        placeholderConfig: {
+          mediaInfo: {
+            title: 'दुनिया',
+            datetime: 'PT19M52S',
+            duration: '19:52',
+            durationSpoken: 'अवधि 19,52',
+            type: 'video',
+            guidanceMessage: undefined,
+          },
+          placeholderSrc:
+            'https://ichef.bbci.co.uk/images/ic/$recipe/p0jlxsx8.jpg',
+          placeholderSrcset:
+            'https://ichef.bbci.co.uk/images/ic/240xn/p0jlxsx8.jpg.webp 240w, https://ichef.bbci.co.uk/images/ic/320xn/p0jlxsx8.jpg.webp 320w, https://ichef.bbci.co.uk/images/ic/480xn/p0jlxsx8.jpg.webp 480w, https://ichef.bbci.co.uk/images/ic/624xn/p0jlxsx8.jpg.webp 624w, https://ichef.bbci.co.uk/images/ic/800xn/p0jlxsx8.jpg.webp 800w',
+          translatedNoJSMessage:
+            'This video cannot play in your browser. Please enable JavaScript or try a different browser.',
+        },
+        showAds: false,
+      });
+    });
+  });
 });