From f53d5cd1c1d2bc2b66c6148e2776c964d2159b1a Mon Sep 17 00:00:00 2001 From: Aaron Moore Date: Wed, 11 Sep 2024 19:00:45 +0100 Subject: [PATCH 01/45] AMP Iframe + externalEmbedurl constructor --- src/app/components/MediaLoader/amp.tsx | 62 +++++++++++++++++++ .../MediaLoader/configs/aresMedia.ts | 15 ++--- .../MediaLoader/configs/clipMedia.ts | 15 ++--- .../components/MediaLoader/index.styles.ts | 1 + src/app/components/MediaLoader/index.test.tsx | 3 +- src/app/components/MediaLoader/index.tsx | 42 +++++++++---- src/app/components/MediaLoader/types.ts | 6 +- .../MediaLoader/utils/buildSetting.test.ts | 17 +++-- .../MediaLoader/utils/buildSettings.ts | 1 - .../MediaLoader/utils/urlConstructors.ts | 60 ++++++++++++++++++ src/app/pages/ArticlePage/ArticlePage.jsx | 4 +- .../MediaArticlePage/MediaArticlePage.tsx | 15 +---- 12 files changed, 186 insertions(+), 55 deletions(-) create mode 100644 src/app/components/MediaLoader/amp.tsx create mode 100644 src/app/components/MediaLoader/utils/urlConstructors.ts diff --git a/src/app/components/MediaLoader/amp.tsx b/src/app/components/MediaLoader/amp.tsx new file mode 100644 index 00000000000..2bc8234bf01 --- /dev/null +++ b/src/app/components/MediaLoader/amp.tsx @@ -0,0 +1,62 @@ +import React from 'react'; +import { Helmet } from 'react-helmet'; +import ImagePlaceholder from '#psammead/psammead-image-placeholder/src'; +import Message from '#app/legacy/components/MediaPlayer/Message'; +import { Services } from '#app/models/types/global'; + +const AmpHead = () => ( + + - )} - - ); -}; - -export default Metadata; diff --git a/src/app/legacy/containers/MediaPlayer/Metadata.test.jsx b/src/app/legacy/containers/MediaPlayer/Metadata.test.jsx deleted file mode 100644 index deacf6ce289..00000000000 --- a/src/app/legacy/containers/MediaPlayer/Metadata.test.jsx +++ /dev/null @@ -1,71 +0,0 @@ -import React from 'react'; -import { Helmet } from 'react-helmet'; -import { render } from '../../../components/react-testing-library-with-providers'; -import Metadata from './Metadata'; - -const validAresMediaBlocks = [ - { - blockId: 'urn:bbc:ares::clip:p01k6msm', - model: { - advertising: true, - embedding: true, - format: 'audio_video', - id: 'p01k6msm', - imageCopyright: 'BBC', - imageUrl: 'ichef.test.bbci.co.uk/images/ic/$recipe/p01k6mtv.jpg', - subType: 'clip', - syndication: [Object], - synopses: [Object], - title: 'Five things ants can teach us about management', - versions: [Array], - }, - type: 'aresMediaMetadata', - id: 'f17766a8-8370-407a-8fa6-20cb49a91c57', - position: [4, 2, 1], - }, - { - model: { blocks: [Array] }, - type: 'image', - id: 'e90653c0-2bd1-4f17-a231-b012145780c6', - position: [4, 2, 2], - }, -]; - -describe('Metadata', () => { - const aresMediaBlockWithNoMetadata = { - model: { - blocks: [], - }, - }; - const aresMediaBlockWithMetadata = { - model: { - blocks: validAresMediaBlocks, - }, - }; - - const embedSource = - 'https://www.test.bbc.com/ws/av-embeds/articles/c3wmq4d1y3wo/p01k6mtv/en-GB'; - - it('should not render Metadata when aresMedia has no metadata block ', () => { - const { container } = render( - , - ); - - expect(container).toBeEmptyDOMElement(); - }); - - it('should render Metadata correctly when aresMedia has a metadata block', () => { - render( - , - ); - - const container = Helmet.peek(); - expect(container).toMatchSnapshot(); - }); -}); diff --git a/src/app/legacy/containers/MediaPlayer/__snapshots__/Metadata.test.jsx.snap b/src/app/legacy/containers/MediaPlayer/__snapshots__/Metadata.test.jsx.snap deleted file mode 100644 index 21b589dbd43..00000000000 --- a/src/app/legacy/containers/MediaPlayer/__snapshots__/Metadata.test.jsx.snap +++ /dev/null @@ -1,24 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Metadata should render Metadata correctly when aresMedia has a metadata block 1`] = ` -{ - "baseTag": [], - "bodyAttributes": {}, - "defer": true, - "encode": true, - "htmlAttributes": {}, - "linkTags": [], - "metaTags": [], - "noscriptTags": [], - "onChangeClientState": [Function], - "scriptTags": [ - { - "innerHTML": "{"@context":"http://schema.org","@type":"VideoObject","name":"Five things ants can teach us about management","duration":null,"thumbnailUrl":"https://ichef.test.bbci.co.uk/images/ic/1024x576/p01k6mtv.jpg","uploadDate":"1970-01-01T00:00:00.000Z","embedURL":"https://www.test.bbc.com/ws/av-embeds/articles/c3wmq4d1y3wo/p01k6mtv/en-GB"}", - "type": "application/ld+json", - }, - ], - "styleTags": [], - "title": undefined, - "titleAttributes": {}, -} -`; diff --git a/src/app/legacy/containers/MediaPlayer/__snapshots__/index.test.jsx.snap b/src/app/legacy/containers/MediaPlayer/__snapshots__/index.test.jsx.snap deleted file mode 100644 index 8f2f3ae6cf1..00000000000 --- a/src/app/legacy/containers/MediaPlayer/__snapshots__/index.test.jsx.snap +++ /dev/null @@ -1,673 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`MediaPlayer Calls the canonical placeholder when platform is canonical and showPlaceholder is true 1`] = ` -.emotion-0 { - margin: 0; - padding-bottom: 1.5rem; - width: 100%; -} - -.emotion-2 { - padding-top: 56.25%; - position: relative; - overflow: hidden; -} - -.emotion-4 { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - cursor: default; -} - -.emotion-4:hover .emotion-12, -.emotion-4:focus .emotion-12 { - background-color: #B80000; -} - -.emotion-6 { - font-family: ReithSans,Helvetica,Arial,sans-serif; - font-weight: 400; - font-style: normal; - font-size: 0.9375rem; - line-height: 1.125rem; - width: 100%; - height: 100%; - position: absolute; - border: 0.0625rem solid transparent; - color: #FFFFFF; - background-color: rgba(34, 34, 34, 0.75); -} - -@media (min-width: 37.5rem) { - .emotion-6 { - font-size: 0.875rem; - } -} - -@media screen and (-ms-high-contrast: active) { - .emotion-6 { - background-color: transparent; - } -} - -.no-js .emotion-6 { - background-color: rgba(34, 34, 34, 0.75); -} - -@media screen and (-ms-high-contrast: active) { - .no-js .emotion-6 { - background-color: transparent; - } -} - -.no-js .emotion-6 .guidance-message { - display: none; -} - -.emotion-8 { - display: block; - font-weight: normal; - padding: 0.5rem; - border-bottom: 0.0625rem solid transparent; -} - -@media screen and (-ms-high-contrast: active) { - .emotion-8 { - background-color: window; - } -} - -@media (min-width: 25rem) { - .emotion-8 { - padding: 1rem; - } -} - -.emotion-10 { - position: absolute; - bottom: 0; -} - -.emotion-13 { - background-color: #222222; - border: none; - color: #FFFFFF; - cursor: pointer; - display: block; - font-family: ReithSans,Helvetica,Arial,sans-serif; - font-weight: 700; - font-style: normal; - font-size: 0.75rem; - line-height: 1rem; - height: 5rem; - padding: 0; - -webkit-transition: background-color 300ms; - transition: background-color 300ms; - width: 5rem; - position: absolute; - bottom: 0; - left: 0; -} - -.emotion-13:hover, -.emotion-13:focus { - background-color: #B80000; - -webkit-transition: background-color 300ms; - transition: background-color 300ms; -} - -.no-js .emotion-13 { - display: none; -} - -.emotion-13:focus-visible::before { - content: ''; - position: absolute; - left: 0; - right: 0; - top: 0; - bottom: 0; - box-shadow: 0 0 0 0.1875rem #FFFFFF inset; - border: 0.1875rem solid #000000; -} - -.emotion-15 { - -webkit-clip-path: inset(100%); - clip-path: inset(100%); - clip: rect(1px, 1px, 1px, 1px); - height: 1px; - overflow: hidden; - position: absolute; - width: 1px; - margin: 0; -} - -.emotion-16>svg { - color: #FFFFFF; - fill: currentColor; - height: 1.5rem; - margin-top: 0.5rem; - width: 1.5rem; -} - -.emotion-18 { - vertical-align: middle; - margin: 0 0.25rem; - color: #222222; - fill: currentColor; - width: 0.75rem; - height: 0.75rem; -} - -.emotion-20 { - display: block; - margin-top: 0.5rem; -} - -.emotion-22 { - display: block; - width: 100%; -} - -
-
-
-
-
- -
- - -
-
-
-
-`; - -exports[`MediaPlayer Calls the canonical placeholder when platform is canonical and showPlaceholder is true for a Live Page video clip 1`] = ` -.emotion-0 { - margin: 0; - padding-bottom: 1.5rem; - width: 100%; -} - -.emotion-2 { - padding-top: 56.25%; - position: relative; - overflow: hidden; -} - -.emotion-4 { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - cursor: default; -} - -.emotion-4:hover .emotion-10, -.emotion-4:focus .emotion-10 { - background-color: #B80000; -} - -.emotion-6 { - font-family: ReithSans,Helvetica,Arial,sans-serif; - font-weight: 400; - font-style: normal; - font-size: 0.9375rem; - line-height: 1.125rem; - width: 100%; - height: 100%; - position: absolute; - border: 0.0625rem solid transparent; - color: #FFFFFF; -} - -@media (min-width: 37.5rem) { - .emotion-6 { - font-size: 0.875rem; - } -} - -.no-js .emotion-6 { - background-color: rgba(34, 34, 34, 0.75); -} - -@media screen and (-ms-high-contrast: active) { - .no-js .emotion-6 { - background-color: transparent; - } -} - -.no-js .emotion-6 .guidance-message { - display: none; -} - -.emotion-8 { - position: absolute; - bottom: 0; -} - -.emotion-11 { - background-color: #222222; - border: none; - color: #FFFFFF; - cursor: pointer; - display: block; - font-family: ReithSans,Helvetica,Arial,sans-serif; - font-weight: 700; - font-style: normal; - font-size: 0.75rem; - line-height: 1rem; - height: 5rem; - padding: 0; - -webkit-transition: background-color 300ms; - transition: background-color 300ms; - width: 5rem; - position: absolute; - bottom: 0; - left: 0; -} - -.emotion-11:hover, -.emotion-11:focus { - background-color: #B80000; - -webkit-transition: background-color 300ms; - transition: background-color 300ms; -} - -.no-js .emotion-11 { - display: none; -} - -.emotion-11:focus-visible::before { - content: ''; - position: absolute; - left: 0; - right: 0; - top: 0; - bottom: 0; - box-shadow: 0 0 0 0.1875rem #FFFFFF inset; - border: 0.1875rem solid #000000; -} - -.emotion-13 { - -webkit-clip-path: inset(100%); - clip-path: inset(100%); - clip: rect(1px, 1px, 1px, 1px); - height: 1px; - overflow: hidden; - position: absolute; - width: 1px; - margin: 0; -} - -.emotion-14>svg { - color: #FFFFFF; - fill: currentColor; - height: 1.5rem; - margin-top: 0.5rem; - width: 1.5rem; -} - -.emotion-16 { - vertical-align: middle; - margin: 0 0.25rem; - color: #222222; - fill: currentColor; - width: 0.75rem; - height: 0.75rem; -} - -.emotion-18 { - display: block; - margin-top: 0.5rem; -} - -.emotion-20 { - display: block; - width: 100%; -} - -.emotion-22 { - font-size: 0.9375rem; - line-height: 1.125rem; - font-family: ReithSans,Helvetica,Arial,sans-serif; - font-weight: 400; - font-style: normal; - color: #545658; - margin-top: 0.5rem; - padding-left: 0.5rem; - padding-right: 0.5rem; - width: 100%; - width: calc(100% - 0.5rem); - margin-left: 0.5rem; - border-left: 0.0625rem solid #6E6E73; -} - -@media (min-width: 20rem) and (max-width: 37.4375rem) { - .emotion-22 { - font-size: 0.9375rem; - line-height: 1.125rem; - } -} - -@media (min-width: 37.5rem) { - .emotion-22 { - font-size: 0.875rem; - line-height: 1.125rem; - } -} - -@media (min-width: 63rem) { - .emotion-22 { - width: 100%; - margin: 0.5rem 0 0; - } -} - -.emotion-22>span>p { - padding-bottom: 1.5rem; - margin: 0; -} - -.emotion-22>span>p:last-child { - padding-bottom: 0; -} - -@media (min-width: 25rem) and (max-width: 62.9375rem) { - .emotion-22 { - width: calc(100% - 1rem); - margin-left: 1rem; - padding-right: 1rem; - padding-left: 0.5rem; - } -} - -@media (min-width: 63rem) { - .emotion-22 { - padding-right: 0; - padding-left: 0.5rem; - } -} - -
-
-
-
-
-
- - -
-
-
- - - Video caption, - - - BBC launch trailer for We Know Our Place women's sport campaign" - - -
-
-
-`; - -exports[`MediaPlayer Does not Call the canonical placeholder when platform is canonical but showPlaceholder is false 1`] = ` -.emotion-0 { - margin: 0; - padding-bottom: 1.5rem; - width: 100%; -} - -.emotion-2 { - padding-top: 56.25%; - position: relative; - overflow: hidden; -} - -.emotion-4 { - border: 0; - left: 0; - overflow: hidden; - position: absolute; - top: 0; - width: 100%; - height: 100%; -} - -
-
-
-