1import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
2import { MatButtonModule } from '@angular/material/button';
3import { MatIconModule } from '@angular/material/icon';
4import { MatSnackBar } from '@angular/material/snack-bar';
5import { filter, finalize } from 'rxjs';
6import { MatTooltipModule, TooltipPosition } from '@angular/material/tooltip';
7import { MotionGolden } from '../golden';
8import { GoldensService } from '../goldens.service';
9import { RecordedMotion } from '../recorded-motion';
10import { ProgressTracker } from '../../utils/progress';
11import { VideoViewComponent } from '../video-view/video-view.component';
12import { TimelineViewComponent } from '../timeline-view/timeline-view.component';
13import { MatToolbarModule } from '@angular/material/toolbar';
14import { VideoControlsComponent } from '../video-controls/video-controls.component';
15import { MatCardModule } from '@angular/material/card';
16import { DragDropModule } from '@angular/cdk/drag-drop';
17
18@Component({
19  selector: 'app-motion-golden',
20  standalone: true,
21  imports: [
22    MatIconModule,
23    MatButtonModule,
24    MatToolbarModule,
25    VideoControlsComponent,
26    MatTooltipModule,
27    VideoViewComponent,
28    MatCardModule,
29    TimelineViewComponent,
30    DragDropModule,
31  ],
32  templateUrl: './motion-golden.component.html',
33  styleUrl: './motion-golden.component.scss',
34})
35export class MotionGoldenComponent implements OnChanges {
36  constructor(
37    private goldenService: GoldensService,
38    private snackBar: MatSnackBar,
39    private progressTracker: ProgressTracker,
40  ) {}
41
42  @Input() golden!: MotionGolden;
43  tooltipPosition: TooltipPosition = 'right';
44
45  recordedMotion: RecordedMotion | undefined;
46
47  private goldenChangeId = 0;
48  ngOnChanges(changes: SimpleChanges): void {
49    if (changes['golden']) {
50      this.goldenChangeId++;
51      if (this.golden) {
52        this.fetchRecordedMotion(this.golden, this.goldenChangeId);
53      } else {
54        this.recordedMotion = undefined;
55      }
56    }
57  }
58
59  fetchRecordedMotion(golden: MotionGolden, goldenChangeId: number): void {
60    this.progressTracker.beginProgress();
61    this.goldenService
62      .loadRecordedMotion(golden)
63      .pipe(
64        filter((_) => goldenChangeId === this.goldenChangeId),
65        finalize(() => this.progressTracker.endProgress()),
66      )
67      .subscribe((recordedMotion) => (this.recordedMotion = recordedMotion));
68  }
69
70  updateGolden(): void {
71    this.progressTracker.beginProgress();
72    this.goldenService
73      .updateGolden(this.golden)
74      .pipe(finalize(() => this.progressTracker.endProgress()))
75      .subscribe((_) => this.snackBar.open('updated'));
76  }
77}
78