{
+const MediaLoader = ({ blocks, className, embedded, uniqueId }: Props) => {
const { lang, translations } = useContext(ServiceContext);
const { pageIdentifier } = useContext(EventTrackingContext);
const { enabled: adsEnabled } = useToggle('ads');
@@ -274,7 +288,11 @@ const MediaLoader = ({ blocks, className, embedded }: Props) => {
onClick={() => setShowPlaceholder(false)}
/>
) : (
-
+
)}
)}
diff --git a/src/app/components/MediaLoader/types.ts b/src/app/components/MediaLoader/types.ts
index 4484a0a87b7..a83d13fda25 100644
--- a/src/app/components/MediaLoader/types.ts
+++ b/src/app/components/MediaLoader/types.ts
@@ -37,6 +37,7 @@ export type PlayerConfig = {
embedRights?: 'allowed';
liveRewind?: boolean;
simulcast?: boolean;
+ warning?: string;
};
};
@@ -114,6 +115,8 @@ export type Player = {
parameters: { updatedAdTag: string },
): void;
load: () => void;
+ play: () => void;
+ pause: () => void;
bind: (event: string, callback: () => void) => void;
loadPlugin: (
pluginName: { [key: string]: string },
@@ -125,6 +128,7 @@ export type Player = {
};
},
) => void;
+ player: { paused: () => boolean };
};
export type BumpType = {
@@ -239,6 +243,26 @@ export type LegacyMediaBlock = {
};
};
+export type MediaCollection = {
+ type: 'liveMedia';
+ model: {
+ synopses: {
+ short: string;
+ };
+ masterbrand: {
+ networkName: string;
+ };
+ version: {
+ vpid?: string;
+ serviceID?: string;
+ duration: string;
+ status: string;
+ };
+ imageUrlTemplate: string;
+ title: string;
+ };
+};
+
export type MediaBlock =
| AresMediaBlock
| ClipMediaBlock
@@ -247,7 +271,8 @@ export type MediaBlock =
| OnDemandTVBlock
| OnDemandAudioBlock
| CaptionBlock
- | MediaOverrides;
+ | MediaOverrides
+ | MediaCollection;
export type BuildConfigProps = {
id: string;
diff --git a/src/app/components/MediaLoader/utils/buildSettings.test.ts b/src/app/components/MediaLoader/utils/buildSettings.test.ts
index 9c1d9e856e3..780430f9cfa 100644
--- a/src/app/components/MediaLoader/utils/buildSettings.test.ts
+++ b/src/app/components/MediaLoader/utils/buildSettings.test.ts
@@ -2,6 +2,7 @@ import { PageTypes, Services } from '#app/models/types/global';
import { data as hindiTvProgramme } from '#data/hindi/bbc_hindi_tv/tv_programmes/w13xttlw.json';
import {
AUDIO_PAGE,
+ LIVE_PAGE,
LIVE_RADIO_PAGE,
TV_PAGE,
} from '#app/routes/utils/pageTypes';
@@ -10,6 +11,7 @@ import afriqueRadio from '#data/afrique/bbc_afrique_radio/p030s6dq.json';
import { service as hausaServiceConfig } from '#app/lib/config/services/hausa';
import { service as hindiServiceConfig } from '#app/lib/config/services/hindi';
import { service as afriqueServiceConfig } from '#app/lib/config/services/afrique';
+import { service as mundoServiceConfig } from '#app/lib/config/services/mundo';
import isLive from '#app/lib/utilities/isLive';
import buildSettings from './buildSettings';
import {
@@ -997,4 +999,117 @@ describe('buildSettings', () => {
});
});
});
+
+ describe('liveMedia', () => {
+ const mundoMediaBaseSettings = {
+ counterName: 'live_coverage.c7dkx155e626t.page',
+ lang: 'es',
+ service: 'mundo' as Services,
+ statsDestination: 'WS_NEWS_LANGUAGES',
+ producer: 'MUNDO',
+ translations: mundoServiceConfig.default.translations,
+ } as BuildConfigProps;
+
+ it('Should process a live media block into a valid playlist item.', () => {
+ const mediaBlock = {
+ type: 'liveMedia',
+ model: {
+ urn: 'urn:bbc:pips:pid:p0gh4n63',
+ title: 'Non-Stop Cartoons!',
+ type: 'episode',
+ synopses: {
+ short: 'Toon in, kick back and relax to 100% cartoons!',
+ medium:
+ 'Toon in, kick back and relax. From laugh out loud to mischief and mayhem. 100% cartoons all day long.',
+ long: 'Toon in, kick back and relax. From laugh out loud to mischief and mayhem. 100% cartoons all day long. Join your favourites Grizzy, Shaun, Taffy, Boy Girl Dog Cat Mouse Cheese, The Deep and those Monster Loving Maniacs.',
+ },
+ mediaType: 'audio_video',
+ imageUrlTemplate:
+ 'https://ichef.bbci.co.uk/images/ic/$recipe/p0k31t4d.jpg',
+ masterbrand: {
+ id: 'cbbc',
+ name: 'CBBC',
+ networkName: 'CBBC',
+ type: 'tv',
+ imageUrlTemplate: 'ichef.bbci.co.uk/images/ic/$recipe/p0f8qps2.jpg',
+ },
+ version: {
+ vpid: 'p0gh4n67',
+ duration: 'PT24H',
+ availabilityType: 'webcast',
+ versionTypes: [
+ {
+ type: 'Original',
+ name: 'Original version',
+ },
+ ],
+ schedule: {
+ start: '2024-12-15T08:00:21Z',
+ accurateStart: '2024-12-15T08:00:21Z',
+ end: '2024-12-15T13:00:21Z',
+ },
+ serviceId: null,
+ authToken: null,
+ status: 'LIVE',
+ warnings: null,
+ },
+ leadMedia: true,
+ },
+ };
+
+ const result = buildSettings({
+ ...mundoMediaBaseSettings,
+ blocks: [mediaBlock] as MediaBlock[],
+ pageType: LIVE_PAGE,
+ });
+
+ expect(result).toStrictEqual({
+ mediaType: 'video',
+ playerConfig: {
+ appName: 'news-mundo',
+ appType: 'responsive',
+ autoplay: false,
+ counterName: 'live_coverage.c7dkx155e626t.page',
+ enableToucan: true,
+ playlistObject: {
+ holdingImageURL:
+ 'https://ichef.bbci.co.uk/images/ic/$recipe/p0k31t4d.jpg',
+ items: [
+ {
+ duration: 86400,
+ kind: 'programme',
+ live: true,
+ versionID: 'p0gh4n67',
+ },
+ ],
+ summary: 'Toon in, kick back and relax to 100% cartoons!',
+ title: 'Non-Stop Cartoons!',
+ },
+ product: 'news',
+ statsObject: {
+ destination: 'WS_NEWS_LANGUAGES',
+ episodePID: undefined,
+ producer: 'MUNDO',
+ },
+ ui: {
+ controls: {
+ enabled: true,
+ },
+ fullscreen: {
+ enabled: true,
+ },
+ locale: {
+ lang: 'es',
+ },
+ skin: 'classic',
+ subtitles: {
+ defaultOn: true,
+ enabled: true,
+ },
+ },
+ },
+ showAds: false,
+ });
+ });
+ });
});
diff --git a/src/app/components/ThemeProvider/focusIndicator.ts b/src/app/components/ThemeProvider/focusIndicator.ts
index b876778ed9e..6583b5cf7e9 100644
--- a/src/app/components/ThemeProvider/focusIndicator.ts
+++ b/src/app/components/ThemeProvider/focusIndicator.ts
@@ -54,7 +54,8 @@ const focusIndicator = ({ palette }: Theme) => css`
}
// Overrides focus indicator styles with inverted colours. Used on a dark background page. E.g. Episode lists.
- a.focusIndicatorInvert:focus-visible {
+ a.focusIndicatorInvert:focus-visible,
+ button.focusIndicatorInvert:focus-visible {
outline: ${focusIndicatorThickness} solid ${palette.WHITE};
box-shadow: 0 0 0 ${focusIndicatorThickness} ${palette.BLACK};
outline-offset: ${focusIndicatorThickness};
diff --git a/src/app/components/ThemeProvider/palette.ts b/src/app/components/ThemeProvider/palette.ts
index 28b299c6a0e..2f6463ea23b 100644
--- a/src/app/components/ThemeProvider/palette.ts
+++ b/src/app/components/ThemeProvider/palette.ts
@@ -27,7 +27,9 @@ export const GREY_8 = '#202224';
export const KINGFISHER = '#11708C';
export const LE_TEAL = '#09838B';
export const LIVE_LIGHT = '#00CCC7';
+export const LIVE_MEDIUM = '#008282';
export const LIVE_DARK = '#006666';
+export const LIVE_CORE = '#009E9E';
export const LUNAR = '#F2F2F2';
export const LUNAR_LIGHT = '#F8F8F8';
export const METAL = '#6E6E73';
diff --git a/src/app/components/ThemeProvider/withThemeProvider.tsx b/src/app/components/ThemeProvider/withThemeProvider.tsx
index b1722debcaa..9275d80f9c6 100644
--- a/src/app/components/ThemeProvider/withThemeProvider.tsx
+++ b/src/app/components/ThemeProvider/withThemeProvider.tsx
@@ -37,7 +37,9 @@ import {
KINGFISHER,
LE_TEAL,
LIVE_LIGHT,
+ LIVE_MEDIUM,
LIVE_DARK,
+ LIVE_CORE,
LUNAR,
LUNAR_LIGHT,
METAL,
@@ -243,7 +245,9 @@ const withThemeProvider = ({
KINGFISHER,
LE_TEAL,
LIVE_LIGHT,
+ LIVE_MEDIUM,
LIVE_DARK,
+ LIVE_CORE,
LUNAR,
LUNAR_LIGHT,
METAL,
diff --git a/src/app/components/icons/index.tsx b/src/app/components/icons/index.tsx
index cca09bb311a..985c7ed372b 100644
--- a/src/app/components/icons/index.tsx
+++ b/src/app/components/icons/index.tsx
@@ -129,3 +129,31 @@ export const Calculator = ({ className }: { className?: string }) => (
);
+
+export const Close = ({ className }: { className?: string }) => (
+
+);
+
+export const Play = ({ className }: { className?: string }) => (
+
+);
diff --git a/src/app/models/types/theming.ts b/src/app/models/types/theming.ts
index ffe52fb7739..f8eb883f16c 100644
--- a/src/app/models/types/theming.ts
+++ b/src/app/models/types/theming.ts
@@ -36,7 +36,9 @@ interface Palette extends BrandPalette {
KINGFISHER: string;
LE_TEAL: string;
LIVE_LIGHT: string;
+ LIVE_MEDIUM: string;
LIVE_DARK: string;
+ LIVE_CORE: string;
LUNAR: string;
LUNAR_LIGHT: string;
METAL: string;
diff --git a/src/app/models/types/translations.ts b/src/app/models/types/translations.ts
index edac720b85a..3526009fe5a 100644
--- a/src/app/models/types/translations.ts
+++ b/src/app/models/types/translations.ts
@@ -177,6 +177,7 @@ export interface Translations {
recentEpisodes?: string;
podcastExternalLinks?: string;
download?: string;
+ closeVideo?: string;
};
socialEmbed: {
caption?: {
diff --git a/src/global.d.ts b/src/global.d.ts
index 1b34f28d0b7..f96b4eca5ef 100644
--- a/src/global.d.ts
+++ b/src/global.d.ts
@@ -4,6 +4,7 @@ declare global {
bumpVersion: string[],
callback: (Bump: BumpType) => void,
) => void;
+ mediaPlayers: Record
;
dotcom: {
ads: {
getAdTag: () => Promise;
diff --git a/ws-nextjs-app/pages/[service]/live/[id]/Header/index.stories.tsx b/ws-nextjs-app/pages/[service]/live/[id]/Header/index.stories.tsx
index ed05f7e3506..9cd2b5d93e5 100644
--- a/ws-nextjs-app/pages/[service]/live/[id]/Header/index.stories.tsx
+++ b/ws-nextjs-app/pages/[service]/live/[id]/Header/index.stories.tsx
@@ -1,4 +1,6 @@
import React from 'react';
+import mundoLiveFixture from '#data/mundo/live/c7dkx155e626t.json';
+import { MediaCollection } from '#app/components/MediaLoader/types';
import Header from '.';
import metadata from './metadata.json';
@@ -9,6 +11,7 @@ interface ComponentProps {
imageUrl?: string;
imageUrlTemplate?: string;
imageWidth?: number;
+ mediaCollections?: MediaCollection[] | null;
}
const Component = ({
@@ -18,6 +21,7 @@ const Component = ({
imageUrl,
imageUrlTemplate,
imageWidth,
+ mediaCollections,
}: ComponentProps) => {
return (
);
};
@@ -133,3 +138,17 @@ export const TitleAndDescriptionWithLiveLabelAndImageExtraLongText = () => (
imageWidth={660}
/>
);
+
+export const WithLiveMediaStream = () => (
+
+);
diff --git a/ws-nextjs-app/pages/[service]/live/[id]/Header/index.tsx b/ws-nextjs-app/pages/[service]/live/[id]/Header/index.tsx
index 892153afa5c..3d1bfdeba1f 100644
--- a/ws-nextjs-app/pages/[service]/live/[id]/Header/index.tsx
+++ b/ws-nextjs-app/pages/[service]/live/[id]/Header/index.tsx
@@ -2,8 +2,11 @@
import { jsx } from '@emotion/react';
import Heading from '#app/components/Heading';
import Text from '#app/components/Text';
+import LiveHeaderMedia from '#app/components/LiveHeaderMedia';
+import { MediaCollection } from '#app/components/MediaLoader/types';
import MaskedImage from '#app/components/MaskedImage';
+import { useState } from 'react';
import LiveLabelHeader from './LiveLabelHeader';
import styles from './styles';
@@ -14,6 +17,7 @@ const Header = ({
imageUrl,
imageUrlTemplate,
imageWidth,
+ mediaCollections,
}: {
showLiveLabel: boolean;
title: string;
@@ -21,9 +25,15 @@ const Header = ({
imageUrl?: string;
imageUrlTemplate?: string;
imageWidth?: number;
+ mediaCollections?: MediaCollection[] | null;
}) => {
+ const [isMediaOpen, setLiveMediaOpen] = useState(false);
const isHeaderImage = !!imageUrl && !!imageUrlTemplate && !!imageWidth;
+ const watchVideoClickHandler = () => {
+ setLiveMediaOpen(!isMediaOpen);
+ };
+
const Title = (
) : null}
)}
+ {mediaCollections && (
+
+ )}