WSTEAM1-1543: Add live media to header - PRODUCTION

data/arabic/live/67574192.json

@@ -32,7 +32,7 @@
     "sportDataEvent": { "id": null },
     "eavisEvent": { "id": null },
     "article": { "id": null },
-    "mediaCollections": [],
+    "mediaCollections": null,
     "keyHighlight": { "id": null },
     "electionBanner": { "id": null },
     "supportingLinks": { "id": null },

data/pidgin/live/c7p765ynk9qt.json

@@ -15,7 +15,7 @@
     "sportDataEvent": { "id": null },
     "eavisEvent": { "id": null },
     "article": { "id": null },
-    "mediaCollections": [{ "id": null }],
+    "mediaCollections": null,
     "keyHighlight": { "id": null },
     "electionBanner": { "id": null },
     "supportingLinks": { "id": null },
@@ -207,15 +207,15 @@
                       "id": "cb0f3228",
                       "type": "video",
                       "model": {
-                        "locator": "urn:bbc:pips:pid:p01vz9cq",
+                        "locator": "urn:bbc:pips:pid:p0gh4n67",
                         "blocks": [
                           {
                             "id": "2c039c31",
                             "type": "clipMedia",
                             "model": {
-                              "id": "urn:bbc:pips:pid:p01vz9cq",
+                              "id": "urn:bbc:pips:pid:p0gh4n67",
                               "urns": {
-                                "pipsPid": "urn:bbc:pips:pid:p01vz9cq"
+                                "pipsPid": "urn:bbc:pips:pid:p0gh4n67"
                               },
                               "images": [
                                 {
@@ -233,7 +233,7 @@
                                   "source": "pipsImage"
                                 }
                               ],
-                              "assetPath": "p01vz9cq",
+                              "assetPath": "p0gh4n67",
                               "type": "video",
                               "headlines": {
                                 "primaryHeadline": "Lionel Messi Skills",
@@ -243,8 +243,8 @@
                               },
                               "analytics": {
                                 "page": {
-                                  "name": "programmes.av.p01vz9cq.page",
-                                  "contentId": "urn:bbc:pips:pid:p01vz9cq",
+                                  "name": "programmes.av.p0gh4n67.page",
+                                  "contentId": "urn:bbc:pips:pid:p0gh4n67",
                                   "producer": "PROGRAMMES"
                                 }
                               },
@@ -274,16 +274,17 @@
                               "lastPublished": "2024-02-28T10:32:08Z",
                               "firstPublished": null,
                               "video": {
-                                "id": "p01vz9cq",
+                                "id": "p0gh4n67",
                                 "title": "Lionel Messi Skills",
                                 "holdingImage": {
                                   "id": "https://ichef.test.bbci.co.uk/images/ic/$recipe/p01vzbd6.jpg",
                                   "altText": "Gary Lineker talks Messi"
                                 },
                                 "version": {
-                                  "id": "p01vz9cs",
+                                  "id": "p0gh4n67",
                                   "duration": "PT34S",
                                   "kind": "programme",
+                                  "simulcast": "true",
                                   "guidance": "Contains strong language and some upsetting scenes.",
                                   "territories": ["nonuk", "uk"]
                                 },
@@ -292,7 +293,7 @@
                                 "isUnavailable": false
                               },
                               "attributions": null,
-                              "link": { "path": "/programmes/p01vz9cq" },
+                              "link": { "path": "/programmes/p0gh4n67" },
                               "section": null,
                               "isSharingAllowed": true
                             }

data/serbian/live/media-23179005/lat.json

@@ -22,7 +22,7 @@
     "article": {
       "id": null
     },
-    "mediaCollections": [],
+    "mediaCollections": null,
     "keyHighlight": {
       "id": null
     },

docs/User-Experience/colours.tsx

@@ -55,6 +55,7 @@ export const CROSS_PLATFORM = [
   { colorName: 'SERVICE_NEUTRAL_DARK', colorCode: '#0051AD' },
   { colorName: 'LIVE_CORE', colorCode: '#009E9E' },
   { colorName: 'LIVE_LIGHT', colorCode: '#00CCC7' },
+  { colorName: 'LIVE_MEDIUM', colorCode: '#008282' },
   { colorName: 'LIVE_DARK', colorCode: '#006666' },
   { colorName: 'SUCCESS_CORE', colorCode: '#148A00' },
   { colorName: 'SUCCESS_LIGHT', colorCode: '#49CC29' },

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

@@ -0,0 +1,48 @@
+/* eslint-disable camelcase */
+/** @jsx jsx */
+import { css, jsx, Theme } from '@emotion/react';
+import mundoLiveFixture from '#data/mundo/live/c7dkx155e626t.json';
+import LiveHeaderMedia from '.';
+import { MediaCollection } from '../MediaLoader/types';
+import metadata from './metadata.json';
+
+type Props = {
+  warnings: {
+    warning_text: string;
+    warning: {
+      warning_code: string;
+      short_description: string;
+    }[];
+  };
+};
+
+export const Component = ({ warnings }: Props) => {
+  const fixtureData = mundoLiveFixture.data.mediaCollections;
+  fixtureData[0].model.version.warnings = warnings;
+
+  return (
+    <div css={({ palette }: Theme) => css({ background: palette.BLACK })}>
+      <LiveHeaderMedia mediaCollection={fixtureData as MediaCollection[]} />
+    </div>
+  );
+};
+
+const l1Warning = {
+  warning_text: 'Contains some upsetting scenes.',
+  warning: [
+    {
+      warning_code: 'L1',
+      short_description: 'Some upsetting scenes',
+    },
+  ],
+};
+
+export const ComponentWithGuidance = () => <Component warnings={l1Warning} />;
+
+export default {
+  title: 'Components/LiveHeaderMedia',
+  Component,
+  parameters: {
+    metadata,
+  },
+};

src/app/components/LiveHeaderMedia/index.styles.tsx

@@ -0,0 +1,169 @@
+import NO_JS_CLASSNAME from '#app/lib/noJs.const';
+import pixelsToRem from '#app/utilities/pixelsToRem';
+import { css, Theme } from '@emotion/react';
+
+export default {
+  componentContainer: ({ spacings }: Theme) =>
+    css({
+      width: '100%',
+      marginTop: `${spacings.DOUBLE}rem`,
+      [`.${NO_JS_CLASSNAME} &`]: {
+        display: 'none',
+      },
+    }),
+  nojs: ({ palette, spacings, fontSizes, fontVariants }: Theme) =>
+    css({
+      ...fontSizes.pica,
+      ...fontVariants.sansRegular,
+      color: palette.WHITE,
+      div: {
+        marginTop: `${spacings.DOUBLE}rem`,
+      },
+      strong: {
+        display: 'block',
+        marginTop: `${spacings.DOUBLE}rem`,
+        fontWeight: 'normal',
+      },
+    }),
+  mediaButton: ({ mq }: Theme) =>
+    css({
+      position: 'relative',
+      padding: 0,
+      [mq.FORCED_COLOURS]: {
+        color: 'canvasText',
+      },
+    }),
+  openButton: () =>
+    css({
+      cursor: 'pointer',
+      backgroundColor: 'unset',
+      border: 'unset',
+      textAlign: 'start',
+    }),
+  watchLiveCTAText: ({ spacings, palette }: Theme) =>
+    css({
+      color: palette.WHITE,
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      svg: {
+        height: `${spacings.DOUBLE}rem`,
+        width: `${spacings.DOUBLE}rem`,
+        verticalAlign: 'middle',
+        fill: 'currentcolor',
+        color: palette.WHITE,
+        marginInlineEnd: `${spacings.FULL}rem`,
+      },
+      'button:hover &, button:focus-visible &': {
+        textDecoration: 'underline',
+      },
+    }),
+  title: () =>
+    css({
+      display: 'block',
+      width: '100%',
+    }),
+  guidanceMessage: ({ palette, spacings }: Theme) =>
+    css({
+      display: 'block',
+      marginTop: `${spacings.DOUBLE}rem`,
+      color: palette.GREY_2,
+      textAlign: 'start',
+    }),
+  watchLiveCTA: ({ palette, mq, spacings }: Theme) =>
+    css({
+      width: `${pixelsToRem(171)}rem`,
+      border: 0,
+      backgroundColor: palette.LIVE_MEDIUM,
+      padding: `${pixelsToRem(11)}rem`,
+      marginTop: `${spacings.DOUBLE}rem`,
+      [mq.GROUP_2_MAX_WIDTH]: {
+        width: '100%',
+      },
+      [mq.FORCED_COLOURS]: {
+        color: 'canvasText',
+        border: `${pixelsToRem(2)}rem solid canvasText`,
+      },
+    }),
+  liveMediaStreamText: ({ palette }: Theme) =>
+    css({
+      color: palette.GREY_4,
+    }),
+  liveMediaStreamContainer: ({ mq }: Theme) =>
+    css({
+      maxWidth: '60%',
+      [mq.GROUP_2_MAX_WIDTH]: {
+        width: '100%',
+      },
+      [mq.GROUP_4_MAX_WIDTH]: {
+        width: '50%',
+      },
+    }),
+  closeButton: () =>
+    css({
+      display: 'flex',
+      justifyContent: 'space-between',
+      cursor: 'pointer',
+      background: 'none',
+      width: '100%',
+      border: 0,
+      lineHeight: 0,
+      alignItems: 'center',
+    }),
+  closeContainer: ({ spacings, palette, mq }: Theme) =>
+    css({
+      verticalAlign: 'center',
+      svg: {
+        fill: 'currentcolor',
+        color: palette.WHITE,
+        height: `${spacings.DOUBLE}rem`,
+        width: `${spacings.DOUBLE}rem`,
+        margin: `${pixelsToRem(13)}rem`,
+      },
+      backgroundColor: palette.BLACK,
+      border: `${palette.WHITE} solid ${pixelsToRem(1)}rem`,
+      'button:hover &, button:focus-visible &': {
+        backgroundColor: palette.POSTBOX,
+        outline: `${palette.WHITE} solid ${pixelsToRem(1)}rem`,
+      },
+      [mq.FORCED_COLOURS]: {
+        color: 'canvasText',
+      },
+    }),
+  liveMediaSpan: () =>
+    css({
+      maxWidth: '100%',
+    }),
+  mediaLoader: ({ spacings }: Theme) =>
+    css({
+      maxWidth: '100%',
+      marginTop: `${spacings.DOUBLE}rem`,
+    }),
+  mediaDescription: () =>
+    css({
+      display: 'block',
+      width: '100%',
+      marginTop: 0,
+      span: { margin: 0 },
+    }),
+  openMediaDescription: ({ palette }: Theme) =>
+    css({
+      span: { color: palette.GREY_4 },
+    }),
+  closeMediaDescription: ({ mq, palette }: Theme) =>
+    css({
+      textAlign: 'start',
+      span: { color: palette.WHITE },
+      'button:hover &, button:focus-visible &': {
+        span: {
+          textDecoration: 'underline',
+          [mq.FORCED_COLOURS]: {
+            textDecoration: 'underline',
+          },
+        },
+      },
+    }),
+
+  underlineFocus: () => css({ display: 'none' }),
+  hideComponent: () => css({ display: 'none' }),
+};