Skip to content

Audio atom as an island #3970

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.

Sign up for GitHub

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

Merged
OllysCoding merged 9 commits into from
Mar 14, 2022
Merged

Audio atom as an island #3970

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
3f30033
WIP - use islands for audio atom
OllysCoding Feb 11, 2022
48d9072
WIP - update render element props
OllysCoding Feb 11, 2022
a6b2581
propegate ALL THE PROPS
OllysCoding Feb 11, 2022
f6c5fa0
Wrap audio atom in island
OllysCoding Feb 11, 2022
f20b8d8
merge
OllysCoding Feb 11, 2022
468eb21
Merge branch 'main' of github.com:guardian/dotcom-rendering into olly…
OllysCoding Mar 14, 2022
25940eb
Update LiveBlock.stories.tsx
OllysCoding Mar 14, 2022
91aad09
Remove now redundant checks/comments about CMP not being server safe
OllysCoding Mar 14, 2022
2ef7fc0
Fix inverse props
OllysCoding Mar 14, 2022
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
1 change: 1 addition & 0 deletions dotcom-rendering/index.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -579,6 +579,7 @@ interface BlocksRequest {
sharedAdTargeting: Record<string, unknown>;
adUnit: string;
videoDuration?: number;
switches: { [key: string]: boolean };

@OllysCoding OllysCoding Mar 14, 2022

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

See guardian/frontend#24754

}

