WSTEAM1-TRANSCRIPT-MASTER-BRANCH: Add signpost and transcript components.

scripts/bundleSize/bundleSizeConfig.js

@@ -7,5 +7,5 @@
  * We are allowing a variance of -5 on `MIN_SIZE` and +5 on `MAX_SIZE` to avoid the need for frequent changes, as bundle sizes can fluctuate
  */
 
-export const MIN_SIZE = 646 - 5;
-export const MAX_SIZE = 1185 + 5;
+export const MIN_SIZE = 635 - 5;
+export const MAX_SIZE = 1204 + 5;

src/app/components/MediaLoader/Placeholder/__snapshots__/index.test.tsx.snap

@@ -16,6 +16,17 @@ exports[`Media Player: Placeholder should render a video placeholder 1`] = `
   background-color: #B80000;
 }
 
+.emotion-0:hover .experimentButtonFocus,
+.emotion-0:focus .experimentButtonFocus {
+  background-color: #B80000;
+  color: #FFFFFF;
+}
+
+.emotion-0:hover .experimentButtonFocus svg,
+.emotion-0:focus .experimentButtonFocus svg {
+  color: #FFFFFF;
+}
+
 @media screen and (forced-colors: active) {
   .emotion-0:hover>button,
   .emotion-0:focus>button {
@@ -258,7 +269,7 @@ exports[`Media Player: Placeholder should render a video placeholder 1`] = `
 
 <div>
   <div
-    class="emotion-0"
+    class="placeholder emotion-0"
     data-e2e="media-loader__placeholder"
   >
     <div
@@ -313,6 +324,7 @@ exports[`Media Player: Placeholder should render a video placeholder 1`] = `
         2:30
       </time>
     </button>
+    <noscript />
     <div
       class="emotion-9"
       style="padding-bottom: 0px; overflow: hidden;"
@@ -343,6 +355,17 @@ exports[`Media Player: Placeholder should render a video placeholder with guidan
   background-color: #B80000;
 }
 
