WSTEAM1-TRANSCRIPT: Front End Changes for Transcript First Video #12201

shayneahchoon · 2024-11-22T11:44:21Z

Transcript Experiment. No JIRA ticket. Notes to Reviewers

Overall changes

Adds transcript component and updates mediaLoader to allow Transcript First Video experience.

Code changes

Data

Adds fixture data files for storybook (Article Page & Media Article Page)

Components

Updates Media Loader, which affects video on newer Article, Media Article Pages.
Adds Transcript component
Adds media indicator & signposting

Hooks

Adds 'useExperiementHook' which works out which variant to use.

Plus updates snapshots

Testing

Local test link: http://localhost:7080/mundo/articles/cle16n19nd9o
Storybook permalinks & more testing info in this paper doc

Helpful Links

AAC
A11y swarm
Screen reader UX

src/app/pages/ArticlePage/index.stories.tsx

Isabella-Mitchell · 2025-02-14T09:17:23Z

Amends please
...

@Isabella-Mitchell can we make the focus indicator look better when it's around '+ Load video'

I've updated this to use the inverted focus indicator. Is this ok?

greenc05 · 2025-02-17T13:02:02Z

Links for component health

greenc05 · 2025-02-17T13:09:53Z

Question: On your local env, when you press TAB on the keyboard to move focus to 'Load video' where does focus go after this link is actioned? Does it move to the player? (Hard to tell on storybook - seems to be ok e.g. it doesn't go to the top of the page)

Isabella-Mitchell · 2025-02-28T13:33:25Z

Question: On your local env, when you press TAB on the keyboard to move focus to 'Load video' where does focus go after this link is actioned? Does it move to the player? (Hard to tell on storybook - seems to be ok e.g. it doesn't go to the top of the page)

Yep - it moves to the player. (Checked on http://localhost.bbc.com:7080/mundo/articles/cle16n19nd9o).

Isabella-Mitchell · 2025-02-28T13:44:05Z

Links for component health

AAC

A11y swarm

Screen reader UX

Have added, though not the swarm doc since it's not set up for sharing

karinathomasbbc · 2025-03-03T12:14:23Z

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

@@ -17,6 +17,13 @@ const styles = {
        '> button': {
          backgroundColor: palette.POSTBOX,
        },
+        '.experimentButtonFocus': {


Are we planning to run this as an experiment? Or can we use the word transcript instead?

karinathomasbbc · 2025-03-03T12:16:35Z

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

+    />
+  );
+
+  const experimentPlayButton = (


Can we use transcript instead of experiment in variable names? (Let's pretend it's not an experiment any more!)

playButtonWithTranscript or something along those lines?

karinathomasbbc · 2025-03-03T12:17:18Z

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

+    />
+  );
+
+  const experimentSignPost = <SignPost title={title} />;


What is the signpost component? Can we give it a better name (and remove experiment)?

karinathomasbbc · 2025-03-03T12:17:53Z

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

+      {experimentStage === Stages.STAGE_3 ? guideComponent : null}
+      {experimentStage === Stages.STAGE_2 ? experimentPlayButton : playButton}
+      {experimentStage === Stages.STAGE_2 ? experimentSignPost : null}


Reorder stages numerically

Suggested change

{experimentStage === Stages.STAGE_3 ? guideComponent : null}

{experimentStage === Stages.STAGE_2 ? experimentPlayButton : playButton}

{experimentStage === Stages.STAGE_2 ? experimentSignPost : null}

{experimentStage === Stages.STAGE_2 ? experimentPlayButton : playButton}

{experimentStage === Stages.STAGE_2 ? experimentSignPost : null}

{experimentStage === Stages.STAGE_3 ? guideComponent : null}

karinathomasbbc · 2025-03-03T12:18:32Z

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

+      {experimentStage === Stages.STAGE_3 ? guideComponent : null}
+      {experimentStage === Stages.STAGE_2 ? experimentPlayButton : playButton}
+      {experimentStage === Stages.STAGE_2 ? experimentSignPost : null}
+      <SignPostNoJs noJsMessage={noJsMessage} />


Can we name this component something other than SignPostNoJS? What exactly is it?

karinathomasbbc · 2025-03-03T12:40:08Z

src/app/components/TranscriptExperiment/SignPostNoJs/index.test.tsx

+        service: 'news',
+      },
+    );
+    expect(container).toMatchSnapshot();


Can we use a better way of asserting that this component renders as expected?

karinathomasbbc · 2025-03-03T12:40:38Z

src/app/components/icons/index.tsx

@@ -37,96 +37,18 @@ export const RightChevron = ({ className }: { className?: string }) => (
  </svg>
 );

-export const Clock = ({ className }: { className?: string }) => (


Oops I am guessing we didn't mean to delete all these?

karinathomasbbc · 2025-03-03T12:40:59Z

src/app/components/TranscriptExperiment/SignPost/svgs.tsx

Is there an argument for adding these svgs to the src/app/components/icons/index.tsx file?

karinathomasbbc · 2025-03-03T12:44:19Z

src/app/hooks/useExperimentHook/index.tsx

I wonder if we should rename this hook to be very specific to this particular experiment? Because it sounds generic, and seems like it could be used for other experiments, but it can't.

Let's ensure that the name does not include "hook"

Something along the lines of useDetermineTranscriptExperimentStage (that's a bit of a mouthful! Naming things is hard!!)

karinathomasbbc · 2025-03-03T12:47:49Z

ws-nextjs-app/integration/pages/live/pidgin/__snapshots__/canonical.test.ts.snap

-  <div
-    class="css-czokpf"
-    data-e2e="media-player__guidance"
-  >
-    <strong
-      aria-hidden="true"
-      class="guidance-message css-e3010g"
-    >
-      Contains strong language and some upsetting scenes.
-    </strong>
-    <noscript
-      class="css-lllaou"
-    >
-      &lt;strong&gt;Dem no support media player for your device&lt;/strong&gt;
-    </noscript>
-  </div>


I wasn't expecting these to have disappeared from the snapshots...

karinathomasbbc · 2025-03-03T16:03:25Z

Links for component health

AAC

A11y swarm

Screen reader UX

Have added, though not the swarm doc since it's not set up for sharing

Can I request that we use Dropbox Paper for the swarm when we do it?

karinathomasbbc · 2025-03-03T16:06:46Z

src/app/components/MediaLoader/index.tsx

+  uniqueId,
+  forceStage,
+}: Props) => {
+  // TODO - refactor to improve experience on .lite


How might we improve the experience on lite? What type of refactoring is needed? Should we try and do that as part of this PR, or later?

karinathomasbbc · 2025-03-03T16:09:53Z

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

  parameters: {
    docs: { readme },
  },
 };

+export const ExperimentMediaLoader = ({ experimentStage }: Props) => (


Suggested change

export const ExperimentMediaLoader = ({ experimentStage }: Props) => (

export const MediaLoaderWithTranscript = ({ experimentStage }: Props) => (

karinathomasbbc · 2025-03-03T16:11:17Z

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

  </RequestContextProvider>
 );

 export default {
  title: 'Components/MediaLoader',
  Component,
+  argTypes: {
+    experimentStage: {
+      options: [Stages.STAGE_2, Stages.STAGE_3],


Why don't we add all stages here? Also, could it be a dropdown with a default option selected?

karinathomasbbc · 2025-03-03T16:15:15Z

src/app/hooks/useExperimentHook/index.tsx

+  if (service !== 'mundo' && !lowPower && !dataSaver && !isOperaMini) {
+    return Stages.STAGE_3;
+  }
+
+  if (
+    (service === 'mundo' || dataSaver || isOperaMini || lowPower) &&
+    hasTranscript
+  ) {
+    return Stages.STAGE_2;
+  }


Reorder stages

Suggested change

if (service !== 'mundo' && !lowPower && !dataSaver && !isOperaMini) {

return Stages.STAGE_3;

}

if (

(service === 'mundo' || dataSaver || isOperaMini || lowPower) &&

hasTranscript

) {

return Stages.STAGE_2;

}

if (

(service === 'mundo' || dataSaver || isOperaMini || lowPower) &&

hasTranscript

) {

return Stages.STAGE_2;

}

if (service !== 'mundo' && !lowPower && !dataSaver && !isOperaMini) {

return Stages.STAGE_3;

}

Isabella-Mitchell and others added 30 commits June 7, 2024 17:01

Transcript Front End: Initial commit

f187449

Transcript - render on local article

2255797

Fix errors

3929222

Use display: block

acdcbe6

Transcript-front-end: A11y updates

df49ad1

Merge branch 'latest' into Transcript-front-end

9a11125

Merge branch 'latest' into Transcript-front-end

b4c3709

Transcript front end: Adds SVG and makes disclaimer optional

d68de51

Transcript front end: Updates stories

af89963

Transcript front end: Fix unit tests

a1a75e1

Transcript-front-end: Replaces svg with css triangle

328a686

Transcript front end: tidy

0a7e90a

Transcript front end: Adds initial readme

0244a53

Trancript-front-end: apply darkUi styles

5f0432a

Replace custom css arrow with SVG

4d13863

Merge branch 'latest' into Transcript-front-end

10d67a4

Typeify

96bf199

WSTEAM1-POC: Add button and signpost

f1c2a21

WSTEAM1-POC: Add button and signpost

5a87973

WSTEAM1-POC: Add button and signpost

14f2bbb

WSTEAM1-POC: Add button and signpost

0cdcf3d

WSTEAM1-POC: Add button and signpost

e4163cc

WSTEAM1-POC: Add button and signpost

18e4b64

WSTEAM1-POC: Add button and signpost

98374f7

WSTEAM1-POC: Add button and signpost

e51f4c6

Update mediaLoader to render Transcript if provided

801f9d5

Adds unit tests. Updates listItem rendering logic

7bd1587

Add basic transcript tests

134586a

Refines listitem logic and styles

c9e8ef8

Merge branch 'latest' into WSTEAM1-TRANSCRIPT-SIGN-BUTTON

1e35f04

Isabella-Mitchell added 4 commits February 13, 2025 14:41

WSTEAM1-TRANSCRIPT: Resets E2E fixture data

c00e289

WSTEAM1-TRANSCRIPT: Reset fixture data

9763f99

WSTEAM1-TRANSCRIPT: Updates placeholder logic for e2e tests

52c8e03

WSTEAM1-TRANSCRIPT: Update story

0e6672a

github-advanced-security bot found potential problems Feb 13, 2025

View reviewed changes

src/app/pages/ArticlePage/index.stories.tsx Fixed Show fixed Hide fixed

Isabella-Mitchell added 2 commits February 14, 2025 08:58

WSTEAM1-Transcript: Updates story

d645b19

WSTEAM1-Transcript: Revert fixture data

4b3121b

github-advanced-security bot found potential problems Feb 14, 2025

View reviewed changes

src/app/pages/ArticlePage/index.stories.tsx Dismissed Show dismissed Hide dismissed

src/app/pages/ArticlePage/index.stories.tsx Dismissed Show dismissed Hide dismissed

WSTEAM1-TRANSCRIPT: Updates focus indicator

a72fa44

Merge branch 'latest' into WSTEAM1-TRANSCRIPT-SIGNPOST-CLONE

ea0b63c

Isabella-Mitchell and others added 4 commits February 28, 2025 12:08

Merge branch 'latest' into WSTEAM1-TRANSCRIPT-SIGNPOST-CLONE

80afbcd

WSTEAM1-TRANSCRIPT: Add A11y metadata

5e24754

WSTEAM1-TRANSCRIPT: Adds fixture data, story and support for DarkUI

22dfba8

WSTEAM1-TRANSCRIPT: Increase bundle size

edd0539

WSTEAM1-TRANSCRIPT: Update snapshots

0760c81

Isabella-Mitchell changed the title ~~WSTEAM1-TRANSCRIPT-MASTER-BRANCH: Add signpost and transcript components.~~ WSTEAM1-TRANSCRIPT-MASTER-BRANCH: Front End Changes for Transcript First Video Feb 28, 2025

Isabella-Mitchell changed the title ~~WSTEAM1-TRANSCRIPT-MASTER-BRANCH: Front End Changes for Transcript First Video~~ WSTEAM1-TRANSCRIPT: Front End Changes for Transcript First Video Feb 28, 2025

Merge branch 'latest' into WSTEAM1-TRANSCRIPT-SIGNPOST-CLONE

e52994a

Isabella-Mitchell marked this pull request as ready for review February 28, 2025 16:17

karinathomasbbc reviewed Mar 3, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

WSTEAM1-TRANSCRIPT: Front End Changes for Transcript First Video #12201

WSTEAM1-TRANSCRIPT: Front End Changes for Transcript First Video #12201

shayneahchoon commented Nov 22, 2024 •

edited by Isabella-Mitchell

Loading

Isabella-Mitchell commented Feb 14, 2025

greenc05 commented Feb 17, 2025 •

edited

Loading

greenc05 commented Feb 17, 2025

Isabella-Mitchell commented Feb 28, 2025

Isabella-Mitchell commented Feb 28, 2025

karinathomasbbc Mar 3, 2025

karinathomasbbc Mar 3, 2025

karinathomasbbc Mar 3, 2025

karinathomasbbc Mar 3, 2025

karinathomasbbc Mar 3, 2025

karinathomasbbc Mar 3, 2025

karinathomasbbc Mar 3, 2025

karinathomasbbc Mar 3, 2025

karinathomasbbc Mar 3, 2025

karinathomasbbc Mar 3, 2025

karinathomasbbc commented Mar 3, 2025

karinathomasbbc Mar 3, 2025

karinathomasbbc Mar 3, 2025

karinathomasbbc Mar 3, 2025

karinathomasbbc Mar 3, 2025

	export const ExperimentMediaLoader = ({ experimentStage }: Props) => (
	export const MediaLoaderWithTranscript = ({ experimentStage }: Props) => (

WSTEAM1-TRANSCRIPT: Front End Changes for Transcript First Video #12201

Are you sure you want to change the base?

WSTEAM1-TRANSCRIPT: Front End Changes for Transcript First Video #12201

Conversation

shayneahchoon commented Nov 22, 2024 • edited by Isabella-Mitchell Loading

Overall changes

Code changes

Testing

Helpful Links

Isabella-Mitchell commented Feb 14, 2025

greenc05 commented Feb 17, 2025 • edited Loading

greenc05 commented Feb 17, 2025

Isabella-Mitchell commented Feb 28, 2025

Isabella-Mitchell commented Feb 28, 2025

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

karinathomasbbc commented Mar 3, 2025

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

shayneahchoon commented Nov 22, 2024 •

edited by Isabella-Mitchell

Loading

greenc05 commented Feb 17, 2025 •

edited

Loading