WSTEAM1-733 Display audio on the Live Page

src/app/components/MediaLoader/configs/clipMedia.ts

@@ -109,7 +109,7 @@ export default ({
         ...(videoId && { clipPID: videoId }),
       },
     },
-    placeholderConfig,
+    ...(type !== 'audio' && { placeholderConfig }),
     showAds,
   };
 };

src/app/components/MediaLoader/index.styles.ts

@@ -49,11 +49,27 @@ export default {
       }),
       !isEmbedded && commonMarginSpacing,
     ],
+  audioFigure: ({ spacings }: Theme) =>
+    css({
+      margin: `0 0 ${spacings.FULL}rem 0`,
+    }),
 
-  audioMediaContainer: ({ palette }: Theme) =>
+  audioMediaContainer: ({ mq, spacings }: Theme) =>
     css({
-      backgroundColor: palette.WHITE,
-      height: '165px',
+      height: '130px',
+      margin: `0 0 ${spacings.FULL}rem 0`,
+      [mq.GROUP_2_MIN_WIDTH]: {
+        padding: '0 0.5rem',
+      },
+      [`@media (min-width: 548px)`]: {
+        padding: '0 0',
+      },
+      [mq.GROUP_3_MIN_WIDTH]: {
+        marginInlineEnd: '1rem',
+      },
+      [mq.GROUP_4_MIN_WIDTH]: {
+        marginInlineStart: '-1rem',
+      },
     }),
 
   standardMediaContainer: ({ palette }: Theme) =>
@@ -97,4 +113,19 @@ export default {
         marginInline: '0',
       },
     }),
+
+  captionAudio: ({ mq, spacings }: Theme) =>
+    css({
+      margin: `${spacings.DOUBLE}rem ${spacings.FULL}rem ${spacings.FULL}rem`,
+
+      [mq.GROUP_2_MIN_WIDTH]: {
+        margin: `${spacings.DOUBLE}rem 1rem 0`,
+      },
+      [mq.GROUP_3_MIN_WIDTH]: {
+        margin: `${spacings.TRIPLE}rem 1rem 0`,
+      },
+      [mq.GROUP_4_MIN_WIDTH]: {
+        margin: `${spacings.TRIPLE}rem 0 0`,
+      },
+    }),
 };

src/app/components/MediaLoader/index.tsx

@@ -249,6 +249,7 @@ const MediaLoader = ({ blocks, className, embedded }: Props) => {
             orientation === 'portrait' && styles.portraitFigure(embedded),
             orientation === 'landscape' && styles.landscapeFigure,
           ],
+          playerConfig?.ui?.skin === 'audio' && styles.audioFigure,
         ]}
       >
         {isAmp ? (
@@ -280,7 +281,13 @@ const MediaLoader = ({ blocks, className, embedded }: Props) => {
           <Caption
             block={captionBlock}
             type={mediaType}
-            css={orientation === 'portrait' && styles.captionPortrait}
+            css={[
+              styles.figure(embedded),
+              playerConfig?.ui?.skin === 'classic' && [
+                orientation === 'portrait' && styles.captionPortrait,
+              ],
+              playerConfig?.ui?.skin === 'audio' && styles.captionAudio,
+            ]}
           />
         )}
       </figure>

src/app/pages/MediaArticlePage/__snapshots__/index.test.tsx.snap

@@ -314,6 +314,9 @@ exports[`MediaArticlePage should render a news article correctly 1`] = `
   padding-inline: 0.5rem;
   width: calc(100% - 0.5rem);
   border-inline-start: 0.0625rem solid #6E6E73;
+  position: relative;
+  width: 100%;
+  margin: 0 0 1.5rem 0;
 }
 
 @media (min-width: 20rem) and (max-width: 37.4375rem) {

src/app/pages/OnDemandAudioPage/__snapshots__/index.test.tsx.snap

@@ -695,11 +695,38 @@ exports[`OnDemand Radio Page  should match snapshot 1`] = `
   position: relative;
   width: 100%;
   margin: 0 0 1.5rem 0;
+  margin: 0 0 0.5rem 0;
 }
 
 .emotion-30 {
-  background-color: #FFFFFF;
-  height: 165px;
+  height: 130px;
+  margin: 0 0 0.5rem 0;
+}
+
+@media (min-width: 25rem) {
+  .emotion-30 {
+    padding: 0 0.5rem;
+  }
+}
+
+@media (min-width: 548px) {
+  .emotion-30 {
+    padding: 0 0;
+  }
+}
+
+@media (min-width: 37.5rem) {
+  .emotion-30 {
+    -webkit-margin-end: 1rem;
+    margin-inline-end: 1rem;
+  }
+}
+
+@media (min-width: 63rem) {
+  .emotion-30 {
+    -webkit-margin-start: -1rem;
+    margin-inline-start: -1rem;
+  }
 }
 
 <div>

