fix: 🐛 playback ends on lastFrame

This fix ends playback on lastFrame - 1.
dotlottie · Mar 21, 2024 · a175d6d · a175d6d
1 parent 2e3cfcb
commit a175d6d
Show file tree

Hide file tree

Showing 5 changed files with 5 additions and 5 deletions.
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 });