diff --git a/scripts/bundleSize/bundleSizeConfig.js b/scripts/bundleSize/bundleSizeConfig.js index 69f5506d3b2..2b910aaee43 100644 --- a/scripts/bundleSize/bundleSizeConfig.js +++ b/scripts/bundleSize/bundleSizeConfig.js @@ -9,5 +9,5 @@ export const VARIANCE = 5; -export const MIN_SIZE = 940; -export const MAX_SIZE = 1328; +export const MIN_SIZE = 938; +export const MAX_SIZE = 1319; diff --git a/src/app/components/MediaLoader/Placeholder/WithSustainabilityMessage/MediaIndicator/index.styles.tsx b/src/app/components/MediaLoader/Placeholder/WithSustainabilityMessage/MediaIndicator/index.styles.tsx deleted file mode 100644 index 05efbf8c216..00000000000 --- a/src/app/components/MediaLoader/Placeholder/WithSustainabilityMessage/MediaIndicator/index.styles.tsx +++ /dev/null @@ -1,48 +0,0 @@ -import NO_JS_CLASSNAME from '#app/lib/noJs.const'; -import pixelsToRem from '#app/utilities/pixelsToRem'; -import { css, Theme } from '@emotion/react'; - -const styles = { - mediaIcon: ({ palette, fontVariants, fontSizes, spacings }: Theme) => - css({ - display: 'flex', - alignItems: 'center', - backgroundColor: palette.WHITE, - border: 'none', - color: palette.BLACK, - cursor: 'pointer', - ...fontVariants.sansRegular, - ...fontSizes.minion, - padding: `${spacings.FULL}rem`, - position: 'absolute', - bottom: '0', - insetInlineStart: '0', - zIndex: '2', - [`.${NO_JS_CLASSNAME} &`]: { - display: 'none', - }, - [`@media (max-width: ${pixelsToRem(300)}rem)`]: { - display: 'none', - }, - }), - item: ({ spacings }: Theme) => - css({ - display: 'flex', - alignItems: 'center', - lineHeight: `${spacings.DOUBLE}rem`, - }), - iconWrapper: ({ palette }: Theme) => - css({ - '& > svg': { - color: palette.BLACK, - fill: 'currentcolor', - margin: '0', - }, - }), - timeDuration: ({ spacings }: Theme) => - css({ - margin: `0 0 0 ${spacings.FULL}rem`, - }), -}; - -export default styles; diff --git a/src/app/components/MediaLoader/Placeholder/WithSustainabilityMessage/MediaIndicator/index.test.tsx b/src/app/components/MediaLoader/Placeholder/WithSustainabilityMessage/MediaIndicator/index.test.tsx deleted file mode 100644 index 5ba24ba66e2..00000000000 --- a/src/app/components/MediaLoader/Placeholder/WithSustainabilityMessage/MediaIndicator/index.test.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import { render } from '../../../../react-testing-library-with-providers'; -import MediaIcon from '.'; - -describe('MediaIcon', () => { - afterEach(() => { - jest.resetAllMocks(); - }); - - it(`should render a mini play button`, () => { - const { container } = render( - , - { - service: 'mundo', - }, - ); - const guidanceMessage = container?.querySelector('strong')?.innerHTML; - const time = container?.querySelector('time')?.innerHTML; - - expect(guidanceMessage).toEqual('Video, "My Video", 2 minutes 30 seconds'); - expect(time).toEqual('2:30'); - }); -}); diff --git a/src/app/components/MediaLoader/Placeholder/WithSustainabilityMessage/MediaIndicator/index.tsx b/src/app/components/MediaLoader/Placeholder/WithSustainabilityMessage/MediaIndicator/index.tsx deleted file mode 100644 index c65331b7a81..00000000000 --- a/src/app/components/MediaLoader/Placeholder/WithSustainabilityMessage/MediaIndicator/index.tsx +++ /dev/null @@ -1,52 +0,0 @@ -import VisuallyHiddenText from '#app/components/VisuallyHiddenText'; -import { mediaIcons } from '#psammead/psammead-assets/src/svgs'; -import { ReactElement } from 'react'; -import style from './index.styles'; - -type MediaIndicatorProps = { - datetime?: string; - duration?: string; - durationSpoken?: string; - type?: string; - title?: string; - guidanceMessage?: string | null; -}; - -const MediaIndicator = ({ - datetime, - duration, - durationSpoken, - type = 'Video', - title = '', -}: MediaIndicatorProps) => { - const hiddenText = `${type}, ${ - datetime && duration && durationSpoken - ? `"${title}", ${durationSpoken}` - : `"${title}"` - } `.trim(); - - const hasDuration = datetime && duration && durationSpoken; - - return ( -
-

- {hiddenText} -

- - {hasDuration && ( - - )} -
- ); -}; - -export default MediaIndicator; diff --git a/src/app/components/MediaLoader/Placeholder/WithSustainabilityMessage/Message/__snapshots__/index.test.tsx.snap b/src/app/components/MediaLoader/Placeholder/WithSustainabilityMessage/Message/__snapshots__/index.test.tsx.snap deleted file mode 100644 index 1db27729314..00000000000 --- a/src/app/components/MediaLoader/Placeholder/WithSustainabilityMessage/Message/__snapshots__/index.test.tsx.snap +++ /dev/null @@ -1,218 +0,0 @@ -// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing - -exports[`Message should render a 'Help reduce your power consumption' message 1`] = ` -.emotion-0 { - position: absolute; - color: #FFFFFF; - padding: 0.5rem; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-flex-wrap: nowrap; - -webkit-flex-wrap: nowrap; - -ms-flex-wrap: nowrap; - flex-wrap: nowrap; - background: rgba(14, 98, 0, 0.9); - height: 100%; - width: 100%; - z-index: 1; -} - -.no-js .emotion-0 { - display: none; -} - -@media (min-width: 25rem) { - .emotion-0 { - inset-inline-start: calc(100% - 15.625rem); - width: 15.625rem; - height: unset; - } -} - -@media (max-width: 18.75rem) { - .emotion-0 { - padding: 1rem; - } -} - -.emotion-1 { - fill: #FFFFFF; - margin-top: 0.125rem; - -webkit-margin-end: 0.5rem; - margin-inline-end: 0.5rem; - -webkit-margin-start: 0.25rem; - margin-inline-start: 0.25rem; -} - -@media screen and (forced-colors: active) { - .emotion-1 path { - fill: currentColor; - } -} - -@media (max-width: 18.75rem) { - .emotion-1 { - display: none; - } -} - -.emotion-2 { - color: #141414; - font-size: 0.9375rem; - line-height: 1.25rem; - font-family: ReithSans,Helvetica,Arial,sans-serif; - font-style: normal; - font-weight: 400; - margin: 0; - color: #FFFFFF; -} - -@media (min-width: 20rem) and (max-width: 37.4375rem) { - .emotion-2 { - font-size: 1rem; - line-height: 1.375rem; - } -} - -@media (min-width: 37.5rem) { - .emotion-2 { - font-size: 1rem; - line-height: 1.375rem; - } -} - -.emotion-3 { - margin: 1rem 0 0.25rem 0; -} - -.emotion-4 { - all: unset; -} - -.emotion-4:focus { - outline: 0.1875rem solid #000000; - box-shadow: 0 0 0 0.1875rem #FFFFFF; - outline-offset: 0.1875rem; -} - -.emotion-5 { - fill: #FFFFFF; - margin: 0 0.2rem 0 0; -} - -@media screen and (forced-colors: active) { - .emotion-5 path { - fill: currentColor; - } -} - -.emotion-6 { - color: #141414; - font-size: 0.9375rem; - line-height: 1.25rem; - font-family: ReithSans,Helvetica,Arial,sans-serif; - font-style: normal; - font-weight: 400; - margin: 0; - color: #FFFFFF; - border-bottom: 0.0625rem solid #FFFFFF; -} - -@media (min-width: 20rem) and (max-width: 37.4375rem) { - .emotion-6 { - font-size: 1rem; - line-height: 1.375rem; - } -} - -@media (min-width: 37.5rem) { - .emotion-6 { - font-size: 1rem; - line-height: 1.375rem; - } -} - -.mediaLoaderPlaceholder:hover .emotion-6, -.mediaLoaderPlaceholder:focus .emotion-6 { - border-bottom: 0.125rem solid #FFFFFF; -} - -.emotion-7 { - -webkit-clip-path: inset(100%); - clip-path: inset(100%); - clip: rect(1px, 1px, 1px, 1px); - height: 1px; - overflow: hidden; - position: absolute; - width: 1px; - margin: 0; -} - -
-
- -
-
-