+.emotion-0:hover .experimentButtonFocus,
+.emotion-0:focus .experimentButtonFocus {
+  background-color: #B80000;
+  color: #FFFFFF;
+}
+
+.emotion-0:hover .experimentButtonFocus svg,
+.emotion-0:focus .experimentButtonFocus svg {
+  color: #FFFFFF;
+}
+
 @media screen and (forced-colors: active) {
   .emotion-0:hover>button,
   .emotion-0:focus>button {
@@ -611,7 +634,7 @@ exports[`Media Player: Placeholder should render a video placeholder with guidan
 
 <div>
   <div
-    class="emotion-0"
+    class="placeholder emotion-0"
     data-e2e="media-loader__placeholder"
   >
     <div
@@ -672,6 +695,7 @@ exports[`Media Player: Placeholder should render a video placeholder with guidan
         2:30
       </time>
     </button>
+    <noscript />
     <div
       class="emotion-10"
       style="padding-bottom: 0px; overflow: hidden;"
@@ -702,6 +726,17 @@ exports[`Media Player: Placeholder should render a video placeholder without dur
   background-color: #B80000;
 }
 
+.emotion-0:hover .experimentButtonFocus,
+.emotion-0:focus .experimentButtonFocus {
+  background-color: #B80000;
+  color: #FFFFFF;
+}
+
+.emotion-0:hover .experimentButtonFocus svg,
+.emotion-0:focus .experimentButtonFocus svg {
+  color: #FFFFFF;
+}
+
 @media screen and (forced-colors: active) {
   .emotion-0:hover>button,
   .emotion-0:focus>button {
@@ -928,7 +963,7 @@ exports[`Media Player: Placeholder should render a video placeholder without dur
 
 <div>
   <div
-    class="emotion-0"
+    class="placeholder emotion-0"
     data-e2e="media-loader__placeholder"
   >
     <div
@@ -976,6 +1011,7 @@ exports[`Media Player: Placeholder should render a video placeholder without dur
         </svg>
       </div>
     </button>
+    <noscript />
     <div
       class="emotion-8"
       style="padding-bottom: 0px; overflow: hidden;"
@@ -1006,6 +1042,17 @@ exports[`Media Player: Placeholder should render an audio placeholder 1`] = `
   background-color: #B80000;
 }
 
+.emotion-0:hover .experimentButtonFocus,
+.emotion-0:focus .experimentButtonFocus {
+  background-color: #B80000;
+  color: #FFFFFF;
+}
+
+.emotion-0:hover .experimentButtonFocus svg,
+.emotion-0:focus .experimentButtonFocus svg {
+  color: #FFFFFF;
+}
+
 @media screen and (forced-colors: active) {
   .emotion-0:hover>button,
   .emotion-0:focus>button {
@@ -1248,7 +1295,7 @@ exports[`Media Player: Placeholder should render an audio placeholder 1`] = `
 
 <div>
   <div
-    class="emotion-0"
+    class="placeholder emotion-0"
     data-e2e="media-loader__placeholder"
   >
     <div
@@ -1296,6 +1343,7 @@ exports[`Media Player: Placeholder should render an audio placeholder 1`] = `
         2:30
       </time>
     </button>
+    <noscript />
     <div
       class="emotion-9"
       style="padding-bottom: 0px; overflow: hidden;"
@@ -1326,6 +1374,17 @@ exports[`Media Player: Placeholder should render an audio placeholder without du
   background-color: #B80000;
 }
 
+.emotion-0:hover .experimentButtonFocus,
+.emotion-0:focus .experimentButtonFocus {
+  background-color: #B80000;
+  color: #FFFFFF;
+}
+
+.emotion-0:hover .experimentButtonFocus svg,
+.emotion-0:focus .experimentButtonFocus svg {
+  color: #FFFFFF;
+}
+
 @media screen and (forced-colors: active) {
   .emotion-0:hover>button,
   .emotion-0:focus>button {
@@ -1552,7 +1611,7 @@ exports[`Media Player: Placeholder should render an audio placeholder without du
 
 <div>
   <div
-    class="emotion-0"
+    class="placeholder emotion-0"
     data-e2e="media-loader__placeholder"
   >
     <div
@@ -1593,6 +1652,7 @@ exports[`Media Player: Placeholder should render an audio placeholder without du
         </svg>
       </div>
     </button>
+    <noscript />
     <div
       class="emotion-8"
       style="padding-bottom: 0px; overflow: hidden;"
@@ -1623,6 +1683,17 @@ exports[`Media Player: Placeholder should render no-js styles when noJsClassName
   background-color: #B80000;
 }
 
+.emotion-0:hover .experimentButtonFocus,
+.emotion-0:focus .experimentButtonFocus {
+  background-color: #B80000;
+  color: #FFFFFF;
+}
+
+.emotion-0:hover .experimentButtonFocus svg,
+.emotion-0:focus .experimentButtonFocus svg {
+  color: #FFFFFF;
+}
+
 @media screen and (forced-colors: active) {
   .emotion-0:hover>button,
   .emotion-0:focus>button {
@@ -1891,7 +1962,7 @@ exports[`Media Player: Placeholder should render no-js styles when noJsClassName
 
 <div>
   <div
-    class="emotion-0"
+    class="placeholder emotion-0"
     data-e2e="media-loader__placeholder"
   >
     <div
@@ -1952,6 +2023,7 @@ exports[`Media Player: Placeholder should render no-js styles when noJsClassName
         2:30
       </time>
     </button>
+    <noscript />
     <div
       class="emotion-10"
       style="padding-bottom: 0px; overflow: hidden;"

src/app/components/MediaLoader/Placeholder/index.styles.tsx

@@ -17,6 +17,13 @@ const styles = {
         '> button': {
           backgroundColor: palette.POSTBOX,
         },
+        '.experimentButtonFocus': {
+          backgroundColor: palette.POSTBOX,
+          color: palette.WHITE,
+          svg: {
+            color: palette.WHITE,
+          },
+        },
       },
       [mq.FORCED_COLOURS]: {
         '&:hover, &:focus': {

src/app/components/MediaLoader/Placeholder/index.test.tsx

@@ -4,6 +4,7 @@ import {
   fireEvent,
   getByText,
 } from '#app/components/react-testing-library-with-providers';
+import { Stages } from '#app/hooks/useExperimentHook';
 import Placeholder from '.';
 
 describe('Media Player: Placeholder', () => {
@@ -25,6 +26,7 @@ describe('Media Player: Placeholder', () => {
         src="http://foo.bar/placeholder.png"
         mediaInfo={{ title: 'Dog chases cat.', ...withDuration }}
         noJsMessage="no js"
+        experimentStage={Stages.STAGE_3}
       />,
       { service: 'news' },
     );
@@ -38,6 +40,7 @@ describe('Media Player: Placeholder', () => {
         src="http://foo.bar/placeholder.png"
         mediaInfo={{ title: 'Dog chases cat.' }}
         noJsMessage="no js"
+        experimentStage={Stages.STAGE_3}
       />,
       { service: 'news' },
     );
@@ -55,6 +58,7 @@ describe('Media Player: Placeholder', () => {
           ...withDuration,
         }}
         noJsMessage="no js"
+        experimentStage={Stages.STAGE_3}
       />,
       { service: 'news' },
     );
@@ -68,6 +72,7 @@ describe('Media Player: Placeholder', () => {
         src="http://foo.bar/placeholder.png"
         mediaInfo={{ type: 'audio', title: 'Dog barks at cat.' }}
         noJsMessage="no js"
+        experimentStage={Stages.STAGE_3}
       />,
       { service: 'news' },
     );
@@ -81,6 +86,7 @@ describe('Media Player: Placeholder', () => {
         src="http://foo.bar/placeholder.png"
         mediaInfo={{ title: 'Dog chases cat.', ...withDuration }}
         noJsMessage="no js"
+        experimentStage={Stages.STAGE_3}
       />,
       { service: 'news' },
     );
@@ -101,6 +107,7 @@ describe('Media Player: Placeholder', () => {
           ...withDuration,
         }}
         noJsMessage="no js"
+        experimentStage={Stages.STAGE_3}
       />,
       { service: 'news' },
     );
@@ -119,6 +126,7 @@ describe('Media Player: Placeholder', () => {
           ...withDuration,
         }}
         noJsMessage="no js"
+        experimentStage={Stages.STAGE_3}
       />,
       { service: 'news' },
     );

src/app/components/MediaLoader/Placeholder/index.tsx

@@ -1,17 +1,22 @@
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
+import { Stages } from '#app/hooks/useExperimentHook';
+import SignPost from '#app/components/TranscriptExperiment/SignPost';
+import SignPostNoJs from '#app/components/TranscriptExperiment/SignPostNoJs';
 import Image from '../../Image';
 import styles from './index.styles';
 import PlayButton from './PlayButton';
 import Guidance from './Guidance';
 import { MediaInfo } from '../types';
+import MediaIndicator from '../../TranscriptExperiment/MediaIndicator';
 
 interface Props {
   onClick: React.MouseEventHandler<HTMLDivElement>;
   src?: string;
   srcSet?: string;
   mediaInfo?: MediaInfo;
   noJsMessage?: string;
+  experimentStage?: Stages;
 }
 
 const MediaPlayerPlaceholder = ({
@@ -20,6 +25,7 @@ const MediaPlayerPlaceholder = ({
   srcSet,
   mediaInfo,
   noJsMessage = '',
+  experimentStage = Stages.STAGE_3,
 }: Props) => {
   const {
     title,
@@ -30,31 +36,54 @@ const MediaPlayerPlaceholder = ({
     guidanceMessage,
   } = mediaInfo ?? {};
 
+  const playButton = (
+    <PlayButton
+      css={styles.playButton}
+      // eslint-disable-next-line @typescript-eslint/no-empty-function
+      onClick={() => {}}
+      title={title}
+      datetime={datetime}
+      duration={duration}
+      durationSpoken={durationSpoken}
+      type={type}
+      guidanceMessage={guidanceMessage}
+      className="focusIndicatorRemove"
+    />
+  );
+
+  const experimentPlayButton = (
+    <MediaIndicator
+      title={title}
+      datetime={datetime}
+      duration={duration}
+      durationSpoken={durationSpoken}
+      type={type}
+      guidanceMessage={guidanceMessage}
+    />
+  );
+
+  const guideComponent = (
+    <Guidance
+      css={styles.guidance}
+      guidanceMessage={guidanceMessage}
+      noJsMessage={noJsMessage}
+    />
+  );
+
+  const experimentSignPost = <SignPost title={title} />;
+
   return (
     // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
     <div
       onClick={onClick}
       css={styles.placeholder}
       data-e2e="media-loader__placeholder"
+      className="placeholder"
     >
-      <Guidance
-        css={styles.guidance}
-        guidanceMessage={guidanceMessage}
-        noJsMessage={noJsMessage}
-      />
-      <PlayButton
-        css={styles.playButton}
-        // eslint-disable-next-line @typescript-eslint/no-empty-function
-        onClick={() => {}}
-        title={title}
-        datetime={datetime}
-        duration={duration}
-        durationSpoken={durationSpoken}
-        type={type}
-        guidanceMessage={guidanceMessage}
-        className="focusIndicatorRemove"
-      />
-
+      {experimentStage === Stages.STAGE_3 ? guideComponent : null}
+      {experimentStage === Stages.STAGE_2 ? experimentPlayButton : playButton}
+      {experimentStage === Stages.STAGE_2 ? experimentSignPost : null}
+      <SignPostNoJs noJsMessage={noJsMessage} />
       <Image alt="" src={src} srcSet={srcSet} />
     </div>
   );