Merge pull request #13783 from bbc/WS-2031-simorgh-dazzler-stream

WS-2288 Implement Dazzler Edge Plugin & Temporal Polyfill in Simorgh

Author: emilysaffron

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

@@ -3,23 +3,24 @@ import moment from 'moment';
 import { LIVE_TV_PAGE } from '#app/routes/utils/pageTypes';
 import onClient from '#app/lib/utilities/onClient';
 import buildIChefURL from '#app/lib/utilities/ichefURL';
+import { getEnvConfig } from '#app/lib/utilities/getEnvConfig';
 import { ConfigBuilderProps, ConfigBuilderReturnProps } from '../types';
 
 export default ({
   blocks,
   basePlayerConfig,
   pageType,
+  lang,
 }: ConfigBuilderProps): ConfigBuilderReturnProps => {
   const { model: liveMediaBlock } = filterForBlockType(blocks, 'liveMedia');
   let warning: string | null = null;
-
   const {
     imageUrlTemplate: holdingImageURL,
     version: video,
     title,
     synopses: { short },
+    masterbrand: { id },
   } = liveMediaBlock;
-
   const {
     warnings,
     serviceId: serviceID,
@@ -77,6 +78,22 @@ export default ({
         summary: short,
         ...(warning && { warning }),
       },
+      // Currently no simple way to determine from the data wether to load the plugin, as a Dazzler stream can't be distinguished from media collection items in TIPO.
+      plugins: {
+        toLoad: [
+          {
+            html: 'https://ws-dazzler-web-statics-dev.s3.eu-west-1.amazonaws.com/plugin/DazzlerEdgePlugin.js',
+            playerOnly: true,
+            // @ts-expect-error - this is a custom property used to pass data to the plugin when it initializes
+            data: {
+              env: getEnvConfig().SIMORGH_APP_ENV === 'live' ? 'live' : 'test',
+              sid: id,
+              holdingImageURL: holdingImageURLForLiveTV,
+              uiLanguage: lang,
+            },
+          },
+        ],
+      },
     },
     mediaType: 'video',
     showAds: false,

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

@@ -1414,6 +1414,21 @@ describe('buildSettings', () => {
             summary: 'Toon in, kick back and relax to 100% cartoons!',
             title: 'Non-Stop Cartoons!',
           },
+          plugins: {
+            toLoad: [
+              {
+                html: 'https://ws-dazzler-web-statics-dev.s3.eu-west-1.amazonaws.com/plugin/DazzlerEdgePlugin.js',
+                playerOnly: true,
+                data: {
+                  env: 'test',
+                  sid: 'cbbc',
+                  holdingImageURL:
+                    'https://ichef.bbci.co.uk/images/ic/$recipe/p0k31t4d.jpg',
+                  uiLanguage: 'es',
+                },
+              },
+            ],
+          },
           product: 'news',
           statsObject: {
             destination: 'WS_NEWS_LANGUAGES',
@@ -1514,6 +1529,21 @@ describe('buildSettings', () => {
               'جولة إخبارية يومية تتناول أهم الأحداث العربية والعالمية في تقارير ولقاءات وتحليلات ',
             title: 'BBC Arabic TV',
           },
+          plugins: {
+            toLoad: [
+              {
+                html: 'https://ws-dazzler-web-statics-dev.s3.eu-west-1.amazonaws.com/plugin/DazzlerEdgePlugin.js',
+                playerOnly: true,
+                data: {
+                  env: 'test',
+                  sid: 'bbc_arabic_tv',
+                  holdingImageURL:
+                    'https://ichef.bbci.co.uk/images/ic/$recipe/p08b23t4.png',
+                  uiLanguage: 'ar',
+                },
+              },
+            ],
+          },
           product: 'news',
           statsObject: {
             destination: 'WS_NEWS_LANGUAGES',

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

@@ -1,6 +1,7 @@
 import onClient from '#app/lib/utilities/onClient';
 import isLive from '#app/lib/utilities/isLive';
 import filterForBlockType from '#app/lib/utilities/blockHandlers';
+import { LIVE_TV_PAGE } from '#app/routes/utils/pageTypes';
 import { BuildConfigProps, PlayerConfig } from '../types';
 import configForMediaBlockType from '../configs';
 
@@ -22,6 +23,8 @@ const isTestRequested = () => {
   return false;
 };
 
+const dazzlerStreamLangs = ['hi'];
+
 const buildSettings = ({
   id,
   blocks,
@@ -56,7 +59,14 @@ const buildSettings = ({
     },
     ...(!embedded && { superResponsive: true }),
     ...(counterName && { counterName }),
-    ...(isTestRequested() && { mediator: { host: 'open.test.bbc.co.uk' } }),
+    ...(isTestRequested() && {
+      mediator: {
+        host:
+          dazzlerStreamLangs.includes(lang) && pageType === LIVE_TV_PAGE
+            ? 'open.live.bbc.co.uk'
+            : 'open.test.bbc.co.uk',
+      },
+    }),
     statsObject: {
       destination: statsDestination,
       producer,

ws-nextjs-app/package.json

@@ -48,6 +48,7 @@
   },
   "dependencies": {
     "next": "16.2.3",
-    "sharp": "0.34.5"
+    "sharp": "0.34.5",
+    "temporal-polyfill": "0.3.0"
   }
 }

ws-nextjs-app/pages/[service]/watch/[id]/live/LiveTvPageLayout.tsx

@@ -10,6 +10,7 @@ import ChartbeatAnalytics from '#app/components/ChartbeatAnalytics';
 import LinkedData from '#app/components/LinkedData';
 import { LiveTVPageProps } from './types';
 import styles from './styles';
+import 'temporal-polyfill/global';
 
 const renderCuration = ({
   curation,

yarn.lock

@@ -17599,6 +17599,7 @@ __metadata:
     npm-run-all2: "npm:8.0.4"
     sharp: "npm:0.34.5"
     swc-loader: "npm:0.2.7"
+    temporal-polyfill: "npm:0.3.0"
     ts-node: "npm:10.9.2"
   languageName: unknown
   linkType: soft
@@ -18526,6 +18527,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"temporal-polyfill@npm:0.3.0":
+  version: 0.3.0
+  resolution: "temporal-polyfill@npm:0.3.0"
+  dependencies:
+    temporal-spec: "npm:0.3.0"
+  checksum: 10/e4f5c0e546bf663720569b8b68fc41aa43ea891a77043a5614f6c1f2109cd01fe60c90b9de2f5d4f92f3155bfbdd17ad3ec7de1e9aaf01fa3cf156f230a0e41a
+  languageName: node
+  linkType: hard
+
+"temporal-spec@npm:0.3.0":
+  version: 0.3.0
+  resolution: "temporal-spec@npm:0.3.0"
+  checksum: 10/5863e3e3f364a5cf64bf999c85bf19b08924a91ee8d618489d9bf6cfff2452e4f916080c8ede93fc91de609200fc20002928e0146c7fc15375b123b20234799b
+  languageName: node
+  linkType: hard
+
 "terser-webpack-plugin@npm:5.3.14, terser-webpack-plugin@npm:^5.3.14":
   version: 5.3.14
   resolution: "terser-webpack-plugin@npm:5.3.14"