ambiser
/
openvidu
mirror of https://github.com/OpenVidu/openvidu.git
8
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

openvidu-components: Added unique id to video elements

pull/816/head
Carlos Santos 2023-06-26 13:31:03 +02:00
parent 4ab66e30a1
commit 9e7443ae7f
2 changed files with 6 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
openvidu-components-angular/projects/openvidu-angular/src/lib/components/stream/stream.component.html
View File

@ -41,6 +41,7 @@
(dblclick)="toggleVideoEnlarged()"
[streamManager]="_stream.streamManager"
[mutedSound]="_stream?.participant?.isMutedForcibly"
[participantId]="_stream?.participant?.id"
></ov-video>
<div class="status-icons">

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

@ -7,18 +7,12 @@ import { VideoType } from '../../models/video-type.model';
*/
@Component({
selector: 'ov-video',
template: `
<video
class="OT_video-element"
#videoElement
[attr.id]="streamManager && _streamManager.stream ? 'video-' + _streamManager.stream.streamId : 'video-undefined'"
[muted]="mutedSound"
></video>
`,
template: ` <video class="OT_video-element" #videoElement [muted]="mutedSound"></video> `,
styleUrls: ['./video.component.css']
})
export class VideoComponent implements AfterViewInit {
@Input() mutedSound: boolean;
@Input() participantId: string;
_streamManager: StreamManager;
_videoElement: ElementRef;
type: VideoType = VideoType.CAMERA;
@ -32,7 +26,7 @@ export class VideoComponent implements AfterViewInit {
});
}
@ViewChild('videoElement', {static:false})
@ViewChild('videoElement', { static: false })
set videoElement(element: ElementRef) {
this._videoElement = element;
}
@ -49,15 +43,15 @@ export class VideoComponent implements AfterViewInit {
}
private updateVideoStyles() {
this.type = <VideoType>this._streamManager?.stream?.typeOfVideo;
if (this.type === VideoType.SCREEN) {
this._videoElement.nativeElement.style.objectFit = 'contain';
this._videoElement.nativeElement.classList.add('screen-type');
this._videoElement.nativeElement.id =`video-screen-${this.participantId}`;
} else {
this._videoElement.nativeElement.style.objectFit = 'cover';
this._videoElement.nativeElement.classList.add('camera-type');
this._videoElement.nativeElement.id = `video-camera-${this.participantId}`;
}
}
}