From 57fd02bfd58def46fc8bc7307dd71ea25c277638 Mon Sep 17 00:00:00 2001
From: Sam Grund <sam@Sams-MBP.fios-router.home>
Date: Mon, 11 Nov 2024 14:21:10 -0500
Subject: [PATCH] feat(lotdetails): L3-3149 tweaks to Video and Carousel to
 support object video

---
 src/components/Carousel/Carousel.tsx | 18 ++++-----
 src/components/Video/Video.tsx       | 60 +++++++++++++++++-----------
 2 files changed, 45 insertions(+), 33 deletions(-)

diff --git a/src/components/Carousel/Carousel.tsx b/src/components/Carousel/Carousel.tsx
index fcda6099..c9d6bf40 100644
--- a/src/components/Carousel/Carousel.tsx
+++ b/src/components/Carousel/Carousel.tsx
@@ -82,6 +82,7 @@ const Carousel = forwardRef<HTMLDivElement, CarouselProps>(
       {
         loop,
         startIndex,
+        inViewThreshold: 0.99,
       },
       [
         ...(useWheelGestures
@@ -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],
     );
@@ -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
diff --git a/src/components/Video/Video.tsx b/src/components/Video/Video.tsx
index 64a4bba7..890be671 100644
--- a/src/components/Video/Video.tsx
+++ b/src/components/Video/Video.tsx
@@ -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
@@ -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;