fix(platform-browser): update started state on reset (#41608)

This commit fixes the state of variable _started on call of reset method.

Earlier behaviour was on call of `reset()` method we are not setting back
`_started` flag's value to false and it created various issue for end user
which were expecting this behaviour as per name of method.

We provided end user `reset()` method, but it was empty method and on call
of it wasn't doing anything. As end user/developer were not able to
reuse animation not animation after call of reset method.

In this PR on call of `reset()` method we are setting flag `_started` value to false
which can be accessed by `hasStarted()`.

Resolves #18140

PR Close #41608

goldens/public-api/animations/browser/testing/testing.d.ts

@@ -31,4 +31,5 @@ export declare class MockAnimationPlayer extends NoopAnimationPlayer {
     finish(): void;
     hasStarted(): boolean;
     play(): void;
+    reset(): void;
 }

packages/animations/browser/src/render/css_keyframes/css_keyframes_player.ts

@@ -15,6 +15,7 @@ const DEFAULT_FILL_MODE = 'forwards';
 const DEFAULT_EASING = 'linear';
 
 export const enum AnimatorControlState {
+  RESET = 0,
   INITIALIZED = 1,
   STARTED = 2,
   FINISHED = 3,
@@ -26,7 +27,6 @@ export class CssKeyframesPlayer implements AnimationPlayer {
   private _onStartFns: Function[] = [];
   private _onDestroyFns: Function[] = [];
 
-  private _started = false;
   // TODO(issue/24571): remove '!'.
   private _styler!: ElementAnimationStyleHandler;
 
@@ -139,6 +139,7 @@ export class CssKeyframesPlayer implements AnimationPlayer {
     this.play();
   }
   reset(): void {
+    this._state = AnimatorControlState.RESET;
     this._styler.destroy();
     this._buildStyler();
     this._styler.apply();

packages/animations/browser/testing/src/mock_animation_driver.ts

@@ -83,6 +83,11 @@ export class MockAnimationPlayer extends NoopAnimationPlayer {
     this._onInitFns = [];
   }
 
+  reset() {
+    super.reset();
+    this.__started = false;
+  }
+
   finish(): void {
     super.finish();
     this.__finished = true;

packages/animations/src/players/animation_player.ts

@@ -184,7 +184,9 @@ export class NoopAnimationPlayer implements AnimationPlayer {
       this._onDestroyFns = [];
     }
   }
-  reset(): void {}
+  reset(): void {
+    this._started = false;
+  }
   setPosition(position: number): void {
     this._position = this.totalTime ? position * this.totalTime : 1;
   }

packages/platform-browser/animations/src/animation_builder.ts

@@ -104,6 +104,7 @@ export class RendererAnimationPlayer implements AnimationPlayer {
 
   reset(): void {
     this._command('reset');
+    this._started = false;
   }
 
   setPosition(p: number): void {

packages/platform-browser/animations/test/browser_animation_builder_spec.ts

@@ -104,5 +104,43 @@ import {el} from '../../testing/src/browser_util';
          expect(finished).toBeTruthy();
          expect(destroyed).toBeTruthy();
        }));
+
+    it('should update `hasStarted()` on `play()` and `reset()`', fakeAsync(() => {
+         @Component({
+           selector: 'ani-another-cmp',
+           template: '...',
+         })
+         class CmpAnother {
+           @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: [CmpAnother]});
+
+         const fixture = TestBed.createComponent(CmpAnother);
+         const cmp = fixture.componentInstance;
+         fixture.detectChanges();
+
+         const player = cmp.build();
+
+         expect(player.hasStarted()).toBeFalsy();
+         flushMicrotasks();
+
+         player.play();
+         flushMicrotasks();
+         expect(player.hasStarted()).toBeTruthy();
+
+         player.reset();
+         flushMicrotasks();
+         expect(player.hasStarted()).toBeFalsy();
+       }));
   });
 }