/**
Expand Down
35 changes: 0 additions & 35 deletions dotcom-rendering/src/web/components/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,7 @@ import { SlotBodyEnd } from './SlotBodyEnd/SlotBodyEnd';
import { StickyBottomBanner } from './StickyBottomBanner/StickyBottomBanner';
import { SignInGateSelector } from './SignInGate/SignInGateSelector';

import { AudioAtomWrapper } from './AudioAtomWrapper';

import { Portal } from './Portal';
import { HydrateOnce } from './HydrateOnce';
import { decideTheme } from '../lib/decideTheme';
import { decideFormat } from '../lib/decideFormat';
import { useOnce } from '../lib/useOnce';

Expand Down Expand Up @@ -80,24 +76,8 @@ export const App = ({ CAPI }: Props) => {
setBrazeMessages(buildBrazeMessages(CAPI.config.idApiUrl));
}, [CAPI.config.idApiUrl]);

const pillar: ArticleTheme = decideTheme(CAPI.format);

const format: ArticleFormat = decideFormat(CAPI.format);

// We use this function to filter the elementsToHydrate array by a particular
// type so that we can hydrate them. We use T to force the type and keep TS
// content because *we* know that if _type equals a thing then the type is
// guaranteed but TS isn't so sure and needs assurance
const elementsByType = <T extends CAPIElement>(
elements: CAPIElement[],
type: T['_type'],
): T[] => elements.filter((element) => element._type === type) as T[];

const audioAtoms = elementsByType<AudioAtomBlockElement>(
CAPI.elementsToHydrate,
'model.dotcomrendering.pageElements.AudioAtomBlockElement',
);

return (
// Do you need to HydrateOnce or do you want a Portal?
//
Expand All @@ -122,21 +102,6 @@ export const App = ({ CAPI }: Props) => {
ophanRecord={ophanRecord}
/>
</Portal>
{audioAtoms.map((audioAtom) => (
<HydrateOnce rootId={audioAtom.elementId}>
<AudioAtomWrapper
id={audioAtom.id}
trackUrl={audioAtom.trackUrl}
kicker={audioAtom.kicker}
title={audioAtom.title}
duration={audioAtom.duration}
pillar={pillar}
contentIsNotSensitive={!CAPI.config.isSensitive}
aCastisEnabled={CAPI.config.switches.acast}
readerCanBeShownAds={!CAPI.isAdFreeUser}
/>
</HydrateOnce>
))}
<Portal rootId="slot-body-end">
<SlotBodyEnd
contentType={CAPI.contentType}
Expand Down
12 changes: 12 additions & 0 deletions dotcom-rendering/src/web/components/ArticleBody.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,9 @@ type Props = {
pageId: string;
webTitle: string;
ajaxUrl: string;
isAdFreeUser: boolean;
isSensitive: boolean;
switches: { [key: string]: boolean };
section: string;
shouldHideReaderRevenue: boolean;
tags: TagType[];
Expand Down Expand Up @@ -100,6 +103,9 @@ export const ArticleBody = ({
pageId,
webTitle,
ajaxUrl,
switches,
isAdFreeUser,
isSensitive,
section,
shouldHideReaderRevenue,
tags,
Expand Down Expand Up @@ -138,6 +144,9 @@ export const ArticleBody = ({
pageId={pageId}
webTitle={webTitle}
ajaxUrl={ajaxUrl}
switches={switches}
isAdFreeUser={isAdFreeUser}
isSensitive={isSensitive}
isLiveUpdate={false}
section={section}
shouldHideReaderRevenue={shouldHideReaderRevenue}
Expand Down Expand Up @@ -171,6 +180,9 @@ export const ArticleBody = ({
pageId={pageId}
webTitle={webTitle}
ajaxUrl={ajaxUrl}
switches={switches}
isAdFreeUser={isAdFreeUser}
isSensitive={isSensitive}
/>
</div>
);
Expand Down
15 changes: 15 additions & 0 deletions dotcom-rendering/src/web/components/ArticleHeadline.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -105,6 +105,9 @@ export const ShowcaseInterview = () => {
pageId="testID"
webTitle="story article"
ajaxUrl=""
isAdFreeUser={false}
isSensitive={false}
switches={{}}
/>
</ArticleContainer>
</Flex>
Expand Down Expand Up @@ -145,6 +148,9 @@ export const ShowcaseInterviewNobyline = () => {
pageId="testID"
webTitle="story article"
ajaxUrl=""
isAdFreeUser={false}
isSensitive={false}
switches={{}}
/>
</ArticleContainer>
</Flex>
Expand Down Expand Up @@ -185,6 +191,9 @@ export const Interview = () => {
pageId="testID"
webTitle="story article"
ajaxUrl=""
isAdFreeUser={false}
isSensitive={false}
switches={{}}
/>
</ArticleContainer>
</Flex>
Expand Down Expand Up @@ -223,6 +232,9 @@ export const InterviewSpecialReport = () => {
pageId="testID"
webTitle="story article"
ajaxUrl=""
isAdFreeUser={false}
isSensitive={false}
switches={{}}
/>
</ArticleContainer>
</Flex>
Expand Down Expand Up @@ -263,6 +275,9 @@ export const InterviewNoByline = () => {
pageId="testID"
webTitle="story article"
ajaxUrl=""
isAdFreeUser={false}
isSensitive={false}
switches={{}}
/>
</ArticleContainer>
</Flex>
Expand Down
0 ...g/src/web/components/AudioAtomWrapper.tsx → ...omponents/AudioAtomWrapper.importable.tsx
View file
Open in desktop
File renamed without changes.
36 changes: 36 additions & 0 deletions dotcom-rendering/src/web/components/LiveBlock.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -103,6 +103,9 @@ export const VideoAsSecond = () => {
pageId=""
webTitle=""
ajaxUrl=""
isAdFreeUser={false}
isSensitive={false}
switches={{}}
/>
</Wrapper>
);
Expand Down Expand Up @@ -148,6 +151,9 @@ export const Title = () => {
pageId=""
webTitle=""
ajaxUrl=""
isAdFreeUser={false}
isSensitive={false}
switches={{}}
/>
</Wrapper>
);
Expand Down Expand Up @@ -214,6 +220,9 @@ export const Video = () => {
pageId=""
webTitle=""
ajaxUrl=""
isAdFreeUser={false}
isSensitive={false}
switches={{}}
/>
</Wrapper>
);
Expand Down Expand Up @@ -255,6 +264,9 @@ export const RichLink = () => {
pageId=""
webTitle=""
ajaxUrl=""
isAdFreeUser={false}
isSensitive={false}
switches={{}}
/>
</Wrapper>
);
Expand Down Expand Up @@ -287,6 +299,9 @@ export const FirstImage = () => {
pageId=""
webTitle=""
ajaxUrl=""
isAdFreeUser={false}
isSensitive={false}
switches={{}}
/>
</Wrapper>
);
Expand Down Expand Up @@ -345,6 +360,9 @@ export const ImageRoles = () => {
pageId=""
webTitle=""
ajaxUrl=""
switches={{}}
isAdFreeUser={false}
isSensitive={false}
/>
</Wrapper>
);
Expand Down Expand Up @@ -392,6 +410,9 @@ export const Thumbnail = () => {
pageId=""
webTitle=""
ajaxUrl=""
switches={{}}
isAdFreeUser={false}
isSensitive={false}
/>
</Wrapper>
);
Expand Down Expand Up @@ -425,6 +446,9 @@ export const ImageAndTitle = () => {
pageId=""
webTitle=""
ajaxUrl=""
isAdFreeUser={false}
isSensitive={false}
switches={{}}
/>
</Wrapper>
);
Expand Down Expand Up @@ -454,6 +478,9 @@ export const Updated = () => {
pageId=""
webTitle=""
ajaxUrl=""
isAdFreeUser={false}
isSensitive={false}
switches={{}}
/>
</Wrapper>
);
Expand Down Expand Up @@ -489,6 +516,9 @@ export const Contributor = () => {
pageId=""
webTitle=""
ajaxUrl=""
switches={{}}
isAdFreeUser={false}
isSensitive={false}
/>
</Wrapper>
);
Expand Down Expand Up @@ -520,6 +550,9 @@ export const NoAvatar = () => {
pageId=""
webTitle=""
ajaxUrl=""
switches={{}}
isAdFreeUser={false}
isSensitive={false}
/>
</Wrapper>
);
Expand Down Expand Up @@ -554,6 +587,9 @@ export const TitleAndContributor = () => {
pageId=""
webTitle=""
ajaxUrl=""
switches={{}}
isAdFreeUser={false}
isSensitive={false}
/>
</Wrapper>
);
Expand Down
9 changes: 9 additions & 0 deletions dotcom-rendering/src/web/components/LiveBlock.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,9 @@ type Props = {
adTargeting: AdTargeting;
host?: string;
ajaxUrl: string;
isAdFreeUser: boolean;
isSensitive: boolean;
switches: { [key: string]: boolean };
isLiveUpdate?: boolean;
};

Expand All @@ -27,6 +30,9 @@ export const LiveBlock = ({
adTargeting,
host = 'https://www.theguardian.com',
ajaxUrl,
isAdFreeUser,
isSensitive,
switches,
isLiveUpdate,
}: Props) => {
if (block.elements.length === 0) return null;
Expand Down Expand Up @@ -62,6 +68,9 @@ export const LiveBlock = ({
index,
pageId,
webTitle,
isAdFreeUser,
isSensitive,
switches,
}),
)}
<footer
Expand Down
9 changes: 9 additions & 0 deletions dotcom-rendering/src/web/components/MainMedia.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,6 +78,9 @@ export const MainMedia: React.FC<{
pageId: string;
webTitle: string;
ajaxUrl: string;
isAdFreeUser: boolean;
isSensitive: boolean;
switches: { [key: string]: boolean };
}> = ({
elements,
format,
Expand All @@ -88,6 +91,9 @@ export const MainMedia: React.FC<{
pageId,
webTitle,
ajaxUrl,
isAdFreeUser,
isSensitive,
switches,
}) => {
return (
<div css={[mainMedia, chooseWrapper(format)]}>
Expand All @@ -104,6 +110,9 @@ export const MainMedia: React.FC<{
hideCaption,
pageId,
webTitle,
isAdFreeUser,
isSensitive,
switches,
}),
)}
</div>
Expand Down
6 changes: 6 additions & 0 deletions dotcom-rendering/src/web/layouts/CommentLayout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -510,6 +510,9 @@ export const CommentLayout = ({
pageId={CAPI.pageId}
webTitle={CAPI.webTitle}
ajaxUrl={CAPI.config.ajaxUrl}
switches={CAPI.config.switches}
isAdFreeUser={CAPI.isAdFreeUser}
isSensitive={CAPI.config.isSensitive}
/>
</div>
</GridItem>
Expand Down Expand Up @@ -552,6 +555,9 @@ export const CommentLayout = ({
pageId={CAPI.pageId}
webTitle={CAPI.webTitle}
ajaxUrl={CAPI.config.ajaxUrl}
switches={CAPI.config.switches}
isSensitive={CAPI.config.isSensitive}
isAdFreeUser={CAPI.isAdFreeUser}
section={CAPI.config.section}
shouldHideReaderRevenue={
CAPI.shouldHideReaderRevenue
Expand Down
21 changes: 20 additions & 1 deletion dotcom-rendering/src/web/layouts/FullPageInteractiveLayout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,20 @@ const Renderer: React.FC<{
pageId: string;
webTitle: string;
ajaxUrl: string;
}> = ({ format, elements, host, pageId, webTitle, ajaxUrl }) => {
isAdFreeUser: boolean;
isSensitive: boolean;
switches: { [key: string]: boolean };
}> = ({
format,
elements,
host,
pageId,
webTitle,
ajaxUrl,
isAdFreeUser,
isSensitive,
switches,
}) => {
// const cleanedElements = elements.map(element =>
// 'html' in element ? { ...element, html: clean(element.html) } : element,
// );
Expand All @@ -66,6 +79,9 @@ const Renderer: React.FC<{
pageId,
webTitle,
ajaxUrl,
isAdFreeUser,
isSensitive,
switches,
});

if (ok) {
Expand Down Expand Up @@ -299,6 +315,9 @@ export const FullPageInteractiveLayout = ({
pageId={CAPI.pageId}
webTitle={CAPI.webTitle}
ajaxUrl={CAPI.config.ajaxUrl}
switches={CAPI.config.switches}
isAdFreeUser={CAPI.isAdFreeUser}
isSensitive={CAPI.config.isSensitive}
/>
</article>
</ElementContainer>
Expand Down
Loading