src/integration/pages/articles/afrique/__snapshots__/canonical.test.js.snap

@@ -156,7 +156,7 @@ exports[`Canonical Articles Media Loader renders a placeholder 1`] = `
 
 exports[`Canonical Articles Media Loader renders a valid container 1`] = `
 <figure
-  class="bbc-1hu5uc3"
+  class="bbc-1okmog4"
   data-e2e="media-loader__container"
 >
   <div
@@ -231,7 +231,7 @@ exports[`Canonical Articles Media Loader renders a valid container 1`] = `
     </div>
   </div>
   <figcaption
-    class="bbc-12vqlmi"
+    class="bbc-90rnef"
     dir="ltr"
   >
     <span

src/integration/pages/articles/persianMediaPlayer/__snapshots__/canonical.test.js.snap

@@ -334,7 +334,7 @@ exports[`Canonical Articles Media Loader renders a placeholder 1`] = `
 
 exports[`Canonical Articles Media Loader renders a valid container 1`] = `
 <figure
-  class="bbc-1hu5uc3"
+  class="bbc-1okmog4"
   data-e2e="media-loader__container"
 >
   <div
@@ -409,7 +409,7 @@ exports[`Canonical Articles Media Loader renders a valid container 1`] = `
     </div>
   </div>
   <figcaption
-    class="bbc-17ps87o"
+    class="bbc-1beh4o1"
     dir="rtl"
   >
     <span

src/integration/pages/liveRadio/gahuza/__snapshots__/canonical.test.js.snap

@@ -112,11 +112,11 @@ exports[`Canonical Live Radio Main heading should match text 1`] = `"Radio BBC G
 
 exports[`Canonical Live Radio Media Loader renders a valid container 1`] = `
 <figure
-  class="bbc-ucozvf"
+  class="bbc-q31s7w"
   data-e2e="media-loader__container"
 >
   <div
-    class="bbc-1eq7znh"
+    class="bbc-1eua7yp"
     data-e2e="media-player"
   />
 </figure>

src/integration/pages/liveRadio/korean/__snapshots__/canonical.test.js.snap

@@ -105,11 +105,11 @@ exports[`Canonical Korean Live Radio Page Main heading should match text 1`] = `
 
 exports[`Canonical Korean Live Radio Page Media Loader renders a valid container 1`] = `
 <figure
-  class="bbc-ucozvf"
+  class="bbc-q31s7w"
   data-e2e="media-loader__container"
 >
   <div
-    class="bbc-1eq7znh"
+    class="bbc-1eua7yp"
     data-e2e="media-player"
   />
 </figure>

src/integration/pages/liveRadio/sinhala/__snapshots__/canonical.test.js.snap

