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

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