Merge pull request #812 from davidjerleke/bug/#790

[Bug]: Autoplay fast scroll when opened in a new tab
davidjerleke · Apr 3, 2024 · 625bbd7 · 625bbd7
2 parents e453e61 + 3587fc3
commit 625bbd7
Show file tree

Hide file tree

Showing 9 changed files with 33 additions and 40 deletions.
diff --git a/packages/embla-carousel-auto-scroll/src/components/AutoScroll.ts b/packages/embla-carousel-auto-scroll/src/components/AutoScroll.ts
@@ -93,15 +93,11 @@ function AutoScroll(userOptions: AutoScrollOptionsType = {}): AutoScrollType {
       }
     }
 
-    if (options.playOnInit) {
-      emblaApi.on('init', startScroll).on('reInit', startScroll)
-    }
+    if (options.playOnInit) startScroll()
   }
 
   function destroy(): void {
     emblaApi
-      .off('init', startScroll)
-      .off('reInit', startScroll)
       .off('pointerDown', stopScroll)
       .off('pointerUp', startScrollOnSettle)
       .off('settle', onSettle)

diff --git a/packages/embla-carousel-autoplay/src/components/Autoplay.ts b/packages/embla-carousel-autoplay/src/components/Autoplay.ts
@@ -35,7 +35,6 @@ function Autoplay(userOptions: AutoplayOptionsType = {}): AutoplayType {
   let playing = false
   let resume = true
   let jump = false
-  let animationFrame = 0
   let timer = 0
 
   function init(
@@ -89,20 +88,12 @@ function Autoplay(userOptions: AutoplayOptionsType = {}): AutoplayType {
 
     eventStore.add(ownerDocument, 'visibilitychange', visibilityChange)
 
-    if (options.playOnInit) {
-      emblaApi.on('init', startTimer).on('reInit', startTimer)
-    }
+    if (options.playOnInit && !documentIsHidden()) startTimer()
   }
 
   function destroy(): void {
-    emblaApi
-      .off('init', startTimer)
-      .off('reInit', startTimer)
-      .off('pointerDown', stopTimer)
-      .off('pointerUp', startTimer)
+    emblaApi.off('pointerDown', stopTimer).off('pointerUp', startTimer)
     stopTimer()
-    cancelAnimationFrame(animationFrame)
-    animationFrame = 0
     destroyed = true
     playing = false
   }
@@ -127,16 +118,19 @@ function Autoplay(userOptions: AutoplayOptionsType = {}): AutoplayType {
   }
 
   function visibilityChange(): void {
-    const { ownerDocument } = emblaApi.internalEngine()
-
-    if (ownerDocument.visibilityState === 'hidden') {
+    if (documentIsHidden()) {
       resume = playing
       return stopTimer()
     }
 
     if (resume) startTimer()
   }
 
+  function documentIsHidden(): boolean {
+    const { ownerDocument } = emblaApi.internalEngine()
+    return ownerDocument.visibilityState === 'hidden'
+  }
+
   function play(jumpOverride?: boolean): void {
     if (typeof jumpOverride !== 'undefined') jump = jumpOverride
     resume = true
@@ -156,20 +150,18 @@ function Autoplay(userOptions: AutoplayOptionsType = {}): AutoplayType {
   }
 
   function next(): void {
-    animationFrame = requestAnimationFrame(() => {
-      const { index } = emblaApi.internalEngine()
-      const nextIndex = index.clone().add(1).get()
-      const lastIndex = emblaApi.scrollSnapList().length - 1
-      const kill = options.stopOnLastSnap && nextIndex === lastIndex
-
-      if (kill) stopTimer()
-
-      if (emblaApi.canScrollNext()) {
-        emblaApi.scrollNext(jump)
-      } else {
-        emblaApi.scrollTo(0, jump)
-      }
-    })
+    const { index } = emblaApi.internalEngine()
+    const nextIndex = index.clone().add(1).get()
+    const lastIndex = emblaApi.scrollSnapList().length - 1
+    const kill = options.stopOnLastSnap && nextIndex === lastIndex
+
+    if (kill) stopTimer()
+
+    if (emblaApi.canScrollNext()) {
+      emblaApi.scrollNext(jump)
+    } else {
+      emblaApi.scrollTo(0, jump)
+    }
   }
 
   const self: AutoplayType = {

diff --git a/...-carousel-docs/src/components/Sandbox/React/SandboxFilesDist/AutoScroll/EmblaCarousel.jsx b/...-carousel-docs/src/components/Sandbox/React/SandboxFilesDist/AutoScroll/EmblaCarousel.jsx
@@ -55,7 +55,7 @@ const EmblaCarousel = (props) => {
     emblaApi
       .on('autoScroll:play', () => setIsPlaying(true))
       .on('autoScroll:stop', () => setIsPlaying(false))
-      .on('reInit', () => setIsPlaying(false))
+      .on('reInit', () => setIsPlaying(autoScroll.isPlaying()))
   }, [emblaApi])
 
   return (

diff --git a/...-carousel-docs/src/components/Sandbox/React/SandboxFilesDist/AutoScroll/EmblaCarousel.tsx b/...-carousel-docs/src/components/Sandbox/React/SandboxFilesDist/AutoScroll/EmblaCarousel.tsx
@@ -61,7 +61,7 @@ const EmblaCarousel: React.FC<PropType> = (props) => {
     emblaApi
       .on('autoScroll:play', () => setIsPlaying(true))
       .on('autoScroll:stop', () => setIsPlaying(false))
-      .on('reInit', () => setIsPlaying(false))
+      .on('reInit', () => setIsPlaying(autoScroll.isPlaying()))
   }, [emblaApi])
 
   return (

diff --git a/...la-carousel-docs/src/components/Sandbox/React/SandboxFilesDist/Autoplay/EmblaCarousel.jsx b/...la-carousel-docs/src/components/Sandbox/React/SandboxFilesDist/Autoplay/EmblaCarousel.jsx
@@ -53,7 +53,7 @@ const EmblaCarousel = (props) => {
     emblaApi
       .on('autoplay:play', () => setIsPlaying(true))
       .on('autoplay:stop', () => setIsPlaying(false))
-      .on('reInit', () => setIsPlaying(false))
+      .on('reInit', () => setIsPlaying(autoplay.isPlaying()))
   }, [emblaApi])
 
   return (

diff --git a/...la-carousel-docs/src/components/Sandbox/React/SandboxFilesDist/Autoplay/EmblaCarousel.tsx b/...la-carousel-docs/src/components/Sandbox/React/SandboxFilesDist/Autoplay/EmblaCarousel.tsx
@@ -59,7 +59,7 @@ const EmblaCarousel: React.FC<PropType> = (props) => {
     emblaApi
       .on('autoplay:play', () => setIsPlaying(true))
       .on('autoplay:stop', () => setIsPlaying(false))
-      .on('reInit', () => setIsPlaying(false))
+      .on('reInit', () => setIsPlaying(autoplay.isPlaying()))
   }, [emblaApi])
 
   return (

diff --git a/...a-carousel-docs/src/components/Sandbox/React/SandboxFilesSrc/AutoScroll/EmblaCarousel.tsx b/...a-carousel-docs/src/components/Sandbox/React/SandboxFilesSrc/AutoScroll/EmblaCarousel.tsx
@@ -61,7 +61,7 @@ const EmblaCarousel: React.FC<PropType> = (props) => {
     emblaApi
       .on('autoScroll:play', () => setIsPlaying(true))
       .on('autoScroll:stop', () => setIsPlaying(false))
-      .on('reInit', () => setIsPlaying(false))
+      .on('reInit', () => setIsPlaying(autoScroll.isPlaying()))
   }, [emblaApi])
 
   return (

diff --git a/...bla-carousel-docs/src/components/Sandbox/React/SandboxFilesSrc/Autoplay/EmblaCarousel.tsx b/...bla-carousel-docs/src/components/Sandbox/React/SandboxFilesSrc/Autoplay/EmblaCarousel.tsx
@@ -59,7 +59,7 @@ const EmblaCarousel: React.FC<PropType> = (props) => {
     emblaApi
       .on('autoplay:play', () => setIsPlaying(true))
       .on('autoplay:stop', () => setIsPlaying(false))
-      .on('reInit', () => setIsPlaying(false))
+      .on('reInit', () => setIsPlaying(autoplay.isPlaying()))
   }, [emblaApi])
 
   return (

diff --git a/...components/Sandbox/Vanilla/SandboxFilesDist/InfiniteScroll/EmblaCarouselInfiniteScroll.js b/...components/Sandbox/Vanilla/SandboxFilesDist/InfiniteScroll/EmblaCarouselInfiniteScroll.js
@@ -47,7 +47,12 @@ export const setupInfiniteScroll = (emblaApi, loadMoreCallback) => {
 
     emblaApi.reInit()
     const newEngine = emblaApi.internalEngine()
-    const copyEngineModules = ['scrollBody', 'location', 'target']
+    const copyEngineModules = [
+      'scrollBody',
+      'location',
+      'offsetLocation',
+      'target'
+    ]
     copyEngineModules.forEach((engineModule) =>
       Object.assign(newEngine[engineModule], oldEngine[engineModule])
     )