WSTEAM1-1521: UpdatE

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

@@ -1,15 +1,41 @@
+/* eslint-disable camelcase */
 /** @jsx jsx */
 import { css, jsx, Theme } from '@emotion/react';
 import mundoLiveFixture from '#data/mundo/live/c7dkx155e626t.json';
 import LiveMediaStream from '.';
 import { MediaCollection } from '../MediaLoader/types';
 
-const fixtureData = mundoLiveFixture.data.mediaCollections;
+type Props = {
+  warnings: {
+    warning_text: string;
+    warning: {
+      warning_code: string;
+      short_description: string;
+    }[];
+  };
+};
 
-export const Component = () => (
-  <div css={({ palette }: Theme) => css({ background: palette.BLACK })}>
-    <LiveMediaStream mediaCollection={fixtureData as MediaCollection[]} />
-  </div>
-);
+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 })}>
+      <LiveMediaStream 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/LiveMediaStream', Component };

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

@@ -28,6 +28,11 @@ export default {
       display: 'block',
       width: '100%',
     }),
+  guidanceMessage: ({ palette, spacings }: Theme) =>
+    css({
+      margin: `${spacings.FULL}rem 0 `,
+      color: palette.WHITE,
+    }),
   playButton: ({ palette, mq }: Theme) =>
     css({
       cursor: 'pointer',
@@ -82,12 +87,15 @@ export default {
     css({
       maxWidth: '100%',
     }),
-  mediaDescription: ({ spacings, palette }: Theme) =>
+  mediaDescription: ({ palette }: Theme) =>
     css({
       span: { color: palette.GREY_4 },
-      margin: `${spacings.FULL}rem 0`,
       display: 'block',
       width: '100%',
     }),
+  mediaDescriptionGuidance: ({ spacings }: Theme) =>
+    css({
+      margin: `${spacings.DOUBLE}rem 0 0 0`,
+    }),
   hideComponent: () => css({ display: 'none' }),
 };

src/app/components/LiveMediaStream/index.tsx

@@ -7,6 +7,7 @@ import MediaLoader from '#app/components/MediaLoader';
 import filterForBlockType from '#app/lib/utilities/blockHandlers';
 import { ServiceContext } from '#app/contexts/ServiceContext';
 import mediaIcons from '#psammead/psammead-assets/src/svgs/mediaIcons';
+import { RequestContext } from '#app/contexts/RequestContext';
 import styles from './index.styles';
 import WARNING_LEVELS from '../MediaLoader/configs/warningLevels';
 
@@ -25,10 +26,11 @@ const MemoizedMediaPlayer = memo(MediaLoader);
 
 const LiveMediaStream = ({ mediaCollection }: Props) => {
   const { translations } = useContext(ServiceContext);
+  const { isLite } = useContext(RequestContext);
   const [showMedia, setShowMedia] = useState(false);
   let warningLevel = WARNING_LEVELS.NO_WARNING;
 
-  if (mediaCollection == null || mediaCollection.length === 0) {
+  if (isLite || mediaCollection == null || mediaCollection.length === 0) {
     return null;
   }
 
@@ -64,28 +66,38 @@ const LiveMediaStream = ({ mediaCollection }: Props) => {
   }
 
   const handleClick = () => {
-    if (warningLevel < WARNING_LEVELS.L1) {
-      const mediaPlayer = window.mediaPlayers?.[vpid];
-      if (showMedia) {
-        mediaPlayer?.pause();
-        setShowMedia(false);
-      } else {
+    const mediaPlayer = window.mediaPlayers?.[vpid];
+    if (showMedia) {
+      mediaPlayer?.pause();
+      setShowMedia(false);
+    } else {
+      if (warningLevel < WARNING_LEVELS.L1) {
         mediaPlayer?.play();
-        setShowMedia(true);
       }
+      setShowMedia(true);
     }
   };
 
   return (
     <div css={styles.componentContainer}>
-      <p css={styles.mediaDescription}>
+      <p
+        css={[
+          styles.mediaDescription,
+          warnings && styles.mediaDescriptionGuidance,
+        ]}
+      >
         <Text size="pica" fontVariant="sansBold" as="span">
           {short}
         </Text>{' '}
         <Text size="pica" fontVariant="sansRegular" as="span">
           {networkName}
         </Text>
       </p>
+      {warnings && (
+        <Text as="p" css={styles.guidanceMessage}>
+          {warnings.warning_text}
+        </Text>
+      )}
       <button
         type="button"
         onClick={() => handleClick()}

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

@@ -7,6 +7,7 @@ export default ({
   basePlayerConfig,
 }: ConfigBuilderProps): ConfigBuilderReturnProps => {
   const { model: liveMediaBlock } = filterForBlockType(blocks, 'liveMedia');
+  let warning = null;
 
   const {
     imageUrlTemplate: holdingImageURL,
@@ -15,6 +16,12 @@ export default ({
     synopses: { short },
   } = liveMediaBlock;
 
+  const { warnings } = video;
+
+  if (warnings) {
+    warning = warnings.warning_text;
+  }
+
   const rawDuration = moment.duration(video?.duration).asSeconds();
 
   return {
@@ -37,8 +44,10 @@ export default ({
           },
         ],
         summary: short,
+        warning,
       },
     },
+    ...(warning && { warning }),
     mediaType: 'video',
     showAds: false,
   };

src/app/components/MediaLoader/types.ts

@@ -37,6 +37,7 @@ export type PlayerConfig = {
     embedRights?: 'allowed';
     liveRewind?: boolean;
     simulcast?: boolean;
+    warning?: string;
   };
 };