diff --git a/src/app/components/AmpIframe/types.d.ts b/src/app/components/AmpIframe/types.d.ts deleted file mode 100644 index d7817712efa..00000000000 --- a/src/app/components/AmpIframe/types.d.ts +++ /dev/null @@ -1,19 +0,0 @@ -declare namespace JSX { - /* - * AMP currently doesn't have built-in types for TypeScript, but it's in their roadmap (https://github.com/ampproject/amphtml/issues/13791). - * As a workaround you can manually create custom types (https://stackoverflow.com/a/50601125). - */ - interface AmpIframeProps { - children?: React.ReactNode; - class?: string; - height?: number; - layout?: string; - src?: string; - width?: number; - sandbox?: string; - resizable?: string | undefined; - } - interface IntrinsicElements { - 'amp-iframe': AmpIframeProps; - } -} diff --git a/src/app/components/MediaLoader/Amp/index.styles.ts b/src/app/components/MediaLoader/Amp/index.styles.ts new file mode 100644 index 00000000000..9f49625e27b --- /dev/null +++ b/src/app/components/MediaLoader/Amp/index.styles.ts @@ -0,0 +1,26 @@ +import BASE64_PLACEHOLDER_IMAGE from '#app/components/Image/base64Placeholder'; +import { css, Theme } from '@emotion/react'; + +export default { + ampIframeWrapper: ({ palette }: Theme) => + css({ + position: 'relative', + overflow: 'hidden', + backgroundColor: palette.LUNAR, + height: '100%', + }), + ampIframePlaceholder: ({ mq }: Theme) => + css({ + backgroundImage: `url(${BASE64_PLACEHOLDER_IMAGE})`, + backgroundPosition: 'center center', + backgroundRepeat: ' no-repeat', + backgroundSize: '60px 17px', + + [mq.GROUP_2_MIN_WIDTH]: { + backgroundSize: ' 77px 22px', + }, + [mq.GROUP_4_MIN_WIDTH]: { + backgroundSize: ' 93px 27px', + }, + }), +}; diff --git a/src/app/components/MediaLoader/Amp/index.test.tsx b/src/app/components/MediaLoader/Amp/index.test.tsx new file mode 100644 index 00000000000..408c9bc5ecf --- /dev/null +++ b/src/app/components/MediaLoader/Amp/index.test.tsx @@ -0,0 +1,38 @@ +import React from 'react'; +import { + act, + render, +} from '#app/components/react-testing-library-with-providers'; +import Amp from './index'; + +const mockAmpIframeUrl = 'https://www.bbc.com/news/av-embeds/123456789'; + +describe('Amp', () => { + it('should render an amp-iframe with the correct attributes', async () => { + let container; + + await act(async () => { + ({ container } = render()); + }); + + const ampIframe = (container as unknown as HTMLElement).querySelector( + 'amp-iframe', + ); + + expect(ampIframe).toBeInTheDocument(); + }); + + it('should render amp-iframe placeholder', async () => { + let container; + + await act(async () => { + ({ container } = render()); + }); + + const ampImg = (container as unknown as HTMLElement).querySelector( + 'amp-iframe > div', + ); + + expect(ampImg).toBeInTheDocument(); + }); +}); diff --git a/src/app/legacy/components/MediaPlayer/Amp/index.jsx b/src/app/components/MediaLoader/Amp/index.tsx similarity index 61% rename from src/app/legacy/components/MediaPlayer/Amp/index.jsx rename to src/app/components/MediaLoader/Amp/index.tsx index 745d18fb0f7..de6360440ba 100644 --- a/src/app/legacy/components/MediaPlayer/Amp/index.jsx +++ b/src/app/components/MediaLoader/Amp/index.tsx @@ -1,7 +1,9 @@ -import React from 'react'; +/** @jsx jsx */ + +import { jsx } from '@emotion/react'; import { Helmet } from 'react-helmet'; -import ImagePlaceholder from '#psammead/psammead-image-placeholder/src'; import Message from '../Message'; +import styles from './index.styles'; const AmpHead = () => ( @@ -13,16 +15,23 @@ const AmpHead = () => ( ); -const AmpMediaPlayer = ({ +type Props = { + src?: string; + placeholderSrc?: string; + placeholderSrcset?: string; + title?: string; + noJsMessage?: string; +}; + +const AmpMediaLoader = ({ src, placeholderSrc, - placeholderSrcset = null, + placeholderSrcset, title, noJsMessage, - service, -}) => { +}: Props) => { return ( - <> +
- +
- +
); }; -export default AmpMediaPlayer; +export default AmpMediaLoader; diff --git a/src/app/legacy/components/MediaPlayer/Message/__snapshots__/index.test.jsx.snap b/src/app/components/MediaLoader/Message/__snapshots__/index.test.tsx.snap similarity index 66% rename from src/app/legacy/components/MediaPlayer/Message/__snapshots__/index.test.jsx.snap rename to src/app/components/MediaLoader/Message/__snapshots__/index.test.tsx.snap index 0f3177aa3c5..acd908a0bee 100644 --- a/src/app/legacy/components/MediaPlayer/Message/__snapshots__/index.test.jsx.snap +++ b/src/app/components/MediaLoader/Message/__snapshots__/index.test.tsx.snap @@ -2,17 +2,9 @@ exports[`Media Message matches media message snapshot 1`] = ` .emotion-0 { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; -} - -.emotion-2 { - font-family: Helmet,Freesans,Helvetica,Arial,sans-serif; - font-weight: 400; + font-family: ReithSans,Helvetica,Arial,sans-serif; font-style: normal; + font-weight: 400; font-size: 0.9375rem; line-height: 1.125rem; width: 100%; @@ -25,19 +17,27 @@ exports[`Media Message matches media message snapshot 1`] = ` background-color: rgba(34, 34, 34, 0.75); } +@media (min-width: 20rem) and (max-width: 37.4375rem) { + .emotion-0 { + font-size: 0.9375rem; + line-height: 1.125rem; + } +} + @media (min-width: 37.5rem) { - .emotion-2 { + .emotion-0 { font-size: 0.875rem; + line-height: 1.125rem; } } -@media screen and (-ms-high-contrast: active) { - .emotion-2 { +@media screen and (forced-colors: active) { + .emotion-0 { background-color: transparent; } } -.emotion-4 { +.emotion-1 { display: block; font-weight: normal; bottom: 0; @@ -45,27 +45,25 @@ exports[`Media Message matches media message snapshot 1`] = ` padding: 0.5rem; } -@media screen and (-ms-high-contrast: active) { - .emotion-4 { - background-color: window; +@media (min-width: 25rem) { + .emotion-1 { + padding: 1rem; } } -@media (min-width: 25rem) { - .emotion-4 { - padding: 1rem; +@media screen and (forced-colors: active) { + .emotion-1 { + background-color: window; } }
-
+
Контент більше не доступний diff --git a/src/app/components/MediaLoader/Message/index.styles.ts b/src/app/components/MediaLoader/Message/index.styles.ts new file mode 100644 index 00000000000..8754a88e41f --- /dev/null +++ b/src/app/components/MediaLoader/Message/index.styles.ts @@ -0,0 +1,44 @@ +import { css, Theme } from '@emotion/react'; + +const NOJS_BACKGROUND_COLOUR = 'rgba(34, 34, 34, 0.75)'; + +export default { + messageWrapper: ({ fontVariants, fontSizes, palette, mq }: Theme) => + css({ + ...fontVariants.sansRegular, + ...fontSizes.longPrimer, + width: '100%', + height: '100%', + position: 'absolute', + top: 0, + left: 0, + border: `0.0625rem solid transparent`, + color: palette.WHITE, + backgroundColor: NOJS_BACKGROUND_COLOUR, + + [mq.FORCED_COLOURS]: { + backgroundColor: 'transparent', + }, + }), + message: ({ spacings, mq }: Theme) => + css({ + display: 'block', + fontWeight: 'normal', + bottom: 0, + position: 'absolute', + padding: `${spacings.FULL}rem`, + [mq.GROUP_2_MIN_WIDTH]: { + padding: `${spacings.DOUBLE}rem`, + }, + [mq.FORCED_COLOURS]: { + backgroundColor: 'window', + }, + }), + messageImage: () => + css({ + position: 'absolute', + inset: 0, + width: '100%', + height: '100%', + }), +}; diff --git a/src/app/legacy/components/MediaPlayer/Message/index.test.jsx b/src/app/components/MediaLoader/Message/index.test.tsx similarity index 83% rename from src/app/legacy/components/MediaPlayer/Message/index.test.jsx rename to src/app/components/MediaLoader/Message/index.test.tsx index 5b3a7dd9a76..cfa3e5bc348 100644 --- a/src/app/legacy/components/MediaPlayer/Message/index.test.jsx +++ b/src/app/components/MediaLoader/Message/index.test.tsx @@ -1,12 +1,11 @@ import React from 'react'; -import { render } from '../../../../components/react-testing-library-with-providers'; +import { render } from '#app/components/react-testing-library-with-providers'; import Message from './index'; describe('Media Message', () => { it('should display the media message', () => { const { getByText } = render( { it('matches media message snapshot', () => { const { container } = render( - , + , ); expect(container).toMatchSnapshot(); }); diff --git a/src/app/components/MediaLoader/Message/index.tsx b/src/app/components/MediaLoader/Message/index.tsx new file mode 100644 index 00000000000..086998999da --- /dev/null +++ b/src/app/components/MediaLoader/Message/index.tsx @@ -0,0 +1,33 @@ +/** @jsx jsx */ + +import { jsx } from '@emotion/react'; +import styles from './index.styles'; + +type Props = { + message?: string; + placeholderSrc?: string; + placeholderSrcset?: string; +}; + +const Message = ({ + message = '', + placeholderSrc = '', + placeholderSrcset = '', +}: Props) => ( +
+ {placeholderSrc && ( + + )} +
+ {message} +
+
+); + +export default Message; diff --git a/src/app/legacy/components/MediaPlayer/Guidance/__snapshots__/index.test.jsx.snap b/src/app/components/MediaLoader/Placeholder/Guidance/__snapshots__/index.test.tsx.snap similarity index 59% rename from src/app/legacy/components/MediaPlayer/Guidance/__snapshots__/index.test.jsx.snap rename to src/app/components/MediaLoader/Placeholder/Guidance/__snapshots__/index.test.tsx.snap index b923a81bafb..ec16aec1b91 100644 --- a/src/app/legacy/components/MediaPlayer/Guidance/__snapshots__/index.test.jsx.snap +++ b/src/app/components/MediaLoader/Placeholder/Guidance/__snapshots__/index.test.tsx.snap @@ -2,11 +2,11 @@ exports[`Media Player: Guidance should render Guidance 1`] = ` .emotion-0 { - font-family: ReithSans,Helvetica,Arial,sans-serif; - font-weight: 400; - font-style: normal; font-size: 0.9375rem; line-height: 1.125rem; + font-family: ReithSans,Helvetica,Arial,sans-serif; + font-style: normal; + font-weight: 400; width: 100%; height: 100%; position: absolute; @@ -15,26 +15,69 @@ exports[`Media Player: Guidance should render Guidance 1`] = ` background-color: rgba(34, 34, 34, 0.75); } +@media (min-width: 20rem) and (max-width: 37.4375rem) { + .emotion-0 { + font-size: 0.9375rem; + line-height: 1.125rem; + } +} + @media (min-width: 37.5rem) { .emotion-0 { font-size: 0.875rem; + line-height: 1.125rem; } } -@media screen and (-ms-high-contrast: active) { +.no-js .emotion-0 { + background-color: rgba(34, 34, 34, 0.75); +} + +@media screen and (forced-colors: active) { + .no-js .emotion-0 { + background-color: transparent; + } +} + +.no-js .emotion-0 .guidance-message { + display: none; +} + +@media screen and (forced-colors: active) { .emotion-0 { background-color: transparent; } } +.emotion-1 { + display: block; + font-weight: normal; + padding: 0.5rem; + border-bottom: 0.0625rem solid transparent; +} + +@media screen and (forced-colors: active) { + .emotion-1 { + background-color: window; + } +} + +@media (min-width: 25rem) { + .emotion-1 { + padding: 1rem; + } +} + .emotion-2 { display: block; font-weight: normal; padding: 0.5rem; border-bottom: 0.0625rem solid transparent; + position: absolute; + bottom: 0; } -@media screen and (-ms-high-contrast: active) { +@media screen and (forced-colors: active) { .emotion-2 { background-color: window; } @@ -46,25 +89,23 @@ exports[`Media Player: Guidance should render Guidance 1`] = ` } } -.emotion-4 { - position: absolute; - bottom: 0; - display: none; +.emotion-2 strong { + font-weight: normal; }
@@ -72,11 +113,11 @@ exports[`Media Player: Guidance should render Guidance 1`] = ` exports[`Media Player: Guidance should render no-js styles when noJsClassName prop is used 1`] = ` .emotion-0 { - font-family: ReithSans,Helvetica,Arial,sans-serif; - font-weight: 400; - font-style: normal; font-size: 0.9375rem; line-height: 1.125rem; + font-family: ReithSans,Helvetica,Arial,sans-serif; + font-style: normal; + font-weight: 400; width: 100%; height: 100%; position: absolute; @@ -85,15 +126,17 @@ exports[`Media Player: Guidance should render no-js styles when noJsClassName pr background-color: rgba(34, 34, 34, 0.75); } -@media (min-width: 37.5rem) { +@media (min-width: 20rem) and (max-width: 37.4375rem) { .emotion-0 { - font-size: 0.875rem; + font-size: 0.9375rem; + line-height: 1.125rem; } } -@media screen and (-ms-high-contrast: active) { +@media (min-width: 37.5rem) { .emotion-0 { - background-color: transparent; + font-size: 0.875rem; + line-height: 1.125rem; } } @@ -101,7 +144,7 @@ exports[`Media Player: Guidance should render no-js styles when noJsClassName pr background-color: rgba(34, 34, 34, 0.75); } -@media screen and (-ms-high-contrast: active) { +@media screen and (forced-colors: active) { .no-js .emotion-0 { background-color: transparent; } @@ -111,14 +154,41 @@ exports[`Media Player: Guidance should render no-js styles when noJsClassName pr display: none; } +@media screen and (forced-colors: active) { + .emotion-0 { + background-color: transparent; + } +} + +.emotion-1 { + display: block; + font-weight: normal; + padding: 0.5rem; + border-bottom: 0.0625rem solid transparent; +} + +@media screen and (forced-colors: active) { + .emotion-1 { + background-color: window; + } +} + +@media (min-width: 25rem) { + .emotion-1 { + padding: 1rem; + } +} + .emotion-2 { display: block; font-weight: normal; padding: 0.5rem; border-bottom: 0.0625rem solid transparent; + position: absolute; + bottom: 0; } -@media screen and (-ms-high-contrast: active) { +@media screen and (forced-colors: active) { .emotion-2 { background-color: window; } @@ -130,24 +200,23 @@ exports[`Media Player: Guidance should render no-js styles when noJsClassName pr } } -.emotion-4 { - position: absolute; - bottom: 0; +.emotion-2 strong { + font-weight: normal; }
diff --git a/src/app/components/MediaLoader/Placeholder/Guidance/index.styles.ts b/src/app/components/MediaLoader/Placeholder/Guidance/index.styles.ts new file mode 100644 index 00000000000..c726abd1780 --- /dev/null +++ b/src/app/components/MediaLoader/Placeholder/Guidance/index.styles.ts @@ -0,0 +1,60 @@ +import { css, Theme } from '@emotion/react'; +import NO_JS_CLASSNAME from '#app/lib/noJs.const'; + +const GUIDANCE_BACKGROUND = 'rgba(34, 34, 34, 0.75)'; + +const styles = { + guidanceWrapper: ({ palette, fontSizes, fontVariants, mq }: Theme) => + css({ + ...fontSizes.longPrimer, + ...fontVariants.sansRegular, + width: '100%', + height: '100%', + position: 'absolute', + border: '0.0625rem solid transparent', + color: palette.WHITE, + + [`.${NO_JS_CLASSNAME} &`]: { + backgroundColor: GUIDANCE_BACKGROUND, + + [mq.FORCED_COLOURS]: { + backgroundColor: 'transparent', + }, + '.guidance-message': { + display: 'none', + }, + }, + }), + guidanceWrapperWithMessage: ({ mq }: Theme) => + css({ + backgroundColor: GUIDANCE_BACKGROUND, + + [mq.FORCED_COLOURS]: { + backgroundColor: 'transparent', + }, + }), + guidanceMessage: ({ spacings, mq }: Theme) => + css({ + display: 'block', + fontWeight: 'normal', + padding: `${spacings.FULL}rem`, + borderBottom: '0.0625rem solid transparent', + + [mq.FORCED_COLOURS]: { + backgroundColor: 'window', + }, + [mq.GROUP_2_MIN_WIDTH]: { + padding: `${spacings.DOUBLE}rem`, + }, + }), + noscript: () => + css({ + position: 'absolute', + bottom: 0, + + strong: { + fontWeight: 'normal', + }, + }), +}; +export default styles; diff --git a/src/app/legacy/components/MediaPlayer/Guidance/index.test.jsx b/src/app/components/MediaLoader/Placeholder/Guidance/index.test.tsx similarity index 82% rename from src/app/legacy/components/MediaPlayer/Guidance/index.test.jsx rename to src/app/components/MediaLoader/Placeholder/Guidance/index.test.tsx index 982d0c47901..249c63cd7b1 100644 --- a/src/app/legacy/components/MediaPlayer/Guidance/index.test.jsx +++ b/src/app/components/MediaLoader/Placeholder/Guidance/index.test.tsx @@ -1,13 +1,12 @@ import React from 'react'; +import { render } from '#app/components/react-testing-library-with-providers'; import Guidance from '.'; -import { render } from '../../../../components/react-testing-library-with-providers'; describe('Media Player: Guidance', () => { it('should render Guidance', () => { const { container } = render( , ); @@ -18,9 +17,7 @@ describe('Media Player: Guidance', () => { const { container } = render( , ); expect(container).toMatchSnapshot(); diff --git a/src/app/components/MediaLoader/Placeholder/Guidance/index.tsx b/src/app/components/MediaLoader/Placeholder/Guidance/index.tsx new file mode 100644 index 00000000000..4ff977548e6 --- /dev/null +++ b/src/app/components/MediaLoader/Placeholder/Guidance/index.tsx @@ -0,0 +1,40 @@ +/** @jsx jsx */ +import { jsx } from '@emotion/react'; + +import styles from './index.styles'; + +type Props = { + guidanceMessage?: string | null; + noJsMessage?: string; + className?: string; +}; + +const Guidance = ({ + guidanceMessage, + noJsMessage = '', + className = '', +}: Props) => ( +
+ {guidanceMessage && ( + + )} + +
+); + +export default Guidance; diff --git a/src/app/legacy/psammead/psammead-play-button/src/__snapshots__/index.test.jsx.snap b/src/app/components/MediaLoader/Placeholder/PlayButton/__snapshots__/index.test.tsx.snap similarity index 82% rename from src/app/legacy/psammead/psammead-play-button/src/__snapshots__/index.test.jsx.snap rename to src/app/components/MediaLoader/Placeholder/PlayButton/__snapshots__/index.test.tsx.snap index 4c89b709559..eb271cc6d8e 100644 --- a/src/app/legacy/psammead/psammead-play-button/src/__snapshots__/index.test.jsx.snap +++ b/src/app/components/MediaLoader/Placeholder/PlayButton/__snapshots__/index.test.tsx.snap @@ -2,21 +2,35 @@ exports[`PlayButton should render audio correctly without duration details 1`] = ` .emotion-0 { + font-size: 0.75rem; + line-height: 1rem; + font-family: ReithSans,Helvetica,Arial,sans-serif; + font-style: normal; + font-weight: 700; 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; + width: 5rem; padding: 0; -webkit-transition: background-color 300ms; transition: background-color 300ms; - width: 5rem; +} + +@media (min-width: 20rem) and (max-width: 37.4375rem) { + .emotion-0 { + font-size: 0.75rem; + line-height: 1rem; + } +} + +@media (min-width: 37.5rem) { + .emotion-0 { + font-size: 0.75rem; + line-height: 1rem; + } } .emotion-0:hover, @@ -26,7 +40,7 @@ exports[`PlayButton should render audio correctly without duration details 1`] = transition: background-color 300ms; } -.emotion-2 { +.emotion-1 { -webkit-clip-path: inset(100%); clip-path: inset(100%); clip: rect(1px, 1px, 1px, 1px); @@ -37,14 +51,14 @@ exports[`PlayButton should render audio correctly without duration details 1`] = margin: 0; } -.emotion-3>svg { +.emotion-2>svg { color: #FFFFFF; fill: currentColor; height: 1.5rem; width: 1.5rem; } -.emotion-5 { +.emotion-3 { vertical-align: middle; margin: 0 0.25rem; color: #222222; @@ -55,20 +69,21 @@ exports[`PlayButton should render audio correctly without duration details 1`] =
+ ); +}; + +export default PlayButton; diff --git a/src/app/components/MediaLoader/Placeholder/__snapshots__/index.test.tsx.snap b/src/app/components/MediaLoader/Placeholder/__snapshots__/index.test.tsx.snap index 870964a73ba..c98e17055cb 100644 --- a/src/app/components/MediaLoader/Placeholder/__snapshots__/index.test.tsx.snap +++ b/src/app/components/MediaLoader/Placeholder/__snapshots__/index.test.tsx.snap @@ -4,7 +4,7 @@ exports[`Media Player: Placeholder should render a video placeholder 1`] = ` .emotion-0 { position: relative; cursor: pointer; - aspect-ratio: 16/9; + height: 100%; } .no-js .emotion-0 { @@ -17,11 +17,11 @@ exports[`Media Player: Placeholder should render a video placeholder 1`] = ` } .emotion-1 { - font-family: ReithSans,Helvetica,Arial,sans-serif; - font-weight: 400; - font-style: normal; font-size: 0.9375rem; line-height: 1.125rem; + font-family: ReithSans,Helvetica,Arial,sans-serif; + font-style: normal; + font-weight: 400; width: 100%; height: 100%; position: absolute; @@ -30,9 +30,17 @@ exports[`Media Player: Placeholder should render a video placeholder 1`] = ` z-index: 1; } +@media (min-width: 20rem) and (max-width: 37.4375rem) { + .emotion-1 { + font-size: 0.9375rem; + line-height: 1.125rem; + } +} + @media (min-width: 37.5rem) { .emotion-1 { font-size: 0.875rem; + line-height: 1.125rem; } } @@ -40,7 +48,7 @@ exports[`Media Player: Placeholder should render a video placeholder 1`] = ` background-color: rgba(34, 34, 34, 0.75); } -@media screen and (-ms-high-contrast: active) { +@media screen and (forced-colors: active) { .no-js .emotion-1 { background-color: transparent; } @@ -50,45 +58,79 @@ exports[`Media Player: Placeholder should render a video placeholder 1`] = ` display: none; } -.emotion-3 { +.emotion-2 { + display: block; + font-weight: normal; + padding: 0.5rem; + border-bottom: 0.0625rem solid transparent; position: absolute; bottom: 0; } -.emotion-5 { +@media screen and (forced-colors: active) { + .emotion-2 { + background-color: window; + } +} + +@media (min-width: 25rem) { + .emotion-2 { + padding: 1rem; + } +} + +.emotion-2 strong { + font-weight: normal; +} + +.emotion-3 { + font-size: 0.75rem; + line-height: 1rem; + font-family: ReithSans,Helvetica,Arial,sans-serif; + font-style: normal; + font-weight: 700; 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; + width: 5rem; padding: 0; -webkit-transition: background-color 300ms; transition: background-color 300ms; - width: 5rem; position: absolute; bottom: 0; left: 0; z-index: 1; } -.emotion-5:hover, -.emotion-5:focus { +@media (min-width: 20rem) and (max-width: 37.4375rem) { + .emotion-3 { + font-size: 0.75rem; + line-height: 1rem; + } +} + +@media (min-width: 37.5rem) { + .emotion-3 { + font-size: 0.75rem; + line-height: 1rem; + } +} + +.emotion-3:hover, +.emotion-3:focus { background-color: #B80000; -webkit-transition: background-color 300ms; transition: background-color 300ms; } -.no-js .emotion-5 { +.no-js .emotion-3 { display: none; } -.emotion-5:focus-visible::before { +.emotion-3:focus-visible::before { content: ''; position: absolute; left: 0; @@ -99,7 +141,7 @@ exports[`Media Player: Placeholder should render a video placeholder 1`] = ` border: 0.1875rem solid #000000; } -.emotion-7 { +.emotion-4 { -webkit-clip-path: inset(100%); clip-path: inset(100%); clip: rect(1px, 1px, 1px, 1px); @@ -110,15 +152,18 @@ exports[`Media Player: Placeholder should render a video placeholder 1`] = ` margin: 0; } -.emotion-8>svg { +.emotion-5 { + margin-top: 0.5rem; +} + +.emotion-5>svg { color: #FFFFFF; fill: currentColor; height: 1.5rem; - margin-top: 0.5rem; width: 1.5rem; } -.emotion-10 { +.emotion-6 { vertical-align: middle; margin: 0 0.25rem; color: #222222; @@ -127,12 +172,12 @@ exports[`Media Player: Placeholder should render a video placeholder 1`] = ` height: 0.75rem; } -.emotion-12 { +.emotion-8 { display: block; margin-top: 0.5rem; } -.emotion-14 { +.emotion-9 { position: relative; height: 100%; background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSI0NzkiIGhlaWdodD0iMTM2IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PGcgZmlsbD0iI0Q1RDBDRCI+PGc+PHBhdGggZD0iTTQ0OS41NTYgOTEuNTUzbC0yLjMxIDEuNDFjLTExLjE2NyA2LjgxOC0yMy4zMTMgMTAuNDc0LTM0LjM0NiAxMC40Ny0yMy42MS0uMDktMzkuMTYzLTE0LjA4My0zOS4yMjctMzQuNDUzLjAzLTE5LjkxOCAxNi4yNy0zNC42NjMgMzguNjMzLTM0LjcxOCAxMS4zODcuMDEgMjEuNzAzIDIuOTU0IDMzLjk2MiA5LjY3MmwyLjI1MSAxLjI0di0xOC4xOWwtLjk2Mi0uMzc3Yy0xMy44MjQtNS40NTgtMjQuNTMtNy44OS0zNS4xMDMtNy44ODQtMTYuMzQ2LS4wMDYtMzAuNTMzIDUuMzk0LTQwLjYzNyAxNC41NTctMTAuMTA1IDkuMTYzLTE2LjEwNiAyMi4xMDItMTYuMDk5IDM2Ljk1My4wMDggMTAuMzQ4IDQuMjc5IDIyLjQ4IDEzLjQyIDMyLjEwNSA5LjEyMSA5LjYyOCAyMy4xNjUgMTYuNjQ4IDQyLjQzIDE2LjYzOWguMDYzYzE1Ljk4IDAgMjcuMDYyLTMuNTYzIDM3LjA3NC04LjQ5MmwuODUxLS40MTRWOTEuNTUzek0zMzQgMTM1LjY5N2gxNDQuMTk1VjBIMzM0djEzNS42OTd6Ii8+PHBhdGggZD0iTTI3Ni45MzcgODkuOTY4Yy4wNDEtMTIuMzMtOC4xNzEtMjEuNjk2LTIxLjMwOC0yNS4zIDMuNTQ0LTEuODA5IDYuMzUtNC4wMjMgOC40MDQtNi43MjcgMi43NS0zLjYyMiA0LjA2MS04LjA2NCA0LjA0Ni0xMy4yMzUuMDE1LTYuMzU5LTIuNDg2LTEyLjgzOS03Ljg1OC0xNy42ODctNS4zNzItNC44NDctMTMuNTI2LTcuOTk3LTI0LjY1NC03Ljk5MUgyMDQuODN2OTcuNzI4aDM2LjA3M2MxMi44NyAwIDIxLjkwNi0zLjQ4MiAyNy43MjItOC42NSA1LjgxOC01LjE1NSA4LjMyLTExLjkxIDguMzEyLTE4LjEzOHpNMTY3IDEzNS42OThoMTQ0LjE5N1YwSDE2N3YxMzUuNjk3eiIvPjxwYXRoIGQ9Ik0xMDkuOTM3IDg5Ljk2OGMuMDQxLTEyLjMzLTguMTcxLTIxLjY5Ni0yMS4zMDgtMjUuMyAzLjU0NC0xLjgwOSA2LjM1LTQuMDIzIDguNDA0LTYuNzI3IDIuNzUtMy42MjIgNC4wNjEtOC4wNjQgNC4wNDYtMTMuMjM1LjAxNS02LjM1OS0yLjQ4Ni0xMi44MzktNy44NTgtMTcuNjg3LTUuMzcyLTQuODQ3LTEzLjUyNi03Ljk5Ny0yNC42NTQtNy45OTFIMzcuODN2OTcuNzI4aDM2LjA3M2MxMi44NyAwIDIxLjkwNi0zLjQ4MiAyNy43MjItOC42NSA1LjgxOC01LjE1NSA4LjMyLTExLjkxIDguMzEyLTE4LjEzOHpNMCAxMzUuNjk4aDE0NC4xOTdWMEgwdjEzNS42OTd6Ii8+PHBhdGggZD0iTTI1OC42NjIgODguMTk4Yy0uMDEzIDMuMjI5LTEuMDA3IDYuNDc1LTMuODk2IDkuMDExLTIuODg0IDIuNTM3LTcuODczIDQuNDYzLTE2LjEzMyA0LjQ2M0gyMjJWNzVoMTUuODkzYzcuNDExIDAgMTIuNjcgMS41MDIgMTUuOTY1IDMuODUgMy4yODkgMi4zNjIgNC43NzYgNS40NjMgNC44MDQgOS4zNDgiLz48cGF0aCBkPSJNOTEuNjYyIDg4LjE5OGMtLjAxMyAzLjIyOS0xLjAwNyA2LjQ3NS0zLjg5NiA5LjAxMS0yLjg4NCAyLjUzNy03Ljg3NCA0LjQ2My0xNi4xMzMgNC40NjNINTVWNzVoMTUuODkyYzcuNDEyIDAgMTIuNjcyIDEuNTAyIDE1Ljk2NiAzLjg1IDMuMjg5IDIuMzYyIDQuNzc2IDUuNDYzIDQuODA0IDkuMzQ4Ii8+PHBhdGggZD0iTTI0NS4xODYgNTUuNzljMy4wOTYtMi4yMzcgNC41OS01LjM4NiA0LjYxMy0xMC4xMjQtLjAxNS0zLjI1LS45NDMtNi4wMzMtMy4yODEtOC4xMTEtMi4zNDYtMi4wNzgtNi4zMy0zLjU1NS0xMi43NTQtMy41NTVIMjIydjI1LjI3NWg4LjA3NmM2Ljk4OC4wMDQgMTEuOTk4LTEuMjQzIDE1LjExLTMuNDg2Ii8+PHBhdGggZD0iTTc4LjE4NiA1NS43OWMzLjA5Ni0yLjIzNyA0LjU5LTUuMzg2IDQuNjEzLTEwLjEyNC0uMDE1LTMuMjUtLjk0My02LjAzMy0zLjI4Mi04LjExMUM3Ny4xNzIgMzUuNDc3IDczLjE4OCAzNCA2Ni43NjQgMzRINTV2MjUuMjc1aDguMDc2YzYuOTg4LjAwNCAxMS45OTgtMS4yNDMgMTUuMTEtMy40ODYiLz48L2c+PC9nPjwvZz48L3N2Zz4K); @@ -145,20 +190,20 @@ exports[`Media Player: Placeholder should render a video placeholder 1`] = ` } @media (min-width: 25rem) { - .emotion-14 { + .emotion-9 { -webkit-background-size: 77px 22px; background-size: 77px 22px; } } @media (min-width: 63rem) { - .emotion-14 { + .emotion-9 { -webkit-background-size: 93px 27px; background-size: 93px 27px; } } -.emotion-15 { +.emotion-10 { width: 100%; object-fit: cover; height: 100%; @@ -170,28 +215,29 @@ exports[`Media Player: Placeholder should render a video placeholder 1`] = ` data-e2e="media-loader__placeholder" >
@@ -238,7 +284,7 @@ exports[`Media Player: Placeholder should render a video placeholder with guidan .emotion-0 { position: relative; cursor: pointer; - aspect-ratio: 16/9; + height: 100%; } .no-js .emotion-0 { @@ -251,11 +297,11 @@ exports[`Media Player: Placeholder should render a video placeholder with guidan } .emotion-1 { - font-family: ReithSans,Helvetica,Arial,sans-serif; - font-weight: 400; - font-style: normal; font-size: 0.9375rem; line-height: 1.125rem; + font-family: ReithSans,Helvetica,Arial,sans-serif; + font-style: normal; + font-weight: 400; width: 100%; height: 100%; position: absolute; @@ -265,15 +311,17 @@ exports[`Media Player: Placeholder should render a video placeholder with guidan z-index: 1; } -@media (min-width: 37.5rem) { +@media (min-width: 20rem) and (max-width: 37.4375rem) { .emotion-1 { - font-size: 0.875rem; + font-size: 0.9375rem; + line-height: 1.125rem; } } -@media screen and (-ms-high-contrast: active) { +@media (min-width: 37.5rem) { .emotion-1 { - background-color: transparent; + font-size: 0.875rem; + line-height: 1.125rem; } } @@ -281,7 +329,7 @@ exports[`Media Player: Placeholder should render a video placeholder with guidan background-color: rgba(34, 34, 34, 0.75); } -@media screen and (-ms-high-contrast: active) { +@media screen and (forced-colors: active) { .no-js .emotion-1 { background-color: transparent; } @@ -291,14 +339,41 @@ exports[`Media Player: Placeholder should render a video placeholder with guidan display: none; } +@media screen and (forced-colors: active) { + .emotion-1 { + background-color: transparent; + } +} + +.emotion-2 { + display: block; + font-weight: normal; + padding: 0.5rem; + border-bottom: 0.0625rem solid transparent; +} + +@media screen and (forced-colors: active) { + .emotion-2 { + background-color: window; + } +} + +@media (min-width: 25rem) { + .emotion-2 { + padding: 1rem; + } +} + .emotion-3 { display: block; font-weight: normal; padding: 0.5rem; border-bottom: 0.0625rem solid transparent; + position: absolute; + bottom: 0; } -@media screen and (-ms-high-contrast: active) { +@media screen and (forced-colors: active) { .emotion-3 { background-color: window; } @@ -310,45 +385,58 @@ exports[`Media Player: Placeholder should render a video placeholder with guidan } } -.emotion-5 { - position: absolute; - bottom: 0; +.emotion-3 strong { + font-weight: normal; } -.emotion-7 { +.emotion-4 { + font-size: 0.75rem; + line-height: 1rem; + font-family: ReithSans,Helvetica,Arial,sans-serif; + font-style: normal; + font-weight: 700; 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; + width: 5rem; padding: 0; -webkit-transition: background-color 300ms; transition: background-color 300ms; - width: 5rem; position: absolute; bottom: 0; left: 0; z-index: 1; } -.emotion-7:hover, -.emotion-7:focus { +@media (min-width: 20rem) and (max-width: 37.4375rem) { + .emotion-4 { + font-size: 0.75rem; + line-height: 1rem; + } +} + +@media (min-width: 37.5rem) { + .emotion-4 { + font-size: 0.75rem; + line-height: 1rem; + } +} + +.emotion-4:hover, +.emotion-4:focus { background-color: #B80000; -webkit-transition: background-color 300ms; transition: background-color 300ms; } -.no-js .emotion-7 { +.no-js .emotion-4 { display: none; } -.emotion-7:focus-visible::before { +.emotion-4:focus-visible::before { content: ''; position: absolute; left: 0; @@ -359,7 +447,7 @@ exports[`Media Player: Placeholder should render a video placeholder with guidan border: 0.1875rem solid #000000; } -.emotion-9 { +.emotion-5 { -webkit-clip-path: inset(100%); clip-path: inset(100%); clip: rect(1px, 1px, 1px, 1px); @@ -370,15 +458,18 @@ exports[`Media Player: Placeholder should render a video placeholder with guidan margin: 0; } -.emotion-10>svg { +.emotion-6 { + margin-top: 0.5rem; +} + +.emotion-6>svg { color: #FFFFFF; fill: currentColor; height: 1.5rem; - margin-top: 0.5rem; width: 1.5rem; } -.emotion-12 { +.emotion-7 { vertical-align: middle; margin: 0 0.25rem; color: #222222; @@ -387,12 +478,12 @@ exports[`Media Player: Placeholder should render a video placeholder with guidan height: 0.75rem; } -.emotion-14 { +.emotion-9 { display: block; margin-top: 0.5rem; } -.emotion-16 { +.emotion-10 { position: relative; height: 100%; background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSI0NzkiIGhlaWdodD0iMTM2IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PGcgZmlsbD0iI0Q1RDBDRCI+PGc+PHBhdGggZD0iTTQ0OS41NTYgOTEuNTUzbC0yLjMxIDEuNDFjLTExLjE2NyA2LjgxOC0yMy4zMTMgMTAuNDc0LTM0LjM0NiAxMC40Ny0yMy42MS0uMDktMzkuMTYzLTE0LjA4My0zOS4yMjctMzQuNDUzLjAzLTE5LjkxOCAxNi4yNy0zNC42NjMgMzguNjMzLTM0LjcxOCAxMS4zODcuMDEgMjEuNzAzIDIuOTU0IDMzLjk2MiA5LjY3MmwyLjI1MSAxLjI0di0xOC4xOWwtLjk2Mi0uMzc3Yy0xMy44MjQtNS40NTgtMjQuNTMtNy44OS0zNS4xMDMtNy44ODQtMTYuMzQ2LS4wMDYtMzAuNTMzIDUuMzk0LTQwLjYzNyAxNC41NTctMTAuMTA1IDkuMTYzLTE2LjEwNiAyMi4xMDItMTYuMDk5IDM2Ljk1My4wMDggMTAuMzQ4IDQuMjc5IDIyLjQ4IDEzLjQyIDMyLjEwNSA5LjEyMSA5LjYyOCAyMy4xNjUgMTYuNjQ4IDQyLjQzIDE2LjYzOWguMDYzYzE1Ljk4IDAgMjcuMDYyLTMuNTYzIDM3LjA3NC04LjQ5MmwuODUxLS40MTRWOTEuNTUzek0zMzQgMTM1LjY5N2gxNDQuMTk1VjBIMzM0djEzNS42OTd6Ii8+PHBhdGggZD0iTTI3Ni45MzcgODkuOTY4Yy4wNDEtMTIuMzMtOC4xNzEtMjEuNjk2LTIxLjMwOC0yNS4zIDMuNTQ0LTEuODA5IDYuMzUtNC4wMjMgOC40MDQtNi43MjcgMi43NS0zLjYyMiA0LjA2MS04LjA2NCA0LjA0Ni0xMy4yMzUuMDE1LTYuMzU5LTIuNDg2LTEyLjgzOS03Ljg1OC0xNy42ODctNS4zNzItNC44NDctMTMuNTI2LTcuOTk3LTI0LjY1NC03Ljk5MUgyMDQuODN2OTcuNzI4aDM2LjA3M2MxMi44NyAwIDIxLjkwNi0zLjQ4MiAyNy43MjItOC42NSA1LjgxOC01LjE1NSA4LjMyLTExLjkxIDguMzEyLTE4LjEzOHpNMTY3IDEzNS42OThoMTQ0LjE5N1YwSDE2N3YxMzUuNjk3eiIvPjxwYXRoIGQ9Ik0xMDkuOTM3IDg5Ljk2OGMuMDQxLTEyLjMzLTguMTcxLTIxLjY5Ni0yMS4zMDgtMjUuMyAzLjU0NC0xLjgwOSA2LjM1LTQuMDIzIDguNDA0LTYuNzI3IDIuNzUtMy42MjIgNC4wNjEtOC4wNjQgNC4wNDYtMTMuMjM1LjAxNS02LjM1OS0yLjQ4Ni0xMi44MzktNy44NTgtMTcuNjg3LTUuMzcyLTQuODQ3LTEzLjUyNi03Ljk5Ny0yNC42NTQtNy45OTFIMzcuODN2OTcuNzI4aDM2LjA3M2MxMi44NyAwIDIxLjkwNi0zLjQ4MiAyNy43MjItOC42NSA1LjgxOC01LjE1NSA4LjMyLTExLjkxIDguMzEyLTE4LjEzOHpNMCAxMzUuNjk4aDE0NC4xOTdWMEgwdjEzNS42OTd6Ii8+PHBhdGggZD0iTTI1OC42NjIgODguMTk4Yy0uMDEzIDMuMjI5LTEuMDA3IDYuNDc1LTMuODk2IDkuMDExLTIuODg0IDIuNTM3LTcuODczIDQuNDYzLTE2LjEzMyA0LjQ2M0gyMjJWNzVoMTUuODkzYzcuNDExIDAgMTIuNjcgMS41MDIgMTUuOTY1IDMuODUgMy4yODkgMi4zNjIgNC43NzYgNS40NjMgNC44MDQgOS4zNDgiLz48cGF0aCBkPSJNOTEuNjYyIDg4LjE5OGMtLjAxMyAzLjIyOS0xLjAwNyA2LjQ3NS0zLjg5NiA5LjAxMS0yLjg4NCAyLjUzNy03Ljg3NCA0LjQ2My0xNi4xMzMgNC40NjNINTVWNzVoMTUuODkyYzcuNDEyIDAgMTIuNjcyIDEuNTAyIDE1Ljk2NiAzLjg1IDMuMjg5IDIuMzYyIDQuNzc2IDUuNDYzIDQuODA0IDkuMzQ4Ii8+PHBhdGggZD0iTTI0NS4xODYgNTUuNzljMy4wOTYtMi4yMzcgNC41OS01LjM4NiA0LjYxMy0xMC4xMjQtLjAxNS0zLjI1LS45NDMtNi4wMzMtMy4yODEtOC4xMTEtMi4zNDYtMi4wNzgtNi4zMy0zLjU1NS0xMi43NTQtMy41NTVIMjIydjI1LjI3NWg4LjA3NmM2Ljk4OC4wMDQgMTEuOTk4LTEuMjQzIDE1LjExLTMuNDg2Ii8+PHBhdGggZD0iTTc4LjE4NiA1NS43OWMzLjA5Ni0yLjIzNyA0LjU5LTUuMzg2IDQuNjEzLTEwLjEyNC0uMDE1LTMuMjUtLjk0My02LjAzMy0zLjI4Mi04LjExMUM3Ny4xNzIgMzUuNDc3IDczLjE4OCAzNCA2Ni43NjQgMzRINTV2MjUuMjc1aDguMDc2YzYuOTg4LjAwNCAxMS45OTgtMS4yNDMgMTUuMTEtMy40ODYiLz48L2c+PC9nPjwvZz48L3N2Zz4K); @@ -405,20 +496,20 @@ exports[`Media Player: Placeholder should render a video placeholder with guidan } @media (min-width: 25rem) { - .emotion-16 { + .emotion-10 { -webkit-background-size: 77px 22px; background-size: 77px 22px; } } @media (min-width: 63rem) { - .emotion-16 { + .emotion-10 { -webkit-background-size: 93px 27px; background-size: 93px 27px; } } -.emotion-17 { +.emotion-11 { width: 100%; object-fit: cover; height: 100%; @@ -430,34 +521,35 @@ exports[`Media Player: Placeholder should render a video placeholder with guidan data-e2e="media-loader__placeholder" >
@@ -504,7 +596,7 @@ exports[`Media Player: Placeholder should render a video placeholder without dur .emotion-0 { position: relative; cursor: pointer; - aspect-ratio: 16/9; + height: 100%; } .no-js .emotion-0 { @@ -517,11 +609,11 @@ exports[`Media Player: Placeholder should render a video placeholder without dur } .emotion-1 { - font-family: ReithSans,Helvetica,Arial,sans-serif; - font-weight: 400; - font-style: normal; font-size: 0.9375rem; line-height: 1.125rem; + font-family: ReithSans,Helvetica,Arial,sans-serif; + font-style: normal; + font-weight: 400; width: 100%; height: 100%; position: absolute; @@ -530,9 +622,17 @@ exports[`Media Player: Placeholder should render a video placeholder without dur z-index: 1; } +@media (min-width: 20rem) and (max-width: 37.4375rem) { + .emotion-1 { + font-size: 0.9375rem; + line-height: 1.125rem; + } +} + @media (min-width: 37.5rem) { .emotion-1 { font-size: 0.875rem; + line-height: 1.125rem; } } @@ -540,7 +640,7 @@ exports[`Media Player: Placeholder should render a video placeholder without dur background-color: rgba(34, 34, 34, 0.75); } -@media screen and (-ms-high-contrast: active) { +@media screen and (forced-colors: active) { .no-js .emotion-1 { background-color: transparent; } @@ -550,45 +650,79 @@ exports[`Media Player: Placeholder should render a video placeholder without dur display: none; } -.emotion-3 { +.emotion-2 { + display: block; + font-weight: normal; + padding: 0.5rem; + border-bottom: 0.0625rem solid transparent; position: absolute; bottom: 0; } -.emotion-5 { +@media screen and (forced-colors: active) { + .emotion-2 { + background-color: window; + } +} + +@media (min-width: 25rem) { + .emotion-2 { + padding: 1rem; + } +} + +.emotion-2 strong { + font-weight: normal; +} + +.emotion-3 { + font-size: 0.75rem; + line-height: 1rem; + font-family: ReithSans,Helvetica,Arial,sans-serif; + font-style: normal; + font-weight: 700; 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; + width: 5rem; padding: 0; -webkit-transition: background-color 300ms; transition: background-color 300ms; - width: 5rem; position: absolute; bottom: 0; left: 0; z-index: 1; } -.emotion-5:hover, -.emotion-5:focus { +@media (min-width: 20rem) and (max-width: 37.4375rem) { + .emotion-3 { + font-size: 0.75rem; + line-height: 1rem; + } +} + +@media (min-width: 37.5rem) { + .emotion-3 { + font-size: 0.75rem; + line-height: 1rem; + } +} + +.emotion-3:hover, +.emotion-3:focus { background-color: #B80000; -webkit-transition: background-color 300ms; transition: background-color 300ms; } -.no-js .emotion-5 { +.no-js .emotion-3 { display: none; } -.emotion-5:focus-visible::before { +.emotion-3:focus-visible::before { content: ''; position: absolute; left: 0; @@ -599,7 +733,7 @@ exports[`Media Player: Placeholder should render a video placeholder without dur border: 0.1875rem solid #000000; } -.emotion-7 { +.emotion-4 { -webkit-clip-path: inset(100%); clip-path: inset(100%); clip: rect(1px, 1px, 1px, 1px); @@ -610,14 +744,14 @@ exports[`Media Player: Placeholder should render a video placeholder without dur margin: 0; } -.emotion-8>svg { +.emotion-5>svg { color: #FFFFFF; fill: currentColor; height: 1.5rem; width: 1.5rem; } -.emotion-10 { +.emotion-6 { vertical-align: middle; margin: 0 0.25rem; color: #222222; @@ -626,7 +760,7 @@ exports[`Media Player: Placeholder should render a video placeholder without dur height: 0.75rem; } -.emotion-12 { +.emotion-8 { position: relative; height: 100%; background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSI0NzkiIGhlaWdodD0iMTM2IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PGcgZmlsbD0iI0Q1RDBDRCI+PGc+PHBhdGggZD0iTTQ0OS41NTYgOTEuNTUzbC0yLjMxIDEuNDFjLTExLjE2NyA2LjgxOC0yMy4zMTMgMTAuNDc0LTM0LjM0NiAxMC40Ny0yMy42MS0uMDktMzkuMTYzLTE0LjA4My0zOS4yMjctMzQuNDUzLjAzLTE5LjkxOCAxNi4yNy0zNC42NjMgMzguNjMzLTM0LjcxOCAxMS4zODcuMDEgMjEuNzAzIDIuOTU0IDMzLjk2MiA5LjY3MmwyLjI1MSAxLjI0di0xOC4xOWwtLjk2Mi0uMzc3Yy0xMy44MjQtNS40NTgtMjQuNTMtNy44OS0zNS4xMDMtNy44ODQtMTYuMzQ2LS4wMDYtMzAuNTMzIDUuMzk0LTQwLjYzNyAxNC41NTctMTAuMTA1IDkuMTYzLTE2LjEwNiAyMi4xMDItMTYuMDk5IDM2Ljk1My4wMDggMTAuMzQ4IDQuMjc5IDIyLjQ4IDEzLjQyIDMyLjEwNSA5LjEyMSA5LjYyOCAyMy4xNjUgMTYuNjQ4IDQyLjQzIDE2LjYzOWguMDYzYzE1Ljk4IDAgMjcuMDYyLTMuNTYzIDM3LjA3NC04LjQ5MmwuODUxLS40MTRWOTEuNTUzek0zMzQgMTM1LjY5N2gxNDQuMTk1VjBIMzM0djEzNS42OTd6Ii8+PHBhdGggZD0iTTI3Ni45MzcgODkuOTY4Yy4wNDEtMTIuMzMtOC4xNzEtMjEuNjk2LTIxLjMwOC0yNS4zIDMuNTQ0LTEuODA5IDYuMzUtNC4wMjMgOC40MDQtNi43MjcgMi43NS0zLjYyMiA0LjA2MS04LjA2NCA0LjA0Ni0xMy4yMzUuMDE1LTYuMzU5LTIuNDg2LTEyLjgzOS03Ljg1OC0xNy42ODctNS4zNzItNC44NDctMTMuNTI2LTcuOTk3LTI0LjY1NC03Ljk5MUgyMDQuODN2OTcuNzI4aDM2LjA3M2MxMi44NyAwIDIxLjkwNi0zLjQ4MiAyNy43MjItOC42NSA1LjgxOC01LjE1NSA4LjMyLTExLjkxIDguMzEyLTE4LjEzOHpNMTY3IDEzNS42OThoMTQ0LjE5N1YwSDE2N3YxMzUuNjk3eiIvPjxwYXRoIGQ9Ik0xMDkuOTM3IDg5Ljk2OGMuMDQxLTEyLjMzLTguMTcxLTIxLjY5Ni0yMS4zMDgtMjUuMyAzLjU0NC0xLjgwOSA2LjM1LTQuMDIzIDguNDA0LTYuNzI3IDIuNzUtMy42MjIgNC4wNjEtOC4wNjQgNC4wNDYtMTMuMjM1LjAxNS02LjM1OS0yLjQ4Ni0xMi44MzktNy44NTgtMTcuNjg3LTUuMzcyLTQuODQ3LTEzLjUyNi03Ljk5Ny0yNC42NTQtNy45OTFIMzcuODN2OTcuNzI4aDM2LjA3M2MxMi44NyAwIDIxLjkwNi0zLjQ4MiAyNy43MjItOC42NSA1LjgxOC01LjE1NSA4LjMyLTExLjkxIDguMzEyLTE4LjEzOHpNMCAxMzUuNjk4aDE0NC4xOTdWMEgwdjEzNS42OTd6Ii8+PHBhdGggZD0iTTI1OC42NjIgODguMTk4Yy0uMDEzIDMuMjI5LTEuMDA3IDYuNDc1LTMuODk2IDkuMDExLTIuODg0IDIuNTM3LTcuODczIDQuNDYzLTE2LjEzMyA0LjQ2M0gyMjJWNzVoMTUuODkzYzcuNDExIDAgMTIuNjcgMS41MDIgMTUuOTY1IDMuODUgMy4yODkgMi4zNjIgNC43NzYgNS40NjMgNC44MDQgOS4zNDgiLz48cGF0aCBkPSJNOTEuNjYyIDg4LjE5OGMtLjAxMyAzLjIyOS0xLjAwNyA2LjQ3NS0zLjg5NiA5LjAxMS0yLjg4NCAyLjUzNy03Ljg3NCA0LjQ2My0xNi4xMzMgNC40NjNINTVWNzVoMTUuODkyYzcuNDEyIDAgMTIuNjcyIDEuNTAyIDE1Ljk2NiAzLjg1IDMuMjg5IDIuMzYyIDQuNzc2IDUuNDYzIDQuODA0IDkuMzQ4Ii8+PHBhdGggZD0iTTI0NS4xODYgNTUuNzljMy4wOTYtMi4yMzcgNC41OS01LjM4NiA0LjYxMy0xMC4xMjQtLjAxNS0zLjI1LS45NDMtNi4wMzMtMy4yODEtOC4xMTEtMi4zNDYtMi4wNzgtNi4zMy0zLjU1NS0xMi43NTQtMy41NTVIMjIydjI1LjI3NWg4LjA3NmM2Ljk4OC4wMDQgMTEuOTk4LTEuMjQzIDE1LjExLTMuNDg2Ii8+PHBhdGggZD0iTTc4LjE4NiA1NS43OWMzLjA5Ni0yLjIzNyA0LjU5LTUuMzg2IDQuNjEzLTEwLjEyNC0uMDE1LTMuMjUtLjk0My02LjAzMy0zLjI4Mi04LjExMUM3Ny4xNzIgMzUuNDc3IDczLjE4OCAzNCA2Ni43NjQgMzRINTV2MjUuMjc1aDguMDc2YzYuOTg4LjAwNCAxMS45OTgtMS4yNDMgMTUuMTEtMy40ODYiLz48L2c+PC9nPjwvZz48L3N2Zz4K); @@ -639,20 +773,20 @@ exports[`Media Player: Placeholder should render a video placeholder without dur } @media (min-width: 25rem) { - .emotion-12 { + .emotion-8 { -webkit-background-size: 77px 22px; background-size: 77px 22px; } } @media (min-width: 63rem) { - .emotion-12 { + .emotion-8 { -webkit-background-size: 93px 27px; background-size: 93px 27px; } } -.emotion-13 { +.emotion-9 { width: 100%; object-fit: cover; height: 100%; @@ -664,28 +798,29 @@ exports[`Media Player: Placeholder should render a video placeholder without dur data-e2e="media-loader__placeholder" >
@@ -725,7 +860,7 @@ exports[`Media Player: Placeholder should render an audio placeholder 1`] = ` .emotion-0 { position: relative; cursor: pointer; - aspect-ratio: 16/9; + height: 100%; } .no-js .emotion-0 { @@ -738,11 +873,11 @@ exports[`Media Player: Placeholder should render an audio placeholder 1`] = ` } .emotion-1 { - font-family: ReithSans,Helvetica,Arial,sans-serif; - font-weight: 400; - font-style: normal; font-size: 0.9375rem; line-height: 1.125rem; + font-family: ReithSans,Helvetica,Arial,sans-serif; + font-style: normal; + font-weight: 400; width: 100%; height: 100%; position: absolute; @@ -751,9 +886,17 @@ exports[`Media Player: Placeholder should render an audio placeholder 1`] = ` z-index: 1; } +@media (min-width: 20rem) and (max-width: 37.4375rem) { + .emotion-1 { + font-size: 0.9375rem; + line-height: 1.125rem; + } +} + @media (min-width: 37.5rem) { .emotion-1 { font-size: 0.875rem; + line-height: 1.125rem; } } @@ -761,7 +904,7 @@ exports[`Media Player: Placeholder should render an audio placeholder 1`] = ` background-color: rgba(34, 34, 34, 0.75); } -@media screen and (-ms-high-contrast: active) { +@media screen and (forced-colors: active) { .no-js .emotion-1 { background-color: transparent; } @@ -771,45 +914,79 @@ exports[`Media Player: Placeholder should render an audio placeholder 1`] = ` display: none; } -.emotion-3 { +.emotion-2 { + display: block; + font-weight: normal; + padding: 0.5rem; + border-bottom: 0.0625rem solid transparent; position: absolute; bottom: 0; } -.emotion-5 { +@media screen and (forced-colors: active) { + .emotion-2 { + background-color: window; + } +} + +@media (min-width: 25rem) { + .emotion-2 { + padding: 1rem; + } +} + +.emotion-2 strong { + font-weight: normal; +} + +.emotion-3 { + font-size: 0.75rem; + line-height: 1rem; + font-family: ReithSans,Helvetica,Arial,sans-serif; + font-style: normal; + font-weight: 700; 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; + width: 5rem; padding: 0; -webkit-transition: background-color 300ms; transition: background-color 300ms; - width: 5rem; position: absolute; bottom: 0; left: 0; z-index: 1; } -.emotion-5:hover, -.emotion-5:focus { +@media (min-width: 20rem) and (max-width: 37.4375rem) { + .emotion-3 { + font-size: 0.75rem; + line-height: 1rem; + } +} + +@media (min-width: 37.5rem) { + .emotion-3 { + font-size: 0.75rem; + line-height: 1rem; + } +} + +.emotion-3:hover, +.emotion-3:focus { background-color: #B80000; -webkit-transition: background-color 300ms; transition: background-color 300ms; } -.no-js .emotion-5 { +.no-js .emotion-3 { display: none; } -.emotion-5:focus-visible::before { +.emotion-3:focus-visible::before { content: ''; position: absolute; left: 0; @@ -820,7 +997,7 @@ exports[`Media Player: Placeholder should render an audio placeholder 1`] = ` border: 0.1875rem solid #000000; } -.emotion-7 { +.emotion-4 { -webkit-clip-path: inset(100%); clip-path: inset(100%); clip: rect(1px, 1px, 1px, 1px); @@ -831,15 +1008,18 @@ exports[`Media Player: Placeholder should render an audio placeholder 1`] = ` margin: 0; } -.emotion-8>svg { +.emotion-5 { + margin-top: 0.5rem; +} + +.emotion-5>svg { color: #FFFFFF; fill: currentColor; height: 1.5rem; - margin-top: 0.5rem; width: 1.5rem; } -.emotion-10 { +.emotion-6 { vertical-align: middle; margin: 0 0.25rem; color: #222222; @@ -848,12 +1028,12 @@ exports[`Media Player: Placeholder should render an audio placeholder 1`] = ` height: 0.75rem; } -.emotion-12 { +.emotion-8 { display: block; margin-top: 0.5rem; } -.emotion-14 { +.emotion-9 { position: relative; height: 100%; background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSI0NzkiIGhlaWdodD0iMTM2IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PGcgZmlsbD0iI0Q1RDBDRCI+PGc+PHBhdGggZD0iTTQ0OS41NTYgOTEuNTUzbC0yLjMxIDEuNDFjLTExLjE2NyA2LjgxOC0yMy4zMTMgMTAuNDc0LTM0LjM0NiAxMC40Ny0yMy42MS0uMDktMzkuMTYzLTE0LjA4My0zOS4yMjctMzQuNDUzLjAzLTE5LjkxOCAxNi4yNy0zNC42NjMgMzguNjMzLTM0LjcxOCAxMS4zODcuMDEgMjEuNzAzIDIuOTU0IDMzLjk2MiA5LjY3MmwyLjI1MSAxLjI0di0xOC4xOWwtLjk2Mi0uMzc3Yy0xMy44MjQtNS40NTgtMjQuNTMtNy44OS0zNS4xMDMtNy44ODQtMTYuMzQ2LS4wMDYtMzAuNTMzIDUuMzk0LTQwLjYzNyAxNC41NTctMTAuMTA1IDkuMTYzLTE2LjEwNiAyMi4xMDItMTYuMDk5IDM2Ljk1My4wMDggMTAuMzQ4IDQuMjc5IDIyLjQ4IDEzLjQyIDMyLjEwNSA5LjEyMSA5LjYyOCAyMy4xNjUgMTYuNjQ4IDQyLjQzIDE2LjYzOWguMDYzYzE1Ljk4IDAgMjcuMDYyLTMuNTYzIDM3LjA3NC04LjQ5MmwuODUxLS40MTRWOTEuNTUzek0zMzQgMTM1LjY5N2gxNDQuMTk1VjBIMzM0djEzNS42OTd6Ii8+PHBhdGggZD0iTTI3Ni45MzcgODkuOTY4Yy4wNDEtMTIuMzMtOC4xNzEtMjEuNjk2LTIxLjMwOC0yNS4zIDMuNTQ0LTEuODA5IDYuMzUtNC4wMjMgOC40MDQtNi43MjcgMi43NS0zLjYyMiA0LjA2MS04LjA2NCA0LjA0Ni0xMy4yMzUuMDE1LTYuMzU5LTIuNDg2LTEyLjgzOS03Ljg1OC0xNy42ODctNS4zNzItNC44NDctMTMuNTI2LTcuOTk3LTI0LjY1NC03Ljk5MUgyMDQuODN2OTcuNzI4aDM2LjA3M2MxMi44NyAwIDIxLjkwNi0zLjQ4MiAyNy43MjItOC42NSA1LjgxOC01LjE1NSA4LjMyLTExLjkxIDguMzEyLTE4LjEzOHpNMTY3IDEzNS42OThoMTQ0LjE5N1YwSDE2N3YxMzUuNjk3eiIvPjxwYXRoIGQ9Ik0xMDkuOTM3IDg5Ljk2OGMuMDQxLTEyLjMzLTguMTcxLTIxLjY5Ni0yMS4zMDgtMjUuMyAzLjU0NC0xLjgwOSA2LjM1LTQuMDIzIDguNDA0LTYuNzI3IDIuNzUtMy42MjIgNC4wNjEtOC4wNjQgNC4wNDYtMTMuMjM1LjAxNS02LjM1OS0yLjQ4Ni0xMi44MzktNy44NTgtMTcuNjg3LTUuMzcyLTQuODQ3LTEzLjUyNi03Ljk5Ny0yNC42NTQtNy45OTFIMzcuODN2OTcuNzI4aDM2LjA3M2MxMi44NyAwIDIxLjkwNi0zLjQ4MiAyNy43MjItOC42NSA1LjgxOC01LjE1NSA4LjMyLTExLjkxIDguMzEyLTE4LjEzOHpNMCAxMzUuNjk4aDE0NC4xOTdWMEgwdjEzNS42OTd6Ii8+PHBhdGggZD0iTTI1OC42NjIgODguMTk4Yy0uMDEzIDMuMjI5LTEuMDA3IDYuNDc1LTMuODk2IDkuMDExLTIuODg0IDIuNTM3LTcuODczIDQuNDYzLTE2LjEzMyA0LjQ2M0gyMjJWNzVoMTUuODkzYzcuNDExIDAgMTIuNjcgMS41MDIgMTUuOTY1IDMuODUgMy4yODkgMi4zNjIgNC43NzYgNS40NjMgNC44MDQgOS4zNDgiLz48cGF0aCBkPSJNOTEuNjYyIDg4LjE5OGMtLjAxMyAzLjIyOS0xLjAwNyA2LjQ3NS0zLjg5NiA5LjAxMS0yLjg4NCAyLjUzNy03Ljg3NCA0LjQ2My0xNi4xMzMgNC40NjNINTVWNzVoMTUuODkyYzcuNDEyIDAgMTIuNjcyIDEuNTAyIDE1Ljk2NiAzLjg1IDMuMjg5IDIuMzYyIDQuNzc2IDUuNDYzIDQuODA0IDkuMzQ4Ii8+PHBhdGggZD0iTTI0NS4xODYgNTUuNzljMy4wOTYtMi4yMzcgNC41OS01LjM4NiA0LjYxMy0xMC4xMjQtLjAxNS0zLjI1LS45NDMtNi4wMzMtMy4yODEtOC4xMTEtMi4zNDYtMi4wNzgtNi4zMy0zLjU1NS0xMi43NTQtMy41NTVIMjIydjI1LjI3NWg4LjA3NmM2Ljk4OC4wMDQgMTEuOTk4LTEuMjQzIDE1LjExLTMuNDg2Ii8+PHBhdGggZD0iTTc4LjE4NiA1NS43OWMzLjA5Ni0yLjIzNyA0LjU5LTUuMzg2IDQuNjEzLTEwLjEyNC0uMDE1LTMuMjUtLjk0My02LjAzMy0zLjI4Mi04LjExMUM3Ny4xNzIgMzUuNDc3IDczLjE4OCAzNCA2Ni43NjQgMzRINTV2MjUuMjc1aDguMDc2YzYuOTg4LjAwNCAxMS45OTgtMS4yNDMgMTUuMTEtMy40ODYiLz48L2c+PC9nPjwvZz48L3N2Zz4K); @@ -866,20 +1046,20 @@ exports[`Media Player: Placeholder should render an audio placeholder 1`] = ` } @media (min-width: 25rem) { - .emotion-14 { + .emotion-9 { -webkit-background-size: 77px 22px; background-size: 77px 22px; } } @media (min-width: 63rem) { - .emotion-14 { + .emotion-9 { -webkit-background-size: 93px 27px; background-size: 93px 27px; } } -.emotion-15 { +.emotion-10 { width: 100%; object-fit: cover; height: 100%; @@ -891,28 +1071,29 @@ exports[`Media Player: Placeholder should render an audio placeholder 1`] = ` data-e2e="media-loader__placeholder" >
@@ -952,7 +1133,7 @@ exports[`Media Player: Placeholder should render an audio placeholder without du .emotion-0 { position: relative; cursor: pointer; - aspect-ratio: 16/9; + height: 100%; } .no-js .emotion-0 { @@ -965,11 +1146,11 @@ exports[`Media Player: Placeholder should render an audio placeholder without du } .emotion-1 { - font-family: ReithSans,Helvetica,Arial,sans-serif; - font-weight: 400; - font-style: normal; font-size: 0.9375rem; line-height: 1.125rem; + font-family: ReithSans,Helvetica,Arial,sans-serif; + font-style: normal; + font-weight: 400; width: 100%; height: 100%; position: absolute; @@ -978,9 +1159,17 @@ exports[`Media Player: Placeholder should render an audio placeholder without du z-index: 1; } +@media (min-width: 20rem) and (max-width: 37.4375rem) { + .emotion-1 { + font-size: 0.9375rem; + line-height: 1.125rem; + } +} + @media (min-width: 37.5rem) { .emotion-1 { font-size: 0.875rem; + line-height: 1.125rem; } } @@ -988,7 +1177,7 @@ exports[`Media Player: Placeholder should render an audio placeholder without du background-color: rgba(34, 34, 34, 0.75); } -@media screen and (-ms-high-contrast: active) { +@media screen and (forced-colors: active) { .no-js .emotion-1 { background-color: transparent; } @@ -998,45 +1187,79 @@ exports[`Media Player: Placeholder should render an audio placeholder without du display: none; } -.emotion-3 { +.emotion-2 { + display: block; + font-weight: normal; + padding: 0.5rem; + border-bottom: 0.0625rem solid transparent; position: absolute; bottom: 0; } -.emotion-5 { +@media screen and (forced-colors: active) { + .emotion-2 { + background-color: window; + } +} + +@media (min-width: 25rem) { + .emotion-2 { + padding: 1rem; + } +} + +.emotion-2 strong { + font-weight: normal; +} + +.emotion-3 { + font-size: 0.75rem; + line-height: 1rem; + font-family: ReithSans,Helvetica,Arial,sans-serif; + font-style: normal; + font-weight: 700; 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; + width: 5rem; padding: 0; -webkit-transition: background-color 300ms; transition: background-color 300ms; - width: 5rem; position: absolute; bottom: 0; left: 0; z-index: 1; } -.emotion-5:hover, -.emotion-5:focus { +@media (min-width: 20rem) and (max-width: 37.4375rem) { + .emotion-3 { + font-size: 0.75rem; + line-height: 1rem; + } +} + +@media (min-width: 37.5rem) { + .emotion-3 { + font-size: 0.75rem; + line-height: 1rem; + } +} + +.emotion-3:hover, +.emotion-3:focus { background-color: #B80000; -webkit-transition: background-color 300ms; transition: background-color 300ms; } -.no-js .emotion-5 { +.no-js .emotion-3 { display: none; } -.emotion-5:focus-visible::before { +.emotion-3:focus-visible::before { content: ''; position: absolute; left: 0; @@ -1047,7 +1270,7 @@ exports[`Media Player: Placeholder should render an audio placeholder without du border: 0.1875rem solid #000000; } -.emotion-7 { +.emotion-4 { -webkit-clip-path: inset(100%); clip-path: inset(100%); clip: rect(1px, 1px, 1px, 1px); @@ -1058,14 +1281,14 @@ exports[`Media Player: Placeholder should render an audio placeholder without du margin: 0; } -.emotion-8>svg { +.emotion-5>svg { color: #FFFFFF; fill: currentColor; height: 1.5rem; width: 1.5rem; } -.emotion-10 { +.emotion-6 { vertical-align: middle; margin: 0 0.25rem; color: #222222; @@ -1074,7 +1297,7 @@ exports[`Media Player: Placeholder should render an audio placeholder without du height: 0.75rem; } -.emotion-12 { +.emotion-8 { position: relative; height: 100%; background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSI0NzkiIGhlaWdodD0iMTM2IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PGcgZmlsbD0iI0Q1RDBDRCI+PGc+PHBhdGggZD0iTTQ0OS41NTYgOTEuNTUzbC0yLjMxIDEuNDFjLTExLjE2NyA2LjgxOC0yMy4zMTMgMTAuNDc0LTM0LjM0NiAxMC40Ny0yMy42MS0uMDktMzkuMTYzLTE0LjA4My0zOS4yMjctMzQuNDUzLjAzLTE5LjkxOCAxNi4yNy0zNC42NjMgMzguNjMzLTM0LjcxOCAxMS4zODcuMDEgMjEuNzAzIDIuOTU0IDMzLjk2MiA5LjY3MmwyLjI1MSAxLjI0di0xOC4xOWwtLjk2Mi0uMzc3Yy0xMy44MjQtNS40NTgtMjQuNTMtNy44OS0zNS4xMDMtNy44ODQtMTYuMzQ2LS4wMDYtMzAuNTMzIDUuMzk0LTQwLjYzNyAxNC41NTctMTAuMTA1IDkuMTYzLTE2LjEwNiAyMi4xMDItMTYuMDk5IDM2Ljk1My4wMDggMTAuMzQ4IDQuMjc5IDIyLjQ4IDEzLjQyIDMyLjEwNSA5LjEyMSA5LjYyOCAyMy4xNjUgMTYuNjQ4IDQyLjQzIDE2LjYzOWguMDYzYzE1Ljk4IDAgMjcuMDYyLTMuNTYzIDM3LjA3NC04LjQ5MmwuODUxLS40MTRWOTEuNTUzek0zMzQgMTM1LjY5N2gxNDQuMTk1VjBIMzM0djEzNS42OTd6Ii8+PHBhdGggZD0iTTI3Ni45MzcgODkuOTY4Yy4wNDEtMTIuMzMtOC4xNzEtMjEuNjk2LTIxLjMwOC0yNS4zIDMuNTQ0LTEuODA5IDYuMzUtNC4wMjMgOC40MDQtNi43MjcgMi43NS0zLjYyMiA0LjA2MS04LjA2NCA0LjA0Ni0xMy4yMzUuMDE1LTYuMzU5LTIuNDg2LTEyLjgzOS03Ljg1OC0xNy42ODctNS4zNzItNC44NDctMTMuNTI2LTcuOTk3LTI0LjY1NC03Ljk5MUgyMDQuODN2OTcuNzI4aDM2LjA3M2MxMi44NyAwIDIxLjkwNi0zLjQ4MiAyNy43MjItOC42NSA1LjgxOC01LjE1NSA4LjMyLTExLjkxIDguMzEyLTE4LjEzOHpNMTY3IDEzNS42OThoMTQ0LjE5N1YwSDE2N3YxMzUuNjk3eiIvPjxwYXRoIGQ9Ik0xMDkuOTM3IDg5Ljk2OGMuMDQxLTEyLjMzLTguMTcxLTIxLjY5Ni0yMS4zMDgtMjUuMyAzLjU0NC0xLjgwOSA2LjM1LTQuMDIzIDguNDA0LTYuNzI3IDIuNzUtMy42MjIgNC4wNjEtOC4wNjQgNC4wNDYtMTMuMjM1LjAxNS02LjM1OS0yLjQ4Ni0xMi44MzktNy44NTgtMTcuNjg3LTUuMzcyLTQuODQ3LTEzLjUyNi03Ljk5Ny0yNC42NTQtNy45OTFIMzcuODN2OTcuNzI4aDM2LjA3M2MxMi44NyAwIDIxLjkwNi0zLjQ4MiAyNy43MjItOC42NSA1LjgxOC01LjE1NSA4LjMyLTExLjkxIDguMzEyLTE4LjEzOHpNMCAxMzUuNjk4aDE0NC4xOTdWMEgwdjEzNS42OTd6Ii8+PHBhdGggZD0iTTI1OC42NjIgODguMTk4Yy0uMDEzIDMuMjI5LTEuMDA3IDYuNDc1LTMuODk2IDkuMDExLTIuODg0IDIuNTM3LTcuODczIDQuNDYzLTE2LjEzMyA0LjQ2M0gyMjJWNzVoMTUuODkzYzcuNDExIDAgMTIuNjcgMS41MDIgMTUuOTY1IDMuODUgMy4yODkgMi4zNjIgNC43NzYgNS40NjMgNC44MDQgOS4zNDgiLz48cGF0aCBkPSJNOTEuNjYyIDg4LjE5OGMtLjAxMyAzLjIyOS0xLjAwNyA2LjQ3NS0zLjg5NiA5LjAxMS0yLjg4NCAyLjUzNy03Ljg3NCA0LjQ2My0xNi4xMzMgNC40NjNINTVWNzVoMTUuODkyYzcuNDEyIDAgMTIuNjcyIDEuNTAyIDE1Ljk2NiAzLjg1IDMuMjg5IDIuMzYyIDQuNzc2IDUuNDYzIDQuODA0IDkuMzQ4Ii8+PHBhdGggZD0iTTI0NS4xODYgNTUuNzljMy4wOTYtMi4yMzcgNC41OS01LjM4NiA0LjYxMy0xMC4xMjQtLjAxNS0zLjI1LS45NDMtNi4wMzMtMy4yODEtOC4xMTEtMi4zNDYtMi4wNzgtNi4zMy0zLjU1NS0xMi43NTQtMy41NTVIMjIydjI1LjI3NWg4LjA3NmM2Ljk4OC4wMDQgMTEuOTk4LTEuMjQzIDE1LjExLTMuNDg2Ii8+PHBhdGggZD0iTTc4LjE4NiA1NS43OWMzLjA5Ni0yLjIzNyA0LjU5LTUuMzg2IDQuNjEzLTEwLjEyNC0uMDE1LTMuMjUtLjk0My02LjAzMy0zLjI4Mi04LjExMUM3Ny4xNzIgMzUuNDc3IDczLjE4OCAzNCA2Ni43NjQgMzRINTV2MjUuMjc1aDguMDc2YzYuOTg4LjAwNCAxMS45OTgtMS4yNDMgMTUuMTEtMy40ODYiLz48L2c+PC9nPjwvZz48L3N2Zz4K); @@ -1087,20 +1310,20 @@ exports[`Media Player: Placeholder should render an audio placeholder without du } @media (min-width: 25rem) { - .emotion-12 { + .emotion-8 { -webkit-background-size: 77px 22px; background-size: 77px 22px; } } @media (min-width: 63rem) { - .emotion-12 { + .emotion-8 { -webkit-background-size: 93px 27px; background-size: 93px 27px; } } -.emotion-13 { +.emotion-9 { width: 100%; object-fit: cover; height: 100%; @@ -1112,28 +1335,29 @@ exports[`Media Player: Placeholder should render an audio placeholder without du data-e2e="media-loader__placeholder" >
@@ -1166,7 +1390,7 @@ exports[`Media Player: Placeholder should render no-js styles when noJsClassName .emotion-0 { position: relative; cursor: pointer; - aspect-ratio: 16/9; + height: 100%; } .no-js .emotion-0 { @@ -1179,11 +1403,11 @@ exports[`Media Player: Placeholder should render no-js styles when noJsClassName } .emotion-1 { - font-family: ReithSans,Helvetica,Arial,sans-serif; - font-weight: 400; - font-style: normal; font-size: 0.9375rem; line-height: 1.125rem; + font-family: ReithSans,Helvetica,Arial,sans-serif; + font-style: normal; + font-weight: 400; width: 100%; height: 100%; position: absolute; @@ -1193,15 +1417,17 @@ exports[`Media Player: Placeholder should render no-js styles when noJsClassName z-index: 1; } -@media (min-width: 37.5rem) { +@media (min-width: 20rem) and (max-width: 37.4375rem) { .emotion-1 { - font-size: 0.875rem; + font-size: 0.9375rem; + line-height: 1.125rem; } } -@media screen and (-ms-high-contrast: active) { +@media (min-width: 37.5rem) { .emotion-1 { - background-color: transparent; + font-size: 0.875rem; + line-height: 1.125rem; } } @@ -1209,7 +1435,7 @@ exports[`Media Player: Placeholder should render no-js styles when noJsClassName background-color: rgba(34, 34, 34, 0.75); } -@media screen and (-ms-high-contrast: active) { +@media screen and (forced-colors: active) { .no-js .emotion-1 { background-color: transparent; } @@ -1219,14 +1445,41 @@ exports[`Media Player: Placeholder should render no-js styles when noJsClassName display: none; } +@media screen and (forced-colors: active) { + .emotion-1 { + background-color: transparent; + } +} + +.emotion-2 { + display: block; + font-weight: normal; + padding: 0.5rem; + border-bottom: 0.0625rem solid transparent; +} + +@media screen and (forced-colors: active) { + .emotion-2 { + background-color: window; + } +} + +@media (min-width: 25rem) { + .emotion-2 { + padding: 1rem; + } +} + .emotion-3 { display: block; font-weight: normal; padding: 0.5rem; border-bottom: 0.0625rem solid transparent; + position: absolute; + bottom: 0; } -@media screen and (-ms-high-contrast: active) { +@media screen and (forced-colors: active) { .emotion-3 { background-color: window; } @@ -1238,45 +1491,58 @@ exports[`Media Player: Placeholder should render no-js styles when noJsClassName } } -.emotion-5 { - position: absolute; - bottom: 0; +.emotion-3 strong { + font-weight: normal; } -.emotion-7 { +.emotion-4 { + font-size: 0.75rem; + line-height: 1rem; + font-family: ReithSans,Helvetica,Arial,sans-serif; + font-style: normal; + font-weight: 700; 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; + width: 5rem; padding: 0; -webkit-transition: background-color 300ms; transition: background-color 300ms; - width: 5rem; position: absolute; bottom: 0; left: 0; z-index: 1; } -.emotion-7:hover, -.emotion-7:focus { +@media (min-width: 20rem) and (max-width: 37.4375rem) { + .emotion-4 { + font-size: 0.75rem; + line-height: 1rem; + } +} + +@media (min-width: 37.5rem) { + .emotion-4 { + font-size: 0.75rem; + line-height: 1rem; + } +} + +.emotion-4:hover, +.emotion-4:focus { background-color: #B80000; -webkit-transition: background-color 300ms; transition: background-color 300ms; } -.no-js .emotion-7 { +.no-js .emotion-4 { display: none; } -.emotion-7:focus-visible::before { +.emotion-4:focus-visible::before { content: ''; position: absolute; left: 0; @@ -1287,7 +1553,7 @@ exports[`Media Player: Placeholder should render no-js styles when noJsClassName border: 0.1875rem solid #000000; } -.emotion-9 { +.emotion-5 { -webkit-clip-path: inset(100%); clip-path: inset(100%); clip: rect(1px, 1px, 1px, 1px); @@ -1298,15 +1564,18 @@ exports[`Media Player: Placeholder should render no-js styles when noJsClassName margin: 0; } -.emotion-10>svg { +.emotion-6 { + margin-top: 0.5rem; +} + +.emotion-6>svg { color: #FFFFFF; fill: currentColor; height: 1.5rem; - margin-top: 0.5rem; width: 1.5rem; } -.emotion-12 { +.emotion-7 { vertical-align: middle; margin: 0 0.25rem; color: #222222; @@ -1315,12 +1584,12 @@ exports[`Media Player: Placeholder should render no-js styles when noJsClassName height: 0.75rem; } -.emotion-14 { +.emotion-9 { display: block; margin-top: 0.5rem; } -.emotion-16 { +.emotion-10 { position: relative; height: 100%; background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSI0NzkiIGhlaWdodD0iMTM2IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PGcgZmlsbD0iI0Q1RDBDRCI+PGc+PHBhdGggZD0iTTQ0OS41NTYgOTEuNTUzbC0yLjMxIDEuNDFjLTExLjE2NyA2LjgxOC0yMy4zMTMgMTAuNDc0LTM0LjM0NiAxMC40Ny0yMy42MS0uMDktMzkuMTYzLTE0LjA4My0zOS4yMjctMzQuNDUzLjAzLTE5LjkxOCAxNi4yNy0zNC42NjMgMzguNjMzLTM0LjcxOCAxMS4zODcuMDEgMjEuNzAzIDIuOTU0IDMzLjk2MiA5LjY3MmwyLjI1MSAxLjI0di0xOC4xOWwtLjk2Mi0uMzc3Yy0xMy44MjQtNS40NTgtMjQuNTMtNy44OS0zNS4xMDMtNy44ODQtMTYuMzQ2LS4wMDYtMzAuNTMzIDUuMzk0LTQwLjYzNyAxNC41NTctMTAuMTA1IDkuMTYzLTE2LjEwNiAyMi4xMDItMTYuMDk5IDM2Ljk1My4wMDggMTAuMzQ4IDQuMjc5IDIyLjQ4IDEzLjQyIDMyLjEwNSA5LjEyMSA5LjYyOCAyMy4xNjUgMTYuNjQ4IDQyLjQzIDE2LjYzOWguMDYzYzE1Ljk4IDAgMjcuMDYyLTMuNTYzIDM3LjA3NC04LjQ5MmwuODUxLS40MTRWOTEuNTUzek0zMzQgMTM1LjY5N2gxNDQuMTk1VjBIMzM0djEzNS42OTd6Ii8+PHBhdGggZD0iTTI3Ni45MzcgODkuOTY4Yy4wNDEtMTIuMzMtOC4xNzEtMjEuNjk2LTIxLjMwOC0yNS4zIDMuNTQ0LTEuODA5IDYuMzUtNC4wMjMgOC40MDQtNi43MjcgMi43NS0zLjYyMiA0LjA2MS04LjA2NCA0LjA0Ni0xMy4yMzUuMDE1LTYuMzU5LTIuNDg2LTEyLjgzOS03Ljg1OC0xNy42ODctNS4zNzItNC44NDctMTMuNTI2LTcuOTk3LTI0LjY1NC03Ljk5MUgyMDQuODN2OTcuNzI4aDM2LjA3M2MxMi44NyAwIDIxLjkwNi0zLjQ4MiAyNy43MjItOC42NSA1LjgxOC01LjE1NSA4LjMyLTExLjkxIDguMzEyLTE4LjEzOHpNMTY3IDEzNS42OThoMTQ0LjE5N1YwSDE2N3YxMzUuNjk3eiIvPjxwYXRoIGQ9Ik0xMDkuOTM3IDg5Ljk2OGMuMDQxLTEyLjMzLTguMTcxLTIxLjY5Ni0yMS4zMDgtMjUuMyAzLjU0NC0xLjgwOSA2LjM1LTQuMDIzIDguNDA0LTYuNzI3IDIuNzUtMy42MjIgNC4wNjEtOC4wNjQgNC4wNDYtMTMuMjM1LjAxNS02LjM1OS0yLjQ4Ni0xMi44MzktNy44NTgtMTcuNjg3LTUuMzcyLTQuODQ3LTEzLjUyNi03Ljk5Ny0yNC42NTQtNy45OTFIMzcuODN2OTcuNzI4aDM2LjA3M2MxMi44NyAwIDIxLjkwNi0zLjQ4MiAyNy43MjItOC42NSA1LjgxOC01LjE1NSA4LjMyLTExLjkxIDguMzEyLTE4LjEzOHpNMCAxMzUuNjk4aDE0NC4xOTdWMEgwdjEzNS42OTd6Ii8+PHBhdGggZD0iTTI1OC42NjIgODguMTk4Yy0uMDEzIDMuMjI5LTEuMDA3IDYuNDc1LTMuODk2IDkuMDExLTIuODg0IDIuNTM3LTcuODczIDQuNDYzLTE2LjEzMyA0LjQ2M0gyMjJWNzVoMTUuODkzYzcuNDExIDAgMTIuNjcgMS41MDIgMTUuOTY1IDMuODUgMy4yODkgMi4zNjIgNC43NzYgNS40NjMgNC44MDQgOS4zNDgiLz48cGF0aCBkPSJNOTEuNjYyIDg4LjE5OGMtLjAxMyAzLjIyOS0xLjAwNyA2LjQ3NS0zLjg5NiA5LjAxMS0yLjg4NCAyLjUzNy03Ljg3NCA0LjQ2My0xNi4xMzMgNC40NjNINTVWNzVoMTUuODkyYzcuNDEyIDAgMTIuNjcyIDEuNTAyIDE1Ljk2NiAzLjg1IDMuMjg5IDIuMzYyIDQuNzc2IDUuNDYzIDQuODA0IDkuMzQ4Ii8+PHBhdGggZD0iTTI0NS4xODYgNTUuNzljMy4wOTYtMi4yMzcgNC41OS01LjM4NiA0LjYxMy0xMC4xMjQtLjAxNS0zLjI1LS45NDMtNi4wMzMtMy4yODEtOC4xMTEtMi4zNDYtMi4wNzgtNi4zMy0zLjU1NS0xMi43NTQtMy41NTVIMjIydjI1LjI3NWg4LjA3NmM2Ljk4OC4wMDQgMTEuOTk4LTEuMjQzIDE1LjExLTMuNDg2Ii8+PHBhdGggZD0iTTc4LjE4NiA1NS43OWMzLjA5Ni0yLjIzNyA0LjU5LTUuMzg2IDQuNjEzLTEwLjEyNC0uMDE1LTMuMjUtLjk0My02LjAzMy0zLjI4Mi04LjExMUM3Ny4xNzIgMzUuNDc3IDczLjE4OCAzNCA2Ni43NjQgMzRINTV2MjUuMjc1aDguMDc2YzYuOTg4LjAwNCAxMS45OTgtMS4yNDMgMTUuMTEtMy40ODYiLz48L2c+PC9nPjwvZz48L3N2Zz4K); @@ -1333,20 +1602,20 @@ exports[`Media Player: Placeholder should render no-js styles when noJsClassName } @media (min-width: 25rem) { - .emotion-16 { + .emotion-10 { -webkit-background-size: 77px 22px; background-size: 77px 22px; } } @media (min-width: 63rem) { - .emotion-16 { + .emotion-10 { -webkit-background-size: 93px 27px; background-size: 93px 27px; } } -.emotion-17 { +.emotion-11 { width: 100%; object-fit: cover; height: 100%; @@ -1358,34 +1627,35 @@ exports[`Media Player: Placeholder should render no-js styles when noJsClassName data-e2e="media-loader__placeholder" >
diff --git a/src/app/components/MediaLoader/Placeholder/index.styles.tsx b/src/app/components/MediaLoader/Placeholder/index.styles.tsx index eb2e0e778d2..342ded7fe98 100644 --- a/src/app/components/MediaLoader/Placeholder/index.styles.tsx +++ b/src/app/components/MediaLoader/Placeholder/index.styles.tsx @@ -1,13 +1,14 @@ import { css, Theme } from '@emotion/react'; import NO_JS_CLASSNAME from '#app/lib/noJs.const'; import { focusIndicatorThickness } from '../../ThemeProvider/focusIndicator'; -import { mediaPortraitStyles } from '../index.styles'; const styles = { placeholder: ({ palette }: Theme) => css({ position: 'relative', cursor: 'pointer', + height: '100%', + [`.${NO_JS_CLASSNAME} &`]: { cursor: 'default', }, @@ -18,13 +19,6 @@ const styles = { }, }), - placeholderLandscape: () => - css({ - aspectRatio: '16 / 9', - }), - - placeholderPortrait: () => mediaPortraitStyles, - playButton: ({ palette }: Theme) => css({ position: 'absolute', diff --git a/src/app/components/MediaLoader/Placeholder/index.test.tsx b/src/app/components/MediaLoader/Placeholder/index.test.tsx index 0d57befd07a..5355a6a0ef6 100644 --- a/src/app/components/MediaLoader/Placeholder/index.test.tsx +++ b/src/app/components/MediaLoader/Placeholder/index.test.tsx @@ -3,7 +3,7 @@ import { render, fireEvent, getByText, -} from '../../react-testing-library-with-providers'; +} from '#app/components/react-testing-library-with-providers'; import Placeholder from '.'; describe('Media Player: Placeholder', () => { diff --git a/src/app/components/MediaLoader/Placeholder/index.tsx b/src/app/components/MediaLoader/Placeholder/index.tsx index 0fb73b4eacf..9d9c77be83c 100644 --- a/src/app/components/MediaLoader/Placeholder/index.tsx +++ b/src/app/components/MediaLoader/Placeholder/index.tsx @@ -1,30 +1,25 @@ /** @jsx jsx */ import { jsx } from '@emotion/react'; -import PlayButton from '#psammead/psammead-play-button/src'; -import NO_JS_CLASSNAME from '#app/lib/noJs.const'; -import { useContext } from 'react'; -import { ServiceContext } from '#app/contexts/ServiceContext'; -import Guidance from '#app/legacy/components/MediaPlayer/Guidance'; import Image from '../../Image'; import styles from './index.styles'; -import { MediaInfo, Orientations } from '../types'; +import PlayButton from './PlayButton'; +import Guidance from './Guidance'; +import { MediaInfo } from '../types'; interface Props { onClick: React.MouseEventHandler; - src: string; + src?: string; srcSet?: string; - mediaInfo: MediaInfo; - noJsMessage: string; - orientation?: Orientations; + mediaInfo?: MediaInfo; + noJsMessage?: string; } const MediaPlayerPlaceholder = ({ onClick, - src, + src = '', srcSet, mediaInfo, - noJsMessage, - orientation, + noJsMessage = '', }: Props) => { const { title, @@ -33,29 +28,18 @@ const MediaPlayerPlaceholder = ({ durationSpoken, type = 'video', guidanceMessage, - } = mediaInfo; - - const { service } = useContext(ServiceContext); + } = mediaInfo ?? {}; return ( // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
{}} title={title} - service={service} datetime={datetime} duration={duration} durationSpoken={durationSpoken} diff --git a/src/app/components/MediaLoader/configs/aresMedia.ts b/src/app/components/MediaLoader/configs/aresMedia.ts index cc520f1a24f..1143e9ccf0a 100644 --- a/src/app/components/MediaLoader/configs/aresMedia.ts +++ b/src/app/components/MediaLoader/configs/aresMedia.ts @@ -15,7 +15,7 @@ import { import getCaptionBlock from '../utils/getCaptionBlock'; import buildPlaceholderConfig from '../utils/buildPlaceholderConfig'; import shouldDisplayAds from '../utils/shouldDisplayAds'; -import { getExternalEmbedUrl } from '../utils/urlConstructors'; +import { getAmpIframeUrl, getExternalEmbedUrl } from '../utils/urlConstructors'; const DEFAULT_WIDTH = 512; @@ -59,10 +59,9 @@ export default ({ const versionID = versionsBlock?.versionId ?? ''; - const orientation = embedded - ? ORIENTATION_MAPPING.Original - : ORIENTATION_MAPPING[versionsBlock?.types?.[0]] ?? - ORIENTATION_MAPPING.Original; + const orientation = + ORIENTATION_MAPPING[versionsBlock?.types?.[0]] ?? + ORIENTATION_MAPPING.Original; const format = aresMediaMetadata?.format; @@ -121,6 +120,8 @@ export default ({ placeholderImageLocator: locator, }); + const ampIframeUrl = getAmpIframeUrl({ id, versionID, lang }); + const externalEmbedUrl = getExternalEmbedUrl({ id, versionID, lang }); return { @@ -149,5 +150,6 @@ export default ({ placeholderConfig, showAds, orientation, + ...(ampIframeUrl && { ampIframeUrl }), }; }; diff --git a/src/app/components/MediaLoader/configs/audio.ts b/src/app/components/MediaLoader/configs/audio.ts index 0d8036f050f..f7ad8e07a91 100644 --- a/src/app/components/MediaLoader/configs/audio.ts +++ b/src/app/components/MediaLoader/configs/audio.ts @@ -1,5 +1,6 @@ import filterForBlockType from '#lib/utilities/blockHandlers'; import { ConfigBuilderProps, ConfigBuilderReturnProps } from '../types'; +import AUDIO_UI_CONFIG from './constants'; export default ({ blocks, @@ -33,16 +34,9 @@ export default ({ }, ui: { ...basePlayerConfig.ui, - skin: 'audio', - colour: '#B80000', - foreColour: '#222222', - baseColour: '#222222', - colourOnBaseColour: '#ffffff', - fallbackBackgroundColour: '#ffffff', - controls: { enabled: true, volumeSlider: true }, + ...AUDIO_UI_CONFIG, }, }, - mediaType: 'audio', showAds: false, }; diff --git a/src/app/components/MediaLoader/configs/clipMedia.ts b/src/app/components/MediaLoader/configs/clipMedia.ts index b515633f676..c255fc4620c 100644 --- a/src/app/components/MediaLoader/configs/clipMedia.ts +++ b/src/app/components/MediaLoader/configs/clipMedia.ts @@ -2,7 +2,6 @@ import moment from 'moment-timezone'; import buildIChefURL from '#lib/utilities/ichefURL'; import filterForBlockType from '#lib/utilities/blockHandlers'; -import getEmbedURL from '#lib/utilities/getUrlHelpers/getEmbedUrl'; import { ClipMediaBlock, ConfigBuilderProps, @@ -12,19 +11,19 @@ import { import getCaptionBlock from '../utils/getCaptionBlock'; import buildPlaceholderConfig from '../utils/buildPlaceholderConfig'; import shouldDisplayAds from '../utils/shouldDisplayAds'; +import { getExternalEmbedUrl } from '../utils/urlConstructors'; +import AUDIO_UI_CONFIG from './constants'; const DEFAULT_WIDTH = 512; export default ({ id, lang, - isAmp, blocks, basePlayerConfig, translations, adsEnabled = false, showAdsBasedOnLocation = false, - embedded, }: ConfigBuilderProps): ConfigBuilderReturnProps => { const clipMediaBlock: ClipMediaBlock = filterForBlockType( blocks, @@ -82,32 +81,17 @@ export default ({ guidanceMessage, }); - const audioUi = { - skin: 'audio', - colour: '#b80000', - foreColour: '#222222', - baseColour: '#222222', - colourOnBaseColour: '#ffffff', - fallbackBackgroundColour: '#ffffff', - controls: { enabled: true, volumeSlider: true }, - }; - const items: PlaylistItem[] = [{ versionID, kind, duration: rawDuration }]; if (showAds) items.unshift({ kind: 'advert' }); - const embedUrl = getEmbedURL({ - mediaId: `${id}/${versionID}/${lang}`, - type: 'avEmbed', - isAmp, - embedded, - }); + const externalEmbedUrl = getExternalEmbedUrl({ id, versionID, lang }); return { mediaType: type || 'video', playerConfig: { ...basePlayerConfig, - ...(embedUrl && { externalEmbedUrl: embedUrl }), + ...(externalEmbedUrl && { externalEmbedUrl }), playlistObject: { title, summary: caption || '', @@ -118,7 +102,7 @@ export default ({ }, ui: { ...basePlayerConfig.ui, - ...(type === 'audio' && audioUi), + ...(type === 'audio' && AUDIO_UI_CONFIG), }, statsObject: { ...basePlayerConfig.statsObject, diff --git a/src/app/components/MediaLoader/configs/constants.ts b/src/app/components/MediaLoader/configs/constants.ts new file mode 100644 index 00000000000..1bdd213a18f --- /dev/null +++ b/src/app/components/MediaLoader/configs/constants.ts @@ -0,0 +1,13 @@ +import { PlayerUiConfig } from '../types'; + +const AUDIO_UI_CONFIG: PlayerUiConfig = { + skin: 'audio', + colour: '#b80000', + foreColour: '#222222', + baseColour: '#222222', + colourOnBaseColour: '#ffffff', + fallbackBackgroundColour: '#ffffff', + controls: { enabled: true, volumeSlider: true }, +}; + +export default AUDIO_UI_CONFIG; diff --git a/src/app/components/MediaLoader/configs/liveRadio.ts b/src/app/components/MediaLoader/configs/liveRadio.ts index f2c9e8e03d0..ff30134d27b 100644 --- a/src/app/components/MediaLoader/configs/liveRadio.ts +++ b/src/app/components/MediaLoader/configs/liveRadio.ts @@ -6,6 +6,7 @@ import { LiveRadioVersionBlock, } from '#app/models/types/media'; import { ConfigBuilderProps, ConfigBuilderReturnProps } from '../types'; +import AUDIO_UI_CONFIG from './constants'; export default ({ blocks, @@ -42,13 +43,7 @@ export default ({ }, ui: { ...basePlayerConfig.ui, - skin: 'audio', - colour: '#b80000', - foreColour: '#222222', - baseColour: '#222222', - colourOnBaseColour: '#ffffff', - fallbackBackgroundColour: '#ffffff', - controls: { enabled: true, volumeSlider: true }, + ...AUDIO_UI_CONFIG, }, }, mediaType: 'liveRadio', diff --git a/src/app/components/MediaLoader/fixture.ts b/src/app/components/MediaLoader/fixture.ts index 9c38626cf94..b02a0edda1b 100644 --- a/src/app/components/MediaLoader/fixture.ts +++ b/src/app/components/MediaLoader/fixture.ts @@ -74,6 +74,69 @@ export const buildAresMediaPlayerBlock = ({ types }: { types: string[] }) => ({ position: [5, 2, 1], }); +export const aresMediaPortraitBlock = { + id: '80e150c0', + type: 'aresMedia', + model: { + blocks: [ + buildAresMediaPlayerBlock({ types: ['Portrait'] }), + { + id: 'd8f26383', + type: 'image', + model: { + blocks: [ + { + id: 'fcdba133', + type: 'rawImage', + model: { + width: 1920, + height: 1080, + locator: + 'ichef.test.bbci.co.uk/images/ic/$widthxn/p01k6mtv.jpg', + originCode: 'mpv', + copyrightHolder: 'BBC', + }, + }, + { + id: '63679c9e', + type: 'altText', + model: { + blocks: [ + { + id: '33876888', + type: 'text', + model: { + blocks: [ + { + id: '26dbfca2', + type: 'paragraph', + model: { + text: 'Ants', + blocks: [ + { + id: 'ed9f30c9', + type: 'fragment', + model: { + text: 'Ants', + attributes: [], + }, + }, + ], + }, + }, + ], + }, + }, + ], + }, + }, + ], + }, + }, + ], + }, +}; + export const aresMediaBlock = { id: '80e150c0', type: 'aresMedia', @@ -372,6 +435,10 @@ export const aresMediaLiveStreamBlocks = [ export const aresMediaBlocks = [aresMediaBlock, aresMediaCaptionBlock]; export const clipMediaBlocks = [livePageClipMediaBlock, livePageCaptionBlock]; +export const aresMediaPortraitBlocks = [ + aresMediaPortraitBlock, + aresMediaCaptionBlock, +]; export const onDemandTvBlocks = [onDemandTvBlock]; export const onDemandTvBlocksWithOverrides = [ onDemandTvBlock, diff --git a/src/app/components/MediaLoader/index.stories.tsx b/src/app/components/MediaLoader/index.stories.tsx index 3b71cc726d7..72d636e68d7 100644 --- a/src/app/components/MediaLoader/index.stories.tsx +++ b/src/app/components/MediaLoader/index.stories.tsx @@ -2,7 +2,11 @@ import React from 'react'; import { PageTypes, Services } from '#app/models/types/global'; import { RequestContextProvider } from '#app/contexts/RequestContext'; import MediaLoaderComponent from '.'; -import { aresMediaBlocks, clipMediaBlocks } from './fixture'; +import { + aresMediaBlocks, + aresMediaPortraitBlocks, + clipMediaBlocks, +} from './fixture'; import { MediaBlock } from './types'; import readme from './README.md'; @@ -33,7 +37,7 @@ export default { }, }; -export const ArticleMediaLoader = () => ( +export const Landscape = () => ( ( /> ); -export const LivePageMediaLoader = () => ( +export const Portrait = () => ( + +); + +export const LivePageMedia = () => ( }, }); -export const mediaPortraitStyles = ({ mq }: Theme) => [ - css({ - aspectRatio: '9 / 16', - maxWidth: `${pixelsToRem(185)}rem`, - [mq.GROUP_1_ONLY]: { - maxWidth: `${pixelsToRem(256)}rem`, - }, - [mq.GROUP_2_ONLY]: { - maxWidth: `${pixelsToRem(274)}rem`, - }, - [mq.GROUP_3_ONLY]: { - maxWidth: `${pixelsToRem(200)}rem`, - }, - [mq.GROUP_4_MIN_WIDTH]: { - maxWidth: `${pixelsToRem(190)}rem`, - }, - }), - commonMarginSpacing, -]; - export default { - figure: ({ spacings }: Theme) => - css({ - margin: 0, - paddingBottom: `${spacings.TRIPLE}rem`, - width: '100%', - }), + figure: + (isEmbedded = false) => + ({ spacings }: Theme) => + css({ + position: 'relative', + width: '100%', + ...(isEmbedded && { margin: '0' }), + ...(!isEmbedded && { margin: `0 0 ${spacings.TRIPLE}rem 0` }), + }), - liveRadioMediaContainer: ({ palette }: Theme) => - css({ - backgroundColor: palette.WHITE, - height: '165px', - }), + landscapeFigure: () => css({ aspectRatio: '16 / 9' }), + portraitFigure: + (isEmbedded = false) => + ({ mq }: Theme) => [ + css({ + aspectRatio: '9 / 16', + ...(!isEmbedded && { + maxWidth: `${pixelsToRem(185)}rem`, + [mq.GROUP_1_ONLY]: { + maxWidth: `${pixelsToRem(256)}rem`, + }, + [mq.GROUP_2_ONLY]: { + maxWidth: `${pixelsToRem(274)}rem`, + }, + [mq.GROUP_3_ONLY]: { + maxWidth: `${pixelsToRem(200)}rem`, + }, + [mq.GROUP_4_MIN_WIDTH]: { + maxWidth: `${pixelsToRem(190)}rem`, + }, + }), + }), + !isEmbedded && commonMarginSpacing, + ], - onDemandAudioMediaContainer: () => + audioMediaContainer: ({ palette }: Theme) => css({ + backgroundColor: palette.WHITE, height: '165px', }), - mediaContainerLandscape: ({ palette }: Theme) => + standardMediaContainer: ({ palette }: Theme) => css({ backgroundColor: palette.BLACK, - aspectRatio: '16 / 9', + height: '100%', }), - mediaContainerPortrait: ({ palette }: Theme) => [ + onDemandAudioMediaContainer: () => css({ - backgroundColor: palette.BLACK, + height: '165px', }), - mediaPortraitStyles, - ], titlePortrait: ({ mq, @@ -89,10 +90,11 @@ export default { commonMarginSpacing, ], - captionPortrait: ({ mq, spacings }: Theme) => + captionPortrait: ({ mq }: Theme) => css({ - [mq.GROUP_3_ONLY]: { - marginInline: `${spacings.DOUBLE}rem 0`, + marginInline: '0', + [mq.GROUP_2_ONLY]: { + marginInline: '0', }, }), }; diff --git a/src/app/components/MediaLoader/index.test.tsx b/src/app/components/MediaLoader/index.test.tsx index b9467de3a10..ce3ef15e440 100644 --- a/src/app/components/MediaLoader/index.test.tsx +++ b/src/app/components/MediaLoader/index.test.tsx @@ -250,4 +250,31 @@ describe('MediaLoader', () => { ); }); }); + + describe('AMP', () => { + it('should render the AMP version of the media player', async () => { + let container; + + await act(async () => { + ({ container } = render( + , + { + id: 'cn8jgj8rjppo', + isAmp: true, + }, + )); + }); + + const ampPlayer = (container as unknown as HTMLElement).querySelector( + 'amp-iframe', + ); + + const ampIframeUrl = ampPlayer?.getAttribute('src'); + + expect(ampPlayer).toBeInTheDocument(); + expect(ampIframeUrl).toEqual( + 'https://web-cdn.test.api.bbci.co.uk/ws/av-embeds/articles/cn8jgj8rjppo/p01k6msp/en-GB/amp', + ); + }); + }); }); diff --git a/src/app/components/MediaLoader/index.tsx b/src/app/components/MediaLoader/index.tsx index a82c764c08a..fb261a3f839 100644 --- a/src/app/components/MediaLoader/index.tsx +++ b/src/app/components/MediaLoader/index.tsx @@ -16,8 +16,7 @@ import { import filterForBlockType from '#lib/utilities/blockHandlers'; import { PageTypes } from '#app/models/types/global'; import { EventTrackingContext } from '#app/contexts/EventTrackingContext'; -import { MediaType } from '#app/models/types/media'; -import { BumpType, MediaBlock, PlayerConfig, Orientations } from './types'; +import { BumpType, MediaBlock, PlayerConfig } from './types'; import Caption from '../Caption'; import nodeLogger from '../../lib/logger.node'; import buildConfig from './utils/buildSettings'; @@ -27,6 +26,7 @@ import getCaptionBlock from './utils/getCaptionBlock'; import styles from './index.styles'; import { getBootstrapSrc } from '../Ad/Canonical'; import Metadata from './Metadata'; +import AmpMediaLoader from './Amp'; const PAGETYPES_IGNORE_PLACEHOLDER: PageTypes[] = [ MEDIA_ARTICLE_PAGE, @@ -96,16 +96,9 @@ const AdvertTagLoader = () => { type MediaContainerProps = { playerConfig: PlayerConfig; showAds: boolean; - mediaType?: MediaType; - orientation?: Orientations; }; -const MediaContainer = ({ - playerConfig, - showAds, - mediaType, - orientation, -}: MediaContainerProps) => { +const MediaContainer = ({ playerConfig, showAds }: MediaContainerProps) => { const playerElementRef = useRef(null); useEffect(() => { @@ -152,22 +145,16 @@ const MediaContainer = ({ } }, [playerConfig, showAds]); - const playerStyling = (() => { - if (orientation === 'portrait') { - return styles.mediaContainerPortrait; - } - if (mediaType === 'liveRadio') { - return styles.liveRadioMediaContainer; - } - if (mediaType === 'audio') { - return styles.onDemandAudioMediaContainer; - } - - return styles.mediaContainerLandscape; - })(); - return ( -
+
); }; @@ -192,11 +179,8 @@ const MediaLoader = ({ blocks, className, embedded }: Props) => { showAdsBasedOnLocation, } = useContext(RequestContext); - const PAGETYPE_SUPPORTS_PLACEHOLDER = - !PAGETYPES_IGNORE_PLACEHOLDER.includes(pageType); - - const [isPlaceholder, setIsPlaceholder] = useState( - PAGETYPE_SUPPORTS_PLACEHOLDER, + const [showPlaceholder, setShowPlaceholder] = useState( + !PAGETYPES_IGNORE_PLACEHOLDER.includes(pageType), ); if (isLite) return null; @@ -206,7 +190,7 @@ const MediaLoader = ({ blocks, className, embedded }: Props) => { const producer = getProducerFromServiceName(service); const config = buildConfig({ - id, + id: id || '', blocks, counterName: mediaOverrides?.pageIdentifierOverride || pageIdentifier, statsDestination, @@ -223,12 +207,27 @@ const MediaLoader = ({ blocks, className, embedded }: Props) => { if (!config) return null; - const { mediaType, playerConfig, placeholderConfig, showAds, orientation } = - config; + const { + mediaType, + playerConfig, + placeholderConfig, + showAds, + orientation = 'landscape', + ampIframeUrl, + } = config; const captionBlock = getCaptionBlock(blocks, pageType); - const showPlaceholder = isPlaceholder && placeholderConfig; + const { + placeholderSrc, + placeholderSrcset, + translatedNoJSMessage, + mediaInfo, + } = placeholderConfig ?? {}; + + const hasPlaceholder = Boolean(showPlaceholder && placeholderSrc); + + const showPortraitTitle = orientation === 'portrait' && !embedded; return ( <> @@ -238,40 +237,50 @@ const MediaLoader = ({ blocks, className, embedded }: Props) => { ) } - {orientation === 'portrait' && ( + {showPortraitTitle && ( Watch Moments )}
- {showAds && } - - {showPlaceholder ? ( - setIsPlaceholder(false)} + {isAmp ? ( + ) : ( - + <> + {showAds && } + + {hasPlaceholder ? ( + setShowPlaceholder(false)} + /> + ) : ( + + )} + )} {captionBlock && ( )}
diff --git a/src/app/components/MediaLoader/types.ts b/src/app/components/MediaLoader/types.ts index aaf14f5492a..039389d87f8 100644 --- a/src/app/components/MediaLoader/types.ts +++ b/src/app/components/MediaLoader/types.ts @@ -41,16 +41,16 @@ export type PlayerConfig = { }; export type PlayerUiConfig = { - skin?: string; + skin?: 'audio' | 'classic'; colour?: string; foreColour?: string; baseColour?: string; colourOnBaseColour?: string; fallbackBackgroundColour?: string; - controls: { enabled: boolean; volumeSlider?: boolean }; - locale: { lang: string }; - subtitles: { enabled: boolean; defaultOn: boolean }; - fullscreen: { enabled: boolean }; + controls?: { enabled: boolean; volumeSlider?: boolean }; + locale?: { lang: string }; + subtitles?: { enabled: boolean; defaultOn: boolean }; + fullscreen?: { enabled: boolean }; }; export type PlaylistItem = { @@ -64,7 +64,7 @@ export type PlaylistItem = { }; export type ConfigBuilderProps = { - id: string | null; + id: string; blocks: MediaBlock[]; basePlayerConfig: PlayerConfig; pageType: PageTypes; @@ -74,7 +74,6 @@ export type ConfigBuilderProps = { embedUrl?: string; embedded?: boolean; lang: string; - isAmp?: boolean; }; export type Orientations = 'landscape' | 'portrait'; @@ -91,6 +90,7 @@ export type ConfigBuilderReturnProps = { playerConfig: PlayerConfig; placeholderConfig?: PlaceholderConfig; showAds: boolean; + ampIframeUrl?: string; orientation?: Orientations; }; @@ -218,7 +218,7 @@ export type MediaBlock = | LiveRadioBlock; export type BuildConfigProps = { - id: string | null; + id: string; blocks: MediaBlock[]; counterName: string | null; statsDestination: string; diff --git a/src/app/components/MediaLoader/utils/buildPlaceholderConfig/index.ts b/src/app/components/MediaLoader/utils/buildPlaceholderConfig/index.ts index 6aac53a8b08..ef04d04bd21 100644 --- a/src/app/components/MediaLoader/utils/buildPlaceholderConfig/index.ts +++ b/src/app/components/MediaLoader/utils/buildPlaceholderConfig/index.ts @@ -32,7 +32,9 @@ export default ({ const durationTranslation = translations?.media?.duration || 'Duration'; - const translatedNoJSMessage = `This ${type} cannot play in your browser. Please enable JavaScript or try a different browser.`; + const translatedNoJSMessage = + translations?.media?.noJs || + `This ${type} cannot play in your browser. Please enable JavaScript or try a different browser.`; const placeholderSrcset = getPlaceholderSrcSet({ originCode: placeholderImageOriginCode, diff --git a/src/app/components/MediaLoader/utils/buildSettings.test.ts b/src/app/components/MediaLoader/utils/buildSettings.test.ts index 3c6d6950be3..85aa34906f5 100644 --- a/src/app/components/MediaLoader/utils/buildSettings.test.ts +++ b/src/app/components/MediaLoader/utils/buildSettings.test.ts @@ -62,7 +62,7 @@ describe('buildSettings', () => { }, enableToucan: true, externalEmbedUrl: - '/ws/av-embeds/cps/serbian/lat/srbija-68707945/p01thw22/sr-latn', + 'https://www.bbc.com/serbian/lat/av-embeds/srbija-68707945/vpid/p01thw22', appName: 'news-serbian', appType: 'responsive', counterName: 'live_coverage.testID.page', @@ -83,6 +83,7 @@ describe('buildSettings', () => { embedRights: 'allowed', }, ui: { + skin: 'classic', controls: { enabled: true }, locale: { lang: 'sr-latn' }, subtitles: { enabled: true, defaultOn: true }, @@ -161,6 +162,7 @@ describe('buildSettings', () => { embedRights: 'allowed', }, ui: { + skin: 'classic', controls: { enabled: true }, locale: { lang: 'sr-latn' }, subtitles: { enabled: true, defaultOn: true }, @@ -184,6 +186,8 @@ describe('buildSettings', () => { 'This video cannot play in your browser. Please enable JavaScript or try a different browser.', } satisfies PlaceholderConfig, showAds: false, + ampIframeUrl: + 'https://web-cdn.api.bbci.co.uk/ws/av-embeds/cps/serbian/lat/srbija-68707945/p01k6msp/sr-latn/amp', } satisfies ConfigBuilderReturnProps); }); @@ -224,6 +228,7 @@ describe('buildSettings', () => { embedRights: 'allowed', }, ui: { + skin: 'classic', controls: { enabled: true }, locale: { lang: 'sr-latn' }, subtitles: { enabled: true, defaultOn: true }, @@ -247,6 +252,8 @@ describe('buildSettings', () => { 'This video cannot play in your browser. Please enable JavaScript or try a different browser.', }, showAds: false, + ampIframeUrl: + 'https://web-cdn.api.bbci.co.uk/ws/av-embeds/cps/serbian/lat/srbija-68707945/p01k6msp/sr-latn/amp', } satisfies ConfigBuilderReturnProps); }); @@ -295,6 +302,7 @@ describe('buildSettings', () => { simulcast: true, }, ui: { + skin: 'classic', controls: { enabled: true }, locale: { lang: 'sr-latn' }, subtitles: { enabled: true, defaultOn: true }, @@ -341,6 +349,7 @@ describe('buildSettings', () => { embedRights: 'allowed', }, ui: { + skin: 'classic', controls: { enabled: true }, locale: { lang: 'sr-latn' }, subtitles: { enabled: true, defaultOn: true }, @@ -364,6 +373,8 @@ describe('buildSettings', () => { 'This video cannot play in your browser. Please enable JavaScript or try a different browser.', } satisfies PlaceholderConfig, showAds: false, + ampIframeUrl: + 'https://web-cdn.api.bbci.co.uk/ws/av-embeds/cps/serbian/lat/srbija-68707945/p01k6msp/sr-latn/amp', } satisfies ConfigBuilderReturnProps); }); it('Should process an AresMedia block with portrait video as the orientation', () => { @@ -436,31 +447,6 @@ describe('buildSettings', () => { expect(result?.orientation).toEqual('landscape'); }); - it('Should process an AresMedia block with landscape video as the orientation if embedded is true', () => { - const myFixture = [ - { - ...aresMediaBlock, - model: { - blocks: [ - { - ...buildAresMediaPlayerBlock({ - types: ['Portrait'], - }), - }, - ], - }, - }, - ] as unknown as MediaBlock[]; - - const result = buildSettings({ - ...baseSettings, - embedded: true, - blocks: myFixture, - }); - - expect(result?.orientation).toEqual('landscape'); - }); - it('Should return null if the AresMedia block contains invalid data.', () => { const sampleBlock = [ { @@ -657,6 +643,7 @@ describe('buildSettings', () => { episodePID: 'w172zm89sk8n4lc', }, ui: { + skin: 'classic', controls: { enabled: true }, fullscreen: { enabled: true }, locale: { @@ -696,8 +683,7 @@ describe('buildSettings', () => { 'https://ichef.bbci.co.uk/images/ic/$recipe/p0jlxsx8.jpg', placeholderSrcset: 'https://ichef.bbci.co.uk/images/ic/240xn/p0jlxsx8.jpg.webp 240w, https://ichef.bbci.co.uk/images/ic/320xn/p0jlxsx8.jpg.webp 320w, https://ichef.bbci.co.uk/images/ic/480xn/p0jlxsx8.jpg.webp 480w, https://ichef.bbci.co.uk/images/ic/624xn/p0jlxsx8.jpg.webp 624w, https://ichef.bbci.co.uk/images/ic/800xn/p0jlxsx8.jpg.webp 800w', - translatedNoJSMessage: - 'This video cannot play in your browser. Please enable JavaScript or try a different browser.', + translatedNoJSMessage: 'प्लेबैक आपके उपकरण पर नहीं हो पा रहा', }, showAds: false, }); @@ -984,7 +970,7 @@ describe('buildSettings', () => { enabled: true, }, skin: 'audio', - colour: '#B80000', + colour: '#b80000', foreColour: '#222222', baseColour: '#222222', colourOnBaseColour: '#ffffff', diff --git a/src/app/components/MediaLoader/utils/buildSettings.ts b/src/app/components/MediaLoader/utils/buildSettings.ts index 1830283490f..75ea173efeb 100644 --- a/src/app/components/MediaLoader/utils/buildSettings.ts +++ b/src/app/components/MediaLoader/utils/buildSettings.ts @@ -48,6 +48,7 @@ const buildSettings = ({ appType: isAmp ? 'amp' : 'responsive', appName: service !== 'news' ? `news-${service}` : 'news', ui: { + skin: 'classic', controls: { enabled: true }, locale: { lang: mediaOverrides?.language || lang || 'en' }, subtitles: { enabled: true, defaultOn: true }, @@ -72,7 +73,6 @@ const buildSettings = ({ showAdsBasedOnLocation, embedded, lang, - isAmp, }); if (!config) return null; diff --git a/src/app/legacy/components/MediaPlayer/Amp/__snapshots__/index.test.jsx.snap b/src/app/legacy/components/MediaPlayer/Amp/__snapshots__/index.test.jsx.snap deleted file mode 100644 index c02d2705eab..00000000000 --- a/src/app/legacy/components/MediaPlayer/Amp/__snapshots__/index.test.jsx.snap +++ /dev/null @@ -1,52 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Media Player: Amp should render an amp-iframe with an amp-img nested inside 1`] = ` -.emotion-0 { - position: relative; - height: 0; - overflow: hidden; - background-color: #F2F2F2; - -webkit-background-position: center center; - background-position: center center; - background-repeat: no-repeat; - -webkit-background-size: 60px 17px; - background-size: 60px 17px; - width: 100%; - background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSI0NzkiIGhlaWdodD0iMTM2IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PGcgZmlsbD0iI0Q1RDBDRCI+PGc+PHBhdGggZD0iTTQ0OS41NTYgOTEuNTUzbC0yLjMxIDEuNDFjLTExLjE2NyA2LjgxOC0yMy4zMTMgMTAuNDc0LTM0LjM0NiAxMC40Ny0yMy42MS0uMDktMzkuMTYzLTE0LjA4My0zOS4yMjctMzQuNDUzLjAzLTE5LjkxOCAxNi4yNy0zNC42NjMgMzguNjMzLTM0LjcxOCAxMS4zODcuMDEgMjEuNzAzIDIuOTU0IDMzLjk2MiA5LjY3MmwyLjI1MSAxLjI0di0xOC4xOWwtLjk2Mi0uMzc3Yy0xMy44MjQtNS40NTgtMjQuNTMtNy44OS0zNS4xMDMtNy44ODQtMTYuMzQ2LS4wMDYtMzAuNTMzIDUuMzk0LTQwLjYzNyAxNC41NTctMTAuMTA1IDkuMTYzLTE2LjEwNiAyMi4xMDItMTYuMDk5IDM2Ljk1My4wMDggMTAuMzQ4IDQuMjc5IDIyLjQ4IDEzLjQyIDMyLjEwNSA5LjEyMSA5LjYyOCAyMy4xNjUgMTYuNjQ4IDQyLjQzIDE2LjYzOWguMDYzYzE1Ljk4IDAgMjcuMDYyLTMuNTYzIDM3LjA3NC04LjQ5MmwuODUxLS40MTRWOTEuNTUzek0zMzQgMTM1LjY5N2gxNDQuMTk1VjBIMzM0djEzNS42OTd6Ii8+PHBhdGggZD0iTTI3Ni45MzcgODkuOTY4Yy4wNDEtMTIuMzMtOC4xNzEtMjEuNjk2LTIxLjMwOC0yNS4zIDMuNTQ0LTEuODA5IDYuMzUtNC4wMjMgOC40MDQtNi43MjcgMi43NS0zLjYyMiA0LjA2MS04LjA2NCA0LjA0Ni0xMy4yMzUuMDE1LTYuMzU5LTIuNDg2LTEyLjgzOS03Ljg1OC0xNy42ODctNS4zNzItNC44NDctMTMuNTI2LTcuOTk3LTI0LjY1NC03Ljk5MUgyMDQuODN2OTcuNzI4aDM2LjA3M2MxMi44NyAwIDIxLjkwNi0zLjQ4MiAyNy43MjItOC42NSA1LjgxOC01LjE1NSA4LjMyLTExLjkxIDguMzEyLTE4LjEzOHpNMTY3IDEzNS42OThoMTQ0LjE5N1YwSDE2N3YxMzUuNjk3eiIvPjxwYXRoIGQ9Ik0xMDkuOTM3IDg5Ljk2OGMuMDQxLTEyLjMzLTguMTcxLTIxLjY5Ni0yMS4zMDgtMjUuMyAzLjU0NC0xLjgwOSA2LjM1LTQuMDIzIDguNDA0LTYuNzI3IDIuNzUtMy42MjIgNC4wNjEtOC4wNjQgNC4wNDYtMTMuMjM1LjAxNS02LjM1OS0yLjQ4Ni0xMi44MzktNy44NTgtMTcuNjg3LTUuMzcyLTQuODQ3LTEzLjUyNi03Ljk5Ny0yNC42NTQtNy45OTFIMzcuODN2OTcuNzI4aDM2LjA3M2MxMi44NyAwIDIxLjkwNi0zLjQ4MiAyNy43MjItOC42NSA1LjgxOC01LjE1NSA4LjMyLTExLjkxIDguMzEyLTE4LjEzOHpNMCAxMzUuNjk4aDE0NC4xOTdWMEgwdjEzNS42OTd6Ii8+PHBhdGggZD0iTTI1OC42NjIgODguMTk4Yy0uMDEzIDMuMjI5LTEuMDA3IDYuNDc1LTMuODk2IDkuMDExLTIuODg0IDIuNTM3LTcuODczIDQuNDYzLTE2LjEzMyA0LjQ2M0gyMjJWNzVoMTUuODkzYzcuNDExIDAgMTIuNjcgMS41MDIgMTUuOTY1IDMuODUgMy4yODkgMi4zNjIgNC43NzYgNS40NjMgNC44MDQgOS4zNDgiLz48cGF0aCBkPSJNOTEuNjYyIDg4LjE5OGMtLjAxMyAzLjIyOS0xLjAwNyA2LjQ3NS0zLjg5NiA5LjAxMS0yLjg4NCAyLjUzNy03Ljg3NCA0LjQ2My0xNi4xMzMgNC40NjNINTVWNzVoMTUuODkyYzcuNDEyIDAgMTIuNjcyIDEuNTAyIDE1Ljk2NiAzLjg1IDMuMjg5IDIuMzYyIDQuNzc2IDUuNDYzIDQuODA0IDkuMzQ4Ii8+PHBhdGggZD0iTTI0NS4xODYgNTUuNzljMy4wOTYtMi4yMzcgNC41OS01LjM4NiA0LjYxMy0xMC4xMjQtLjAxNS0zLjI1LS45NDMtNi4wMzMtMy4yODEtOC4xMTEtMi4zNDYtMi4wNzgtNi4zMy0zLjU1NS0xMi43NTQtMy41NTVIMjIydjI1LjI3NWg4LjA3NmM2Ljk4OC4wMDQgMTEuOTk4LTEuMjQzIDE1LjExLTMuNDg2Ii8+PHBhdGggZD0iTTc4LjE4NiA1NS43OWMzLjA5Ni0yLjIzNyA0LjU5LTUuMzg2IDQuNjEzLTEwLjEyNC0uMDE1LTMuMjUtLjk0My02LjAzMy0zLjI4Mi04LjExMUM3Ny4xNzIgMzUuNDc3IDczLjE4OCAzNCA2Ni43NjQgMzRINTV2MjUuMjc1aDguMDc2YzYuOTg4LjAwNCAxMS45OTgtMS4yNDMgMTUuMTEtMy40ODYiLz48L2c+PC9nPjwvZz48L3N2Zz4K); -} - -@media (min-width: 25rem) { - .emotion-0 { - -webkit-background-size: 77px 22px; - background-size: 77px 22px; - } -} - -@media (min-width: 63rem) { - .emotion-0 { - -webkit-background-size: 93px 27px; - background-size: 93px 27px; - } -} - -
- -
-
-`; diff --git a/src/app/legacy/components/MediaPlayer/Amp/index.test.jsx b/src/app/legacy/components/MediaPlayer/Amp/index.test.jsx deleted file mode 100644 index de1f0410c2d..00000000000 --- a/src/app/legacy/components/MediaPlayer/Amp/index.test.jsx +++ /dev/null @@ -1,37 +0,0 @@ -import React from 'react'; -import { render } from '../../../../components/react-testing-library-with-providers'; -import Amp from '.'; - -describe('Media Player: Amp', () => { - it('should render an amp-iframe with an amp-img nested inside', () => { - const { container } = render( - , - ); - expect(container).toMatchSnapshot(); - }); - - it('should contain the noscript tag for use in non-JS scenarios ', () => { - render( - , - ); - expect(document.querySelector('noscript')).toBeInTheDocument(); - }); -}); diff --git a/src/app/legacy/components/MediaPlayer/AudioLoader/__snapshots__/index.test.jsx.snap b/src/app/legacy/components/MediaPlayer/AudioLoader/__snapshots__/index.test.jsx.snap deleted file mode 100644 index 1781536c475..00000000000 --- a/src/app/legacy/components/MediaPlayer/AudioLoader/__snapshots__/index.test.jsx.snap +++ /dev/null @@ -1,99 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Audio Loader should match snapshot 1`] = ` -@keyframes animation-0 { - to { - -webkit-transform: rotate(360deg); - -moz-transform: rotate(360deg); - -ms-transform: rotate(360deg); - transform: rotate(360deg); - } -} - -.emotion-0 { - position: relative; -} - -.emotion-2 { - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: center; - -ms-flex-pack: center; - -webkit-justify-content: center; - justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; -} - -.no-js .emotion-2 { - display: none; -} - -.emotion-4 { - width: 64px; - height: 64px; - stroke: currentColor; - will-change: transform; -} - -@media screen and (-ms-high-contrast: active) { - .emotion-4 { - stroke: windowText; - } -} - -@media (prefers-reduced-motion: no-preference) { - .emotion-4 { - -webkit-animation: animation-0 1.1s 3 linear; - animation: animation-0 1.1s 3 linear; - } -} - -
-
- - Content -
-
-`; diff --git a/src/app/legacy/components/MediaPlayer/AudioLoader/index.jsx b/src/app/legacy/components/MediaPlayer/AudioLoader/index.jsx deleted file mode 100644 index e65245b6d4e..00000000000 --- a/src/app/legacy/components/MediaPlayer/AudioLoader/index.jsx +++ /dev/null @@ -1,69 +0,0 @@ -import React from 'react'; -import styled from '@emotion/styled'; - -import { keyframes } from '@emotion/react'; - -const Wrapper = styled.div` - position: relative; -`; - -const Overlay = styled.div` - .no-js & { - display: none; - } - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - display: flex; - justify-content: center; - align-items: center; -`; - -const spin = keyframes` - to { - transform: rotate(360deg); - } -`; - -// Using pixels here as SMP does not change size based on user's font size -const Spinner = styled.svg` - width: 64px; - height: 64px; - - stroke: currentColor; - @media screen and (-ms-high-contrast: active) { - stroke: windowText; - } - - will-change: transform; - @media (prefers-reduced-motion: no-preference) { - animation: ${spin} 1.1s 3 linear; - } -`; - -const AudioLoader = ({ children, isLoading = false }) => ( - - {isLoading && ( - - )} - {children} - -); - -export default AudioLoader; diff --git a/src/app/legacy/components/MediaPlayer/AudioLoader/index.test.jsx b/src/app/legacy/components/MediaPlayer/AudioLoader/index.test.jsx deleted file mode 100644 index 6244032eb51..00000000000 --- a/src/app/legacy/components/MediaPlayer/AudioLoader/index.test.jsx +++ /dev/null @@ -1,43 +0,0 @@ -import React from 'react'; -import { render } from '@testing-library/react'; -import { - shouldMatchSnapshot, - suppressPropWarnings, -} from '#psammead/psammead-test-helpers/src'; - -import AudioLoader from '.'; - -describe('Audio Loader', () => { - suppressPropWarnings(['children', 'string']); - shouldMatchSnapshot( - 'should match snapshot', - Content, - ); - - it('should transclude the children', () => { - const { getByText } = render(Test Content); - - expect(getByText('Test Content')).toBeInTheDocument(); - }); - - it('should NOT render an overlay by default', () => { - const { container } = render(Test Content); - - const overlay = container.querySelector( - '[data-testid=audio-loader-overlay]', - ); - expect(overlay).not.toBeInTheDocument(); - }); - - it('should render an aria-hidden overlay when isLoading is true', () => { - const { container } = render( - Test Content, - ); - - const overlay = container.querySelector( - '[data-testid=audio-loader-overlay]', - ); - expect(overlay).toBeInTheDocument(); - expect(overlay.getAttribute('aria-hidden')).toEqual('true'); - }); -}); diff --git a/src/app/legacy/components/MediaPlayer/Canonical/__snapshots__/index.test.jsx.snap b/src/app/legacy/components/MediaPlayer/Canonical/__snapshots__/index.test.jsx.snap deleted file mode 100644 index 134ad8d533f..00000000000 --- a/src/app/legacy/components/MediaPlayer/Canonical/__snapshots__/index.test.jsx.snap +++ /dev/null @@ -1,28 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Media Player: Canonical should render an iframe 1`] = ` -.emotion-0 { - border: 0; - left: 0; - overflow: hidden; - position: absolute; - top: 0; - width: 100%; - height: 100%; -} - -
-