WSTEAM1-1521: Add Autoplay

data/mundo/live/c7dkx155e626t.json

@@ -74,7 +74,15 @@
             "serviceId": null,
             "authToken": null,
             "status": "LIVE",
-            "warnings": null
+            "warnings": {
+              "warning_text": "Contains some upsetting scenes.",
+              "warning": [
+                {
+                  "warning_code": "D1",
+                  "short_description": "Some upsetting scenes"
+                }
+              ]
+            }
           },
           "leadMedia": true
         }

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

@@ -1,8 +1,7 @@
 import { css, Theme } from '@emotion/react';
-import PlayButton from '../MediaLoader/Placeholder/PlayButton';
 
 export default {
-  liveMediaStreamContainer: ({ palette, spacings, mq }: Theme) =>
+  liveMediaStreamContainer: ({ spacings }: Theme) =>
     css({
       // backgroundColor: `${palette.BLACK}`,
       margin: `0 ${spacings.FULL}rem`,
@@ -23,7 +22,7 @@ export default {
         width: '100%',
       },
     }),
-  playButtonText: ({ spacings, palette, mq }: Theme) =>
+  playButtonText: ({ palette }: Theme) =>
     css({
       color: palette.WHITE,
     }),
@@ -46,8 +45,16 @@ export default {
       display: 'block',
       width: '100%',
     }),
-  mediaLoaderContainer: ({ palette, spacings, mq }: Theme) =>
+  mediaLoaderContainer: ({ palette }: Theme) =>
     css({
       backgroundColor: `${palette.POSTBOX}`,
     }),
+  showContent: () =>
+    css({
+      display: 'unset',
+    }),
+  hideContent: () =>
+    css({
+      display: 'none',
+    }),
 };

src/app/components/LiveMediaStream/index.tsx

@@ -1,9 +1,13 @@
 /** @jsx jsx */
+/* @jsxFrag React.Fragment */
 import { jsx } from '@emotion/react';
-import { useContext, useState } from 'react';
+import React, { FC, useContext, useEffect, useState } from 'react';
 import Text from '#app/components/Text';
 import { MediaCollection } from '#app/components/MediaLoader/types';
-import MediaLoader, { BumpLoader } from '#app/components/MediaLoader';
+import MediaLoader, {
+  BumpLoader,
+  ManualControlProps,
+} 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';
@@ -34,46 +38,76 @@ const LiveMediaStream = ({ mediaCollection }: Props) => {
     },
   } = mediaItem;
 
