From 3f30033687b84aa19f16ddcc5ae485b6393f5d29 Mon Sep 17 00:00:00 2001 From: Olly <9575458+OllysCoding@users.noreply.github.com> Date: Fri, 11 Feb 2022 10:19:56 +0000 Subject: [PATCH 1/7] WIP - use islands for audio atom --- dotcom-rendering/src/web/components/App.tsx | 21 --- ...er.tsx => AudioAtomWrapper.importable.tsx} | 30 ++-- .../layouts/InteractiveImmersiveLayout.tsx | 18 ++- .../src/web/lib/renderElement.tsx | 15 +- yarn.lock | 150 +++++++++++++++++- 5 files changed, 194 insertions(+), 40 deletions(-) rename dotcom-rendering/src/web/components/{AudioAtomWrapper.tsx => AudioAtomWrapper.importable.tsx} (66%) diff --git a/dotcom-rendering/src/web/components/App.tsx b/dotcom-rendering/src/web/components/App.tsx index 6022d0f4767..a5184b9d209 100644 --- a/dotcom-rendering/src/web/components/App.tsx +++ b/dotcom-rendering/src/web/components/App.tsx @@ -18,8 +18,6 @@ import { GetMatchNav } from './GetMatchNav'; import { StickyBottomBanner } from './StickyBottomBanner/StickyBottomBanner'; import { SignInGateSelector } from './SignInGate/SignInGateSelector'; -import { AudioAtomWrapper } from './AudioAtomWrapper'; - import { Portal } from './Portal'; import { HydrateOnce, HydrateInteractiveOnce } from './HydrateOnce'; import { decideTheme } from '../lib/decideTheme'; @@ -202,10 +200,6 @@ export const App = ({ CAPI }: Props) => { CAPI.elementsToHydrate, 'model.dotcomrendering.pageElements.YoutubeBlockElement', ); - const audioAtoms = elementsByType( - CAPI.elementsToHydrate, - 'model.dotcomrendering.pageElements.AudioAtomBlockElement', - ); const embeds = elementsByType( CAPI.elementsToHydrate, 'model.dotcomrendering.pageElements.EmbedBlockElement', @@ -308,21 +302,6 @@ export const App = ({ CAPI }: Props) => { isPaidContent={CAPI.pageType.isPaidContent} /> - {audioAtoms.map((audioAtom) => ( - - - - ))} {embeds.map((embed, index) => ( {embed.safe ? ( diff --git a/dotcom-rendering/src/web/components/AudioAtomWrapper.tsx b/dotcom-rendering/src/web/components/AudioAtomWrapper.importable.tsx similarity index 66% rename from dotcom-rendering/src/web/components/AudioAtomWrapper.tsx rename to dotcom-rendering/src/web/components/AudioAtomWrapper.importable.tsx index ebe09031f7b..057db393ac3 100644 --- a/dotcom-rendering/src/web/components/AudioAtomWrapper.tsx +++ b/dotcom-rendering/src/web/components/AudioAtomWrapper.importable.tsx @@ -33,20 +33,22 @@ export const AudioAtomWrapper = ({ // ***************** const [shouldUseAcast, setShouldUseAcast] = useState(false); useEffect(() => { - onConsentChange((state: any) => { - // Should we use ad enabled audio? If so, then set the shouldUseAcast - // state to true, triggering a rerender of AudioAtom using a new track url - // (one with adverts) - const consentGiven = getConsentFor('acast', state); - if ( - aCastisEnabled && - consentGiven && - readerCanBeShownAds && // Eg. Not a subscriber - contentIsNotSensitive - ) { - setShouldUseAcast(true); - } - }); + if (typeof window !== 'undefined') { + onConsentChange((state: any) => { + // Should we use ad enabled audio? If so, then set the shouldUseAcast + // state to true, triggering a rerender of AudioAtom using a new track url + // (one with adverts) + const consentGiven = getConsentFor('acast', state); + if ( + aCastisEnabled && + consentGiven && + readerCanBeShownAds && // Eg. Not a subscriber + contentIsNotSensitive + ) { + setShouldUseAcast(true); + } + }); + } }, [contentIsNotSensitive, aCastisEnabled, readerCanBeShownAds]); return ( diff --git a/dotcom-rendering/src/web/layouts/InteractiveImmersiveLayout.tsx b/dotcom-rendering/src/web/layouts/InteractiveImmersiveLayout.tsx index 15560319d73..1b2c2d792ae 100644 --- a/dotcom-rendering/src/web/layouts/InteractiveImmersiveLayout.tsx +++ b/dotcom-rendering/src/web/layouts/InteractiveImmersiveLayout.tsx @@ -154,7 +154,19 @@ const Renderer: React.FC<{ pageId: string; webTitle: string; ajaxUrl: string; -}> = ({ format, palette, elements, host, pageId, webTitle, ajaxUrl }) => { + config: ConfigType; + isAdFreeUser: boolean; +}> = ({ + format, + palette, + elements, + host, + pageId, + webTitle, + ajaxUrl, + config, + isAdFreeUser, +}) => { // const cleanedElements = elements.map(element => // 'html' in element ? { ...element, html: clean(element.html) } : element, // ); @@ -172,6 +184,8 @@ const Renderer: React.FC<{ pageId, webTitle, ajaxUrl, + config, + isAdFreeUser, }); if (ok) { @@ -441,6 +455,8 @@ export const InteractiveImmersiveLayout = ({ pageId={CAPI.pageId} webTitle={CAPI.webTitle} ajaxUrl={CAPI.config.ajaxUrl} + config={CAPI.config} + isAdFreeUser={CAPI.isAdFreeUser} /> diff --git a/dotcom-rendering/src/web/lib/renderElement.tsx b/dotcom-rendering/src/web/lib/renderElement.tsx index a5546d86f83..c15525df24b 100644 --- a/dotcom-rendering/src/web/lib/renderElement.tsx +++ b/dotcom-rendering/src/web/lib/renderElement.tsx @@ -1,5 +1,4 @@ import { - AudioAtom, ExplainerAtom, InteractiveAtom, InteractiveLayoutAtom, @@ -41,6 +40,7 @@ import { VimeoBlockComponent } from '../components/VimeoBlockComponent'; import { VineBlockComponent } from '../components/VineBlockComponent.importable'; import { YoutubeEmbedBlockComponent } from '../components/YoutubeEmbedBlockComponent'; import { YoutubeBlockComponent } from '../components/YoutubeBlockComponent'; +import { AudioAtomWrapper } from '../components/AudioAtomWrapper.importable'; import { TimelineAtomWrapper } from '../components/TimelineAtomWrapper.importable'; import { GuideAtomWrapper } from '../components/GuideAtomWrapper.importable'; @@ -78,6 +78,8 @@ type Props = { pageId: string; webTitle: string; ajaxUrl: string; + config: ConfigType; + isAdFreeUser: boolean; }; // updateRole modifies the role of an element in a way appropriate for most @@ -129,18 +131,23 @@ export const renderElement = ({ pageId, webTitle, ajaxUrl, + config, + isAdFreeUser, }: Props): [boolean, JSX.Element] => { switch (element._type) { case 'model.dotcomrendering.pageElements.AudioAtomBlockElement': return [ true, - , ]; case 'model.dotcomrendering.pageElements.BlockquoteBlockElement': @@ -765,6 +772,8 @@ export const renderArticleElement = ({ starRating, pageId, webTitle, + config, + isAdFreeUser, }: Props): JSX.Element => { const withUpdatedRole = updateRole(element, format); @@ -781,6 +790,8 @@ export const renderArticleElement = ({ starRating, pageId, webTitle, + config, + isAdFreeUser, }); if (!ok) { diff --git a/yarn.lock b/yarn.lock index 51b1d6ef0db..3c58e31c450 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3180,6 +3180,27 @@ source-map "^0.6.1" write-file-atomic "^3.0.0" +"@jest/transform@^27.5.1": + version "27.5.1" + resolved "https://registry.yarnpkg.com/@jest/transform/-/transform-27.5.1.tgz#6c3501dcc00c4c08915f292a600ece5ecfe1f409" + integrity sha512-ipON6WtYgl/1329g5AIJVbUuEh0wZVbdpGwC99Jw4LwuoBNS95MVphU6zOeD9pDkon+LLbFL7lOQRapbB8SCHw== + dependencies: + "@babel/core" "^7.1.0" + "@jest/types" "^27.5.1" + babel-plugin-istanbul "^6.1.1" + chalk "^4.0.0" + convert-source-map "^1.4.0" + fast-json-stable-stringify "^2.0.0" + graceful-fs "^4.2.9" + jest-haste-map "^27.5.1" + jest-regex-util "^27.5.1" + jest-util "^27.5.1" + micromatch "^4.0.4" + pirates "^4.0.4" + slash "^3.0.0" + source-map "^0.6.1" + write-file-atomic "^3.0.0" + "@jest/types@^24.9.0": version "24.9.0" resolved "https://registry.yarnpkg.com/@jest/types/-/types-24.9.0.tgz#63cb26cb7500d069e5a389441a7c6ab5e909fc59" @@ -3210,6 +3231,17 @@ "@types/yargs" "^15.0.0" chalk "^4.0.0" +"@jest/types@^27.5.1": + version "27.5.1" + resolved "https://registry.yarnpkg.com/@jest/types/-/types-27.5.1.tgz#3c79ec4a8ba61c170bf937bcf9e98a9df175ec80" + integrity sha512-Cx46iJ9QpwQTjIdq5VJu2QTMMs3QlEjI0x1QbBP5W1+nMzyc2XmimiRR/CbX9TO0cPTeUlxWMOu8mslYsJ8DEw== + dependencies: + "@types/istanbul-lib-coverage" "^2.0.0" + "@types/istanbul-reports" "^3.0.0" + "@types/node" "*" + "@types/yargs" "^16.0.0" + chalk "^4.0.0" + "@kossnocorp/desvg@^0.1.1": version "0.1.2" resolved "https://registry.yarnpkg.com/@kossnocorp/desvg/-/desvg-0.1.2.tgz#3d120b180d4dbb1f646603c3b9f2c89774c368dc" @@ -4586,6 +4618,17 @@ "@types/babel__template" "*" "@types/babel__traverse" "*" +"@types/babel__core@^7.1.14": + version "7.1.18" + resolved "https://registry.yarnpkg.com/@types/babel__core/-/babel__core-7.1.18.tgz#1a29abcc411a9c05e2094c98f9a1b7da6cdf49f8" + integrity sha512-S7unDjm/C7z2A2R9NzfKCK1I+BAALDtxEmsJBwlB3EzNfb929ykjL++1CK9LO++EIp2fQrC8O+BwjKvz6UeDyQ== + dependencies: + "@babel/parser" "^7.1.0" + "@babel/types" "^7.0.0" + "@types/babel__generator" "*" + "@types/babel__template" "*" + "@types/babel__traverse" "*" + "@types/babel__generator@*": version "7.6.3" resolved "https://registry.yarnpkg.com/@types/babel__generator/-/babel__generator-7.6.3.tgz#f456b4b2ce79137f768aa130d2423d2f0ccfaba5" @@ -5152,6 +5195,13 @@ dependencies: "@types/yargs-parser" "*" +"@types/yargs@^16.0.0": + version "16.0.4" + resolved "https://registry.yarnpkg.com/@types/yargs/-/yargs-16.0.4.tgz#26aad98dd2c2a38e421086ea9ad42b9e51642977" + integrity sha512-T8Yc9wt/5LbJyCaLiHPReJa0kApcIgJ7Bn735GjItUfh08Z1pJvu8QZqb9s+mMvKV6WUQRV7K2R46YbjMXTTJw== + dependencies: + "@types/yargs-parser" "*" + "@types/yauzl@^2.9.1": version "2.9.2" resolved "https://registry.yarnpkg.com/@types/yauzl/-/yauzl-2.9.2.tgz#c48e5d56aff1444409e39fa164b0b4d4552a7b7a" @@ -6339,6 +6389,20 @@ babel-jest@^26.6.3: graceful-fs "^4.2.4" slash "^3.0.0" +babel-jest@^27.5.1: + version "27.5.1" + resolved "https://registry.yarnpkg.com/babel-jest/-/babel-jest-27.5.1.tgz#a1bf8d61928edfefd21da27eb86a695bfd691444" + integrity sha512-cdQ5dXjGRd0IBRATiQ4mZGlGlRE8kJpjPOixdNRdT+m3UcNqmYWN6rK6nvtXYfY3D76cb8s/O1Ss8ea24PIwcg== + dependencies: + "@jest/transform" "^27.5.1" + "@jest/types" "^27.5.1" + "@types/babel__core" "^7.1.14" + babel-plugin-istanbul "^6.1.1" + babel-preset-jest "^27.5.1" + chalk "^4.0.0" + graceful-fs "^4.2.9" + slash "^3.0.0" + babel-loader@^8.0.0: version "8.2.3" resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-8.2.3.tgz#8986b40f1a64cacfcb4b8429320085ef68b1342d" @@ -6412,7 +6476,7 @@ babel-plugin-istanbul@^5.1.0: istanbul-lib-instrument "^3.3.0" test-exclude "^5.2.3" -babel-plugin-istanbul@^6.0.0: +babel-plugin-istanbul@^6.0.0, babel-plugin-istanbul@^6.1.1: version "6.1.1" resolved "https://registry.yarnpkg.com/babel-plugin-istanbul/-/babel-plugin-istanbul-6.1.1.tgz#fa88ec59232fd9b4e36dbbc540a8ec9a9b47da73" integrity sha512-Y1IQok9821cC9onCx5otgFfRm7Lm+I+wwxOx738M/WLPZ9Q42m4IG5W0FNX8WLL2gYMZo3JkuXIH2DOpWM+qwA== @@ -6440,6 +6504,16 @@ babel-plugin-jest-hoist@^26.6.2: "@types/babel__core" "^7.0.0" "@types/babel__traverse" "^7.0.6" +babel-plugin-jest-hoist@^27.5.1: + version "27.5.1" + resolved "https://registry.yarnpkg.com/babel-plugin-jest-hoist/-/babel-plugin-jest-hoist-27.5.1.tgz#9be98ecf28c331eb9f5df9c72d6f89deb8181c2e" + integrity sha512-50wCwD5EMNW4aRpOwtqzyZHIewTYNxLA4nhB+09d8BIssfNfzBRhkBIHiaPv1Si226TQSvp8gxAJm2iY2qs2hQ== + dependencies: + "@babel/template" "^7.3.3" + "@babel/types" "^7.3.3" + "@types/babel__core" "^7.0.0" + "@types/babel__traverse" "^7.0.6" + babel-plugin-macros@^2.0.0, babel-plugin-macros@^2.6.1, babel-plugin-macros@^2.8.0: version "2.8.0" resolved "https://registry.yarnpkg.com/babel-plugin-macros/-/babel-plugin-macros-2.8.0.tgz#0f958a7cc6556b1e65344465d99111a1e5e10138" @@ -6565,6 +6639,14 @@ babel-preset-jest@^26.6.2: babel-plugin-jest-hoist "^26.6.2" babel-preset-current-node-syntax "^1.0.0" +babel-preset-jest@^27.5.1: + version "27.5.1" + resolved "https://registry.yarnpkg.com/babel-preset-jest/-/babel-preset-jest-27.5.1.tgz#91f10f58034cb7989cb4f962b69fa6eef6a6bc81" + integrity sha512-Nptf2FzlPCWYuJg41HBqXVT8ym6bXOevuCTbhxlUpjwtysGaIWFvDEjp4y+G7fl13FgOdjs7P/DmErqH7da0Ag== + dependencies: + babel-plugin-jest-hoist "^27.5.1" + babel-preset-current-node-syntax "^1.0.0" + babel-runtime@^6.22.0: version "6.26.0" resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.26.0.tgz#965c7058668e82b55d7bfe04ff2337bc8b5647fe" @@ -10353,7 +10435,7 @@ fsevents@^1.2.7: bindings "^1.5.0" nan "^2.12.1" -fsevents@^2.1.2, fsevents@~2.3.2: +fsevents@^2.1.2, fsevents@^2.3.2, fsevents@~2.3.2: version "2.3.2" resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a" integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA== @@ -10731,6 +10813,11 @@ graceful-fs@^4.1.11, graceful-fs@^4.1.15, graceful-fs@^4.1.2, graceful-fs@^4.1.6 resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.8.tgz#e412b8d33f5e006593cbd3cee6df9f2cebbe802a" integrity sha512-qkIilPUYcNhJpd33n0GBXTB1MMPp14TxEsEs0pTrsSVucApsYzW5V+Q8Qxhik6KU3evy+qkAAowTByymK0avdg== +graceful-fs@^4.2.9: + version "4.2.9" + resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.9.tgz#041b05df45755e587a24942279b9d113146e1c96" + integrity sha512-NtNxqUcXgpW2iMrfqSfR73Glt39K+BLwWsPs94yR63v45T0Wbej7eRmL5cWfwEgqXnmjQp3zaJTshdRW/qC2ZQ== + growly@^1.3.0: version "1.3.0" resolved "https://registry.yarnpkg.com/growly/-/growly-1.3.0.tgz#f10748cbe76af964b7c96c93c6bcc28af120c081" @@ -12425,6 +12512,26 @@ jest-haste-map@^26.6.2: optionalDependencies: fsevents "^2.1.2" +jest-haste-map@^27.5.1: + version "27.5.1" + resolved "https://registry.yarnpkg.com/jest-haste-map/-/jest-haste-map-27.5.1.tgz#9fd8bd7e7b4fa502d9c6164c5640512b4e811e7f" + integrity sha512-7GgkZ4Fw4NFbMSDSpZwXeBiIbx+t/46nJ2QitkOjvwPYyZmqttu2TDSimMHP1EkPOi4xUZAN1doE5Vd25H4Jng== + dependencies: + "@jest/types" "^27.5.1" + "@types/graceful-fs" "^4.1.2" + "@types/node" "*" + anymatch "^3.0.3" + fb-watchman "^2.0.0" + graceful-fs "^4.2.9" + jest-regex-util "^27.5.1" + jest-serializer "^27.5.1" + jest-util "^27.5.1" + jest-worker "^27.5.1" + micromatch "^4.0.4" + walker "^1.0.7" + optionalDependencies: + fsevents "^2.3.2" + jest-jasmine2@^24.9.0: version "24.9.0" resolved "https://registry.yarnpkg.com/jest-jasmine2/-/jest-jasmine2-24.9.0.tgz#1f7b1bd3242c1774e62acabb3646d96afc3be6a0" @@ -12596,6 +12703,11 @@ jest-regex-util@^26.0.0: resolved "https://registry.yarnpkg.com/jest-regex-util/-/jest-regex-util-26.0.0.tgz#d25e7184b36e39fd466c3bc41be0971e821fee28" integrity sha512-Gv3ZIs/nA48/Zvjrl34bf+oD76JHiGDUxNOVgUjh3j890sblXryjY4rss71fPtD/njchl6PSE2hIhvyWa1eT0A== +jest-regex-util@^27.5.1: + version "27.5.1" + resolved "https://registry.yarnpkg.com/jest-regex-util/-/jest-regex-util-27.5.1.tgz#4da143f7e9fd1e542d4aa69617b38e4a78365b95" + integrity sha512-4bfKq2zie+x16okqDXjXn9ql2B0dScQu+vcwe4TvFVhkVyuWLqpZrZtXxLLWoXYgn0E87I6r6GRYHF7wFZBUvg== + jest-resolve-dependencies@^24.9.0: version "24.9.0" resolved "https://registry.yarnpkg.com/jest-resolve-dependencies/-/jest-resolve-dependencies-24.9.0.tgz#ad055198959c4cfba8a4f066c673a3f0786507ab" @@ -12765,6 +12877,14 @@ jest-serializer@^26.6.2: "@types/node" "*" graceful-fs "^4.2.4" +jest-serializer@^27.5.1: + version "27.5.1" + resolved "https://registry.yarnpkg.com/jest-serializer/-/jest-serializer-27.5.1.tgz#81438410a30ea66fd57ff730835123dea1fb1f64" + integrity sha512-jZCyo6iIxO1aqUxpuBlwTDMkzOAJS4a3eYz3YzgxxVQFwLeSA7Jfq5cbqCY+JLvTDrWirgusI/0KwxKMgrdf7w== + dependencies: + "@types/node" "*" + graceful-fs "^4.2.9" + jest-snapshot@^24.9.0: version "24.9.0" resolved "https://registry.yarnpkg.com/jest-snapshot/-/jest-snapshot-24.9.0.tgz#ec8e9ca4f2ec0c5c87ae8f925cf97497b0e951ba" @@ -12852,6 +12972,18 @@ jest-util@^26.1.0, jest-util@^26.6.2: is-ci "^2.0.0" micromatch "^4.0.2" +jest-util@^27.5.1: + version "27.5.1" + resolved "https://registry.yarnpkg.com/jest-util/-/jest-util-27.5.1.tgz#3ba9771e8e31a0b85da48fe0b0891fb86c01c2f9" + integrity sha512-Kv2o/8jNvX1MQ0KGtw480E/w4fBCDOnH6+6DmeKi6LZUIlKA5kwY0YNdlzaWTiVgxqAqik11QyxDOKk543aKXw== + dependencies: + "@jest/types" "^27.5.1" + "@types/node" "*" + chalk "^4.0.0" + ci-info "^3.2.0" + graceful-fs "^4.2.9" + picomatch "^2.2.3" + jest-validate@^24.9.0: version "24.9.0" resolved "https://registry.yarnpkg.com/jest-validate/-/jest-validate-24.9.0.tgz#0775c55360d173cd854e40180756d4ff52def8ab" @@ -12928,6 +13060,15 @@ jest-worker@^27.4.1: merge-stream "^2.0.0" supports-color "^8.0.0" +jest-worker@^27.5.1: + version "27.5.1" + resolved "https://registry.yarnpkg.com/jest-worker/-/jest-worker-27.5.1.tgz#8d146f0900e8973b106b6f73cc1e9a8cb86f8db0" + integrity sha512-7vuh85V5cdDofPyxn58nrPjBktZo0u9x1g8WtjQol+jZDaE+fhN+cIvTj11GndBnMnyfrUOG1sZQxCdjKh+DKg== + dependencies: + "@types/node" "*" + merge-stream "^2.0.0" + supports-color "^8.0.0" + jest@^24.9.0: version "24.9.0" resolved "https://registry.yarnpkg.com/jest/-/jest-24.9.0.tgz#987d290c05a08b52c56188c1002e368edb007171" @@ -15342,6 +15483,11 @@ pirates@^4.0.0, pirates@^4.0.1: resolved "https://registry.yarnpkg.com/pirates/-/pirates-4.0.4.tgz#07df81e61028e402735cdd49db701e4885b4e6e6" integrity sha512-ZIrVPH+A52Dw84R0L3/VS9Op04PuQ2SEoJL6bkshmiTic/HldyW9Tf7oH5mhJZBK7NmDx27vSMrYEXPXclpDKw== +pirates@^4.0.4: + version "4.0.5" + resolved "https://registry.yarnpkg.com/pirates/-/pirates-4.0.5.tgz#feec352ea5c3268fb23a37c702ab1699f35a5f3b" + integrity sha512-8V9+HQPupnaXMA23c5hvl69zXvTwTzyAYasnkb0Tts4XvO4CliqONMOnvlq26rkhLC3nWDFBJf73LU1e1VZLaQ== + pkg-dir@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/pkg-dir/-/pkg-dir-2.0.0.tgz#f6d5d1109e19d63edf428e0bd57e12777615334b" From 48d90728a71abcdd8b820568c7f589c10a62c0ec Mon Sep 17 00:00:00 2001 From: Olly <9575458+OllysCoding@users.noreply.github.com> Date: Fri, 11 Feb 2022 10:54:50 +0000 Subject: [PATCH 2/7] WIP - update render element props --- .../web/layouts/FullPageInteractiveLayout.tsx | 22 ++++++++++++++++++- .../layouts/InteractiveImmersiveLayout.tsx | 12 ++++++---- .../src/web/lib/renderElement.tsx | 16 +++++++++----- 3 files changed, 39 insertions(+), 11 deletions(-) diff --git a/dotcom-rendering/src/web/layouts/FullPageInteractiveLayout.tsx b/dotcom-rendering/src/web/layouts/FullPageInteractiveLayout.tsx index 8c02041c15e..bd768ce8e10 100644 --- a/dotcom-rendering/src/web/layouts/FullPageInteractiveLayout.tsx +++ b/dotcom-rendering/src/web/layouts/FullPageInteractiveLayout.tsx @@ -49,7 +49,21 @@ const Renderer: React.FC<{ pageId: string; webTitle: string; ajaxUrl: string; -}> = ({ format, palette, elements, host, pageId, webTitle, ajaxUrl }) => { + isAdFreeUser: boolean; + isSensitive: boolean; + switches: { [key: string]: boolean }; +}> = ({ + format, + palette, + elements, + host, + pageId, + webTitle, + ajaxUrl, + isAdFreeUser, + isSensitive, + switches, +}) => { // const cleanedElements = elements.map(element => // 'html' in element ? { ...element, html: clean(element.html) } : element, // ); @@ -67,6 +81,9 @@ const Renderer: React.FC<{ pageId, webTitle, ajaxUrl, + isAdFreeUser, + isSensitive, + switches, }); if (ok) { @@ -301,6 +318,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} /> diff --git a/dotcom-rendering/src/web/layouts/InteractiveImmersiveLayout.tsx b/dotcom-rendering/src/web/layouts/InteractiveImmersiveLayout.tsx index 1b2c2d792ae..6069fd8d489 100644 --- a/dotcom-rendering/src/web/layouts/InteractiveImmersiveLayout.tsx +++ b/dotcom-rendering/src/web/layouts/InteractiveImmersiveLayout.tsx @@ -154,8 +154,9 @@ const Renderer: React.FC<{ pageId: string; webTitle: string; ajaxUrl: string; - config: ConfigType; isAdFreeUser: boolean; + isSensitive: boolean; + switches: { [key: string]: boolean }; }> = ({ format, palette, @@ -164,8 +165,9 @@ const Renderer: React.FC<{ pageId, webTitle, ajaxUrl, - config, isAdFreeUser, + isSensitive, + switches, }) => { // const cleanedElements = elements.map(element => // 'html' in element ? { ...element, html: clean(element.html) } : element, @@ -184,8 +186,9 @@ const Renderer: React.FC<{ pageId, webTitle, ajaxUrl, - config, isAdFreeUser, + isSensitive, + switches, }); if (ok) { @@ -455,8 +458,9 @@ export const InteractiveImmersiveLayout = ({ pageId={CAPI.pageId} webTitle={CAPI.webTitle} ajaxUrl={CAPI.config.ajaxUrl} - config={CAPI.config} + switches={CAPI.config.switches} isAdFreeUser={CAPI.isAdFreeUser} + isSensitive={CAPI.config.isSensitive} /> diff --git a/dotcom-rendering/src/web/lib/renderElement.tsx b/dotcom-rendering/src/web/lib/renderElement.tsx index c15525df24b..781c230e344 100644 --- a/dotcom-rendering/src/web/lib/renderElement.tsx +++ b/dotcom-rendering/src/web/lib/renderElement.tsx @@ -78,8 +78,9 @@ type Props = { pageId: string; webTitle: string; ajaxUrl: string; - config: ConfigType; isAdFreeUser: boolean; + isSensitive: boolean; + switches: { [key: string]: boolean }; }; // updateRole modifies the role of an element in a way appropriate for most @@ -131,8 +132,9 @@ export const renderElement = ({ pageId, webTitle, ajaxUrl, - config, isAdFreeUser, + switches, + isSensitive, }: Props): [boolean, JSX.Element] => { switch (element._type) { case 'model.dotcomrendering.pageElements.AudioAtomBlockElement': @@ -145,8 +147,8 @@ export const renderElement = ({ title={element.title} duration={element.duration} pillar={format.theme} - contentIsNotSensitive={config.isSensitive} - aCastisEnabled={config.switches.acast} + contentIsNotSensitive={isSensitive} + aCastisEnabled={switches.acast} readerCanBeShownAds={isAdFreeUser} />, ]; @@ -772,8 +774,9 @@ export const renderArticleElement = ({ starRating, pageId, webTitle, - config, isAdFreeUser, + isSensitive, + switches, }: Props): JSX.Element => { const withUpdatedRole = updateRole(element, format); @@ -790,8 +793,9 @@ export const renderArticleElement = ({ starRating, pageId, webTitle, - config, isAdFreeUser, + isSensitive, + switches, }); if (!ok) { From a6b2581058dfd93a27dd2c2e17ea4c5575cc59bc Mon Sep 17 00:00:00 2001 From: Olly <9575458+OllysCoding@users.noreply.github.com> Date: Fri, 11 Feb 2022 11:15:33 +0000 Subject: [PATCH 3/7] propegate ALL THE PROPS --- dotcom-rendering/index.d.ts | 1 + .../src/web/components/ArticleBody.tsx | 12 ++++++++++ .../components/ArticleHeadline.stories.tsx | 15 ++++++++++++ .../AudioAtomWrapper.importable.tsx | 3 +++ .../src/web/components/LiveBlock.stories.tsx | 21 ++++++++++++++++ .../src/web/components/LiveBlock.tsx | 9 +++++++ .../src/web/components/MainMedia.tsx | 9 +++++++ .../src/web/layouts/CommentLayout.tsx | 6 +++++ .../src/web/layouts/ImmersiveLayout.tsx | 3 +++ .../src/web/layouts/InteractiveLayout.tsx | 6 +++++ .../src/web/layouts/LiveLayout.tsx | 24 +++++++++++++++++++ .../src/web/layouts/ShowcaseLayout.tsx | 6 +++++ .../src/web/layouts/StandardLayout.tsx | 6 +++++ .../web/layouts/headers/ImmersiveHeader.tsx | 3 +++ .../src/web/lib/ArticleRenderer.tsx | 9 +++++++ .../src/web/lib/LiveBlogRenderer.tsx | 9 +++++++ .../src/web/server/blocksToHtml.tsx | 4 ++++ dotcom-rendering/src/web/server/index.ts | 2 ++ 18 files changed, 148 insertions(+) diff --git a/dotcom-rendering/index.d.ts b/dotcom-rendering/index.d.ts index d44180b0606..e7029ebc10a 100644 --- a/dotcom-rendering/index.d.ts +++ b/dotcom-rendering/index.d.ts @@ -569,6 +569,7 @@ interface BlocksRequest { sharedAdTargeting: Record; adUnit: string; videoDuration?: number; + switches: { [key: string]: boolean }; } interface BadgeType { diff --git a/dotcom-rendering/src/web/components/ArticleBody.tsx b/dotcom-rendering/src/web/components/ArticleBody.tsx index 9c1d1772335..7908b837514 100644 --- a/dotcom-rendering/src/web/components/ArticleBody.tsx +++ b/dotcom-rendering/src/web/components/ArticleBody.tsx @@ -15,6 +15,9 @@ type Props = { pageId: string; webTitle: string; ajaxUrl: string; + isAdFreeUser: boolean; + isSensitive: boolean; + switches: { [key: string]: boolean }; }; const globalH2Styles = (display: ArticleDisplay) => css` @@ -81,6 +84,9 @@ export const ArticleBody = ({ pageId, webTitle, ajaxUrl, + switches, + isAdFreeUser, + isSensitive, }: Props) => { const isInteractive = format.design === ArticleDesign.Interactive; @@ -109,6 +115,9 @@ export const ArticleBody = ({ pageId={pageId} webTitle={webTitle} ajaxUrl={ajaxUrl} + switches={switches} + isAdFreeUser={isAdFreeUser} + isSensitive={isSensitive} /> @@ -137,6 +146,9 @@ export const ArticleBody = ({ pageId={pageId} webTitle={webTitle} ajaxUrl={ajaxUrl} + switches={switches} + isAdFreeUser={isAdFreeUser} + isSensitive={isSensitive} /> ); diff --git a/dotcom-rendering/src/web/components/ArticleHeadline.stories.tsx b/dotcom-rendering/src/web/components/ArticleHeadline.stories.tsx index 5732c761bfc..d5b2585a64d 100644 --- a/dotcom-rendering/src/web/components/ArticleHeadline.stories.tsx +++ b/dotcom-rendering/src/web/components/ArticleHeadline.stories.tsx @@ -110,6 +110,9 @@ export const ShowcaseInterview = () => { pageId="testID" webTitle="story article" ajaxUrl="" + isAdFreeUser={false} + isSensitive={false} + switches={{}} /> @@ -152,6 +155,9 @@ export const ShowcaseInterviewNobyline = () => { pageId="testID" webTitle="story article" ajaxUrl="" + isAdFreeUser={false} + isSensitive={false} + switches={{}} /> @@ -194,6 +200,9 @@ export const Interview = () => { pageId="testID" webTitle="story article" ajaxUrl="" + isAdFreeUser={false} + isSensitive={false} + switches={{}} /> @@ -234,6 +243,9 @@ export const InterviewSpecialReport = () => { pageId="testID" webTitle="story article" ajaxUrl="" + isAdFreeUser={false} + isSensitive={false} + switches={{}} /> @@ -276,6 +288,9 @@ export const InterviewNoByline = () => { pageId="testID" webTitle="story article" ajaxUrl="" + isAdFreeUser={false} + isSensitive={false} + switches={{}} /> diff --git a/dotcom-rendering/src/web/components/AudioAtomWrapper.importable.tsx b/dotcom-rendering/src/web/components/AudioAtomWrapper.importable.tsx index 057db393ac3..a833fd80746 100644 --- a/dotcom-rendering/src/web/components/AudioAtomWrapper.importable.tsx +++ b/dotcom-rendering/src/web/components/AudioAtomWrapper.importable.tsx @@ -28,6 +28,9 @@ export const AudioAtomWrapper = ({ aCastisEnabled, readerCanBeShownAds, }: Props) => { + // TODO: import from '@guardian/consent-management-platform' cannot be done on the server + // wait for fix an implement here. + // ***************** // * ACast * // ***************** diff --git a/dotcom-rendering/src/web/components/LiveBlock.stories.tsx b/dotcom-rendering/src/web/components/LiveBlock.stories.tsx index 01d41ad3c89..c183add2462 100644 --- a/dotcom-rendering/src/web/components/LiveBlock.stories.tsx +++ b/dotcom-rendering/src/web/components/LiveBlock.stories.tsx @@ -103,6 +103,9 @@ export const VideoAsSecond = () => { pageId="" webTitle="" ajaxUrl="" + isAdFreeUser={false} + isSensitive={false} + switches={{}} /> ); @@ -148,6 +151,9 @@ export const Title = () => { pageId="" webTitle="" ajaxUrl="" + isAdFreeUser={false} + isSensitive={false} + switches={{}} /> ); @@ -214,6 +220,9 @@ export const Video = () => { pageId="" webTitle="" ajaxUrl="" + isAdFreeUser={false} + isSensitive={false} + switches={{}} /> ); @@ -255,6 +264,9 @@ export const RichLink = () => { pageId="" webTitle="" ajaxUrl="" + isAdFreeUser={false} + isSensitive={false} + switches={{}} /> ); @@ -287,6 +299,9 @@ export const FirstImage = () => { pageId="" webTitle="" ajaxUrl="" + isAdFreeUser={false} + isSensitive={false} + switches={{}} /> ); @@ -320,6 +335,9 @@ export const ImaheAndTitle = () => { pageId="" webTitle="" ajaxUrl="" + isAdFreeUser={false} + isSensitive={false} + switches={{}} /> ); @@ -349,6 +367,9 @@ export const Updated = () => { pageId="" webTitle="" ajaxUrl="" + isAdFreeUser={false} + isSensitive={false} + switches={{}} /> ); diff --git a/dotcom-rendering/src/web/components/LiveBlock.tsx b/dotcom-rendering/src/web/components/LiveBlock.tsx index 8adf53ec22b..2af64fb1f31 100644 --- a/dotcom-rendering/src/web/components/LiveBlock.tsx +++ b/dotcom-rendering/src/web/components/LiveBlock.tsx @@ -15,6 +15,9 @@ type Props = { adTargeting: AdTargeting; host?: string; ajaxUrl: string; + isAdFreeUser: boolean; + isSensitive: boolean; + switches: { [key: string]: boolean }; }; export const LiveBlock = ({ @@ -25,6 +28,9 @@ export const LiveBlock = ({ adTargeting, host, ajaxUrl, + isAdFreeUser, + isSensitive, + switches, }: Props) => { if (block.elements.length === 0) return null; const palette = decidePalette(format); @@ -57,6 +63,9 @@ export const LiveBlock = ({ index, pageId, webTitle, + isAdFreeUser, + isSensitive, + switches, }), )}