Merge branch 'master' into chore/upgrade-dependencies

dotlottie · Jan 19, 2024 · 28ce68c · 28ce68c
2 parents 5aca9f4 + 3731d4f
commit 28ce68c
Show file tree

Hide file tree

Showing 8 changed files with 75 additions and 15 deletions.
diff --git a/packages/common/CHANGELOG.md b/packages/common/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @dotlottie/common
 
+## 0.7.8
+
+### Patch Changes
+
+- 7f40780: fix: loopComplete event does not fire after first cycle if direction is -1
+
 ## 0.7.7
 
 ### Patch Changes

diff --git a/packages/common/package.json b/packages/common/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@dotlottie/common",
-  "version": "0.7.7",
+  "version": "0.7.8",
   "type": "module",
   "description": "",
   "author": "Afsal <[email protected]>, Sam Osborne <[email protected]>",

diff --git a/packages/common/src/dotlottie-player.ts b/packages/common/src/dotlottie-player.ts
@@ -1596,16 +1596,6 @@ export class DotLottieCommonPlayer {
         if (this.direction === -1) {
           this._container?.dispatchEvent(new Event(PlayerEvents.Complete));
           if (!this.loop) this.setCurrentState(PlayerState.Completed);
-
-          // Fix: First loopComplete is not fired by lottie-web when direction is -1
-          if (this.currentState === PlayerState.Playing && this._loop && this._lottie.playCount === 0) {
-            this._lottie.triggerEvent('loopComplete', {
-              currentLoop: this._lottie.playCount,
-              direction: this.direction,
-              totalLoops: typeof this.loop === 'number' ? this.loop : Infinity,
-              type: 'loopComplete',
-            });
-          }
         }
       }
 
@@ -1851,7 +1841,13 @@ export class DotLottieCommonPlayer {
     }));
 
     if (autoplay && !hover) {
-      this.play();
+      if (loop === false && direction === -1) {
+        // Trigger manual play since. Autoplay doesn't work in this scenario.
+        // See logic within play() function: `if (this._lottie.playDirection === -1 && this._lottie.currentFrame === 0) `
+        this.play();
+      } else {
+        this.setCurrentState(PlayerState.Playing);
+      }
     }
 
     this._updateTestData();

diff --git a/packages/player-component/CHANGELOG.md b/packages/player-component/CHANGELOG.md
@@ -1,5 +1,13 @@
 # @dotlottie/player-component
 
+## 2.7.7
+
+### Patch Changes
+
+- 7f40780: fix: loopComplete event does not fire after first cycle if direction is -1
+- Updated dependencies [7f40780]
+  - @dotlottie/common@0.7.8
+
 ## 2.7.6
 
 ### Patch Changes

diff --git a/packages/player-component/package.json b/packages/player-component/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@dotlottie/player-component",
-  "version": "2.7.6",
+  "version": "2.7.7",
   "description": "dotLottie animation player web component.",
   "repository": "https://github.com/dotlottie/player-component.git",
   "homepage": "https://dotlottie.com/players",

diff --git a/packages/react-player/CHANGELOG.md b/packages/react-player/CHANGELOG.md
@@ -1,5 +1,13 @@
 # @dotlottie/react-player
 
+## 1.6.14
+
+### Patch Changes
+
+- 7f40780: fix: loopComplete event does not fire after first cycle if direction is -1
+- Updated dependencies [7f40780]
+  - @dotlottie/common@0.7.8
+
 ## 1.6.13
 
 ### Patch Changes

diff --git a/packages/react-player/cypress/component/player.cy.tsx b/packages/react-player/cypress/component/player.cy.tsx
@@ -3,7 +3,7 @@
  */
 
 import { PlayerState } from '@dotlottie/common';
-import React, { useRef } from 'react';
+import React, { useRef, useState } from 'react';
 import { DotLottieRefProps } from '../../dist';
 
 import { Controls } from '../../src/controls';
@@ -90,6 +90,48 @@ describe('Player', () => {
     cy.get('[name="currentState"]').should('have.value', PlayerState.Playing);
   });
 
+  it('should fire initial `loopComplete` when direction is `-1`', () => {
+    function Wrapper(): JSX.Element {
+      const lottieRef = useRef<DotLottieRefProps>();
+      const [initialLoopComplete, setIntialLoopComplete] = useState(false);
+
+      return (
+        <>
+          <PlayerStateWrapper
+            onRef={(ref: DotLottieRefProps): void => {
+              lottieRef.current = ref;
+              const lottie = ref.getAnimationInstance();
+              ref.addEventListener('loopComplete', () => {
+                // Start of second loop
+                if (lottie.playCount === -2) {
+                  setIntialLoopComplete(true);
+                }
+              });
+            }}
+          >
+            <input data-testid="initialLoopComplete" value={String(initialLoopComplete)} />
+            <DotLottiePlayer
+              testId="testPlayer"
+              src={`/bounce_wifi.lottie`}
+              style={{ height: '400px', display: 'inline-block' }}
+              loop
+              autoplay
+              speed={10}
+              direction={-1}
+            >
+              <Controls />
+            </DotLottiePlayer>
+          </PlayerStateWrapper>
+        </>
+      );
+    }
+
+    cy.mount(<Wrapper />);
+
+    cy.get('[name="currentState"]').should('have.value', PlayerState.Playing);
+    cy.get('[data-testid="initialLoopComplete"]').should('have.value', 'true');
+  });
+
   it('should be able to load valid .lottie urls with additional query params', () => {
     cy.mount(
       <PlayerStateWrapper>

diff --git a/packages/react-player/package.json b/packages/react-player/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@dotlottie/react-player",
-  "version": "1.6.13",
+  "version": "1.6.14",
   "type": "module",
   "description": "dotlottie animation player react component.",
   "repository": "https://github.com/dotlottie/player-component.git",