Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Draft
wants to merge 88 commits into
base: latest
Choose a base branch
from
Draft
Changes from 1 commit
Commits
Show all changes
88 commits
Select commit Hold shift + click to select a range
f187449
Transcript Front End: Initial commit
Isabella-Mitchell Jun 7, 2024
2255797
Transcript - render on local article
Isabella-Mitchell Jun 21, 2024
3929222
Fix errors
Isabella-Mitchell Jul 3, 2024
acdcbe6
Use display: block
Isabella-Mitchell Jul 3, 2024
df49ad1
Transcript-front-end: A11y updates
Isabella-Mitchell Jul 19, 2024
9a11125
Merge branch 'latest' into Transcript-front-end
Isabella-Mitchell Jul 19, 2024
b4c3709
Merge branch 'latest' into Transcript-front-end
Isabella-Mitchell Aug 30, 2024
d68de51
Transcript front end: Adds SVG and makes disclaimer optional
Isabella-Mitchell Aug 30, 2024
af89963
Transcript front end: Updates stories
Isabella-Mitchell Aug 30, 2024
a1a75e1
Transcript front end: Fix unit tests
Isabella-Mitchell Aug 30, 2024
328a686
Transcript-front-end: Replaces svg with css triangle
Isabella-Mitchell Aug 30, 2024
0a7e90a
Transcript front end: tidy
Isabella-Mitchell Aug 30, 2024
0244a53
Transcript front end: Adds initial readme
Isabella-Mitchell Aug 30, 2024
5f0432a
Trancript-front-end: apply darkUi styles
Isabella-Mitchell Aug 30, 2024
4d13863
Replace custom css arrow with SVG
Isabella-Mitchell Sep 13, 2024
10d67a4
Merge branch 'latest' into Transcript-front-end
Isabella-Mitchell Sep 13, 2024
96bf199
Typeify
Isabella-Mitchell Sep 13, 2024
f1c2a21
WSTEAM1-POC: Add button and signpost
shayneahchoon Sep 13, 2024
5a87973
WSTEAM1-POC: Add button and signpost
shayneahchoon Sep 13, 2024
14f2bbb
WSTEAM1-POC: Add button and signpost
shayneahchoon Sep 13, 2024
0cdcf3d
WSTEAM1-POC: Add button and signpost
shayneahchoon Sep 13, 2024
e4163cc
WSTEAM1-POC: Add button and signpost
shayneahchoon Sep 13, 2024
18e4b64
WSTEAM1-POC: Add button and signpost
shayneahchoon Sep 13, 2024
98374f7
WSTEAM1-POC: Add button and signpost
shayneahchoon Sep 13, 2024
e51f4c6
WSTEAM1-POC: Add button and signpost
shayneahchoon Sep 13, 2024
801f9d5
Update mediaLoader to render Transcript if provided
Isabella-Mitchell Sep 13, 2024
7bd1587
Adds unit tests. Updates listItem rendering logic
Isabella-Mitchell Sep 13, 2024
134586a
Add basic transcript tests
Isabella-Mitchell Sep 13, 2024
c9e8ef8
Refines listitem logic and styles
Isabella-Mitchell Sep 13, 2024
1e35f04
Merge branch 'latest' into WSTEAM1-TRANSCRIPT-SIGN-BUTTON
shayneahchoon Sep 16, 2024
317f3a8
Merge branch 'latest' into Transcript-front-end
Isabella-Mitchell Sep 27, 2024
ec0f986
Transcript-front-end: lint post merge
Isabella-Mitchell Sep 27, 2024
f0017a7
Transcript: Update bundle size
Isabella-Mitchell Sep 27, 2024
d493e12
Transcript-front-end: Moves margin
Isabella-Mitchell Sep 27, 2024
dfe8d46
Transcript-front-end: add article with transcript story
Isabella-Mitchell Sep 27, 2024
0d0e6b2
Transcript-front-end: Try fix github alert
Isabella-Mitchell Sep 27, 2024
4167937
Transcript-front-end: SVG align adjust. Tries move visually hidden text
Isabella-Mitchell Sep 27, 2024
b344efc
Transcript-front-end: attempt improve summary text swiping
Isabella-Mitchell Sep 27, 2024
9ff1160
Update snapshot
Isabella-Mitchell Sep 27, 2024
d7b30bb
Transcript-front-end: Mock up Talkback bug fix - introduces bug to Vo…
Isabella-Mitchell Sep 29, 2024
4568711
Transcrip-front-end: Reverts changes. Removes A11y comments
Isabella-Mitchell Sep 29, 2024
defa588
WSTEAM1-POC: Add media indicator and SVG
shayneahchoon Oct 11, 2024
5c34e8a
Merge branch 'WSTEAM1-TRANSCRIPT-SIGN-BUTTON' of github.com:bbc/simor…
shayneahchoon Oct 11, 2024
126dc18
WSTEAM1-POC: Bits and pieces/
shayneahchoon Oct 11, 2024
e6f934f
WSTEAM1-POC: Update
shayneahchoon Oct 11, 2024
e565213
Merge branch 'latest' into WSTEAM1-TRANSCRIPT-SIGN-BUTTON
shayneahchoon Oct 14, 2024
edcf5a1
Merge branch 'latest' into WSTEAM1-TRANSCRIPT-SIGN-BUTTON
shayneahchoon Oct 16, 2024
5946c14
WSTEAM1-POC: Update snapshots
shayneahchoon Oct 16, 2024
ffa0550
WSTEAM1-POC: Update snapshots
shayneahchoon Oct 16, 2024
001c84d
WSTEAM1-POC: Update:
shayneahchoon Oct 18, 2024
157c817
Merge Latest
Isabella-Mitchell Nov 8, 2024
3ac2fcb
WSTEAM1-Transcript: Updates button title and timestamp
Isabella-Mitchell Nov 8, 2024
38c886a
WSTEAM1-Transcript: Updates tests and bundle size
Isabella-Mitchell Nov 8, 2024
4602361
Merge remote-tracking branch 'origin' into WSTEAM1-TRANSCRIPT-SIGN-BU…
shayneahchoon Nov 8, 2024
14439af
WSTEAM1-Transcript: Renders Transcript on .lite site
Isabella-Mitchell Nov 8, 2024
f2d20bf
WSTEAM1-POC: Update noJS
shayneahchoon Nov 8, 2024
f41d4a5
WSTEAM1-Transcript: Bundle size
Isabella-Mitchell Nov 22, 2024
e66a052
merge in latest
Isabella-Mitchell Nov 22, 2024
2d8abbd
Merge branch 'latest' into WSTEAM1-TRANSCRIPT-SIGN-BUTTON
shayneahchoon Nov 22, 2024
9a3e76b
WSTEAM1-POC: Update
shayneahchoon Nov 22, 2024
44c5eb7
WSTEAM1-POC: Update
shayneahchoon Nov 22, 2024
c2fa1e2
Merge branch 'WSTEAM1-TRANSCRIPT-SIGN-BUTTON' into Transcript-front-end
Isabella-Mitchell Nov 22, 2024
327042a
WSTEAM1-POC: Update snapshots
shayneahchoon Nov 22, 2024
b69d473
WSTEAM1-POC: Update snapshots
shayneahchoon Nov 22, 2024
0847c22
Merge branch 'WSTEAM1-TRANSCRIPT-SIGN-BUTTON' into Transcript-front-end
Isabella-Mitchell Nov 22, 2024
51297b9
WSTEAM1-POC: Update storybook
shayneahchoon Nov 22, 2024
b7d8460
Merge branch 'WSTEAM1-TRANSCRIPT-SIGN-BUTTON' into Transcript-front-end
Isabella-Mitchell Nov 22, 2024
1e36a6a
Transcript: Resolve merge conflict
Isabella-Mitchell Nov 22, 2024
89eb549
Merge pull request #12202 from bbc/clone-transcript-front-end
Isabella-Mitchell Nov 22, 2024
5dbc8f3
WSTEAM1-Transcript: Adds experiment_stages control to Article Page story
Isabella-Mitchell Nov 22, 2024
bd182b1
WSTEAM1: Fix unit tests
Isabella-Mitchell Nov 22, 2024
6efe03c
WSTEAM1-POC: Add hook
shayneahchoon Nov 22, 2024
9345436
Merge branch 'WSTEAM1-TRANSCRIPT-SIGNPOST-CLONE' of github.com:bbc/si…
shayneahchoon Nov 22, 2024
418a046
WSTEAM1-POC: Add hook
shayneahchoon Nov 22, 2024
725b8c1
WSTEAM1-POC: Add noJS lock
shayneahchoon Nov 22, 2024
6258918
WSTEAM1-POC: Update styling
shayneahchoon Dec 12, 2024
f9b83ac
WSTEAM1-POC: Update
shayneahchoon Dec 13, 2024
f7c9150
WSTEAM1-POC: Add styling
shayneahchoon Dec 20, 2024
6f5e38e
WSTEAM1-POC: Add styling
shayneahchoon Dec 20, 2024
9ca4af1
WSTEAM1-POC: Add styling
shayneahchoon Dec 20, 2024
9e05727
WSTEAM1-POC: Add styling
shayneahchoon Dec 20, 2024
8ab3978
WSTEAM1-POC: Update
shayneahchoon Dec 20, 2024
456228e
Merge branch 'latest' into WSTEAM1-TRANSCRIPT-SIGNPOST-CLONE
shayneahchoon Jan 10, 2025
2e3e4e4
Merge branch 'latest' into WSTEAM1-TRANSCRIPT-SIGNPOST-CLONE
shayneahchoon Jan 13, 2025
dde84fd
WSTEAM1-POC: Update
shayneahchoon Jan 15, 2025
546f5ef
Merge branch 'latest' into WSTEAM1-TRANSCRIPT-SIGNPOST-CLONE
Isabella-Mitchell Jan 17, 2025
8bca0a1
WSTEAM1-TRANSCRIPT: Lint and tests
Isabella-Mitchell Jan 17, 2025
d11b1d0
WSTEAM1-Transcript: Update Integration snapshots
Isabella-Mitchell Jan 17, 2025
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
WSTEAM1-POC: Add styling
  • Loading branch information
