fix: 🐛 playback ends on lastFrame (#323)

* fix: 🐛 playback ends on lastFrame This fix ends playback on lastFrame - 1. * chore: 🤖 added changeset
dotlottie · Mar 21, 2024 · 75a9885 · 75a9885
1 parent 2e3cfcb
commit 75a9885
Show file tree

Hide file tree

Showing 6 changed files with 12 additions and 5 deletions.
diff --git a/.changeset/wet-eagles-pump.md b/.changeset/wet-eagles-pump.md
@@ -0,0 +1,7 @@
+---
+'@dotlottie/player-component': patch
+'@dotlottie/react-player': patch
+'@dotlottie/common': patch
+---
+
+fix: 🐛 playback ends on lastFrame
diff --git a/packages/common/src/dotlottie-player.ts b/packages/common/src/dotlottie-player.ts
@@ -1564,7 +1564,7 @@ export class DotLottieCommonPlayer {
     // If loop = number, and animation has reached the end, call stop to go to frame 0
     if (typeof this._loop === 'number') this.stop();
 
-    const lastFrame = this.direction === -1 ? 0 : this.totalFrames;
+    const lastFrame = this.direction === -1 ? 0 : this.totalFrames - 1;
 
     this.goToAndStop(lastFrame, true);
 

diff --git a/packages/player-component/cypress/component/interactivity/enable-interactivity.cy.ts b/packages/player-component/cypress/component/interactivity/enable-interactivity.cy.ts
@@ -53,7 +53,7 @@ describe('Interactivity: enter/exit interactivity', () => {
     cy.get('[name="currentState"]').should('have.value', PlayerState.Playing);
     cy.get('[name="loop"]').should('have.value', 'false');
     cy.get('[name="autoplay"]').should('have.value', 'false');
-    cy.get('[name="frame"]').should('have.value', 30);
+    cy.get('[name="frame"]').should('have.value', 29);
     cy.get('[name="speed"]').should('have.value', 1);
 
     // State: playReverse

diff --git a/packages/player-component/cypress/component/interactivity/state-toggle.cy.ts b/packages/player-component/cypress/component/interactivity/state-toggle.cy.ts
@@ -40,7 +40,7 @@ describe('Interactivity: state_toggle (onClick)', () => {
     cy.get('[name="currentState"]').should('have.value', PlayerState.Playing);
     cy.get('[name="loop"]').should('have.value', "false");
     cy.get('[name="autoplay"]').should('have.value', "false");
-    cy.get('[name="frame"]').should('have.value', 30);
+    cy.get('[name="frame"]').should('have.value', 29);
 
     // State: playReverse
     cy.get('[data-testid="testPlayer"]').shadow().find('.animation').click({force:true});

diff --git a/packages/react-player/cypress/component/interactivity/enable-interactivity.cy.tsx b/packages/react-player/cypress/component/interactivity/enable-interactivity.cy.tsx
@@ -78,7 +78,7 @@ describe('Interactivity: enter/exit interactivity', () => {
     cy.get('[name="currentState"]').should('have.value', PlayerState.Playing);
     cy.get('[name="loop"]').should('have.value', 'false');
     cy.get('[name="autoplay"]').should('have.value', 'false');
-    cy.get('[name="frame"]').should('have.value', 30);
+    cy.get('[name="frame"]').should('have.value', 29);
     cy.get('[name="speed"]').should('have.value', 1);
 
     // State: playReverse

diff --git a/packages/react-player/cypress/component/interactivity/state-toggle.cy.tsx b/packages/react-player/cypress/component/interactivity/state-toggle.cy.tsx
@@ -58,7 +58,7 @@ describe('Interactivity: state_toggle (onClick)', () => {
     cy.get('[name="currentState"]').should('have.value', PlayerState.Playing);
     cy.get('[name="loop"]').should('have.value', 'false');
     cy.get('[name="autoplay"]').should('have.value', 'false');
-    cy.get('[name="frame"]').should('have.value', 30);
+    cy.get('[name="frame"]').should('have.value', 29);
 
     // State: playReverse
     cy.get('.animation').click({ force: true });