From a7f0fdb4cc801438a54360a2c1937d7681e00c25 Mon Sep 17 00:00:00 2001
From: Aaron Moore <aaron.moore@bbc.co.uk>
Date: Fri, 27 Sep 2024 10:59:34 +0100
Subject: [PATCH] Add Storybook story for portrait player

---
 src/app/components/MediaLoader/fixture.ts     | 67 +++++++++++++++++++
 .../components/MediaLoader/index.stories.tsx  | 18 ++++-
 2 files changed, 82 insertions(+), 3 deletions(-)

diff --git a/src/app/components/MediaLoader/fixture.ts b/src/app/components/MediaLoader/fixture.ts
index 9c38626cf94..b02a0edda1b 100644
--- a/src/app/components/MediaLoader/fixture.ts
+++ b/src/app/components/MediaLoader/fixture.ts
@@ -74,6 +74,69 @@ export const buildAresMediaPlayerBlock = ({ types }: { types: string[] }) => ({
   position: [5, 2, 1],
 });
 
+export const aresMediaPortraitBlock = {
+  id: '80e150c0',
+  type: 'aresMedia',
+  model: {
+    blocks: [
+      buildAresMediaPlayerBlock({ types: ['Portrait'] }),
+      {
+        id: 'd8f26383',
+        type: 'image',
+        model: {
+          blocks: [
+            {
+              id: 'fcdba133',
+              type: 'rawImage',
+              model: {
+                width: 1920,
+                height: 1080,
+                locator:
+                  'ichef.test.bbci.co.uk/images/ic/$widthxn/p01k6mtv.jpg',
+                originCode: 'mpv',
+                copyrightHolder: 'BBC',
+              },
+            },
+            {
+              id: '63679c9e',
+              type: 'altText',
+              model: {
+                blocks: [
+                  {
+                    id: '33876888',
+                    type: 'text',
+                    model: {
+                      blocks: [
+                        {
+                          id: '26dbfca2',
+                          type: 'paragraph',
+                          model: {
+                            text: 'Ants',
+                            blocks: [
+                              {
+                                id: 'ed9f30c9',
+                                type: 'fragment',
+                                model: {
+                                  text: 'Ants',
+                                  attributes: [],
+                                },
+                              },
+                            ],
+                          },
+                        },
+                      ],
+                    },
+                  },
+                ],
+              },
+            },
+          ],
+        },
+      },
+    ],
+  },
+};
+
 export const aresMediaBlock = {
   id: '80e150c0',
   type: 'aresMedia',
@@ -372,6 +435,10 @@ export const aresMediaLiveStreamBlocks = [
 
 export const aresMediaBlocks = [aresMediaBlock, aresMediaCaptionBlock];
 export const clipMediaBlocks = [livePageClipMediaBlock, livePageCaptionBlock];
+export const aresMediaPortraitBlocks = [
+  aresMediaPortraitBlock,
+  aresMediaCaptionBlock,
+];
 export const onDemandTvBlocks = [onDemandTvBlock];
 export const onDemandTvBlocksWithOverrides = [
   onDemandTvBlock,
diff --git a/src/app/components/MediaLoader/index.stories.tsx b/src/app/components/MediaLoader/index.stories.tsx
index 3b71cc726d7..72d636e68d7 100644
--- a/src/app/components/MediaLoader/index.stories.tsx
+++ b/src/app/components/MediaLoader/index.stories.tsx
@@ -2,7 +2,11 @@ import React from 'react';
 import { PageTypes, Services } from '#app/models/types/global';
 import { RequestContextProvider } from '#app/contexts/RequestContext';
 import MediaLoaderComponent from '.';
-import { aresMediaBlocks, clipMediaBlocks } from './fixture';
+import {
+  aresMediaBlocks,
+  aresMediaPortraitBlocks,
+  clipMediaBlocks,
+} from './fixture';
 import { MediaBlock } from './types';
 import readme from './README.md';
 
@@ -33,7 +37,7 @@ export default {
   },
 };
 
-export const ArticleMediaLoader = () => (
+export const Landscape = () => (
   <Component
     service="pidgin"
     pageType="article"
@@ -41,7 +45,15 @@ export const ArticleMediaLoader = () => (
   />
 );
 
-export const LivePageMediaLoader = () => (
+export const Portrait = () => (
+  <Component
+    service="pidgin"
+    pageType="article"
+    blocks={aresMediaPortraitBlocks as MediaBlock[]}
+  />
+);
+
+export const LivePageMedia = () => (
   <Component
     service="pidgin"
     pageType="live"