fix(animations): reset the start and done fns on player reset (#46364)

dario-piotrowicz · AndrewKushnir · commit 3dd7bb3f8fa0 · 2022-06-21T12:40:24.000-07:00
in the animation players, make sure than upon reset the _onStartFns and _onDoneFns are also re-applied so that they can be called again after resetting the animation also set the noop animation player's _finished to false when the player resets (needed to make sure that the _onDoneFns get called) resolves #26630 PR Close #46364
diff --git a/goldens/size-tracking/aio-payloads.json b/goldens/size-tracking/aio-payloads.json
@@ -12,7 +12,7 @@
   "aio-local": {
     "uncompressed": {
       "runtime": 4325,
-      "main": 456412,
+      "main": 456957,
       "polyfills": 33922,
       "styles": 72829,
       "light-theme": 78276,
diff --git a/packages/animations/browser/src/render/web_animations/web_animations_player.ts b/packages/animations/browser/src/render/web_animations/web_animations_player.ts
@@ -24,6 +24,12 @@ export class WebAnimationsPlayer implements AnimationPlayer {
   private _destroyed = false;
   private _finalKeyframe?: ɵStyleDataMap;
 
+  // the following original fns are persistent copies of the _onStartFns and _onDoneFns
+  // and are used to reset the fns to their original values upon reset()
+  // (since the _onStartFns and _onDoneFns get deleted after they are called)
+  private _originalOnDoneFns: Function[] = [];
+  private _originalOnStartFns: Function[] = [];
+
   // TODO(issue/24571): remove '!'.
   public readonly domPlayer!: DOMAnimation;
   public time = 0;
@@ -89,10 +95,12 @@ export class WebAnimationsPlayer implements AnimationPlayer {
   }
 
   onStart(fn: () => void): void {
+    this._originalOnStartFns.push(fn);
     this._onStartFns.push(fn);
   }
 
   onDone(fn: () => void): void {
+    this._originalOnDoneFns.push(fn);
     this._onDoneFns.push(fn);
   }
 
@@ -132,6 +140,8 @@ export class WebAnimationsPlayer implements AnimationPlayer {
     this._destroyed = false;
     this._finished = false;
     this._started = false;
+    this._onStartFns = this._originalOnStartFns;
+    this._onDoneFns = this._originalOnDoneFns;
   }
 
   private _resetDomPlayerState() {
diff --git a/packages/animations/src/players/animation_player.ts b/packages/animations/src/players/animation_player.ts
@@ -123,6 +123,8 @@ export class NoopAnimationPlayer implements AnimationPlayer {
   private _onDoneFns: Function[] = [];
   private _onStartFns: Function[] = [];
   private _onDestroyFns: Function[] = [];
+  private _originalOnDoneFns: Function[] = [];
+  private _originalOnStartFns: Function[] = [];
   private _started = false;
   private _destroyed = false;
   private _finished = false;
@@ -140,9 +142,11 @@ export class NoopAnimationPlayer implements AnimationPlayer {
     }
   }
   onStart(fn: () => void): void {
+    this._originalOnStartFns.push(fn);
     this._onStartFns.push(fn);
   }
   onDone(fn: () => void): void {
+    this._originalOnDoneFns.push(fn);
     this._onDoneFns.push(fn);
   }
   onDestroy(fn: () => void): void {
@@ -188,6 +192,9 @@ export class NoopAnimationPlayer implements AnimationPlayer {
   }
   reset(): void {
     this._started = false;
+    this._finished = false;
+    this._onStartFns = this._originalOnStartFns;
+    this._onDoneFns = this._originalOnDoneFns;
   }
   setPosition(position: number): void {
     this._position = this.totalTime ? position * this.totalTime : 1;
diff --git a/packages/platform-browser/animations/test/browser_animation_builder_spec.ts b/packages/platform-browser/animations/test/browser_animation_builder_spec.ts
@@ -45,6 +45,75 @@ import {NoopAnimationsModule, ɵBrowserAnimationBuilder as BrowserAnimationBuild
       expect(cmp.builder instanceof BrowserAnimationBuilder).toBeTruthy();
     });
 
+    it('should listen on start and done on the animation builder\'s player after it has been reset',
+       fakeAsync(() => {
+         @Component({
+           selector: 'ani-cmp',
+           template: '...',
+         })
+         class Cmp {
+           @ViewChild('target') public target: any;
+
+           constructor(public builder: AnimationBuilder) {}
+
+           build() {
+             const definition =
+                 this.builder.build([style({opacity: 0}), animate(1000, style({opacity: 1}))]);
+
+             return definition.create(this.target);
+           }
+         }
+
+         TestBed.configureTestingModule({declarations: [Cmp]});
+
+         const fixture = TestBed.createComponent(Cmp);
+         const cmp = fixture.componentInstance;
+         fixture.detectChanges();
+
+         const player = cmp.build();
+
+         let startedCount = 0;
+         player.onStart(() => startedCount++);
+
+         let finishedCount = 0;
+         player.onDone(() => finishedCount++);
+
+         player.init();
+         flushMicrotasks();
+         expect(startedCount).toEqual(0);
+         expect(finishedCount).toEqual(0);
+
+         player.play();
+         flushMicrotasks();
+         expect(startedCount).toEqual(1);
+         expect(finishedCount).toEqual(0);
+
+         player.finish();
+         flushMicrotasks();
+         expect(startedCount).toEqual(1);
+         expect(finishedCount).toEqual(1);
+
+         player.play();
+         player.finish();
+         flushMicrotasks();
+         expect(startedCount).toEqual(1);
+         expect(finishedCount).toEqual(1);
+
+         [0, 1, 2, 3].forEach(i => {
+           player.reset();
+
+           player.play();
+           flushMicrotasks();
+           expect(startedCount).toEqual(i + 2);
+           expect(finishedCount).toEqual(i + 1);
+
+           player.finish();
+           flushMicrotasks();
+           expect(startedCount).toEqual(i + 2);
+           expect(finishedCount).toEqual(i + 2);
+         });
+       }));
+
     it('should listen on start and done on the animation builder\'s player', fakeAsync(() => {
          @Component({
            selector: 'ani-cmp',

Original file line number	Diff line number	Diff line change
`@@ -123,6 +123,8 @@ export class NoopAnimationPlayer implements AnimationPlayer {`
`123`	`123`	`private _onDoneFns: Function[] = [];`
`124`	`124`	`private _onStartFns: Function[] = [];`
`125`	`125`	`private _onDestroyFns: Function[] = [];`
	`126`	`+ private _originalOnDoneFns: Function[] = [];`
	`127`	`+ private _originalOnStartFns: Function[] = [];`
`126`	`128`	`private _started = false;`
`127`	`129`	`private _destroyed = false;`
`128`	`130`	`private _finished = false;`
`@@ -140,9 +142,11 @@ export class NoopAnimationPlayer implements AnimationPlayer {`
`140`	`142`	`}`
`141`	`143`	`}`
`142`	`144`	`onStart(fn: () => void): void {`
	`145`	`+ this._originalOnStartFns.push(fn);`
`143`	`146`	`this._onStartFns.push(fn);`
`144`	`147`	`}`
`145`	`148`	`onDone(fn: () => void): void {`
	`149`	`+ this._originalOnDoneFns.push(fn);`
`146`	`150`	`this._onDoneFns.push(fn);`
`147`	`151`	`}`
`148`	`152`	`onDestroy(fn: () => void): void {`
`@@ -188,6 +192,9 @@ export class NoopAnimationPlayer implements AnimationPlayer {`
`188`	`192`	`}`
`189`	`193`	`reset(): void {`
`190`	`194`	`this._started = false;`
	`195`	`+ this._finished = false;`
	`196`	`+ this._onStartFns = this._originalOnStartFns;`
	`197`	`+ this._onDoneFns = this._originalOnDoneFns;`
`191`	`198`	`}`
`192`	`199`	`setPosition(position: number): void {`
`193`	`200`	`this._position = this.totalTime ? position * this.totalTime : 1;`