@@ -105,11 +105,11 @@ exports[`Canonical Sinhala Live Radio Page Main heading should match text 1`] =
 
 exports[`Canonical Sinhala Live Radio Page Media Loader renders a valid container 1`] = `
 <figure
-  class="bbc-ucozvf"
+  class="bbc-q31s7w"
   data-e2e="media-loader__container"
 >
   <div
-    class="bbc-1eq7znh"
+    class="bbc-1eua7yp"
     data-e2e="media-player"
   />
 </figure>

src/integration/pages/onDemandAudioPage/indonesia/__snapshots__/canonical.test.js.snap

@@ -120,11 +120,11 @@ exports[`Canonical On Demand Audio Page Main heading should match text 1`] = `"D
 
 exports[`Canonical On Demand Audio Page Media Loader renders a valid container 1`] = `
 <figure
-  class="bbc-ucozvf"
+  class="bbc-q31s7w"
   data-e2e="media-loader__container"
 >
   <div
-    class="bbc-1eq7znh"
+    class="bbc-1eua7yp"
     data-e2e="media-player"
   />
 </figure>

src/integration/pages/onDemandAudioPage/pashto/__snapshots__/canonical.test.js.snap

@@ -155,11 +155,11 @@ exports[`Canonical On Demand Audio Page Main heading should match text 1`] = `"
 
 exports[`Canonical On Demand Audio Page Media Loader renders a valid container 1`] = `
 <figure
-  class="bbc-ucozvf"
+  class="bbc-q31s7w"
   data-e2e="media-loader__container"
 >
   <div
-    class="bbc-1eq7znh"
+    class="bbc-1eua7yp"
     data-e2e="media-player"
   />
 </figure>

src/integration/pages/onDemandAudioPage/pashtoBrand/__snapshots__/canonical.test.js.snap

@@ -155,11 +155,11 @@ exports[`Canonical On Demand Audio Page Main heading should match text 1`] = `"
 
 exports[`Canonical On Demand Audio Page Media Loader renders a valid container 1`] = `
 <figure
-  class="bbc-ucozvf"
+  class="bbc-q31s7w"
   data-e2e="media-loader__container"
 >
   <div
-    class="bbc-1eq7znh"
+    class="bbc-1eua7yp"
     data-e2e="media-player"
   />
 </figure>

src/integration/pages/onDemandTVPage/hausa/__snapshots__/canonical.test.js.snap

@@ -275,7 +275,7 @@ exports[`Canonical On Demand T V Page Media Loader renders a placeholder 1`] = `
 
 exports[`Canonical On Demand T V Page Media Loader renders a valid container 1`] = `
 <figure
-  class="bbc-7rf7s3"
+  class="bbc-1293i7j"
   data-e2e="media-loader__container"
 >
   <div

src/integration/pages/onDemandTVPage/pashtoBrand/__snapshots__/canonical.test.js.snap

@@ -303,7 +303,7 @@ exports[`Canonical On Demand T V Page Media Loader renders a placeholder 1`] = `
 
 exports[`Canonical On Demand T V Page Media Loader renders a valid container 1`] = `
 <figure
-  class="bbc-7rf7s3"
+  class="bbc-1293i7j"
   data-e2e="media-loader__container"
 >
   <div

src/integration/pages/podcastPage/portugueseBrand/__snapshots__/canonical.test.js.snap

@@ -155,11 +155,11 @@ exports[`Canonical Podcast Page Main heading should match text 1`] = `"Que Hist
 
 exports[`Canonical Podcast Page Media Loader renders a valid container 1`] = `
 <figure
-  class="bbc-ucozvf"
+  class="bbc-q31s7w"
   data-e2e="media-loader__container"
 >
   <div
-    class="bbc-1eq7znh"
+    class="bbc-1eua7yp"
     data-e2e="media-player"
   />
 </figure>

src/integration/pages/podcastPage/portugueseEpisode/__snapshots__/canonical.test.js.snap

@@ -155,11 +155,11 @@ exports[`Canonical Podcast Page Main heading should match text 1`] = `"Que Hist
 
 exports[`Canonical Podcast Page Media Loader renders a valid container 1`] = `
 <figure
-  class="bbc-ucozvf"
+  class="bbc-q31s7w"
   data-e2e="media-loader__container"
 >
   <div
-    class="bbc-1eq7znh"
+    class="bbc-1eua7yp"
     data-e2e="media-player"
   />
 </figure>

ws-nextjs-app/integration/pages/av-embeds/russian/__snapshots__/canonical.test.ts.snap

@@ -152,7 +152,7 @@ exports[`Canonical Av-embeds Media Loader renders a placeholder 1`] = `
 
 exports[`Canonical Av-embeds Media Loader renders a valid container 1`] = `
 <figure
-  class="css-1kswlui"
+  class="css-1m0eqf0"
   data-e2e="media-loader__container"
 >
   <div

ws-nextjs-app/integration/pages/live/pidgin/__snapshots__/canonical.test.ts.snap

@@ -222,7 +222,7 @@ exports[`Canonical Live Media Loader renders a placeholder 1`] = `
 
 exports[`Canonical Live Media Loader renders a valid container 1`] = `
 <figure
-  class="css-1cyic3f"
+  class="css-c8za4r"
   data-e2e="media-loader__container"
 >
   <div
@@ -303,7 +303,7 @@ exports[`Canonical Live Media Loader renders a valid container 1`] = `
     </div>
   </div>
   <figcaption
-    class="css-12vqlmi"
+    class="css-102dy0k"
     dir="ltr"
   >
     <span