bbc · karinathomasbbc · May 9, 2025 · Jan 13, 2025 · Jan 13, 2025 · Jan 13, 2025
diff --git a/src/app/components/MediaLoader/Message/index.styles.ts b/src/app/components/MediaLoader/Message/index.styles.ts
@@ -3,7 +3,7 @@ import { css, Theme } from '@emotion/react';
 const NOJS_BACKGROUND_COLOUR = 'rgba(34, 34, 34, 0.75)';
 
 export default {
-  messageWrapper: ({ fontVariants, fontSizes, palette, mq }: Theme) =>
+  messageWrapper: ({ fontVariants, fontSizes, palette, mq, isDarkUi }: Theme) =>
     css({
       ...fontVariants.sansRegular,
       ...fontSizes.longPrimer,
@@ -13,8 +13,8 @@ export default {
       top: 0,
       left: 0,
       border: `0.0625rem solid transparent`,
-      color: palette.WHITE,
-      backgroundColor: NOJS_BACKGROUND_COLOUR,
+      color: isDarkUi ? palette.GREY_2 : palette.WHITE,
+      backgroundColor: isDarkUi ? palette.GREY_7 : NOJS_BACKGROUND_COLOUR,
 
       [mq.FORCED_COLOURS]: {
         backgroundColor: 'transparent',

diff --git a/src/app/components/MediaLoader/index.tsx b/src/app/components/MediaLoader/index.tsx
@@ -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,
@@ -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);
 
@@ -167,7 +170,11 @@ const MediaContainer = ({
           ? styles.audioMediaContainer
           : styles.standardMediaContainer
       }
-    />
+    >
+      <noscript>
+        <Message message={noJsMessage} />
+      </noscript>
+    </div>
   );
 };
 
@@ -179,15 +186,14 @@ type Props = {
 };
 
 const MediaLoader = ({ blocks, className, embedded, uniqueId }: Props) => {
-  const { lang, translations } = useContext(ServiceContext);
+  const { lang, service, translations } = useContext(ServiceContext);
   const { pageIdentifier } = useContext(EventTrackingContext);
   const { enabled: adsEnabled } = useToggle('ads');
 
   const {
     id,
     pageType,
     statsDestination,
-    service,
     isAmp,
     isLite,
     showAdsBasedOnLocation,
@@ -240,6 +246,8 @@ const MediaLoader = ({ blocks, className, embedded, uniqueId }: Props) => {
     mediaInfo,
   } = placeholderConfig ?? {};
 
+  const noJsMessage = translatedNoJSMessage || translations?.media?.noJs;
+
   const hasPlaceholder = Boolean(showPlaceholder && placeholderSrc);
 
   return (
@@ -267,7 +275,7 @@ const MediaLoader = ({ blocks, className, embedded, uniqueId }: Props) => {
             title={mediaInfo?.title}
             placeholderSrc={placeholderSrc}
             placeholderSrcset={placeholderSrcset}
-            noJsMessage={translatedNoJSMessage}
+            noJsMessage={noJsMessage}
           />
         ) : (
           <>
@@ -277,7 +285,7 @@ const MediaLoader = ({ blocks, className, embedded, uniqueId }: Props) => {
               <Placeholder
                 src={placeholderSrc}
                 srcSet={placeholderSrcset}
-                noJsMessage={translatedNoJSMessage}
+                noJsMessage={noJsMessage}
                 mediaInfo={mediaInfo}
                  => setShowPlaceholder(false)}
               />
@@ -286,6 +294,7 @@ const MediaLoader = ({ blocks, className, embedded, uniqueId }: Props) => {
                 playerConfig={playerConfig}
                 showAds={showAds}
                 uniqueId={uniqueId}
+                noJsMessage={noJsMessage}
               />
             )}
           </>

diff --git a/src/app/pages/LiveRadioPage/__snapshots__/index.test.tsx.snap b/src/app/pages/LiveRadioPage/__snapshots__/index.test.tsx.snap
@@ -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>

diff --git a/src/app/pages/OnDemandAudioPage/__snapshots__/index.test.tsx.snap b/src/app/pages/OnDemandAudioPage/__snapshots__/index.test.tsx.snap
@@ -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>

diff --git a/src/app/pages/OnDemandTvPage/__snapshots__/index.test.tsx.snap b/src/app/pages/OnDemandTvPage/__snapshots__/index.test.tsx.snap
@@ -1112,8 +1112,8 @@ exports[`OnDemand TV Page  should show the expired content message if episode is
   top: 0;
   left: 0;
   border: 0.0625rem solid transparent;
-  color: #FFFFFF;
-  background-color: rgba(34, 34, 34, 0.75);
+  color: #F6F6F6;
+  background-color: #3A3C3E;
 }

 @media (min-width: 20rem) and (max-width: 37.4375rem) {
@@ -1736,8 +1736,8 @@ exports[`OnDemand TV Page  should show the future content message if episode is
   top: 0;
   left: 0;
   border: 0.0625rem solid transparent;
-  color: #FFFFFF;
-  background-color: rgba(34, 34, 34, 0.75);
+  color: #F6F6F6;
+  background-color: #3A3C3E;
 }
 
 @media (min-width: 20rem) and (max-width: 37.4375rem) {

diff --git a/src/integration/pages/liveRadio/gahuza/__snapshots__/canonical.test.js.snap b/src/integration/pages/liveRadio/gahuza/__snapshots__/canonical.test.js.snap
@@ -183,7 +183,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>
 `;
 

diff --git a/src/integration/pages/liveRadio/korean/__snapshots__/canonical.test.js.snap b/src/integration/pages/liveRadio/korean/__snapshots__/canonical.test.js.snap
@@ -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;사용 기
10000
기에서 미디어 재생이 지원되지 않습니다&lt;/strong&gt;&lt;/div&gt;&lt;/div&gt;
+    </noscript>
+  </div>
 </figure>
 `;
 

diff --git a/src/integration/pages/liveRadio/kyrgyz/__snapshots__/canonical.test.js.snap b/src/integration/pages/liveRadio/kyrgyz/__snapshots__/canonical.test.js.snap
@@ -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>
 `;
 

diff --git a/src/integration/pages/onDemandAudioPage/indonesia/__snapshots__/canonical.test.js.snap b/src/integration/pages/onDemandAudioPage/indonesia/__snapshots__/canonical.test.js.snap
@@ -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>
 `;
 

diff --git a/src/integration/pages/onDemandAudioPage/pashto/__snapshots__/canonical.test.js.snap b/src/integration/pages/onDemandAudioPage/pashto/__snapshots__/canonical.test.js.snap
@@ -205,7 +205,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>
 `;
 

diff --git a/src/integration/pages/onDemandAudioPage/pashtoBrand/__snapshots__/canonical.test.js.snap b/src/integration/pages/onDemandAudioPage/pashtoBrand/__snapshots__/canonical.test.js.snap
@@ -205,7 +205,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>
 `;
 

diff --git a/src/integration/pages/podcastPage/portugueseBrand/__snapshots__/canonical.test.js.snap b/src/integration/pages/podcastPage/portugueseBrand/__snapshots__/canonical.test.js.snap
@@ -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>
 `;
 

diff --git a/src/integration/pages/podcastPage/portugueseEpisode/__snapshots__/canonical.test.js.snap b/src/integration/pages/podcastPage/portugueseEpisode/__snapshots__/canonical.test.js.snap
@@ -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>
 `;