import {AfterViewInit, Component, ElementRef, ViewChild} from '@angular/core';
import {MatDialogRef} from "@angular/material/dialog";
import {loadPlayer, Player} from "rtsp-relay/browser";

@Component({
  selector: 'app-camera-dialog',
  templateUrl: './camera-dialog.component.html',
  styleUrls: ['./camera-dialog.component.scss']
})
export class CameraDialogComponent implements AfterViewInit{

  player?: Player;
  @ViewChild('videoPlayer')
  videoPlayer?: ElementRef<HTMLCanvasElement>;


  constructor(public dialogRef: MatDialogRef<CameraDialogComponent>) { }

  async ngAfterViewInit() {
    const connect = async () => {
      this.player = await loadPlayer({
        url: 'ws://localhost:8080/stream',
        canvas: this.videoPlayer!.nativeElement,
        onDisconnect: () => {
          setTimeout(connect, 5000); // reconnect after 5 seconds
        },
      });
    };
    connect();
  }

  onClose(): void {
    this.dialogRef.close();
  }

}
