next-ucap-messenger/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/video-viewer.component.ts

import {
  Component,
  OnInit,
  Input,
  Output,
  EventEmitter,
  ViewChild,
  ElementRef,
  ChangeDetectorRef
} from '@angular/core';
import { MatSlider, MatSliderChange } from '@angular/material/slider';
import { NGXLogger } from 'ngx-logger';
import { FileEventJson } from '@ucap-webmessenger/protocol-event';
import { FileDownloadItem } from '@ucap-webmessenger/api';

import { ucapAnimations } from '../../animations';

@Component({
  selector: 'ucap-video-viewer',
  templateUrl: './video-viewer.component.html',
  styleUrls: ['./video-viewer.component.scss'],
  animations: ucapAnimations
})
export class VideoViewerComponent implements OnInit {
  @Input()
  fileInfo: FileEventJson;

  @Input()
  fileDownloadUrl: string;

  @Output()
  download = new EventEmitter<FileDownloadItem>();

  @Output()
  closed = new EventEmitter<void>();

  @ViewChild('audioPlayer', { static: false })
  audioPlayer: ElementRef<HTMLVideoElement>;

  @ViewChild('timeSlider', { static: true })
  timeSlider: MatSlider;

  playing = false;
  duration = 0.0;
  currentTime = 0.0;
  volume = 0.1;
  loading = false;
  fileDownloadItem: FileDownloadItem;

  videoWidth = 0;
  videoHeight = 0;

  playable = true;

  Math = Math;

  constructor(
    private changeDetectorRef: ChangeDetectorRef,
    private logger: NGXLogger
  ) {}

  ngOnInit() {}

  onClickPlayOrPause(): void {
    if (this.loading) {
      return;
    }
    if (this.audioPlayer.nativeElement.paused) {
      this.audioPlayer.nativeElement.play();
    } else {
      this.currentTime = this.audioPlayer.nativeElement.currentTime;
      this.audioPlayer.nativeElement.pause();
    }
  }

  onChangeTimeSlider(e: MatSliderChange): void {
    this.audioPlayer.nativeElement.currentTime = e.value;
  }

  onPlayingVideo(): void {
    this.playing = true;
    // this.duration = Math.floor(this.audioPlayer.nativeElement.duration);
  }

  onPauseVideo(): void {
    this.playing = false;
  }

  onTimeUpdateVideo(): void {
    this.currentTime = this.audioPlayer.nativeElement.currentTime;
  }

  onVolumeChangeVideo(): void {
    this.volume = this.audioPlayer.nativeElement.volume;
  }

  onLoadStartVideo(): void {
    this.loading = true;
  }

  onLoadedDataVideo(): void {
    this.loading = false;
    this.duration = this.audioPlayer.nativeElement.duration;

    this.videoWidth = this.audioPlayer.nativeElement.videoWidth;
    this.videoHeight = this.audioPlayer.nativeElement.videoHeight;

    if (0 === this.videoHeight || 0 === this.videoWidth) {
      this.playable = false;
      this.duration = 0;
    }
  }

  onClickDownload(): void {
    this.fileDownloadItem = new FileDownloadItem();
    this.download.emit(this.fileDownloadItem);
  }

  onClickClose(): void {
    this.closed.emit();
  }
}