components/animation-settings/animation-settings.component.ts

0001 import {
0002   Component,
0003   ViewChild,
0004   TemplateRef,
0005   ElementRef,
0006   ChangeDetectionStrategy
0007 } from '@angular/core';
0008 import {MatInputModule} from '@angular/material/input';
0009 import {EventDisplayService} from '../../services/event-display.service';
0010 import {FormsModule} from '@angular/forms';
0011 import {MatIconButton} from '@angular/material/button';
0012 import {MatIcon} from '@angular/material/icon';
0013 import {MatTooltip} from '@angular/material/tooltip';
0014 import {MatDialog, MatDialogClose, MatDialogRef} from '@angular/material/dialog';
0015 import {MatSlideToggle} from '@angular/material/slide-toggle';
0016
0017 @Component({
0018   selector: 'app-animation-settings',
0019   standalone: true,
0020   imports: [MatInputModule, FormsModule, MatIcon, MatIconButton, MatTooltip, MatDialogClose, MatSlideToggle],
0021   templateUrl: './animation-settings.component.html',
0022   changeDetection: ChangeDetectionStrategy.OnPush,
0023   styleUrls: ['./animation-settings.component.scss']
0024 })
0025 export class AnimationSettingsComponent {
0026
0027   @ViewChild('openBtn', {read: ElementRef})
0028   openBtn!: ElementRef;
0029
0030   @ViewChild('dialogTemplate')
0031   dialogTemplate!: TemplateRef<any>;
0032
0033   dialogRef: MatDialogRef<any> | null = null;
0034
0035   moveCameraDuringAnimation: boolean;
0036   autoPlayAnimation: boolean;
0037
0038   constructor(
0039     public eventDisplayService: EventDisplayService,
0040     private dialog: MatDialog
0041   ) {
0042     this.moveCameraDuringAnimation = this.eventDisplayService.animateCameraMovement;
0043     this.autoPlayAnimation = this.eventDisplayService.animationIsCycling();
0044   }
0045
0046   openDialog(): void {
0047     if (this.dialogRef) {
0048       this.dialogRef.close();
0049       return;
0050     }
0051
0052     // Sync local state from service when opening
0053     this.moveCameraDuringAnimation = this.eventDisplayService.animateCameraMovement;
0054     this.autoPlayAnimation = this.eventDisplayService.animationIsCycling();
0055
0056     const rect = this.openBtn.nativeElement.getBoundingClientRect();
0057     const dialogWidth = 320;
0058     const left = rect.right - dialogWidth;
0059
0060     this.dialogRef = this.dialog.open(this.dialogTemplate, {
0061       position: {
0062         bottom: `${window.innerHeight - rect.bottom + 55}px`,
0063         left: `${Math.max(left, 0)}px`
0064       },
0065       hasBackdrop: false,
0066       panelClass: 'custom-position-dialog',
0067       autoFocus: false
0068     });
0069
0070     this.dialogRef.afterClosed().subscribe(() => {
0071       this.dialogRef = null;
0072     });
0073   }
0074
0075   applySettings(): void {
0076     this.eventDisplayService.animateCameraMovement = this.moveCameraDuringAnimation;
0077     if (this.autoPlayAnimation) {
0078       this.eventDisplayService.startAnimationCycling();
0079     } else {
0080       this.eventDisplayService.stopAnimationCycling();
0081     }
0082     this.dialogRef?.close();
0083   }
0084 }