Carousel: Ensure autoplay is reset on interactions and correctly stop…

…s on slider focus/mouseover (#32897)
microsoft · Sep 24, 2024 · 6c31158 · 6c31158
1 parent 871477e
commit 6c31158
Show file tree

Hide file tree

Showing 9 changed files with 62 additions and 20 deletions.
diff --git a/change/@fluentui-react-carousel-preview-96e37f6f-4669-4470-b6a7-3c06903806f9.json b/change/@fluentui-react-carousel-preview-96e37f6f-4669-4470-b6a7-3c06903806f9.json
@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: Add resetAutoplay feature to reset index change timer",
+  "packageName": "@fluentui/react-carousel-preview",
+  "email": "mifraser@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/...act-components/react-carousel-preview/library/etc/react-carousel-preview.api.md b/...act-components/react-carousel-preview/library/etc/react-carousel-preview.api.md
@@ -125,6 +125,7 @@ export type CarouselContextValue = {
     selectPageByIndex: (event: React_2.MouseEvent<HTMLButtonElement | HTMLAnchorElement>, value: number, jump?: boolean) => void;
     subscribeForValues: (listener: (data: CarouselUpdateData) => void) => () => void;
     enableAutoplay: (autoplay: boolean) => void;
+    resetAutoplay: () => void;
     containerRef?: React_2.RefObject<HTMLDivElement>;
 };
 

diff --git a/...es/react-components/react-carousel-preview/library/src/components/Carousel/useCarousel.ts b/...es/react-components/react-carousel-preview/library/src/components/Carousel/useCarousel.ts
@@ -28,16 +28,17 @@ export function useCarousel_unstable(props: CarouselProps, ref: React.Ref<HTMLDi
   } = props;
 
   const { dir } = useFluent();
-  const { activeIndex, carouselApi, containerRef, subscribeForValues, enableAutoplay } = useEmblaCarousel({
-    align,
-    direction: dir,
-    loop: circular,
-    slidesToScroll: groupSize,
-    defaultActiveIndex: props.defaultActiveIndex,
-    activeIndex: props.activeIndex,
-    watchDrag: draggable,
-    containScroll: whitespace ? false : 'keepSnaps',
-  });
+  const { activeIndex, carouselApi, containerRef, subscribeForValues, enableAutoplay, resetAutoplay } =
+    useEmblaCarousel({
+      align,
+      direction: dir,
+      loop: circular,
+      slidesToScroll: groupSize,
+      defaultActiveIndex: props.defaultActiveIndex,
+      activeIndex: props.activeIndex,
+      watchDrag: draggable,
+      containScroll: whitespace ? false : 'keepSnaps',
+    });
 
   const selectPageByElement: CarouselContextValue['selectPageByElement'] = useEventCallback((event, element, jump) => {
     const foundIndex = carouselApi.scrollToElement(element, jump);
@@ -82,5 +83,6 @@ export function useCarousel_unstable(props: CarouselProps, ref: React.Ref<HTMLDi
     selectPageByIndex,
     subscribeForValues,
     enableAutoplay,
+    resetAutoplay,
   };
 }
diff --git a/...onents/react-carousel-preview/library/src/components/Carousel/useCarouselContextValues.ts b/...onents/react-carousel-preview/library/src/components/Carousel/useCarouselContextValues.ts
@@ -11,6 +11,7 @@ export function useCarouselContextValues_unstable(state: CarouselState): Carouse
     selectPageByIndex,
     subscribeForValues,
     enableAutoplay,
+    resetAutoplay,
     circular,
     containerRef,
   } = state;
@@ -23,6 +24,7 @@ export function useCarouselContextValues_unstable(state: CarouselState): Carouse
       selectPageByIndex,
       subscribeForValues,
       enableAutoplay,
+      resetAutoplay,
       circular,
       containerRef,
     }),
@@ -33,6 +35,7 @@ export function useCarouselContextValues_unstable(state: CarouselState): Carouse
       selectPageByIndex,
       subscribeForValues,
       enableAutoplay,
+      resetAutoplay,
       circular,
       containerRef,
     ],

