Add Storybook story for portrait player

bbc · Sep 27, 2024 · a7f0fdb · a7f0fdb
1 parent add8ade
commit a7f0fdb
Show file tree

Hide file tree

Showing 2 changed files with 82 additions and 3 deletions.
diff --git 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
@@ -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,15 +37,23 @@ export default {
   },
 };
 
-export const ArticleMediaLoader = () => (
+export const Landscape = () => (
   <Component
     service="pidgin"
     pageType="article"
     blocks={aresMediaBlocks as MediaBlock[]}
   />
 );
 
-export const LivePageMediaLoader = () => (
+export const Portrait = () => (
+  <Component
+    service="pidgin"
+    pageType="article"
+    blocks={aresMediaPortraitBlocks as MediaBlock[]}
+  />
+);
+
+export const LivePageMedia = () => (
   <Component
     service="pidgin"
     pageType="live"