From ab7fe80f152b2968e0f7a7b03e3ab06d2a449e1e Mon Sep 17 00:00:00 2001 From: Afsal Date: Thu, 18 Jan 2024 16:48:04 +0800 Subject: [PATCH 1/3] =?UTF-8?q?fix:=20=F0=9F=90=9B=20intial=20loopComple?= =?UTF-8?q?=20not=20fired?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Intial loopComplete not fired when loop == true and direction is -1 --- packages/common/src/dotlottie-player.ts | 18 +++----- .../cypress/component/player.cy.tsx | 44 ++++++++++++++++++- 2 files changed, 50 insertions(+), 12 deletions(-) diff --git a/packages/common/src/dotlottie-player.ts b/packages/common/src/dotlottie-player.ts index cfa5c4e2..3ea2eaf0 100644 --- 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/react-player/cypress/component/player.cy.tsx b/packages/react-player/cypress/component/player.cy.tsx index c0981b36..499b8bbe 100644 --- 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(); + const [initialLoopComplete, setIntialLoopComplete] = useState(false); + + return ( + <> + { + lottieRef.current = ref; + const lottie = ref.getAnimationInstance(); + ref.addEventListener('loopComplete', () => { + // Start of second loop + if (lottie.playCount === -2) { + setIntialLoopComplete(true); + } + }) + }} + > + + + + + + + ); + } + + cy.mount(); + + 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( From afffa7a75f07afa040e2aa67fb916d757df79914 Mon Sep 17 00:00:00 2001 From: Afsal Date: Thu, 18 Jan 2024 16:49:14 +0800 Subject: [PATCH 2/3] =?UTF-8?q?chore:=20=F0=9F=A4=96=20added=20changeset?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .changeset/breezy-fireants-tap.md | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 .changeset/breezy-fireants-tap.md diff --git a/.changeset/breezy-fireants-tap.md b/.changeset/breezy-fireants-tap.md new file mode 100644 index 00000000..63cc5945 --- /dev/null +++ b/.changeset/breezy-fireants-tap.md @@ -0,0 +1,7 @@ +--- +'@dotlottie/react-player': patch +'@dotlottie/common': patch +'@dotlottie/player-component': patch +--- + +fix: loopComplete event does not fire after first cycle if direction is -1 From 76a8336d6d95af1eb2a40f449e1d7624862f3ad1 Mon Sep 17 00:00:00 2001 From: Afsal Date: Thu, 18 Jan 2024 16:52:11 +0800 Subject: [PATCH 3/3] =?UTF-8?q?fix:=20=F0=9F=90=9B=20format?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/common/src/dotlottie-player.ts | 4 ++-- packages/react-player/cypress/component/player.cy.tsx | 8 ++++---- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/common/src/dotlottie-player.ts b/packages/common/src/dotlottie-player.ts index 3ea2eaf0..f6ce31b4 100644 --- a/packages/common/src/dotlottie-player.ts +++ b/packages/common/src/dotlottie-player.ts @@ -1841,8 +1841,8 @@ export class DotLottieCommonPlayer { })); if (autoplay && !hover) { - if (loop === false && direction === -1) { - // Trigger manual play since. Autoplay doesn't work in this scenario. + 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 { diff --git a/packages/react-player/cypress/component/player.cy.tsx b/packages/react-player/cypress/component/player.cy.tsx index 499b8bbe..e9fccfb1 100644 --- a/packages/react-player/cypress/component/player.cy.tsx +++ b/packages/react-player/cypress/component/player.cy.tsx @@ -90,7 +90,7 @@ describe('Player', () => { cy.get('[name="currentState"]').should('have.value', PlayerState.Playing); }); -it('should fire initial `loopComplete` when direction is `-1`', () => { + it('should fire initial `loopComplete` when direction is `-1`', () => { function Wrapper(): JSX.Element { const lottieRef = useRef(); const [initialLoopComplete, setIntialLoopComplete] = useState(false); @@ -100,16 +100,16 @@ it('should fire initial `loopComplete` when direction is `-1`', () => { { lottieRef.current = ref; - const lottie = ref.getAnimationInstance(); + const lottie = ref.getAnimationInstance(); ref.addEventListener('loopComplete', () => { // Start of second loop if (lottie.playCount === -2) { setIntialLoopComplete(true); } - }) + }); }} > - +