Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

WSTEAM1-1581: Implement No JS message for media loaders without placeholders #12270

Draft
wants to merge 5 commits into
base: latest
Choose a base branch
from
Draft

WSTEAM1-1581: Implement No JS message for media loaders without placeholders #12270

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
eff8287
Implement No JS message for media loaders without placeholders
karinathomasbbc Jan 13, 2025
fbc9cdb
Simplify how noJsMessage is derived
karinathomasbbc Jan 13, 2025
2b03f8f
Update snapshots
karinathomasbbc Jan 13, 2025
d44d889
Merge branch 'latest' of github.com:bbc/simorgh into no-js-media-loader
karinathomasbbc Jan 16, 2025
7094dcf
Update snapshots
karinathomasbbc Jan 16, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 13 additions & 3 deletions src/app/components/MediaLoader/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ import styles from './index.styles';
import { getBootstrapSrc } from '../Ad/Canonical';
import Metadata from './Metadata';
import AmpMediaLoader from './Amp';
import Message from './Message';

const PAGETYPES_IGNORE_PLACEHOLDER: PageTypes[] = [
MEDIA_ARTICLE_PAGE,
Expand Down Expand Up @@ -96,12 +97,14 @@ type MediaContainerProps = {
playerConfig: PlayerConfig;
showAds: boolean;
uniqueId?: string;
noJsMessage?: string;
};

const MediaContainer = ({
playerConfig,
showAds,
uniqueId,
noJsMessage,
}: MediaContainerProps) => {
const playerElementRef = useRef<HTMLDivElement>(null);

Expand Down Expand Up @@ -167,7 +170,11 @@ const MediaContainer = ({
? styles.audioMediaContainer
: styles.standardMediaContainer
}
/>
>
<noscript>
<Message message={noJsMessage} />
</noscript>
</div>
);
};

Expand Down Expand Up @@ -239,6 +246,8 @@ const MediaLoader = ({ blocks, className, embedded, uniqueId }: Props) => {
mediaInfo,
} = placeholderConfig ?? {};

const noJsMessage = translatedNoJSMessage || translations?.media?.noJs;

const hasPlaceholder = Boolean(showPlaceholder && placeholderSrc);

const showPortraitTitle = orientation === 'portrait' && !embedded;
Expand Down Expand Up @@ -273,7 +282,7 @@ const MediaLoader = ({ blocks, className, embedded, uniqueId }: Props) => {
title={mediaInfo?.title}
placeholderSrc={placeholderSrc}
placeholderSrcset={placeholderSrcset}
noJsMessage={translatedNoJSMessage}
noJsMessage={noJsMessage}
/>
) : (
<>
Expand All @@ -283,7 +292,7 @@ const MediaLoader = ({ blocks, className, embedded, uniqueId }: Props) => {
<Placeholder
src={placeholderSrc}
srcSet={placeholderSrcset}
noJsMessage={translatedNoJSMessage}
noJsMessage={noJsMessage}
mediaInfo={mediaInfo}
onClick={() => setShowPlaceholder(false)}
/>
Expand All @@ -292,6 +301,7 @@ const MediaLoader = ({ blocks, className, embedded, uniqueId }: Props) => {
playerConfig={playerConfig}
showAds={showAds}
uniqueId={uniqueId}
noJsMessage={noJsMessage}
/>
)}
</>
Expand Down
4 changes: 3 additions & 1 deletion src/app/pages/LiveRadioPage/__snapshots__/index.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1118,7 +1118,9 @@ exports[`Radio Page Main should match snapshot for Canonical 1`] = `
<div
class="emotion-10"
data-e2e="media-player"
/>
>
<noscript />
</div>
</figure>
</div>
</main>
Expand Down
4 changes: 3 additions & 1 deletion src/app/pages/OnDemandAudioPage/__snapshots__/index.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1739,7 +1739,9 @@ exports[`OnDemand Radio Page should match snapshot 1`] = `
<div
class="emotion-32"
data-e2e="media-player"
/>
>
<noscript />
</div>
</figure>
</div>
</main>
Expand Down
6 changes: 5 additions & 1 deletion src/integration/pages/liveRadio/gahuza/__snapshots__/canonical.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -169,7 +169,11 @@ exports[`Canonical Live Radio Media Loader renders a valid container 1`] = `
<div
class="bbc-1eq7znh"
data-e2e="media-player"
/>
>
<noscript>
&lt;div&gt;&lt;div class="bbc-1mgo2mg"&gt;&lt;strong class="bbc-pow7hy"&gt;Ntibishobora gukina mu cuma cawe&lt;/strong&gt;&lt;/div&gt;&lt;/div&gt;
</noscript>
</div>
</figure>
`;

Expand Down
6 changes: 5 additions & 1 deletion src/integration/pages/liveRadio/korean/__snapshots__/canonical.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -162,7 +162,11 @@ exports[`Canonical Korean Live Radio Page Media Loader renders a valid container
<div
class="bbc-1eq7znh"
data-e2e="media-player"
/>
>
<noscript>
&lt;div&gt;&lt;div class="bbc-i4t8f7"&gt;&lt;strong class="bbc-pow7hy"&gt;사용 기기에서 미디어 재생이 지원되지 않습니다&lt;/strong&gt;&lt;/div&gt;&lt;/div&gt;
</noscript>
</div>
</figure>
`;

Expand Down
6 changes: 5 additions & 1 deletion src/integration/pages/liveRadio/kyrgyz/__snapshots__/canonical.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -169,7 +169,11 @@ exports[`Canonical Kyrgyz Live Radio Page Media Loader renders a valid container
<div
class="bbc-1eq7znh"
data-e2e="media-player"
/>
>
<noscript>
&lt;div&gt;&lt;div class="bbc-1mgo2mg"&gt;&lt;strong class="bbc-pow7hy"&gt;Жабдыгыңыз медианын бул түрүн ойнотууга ылайыктуу эмес.&lt;/strong&gt;&lt;/div&gt;&lt;/div&gt;
</noscript>
</div>
</figure>
`;

Expand Down
6 changes: 5 additions & 1 deletion src/integration/pages/onDemandAudioPage/indonesia/__snapshots__/canonical.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -177,7 +177,11 @@ exports[`Canonical On Demand Audio Page Media Loader renders a valid container 1
<div
class="bbc-1eq7znh"
data-e2e="media-player"
/>
>
<noscript>
&lt;div&gt;&lt;div class="bbc-1mgo2mg"&gt;&lt;strong class="bbc-pow7hy"&gt;Untuk memutar video ini, aktifkan JavaScript atau coba di mesin pencari lain&lt;/strong&gt;&lt;/div&gt;&lt;/div&gt;
</noscript>
</div>
</figure>
`;

Expand Down
6 changes: 5 additions & 1 deletion src/integration/pages/onDemandAudioPage/pashto/__snapshots__/canonical.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -212,7 +212,11 @@ exports[`Canonical On Demand Audio Page Media Loader renders a valid container 1
<div
class="bbc-1eq7znh"
data-e2e="media-player"
/>
>
<noscript>
&lt;div&gt;&lt;div class="bbc-q0ilh"&gt;&lt;strong class="bbc-pow7hy"&gt;په دې وسیله کې د غږ اوريدل او ویډیو لیدنه شونې نه ده.&lt;/strong&gt;&lt;/div&gt;&lt;/div&gt;
</noscript>
</div>
</figure>
`;

Expand Down
6 changes: 5 additions & 1 deletion src/integration/pages/onDemandAudioPage/pashtoBrand/__snapshots__/canonical.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -212,7 +212,11 @@ exports[`Canonical On Demand Audio Page Media Loader renders a valid container 1
<div
class="bbc-1eq7znh"
data-e2e="media-player"
/>
>
<noscript>
&lt;div&gt;&lt;div class="bbc-q0ilh"&gt;&lt;strong class="bbc-pow7hy"&gt;په دې وسیله کې د غږ اوريدل او ویډیو لیدنه شونې نه ده.&lt;/strong&gt;&lt;/div&gt;&lt;/div&gt;
</noscript>
</div>
</figure>
`;

Expand Down
6 changes: 5 additions & 1 deletion src/integration/pages/podcastPage/portugueseBrand/__snapshots__/canonical.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -198,7 +198,11 @@ exports[`Canonical Podcast Page Media Loader renders a valid container 1`] = `
<div
class="bbc-1eq7znh"
data-e2e="media-player"
/>
>
<noscript>
&lt;div&gt;&lt;div class="bbc-1ezssgh"&gt;&lt;strong class="bbc-pow7hy"&gt;A reprodução deste formato de vídeo não é compatível com seu dispositivo&lt;/strong&gt;&lt;/div&gt;&lt;/div&gt;
</noscript>
</div>
</figure>
`;

Expand Down
6 changes: 5 additions & 1 deletion src/integration/pages/podcastPage/portugueseEpisode/__snapshots__/canonical.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -198,7 +198,11 @@ exports[`Canonical Podcast Page Media Loader renders a valid container 1`] = `
<div
class="bbc-1eq7znh"
data-e2e="media-player"
/>
>
<noscript>
&lt;div&gt;&lt;div class="bbc-1ezssgh"&gt;&lt;strong class="bbc-pow7hy"&gt;A reprodução deste formato de vídeo não é compatível com seu dispositivo&lt;/strong&gt;&lt;/div&gt;&lt;/div&gt;
</noscript>
</div>
</figure>
`;

Expand Down
Loading