@financial-times/cp-content-pipeline-ui 6.15.6 → 7.0.1

package/src/stories/Clip.stories.tsx

@@ -1,4 +1,6 @@
 import React, { useEffect } from 'react'
+import type { Meta, StoryObj } from '@storybook/react'
+
 import ClipServer from '../components/Clip'
 import ClipClient from '../components/Clip/client'
 import oTracking from '@financial-times/o-tracking/main'
@@ -11,12 +13,16 @@ export default {
   component: ClipServer,
   tags: ['autodocs'],
   argTypes: {
-    dataLayout: {
-      options: ['in-line', 'full-grid', 'mid-grid'],
-      control: { type: 'radio' },
+    content: {
+      dataLayout: {
+        options: ['in-line', 'full-grid', 'mid-grid'],
+        control: { type: 'radio' },
+      },
     },
   },
-}
+} satisfies Meta<typeof ClipServer>
+
+type Story = StoryObj<typeof ClipServer>
 
 const ArticleWrapper: React.FC<React.PropsWithChildren> = ({ children }) => {
   return (
@@ -185,7 +191,7 @@ const ClipStory = (args: ClipProps) => {
   )
 }
 
-export const Inline = (args: ClipProps) => {
+export const Inline: Story = (args: ClipProps) => {
   return <ClipStory {...args} />
 }
 
@@ -249,350 +255,358 @@ const ThumbnailClipStory = (args: ClipProps) => {
 
 // More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
 Inline.args = {
-  type: 'clip-set',
-  autoplay: false,
-  loop: false,
-  muted: false,
-  dataLayout: 'in-line',
-  id: '16cd2e1c-5299-4f4c-be67-1620fd0bc396',
-  noAudio: null,
-  caption:
-    'Former US president Donald Trump speaks on airport tarmac after being booked at Fulton County jail',
-  credits: 'Reuters',
-  description:
-    'Former US president Donald Trump speaks on airport tarmac after being booked at Fulton County jail',
-  displayTitle: null,
-  contentWarning: [],
-  source: null,
-  subtitle: null,
-  publishedDate: '2023-10-30T10:54:19.210Z',
-  clips: [
-    {
-      __typename: 'Clip',
-      format: 'standard-inline',
-      dataSource: [
-        {
-          audioCodec: 'aac',
-          binaryUrl:
-            'https://spark-clips-prod.s3.eu-west-1.amazonaws.com/optimised-media-files/16984330352240/640x640.mp4',
-          duration: 26250,
-          mediaType: 'video/mp4',
-          pixelHeight: 640,
-          pixelWidth: 640,
-          videoCodec: 'h264',
-        },
-        {
-          audioCodec: 'aac',
-          binaryUrl:
-            'https://spark-clips-prod.s3.eu-west-1.amazonaws.com/optimised-media-files/16984330352240/1280x1280.mp4',
-          duration: 26250,
-          mediaType: 'video/mp4',
-          pixelHeight: 1080,
-          pixelWidth: 1080,
-          videoCodec: 'h264',
-        },
-        {
-          audioCodec: 'aac',
-          binaryUrl:
-            'https://spark-clips-prod.s3.eu-west-1.amazonaws.com/optimised-media-files/16984330352240/1920x1920.mp4',
-          duration: 26250,
-          mediaType: 'video/mp4',
-          pixelHeight: 1080,
-          pixelWidth: 1080,
-          videoCodec: 'h264',
-        },
-        {
-          audioCodec: 'mp3',
-          binaryUrl:
-            'https://spark-clips-prod.s3.eu-west-1.amazonaws.com/optimised-media-files/16984330352240/0x0.mp3',
-          duration: 26280,
-          mediaType: 'audio/mpeg',
-          pixelHeight: null,
-          pixelWidth: null,
-          videoCodec: null,
-        },
-      ],
-      poster:
-        'https://www.ft.com/__origami/service/image/v2/images/raw/https%3A%2F%2Fspark-clips-prod.s3.eu-west-1.amazonaws.com%2Fposter-images%2F440be423-1483-4243-8cd7-22ef8d003e70?source=cp-content-pipeline&fit=scale-down&quality=highest&width=700&dpr=1',
-    },
-  ],
-  accessibility: {
-    captions: [
+  content: {
+    type: 'clip-set',
+    autoplay: false,
+    loop: false,
+    muted: false,
+    dataLayout: 'in-line',
+    id: '16cd2e1c-5299-4f4c-be67-1620fd0bc396',
+    noAudio: null,
+    caption:
+      'Former US president Donald Trump speaks on airport tarmac after being booked at Fulton County jail',
+    credits: 'Reuters',
+    description:
+      'Former US president Donald Trump speaks on airport tarmac after being booked at Fulton County jail',
+    displayTitle: null,
+    contentWarning: [],
+    source: null,
+    subtitle: null,
+    publishedDate: '2023-10-30T10:54:19.210Z',
+    clips: [
       {
-        url: 'https://next-media-api.ft.com/clips/captions/32069811',
-        mediaType: 'text/vtt',
+        format: 'standard-inline',
+        dataSource: [
+          {
+            audioCodec: 'aac',
+            binaryUrl:
+              'https://spark-clips-prod.s3.eu-west-1.amazonaws.com/optimised-media-files/16984330352240/640x640.mp4',
+            duration: 26250,
+            mediaType: 'video/mp4',
+            pixelHeight: 640,
+            pixelWidth: 640,
+            videoCodec: 'h264',
+          },
+          {
+            audioCodec: 'aac',
+            binaryUrl:
+              'https://spark-clips-prod.s3.eu-west-1.amazonaws.com/optimised-media-files/16984330352240/1280x1280.mp4',
+            duration: 26250,
+            mediaType: 'video/mp4',
+            pixelHeight: 1080,
+            pixelWidth: 1080,
+            videoCodec: 'h264',
+          },
+          {
+            audioCodec: 'aac',
+            binaryUrl:
+              'https://spark-clips-prod.s3.eu-west-1.amazonaws.com/optimised-media-files/16984330352240/1920x1920.mp4',
+            duration: 26250,
+            mediaType: 'video/mp4',
+            pixelHeight: 1080,
+            pixelWidth: 1080,
+            videoCodec: 'h264',
+          },
+          {
+            audioCodec: 'mp3',
+            binaryUrl:
+              'https://spark-clips-prod.s3.eu-west-1.amazonaws.com/optimised-media-files/16984330352240/0x0.mp3',
+            duration: 26280,
+            mediaType: 'audio/mpeg',
+            pixelHeight: null,
+            pixelWidth: null,
+            videoCodec: null,
+          },
+        ],
+        poster:
+          'https://www.ft.com/__origami/service/image/v2/images/raw/https%3A%2F%2Fspark-clips-prod.s3.eu-west-1.amazonaws.com%2Fposter-images%2F440be423-1483-4243-8cd7-22ef8d003e70?source=cp-content-pipeline&fit=scale-down&quality=highest&width=700&dpr=1',
       },
     ],
-    transcript: {
-      source: 'transcript',
-      structured: {
-        tree: {
-          type: 'body',
-          version: 1,
-          children: [
-            {
-              type: 'paragraph',
-              children: [
-                {
-                  type: 'text',
-                  value:
-                    "What has taken place here is a travesty of justice. We did nothing wrong. I did nothing wrong, and everybody knows it. I've never had such support, and that goes with the other ones, too. ",
-                },
-              ],
-            },
-            {
-              type: 'paragraph',
-              children: [
-                {
-                  type: 'text',
-                  value:
-                    "What they're doing is election interference. They're trying to interfere with an election. There's never been anything like it in our country before. ",
-                },
-              ],
-            },
-            {
-              type: 'paragraph',
-              children: [
-                {
-                  type: 'text',
-                  value:
-                    "This is their way of campaigning. And this is one instance, but you have three other instances. It's election interference. ",
-                },
-              ],
-            },
-          ],
+    accessibility: {
+      captions: [
+        {
+          url: 'https://next-media-api.ft.com/clips/captions/32069811',
+          mediaType: 'text/vtt',
+        },
+      ],
+      transcript: {
+        source: 'transcript',
+        structured: {
+          tree: {
+            type: 'body',
+            version: 1,
+            children: [
+              {
+                type: 'paragraph',
+                children: [
+                  {
+                    type: 'text',
+                    value:
+                      "What has taken place here is a travesty of justice. We did nothing wrong. I did nothing wrong, and everybody knows it. I've never had such support, and that goes with the other ones, too. ",
+                  },
+                ],
+              },
+              {
+                type: 'paragraph',
+                children: [
+                  {
+                    type: 'text',
+                    value:
+                      "What they're doing is election interference. They're trying to interfere with an election. There's never been anything like it in our country before. ",
+                  },
+                ],
+              },
+              {
+                type: 'paragraph',
+                children: [
+                  {
+                    type: 'text',
+                    value:
+                      "This is their way of campaigning. And this is one instance, but you have three other instances. It's election interference. ",
+                  },
+                ],
+              },
+            ],
+          },
         },
       },
     },
   },
 }
 
-export const InlineSquare = (args: ClipProps) => {
+export const InlineSquare: Story = (args: ClipProps) => {
   return <ClipStory {...args} />
 }
 InlineSquare.args = {
-  autoplay: true,
-  loop: true,
-  muted: true,
-  dataLayout: 'in-line',
-  id: '44e42a16-4cb5-4cf0-b5c2-518f6366d21a',
-  noAudio: null,
-  caption: null,
-  credits: 'FT',
-  description: 'Open-air cooking over fire',
-  displayTitle: null,
-  contentWarning: [],
-  source: null,
-  subtitle: null,
-  publishedDate: '2024-01-03T17:26:32.057Z',
-  clips: [
-    {
-      __typename: 'Clip',
-      format: 'standard-inline',
-      dataSource: [
-        {
-          audioCodec: 'aac',
-          binaryUrl:
-            'https://spark-clips-prod.s3.eu-west-1.amazonaws.com/optimised-media-files/17043027476580/1920x1920.mp4',
-          duration: 10975,
-          mediaType: 'video/mp4',
-          pixelHeight: 1080,
-          pixelWidth: 1080,
-          videoCodec: 'h264',
-        },
-      ],
-      poster:
-        'https://www.ft.com/__origami/service/image/v2/images/raw/https%3A%2F%2Fspark-clips-prod.s3.eu-west-1.amazonaws.com%2Fposter-images%2F78a110c8-24ff-4ca7-95e2-097ec6a22428?source=cp-content-pipeline&fit=scale-down&quality=highest&width=700&dpr=1',
+  content: {
+    type: 'clip-set',
+    autoplay: true,
+    loop: true,
+    muted: true,
+    dataLayout: 'in-line',
+    id: '44e42a16-4cb5-4cf0-b5c2-518f6366d21a',
+    noAudio: null,
+    caption: null,
+    credits: 'FT',
+    description: 'Open-air cooking over fire',
+    displayTitle: null,
+    contentWarning: [],
+    source: null,
+    subtitle: null,
+    publishedDate: '2024-01-03T17:26:32.057Z',
+    clips: [
+      {
+        format: 'standard-inline',
+        dataSource: [
+          {
+            audioCodec: 'aac',
+            binaryUrl:
+              'https://spark-clips-prod.s3.eu-west-1.amazonaws.com/optimised-media-files/17043027476580/1920x1920.mp4',
+            duration: 10975,
+            mediaType: 'video/mp4',
+            pixelHeight: 1080,
+            pixelWidth: 1080,
+            videoCodec: 'h264',
+          },
+        ],
+        poster:
+          'https://www.ft.com/__origami/service/image/v2/images/raw/https%3A%2F%2Fspark-clips-prod.s3.eu-west-1.amazonaws.com%2Fposter-images%2F78a110c8-24ff-4ca7-95e2-097ec6a22428?source=cp-content-pipeline&fit=scale-down&quality=highest&width=700&dpr=1',
+      },
+    ],
+    accessibility: {
+      captions: [],
+      transcript: null,
     },
-  ],
-  accessibility: {
-    captions: [],
-    transcript: null,
   },
 }
 
-export const InlineLandscape = (args: ClipProps) => {
+export const InlineLandscape: Story = (args: ClipProps) => {
   return <ClipStory {...args} />
 }
 InlineLandscape.args = {
-  url: 'https://storytelling-clips.s3.amazonaws.com/World/Sikh%20leader-clip_Trudeau.mp4',
-  credits: 'FT',
-  caption: 'Luxaviation chief Patrick Hansen',
-  poster:
-    'https://d1e00ek4ebabms.cloudfront.net/production/9d3a16ee-ffe8-4e96-b58d-d163fdb1b6d2.jpg',
-  alt: 'Civilians hug Ukrainian soldiers in Balakliya town square',
-  dataLayout: 'in-line',
-  description:
-    'Luxaviation chief Patrick Hansen speaks at the FT’s Business of Luxury summit in Monaco',
-  noAudio: false,
-  accessibility: {
-    captions: [
-      {
-        url: 'https://next-media-api.ft.com/captions/16862228218010.vtt',
-      },
-    ],
-  },
-  clips: [
-    {
-      __typename: 'Clip',
-      format: 'standard-inline',
-      dataSource: [
-        {
-          audioCodec: 'aac',
-          binaryUrl:
-            'https://spark-clips-prod.s3.eu-west-1.amazonaws.com/optimised-media-files/16984336376570/640x360.mp4',
-          duration: 29514,
-          mediaType: 'video/mp4',
-          pixelHeight: 360,
-          pixelWidth: 640,
-          videoCodec: 'h264',
-        },
-        {
-          audioCodec: 'aac',
-          binaryUrl:
-            'https://spark-clips-prod.s3.eu-west-1.amazonaws.com/optimised-media-files/16984336376570/1280x720.mp4',
-          duration: 29514,
-          mediaType: 'video/mp4',
-          pixelHeight: 720,
-          pixelWidth: 1280,
-          videoCodec: 'h264',
-        },
-        {
-          audioCodec: 'aac',
-          binaryUrl:
-            'https://spark-clips-prod.s3.eu-west-1.amazonaws.com/optimised-media-files/16984336376570/1920x1080.mp4',
-          duration: 29514,
-          mediaType: 'video/mp4',
-          pixelHeight: 1080,
-          pixelWidth: 1920,
-          videoCodec: 'h264',
-        },
+  content: {
+    type: 'clip-set',
+    id: '',
+    autoplay: false,
+    loop: false,
+    muted: false,
+    credits: 'FT',
+    caption: 'Luxaviation chief Patrick Hansen',
+    dataLayout: 'in-line',
+    description:
+      'Luxaviation chief Patrick Hansen speaks at the FT’s Business of Luxury summit in Monaco',
+    noAudio: false,
+    accessibility: {
+      captions: [
         {
-          audioCodec: 'mp3',
-          binaryUrl:
-            'https://spark-clips-prod.s3.eu-west-1.amazonaws.com/optimised-media-files/16984336376570/0x0.mp3',
-          duration: 29544,
-          mediaType: 'audio/mpeg',
-          pixelHeight: null,
-          pixelWidth: null,
-          videoCodec: null,
+          url: 'https://next-media-api.ft.com/captions/16862228218010.vtt',
         },
       ],
-      poster:
-        'https://www.ft.com/__origami/service/image/v2/images/raw/https%3A%2F%2Fspark-clips-prod.s3.eu-west-1.amazonaws.com%2Fposter-images%2F3fbe0b92-8018-4686-8387-eea9fab7e392?source=cp-content-pipeline&fit=scale-down&quality=highest&width=700&dpr=1',
     },
-  ],
+    clips: [
+      {
+        format: 'standard-inline',
+        dataSource: [
+          {
+            audioCodec: 'aac',
+            binaryUrl:
+              'https://spark-clips-prod.s3.eu-west-1.amazonaws.com/optimised-media-files/16984336376570/640x360.mp4',
+            duration: 29514,
+            mediaType: 'video/mp4',
+            pixelHeight: 360,
+            pixelWidth: 640,
+            videoCodec: 'h264',
+          },
+          {
+            audioCodec: 'aac',
+            binaryUrl:
+              'https://spark-clips-prod.s3.eu-west-1.amazonaws.com/optimised-media-files/16984336376570/1280x720.mp4',
+            duration: 29514,
+            mediaType: 'video/mp4',
+            pixelHeight: 720,
+            pixelWidth: 1280,
+            videoCodec: 'h264',
+          },
+          {
+            audioCodec: 'aac',
+            binaryUrl:
+              'https://spark-clips-prod.s3.eu-west-1.amazonaws.com/optimised-media-files/16984336376570/1920x1080.mp4',
+            duration: 29514,
+            mediaType: 'video/mp4',
+            pixelHeight: 1080,
+            pixelWidth: 1920,
+            videoCodec: 'h264',
+          },
+          {
+            audioCodec: 'mp3',
+            binaryUrl:
+              'https://spark-clips-prod.s3.eu-west-1.amazonaws.com/optimised-media-files/16984336376570/0x0.mp3',
+            duration: 29544,
+            mediaType: 'audio/mpeg',
+            pixelHeight: null,
+            pixelWidth: null,
+            videoCodec: null,
+          },
+        ],
+        poster:
+          'https://www.ft.com/__origami/service/image/v2/images/raw/https%3A%2F%2Fspark-clips-prod.s3.eu-west-1.amazonaws.com%2Fposter-images%2F3fbe0b92-8018-4686-8387-eea9fab7e392?source=cp-content-pipeline&fit=scale-down&quality=highest&width=700&dpr=1',
+      },
+    ],
+  },
 }
 
-export const InlineAutoplay = (args: ClipProps) => {
+export const InlineAutoplay: Story = (args: ClipProps) => {
   return <ClipStory {...args} />
 }
 
 // More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
 InlineAutoplay.args = {
-  type: 'clip-set',
-  autoplay: true,
-  loop: true,
-  muted: true,
-  dataLayout: 'in-line',
-  id: '362347ce-f304-47ec-8078-cae042a2f490',
-  noAudio: null,
-  caption: "'Trace Pong' leaves a line behind the path of the ball",
-  credits: 'Courtesy of the artist',
-  description: "'Trace Pong' leaves a line behind the path of the ball",
-  displayTitle: null,
-  contentWarning: [],
-  source: null,
-  subtitle: null,
-  publishedDate: '2023-10-30T10:51:59.822Z',
-  clips: [
-    {
-      __typename: 'Clip',
-      format: 'standard-inline',
-      dataSource: [
-        {
-          audioCodec: 'aac',
-          binaryUrl:
-            'https://spark-clips-prod.s3.eu-west-1.amazonaws.com/optimised-media-files/16984305828900/640x360.mp4',
-          duration: 24052,
-          mediaType: 'video/mp4',
-          pixelHeight: 360,
-          pixelWidth: 640,
-          videoCodec: 'h264',
-        },
-        {
-          audioCodec: 'aac',
-          binaryUrl:
-            'https://spark-clips-prod.s3.eu-west-1.amazonaws.com/optimised-media-files/16984305828900/1280x720.mp4',
-          duration: 24052,
-          mediaType: 'video/mp4',
-          pixelHeight: 720,
-          pixelWidth: 1280,
-          videoCodec: 'h264',
-        },
-        {
-          audioCodec: 'aac',
-          binaryUrl:
-            'https://spark-clips-prod.s3.eu-west-1.amazonaws.com/optimised-media-files/16984305828900/1920x1080.mp4',
-          duration: 24052,
-          mediaType: 'video/mp4',
-          pixelHeight: 1080,
-          pixelWidth: 1920,
-          videoCodec: 'h264',
-        },
-        {
-          audioCodec: 'mp3',
-          binaryUrl:
-            'https://spark-clips-prod.s3.eu-west-1.amazonaws.com/optimised-media-files/16984305828900/0x0.mp3',
-          duration: 24072,
-          mediaType: 'audio/mpeg',
-          pixelHeight: null,
-          pixelWidth: null,
-          videoCodec: null,
-        },
-      ],
-      poster:
-        'https://www.ft.com/__origami/service/image/v2/images/raw/https%3A%2F%2Fspark-clips-prod.s3.eu-west-1.amazonaws.com%2Fposter-images%2Ff5ca5815-b40d-4dac-80b6-b8e764817685?source=cp-content-pipeline&fit=scale-down&quality=highest&width=700&dpr=1',
+  content: {
+    type: 'clip-set',
+    autoplay: true,
+    loop: true,
+    muted: true,
+    dataLayout: 'in-line',
+    id: '362347ce-f304-47ec-8078-cae042a2f490',
+    noAudio: null,
+    caption: "'Trace Pong' leaves a line behind the path of the ball",
+    credits: 'Courtesy of the artist',
+    description: "'Trace Pong' leaves a line behind the path of the ball",
+    displayTitle: null,
+    contentWarning: [],
+    source: null,
+    subtitle: null,
+    publishedDate: '2023-10-30T10:51:59.822Z',
+    clips: [
+      {
+        format: 'standard-inline',
+        dataSource: [
+          {
+            audioCodec: 'aac',
+            binaryUrl:
+              'https://spark-clips-prod.s3.eu-west-1.amazonaws.com/optimised-media-files/16984305828900/640x360.mp4',
+            duration: 24052,
+            mediaType: 'video/mp4',
+            pixelHeight: 360,
+            pixelWidth: 640,
+            videoCodec: 'h264',
+          },
+          {
+            audioCodec: 'aac',
+            binaryUrl:
+              'https://spark-clips-prod.s3.eu-west-1.amazonaws.com/optimised-media-files/16984305828900/1280x720.mp4',
+            duration: 24052,
+            mediaType: 'video/mp4',
+            pixelHeight: 720,
+            pixelWidth: 1280,
+            videoCodec: 'h264',
+          },
+          {
+            audioCodec: 'aac',
+            binaryUrl:
+              'https://spark-clips-prod.s3.eu-west-1.amazonaws.com/optimised-media-files/16984305828900/1920x1080.mp4',
+            duration: 24052,
+            mediaType: 'video/mp4',
+            pixelHeight: 1080,
+            pixelWidth: 1920,
+            videoCodec: 'h264',
+          },
+          {
+            audioCodec: 'mp3',
+            binaryUrl:
+              'https://spark-clips-prod.s3.eu-west-1.amazonaws.com/optimised-media-files/16984305828900/0x0.mp3',
+            duration: 24072,
+            mediaType: 'audio/mpeg',
+            pixelHeight: null,
+            pixelWidth: null,
+            videoCodec: null,
+          },
+        ],
+        poster:
+          'https://www.ft.com/__origami/service/image/v2/images/raw/https%3A%2F%2Fspark-clips-prod.s3.eu-west-1.amazonaws.com%2Fposter-images%2Ff5ca5815-b40d-4dac-80b6-b8e764817685?source=cp-content-pipeline&fit=scale-down&quality=highest&width=700&dpr=1',
+      },
+    ],
+    accessibility: {
+      captions: [],
+      transcript: null,
     },
-  ],
-  accessibility: {
-    captions: [],
-    transcript: null,
   },
 }
 
-export const NoDataSource = (args: ClipProps) => {
+export const NoDataSource: Story = (args: ClipProps) => {
   return <ClipStory {...args} />
 }
 
 // More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
 NoDataSource.args = {
-  type: 'clip-set',
-  autoplay: true,
-  loop: true,
-  muted: true,
-  dataLayout: 'in-line',
-  id: '362347ce-f304-47ec-8078-cae042a2f490',
-  noAudio: null,
-  caption: "'Trace Pong' leaves a line behind the path of the ball",
-  credits: 'Courtesy of the artist',
-  description: "'Trace Pong' leaves a line behind the path of the ball",
-  displayTitle: null,
-  contentWarning: [],
-  source: null,
-  subtitle: null,
-  publishedDate: '2023-10-30T10:51:59.822Z',
-  clips: [
-    {
-      __typename: 'Clip',
-      format: 'standard-inline',
-      poster:
-        'https://www.ft.com/__origami/service/image/v2/images/raw/https%3A%2F%2Fspark-clips-prod.s3.eu-west-1.amazonaws.com%2Fposter-images%2Ff5ca5815-b40d-4dac-80b6-b8e764817685?source=cp-content-pipeline&fit=scale-down&quality=highest&width=700&dpr=1',
+  content: {
+    type: 'clip-set',
+    autoplay: true,
+    loop: true,
+    muted: true,
+    dataLayout: 'in-line',
+    id: '362347ce-f304-47ec-8078-cae042a2f490',
+    noAudio: null,
+    caption: "'Trace Pong' leaves a line behind the path of the ball",
+    credits: 'Courtesy of the artist',
+    description: "'Trace Pong' leaves a line behind the path of the ball",
+    displayTitle: null,
+    contentWarning: [],
+    source: null,
+    subtitle: null,
+    publishedDate: '2023-10-30T10:51:59.822Z',
+    clips: [
+      {
+        format: 'standard-inline',
+        dataSource: [],
+        poster:
+          'https://www.ft.com/__origami/service/image/v2/images/raw/https%3A%2F%2Fspark-clips-prod.s3.eu-west-1.amazonaws.com%2Fposter-images%2Ff5ca5815-b40d-4dac-80b6-b8e764817685?source=cp-content-pipeline&fit=scale-down&quality=highest&width=700&dpr=1',
+      },
+    ],
+    accessibility: {
+      captions: [],
+      transcript: null,
     },
-  ],
-  accessibility: {
-    captions: [],
-    transcript: null,
   },
 }
 
@@ -602,37 +616,39 @@ export const ThumbnailClip = (args: ClipProps) => {
 
 // More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
 ThumbnailClip.args = {
-  accessibility: {
-    captions: [],
-    transcript: null,
-  },
-  autoplay: true,
-  clips: [
-    {
-      dataSource: [
-        {
-          audioCodec: 'aac',
-          binaryUrl:
-            'https://spark-clips-prod.s3.eu-west-1.amazonaws.com/raw-media-files/17144958736710',
-          duration: 161012,
-          mediaType: 'video/mp4',
-          pixelHeight: 1080,
-          pixelWidth: 1920,
-          videoCodec: 'h264',
-        },
-      ],
-      id: 'inline-1',
-      poster:
-        'https://spark-clips-prod.s3.eu-west-1.amazonaws.com/poster-images/e37aa9c0-69bd-4bd0-8874-c90f0a265894',
+  content: {
+    accessibility: {
+      captions: [],
+      transcript: null,
     },
-  ],
-  dataLayout: '',
-  id: '362347ce-f304-47ec-8078-cae042a2f490',
-  loop: true,
-  muted: true,
-  noAudio: null,
-  poster:
-    'https://spark-clips-prod.s3.eu-west-1.amazonaws.com/poster-images/e37aa9c0-69bd-4bd0-8874-c90f0a265894',
-  publishedDate: '2023-10-30T10:51:59.822Z',
-  type: 'clip-set',
+    autoplay: true,
+    clips: [
+      {
+        dataSource: [
+          {
+            audioCodec: 'aac',
+            binaryUrl:
+              'https://spark-clips-prod.s3.eu-west-1.amazonaws.com/raw-media-files/17144958736710',
+            duration: 161012,
+            mediaType: 'video/mp4',
+            pixelHeight: 1080,
+            pixelWidth: 1920,
+            videoCodec: 'h264',
+          },
+        ],
+        id: 'inline-1',
+        poster:
+          'https://spark-clips-prod.s3.eu-west-1.amazonaws.com/poster-images/e37aa9c0-69bd-4bd0-8874-c90f0a265894',
+      },
+    ],
+    dataLayout: '',
+    id: '362347ce-f304-47ec-8078-cae042a2f490',
+    loop: true,
+    muted: true,
+    noAudio: null,
+    poster:
+      'https://spark-clips-prod.s3.eu-west-1.amazonaws.com/poster-images/e37aa9c0-69bd-4bd0-8874-c90f0a265894',
+    publishedDate: '2023-10-30T10:51:59.822Z',
+    type: 'clip-set',
+  },
 }