WSTEAM1-733 Display audio on the Live Page

src/app/components/MediaLoader/index.tsx

@@ -249,6 +249,9 @@ const MediaLoader = ({ blocks, className, embedded }: Props) => {
             orientation === 'portrait' && styles.portraitFigure(embedded),
             orientation === 'landscape' && styles.landscapeFigure,
           ],
+          playerConfig?.ui?.skin === 'audio' &&
+            hasPlaceholder &&
+            styles.landscapeFigure,
         ]}
       >
         {isAmp ? (

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

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

@@ -327,7 +327,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

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

@@ -112,7 +112,7 @@ 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-1ezyova"
   data-e2e="media-loader__container"
 >
   <div

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

@@ -105,7 +105,7 @@ 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-1ezyova"
   data-e2e="media-loader__container"
 >
   <div

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

@@ -105,7 +105,7 @@ 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-1ezyova"
   data-e2e="media-loader__container"
 >
   <div

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

@@ -120,7 +120,7 @@ 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-1ezyova"
   data-e2e="media-loader__container"
 >
   <div

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

@@ -165,34 +165,6 @@ exports[`Canonical On Demand Audio Page I can see the hero image 1`] = `"https:/
 
 exports[`Canonical On Demand Audio Page Main heading should match text 1`] = `"وروستي خبرونه, ۴ فبروري ۲۰۲۰"`;
 
-exports[`Canonical On Demand Audio Page Recent Episodes List items should match text and url 1`] = `
-{
-  "text": "غږ, وروستي خبرونه, ۹ ډیسمبر ۲۰۲۰,  موده ۰۳،۰۰  موده ۰۳:۰۰",
-  "url": "/pashto/bbc_pashto_radio/w172xqk2kz848lv",
-}
-`;
-
-exports[`Canonical On Demand Audio Page Recent Episodes List items should match text and url 2`] = `
-{
-  "text": "غږ, وروستي خبرونه, ۹ ډیسمبر ۲۰۲۰,  موده ۰۳،۰۰  موده ۰۳:۰۰",
-  "url": "/pashto/bbc_pashto_radio/w172xqk2kz844vq",
-}
-`;
-
-exports[`Canonical On Demand Audio Page Recent Episodes List items should match text and url 3`] = `
-{
-  "text": "غږ, وروستي خبرونه, ۹ ډیسمبر ۲۰۲۰,  موده ۰۳،۰۰  موده ۰۳:۰۰",
-  "url": "/pashto/bbc_pashto_radio/w172xqk2kz8413l",
-}
-`;
-
-exports[`Canonical On Demand Audio Page Recent Episodes List items should match text and url 4`] = `
-{
-  "text": "غږ, وروستي خبرونه, ۹ ډیسمبر ۲۰۲۰,  موده ۰۳،۰۰  موده ۰۳:۰۰",
-  "url": "/pashto/bbc_pashto_radio/w172xqk2kz83xcg",
-}
-`;
-
 exports[`Canonical On Demand Audio Page SEO Apple Touch Icon should match attributes 1`] = `
 {
   "sizes": null,

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

@@ -155,7 +155,7 @@ 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-1ezyova"
   data-e2e="media-loader__container"
 >
   <div

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

@@ -155,7 +155,7 @@ 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-1ezyova"
   data-e2e="media-loader__container"
 >
   <div

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,7 +155,7 @@ 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-1ezyova"
   data-e2e="media-loader__container"
 >
   <div

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

@@ -155,7 +155,7 @@ 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-1ezyova"
   data-e2e="media-loader__container"
 >
   <div

ws-nextjs-app/pages/[service]/live/[id]/Post/fixture.ts

@@ -585,3 +585,236 @@ export const videoSamplePost = {
     },
   ],
 };
+
+export const audioSamplePost = {
+  typeCode: null,
+  header: {
+    model: {
+      blocks: [
+        {
+          id: '877a928e',
+          type: 'headline',
+          model: {
+            blocks: [
+              {
+                id: '780e425c',
+                type: 'text',
+                model: {
+                  blocks: [
+                    {
+                      id: 'e8c211d7',
+                      type: 'paragraph',
+                      model: {
+                        text: 'Post with embedded audio',
+                        blocks: [
+                          {
+                            id: '2eb52ab5',
+                            type: 'fragment',
+                            model: {
+                              text: 'Post with embedded audio',
+                              attributes: [],
+                            },
+                          },
+                        ],
+                      },
+                    },
+                  ],
+                },
+              },
+            ],
+          },
+        },
+      ],
+    },
+  },
+  content: {
+    model: {
+      blocks: [
+        {
+          id: '0c665c43',
+          type: 'paragraph',
+          model: {
+            text: 'Audio',
+            blocks: [
+              {
+                id: '8658cc94',
+                type: 'fragment',
+                model: {
+                  text: 'Audio',
+                  attributes: [],
+                },
+              },
+            ],
+          },
+        },
+        {
+          id: '586c041a',
+          type: 'audio',
+          model: {
+            locator: 'urn:bbc:pips:pid:p01vqk5l',
+            blocks: [
+              {
+                id: '51c17264',
+                type: 'clipMedia',
+                model: {
+                  id: 'urn:bbc:pips:pid:p01vqk5l',
+                  urns: {
+                    pipsPid: 'urn:bbc:pips:pid:p01vqk5l',
+                  },
+                  images: [
+                    {
+                      url: 'https://ichef.test.bbci.co.uk/images/ic/1024xn/p01vkjg8.png',
+                      urlTemplate:
+                        'https://ichef.test.bbci.co.uk/images/ic/{width}xn/p01vkjg8.png',
+                      altText: 'BBC flat logo 2023 default image',
+                      type: 'socialImage',
+                      source: 'pipsImage',
+                    },
+                    {
+                      url: 'https://ichef.test.bbci.co.uk/images/ic/1024xn/p01vkjg8.png',
+                      urlTemplate:
+                        'https://ichef.test.bbci.co.uk/images/ic/{width}xn/p01vkjg8.png',
+                      altText: 'BBC flat logo 2023 default image',
+                      type: 'promoImage',
+                      source: 'pipsImage',
+                    },
+                  ],
+                  assetPath: 'p01vqk5l',
+                  type: 'audio',
+                  headlines: {
+                    primaryHeadline: 'a',
+                    seoHeadline: 'a',
+                    promoHeadline: 'a',
+                    socialHeadline: 'a',
+                  },
+                  analytics: {
+                    page: {
+                      name: 'programmes.av.p01vqk5l.page',
+                      contentId: 'urn:bbc:pips:pid:p01vqk5l',
+                      producer: 'PROGRAMMES',
+                    },
+                  },
+                  description: 'a',
+                  summary: {
+                    type: 'text',
+                    model: {
+                      blocks: [
+                        {
+                          type: 'paragraph',
+                          model: {
+                            text: 'a',
+                            blocks: [
+                              {
+                                type: 'fragment',
+                                model: {
+                                  text: 'a',
+                                  attributes: [],
+                                },
+                              },
+                            ],
+                          },
+                        },
+                      ],
+                    },
+                  },
+                  lastPublished: '2023-10-10T11:48:18Z',
+                  firstPublished: null,
+                  video: {
+                    id: 'p01vqk5l',
+                    title: 'a',
+                    holdingImage: {
+                      id: 'https://ichef.test.bbci.co.uk/images/ic/$recipe/p01vkjg8.png',
+                      altText: 'BBC flat logo 2023 default image',
+                    },
+                    version: {
+                      id: 'p01vqk5n',
+                      duration: 'PT27S',
+                      kind: 'audio',
+                      guidance: null,
+                      territories: ['nonuk', 'uk'],
+                    },
+                    isAdvertisingAllowed: false,
+                    isEmbeddingAllowed: true,
+                    isUnavailable: false,
+                  },
+                  attributions: null,
+                  link: {
+                    path: '/programmes/p01vqk5l',
+                  },
+                  section: null,
+                  isSharingAllowed: true,
+                },
+              },
+              {
+                id: 'cfdc8dc2',
+                type: 'caption',
+                model: {
+                  blocks: [
+                    {
+                      id: '25d8408a',
+                      type: 'text',
+                      model: {
+                        blocks: [
+                          {
+                            id: '6355a247',
+                            type: 'paragraph',
+                            model: {
+                              text: 'caption for audio',
+                              blocks: [
+                                {
+                                  id: '9f54b5d9',
+                                  type: 'fragment',
+                                  model: {
+                                    text: 'caption for audio',
+                                    attributes: [],
+                                  },
+                                },
+                              ],
+                            },
+                          },
+                        ],
+                      },
+                    },
+                  ],
+                },
+              },
+            ],
+          },
+        },
+      ],
+    },
+  },
+  link: null,
+  urn: 'asset:c40c0735-cff0-415f-95fa-b72a8f5a97a3',
+  type: 'POST',
+  options: {
+    isBreakingNews: false,
+  },
+  dates: {
+    firstPublished: '2023-11-17T16:30:52.000Z',
+    lastPublished: '2023-12-05T15:55:18.000Z',
+    time: null,
+    curated: '2023-11-17T16:30:53.254Z',
+  },
+  titles: [
+    {
+      title: null,
+      source: 'primary',
+    },
+  ],
+  descriptions: [
+    {
+      text: null,
+      source: 'summary',
+    },
+  ],
+  images: [
+    {
+      originalUrl: null,
+      altText: null,
+      copyright: null,
+      urlTemplate: null,
+      url: null,
+    },
+  ],
+};