UI: Fixed bug trip animation widget after change speed or change time to the time slider

@@ -24,7 +24,7 @@
             <mat-icon class="material-icons" [ngStyle]="{'color': settings.buttonColor}">skip_previous</mat-icon>
             <mat-icon class="material-icons" [ngStyle]="{'color': settings.buttonColor}">skip_previous</mat-icon>
         </button>
         </button>
         <div fxLayout="column" fxFlex="100">
         <div fxLayout="column" fxFlex="100">
-            <mat-slider [(ngModel)]="index" [min]="minTimeIndex" [max]="maxTimeIndex" (change)="changeIndex()">
+            <mat-slider [(ngModel)]="index" [min]="minTimeIndex" [max]="maxTimeIndex" (input)="changeIndex($event.value)">
             </mat-slider>
             </mat-slider>
             <div class="panel-timer">
             <div class="panel-timer">
                 <span *ngIf="this.currentTime">{{ this.currentTime | date:'medium'}}</span>
                 <span *ngIf="this.currentTime">{{ this.currentTime | date:'medium'}}</span>
@@ -47,8 +47,8 @@
                 pause_circle_outline
                 pause_circle_outline
             </mat-icon>
             </mat-icon>
         </button>
         </button>
-        <mat-select [(ngModel)]="speed" (selectionChange)="reeneble()" class="speed-select" aria-label="Speed selector">
+        <mat-select [(ngModel)]="speed" (selectionChange)="reInit()" class="speed-select" aria-label="Speed selector">
             <mat-option [value]="speedValue" *ngFor="let speedValue of speeds">{{speedValue}} </mat-option>
             <mat-option [value]="speedValue" *ngFor="let speedValue of speeds">{{speedValue}} </mat-option>
         </mat-select>
         </mat-select>
     </div>
     </div>
-</div>
+</div>

@@ -14,7 +14,7 @@
 /// limitations under the License.
 /// limitations under the License.
 ///
 ///
 
 
-import { ChangeDetectorRef, Component, EventEmitter, Input, OnChanges, OnInit, Output } from '@angular/core';
+import { ChangeDetectorRef, Component, EventEmitter, Input, OnChanges, Output } from '@angular/core';
 import { interval } from 'rxjs';
 import { interval } from 'rxjs';
 import { filter } from 'rxjs/operators';
 import { filter } from 'rxjs/operators';
 import { HistorySelectSettings } from '@app/modules/home/components/widget/lib/maps/map-models';
 import { HistorySelectSettings } from '@app/modules/home/components/widget/lib/maps/map-models';
@@ -24,9 +24,9 @@ import { HistorySelectSettings } from '@app/modules/home/components/widget/lib/m
   templateUrl: './history-selector.component.html',
   templateUrl: './history-selector.component.html',
   styleUrls: ['./history-selector.component.scss']
   styleUrls: ['./history-selector.component.scss']
 })
 })
-export class HistorySelectorComponent implements OnInit, OnChanges {
+export class HistorySelectorComponent implements OnChanges {
 
 
-  @Input() settings: HistorySelectSettings
+  @Input() settings: HistorySelectSettings;
   @Input() minTime: number;
   @Input() minTime: number;
   @Input() maxTime: number;
   @Input() maxTime: number;
   @Input() step = 1000;
   @Input() step = 1000;
@@ -47,9 +47,6 @@ export class HistorySelectorComponent implements OnInit, OnChanges {
 
 
   constructor(private cd: ChangeDetectorRef) { }
   constructor(private cd: ChangeDetectorRef) { }
 
 
-  ngOnInit(): void {
-  }
-
   ngOnChanges() {
   ngOnChanges() {
     this.maxTimeIndex =  Math.ceil((this.maxTime - this.minTime) / this.step);
     this.maxTimeIndex =  Math.ceil((this.maxTime - this.minTime) / this.step);
     this.currentTime = this.minTime === Infinity ? null : this.minTime;
     this.currentTime = this.minTime === Infinity ? null : this.minTime;
@@ -57,34 +54,34 @@ export class HistorySelectorComponent implements OnInit, OnChanges {
 
 
   play() {
   play() {
     this.playing = true;
     this.playing = true;
-    if (!this.interval)
+    if (!this.interval) {
       this.interval = interval(1000 / this.speed)
       this.interval = interval(1000 / this.speed)
         .pipe(
         .pipe(
-          filter(() => this.playing)).subscribe(() => {
-            this.index++;
-            this.currentTime = this.minTime + this.index * this.step;
-            if (this.index <= this.maxTimeIndex) {
-              this.cd.detectChanges();
-              this.timeUpdated.emit(this.currentTime);
-            }
-            else {
-              this.interval.complete();
-            }
-          }, err => {
-            console.error(err);
-          }, () => {
-            this.currentTime = this.index = this.minTimeIndex;
+          filter(() => this.playing)
+        ).subscribe(() => {
+          this.index++;
+          this.currentTime = this.minTime + this.index * this.step;
+          if (this.index <= this.maxTimeIndex) {
+            this.cd.detectChanges();
+            this.timeUpdated.emit(this.currentTime);
+          } else {
             this.playing = false;
             this.playing = false;
-            this.interval = null;
+            this.interval.complete();
             this.cd.detectChanges();
             this.cd.detectChanges();
-          });
+          }
+        }, err => {
+          console.error(err);
+        }, () => {
+          this.interval = null;
+        });
+    }
   }
   }
 
 
-  reeneble() {
-    if (this.playing) {
-      const position = this.index;
+  reInit() {
+    if (this.interval) {
       this.interval.complete();
       this.interval.complete();
-      this.index = position;
+    }
+    if (this.playing) {
       this.play();
       this.play();
     }
     }
   }
   }
@@ -138,8 +135,9 @@ export class HistorySelectorComponent implements OnInit, OnChanges {
     this.pause();
     this.pause();
   }
   }
 
 
-  changeIndex() {
-    this.currentTime = this.minTime + this.index * this.step;
+  changeIndex(index: number) {
+    this.index = index;
+    this.currentTime = this.minTime + index * this.step;
     this.timeUpdated.emit(this.currentTime);
     this.timeUpdated.emit(this.currentTime);
   }
   }
 }
 }