diff --git a/components/Media/MediaWrapper.tsx b/components/Media/MediaWrapper.tsx index a85d63ee..e6efebcd 100644 --- 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 & 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 & 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 index 180b01d4..a643e84b 100644 --- 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 & 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 index f9bc23bd..f583c88e 100644 --- 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 & Omit(false); const [isUserPaused, setIsUserPaused] = useState(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)}