123 lines
2.7 KiB
TypeScript
Raw Normal View History

2019-11-07 15:46:02 +09:00
import {
Component,
OnInit,
Input,
Output,
EventEmitter,
ViewChild,
2020-01-30 16:00:26 +09:00
ElementRef,
ChangeDetectorRef
2019-11-07 15:46:02 +09:00
} from '@angular/core';
2020-02-18 10:54:35 +09:00
import { MatSlider, MatSliderChange } from '@angular/material/slider';
import { NGXLogger } from 'ngx-logger';
import { FileEventJson } from '@ucap-webmessenger/protocol-event';
2019-12-03 18:59:11 +09:00
import { FileDownloadItem } from '@ucap-webmessenger/api';
2020-02-18 10:54:35 +09:00
import { ucapAnimations } from '../../animations';
2019-11-06 13:48:06 +09:00
@Component({
selector: 'ucap-video-viewer',
templateUrl: './video-viewer.component.html',
styleUrls: ['./video-viewer.component.scss'],
2019-12-03 18:59:11 +09:00
animations: ucapAnimations
2019-11-06 13:48:06 +09:00
})
export class VideoViewerComponent implements OnInit {
@Input()
fileInfo: FileEventJson;
@Input()
2019-11-07 13:48:25 +09:00
fileDownloadUrl: string;
2019-11-06 18:19:37 +09:00
@Output()
2019-11-13 15:28:33 +09:00
download = new EventEmitter<FileDownloadItem>();
2019-11-06 18:19:37 +09:00
2019-11-06 13:48:06 +09:00
@Output()
closed = new EventEmitter<void>();
2020-02-05 17:06:00 +09:00
@ViewChild('audioPlayer', { static: false })
2019-11-07 15:46:02 +09:00
audioPlayer: ElementRef<HTMLVideoElement>;
@ViewChild('timeSlider', { static: true })
timeSlider: MatSlider;
playing = false;
2020-01-30 16:00:26 +09:00
duration = 0.0;
currentTime = 0.0;
2019-11-07 15:46:02 +09:00
volume = 0.1;
loading = false;
2019-11-13 15:28:33 +09:00
fileDownloadItem: FileDownloadItem;
2019-11-07 15:46:02 +09:00
2020-01-30 16:00:26 +09:00
videoWidth = 0;
videoHeight = 0;
2020-02-05 17:06:00 +09:00
playable = true;
2020-01-30 16:00:26 +09:00
Math = Math;
constructor(
private changeDetectorRef: ChangeDetectorRef,
private logger: NGXLogger
) {}
2019-11-06 18:19:37 +09:00
2019-11-06 13:48:06 +09:00
ngOnInit() {}
2019-11-06 18:19:37 +09:00
2019-11-07 15:46:02 +09:00
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 {
2020-01-30 16:00:26 +09:00
this.currentTime = this.audioPlayer.nativeElement.currentTime;
2019-11-07 15:46:02 +09:00
}
onVolumeChangeVideo(): void {
2020-01-30 16:00:26 +09:00
this.volume = this.audioPlayer.nativeElement.volume;
2019-11-07 15:46:02 +09:00
}
onLoadStartVideo(): void {
this.loading = true;
}
onLoadedDataVideo(): void {
this.loading = false;
2020-01-30 16:00:26 +09:00
this.duration = this.audioPlayer.nativeElement.duration;
this.videoWidth = this.audioPlayer.nativeElement.videoWidth;
this.videoHeight = this.audioPlayer.nativeElement.videoHeight;
2020-02-05 17:06:00 +09:00
if (0 === this.videoHeight || 0 === this.videoWidth) {
this.playable = false;
this.duration = 0;
}
2019-11-07 15:46:02 +09:00
}
onClickDownload(): void {
2019-11-13 15:28:33 +09:00
this.fileDownloadItem = new FileDownloadItem();
this.download.emit(this.fileDownloadItem);
2019-11-07 15:46:02 +09:00
}
2019-11-06 18:19:37 +09:00
onClickClose(): void {
this.closed.emit();
}
2019-11-06 13:48:06 +09:00
}