Skip to content

Commit

Permalink
feat(lotdetails): L3-3149 tweaks to Video and Carousel to support obj…
Browse files Browse the repository at this point in the history
…ect video
  • Loading branch information
Sam Grund authored and Sam Grund committed Nov 11, 2024
1 parent 7a0ff41 commit 57fd02b
Show file tree
Hide file tree
Showing 2 changed files with 45 additions and 33 deletions.
18 changes: 9 additions & 9 deletions src/components/Carousel/Carousel.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -82,6 +82,7 @@ const Carousel = forwardRef<HTMLDivElement, CarouselProps>(
{
loop,
startIndex,
inViewThreshold: 0.99,
},
[
...(useWheelGestures
Expand Down Expand Up @@ -119,12 +120,15 @@ const Carousel = forwardRef<HTMLDivElement, CarouselProps>(
[api],
);

const onSettle = useCallback(
const onSlidesInView = useCallback(
(api: CarouselApi) => {
if (!api) {
return;
}
onSlideChange?.(api.selectedScrollSnap());
const slideIndex = api.slidesInView()?.[0];
if (slideIndex !== undefined) {
onSlideChange?.(slideIndex);
}
},
[onSlideChange],
);
Expand All @@ -133,15 +137,11 @@ const Carousel = forwardRef<HTMLDivElement, CarouselProps>(
if (!api) {
return;
}
onSettle(api);
api.on('reInit', onSettle);
api.on('settle', onSettle);

api.on('slidesInView', onSlidesInView);
return () => {
api?.off('settle', onSettle);
api?.off('reInit', onSettle);
api.off('slidesInView', onSlidesInView);
};
}, [api, onSettle]);
}, [api, onSlidesInView]);

return (
<CarouselContext.Provider
Expand Down
60 changes: 36 additions & 24 deletions src/components/Video/Video.tsx
Original file line number Diff line number Diff line change
@@ -1,17 +1,24 @@
import React, { ComponentProps } from 'react';
import React, { ComponentProps, forwardRef } from 'react';
import { getCommonProps } from '../../utils';
import classnames from 'classnames';

export interface VideoProps extends ComponentProps<'div'> {
/**
* Aspect ratio of the video
* Defaults to 1.777 (16/9)
*/
aspectRatio?: number;
/**
* The url of the video source
*/
videoSource: string;
/**
* The ref to the iframe
*/
iframeRef?: React.Ref<HTMLIFrameElement>;
/**
* The class name for the iframe
*/
iframeClassName?: string;
}
/**
* ## Overview
Expand All @@ -22,29 +29,34 @@ export interface VideoProps extends ComponentProps<'div'> {
*
* [Storybook Link](https://phillips-seldon.netlify.app/?path=/docs/components-video--overview)
*/
const Video = ({ aspectRatio = 16 / 9, className, videoSource, ...props }: VideoProps) => {
const { className: baseClassName, 'data-testid': dataTestId, ...commonProps } = getCommonProps(props, 'Video');
const Video = forwardRef<HTMLDivElement, VideoProps>(
({ aspectRatio, className, videoSource, iframeRef, iframeClassName, ...props }, ref) => {
const { className: baseClassName, 'data-testid': dataTestId, ...commonProps } = getCommonProps(props, 'Video');

const componentProps = {
className: classnames(baseClassName, className),
'data-testid': dataTestId,
style: { '--aspect-ratio': aspectRatio } as React.CSSProperties,
...commonProps,
...props,
};

const componentProps = {
className: classnames(baseClassName, className),
'data-testid': dataTestId,
style: { '--aspect-ratio': aspectRatio } as React.CSSProperties,
...commonProps,
...props,
};
return (
<div {...componentProps} ref={ref}>
<iframe
ref={iframeRef}
data-testid={`${dataTestId}-iframe`}
className={classnames(`${baseClassName}__iframe`, iframeClassName)}
src={videoSource}
allowFullScreen
allow="encrypted-media"
referrerPolicy="no-referrer"
/>
</div>
);
},
);

return (
<div {...componentProps}>
<iframe
data-testid={`${dataTestId}-iframe`}
className={`${baseClassName}__iframe`}
src={videoSource}
allowFullScreen
allow="encrypted-media"
referrerPolicy="no-referrer"
/>
</div>
);
};
Video.displayName = 'Video';

export default Video;

0 comments on commit 57fd02b

Please sign in to comment.