shayneahchoon committed Dec 20, 2024
commit f7c9150918669ecbd7dde5cad97a706430801de6
160 changes: 75 additions & 85 deletions src/app/components/MediaLoader/index.tsx
Original file line number Diff line number Diff line change
@@ -16,7 +16,7 @@ import {
import filterForBlockType from '#lib/utilities/blockHandlers';
import { PageTypes } from '#app/models/types/global';
import { EventTrackingContext } from '#app/contexts/EventTrackingContext';
import { Stages } from '#app/hooks/useExperimentHook';
import useExperimentHook, { Stages } from '#app/hooks/useExperimentHook';
import { BumpType, MediaBlock, PlayerConfig } from './types';
import Caption from '../Caption';
import nodeLogger from '../../lib/logger.node';
@@ -27,9 +27,9 @@ import getCaptionBlock from './utils/getCaptionBlock';
import styles from './index.styles';
import { getBootstrapSrc } from '../Ad/Canonical';
import Metadata from './Metadata';
import AmpMediaLoader from './Amp';
import getTranscriptBlock from './utils/getTranscriptBlock';
import Transcript from '../Transcript';
import AmpMediaLoader from './Amp';

const PAGETYPES_IGNORE_PLACEHOLDER: PageTypes[] = [
MEDIA_ARTICLE_PAGE,
@@ -165,18 +165,16 @@ type Props = {
blocks: MediaBlock[];
className?: string;
embedded?: boolean;
experimentStage?: Stages;
forceStage?: Stages;
};

const MediaLoader = ({
blocks,
className,
embedded,
experimentStage,
}: Props) => {
const MediaLoader = ({ blocks, className, embedded, forceStage }: Props) => {
const { lang, translations } = useContext(ServiceContext);
const { pageIdentifier } = useContext(EventTrackingContext);
const { enabled: adsEnabled } = useToggle('ads');
const stage = useExperimentHook();

const experimentStage = forceStage ?? stage;

const {
id,
@@ -244,87 +242,79 @@ const MediaLoader = ({

const experimentEnabled = experimentStage === Stages.STAGE_2;

return (
return isLite && hasTranscript ? (
<Transcript
transcript={transcriptBlock}
title={placeholderConfig?.mediaInfo?.title}
/>
) : (
<>
{isLite && hasTranscript ? (
<Transcript
transcript={transcriptBlock}
title={placeholderConfig?.mediaInfo?.title}
/>
) : (
<>
{
// Prevents the av-embeds route itself rendering the Metadata component
!embedded && (
<Metadata
blocks={blocks}
embedURL={playerConfig?.externalEmbedUrl}
/>
)
}
{showPortraitTitle && (
<strong css={styles.titlePortrait}>Watch Moments</strong>
)}
<figure
data-e2e="media-loader__container"
className={className}
css={[
styles.figure(embedded),
experimentEnabled && styles.experimentVideo,
playerConfig?.ui?.skin === 'classic' && [
orientation === 'portrait' && styles.portraitFigure(embedded),
orientation === 'landscape' && styles.landscapeFigure,
],
]}
>
{isAmp ? (
<AmpMediaLoader
src={ampIframeUrl}
title={mediaInfo?.title}
placeholderSrc={placeholderSrc}
placeholderSrcset={placeholderSrcset}
{
// Prevents the av-embeds route itself rendering the Metadata component
!embedded && (
<Metadata blocks={blocks} embedURL={playerConfig?.externalEmbedUrl} />
)
}
{showPortraitTitle && (
<strong css={styles.titlePortrait}>
{translations.media.watchMoments || 'Watch Moments'}
</strong>
)}
<figure
data-e2e="media-loader__container"
className={className}
css={[
styles.figure(embedded),
transcriptBlock && experimentEnabled && styles.experimentVideo,
playerConfig?.ui?.skin === 'classic' && [
orientation === 'portrait' && styles.portraitFigure(embedded),
orientation === 'landscape' && styles.landscapeFigure,
],
]}
>
{isAmp ? (
<AmpMediaLoader
src={ampIframeUrl}
title={mediaInfo?.title}
placeholderSrc={placeholderSrc}
placeholderSrcset={placeholderSrcset}
noJsMessage={translatedNoJSMessage}
/>
) : (
<>
{showAds && <AdvertTagLoader />}
<BumpLoader />
{hasPlaceholder ? (
<Placeholder
src={placeholderSrc}
srcSet={placeholderSrcset}
noJsMessage={translatedNoJSMessage}
mediaInfo={mediaInfo}
onClick={() => setShowPlaceholder(false)}
experimentStage={experimentStage}
/>
) : (
<>
{showAds && <AdvertTagLoader />}
<BumpLoader />
{hasPlaceholder ? (
<Placeholder
src={placeholderSrc}
srcSet={placeholderSrcset}
noJsMessage={translatedNoJSMessage}
mediaInfo={mediaInfo}
onClick={() => setShowPlaceholder(false)}
experimentStage={experimentStage}
/>
) : (
<MediaContainer
playerConfig={playerConfig}
showAds={showAds}
/>
)}
</>
<MediaContainer playerConfig={playerConfig} showAds={showAds} />
)}
{captionBlock && (
<Caption
block={captionBlock}
type={mediaType}
css={
(orientation === 'portrait' && styles.captionPortrait,
experimentEnabled && styles.experimentCaption)
}
/>
)}
{transcriptBlock && (
<Transcript
transcript={transcriptBlock}
title={placeholderConfig?.mediaInfo?.title}
/>
)}
</figure>
</>
)}
</>
)}
{captionBlock && (
<Caption
block={captionBlock}
type={mediaType}
css={[
orientation === 'portrait' && styles.captionPortrait,
experimentEnabled && styles.experimentCaption,
]}
/>
)}
{transcriptBlock && (
<Transcript
transcript={transcriptBlock}
title={placeholderConfig?.mediaInfo?.title}
/>
)}
</figure>
</>
);
};
47 changes: 36 additions & 11 deletions src/app/components/Transcript/__snapshots__/index.test.tsx.snap
Original file line number Diff line number Diff line change
@@ -4,7 +4,6 @@ exports[`Transcript Component should match snapshot (temp) 1`] = `
.emotion-0 {
background-color: #FFFFFF;
display: block;
margin-top: 1.5rem;
border: solid 0.1875rem transparent;
}

@@ -25,7 +24,7 @@ exports[`Transcript Component should match snapshot (temp) 1`] = `

.emotion-1 {
list-style: none;
padding: 1rem;
padding: 1rem 0.25rem;
}

.emotion-1::-webkit-details-marker {
@@ -86,17 +85,11 @@ exports[`Transcript Component should match snapshot (temp) 1`] = `
}

.emotion-4 {
padding: 0 1rem;
padding: 0 0.5rem;
list-style: none;
margin: 0;
}

@media (min-width: 15rem) {
.emotion-4 {
padding: 0 1.5rem;
}
}

.emotion-5 {
padding-bottom: 1rem;
}
@@ -120,14 +113,14 @@ exports[`Transcript Component should match snapshot (temp) 1`] = `
@media (min-width: 20rem) and (max-width: 37.4375rem) {
.emotion-6 {
font-size: 1rem;
line-height: 1.25rem;
line-height: 1.375rem;
}
}

@media (min-width: 37.5rem) {
.emotion-6 {
font-size: 1rem;
line-height: 1.25rem;
line-height: 1.375rem;
}
}

@@ -169,6 +162,33 @@ exports[`Transcript Component should match snapshot (temp) 1`] = `
}
}

.emotion-175 {
color: #141414;
font-size: 0.875rem;
line-height: 1.125rem;
font-family: ReithSans,Helvetica,Arial,sans-serif;
font-style: normal;
font-weight: 400;
color: #545658;
display: block;
padding-bottom: 1rem;
padding-inline: 0.5rem;
}

@media (min-width: 20rem) and (max-width: 37.4375rem) {
.emotion-175 {
font-size: 0.875rem;
line-height: 1.125rem;
}
}

@media (min-width: 37.5rem) {
.emotion-175 {
font-size: 0.8125rem;
line-height: 1rem;
}
}

<div>
<details
class="emotion-0"
@@ -1025,6 +1045,11 @@ exports[`Transcript Component should match snapshot (temp) 1`] = `
</span>
</li>
</ul>
<small
class="emotion-175"
>
This transcript was reviewed by a journalist after AI generation.
</small>
</details>
</div>
`;
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
/* eslint-disable prettier/prettier */
import React from 'react';
import { render } from '../../react-testing-library-with-providers';
import * as ScreenGroupHook from '../hooks/useScreenGroup';

import MediaIcon from '.';
import { ScreenGroup } from '../hooks/useScreenGroup';

describe('MediaIcon', () => {
afterEach(() => {
@@ -30,28 +30,4 @@ describe('MediaIcon', () => {
);
expect(time).toEqual('2:30');
});

it(`should NOT render a mini play button for small screensizes`, () => {
jest
.spyOn(ScreenGroupHook, 'default')
.mockImplementation(() => ScreenGroup.GROUP_0);

const { container } = render(
<MediaIcon
title="My Video"
duration="2:30"
durationSpoken="2 minutes 30 seconds"
datetime="PT2M30S"
guidanceMessage="Guidance: May contain strong language that may offend."
/>,
{
service: 'news',
},
);
const guidanceMessage = container?.querySelector('span');
const time = container?.querySelector('time');

expect(guidanceMessage).toBe(null);
expect(time).toBe(null);
});
});
Loading