diff --git a/...onents/react-carousel-preview/library/src/components/CarouselButton/useCarouselButton.tsx b/...onents/react-carousel-preview/library/src/components/CarouselButton/useCarouselButton.tsx
@@ -39,6 +39,7 @@ export const useCarouselButton_unstable = (
   const containerRef = useCarouselContext(ctx => ctx.containerRef);
   const selectPageByDirection = useCarouselContext(ctx => ctx.selectPageByDirection);
   const subscribeForValues = useCarouselContext(ctx => ctx.subscribeForValues);
+  const resetAutoplay = useCarouselContext(ctx => ctx.resetAutoplay);
 
   const isTrailing = useCarouselContext(ctx => {
     if (circular) {
@@ -77,6 +78,8 @@ export const useCarouselButton_unstable = (
         }
       });
     }
+
+    resetAutoplay();
   };
 
   useIsomorphicLayoutEffect(() => {

diff --git a/packages/react-components/react-carousel-preview/library/src/components/CarouselContext.ts b/packages/react-components/react-carousel-preview/library/src/components/CarouselContext.ts
@@ -18,6 +18,9 @@ export const carouselContextDefaultValue: CarouselContextValue = {
   enableAutoplay: () => {
     /** noop */
   },
+  resetAutoplay: () => {
+    /** noop */
+  },
   circular: false,
   containerRef: undefined,
 };

diff --git a/...s/react-components/react-carousel-preview/library/src/components/CarouselContext.types.ts b/...s/react-components/react-carousel-preview/library/src/components/CarouselContext.types.ts
@@ -28,6 +28,7 @@ export type CarouselContextValue = {
   ) => void;
   subscribeForValues: (listener: (data: CarouselUpdateData) => void) => () => void;
   enableAutoplay: (autoplay: boolean) => void;
+  resetAutoplay: () => void;
   containerRef?: React.RefObject<HTMLDivElement>;
 };
 

diff --git a/...s/react-carousel-preview/library/src/components/CarouselNavButton/useCarouselNavButton.ts b/...s/react-carousel-preview/library/src/components/CarouselNavButton/useCarouselNavButton.ts
@@ -36,13 +36,17 @@ export const useCarouselNavButton_unstable = (
   const selectPageByIndex = useCarouselContext(ctx => ctx.selectPageByIndex);
   const selected = useCarouselContext(ctx => ctx.activeIndex === index);
   const subscribeForValues = useCarouselContext(ctx => ctx.subscribeForValues);
+  const resetAutoplay = useCarouselContext(ctx => ctx.resetAutoplay);
 
   const handleClick: ARIAButtonSlotProps['onClick'] = useEventCallback(event => {
     onClick?.(event);
 
     if (!event.defaultPrevented && isHTMLElement(event.target)) {
       selectPageByIndex(event, index);
     }
+
+    // Ensure any autoplay timers are extended/reset
+    resetAutoplay();
   });
 
   const defaultTabProps = useTabsterAttributes({

diff --git a/packages/react-components/react-carousel-preview/library/src/components/useEmblaCarousel.ts b/packages/react-components/react-carousel-preview/library/src/components/useEmblaCarousel.ts
@@ -7,13 +7,15 @@ import { carouselSliderClassNames } from './CarouselSlider/useCarouselSliderStyl
 import { CarouselUpdateData, CarouselVisibilityEventDetail } from '../Carousel';
 import Autoplay from 'embla-carousel-autoplay';
 
+const sliderClassname = `.${carouselSliderClassNames.root}`;
+
 const DEFAULT_EMBLA_OPTIONS: EmblaOptionsType = {
   containScroll: 'trimSnaps',
   inViewThreshold: 0.99,
   watchDrag: false,
   skipSnaps: true,
 
-  container: `.${carouselSliderClassNames.root}`,
+  container: sliderClassname,
   slides: `.${carouselCardClassNames.root}`,
 };
 
@@ -56,18 +58,27 @@ export function useEmblaCarousel(
   });
 
   const emblaApi = React.useRef<EmblaCarouselType | null>(null);
-
   const autoplayRef = React.useRef<boolean>(false);
-  /* Our autoplay button, which is required by standards for autoplay to be enabled, will handle controlled state */
-  const enableAutoplay = React.useCallback((autoplay: boolean) => {
-    autoplayRef.current = autoplay;
-    if (autoplay) {
-      emblaApi.current?.plugins().autoplay.play();
-    } else {
-      emblaApi.current?.plugins().autoplay.stop();
-    }
+
+  const resetAutoplay = React.useCallback(() => {
+    emblaApi.current?.plugins().autoplay.reset();
   }, []);
 
+  /* Our autoplay button, which is required by standards for autoplay to be enabled, will handle controlled state */
+  const enableAutoplay = React.useCallback(
+    (autoplay: boolean) => {
+      autoplayRef.current = autoplay;
+      if (autoplay) {
+        emblaApi.current?.plugins().autoplay.play();
+        // Reset after play to ensure timing and any focus/mouse pause state is reset.
+        resetAutoplay();
+      } else {
+        emblaApi.current?.plugins().autoplay.stop();
+      }
+    },
+    [resetAutoplay],
+  );
+
   // Listeners contains callbacks for UI elements that may require state update based on embla changes
   const listeners = React.useRef(new Set<(data: CarouselUpdateData) => void>());
   const subscribeForValues = React.useCallback((listener: (data: CarouselUpdateData) => void) => {
@@ -144,6 +155,9 @@ export function useEmblaCarousel(
                 stopOnInteraction: !autoplayRef.current,
                 stopOnMouseEnter: true,
                 stopOnFocusIn: true,
+                rootNode: (emblaRoot: HTMLElement) => {
+                  return emblaRoot.querySelector(sliderClassname) ?? emblaRoot;
+                },
               }),
             ],
           );
@@ -207,6 +221,9 @@ export function useEmblaCarousel(
           stopOnInteraction: !autoplayRef.current,
           stopOnMouseEnter: true,
           stopOnFocusIn: true,
+          rootNode: (emblaRoot: HTMLElement) => {
+            return emblaRoot.querySelector(sliderClassname) ?? emblaRoot;
+          },
         }),
       ],
     );
@@ -218,5 +235,6 @@ export function useEmblaCarousel(
     containerRef,
     subscribeForValues,
     enableAutoplay,
+    resetAutoplay,
   };
 }