openvidu/openvidu-components-angular/projects/openvidu-angular/src/lib/components/video/video.component.ts

64 lines
1.9 KiB
TypeScript
Raw Normal View History

import { AfterViewInit, Component, ElementRef, Input, EventEmitter, Output, ViewChild } from '@angular/core';
import { StreamManager } from 'openvidu-browser';
import { VideoType } from '../../models/video-type.model';
@Component({
selector: 'ov-video',
template: `
<img *ngIf="!_streamManager?.stream?.videoActive && _streamManager?.stream?.typeOfVideo === 'CAMERA'" class="poster_img" alt="OpenVidu Logo" src="assets/images/poster.png" />
<video
#videoElement
[attr.id]="streamManager && _streamManager.stream ? 'video-' + _streamManager.stream.streamId : 'video-undefined'"
[muted]="mutedSound"
></video>
`,
styleUrls: ['./video.component.css']
})
export class VideoComponent implements AfterViewInit {
@Input() mutedSound: boolean;
@Output() toggleVideoSizeEvent = new EventEmitter<any>();
_streamManager: StreamManager;
_videoElement: ElementRef;
ngAfterViewInit() {
setTimeout(() => {
if (this._streamManager && this._videoElement) {
this._streamManager.addVideoElement(this._videoElement.nativeElement);
}
});
}
@ViewChild('videoElement')
set videoElement(element: ElementRef) {
this._videoElement = element;
}
@Input()
set streamManager(streamManager: StreamManager) {
setTimeout(() => {
this._streamManager = streamManager;
if (!!this._videoElement && this._streamManager) {
if (this._streamManager.stream.typeOfVideo === VideoType.SCREEN) {
this._videoElement.nativeElement.style.objectFit = 'contain';
this._videoElement.nativeElement.style.background = '#272727';
this.enableVideoSizeBig();
} else {
this._videoElement.nativeElement.style.objectFit = 'cover';
}
this._streamManager.addVideoElement(this._videoElement.nativeElement);
}
});
}
enableVideoSizeBig() {
// Doing video size bigger.
// Timeout because of connectionId is null and icon does not change
setTimeout(() => {
this.toggleVideoSizeEvent.emit(true);
}, 590);
}
}