Remove redundant props in StoryVideo and StoryImage that are already …

…in the shared MediaWrapperProps; better doc for aspectRatioClass; add console warning if video playback is causing error
SU-SWS · Feb 28, 2025 · 5dfd1c4 · 5dfd1c4
1 parent daf5c73
commit 5dfd1c4
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 20 deletions.
diff --git a/components/Media/MediaWrapper.tsx b/components/Media/MediaWrapper.tsx
@@ -13,6 +13,11 @@ import * as styles from './MediaWrapper.styles';
 
 export type MediaWrapperProps = React.HTMLAttributes<HTMLDivElement> & CaptionProps & {
   aspectRatio?: ImageAspectRatioType;
+  /**
+   * If different aspect ratios at different breakpoints are needed, ie, using the AspectRatio prop is insufficient,
+   * pass custom classes into the aspect ratio container using this prop.
+   */
+  aspectRatioClass?: string;
   isFullHeight?: boolean;
   isParallax?: boolean;
   boundingWidth?: 'site' | 'full';
@@ -21,12 +26,12 @@ export type MediaWrapperProps = React.HTMLAttributes<HTMLDivElement> & CaptionPr
   pb?: PaddingType;
   animation?: AnimationType;
   delay?: number;
-  aspectRatioClass?: string; // Additional eg, responsive aspect ratio classes
 };
 
 export const MediaWrapper = ({
   caption,
   aspectRatio,
+  aspectRatioClass,
   isFullHeight,
   isParallax,
   boundingWidth = 'full',
@@ -37,7 +42,6 @@ export const MediaWrapper = ({
   captionBgColor = 'transparent',
   animation = 'none',
   delay,
-  aspectRatioClass,
   children,
   className,
   ...props

diff --git a/components/StoryImage/StoryImage.tsx b/components/StoryImage/StoryImage.tsx
@@ -1,6 +1,5 @@
 import { MediaWrapper, type MediaWrapperProps } from '@/components/Media';
 import { Parallax } from '@/components/Parallax';
-import { type PaddingType } from '@/utilities/datasource';
 import { getProcessedImage } from '@/utilities/getProcessedImage';
 import { getSbImageSize } from '@/utilities/getSbImageSize';
 import * as styles from './StoryImage.styles';
@@ -10,8 +9,6 @@ export type StoryImageProps = React.HTMLAttributes<HTMLDivElement> & MediaWrappe
   imageFocus?: string;
   isLoadingEager?: boolean;
   alt?: string;
-  pt?: PaddingType;
-  pb?: PaddingType;
 };
 
 export const StoryImage = ({

diff --git a/components/Video/StoryVideo.tsx b/components/Video/StoryVideo.tsx
@@ -1,10 +1,8 @@
 import { useEffect, useRef, useState } from 'react';
 import { cnb } from 'cnbuilder';
 import { useInView } from 'framer-motion';
-import { type AnimationType } from '@/components/Animate';
 import { MediaWrapper, type MediaWrapperProps } from '@/components/Media';
 import { MutedVideoLoop, VideoButton } from '@/components/Video';
-import { type PaddingType } from '@/utilities/datasource';
 import * as styles from './StoryVideo.styles';
 
 /**
@@ -18,11 +16,6 @@ export type StoryVideoProps = React.HTMLAttributes<HTMLDivElement> & Omit<MediaW
   videoMp4?: string;
   videoPosterSrc?: string;
   isFullScreen?: boolean; // Whether the video takes the full width of the device
-  spacingTop?: PaddingType;
-  spacingBottom?: PaddingType;
-  animation?: AnimationType;
-  delay?: number;
-  aspectRatioClass?: string;
 };
 
 export const StoryVideo = ({
@@ -33,9 +26,9 @@ export const StoryVideo = ({
   aspectRatio,
   boundingWidth = 'full',
   width,
+  pt,
+  pb,
   isFullScreen,
-  spacingTop,
-  spacingBottom,
   captionBgColor = 'transparent',
   animation = 'none',
   delay,
@@ -50,17 +43,17 @@ export const StoryVideo = ({
   const [isPlaying, setIsPlaying] = useState<boolean>(false);
   const [isUserPaused, setIsUserPaused] = useState<boolean>(false);
 
-  // Toggle foreground video play/pause
+  // Toggle video play/pause
   const toggleVideo = () => {
     if (!videoRef.current) return;
 
     setIsPlaying((prev) => {
       if (prev) {
-        videoRef.current?.pause();
+        videoRef.current.pause();
         setIsUserPaused(true);
       } else {
         videoRef.current
-          ?.play()
+          .play()
           .catch(() => {});
         setIsUserPaused(false);
       }
@@ -77,7 +70,7 @@ export const StoryVideo = ({
     if (!video) return;
 
     if (isVideoInView && !isUserPaused) {
-      video.play().catch(() => {});
+      video.play().catch((error) => console.warn('Video playback prevented:', error));
     } else {
       video.pause();
     }
@@ -95,8 +88,8 @@ export const StoryVideo = ({
       aspectRatio={aspectRatio}
       boundingWidth={boundingWidth}
       width={width}
-      pt={spacingTop}
-      pb={spacingBottom}
+      pt={pt}
+      pb={pb}
       animation={animation}
       delay={delay}
       aspectRatioClass={cnb(aspectRatioClass, styles.videoWrapper)}