-  const handleClick = () => {
-    setShowMedia(!showMedia);
-  };
+  const ManualControls = ({
+    mediaControls,
+    mediaContainer,
+  }: ManualControlProps) => {
+    const handleClick = () => {
+      setShowMedia(previousState => !previousState);
+    };
 
-  return (
-    <div css={styles.liveMediaStreamContainer}>
-      <BumpLoader />
-      <Text css={styles.mediaDescription}>{short}</Text>
-      {!showMedia && (
+    useEffect(() => {
+      if (showMedia) {
+        mediaControls?.play();
+      } else {
+        mediaControls?.stop();
+      }
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [mediaControls, showMedia]);
+
+    return (
+      <>
+        <div
+          css={[
+            styles.liveMediaSpan,
+            showMedia ? styles.showContent : styles.hideContent,
+          ]}
+        >
+          <Text>{`${title} - ${networkName}`}</Text>
+          <button
+            type="button"
+            onClick={handleClick}
+            data-testid="close-button"
+          >
+            {mediaIcons.close}
+          </button>
+        </div>
         <button
           type="button"
           onClick={handleClick}
           data-testid="watch-now-button"
-          css={styles.playButton}
+          css={[
+            styles.playButton,
+            showMedia ? styles.hideContent : styles.showContent,
+          ]}
         >
           <span css={styles.playIcon}>{mediaIcons.video}</span>
           <Text
-            css={styles.playButtonText}
+            css={[styles.playButtonText]}
             size="doublePica"
             fontVariant="sansBold"
           >
             {watchNow}
           </Text>
         </button>
-      )}
-      {showMedia && (
-        <div css={styles.mediaLoaderContainer}>
-          <div css={styles.liveMediaSpan}>
-            <Text>{`${title} - ${networkName}`}</Text>
-            <button
-              type="button"
-              onClick={handleClick}
-              data-testid="close-button"
-            >
-              {mediaIcons.close}
-            </button>
-          </div>
-          <MediaLoader blocks={mediaCollection} />
+        <div css={showMedia ? styles.showContent : styles.hideContent}>
+          {mediaContainer}
         </div>
-      )}
+      </>
+    );
+  };
+
+  return (
+    <div css={styles.liveMediaStreamContainer}>
+      <BumpLoader />
+      <Text css={styles.mediaDescription}>{short}</Text>
+      <div css={styles.mediaLoaderContainer}>
+        <MediaLoader
+          blocks={mediaCollection}
+          placeholderOverride={false}
+          ManualControls={ManualControls as FC}
+        />
+      </div>
     </div>
   );
 };

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

@@ -33,7 +33,7 @@ export default ({
   return {
     playerConfig: {
       ...basePlayerConfig,
-      autoplay: true,
+      autoplay: false,
       statsObject: {
         ...basePlayerConfig.statsObject,
         episodePID: liveMediaBlock.id,

src/app/components/MediaLoader/index.tsx

@@ -1,8 +1,14 @@
 /** @jsx jsx */
 /* @jsxFrag React.Fragment */
-
 import { jsx } from '@emotion/react';
-import React, { useContext, useEffect, useRef, useState } from 'react';
+import React, {
+  FC,
+  ReactHTMLElement,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
 import { Helmet } from 'react-helmet';
 import { RequestContext } from '#contexts/RequestContext';
 import { MEDIA_PLAYER_STATUS } from '#app/lib/logger.const';
@@ -16,7 +22,7 @@ import {
 import filterForBlockType from '#lib/utilities/blockHandlers';
 import { PageTypes } from '#app/models/types/global';
 import { EventTrackingContext } from '#app/contexts/EventTrackingContext';
-import { BumpType, MediaBlock, PlayerConfig } from './types';
+import { BumpType, MediaBlock, Player, PlayerConfig } from './types';
 import Caption from '../Caption';
 import nodeLogger from '../../lib/logger.node';
 import buildConfig from './utils/buildSettings';
@@ -93,13 +99,24 @@ const AdvertTagLoader = () => {
   );
 };
 
+export type ManualControlProps = {
+  mediaControls?: Player;
+  mediaContainer: ReactHTMLElement<HTMLDivElement>;
+};
+
 type MediaContainerProps = {
   playerConfig: PlayerConfig;
   showAds: boolean;
+  ManualControls?: FC<ManualControlProps>;
 };
 
-const MediaContainer = ({ playerConfig, showAds }: MediaContainerProps) => {
+const MediaContainer = ({
+  playerConfig,
+  showAds,
+  ManualControls,
+}: MediaContainerProps) => {
   const playerElementRef = useRef<HTMLDivElement>(null);
+  const [mediaControls, setMediaControls] = useState<Player>();
 
   useEffect(() => {
     try {
@@ -111,6 +128,7 @@ const MediaContainer = ({ playerConfig, showAds }: MediaContainerProps) => {
           );
 
           mediaPlayer.load();
+          setMediaControls(mediaPlayer);
 
           if (showAds) {
             const adTag = await window.dotcom.ads.getAdTag();
@@ -145,7 +163,7 @@ const MediaContainer = ({ playerConfig, showAds }: MediaContainerProps) => {
     }
   }, [playerConfig, showAds]);
 
-  return (
+  const container = (
     <div
       ref={playerElementRef}
       data-e2e="media-player"
@@ -156,15 +174,36 @@ const MediaContainer = ({ playerConfig, showAds }: MediaContainerProps) => {
       }
     />
   );
+
+  return (
+    <>
+      {ManualControls ? (
+        <ManualControls
+          mediaControls={mediaControls}
+          mediaContainer={container as ManualControlProps['mediaContainer']}
+        />
+      ) : (
+        container
+      )}
+    </>
+  );
 };
 
 type Props = {
   blocks: MediaBlock[];
   className?: string;
   embedded?: boolean;
+  placeholderOverride?: boolean;
+  ManualControls?: FC<ManualControlProps>;
 };
 
-const MediaLoader = ({ blocks, className, embedded }: Props) => {
+const MediaLoader = ({
+  blocks,
+  className,
+  embedded,
+  placeholderOverride = true,
+  ManualControls,
+}: Props) => {
   const { lang, translations } = useContext(ServiceContext);
   const { pageIdentifier } = useContext(EventTrackingContext);
   const { enabled: adsEnabled } = useToggle('ads');
@@ -225,7 +264,9 @@ const MediaLoader = ({ blocks, className, embedded }: Props) => {
     mediaInfo,
   } = placeholderConfig ?? {};
 
-  const hasPlaceholder = Boolean(showPlaceholder && placeholderSrc);
+  const hasPlaceholder = Boolean(
+    placeholderOverride && showPlaceholder && placeholderSrc,
+  );
 
   const showPortraitTitle = orientation === 'portrait' && !embedded;
 
@@ -274,7 +315,11 @@ const MediaLoader = ({ blocks, className, embedded }: Props) => {
                 onClick={() => setShowPlaceholder(false)}
               />
             ) : (
-              <MediaContainer playerConfig={playerConfig} showAds={showAds} />
+              <MediaContainer
+                playerConfig={playerConfig}
+                showAds={showAds}
+                ManualControls={ManualControls}
+              />
             )}
           </>
         )}

src/app/components/MediaLoader/types.ts

@@ -114,6 +114,9 @@ export type Player = {
     parameters: { updatedAdTag: string },
   ): void;
   load: () => void;
+  play: () => void;
+  pause: () => void;
+  stop: () => void;
   bind: (event: string, callback: () => void) => void;
   loadPlugin: (
     pluginName: { [key: string]: string },

src/app/models/types/translations.ts

@@ -173,7 +173,7 @@ export interface Translations {
     recentEpisodes?: string;
     podcastExternalLinks?: string;
     download?: string;
-    watchNow: string;
+    watchNow?: string;
   };
   socialEmbed: {
     caption?: {