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()" (dblclick)="toggleVideoEnlarged()"
[streamManager]="_stream.streamManager" [streamManager]="_stream.streamManager"
[mutedSound]="_stream?.participant?.isMutedForcibly" [mutedSound]="_stream?.participant?.isMutedForcibly"
[participantId]="_stream?.participant?.id"
></ov-video> ></ov-video>
<div class="status-icons"> <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({ @Component({
selector: 'ov-video', selector: 'ov-video',
template: ` template: ` <video class="OT_video-element" #videoElement [muted]="mutedSound"></video> `,
<video
class="OT_video-element"
#videoElement
[attr.id]="streamManager && _streamManager.stream ? 'video-' + _streamManager.stream.streamId : 'video-undefined'"
[muted]="mutedSound"
></video>
`,
styleUrls: ['./video.component.css'] styleUrls: ['./video.component.css']
}) })
export class VideoComponent implements AfterViewInit { export class VideoComponent implements AfterViewInit {
@Input() mutedSound: boolean; @Input() mutedSound: boolean;
@Input() participantId: string;
_streamManager: StreamManager; _streamManager: StreamManager;
_videoElement: ElementRef; _videoElement: ElementRef;
type: VideoType = VideoType.CAMERA; type: VideoType = VideoType.CAMERA;
@ -49,15 +43,15 @@ export class VideoComponent implements AfterViewInit {
} }
private updateVideoStyles() { private updateVideoStyles() {
this.type = <VideoType>this._streamManager?.stream?.typeOfVideo; this.type = <VideoType>this._streamManager?.stream?.typeOfVideo;
if (this.type === VideoType.SCREEN) { if (this.type === VideoType.SCREEN) {
this._videoElement.nativeElement.style.objectFit = 'contain'; this._videoElement.nativeElement.style.objectFit = 'contain';
this._videoElement.nativeElement.classList.add('screen-type'); this._videoElement.nativeElement.classList.add('screen-type');
this._videoElement.nativeElement.id =`video-screen-${this.participantId}`;
} else { } else {
this._videoElement.nativeElement.style.objectFit = 'cover'; this._videoElement.nativeElement.style.objectFit = 'cover';
this._videoElement.nativeElement.classList.add('camera-type'); this._videoElement.nativeElement.classList.add('camera-type');
} this._videoElement.nativeElement.id = `video-camera-${this.participantId}`;
}
} }
} }