-

packages/components/src/Media/Video.tsx

@@ -1,41 +1,32 @@
-import React from 'react';
-import { calculateSpanWidth } from '@newspaperui/utils';
-import { useSection } from '../Section/Section';
-import { Caption } from '../Text/Caption';
+'use client';
+import React, { CSSProperties } from 'react';
+import { clampSpan, cx } from '@newspaperui/utils';
+import { useSection } from '../layout/Section';
+import { Caption } from '../text/Caption';
 
 export interface VideoProps {
   src: string;
   poster?: string;
-  span?: number;
   caption?: string;
+  credit?: string;
+  span?: number;
+  controls?: boolean;
+  className?: string;
+  style?: CSSProperties;
 }
 
 export const Video: React.FC<VideoProps> = ({
-  src,
-  poster,
-  span = 1,
-  caption,
+  src, poster, caption, credit, span, controls = true, className, style,
 }) => {
   const section = useSection();
-  const width = calculateSpanWidth(span, section.columns);
-
+  const cols = span ? clampSpan(span, section.columns) : undefined;
   return (
-    <div
-      className="newspaper-video"
-      style={{ width }}
-      data-span={span}
+    <figure
+      className={cx('nui-video nui-avoid-break', className)}
+      style={{ margin: 0, gridColumn: cols ? `span ${cols}` : undefined, ...style }}
     >
-      <video
-        src={src}
-        poster={poster}
-        controls
-        style={{
-          width: '100%',
-          height: 'auto',
-          display: 'block',
-        }}
-      />
-      {caption && <Caption>{caption}</Caption>}
-    </div>
+      <video src={src} poster={poster} controls={controls} style={{ width: '100%', height: 'auto' }} />
+      {(caption || credit) && <Caption credit={credit}>{caption}</Caption>}
+    </figure>
   );
 };