Skip to content

Commit b86d4e3

Browse files
frederickobrienfrederickobrien
committed
Review edits
1 parent 546b54a commit b86d4e3

3 files changed

Lines changed: 50 additions & 46 deletions

File tree

dotcom-rendering/src/components/AudioPlayer.tsx renamed to dotcom-rendering/src/components/DecideAudioPlayer.tsx

Lines changed: 20 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,10 @@ import { StraightLines } from '@guardian/source-development-kitchen/react-compon
44
import { palette } from '../palette';
55
import { AppsAudioPlayer } from './AppsAudioPlayer.island';
66
import { AudioPlayerWrapper } from './AudioPlayerWrapper.island';
7+
import { Island } from './Island';
78
import { formatAudioDuration } from './ListenToArticle.island';
89

9-
export const AudioPlayer = ({
10+
export const DecideAudioPlayer = ({
1011
audioData,
1112
isSensitive,
1213
isAcastEnabled,
@@ -23,22 +24,24 @@ export const AudioPlayer = ({
2324
}) => {
2425
return (
2526
<>
26-
{isApps ? (
27-
<AppsAudioPlayer
28-
audioDuration={
29-
typeof audioData.durationSeconds === 'number'
30-
? formatAudioDuration(audioData.durationSeconds)
31-
: undefined
32-
}
33-
/>
34-
) : (
35-
<AudioPlayerWrapper
36-
contentIsNotSensitive={!isSensitive}
37-
isAcastEnabled={isAcastEnabled}
38-
src={audioData.audioDownloadUrl}
39-
mediaId={audioData.mediaId}
40-
/>
41-
)}
27+
<Island priority="critical" defer={{ until: 'visible' }}>
28+
{isApps ? (
29+
<AppsAudioPlayer
30+
audioDuration={
31+
typeof audioData.durationSeconds === 'number'
32+
? formatAudioDuration(audioData.durationSeconds)
33+
: undefined
34+
}
35+
/>
36+
) : (
37+
<AudioPlayerWrapper
38+
contentIsNotSensitive={!isSensitive}
39+
isAcastEnabled={isAcastEnabled}
40+
src={audioData.audioDownloadUrl}
41+
mediaId={audioData.mediaId}
42+
/>
43+
)}
44+
</Island>
4245
<StraightLines
4346
cssOverrides={css`
4447
display: block;

dotcom-rendering/src/layouts/AudioLayout.stories.tsx renamed to dotcom-rendering/src/layouts/StandardLayout.stories.tsx

Lines changed: 25 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -8,38 +8,38 @@ import { enhanceArticleType } from '../types/article';
88
import { StandardLayout } from './StandardLayout';
99

1010
const meta = {
11-
title: 'Layouts/Audio',
11+
title: 'Layouts/Standard',
1212
component: StandardLayout,
1313
} satisfies Meta<typeof StandardLayout>;
1414

1515
export default meta;
1616

1717
type Story = StoryObj<typeof meta>;
1818

19-
const appsArticle = enhanceArticleType(AudioFixture, 'Apps');
19+
const appsAudioArticle = enhanceArticleType(AudioFixture, 'Apps');
2020

21-
if (appsArticle.design !== ArticleDesign.Audio) {
21+
if (appsAudioArticle.design !== ArticleDesign.Audio) {
2222
throw new Error(
23-
`Expected ArticleDesign.Audio, got: ${String(appsArticle.design)}`,
23+
`Expected ArticleDesign.Audio, got: ${String(appsAudioArticle.design)}`,
2424
);
2525
}
2626

27-
export const Apps: Story = {
27+
export const AppsAudio: Story = {
2828
args: {
2929
renderingTarget: 'Apps',
30-
article: appsArticle.frontendData,
30+
article: appsAudioArticle.frontendData,
3131
format: {
32-
design: appsArticle.design,
33-
display: appsArticle.display,
34-
theme: appsArticle.theme,
32+
design: appsAudioArticle.design,
33+
display: appsAudioArticle.display,
34+
theme: appsAudioArticle.theme,
3535
},
3636
},
3737
parameters: {
3838
formats: [
3939
{
40-
design: appsArticle.design,
41-
display: appsArticle.display,
42-
theme: appsArticle.theme,
40+
design: appsAudioArticle.design,
41+
display: appsAudioArticle.display,
42+
theme: appsAudioArticle.theme,
4343
},
4444
],
4545
config: {
@@ -54,34 +54,34 @@ export const Apps: Story = {
5454
},
5555
};
5656

57-
const webArticle = enhanceArticleType(AudioFixture, 'Web');
57+
const webAudioArticle = enhanceArticleType(AudioFixture, 'Web');
5858

59-
if (webArticle.design !== ArticleDesign.Audio) {
59+
if (webAudioArticle.design !== ArticleDesign.Audio) {
6060
throw new Error(
61-
`Expected ArticleDesign.Audio, got: ${String(webArticle.design)}`,
61+
`Expected ArticleDesign.Audio, got: ${String(webAudioArticle.design)}`,
6262
);
6363
}
6464

65-
export const Web: Story = {
65+
export const WebAudio: Story = {
6666
args: {
6767
renderingTarget: 'Web',
6868
NAV: {
69-
...extractNAV(webArticle.frontendData.nav),
70-
selectedPillar: getCurrentPillar(webArticle.frontendData),
69+
...extractNAV(webAudioArticle.frontendData.nav),
70+
selectedPillar: getCurrentPillar(webAudioArticle.frontendData),
7171
},
72-
article: webArticle.frontendData,
72+
article: webAudioArticle.frontendData,
7373
format: {
74-
design: webArticle.design,
75-
display: webArticle.display,
76-
theme: webArticle.theme,
74+
design: webAudioArticle.design,
75+
display: webAudioArticle.display,
76+
theme: webAudioArticle.theme,
7777
},
7878
},
7979
parameters: {
8080
formats: [
8181
{
82-
design: webArticle.design,
83-
display: webArticle.display,
84-
theme: webArticle.theme,
82+
design: webAudioArticle.design,
83+
display: webAudioArticle.display,
84+
theme: webAudioArticle.theme,
8585
},
8686
],
8787
chromatic: {

‎dotcom-rendering/src/layouts/StandardLayout.tsx‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -19,9 +19,9 @@ import { ArticleHeadline } from '../components/ArticleHeadline';
1919
import { ArticleMetaApps } from '../components/ArticleMeta.apps';
2020
import { ArticleMeta } from '../components/ArticleMeta.web';
2121
import { ArticleTitle } from '../components/ArticleTitle';
22-
import { AudioPlayer } from '../components/AudioPlayer';
2322
import { Carousel } from '../components/Carousel.island';
2423
import { CricketMatchHeaderWrapper } from '../components/CricketMatchHeaderWrapper.island';
24+
import { DecideAudioPlayer } from '../components/DecideAudioPlayer';
2525
import { DecideLines } from '../components/DecideLines';
2626
import { DirectoryPageNavIsland } from '../components/DirectoryPageNavIsland';
2727
import { DiscussionLayout } from '../components/DiscussionLayout';
@@ -285,8 +285,9 @@ export const StandardLayout = (props: WebProps | AppProps) => {
285285
]}
286286
>
287287
<GridItem area="media" layoutType={layoutType}>
288-
{audioData ? (
289-
<AudioPlayer
288+
{format.design === ArticleDesign.Audio &&
289+
audioData ? (
290+
<DecideAudioPlayer
290291
audioData={audioData}
291292
isSensitive={article.config.isSensitive}
292293
isAcastEnabled={
@@ -353,7 +354,7 @@ export const StandardLayout = (props: WebProps | AppProps) => {
353354
layoutType={layoutType}
354355
element="aside"
355356
>
356-
{!audioData && (
357+
{format.design !== ArticleDesign.Audio && (
357358
<div css={stretchLines}>
358359
{isWeb &&
359360
format.theme === ArticleSpecial.Labs &&

0 commit comments

Comments
 (0)