WS-2095: Add share function to video carousels (Productionised)

scripts/bundleSize/bundleSizeConfig.js

@@ -10,4 +10,4 @@
 export const VARIANCE = 5;
 
 export const MIN_SIZE = 913;
-export const MAX_SIZE = 1282;
+export const MAX_SIZE = 1289;

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

@@ -61,7 +61,7 @@ export default ({
         plugins: {
           toLoad: [
             {
-              html: `${SIMORGH_PUBLIC_STATIC_ASSETS_ORIGIN}${SIMORGH_PUBLIC_STATIC_ASSETS_PATH}smpPlugins/fullscreen.js`,
+              html: `${SIMORGH_PUBLIC_STATIC_ASSETS_ORIGIN}${SIMORGH_PUBLIC_STATIC_ASSETS_PATH}smpPlugins/fullscreen.js?v=1`,
               playerOnly: true,
             },
           ],

src/app/components/MediaLoader/index.tsx

@@ -1,4 +1,12 @@
-import { use, useEffect, useRef, useState } from 'react';
+import {
+  Dispatch,
+  RefObject,
+  SetStateAction,
+  use,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
 import { Helmet } from 'react-helmet';
 import { RequestContext } from '#contexts/RequestContext';
 import { MEDIA_PLAYER_STATUS } from '#app/lib/logger.const';
@@ -13,6 +21,7 @@ import {
 import filterForBlockType from '#lib/utilities/blockHandlers';
 import { PageTypes } from '#app/models/types/global';
 import { EventTrackingContext } from '#app/contexts/EventTrackingContext';
+import { getEnvConfig } from '#app/lib/utilities/getEnvConfig';
 import {
   BumpType,
   EventMapping,
@@ -109,6 +118,10 @@ type MediaContainerProps = {
   uniqueId?: string;
   noJsMessage?: string;
   eventMapping?: EventMapping;
+  setVideoOverlayContainerRef?: RefObject<
+    Dispatch<SetStateAction<HTMLElement | null>>
+  >;
+  playerKey: string;
 };
 
 const isAudioPlayer = (playerConfig: PlayerConfig) =>
@@ -120,11 +133,21 @@ const MediaContainer = ({
   uniqueId,
   noJsMessage,
   eventMapping,
+  setVideoOverlayContainerRef,
+  playerKey,
 }: MediaContainerProps) => {
   const playerElementRef = useRef<HTMLDivElement>(null);
   const isAudio = isAudioPlayer(playerConfig);
-
+  const playerKeyRef = useRef<string | null>(null);
+  const {
+    SIMORGH_PUBLIC_STATIC_ASSETS_ORIGIN,
+    SIMORGH_PUBLIC_STATIC_ASSETS_PATH,
+  } = getEnvConfig();
+  const videoOverlayPlugin = `${SIMORGH_PUBLIC_STATIC_ASSETS_ORIGIN}${SIMORGH_PUBLIC_STATIC_ASSETS_PATH}smpPlugins/video-overlay-plugin.js?v=1`;
   useEffect(() => {
+    if (!playerElementRef.current || playerKeyRef.current === playerKey) return;
+
+    playerKeyRef.current = playerKey;
     try {
       window.requirejs(['bump-4'], (Bump: BumpType) => {
         if (playerElementRef?.current && playerConfig) {
@@ -185,7 +208,21 @@ const MediaContainer = ({
                 }
               });
             }
-
+            if (
+              setVideoOverlayContainerRef &&
+              playerConfig.ui?.swipable?.enabled
+            ) {
+              mediaPlayer.loadPlugin(
+                {
+                  html: videoOverlayPlugin,
+                  playerOnly: true, // do not enable this plugin for old J2 version of the SMP player due to different UI },
+                  waitOnPluginLoad: true,
+                },
+                {
+                  setPluginContainer: setVideoOverlayContainerRef.current,
+                },
+              );
+            }
             mediaPlayer.load();
           };
 
@@ -195,7 +232,15 @@ const MediaContainer = ({
     } catch (error) {
       logger.error(MEDIA_PLAYER_STATUS, error);
     }
-  }, [playerConfig, showAds, uniqueId, eventMapping]);
+  }, [
+    eventMapping,
+    playerConfig,
+    playerKey,
+    setVideoOverlayContainerRef,
+    showAds,
+    uniqueId,
+    videoOverlayPlugin,
+  ]);
 
   return (
     <div
@@ -217,6 +262,9 @@ type Props = {
   embedded?: boolean;
   uniqueId?: string;
   eventMapping?: EventMapping;
+  setVideoOverlayContainerRef?: RefObject<
+    Dispatch<SetStateAction<HTMLElement | null>>
+  >;
 };
 
 const MediaLoader = ({
@@ -225,6 +273,7 @@ const MediaLoader = ({
   embedded,
   uniqueId,
   eventMapping,
+  setVideoOverlayContainerRef,
 }: Props) => {
   const { lang, service, translations } = use(ServiceContext);
   const { pageIdentifier } = use(EventTrackingContext);
@@ -277,6 +326,13 @@ const MediaLoader = ({
     ampIframeUrl,
   } = config;
 
+  const { clipPID } = playerConfig?.statsObject || {};
+  const { skin } = playerConfig?.ui || {};
+
+  const playerKey = `${clipPID}-${skin}-${showAds}`;
+
+  if (isLite || !config || !playerConfig) return null;
+
   const captionBlock = getCaptionBlock(blocks, pageType);
   const isPortrait = orientation === 'portrait';
   const isLandscape = orientation === 'landscape';
@@ -340,6 +396,8 @@ const MediaLoader = ({
                 uniqueId={uniqueId}
                 noJsMessage={noJsMessage}
                 eventMapping={eventMapping}
+                setVideoOverlayContainerRef={setVideoOverlayContainerRef}
+                playerKey={playerKey}
               />
             )}
           </>

src/app/components/MediaLoader/types.ts

@@ -8,8 +8,12 @@ import {
 } from '#app/models/types/media';
 import { OptimoImageBlock } from '#app/models/types/optimo';
 import { Translations } from '#app/models/types/translations';
+import { Dispatch, SetStateAction } from 'react';
 
 export type SMPEvent = {
+  detail?: {
+    url?: string;
+  };
   playlist?: {
     items: PlaylistItem[];
   };
@@ -23,7 +27,10 @@ export type MediaPlayerEvents =
   | 'pluginLoaded'
   | 'fullscreenExit'
   | 'statsNavigation'
-  | 'pause';
+  | 'pause'
+  | 'uiControlBarShown'
+  | 'uiControlBarHidden'
+  | 'mediaItemChanged';
 
 export type EventMapping = Partial<
   Record<MediaPlayerEvents, (_e: SMPEvent) => void>
@@ -34,6 +41,7 @@ export type Playlist = {
   summary?: string;
   holdingImageURL?: string;
   items: PlaylistItem[] | LegacyPlayListItem[];
+  shareUrl?: string | null;
   guidance?: string;
   embedRights?: 'allowed';
   liveRewind?: boolean;
@@ -163,11 +171,14 @@ export type Player = {
   next: () => void;
   bind: (event: MediaPlayerEvents, callback: (e: SMPEvent) => void) => void;
   loadPlugin: (
-    pluginName: { [key: string]: string },
+    pluginName: {
+      [key: string]: string | boolean | undefined;
+    },
     parameters?: {
-      name: string;
-      data: {
-        adTag: string;
+      name?: string;
+      setPluginContainer?: Dispatch<SetStateAction<HTMLElement | null>>;
+      data?: {
+        adTag?: string;
       };
     },
   ) => void;
@@ -288,6 +299,7 @@ export type PortraitClipMediaBlock = {
       altText?: string;
     }[];
     video: {
+      shareUrl?: string | null;
       id: string;
       title: string;
       holdingImageURL?: string;

src/app/components/PortraitVideoCarousel/VideoOverlay/index.styles.ts

@@ -0,0 +1,65 @@
+import { css, Theme } from '@emotion/react';
+
+const styles = {
+  overlayWrapper: () =>
+    css({
+      zIndex: 200,
+      position: 'absolute',
+      top: 0,
+      bottom: 0,
+      left: 0,
+      right: 0,
+      containerType: 'inline-size',
+      containerName: 'overlayWrapper',
+      '@supports not (container-type: inline-size)': {
+        display: 'none',
+      },
+    }),
+  overlayFooterContents: ({ spacings }: Theme) =>
+    css({
+      display: 'flex',
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      gap: `${spacings.DOUBLE}rem`,
+      maxWidth: `77.5rem`,
+      margin: 'auto',
+      alignItems: 'flex-end',
+    }),
+  overlayFooter: ({ spacings }: Theme) =>
+    css({
+      position: 'absolute',
+      left: `${spacings.FULL}rem`,
+      right: `${spacings.FULL}rem`,
+      bottom: 0,
+      paddingBottom: '1rem',
+      '@supports not (container-type: inline-size)': {
+        display: 'none',
+      },
+
+      '@container overlayWrapper (min-width: 20rem)': {
+        paddingBottom: '5rem',
+        left: `${spacings.DOUBLE}rem`,
+        right: `${spacings.DOUBLE}rem`,
+      },
+
+      // @container (min-width: 500px)
+      '@container overlayWrapper (min-width: 31.25rem)': {
+        left: `${spacings.TRIPLE}rem`,
+        right: `${spacings.TRIPLE}rem`,
+      },
+
+      // @container (min-width: 860px)
+      '@container overlayWrapper (min-width: 53.75rem)': {
+        paddingBottom: '8.75rem',
+        left: `${spacings.DOUBLE}rem`,
+        right: `${spacings.DOUBLE}rem`,
+      },
+    }),
+  shareToolWrapper: () =>
+    css({
+      marginLeft: 'auto',
+      pointerEvents: 'auto',
+    }),
+};
+
+export default styles;

src/app/components/PortraitVideoCarousel/VideoOverlay/index.tsx

@@ -0,0 +1,63 @@
+import { useEffect, useState } from 'react';
+import { EventTrackingData } from '#app/lib/analyticsUtils/types';
+import { PortraitClipMediaBlock } from '#app/components/MediaLoader/types';
+import ShareButton from '../../ShareButton';
+import styles from './index.styles';
+
+const ShareToolComponent = ({ shareUrlPath, title, id }) => {
+  const [shareUrl, setShareUrl] = useState('');
+
+  useEffect(() => {
+    setShareUrl(`https://bbc.com${shareUrlPath}`);
+  }, [shareUrlPath]);
+
+  const eventTrackingData: EventTrackingData = {
+    componentName: 'share-button-portrait-video-carousel',
+    itemTracker: {
+      resourceId: id,
+    },
+  };
+
+  return (
+    <div key={shareUrlPath} css={styles.shareToolWrapper}>
+      <ShareButton
+        title={title}
+        url={shareUrl}
+        eventTrackingData={eventTrackingData}
+      />
+    </div>
+  );
+};
+
+const VideoOverlay = ({
+  currentVideo,
+  controlsDisplayed,
+}: {
+  currentVideo: PortraitClipMediaBlock | undefined;
+  controlsDisplayed: boolean;
+}) => {
+  const { shareUrl, title, id } = currentVideo?.model?.video || {};
+
+  return (
+    <div css={[styles.overlayWrapper, !shareUrl && 'display: none']}>
+      <div
+        className="video-overlay-footer fadedIn fadedOut"
+        // The video-overlay plugin will use this attribute to instruct SMP not to render subtitles in the space occupied by this div.
+        data-region-exclude-subtitles
+        css={[
+          styles.overlayFooter,
+          controlsDisplayed ? 'opacity: 1' : 'opacity: 0',
+        ]}
+      >
+        <div
+          className="video-overlay-footer-contents"
+          css={styles.overlayFooterContents}
+        >
+          <ShareToolComponent shareUrlPath={shareUrl} title={title} id={id} />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default VideoOverlay;