diff --git a/src/app/components/MediaLoader/configs/liveMedia.ts b/src/app/components/MediaLoader/configs/liveMedia.ts index 137f903c5f9..d931e74d9f5 100644 --- a/src/app/components/MediaLoader/configs/liveMedia.ts +++ b/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, diff --git a/src/app/components/MediaLoader/utils/buildSettings.client.test.ts b/src/app/components/MediaLoader/utils/buildSettings.client.test.ts index 16812a4a2df..71ed2777965 100644 --- a/src/app/components/MediaLoader/utils/buildSettings.client.test.ts +++ b/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', diff --git a/src/app/components/MediaLoader/utils/buildSettings.ts b/src/app/components/MediaLoader/utils/buildSettings.ts index f212670ee8f..fcab28e461d 100644 --- a/src/app/components/MediaLoader/utils/buildSettings.ts +++ b/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, diff --git a/ws-nextjs-app/package.json b/ws-nextjs-app/package.json index a70950544c8..c8dd30eef5e 100644 --- a/ws-nextjs-app/package.json +++ b/ws-nextjs-app/package.json @@ -48,6 +48,7 @@ "ts-node": "10.9.2" }, "dependencies": { + "temporal-polyfill": "0.3.0", "next": "16.1.7", "sharp": "0.34.5" } diff --git a/ws-nextjs-app/pages/[service]/watch/[id]/live/LiveTvPageLayout.tsx b/ws-nextjs-app/pages/[service]/watch/[id]/live/LiveTvPageLayout.tsx index f6d0eb657c6..e08a5aa428c 100644 --- a/ws-nextjs-app/pages/[service]/watch/[id]/live/LiveTvPageLayout.tsx +++ b/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, diff --git a/yarn.lock b/yarn.lock index a30454c9a06..0189775e013 100644 --- a/yarn.lock +++ b/yarn.lock @@ -17545,6 +17545,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 @@ -18472,6 +18473,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"