- Ayude a reducir su uso de energía y datos al no reproducir contenido de video. -

-
-
- -
-
-
-
-`; diff --git a/src/app/components/MediaLoader/Placeholder/WithSustainabilityMessage/Message/index.styles.tsx b/src/app/components/MediaLoader/Placeholder/WithSustainabilityMessage/Message/index.styles.tsx deleted file mode 100644 index 5a965987e51..00000000000 --- a/src/app/components/MediaLoader/Placeholder/WithSustainabilityMessage/Message/index.styles.tsx +++ /dev/null @@ -1,85 +0,0 @@ -import { focusIndicatorThickness } from '#app/components/ThemeProvider/focusIndicator'; -import pixelsToRem from '#app/utilities/pixelsToRem'; -import { css, Theme } from '@emotion/react'; -import NO_JS_CLASSNAME from '#app/lib/noJs.const'; - -const WIDTH = 250; -const BUTTON_COLLAPSE_WIDTH = pixelsToRem(300); - -const styles = { - container: ({ palette, spacings, mq }: Theme) => - css({ - position: 'absolute', - color: palette.WHITE, - padding: `${spacings.FULL}rem`, - display: 'flex', - flexWrap: 'nowrap', - background: `rgba(14, 98, 0, 0.9)`, - height: '100%', - width: '100%', - zIndex: '1', - [`.${NO_JS_CLASSNAME} &`]: { - display: 'none', - }, - [mq.GROUP_2_MIN_WIDTH]: { - insetInlineStart: `calc(100% - ${pixelsToRem(WIDTH)}rem)`, - width: `${pixelsToRem(WIDTH)}rem`, - height: 'unset', - }, - [`@media (max-width: ${BUTTON_COLLAPSE_WIDTH}rem)`]: { - padding: `${spacings.DOUBLE}rem`, - }, - }), - icon: ({ mq, palette }: Theme) => - css({ - fill: palette.WHITE, - [mq.FORCED_COLOURS]: { - path: { - fill: 'currentColor', - }, - }, - }), - fanIcon: ({ spacings }: Theme) => - css({ - marginTop: `${pixelsToRem(2)}rem`, - marginInlineEnd: `${spacings.FULL}rem`, - marginInlineStart: `${spacings.HALF}rem`, - }), - plusIcon: () => - css({ - margin: `0 0.2rem 0 0`, - }), - collapsable: () => - css({ - [`@media (max-width: ${BUTTON_COLLAPSE_WIDTH}rem)`]: { - display: 'none', - }, - }), - message: ({ palette }: Theme) => - css({ - margin: '0', - color: palette.WHITE, - }), - underline: ({ palette }: Theme) => - css({ - borderBottom: `${pixelsToRem(1)}rem solid ${palette.WHITE}`, - '.mediaLoaderPlaceholder:hover &, .mediaLoaderPlaceholder:focus &': { - borderBottom: `${pixelsToRem(2)}rem solid ${palette.WHITE}`, - }, - }), - loadVideoContainer: ({ spacings }: Theme) => - css({ - margin: `${spacings.DOUBLE}rem 0 ${spacings.HALF}rem 0`, - }), - loadVideo: ({ palette }: Theme) => - css({ - all: 'unset', - '&:focus': { - outline: `${focusIndicatorThickness} solid ${palette.BLACK}`, - boxShadow: `0 0 0 ${focusIndicatorThickness} ${palette.WHITE}`, - outlineOffset: `${focusIndicatorThickness}`, - }, - }), -}; - -export default styles; diff --git a/src/app/components/MediaLoader/Placeholder/WithSustainabilityMessage/Message/index.test.tsx b/src/app/components/MediaLoader/Placeholder/WithSustainabilityMessage/Message/index.test.tsx deleted file mode 100644 index 77eb9a3cb8a..00000000000 --- a/src/app/components/MediaLoader/Placeholder/WithSustainabilityMessage/Message/index.test.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import { render } from '../../../../react-testing-library-with-providers'; -import Message from '.'; - -describe('Message', () => { - afterEach(() => { - jest.resetModules(); - }); - - it(`should render a 'Help reduce your power consumption' message`, () => { - const { container } = render(, { - service: 'mundo', - }); - const text = container.querySelector('p')?.innerHTML; - - expect(text).toEqual( - 'Ayude a reducir su uso de energía y datos al no reproducir contenido de video.', - ); - expect(container).toMatchSnapshot(); - }); -}); diff --git a/src/app/components/MediaLoader/Placeholder/WithSustainabilityMessage/Message/index.tsx b/src/app/components/MediaLoader/Placeholder/WithSustainabilityMessage/Message/index.tsx deleted file mode 100644 index e44d3047547..00000000000 --- a/src/app/components/MediaLoader/Placeholder/WithSustainabilityMessage/Message/index.tsx +++ /dev/null @@ -1,61 +0,0 @@ -import { use, useId } from 'react'; -import { ServiceContext } from '#app/contexts/ServiceContext'; -import Text from '#app/components/Text'; -import VisuallyHiddenText from '#app/components/VisuallyHiddenText'; -import { Fan, Plus } from '#app/components/icons'; -import styles from './index.styles'; - -const DEFAULT_MESSAGE = - 'Help reduce your power and data usage by not playing video content.'; -const DEFAULT_LOAD_TITLE = 'Load Video'; - -type Props = { - title?: string; -}; - -const Message = ({ title = '' }: Props) => { - const { - translations: { - media: { sustainabilitySignpost, loadVideo }, - }, - } = use(ServiceContext); - const idRef = useId(); - - const message = sustainabilitySignpost ?? DEFAULT_MESSAGE; - const buttonLabel = loadVideo ?? DEFAULT_LOAD_TITLE; - - return ( -
- -
-
- - {message} - -
-
- -
-
-
- ); -}; - -export default Message; diff --git a/src/app/components/MediaLoader/Placeholder/WithSustainabilityMessage/MessageNoJs/index.styles.tsx b/src/app/components/MediaLoader/Placeholder/WithSustainabilityMessage/MessageNoJs/index.styles.tsx deleted file mode 100644 index 1a8cff34feb..00000000000 --- a/src/app/components/MediaLoader/Placeholder/WithSustainabilityMessage/MessageNoJs/index.styles.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import pixelsToRem from '#app/utilities/pixelsToRem'; -import { css, Theme } from '@emotion/react'; - -const WIDTH = 250; - -const styles = { - container: ({ palette, spacings, mq }: Theme) => - css({ - textAlign: 'start', - position: 'absolute', - color: palette.WHITE, - padding: `${spacings.DOUBLE}rem`, - background: `rgba(34, 34, 34, 0.75)`, - height: '100%', - width: '100%', - zIndex: '1', - [mq.GROUP_1_MIN_WIDTH]: { - textAlign: 'end', - insetInlineStart: `calc(100% - ${pixelsToRem(WIDTH)}rem)`, - width: `${pixelsToRem(WIDTH)}rem`, - height: 'unset', - }, - }), - message: ({ palette }: Theme) => - css({ - color: palette.WHITE, - margin: '0', - }), -}; - -export default styles; diff --git a/src/app/components/MediaLoader/Placeholder/WithSustainabilityMessage/MessageNoJs/index.test.tsx b/src/app/components/MediaLoader/Placeholder/WithSustainabilityMessage/MessageNoJs/index.test.tsx deleted file mode 100644 index 7392617c5fc..00000000000 --- a/src/app/components/MediaLoader/Placeholder/WithSustainabilityMessage/MessageNoJs/index.test.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import { render } from '../../../../react-testing-library-with-providers'; -import MessageNoJs from '.'; - -describe('Message No JS', () => { - afterEach(() => { - jest.resetModules(); - }); - - it(`should render a 'Help reduce your power consumption' message`, () => { - const { container } = render( - , - { - service: 'mundo', - }, - ); - expect(container.querySelector('noscript')).toBeInTheDocument(); - }); -}); diff --git a/src/app/components/MediaLoader/Placeholder/WithSustainabilityMessage/MessageNoJs/index.tsx b/src/app/components/MediaLoader/Placeholder/WithSustainabilityMessage/MessageNoJs/index.tsx deleted file mode 100644 index 44ee7b64a7a..00000000000 --- a/src/app/components/MediaLoader/Placeholder/WithSustainabilityMessage/MessageNoJs/index.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import Text from '#app/components/Text'; -import styles from './index.styles'; - -type Props = { - noJsMessage: string; -}; - -const MessageNoJs = ({ noJsMessage }: Props) => { - return ( - - ); -}; - -export default MessageNoJs; 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 a3403b32ad8..bb874b1d3fc 100644 --- a/src/app/components/MediaLoader/Placeholder/__snapshots__/index.test.tsx.snap +++ b/src/app/components/MediaLoader/Placeholder/__snapshots__/index.test.tsx.snap @@ -329,432 +329,6 @@ exports[`Media Player: Placeholder should render a video placeholder 1`] = ` `; -exports[`Media Player: Placeholder should render a video placeholder with Sustainability message if Transcript is provided 1`] = ` -.emotion-0 { - position: relative; - cursor: pointer; - height: 100%; -} - -.no-js .emotion-0 { - cursor: default; -} - -@media screen and (forced-colors: active) { - .emotion-0:hover>button, - .emotion-0:focus>button { - background-color: canvas; - border: 0.1875rem solid canvasText; - } - - .emotion-0:hover>button>time, - .emotion-0:focus>button>time { - -webkit-text-decoration: underline; - text-decoration: underline; - } -} - -.emotion-1 { - position: absolute; - color: #FFFFFF; - padding: 0.5rem; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-flex-wrap: nowrap; - -webkit-flex-wrap: nowrap; - -ms-flex-wrap: nowrap; - flex-wrap: nowrap; - background: rgba(14, 98, 0, 0.9); - height: 100%; - width: 100%; - z-index: 1; -} - -.no-js .emotion-1 { - display: none; -} - -@media (min-width: 25rem) { - .emotion-1 { - inset-inline-start: calc(100% - 15.625rem); - width: 15.625rem; - height: unset; - } -} - -@media (max-width: 18.75rem) { - .emotion-1 { - padding: 1rem; - } -} - -.emotion-2 { - fill: #FFFFFF; - margin-top: 0.125rem; - -webkit-margin-end: 0.5rem; - margin-inline-end: 0.5rem; - -webkit-margin-start: 0.25rem; - margin-inline-start: 0.25rem; -} - -@media screen and (forced-colors: active) { - .emotion-2 path { - fill: currentColor; - } -} - -@media (max-width: 18.75rem) { - .emotion-2 { - display: none; - } -} - -.emotion-3 { - color: #141414; - font-size: 0.9375rem; - line-height: 1.25rem; - font-family: ReithSans,Helvetica,Arial,sans-serif; - font-style: normal; - font-weight: 400; - margin: 0; - color: #FFFFFF; -} - -@media (min-width: 20rem) and (max-width: 37.4375rem) { - .emotion-3 { - font-size: 1rem; - line-height: 1.375rem; - } -} - -@media (min-width: 37.5rem) { - .emotion-3 { - font-size: 1rem; - line-height: 1.375rem; - } -} - -.emotion-4 { - margin: 1rem 0 0.25rem 0; -} - -.emotion-5 { - all: unset; -} - -.emotion-5:focus { - outline: 0.1875rem solid #000000; - box-shadow: 0 0 0 0.1875rem #FFFFFF; - outline-offset: 0.1875rem; -} - -.emotion-6 { - fill: #FFFFFF; - margin: 0 0.2rem 0 0; -} - -@media screen and (forced-colors: active) { - .emotion-6 path { - fill: currentColor; - } -} - -.emotion-7 { - color: #141414; - font-size: 0.9375rem; - line-height: 1.25rem; - font-family: ReithSans,Helvetica,Arial,sans-serif; - font-style: normal; - font-weight: 400; - margin: 0; - color: #FFFFFF; - border-bottom: 0.0625rem solid #FFFFFF; -} - -@media (min-width: 20rem) and (max-width: 37.4375rem) { - .emotion-7 { - font-size: 1rem; - line-height: 1.375rem; - } -} - -@media (min-width: 37.5rem) { - .emotion-7 { - font-size: 1rem; - line-height: 1.375rem; - } -} - -.mediaLoaderPlaceholder:hover .emotion-7, -.mediaLoaderPlaceholder:focus .emotion-7 { - border-bottom: 0.125rem solid #FFFFFF; -} - -.emotion-8 { - -webkit-clip-path: inset(100%); - clip-path: inset(100%); - clip: rect(1px, 1px, 1px, 1px); - height: 1px; - overflow: hidden; - position: absolute; - width: 1px; - margin: 0; -} - -.emotion-9 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - background-color: #FFFFFF; - border: none; - color: #000000; - cursor: pointer; - font-family: ReithSans,Helvetica,Arial,sans-serif; - font-style: normal; - font-weight: 400; - font-size: 0.75rem; - line-height: 1rem; - padding: 0.5rem; - position: absolute; - bottom: 0; - inset-inline-start: 0; - z-index: 2; -} - -@media (min-width: 20rem) and (max-width: 37.4375rem) { - .emotion-9 { - font-size: 0.75rem; - line-height: 1rem; - } -} - -@media (min-width: 37.5rem) { - .emotion-9 { - font-size: 0.75rem; - line-height: 1rem; - } -} - -.no-js .emotion-9 { - display: none; -} - -@media (max-width: 18.75rem) { - .emotion-9 { - display: none; - } -} - -.emotion-11 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - line-height: 1rem; -} - -.emotion-11>svg { - color: #000000; - fill: currentcolor; - margin: 0; -} - -.emotion-12 { - vertical-align: middle; - margin: 0 0.25rem; - color: #222222; - fill: currentColor; - width: 0.75rem; - height: 0.75rem; -} - -.emotion-14 { - margin: 0 0 0 0.5rem; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - line-height: 1rem; -} - -.emotion-15 { - position: relative; - height: 100%; - background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSI0NzkiIGhlaWdodD0iMTM2IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PGcgZmlsbD0iI0Q1RDBDRCI+PGc+PHBhdGggZD0iTTQ0OS41NTYgOTEuNTUzbC0yLjMxIDEuNDFjLTExLjE2NyA2LjgxOC0yMy4zMTMgMTAuNDc0LTM0LjM0NiAxMC40Ny0yMy42MS0uMDktMzkuMTYzLTE0LjA4My0zOS4yMjctMzQuNDUzLjAzLTE5LjkxOCAxNi4yNy0zNC42NjMgMzguNjMzLTM0LjcxOCAxMS4zODcuMDEgMjEuNzAzIDIuOTU0IDMzLjk2MiA5LjY3MmwyLjI1MSAxLjI0di0xOC4xOWwtLjk2Mi0uMzc3Yy0xMy44MjQtNS40NTgtMjQuNTMtNy44OS0zNS4xMDMtNy44ODQtMTYuMzQ2LS4wMDYtMzAuNTMzIDUuMzk0LTQwLjYzNyAxNC41NTctMTAuMTA1IDkuMTYzLTE2LjEwNiAyMi4xMDItMTYuMDk5IDM2Ljk1My4wMDggMTAuMzQ4IDQuMjc5IDIyLjQ4IDEzLjQyIDMyLjEwNSA5LjEyMSA5LjYyOCAyMy4xNjUgMTYuNjQ4IDQyLjQzIDE2LjYzOWguMDYzYzE1Ljk4IDAgMjcuMDYyLTMuNTYzIDM3LjA3NC04LjQ5MmwuODUxLS40MTRWOTEuNTUzek0zMzQgMTM1LjY5N2gxNDQuMTk1VjBIMzM0djEzNS42OTd6Ii8+PHBhdGggZD0iTTI3Ni45MzcgODkuOTY4Yy4wNDEtMTIuMzMtOC4xNzEtMjEuNjk2LTIxLjMwOC0yNS4zIDMuNTQ0LTEuODA5IDYuMzUtNC4wMjMgOC40MDQtNi43MjcgMi43NS0zLjYyMiA0LjA2MS04LjA2NCA0LjA0Ni0xMy4yMzUuMDE1LTYuMzU5LTIuNDg2LTEyLjgzOS03Ljg1OC0xNy42ODctNS4zNzItNC44NDctMTMuNTI2LTcuOTk3LTI0LjY1NC03Ljk5MUgyMDQuODN2OTcuNzI4aDM2LjA3M2MxMi44NyAwIDIxLjkwNi0zLjQ4MiAyNy43MjItOC42NSA1LjgxOC01LjE1NSA4LjMyLTExLjkxIDguMzEyLTE4LjEzOHpNMTY3IDEzNS42OThoMTQ0LjE5N1YwSDE2N3YxMzUuNjk3eiIvPjxwYXRoIGQ9Ik0xMDkuOTM3IDg5Ljk2OGMuMDQxLTEyLjMzLTguMTcxLTIxLjY5Ni0yMS4zMDgtMjUuMyAzLjU0NC0xLjgwOSA2LjM1LTQuMDIzIDguNDA0LTYuNzI3IDIuNzUtMy42MjIgNC4wNjEtOC4wNjQgNC4wNDYtMTMuMjM1LjAxNS02LjM1OS0yLjQ4Ni0xMi44MzktNy44NTgtMTcuNjg3LTUuMzcyLTQuODQ3LTEzLjUyNi03Ljk5Ny0yNC42NTQtNy45OTFIMzcuODN2OTcuNzI4aDM2LjA3M2MxMi44NyAwIDIxLjkwNi0zLjQ4MiAyNy43MjItOC42NSA1LjgxOC01LjE1NSA4LjMyLTExLjkxIDguMzEyLTE4LjEzOHpNMCAxMzUuNjk4aDE0NC4xOTdWMEgwdjEzNS42OTd6Ii8+PHBhdGggZD0iTTI1OC42NjIgODguMTk4Yy0uMDEzIDMuMjI5LTEuMDA3IDYuNDc1LTMuODk2IDkuMDExLTIuODg0IDIuNTM3LTcuODczIDQuNDYzLTE2LjEzMyA0LjQ2M0gyMjJWNzVoMTUuODkzYzcuNDExIDAgMTIuNjcgMS41MDIgMTUuOTY1IDMuODUgMy4yODkgMi4zNjIgNC43NzYgNS40NjMgNC44MDQgOS4zNDgiLz48cGF0aCBkPSJNOTEuNjYyIDg4LjE5OGMtLjAxMyAzLjIyOS0xLjAwNyA2LjQ3NS0zLjg5NiA5LjAxMS0yLjg4NCAyLjUzNy03Ljg3NCA0LjQ2My0xNi4xMzMgNC40NjNINTVWNzVoMTUuODkyYzcuNDEyIDAgMTIuNjcyIDEuNTAyIDE1Ljk2NiAzLjg1IDMuMjg5IDIuMzYyIDQuNzc2IDUuNDYzIDQuODA0IDkuMzQ4Ii8+PHBhdGggZD0iTTI0NS4xODYgNTUuNzljMy4wOTYtMi4yMzcgNC41OS01LjM4NiA0LjYxMy0xMC4xMjQtLjAxNS0zLjI1LS45NDMtNi4wMzMtMy4yODEtOC4xMTEtMi4zNDYtMi4wNzgtNi4zMy0zLjU1NS0xMi43NTQtMy41NTVIMjIydjI1LjI3NWg4LjA3NmM2Ljk4OC4wMDQgMTEuOTk4LTEuMjQzIDE1LjExLTMuNDg2Ii8+PHBhdGggZD0iTTc4LjE4NiA1NS43OWMzLjA5Ni0yLjIzNyA0LjU5LTUuMzg2IDQuNjEzLTEwLjEyNC0uMDE1LTMuMjUtLjk0My02LjAzMy0zLjI4Mi04LjExMUM3Ny4xNzIgMzUuNDc3IDczLjE4OCAzNCA2Ni43NjQgMzRINTV2MjUuMjc1aDguMDc2YzYuOTg4LjAwNCAxMS45OTgtMS4yNDMgMTUuMTEtMy40ODYiLz48L2c+PC9nPjwvZz48L3N2Zz4K); - -webkit-background-position: center center; - background-position: center center; - background-repeat: no-repeat; - -webkit-background-size: 60px 17px; - background-size: 60px 17px; - background-color: #F2F2F2; -} - -@media (min-width: 25rem) { - .emotion-15 { - -webkit-background-size: 77px 22px; - background-size: 77px 22px; - } -} - -@media (min-width: 63rem) { - .emotion-15 { - -webkit-background-size: 93px 27px; - background-size: 93px 27px; - } -} - -.emotion-16 { - width: 100%; - object-fit: cover; - height: 100%; -} - -
-
-
- -
-
-

- Help reduce your power and data usage by not playing video content. -

-
-
- -
-
-
-
-

- - video, "Dog chases cat.", 2 minutes 30 seconds - -

- - -
-
-
-`; - exports[`Media Player: Placeholder should render a video placeholder with guidance 1`] = ` .emotion-0 { position: relative; diff --git a/src/app/components/MediaLoader/Placeholder/index.test.tsx b/src/app/components/MediaLoader/Placeholder/index.test.tsx index ddf486af6f4..2828b94f71e 100644 --- a/src/app/components/MediaLoader/Placeholder/index.test.tsx +++ b/src/app/components/MediaLoader/Placeholder/index.test.tsx @@ -123,23 +123,4 @@ describe('Media Player: Placeholder', () => { ); expect(container).toMatchSnapshot(); }); - - it('should render a video placeholder with Sustainability message if Transcript is provided', () => { - const { container } = render( - , - { service: 'news' }, - ); - expect(container).toMatchSnapshot(); - }); }); diff --git a/src/app/components/MediaLoader/Placeholder/index.tsx b/src/app/components/MediaLoader/Placeholder/index.tsx index 55229b5b844..d60a8f474f1 100644 --- a/src/app/components/MediaLoader/Placeholder/index.tsx +++ b/src/app/components/MediaLoader/Placeholder/index.tsx @@ -4,9 +4,6 @@ import { MediaInfo } from '../types'; import Guidance from './Guidance'; import styles from './index.styles'; import PlayButton from './PlayButton'; -import MediaIndicatorWithSustainabilityMessage from './WithSustainabilityMessage/MediaIndicator'; -import SustainabilityMessage from './WithSustainabilityMessage/Message'; -import SustainabilityMessageNoJs from './WithSustainabilityMessage/MessageNoJs'; interface Props { onClick: MouseEventHandler; @@ -24,7 +21,6 @@ const MediaPlayerPlaceholder = ({ srcSet, mediaInfo, noJsMessage = '', - hasTranscript = false, isPortraitOrientation, }: Props) => { const { @@ -36,56 +32,30 @@ const MediaPlayerPlaceholder = ({ guidanceMessage, } = mediaInfo ?? {}; - const showSustainabilityMessage = hasTranscript; - return ( // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
- {showSustainabilityMessage ? ( - <> - - - - - ) : ( - <> - - {}} - title={title} - datetime={datetime} - duration={duration} - durationSpoken={durationSpoken} - type={type} - guidanceMessage={guidanceMessage} - className="focusIndicatorRemove" - /> - - )} + + {}} + title={title} + datetime={datetime} + duration={duration} + durationSpoken={durationSpoken} + type={type} + guidanceMessage={guidanceMessage} + className="focusIndicatorRemove" + /> ( ); -export const Fan = ({ className }: { className?: string }) => ( - -); - -export const Plus = ({ className }: { className?: string }) => ( - -); - export const RightArrow = ({ className }: { className?: string }) => (