+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| src | +
+
+ |
+ 0% | +0/0 | +0% | +0/0 | +0% | +0/0 | +0% | +0/0 | +
| src/lib | +
+
+ |
+ 84.09% | +37/44 | +45.45% | +30/66 | +77.77% | +7/9 | +85.18% | +23/27 | +
| src/lib/components/chat | +
+
+ |
+ 65.11% | +28/43 | +38.88% | +14/36 | +56.25% | +9/16 | +62.16% | +23/37 | +
| src/lib/components/footer | +
+
+ |
+ 88% | +22/25 | +42.3% | +11/26 | +87.5% | +7/8 | +89.47% | +17/19 | +
| src/lib/components/layout | +
+
+ |
+ 91.66% | +44/48 | +44.11% | +15/34 | +84.61% | +11/13 | +92.85% | +39/42 | +
| src/lib/components/material | +
+
+ |
+ 66.66% | +12/18 | +45.45% | +10/22 | +25% | +1/4 | +66.66% | +8/12 | +
| src/lib/components/participant | +
+
+ |
+ 42.25% | +30/71 | +22.8% | +13/57 | +35% | +7/20 | +38.46% | +25/65 | +
| src/lib/components/room | +
+
+ |
+ 30.71% | +43/140 | +20% | +19/95 | +25% | +9/36 | +29.45% | +38/129 | +
| src/lib/components/toolbar | +
+
+ |
+ 38.78% | +64/165 | +25.8% | +24/93 | +41.46% | +17/41 | +37.25% | +57/153 | +
| src/lib/components/user-settings | +
+
+ |
+ 42.7% | +79/185 | +24.39% | +40/164 | +44.44% | +20/45 | +41.04% | +71/173 | +
| src/lib/components/video | +
+
+ |
+ 55.17% | +16/29 | +37.5% | +12/32 | +55.55% | +5/9 | +50% | +12/24 | +
| src/lib/config | +
+
+ |
+ 40.74% | +11/27 | +31.25% | +10/32 | +20% | +1/5 | +31.81% | +7/22 | +
| src/lib/matchers | +
+
+ |
+ 0% | +0/2 | +0% | +0/7 | +0% | +0/1 | +0% | +0/2 | +
| src/lib/models | +
+
+ |
+ 17.56% | +39/222 | +18.32% | +35/191 | +26.53% | +13/49 | +18.13% | +39/215 | +
| src/lib/pipes | +
+
+ |
+ 81.25% | +26/32 | +43.47% | +20/46 | +42.85% | +3/7 | +85.71% | +18/21 | +
| src/lib/services/action | +
+
+ |
+ 65.11% | +28/43 | +40% | +20/50 | +42.85% | +6/14 | +58.06% | +18/31 | +
| src/lib/services/cdk-overlay | +
+
+ |
+ 90% | +27/30 | +45.45% | +20/44 | +87.5% | +7/8 | +94.44% | +17/18 | +
| src/lib/services/chat | +
+
+ |
+ 68.25% | +43/63 | +40% | +20/50 | +40% | +6/15 | +64.7% | +33/51 | +
| src/lib/services/device | +
+
+ |
+ 79.61% | +125/157 | +71.77% | +89/124 | +79.72% | +59/74 | +83.33% | +105/126 | +
| src/lib/services/document | +
+
+ |
+ 48.38% | +30/62 | +28.57% | +24/84 | +38.88% | +7/18 | +40% | +20/50 | +
| src/lib/services/layout | +
+
+ |
+ 74.54% | +41/55 | +42.3% | +22/52 | +50% | +11/22 | +72.09% | +31/43 | +
| src/lib/services/library-config | +
+
+ |
+ 85.71% | +30/35 | +43.33% | +26/60 | +70% | +7/10 | +86.95% | +20/23 | +
| src/lib/services/local-user | +
+
+ |
+ 47.11% | +49/104 | +21.27% | +20/94 | +16.66% | +9/54 | +42.39% | +39/92 | +
| src/lib/services/logger | +
+
+ |
+ 68.18% | +30/44 | +43.47% | +20/46 | +56.25% | +9/16 | +62.5% | +20/32 | +
| src/lib/services/platform | +
+
+ |
+ 62.79% | +27/43 | +29.85% | +20/67 | +38.88% | +7/18 | +54.83% | +17/31 | +
| src/lib/services/remote-user | +
+
+ |
+ 38.77% | +38/98 | +19.6% | +20/102 | +19.44% | +7/36 | +34.14% | +28/82 | +
| src/lib/services/storage | +
+
+ |
+ 92.68% | +38/41 | +51.92% | +27/52 | +91.66% | +11/12 | +96.55% | +28/29 | +
| src/lib/services/token | +
+
+ |
+ 79.48% | +31/39 | +45.45% | +20/44 | +42.85% | +6/14 | +77.77% | +21/27 | +
| src/lib/services/webrtc | +
+
+ |
+ 27.14% | +60/221 | +13.36% | +27/202 | +9.8% | +10/102 | +25.12% | +50/199 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| public-api.ts | +
+
+ |
+ 0% | +0/0 | +0% | +0/0 | +0% | +0/0 | +0% | +0/0 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 | 1x +1x +1x +1x +1x + + + + + +1x + +1x +1x + + + + + + + +1x +1x + + +1x +1x + +1x +1x + + + + + + + + + + + + + + + + + + + + + + + + +1x +1x +1x + + + + + +1x +1x +1x + + + + + + + + +1x + + +1x + + + + +1x + + + + + + + | import { Component, ElementRef, HostListener, Input, OnInit, ViewChild } from '@angular/core';
+import { Subscription } from 'rxjs';
+impoIrt { ChatMessage } from '../../models/chat.model';
+import { ChatService } from '../../services/chat/chat.service';
+
+@Component({
+ selector: 'ov-chat',
+ templateUrl: './chat.component.html',
+ styleUrls: ['./chat.component.css']
+})
+export class ChatComponent implements OnInit {
+ @ViewChild('chatScroll') chatScroll: ElementRef;
+ @ViewChild('chatInput') chatInput: ElementRef;
+ message: string;
+ messageList: ChatMessage[] = [];
+ isChatOpened: boolean;
+
+ private chatMessageSubscription: Subscription;
+ private chatToggleSubscription: Subscription;
+
+ constructor(private chatService: ChatService) {}
+
+ @HostListener('document:keydown.escape', ['$event'])
+ onKeydownHandler(event: KeyboardEvent) {
+ if (this.isChatOpened) {
+ this.close();
+ }
+ }
+
+ ngOnInit() {
+ this.subscribeToMessages();
+ this.subscribeToToggleChat();
+ }
+
+ ngOnDestroy(): void {
+ if (this.chatMessageSubscription) {
+ this.chatMessageSubscription.unsubscribe();
+ }
+ if (this.chatToggleSubscription) {
+ this.chatToggleSubscription.unsubscribe();
+ }
+ }
+
+ eventKeyPress(event) {
+ // Pressed 'Enter' key
+ if (event && event.keyCode === 13) {
+ this.sendMessage();
+ }
+ }
+
+ sendMessage(): void {
+ this.chatService.sendMessage(this.message);
+ this.message = '';
+ }
+
+ scrollToBottom(): void {
+ setTimeoutI(() => {
+ try {
+ this.chatScroll.nativeElement.scrollTop = this.chatScroll.nativeElement.scrollHeight;
+ } catch (err) {}
+ }, 20);
+ }
+
+ close() {
+ this.chatSIervice.toggleChat();
+ }
+
+ private subscribeToMessages() {
+ this.chatMessageSubscription = this.chatService.messagesObs.subscribe((messages: ChatMessage[]) => {
+ this.messageList = messages;
+ if (this.isChatOpened) {
+ this.scrollToBottom();
+ }
+ });
+ }
+
+ private subscribeToToggleChat() {
+ this.chatToggleSubscription = this.chatService.toggleChatObs.subscribe((opened) => {
+ this.isChatOpened = opened;
+ if (this.isChatOpened) {
+ this.scrollToBottom();
+ setTimeout(() => {
+ this.chatInput.nativeElement.focus();
+ });
+ }
+ });
+ }
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| chat.component.ts | +
+
+ |
+ 65.11% | +28/43 | +38.88% | +14/36 | +56.25% | +9/16 | +62.16% | +23/37 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 | 1x +1x +1x +1x +1x + + + + + + +1x + +1x +1x + + +1x + + +1x +1x + + +1x +1x +1x + + + + +1x + + + +1x + | import { Component, OnDestroy, OnInit } from '@angular/core';
+import { Subscription } from 'rxjs';
+impoIrt { RemoteUserService } from '../../../public-api';
+import { UserName } from '../../models/username.model';
+import { VideoType } from '../../models/video-type.model';
+
+@Component({
+ selector: 'ov-footer',
+ templateUrl: './footer.component.html',
+ styleUrls: ['./footer.component.css']
+})
+export class FooterComponent implements OnInit, OnDestroy {
+ participantsNames: string[] = [];
+ private remoteUserNameSubscription: Subscription;
+
+ constructor(private remoteUserService: RemoteUserService) {}
+ ngOnInit(): void {
+ this.subscribeToUsersName();
+ }
+ ngOnDestroy(): void {
+ if (this.remoteUserNameSubscription) this.remoteUserNameSubscription.unsubscribe();
+ }
+
+ private subscribeToUsersName() {
+ this.remoteUserNameSubscription = this.remoteUserService.remoteUserNameList.subscribe((userNameList: UserName[]) => {
+ this.participantsNames = [];
+
+ userNameList.forEach((names) => {
+ if (!names.nickname.includes(VideoType.SCREEN)) {
+ this.participantsNames.push(names.nickname);
+ }
+ });
+ this.participantsNames = [...this.participantsNames];
+ });
+ }
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| footer.component.ts | +
+
+ |
+ 88% | +22/25 | +42.3% | +11/26 | +87.5% | +7/8 | +89.47% | +17/19 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| layout.component.ts | +
+
+ |
+ 91.66% | +44/48 | +44.11% | +15/34 | +84.61% | +11/13 | +92.85% | +39/42 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 | 1x +1x +1x +1x +1x + + + + + + + + + + +1x + +1x +1x +1x +1x +1x +1x +1x +1x + + + + + +1x +1x +1x +1x + + +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x + + +1x + + + + + +1x +1x + + + +1x +1x + +1x +1x + + + +1x + + + + + +1x + + + +1x + + | import { Component, HostListener, OnDestroy, OnInit, ViewChild } from '@angular/core';
+import { MatSidenav } from '@angular/material/sidenav';
+impoIrt { skip, Subscription } from 'rxjs';
+import { SidenavMode } from '../../models/layout.model';
+import { UserModel } from '../../models/user.model';
+import { ChatService } from '../../services/chat/chat.service';
+import { LayoutService } from '../../services/layout/layout.service';
+import { LocalUserService } from '../../services/local-user/local-user.service';
+import { RemoteUserService } from '../../services/remote-user/remote-user.service';
+
+@Component({
+ selector: 'ov-layout',
+ templateUrl: './layout.component.html',
+ styleUrls: ['./layout.component.css']
+})
+export class LayoutComponent implements OnInit, OnDestroy {
+ @ViewChild('sidenav') chatSidenav: MatSidenav;
+ localUsers: UserModel[] = [];
+ remoteUsers: UserModel[] = [];
+ sidenavMode: SidenavMode = SidenavMode.SIDE;
+
+ private readonly SIDENAV_WIDTH_LIMIT_MODE = 790;
+ private chatSubscription: Subscription;
+ private layoutWidthSubscription: Subscription;
+ private localUsersSubscription: Subscription;
+ private remoteUsersSubscription: Subscription;
+
+ @HostListener('window:resize')
+ sizeChange() {
+ this.layoutService.update();
+ }
+
+ constructor(
+ private remoteUserService: RemoteUserService,
+ private localUserService: LocalUserService,
+ private layoutService: LayoutService,
+ private chatService: ChatService
+ ) {}
+
+ ngOnInit(): void {
+ this.layoutService.initialize();
+ this.subscribeToUsers();
+ this.subscribeToChatComponent();
+ this.subscribeToLayoutWidth();
+
+ }
+
+ ngOnDestroy() {
+ this.layoutService.clear();
+ this.localUsers = [];
+ this.remoteUsers = [];
+ if (this.chatSubscription) this.chatSubscription.unsubscribe();
+ if (this.layoutWidthSubscription) this.layoutWidthSubscription.unsubscribe();
+ if (this.localUsersSubscription) this.localUsersSubscription.unsubscribe();
+ if (this.remoteUsersSubscription) this.remoteUsersSubscription.unsubscribe();
+ }
+
+ private subscribeToChatComponent() {
+ this.chatSubscription = this.chatService.toggleChatObs.pipe(skip(1)).subscribe((opened) => {
+ opened ? this.chatSidenav.open() : this.chatSidenav.close();
+ this.layoutService.update(300);
+ });
+ }
+
+ private subscribeToLayoutWidth() {
+ this.layoutWidthSubscription = this.layoutService.layoutWidthObs.subscribe((width) => {
+ this.sidenavMode = width <= this.SIDENAV_WIDTH_LIMIT_MODE ? SidenavMode.OVER : SidenavMode.SIDE;
+ });
+ }
+
+ private subscribeToUsers() {
+ this.localUsersSubscription = this.localUserService.OVUsers.subscribe((users) => {
+ this.localUsers = users;
+ });
+
+ this.remoteUsersSubscription = this.remoteUserService.remoteUsers.subscribe((users) => {
+ this.remoteUsers = users;
+ });
+ }
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 | 1x +1x +1x +1x +1x + + + +1x + + + + + + + + + +1x + + + +1x + + + + + + | import { Component, Inject } from '@angular/core';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+I
+export interface DialogData {
+ title: string;
+ description: string;
+ showActionButtons: boolean;
+}
+
+@Component({
+ selector: 'ov-dialog-template',
+ template: `
+ <h1 mat-dialog-title>{{data.title}}</h1>
+ <div mat-dialog-content>{{data.description}}</div>
+ <div mat-dialog-actions *ngIf="data.showActionButtons">
+ <button mat-button (click)="close()">Close</button>
+ </div>
+ `
+})
+export class DialogTemplateComponent {
+ constructor(public dialogRef: MatDialogRef<DialogTemplateComponent>, @Inject(MAT_DIALOG_DATA) public data: DialogData) {
+ console.log(data)
+ }
+
+ close() {
+ this.dialogRef.close();
+ }
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| dialog.component.ts | +
+
+ |
+ 66.66% | +12/18 | +45.45% | +10/22 | +25% | +1/4 | +66.66% | +8/12 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| participant.component.ts | +
+
+ |
+ 42.25% | +30/71 | +22.8% | +13/57 | +35% | +7/20 | +38.46% | +25/65 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 +143 +144 +145 +146 +147 +148 +149 +150 +151 +152 +153 +154 +155 +156 +157 +158 +159 +160 +161 +162 +163 +164 +165 +166 | 1x +1x +1x +1x +1x + + + + + + + + + + + + + + + + + + + +1x + +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x + + + + + + + + + + + + + + + + + + + + + + + + +1x +1x + + + +1x + + +1x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +1x + + + + + + + + +1x + + + + + + + + + +1x + + + + + + + + + + + + + + + + + | import { Component, ElementRef, HostListener, Input, OnInit, ViewChild, ViewContainerRef } from '@angular/core';
+import { FormControl, Validators } from '@angular/forms';
+impoIrt { MatMenuPanel, MatMenuTrigger } from '@angular/material/menu';
+import { NicknameMatcher } from '../../matchers/nickname.matcher';
+import { VideoFullscreenIcon, VideoSizeIcon } from '../../models/icon.model';
+import { UserModel } from '../../models/user.model';
+import { VideoType } from '../../models/video-type.model';
+import { Storage } from '../../models/storage.model';
+import { DocumentService } from '../../services/document/document.service';
+import { CdkOverlayService } from '../../services/cdk-overlay/cdk-overlay.service';
+import { WebrtcService } from '../../services/webrtc/webrtc.service';
+import { LayoutService } from '../../services/layout/layout.service';
+import { LocalUserService } from '../../services/local-user/local-user.service';
+import { RemoteUserService } from '../../services/remote-user/remote-user.service';
+import { StorageService } from '../../services/storage/storage.service';
+import { Signal } from '../../models/signal.model';
+import { LayoutClass } from '../../models/layout.model';
+
+@Component({
+ selector: 'ov-participant',
+ templateUrl: './participant.component.html',
+ styleUrls: ['./participant.component.css']
+})
+export class ParticipantComponent implements OnInit {
+ videoSizeIconEnum = VideoSizeIcon;
+ videoFullscreenIconEnum = VideoFullscreenIcon;
+ videoTypeEnum = VideoType;
+ videoSizeIcon: VideoSizeIcon = VideoSizeIcon.BIG;
+ fullscreenIcon: VideoFullscreenIcon = VideoFullscreenIcon.BIG;
+ mutedSound: boolean;
+ toggleNickname: boolean;
+ isFullscreen: boolean;
+
+ nicknameFormControl: FormControl;
+ matcher: NicknameMatcher;
+
+ _user: UserModel;
+
+ @ViewChild('streamComponent', { read: ViewContainerRef }) streamComponent: ViewContainerRef;
+ @ViewChild(MatMenuTrigger) public menuTrigger: MatMenuTrigger;
+ @ViewChild('menu') menu: MatMenuPanel;
+
+ constructor(
+ private documentService: DocumentService,
+ private openViduWebRTCService: WebrtcService,
+ private layoutService: LayoutService,
+ private localUserService: LocalUserService,
+ private remoteUserService: RemoteUserService,
+ private storageService: StorageService,
+ private cdkSrv: CdkOverlayService
+ ) {}
+
+ @HostListener('window:resize', ['$event'])
+ sizeChange(event) {
+ const maxHeight = window.screen.height;
+ const maxWidth = window.screen.width;
+ const curHeight = window.innerHeight;
+ const curWidth = window.innerWidth;
+ if (maxWidth !== curWidth && maxHeight !== curHeight) {
+ this.isFullscreen = false;
+ this.videoSizeIcon = VideoSizeIcon.BIG;
+ }
+ }
+
+ @HostListener('document:fullscreenchange', ['$event'])
+ @HostListener('document:webkitfullscreenchange', ['$event'])
+ @HostListener('document:mozfullscreenchange', ['$event'])
+ @HostListener('document:MSFullscreenChange', ['$event'])
+ onFullscreenHandler(event) {
+ this.toggleFullscreenIcon();
+ }
+
+ // Has been mandatory fullscreen Input because of Input user did not fire changing
+ // the fullscreen user property in publisherStartSpeaking event in VideoRoom Component
+ @Input()
+ set videoSizeBig(videoSizeBig: boolean) {
+ this.checkVideoSizeBigIcon(videoSizeBig);
+ }
+
+ @Input()
+ set user(user: UserModel) {
+ this._user = user;
+ this.nicknameFormControl = new FormControl(this._user.getNickname(), [Validators.maxLength(25), Validators.required]);
+ }
+
+ @ViewChild('nicknameInput')
+ set nicknameInputElement(element: ElementRef) {
+ setTimeout(() => {
+ element?.nativeElement.focus();
+ });
+ }
+
+ ngOnInit() {
+ this.matcher = new NicknameMatcher();
+ }
+
+ ngOnDestroy() {
+ this.cdkSrv.setSelector('body');
+ }
+
+ toggleVideoSize(resetAll?) {
+ const element = this.documentService.getHTMLElementByClassName(this.streamComponent.element.nativeElement, LayoutClass.ROOT_ELEMENT);
+ if (!!resetAll) {
+ this.documentService.removeAllBigElementClass();
+ this.remoteUserService.resetUsersZoom();
+ this.localUserService.resetUsersZoom();
+ }
+
+ this.documentService.toggleBigElementClass(element);
+
+ if (!!this._user.getConnectionId()) {
+ if (this.openViduWebRTCService.isMyOwnConnection(this._user.getConnectionId())) {
+ this.localUserService.toggleZoom(this._user.getConnectionId());
+ } else {
+ this.remoteUserService.toggleUserZoom(this._user.getConnectionId());
+ }
+ }
+ this.layoutService.update();
+ }
+
+ toggleFullscreen() {
+ this.documentService.toggleFullscreen('container-' + this._user.getStreamManager().stream.streamId);
+ }
+
+ toggleVideoMenu(event) {
+ if (this.menuTrigger.menuOpen) {
+ this.menuTrigger.closeMenu();
+ return;
+ }
+ this.cdkSrv.setSelector('#container-' + this._user.streamManager?.stream?.streamId);
+ this.menuTrigger.openMenu();
+ }
+
+ toggleSound() {
+ this.mutedSound = !this.mutedSound;
+ }
+
+ toggleNicknameForm() {
+ if (this._user.isLocal()) {
+ this.toggleNickname = !this.toggleNickname;
+ }
+ }
+
+ eventKeyPress(event) {
+ if (event && event.keyCode === 13 && this.nicknameFormControl.valid) {
+ const nickname = this.nicknameFormControl.value;
+ this.localUserService.updateUsersNickname(nickname);
+ this.storageService.set(Storage.USER_NICKNAME, nickname);
+ this.openViduWebRTCService.sendSignal(Signal.NICKNAME_CHANGED, undefined, {clientData: nickname});
+ this.toggleNicknameForm();
+ }
+ }
+
+ replaceScreenTrack() {
+ this.openViduWebRTCService.replaceScreenTrack();
+ }
+
+ private checkVideoSizeBigIcon(videoSizeBig: boolean) {
+ this.videoSizeIcon = videoSizeBig ? VideoSizeIcon.NORMAL : VideoSizeIcon.BIG;
+ }
+
+ private toggleFullscreenIcon() {
+ this.fullscreenIcon = this.fullscreenIcon === VideoFullscreenIcon.BIG ? VideoFullscreenIcon.NORMAL : VideoFullscreenIcon.BIG;
+ }
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| room.component.ts | +
+
+ |
+ 30.71% | +43/140 | +20% | +19/95 | +25% | +9/36 | +29.45% | +38/129 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 +143 +144 +145 +146 +147 +148 +149 +150 +151 +152 +153 +154 +155 +156 +157 +158 +159 +160 +161 +162 +163 +164 +165 +166 +167 +168 +169 +170 +171 +172 +173 +174 +175 +176 +177 +178 +179 +180 +181 +182 +183 +184 +185 +186 +187 +188 +189 +190 +191 +192 +193 +194 +195 +196 +197 +198 +199 +200 +201 +202 +203 +204 +205 +206 +207 +208 +209 +210 +211 +212 +213 +214 +215 +216 +217 +218 +219 +220 +221 +222 +223 +224 +225 +226 +227 +228 +229 +230 +231 +232 | 1x +1x +1x +1x +1x + +1x + +1x + + + +1x + + + + + + + + + + + + + + + + +1x + +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x + + + + + +1x +1x +1x +1x + + + + + + + + + + + + + + + + + + + + + +1x +1x +1x +1x +1x +1x +1x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +1x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +1x + + + + + + + + + + +1x + + | import { Component, EventEmitter, HostListener, Input, OnInit, Output } from '@angular/core';
+import { Subscription } from 'rxjs';
+impoIrt { Subscriber, Session, StreamEvent, StreamPropertyChangedEvent, SessionDisconnectedEvent, ConnectionEvent } from 'openvidu-browser';
+
+import { VideoType } from '../../models/video-type.model';
+import { ILogger } from '../../models/logger.model';
+import { UserName } from '../../models/username.model';
+
+import { RemoteUserService } from '../../services/remote-user/remote-user.service';
+import { ChatService } from '../../services/chat/chat.service';
+import { LocalUserService } from '../../services/local-user/local-user.service';
+import { LoggerService } from '../../services/logger/logger.service';
+import { WebrtcService } from '../../services/webrtc/webrtc.service';
+import { TokenService } from '../../services/token/token.service';
+import { PlatformService } from '../../services/platform/platform.service';
+import { LayoutService } from '../../services/layout/layout.service';
+import { ActionService } from '../../services/action/action.service';
+import { Signal } from '../../models/signal.model';
+
+@Component({
+ selector: 'ov-room',
+ templateUrl: './room.component.html',
+ styleUrls: ['./room.component.css']
+})
+export class RoomComponent implements OnInit {
+ @Input() tokens: { webcam: string; screen: string };
+ @Output() _session = new EventEmitter<any>();
+ @Output() _publisher = new EventEmitter<any>();
+ @Output() _error = new EventEmitter<any>();
+
+ session: Session;
+ sessionScreen: Session;
+ participantsNameList: UserName[] = [];
+ private log: ILogger;
+ private remoteUserNameSubscription: Subscription;
+
+ constructor(
+ private actionService: ActionService,
+ private remoteUserService: RemoteUserService,
+ private openViduWebRTCService: WebrtcService,
+ private localUserService: LocalUserService,
+ private loggerSrv: LoggerService,
+ private chatService: ChatService,
+ private oVLayout: LayoutService,
+ private tokenService: TokenService,
+ private platformService: PlatformService
+ ) {
+ this.log = this.loggerSrv.get('RoomComponent');
+ }
+
+ @HostListener('window:beforeunload')
+ beforeunloadHandler() {
+ this.leaveSession();
+ }
+
+ async ngOnInit() {
+ this.session = this.openViduWebRTCService.getWebcamSession();
+ this.sessionScreen = this.openViduWebRTCService.getScreenSession();
+ this.subscribeToConnectionCreatedAndDestroyed();
+ this.subscribeToStreamCreated();
+ this.subscribeToStreamDestroyed();
+ this.subscribeToStreamPropertyChange();
+ this.subscribeToNicknameChanged();
+ this.chatService.subscribeToChat();
+ this.subscribeToReconnection();
+
+ this.tokenService.setWebcamToken(this.tokens.webcam);
+ this.tokenService.setScreenToken(this.tokens.screen);
+
+ await this.connectToSession();
+ // Workaround, firefox does not have audio when publisher join with muted camera
+ if (this.platformService.isFirefox() && !this.localUserService.hasWebcamVideoActive()) {
+ this.openViduWebRTCService.publishWebcamVideo(true);
+ this.openViduWebRTCService.publishWebcamVideo(false);
+ }
+
+ this._session.emit(this.session);
+ }
+
+ ngOnDestroy() {
+ // Reconnecting session is received in Firefox
+ // To Iavoid 'Connection lost' message uses session.off()
+ this.session?.off('reconnecting');
+ this.remoteUserService.clear();
+ this.oVLayout.clear();
+ this.localUserService.clear();
+ this.session = null;
+ this.sessionScreen = null;
+ if (this.remoteUserNameSubscription) this.remoteUserNameSubscription.unsubscribe();
+ }
+
+ leaveSession() {
+ this.log.d('Leaving session...');
+ this.openViduWebRTCService.disconnect();
+ }
+
+ //TODO Refactor connection methods move them to a service
+ private async connectToSession(): Promise<void> {
+ if (this.localUserService.areBothConnected()) {
+ await this.connectWebcamSession();
+ await this.connectScreenSession();
+ await this.openViduWebRTCService.publishWebcamPublisher();
+ await this.openViduWebRTCService.publishScreenPublisher();
+ } else if (this.localUserService.isOnlyScreenConnected()) {
+ await this.connectScreenSession();
+ await this.openViduWebRTCService.publishScreenPublisher();
+ } else {
+ await this.connectWebcamSession();
+ await this.openViduWebRTCService.publishWebcamPublisher();
+ }
+
+ this.oVLayout.update();
+ }
+
+ //TODO Refactor connection methods move them to a service
+ private async connectScreenSession() {
+ try {
+ await this.openViduWebRTCService.connectScreenSession(this.tokenService.getScreenToken());
+ } catch (error) {
+ this._error.emit({ error: error.error, messgae: error.message, code: error.code, status: error.status });
+ this.log.e('There was an error connecting to the session:', error.code, error.message);
+ this.actionService.openDialog('There was an error connecting to the session:', error?.error || error?.message);
+ }
+ }
+
+ //TODO Refactor connection methods move them to a service
+ private async connectWebcamSession() {
+ try {
+ await this.openViduWebRTCService.connectWebcamSession(this.tokenService.getWebcamToken());
+ } catch (error) {
+ this._error.emit({ error: error.error, messgae: error.message, code: error.code, status: error.status });
+ this.log.e('There was an error connecting to the session:', error.code, error.message);
+ this.actionService.openDialog('There was an error connecting to the session:', error?.error || error?.message);
+ }
+ }
+
+ private subscribeToConnectionCreatedAndDestroyed() {
+ this.session.on('connectionCreated', (event: ConnectionEvent) => {
+ if (this.openViduWebRTCService.isMyOwnConnection(event.connection.connectionId)) {
+ return;
+ }
+
+ const nickname: string = this.remoteUserService.getNicknameFromConnectionData(event.connection.data);
+ this.remoteUserService.addUserName(event);
+
+ // Adding participant when connection is created
+ if (!nickname?.includes('_' + VideoType.SCREEN)) {
+ this.remoteUserService.add(event, null);
+
+ //Sending nicnkanme signal to new participants
+ if (this.openViduWebRTCService.needSendNicknameSignal()) {
+ const data = { clientData: this.localUserService.getWebcamUserName() };
+ this.openViduWebRTCService.sendSignal(Signal.NICKNAME_CHANGED, event.connection, data);
+ }
+ }
+ });
+
+ this.session.on('connectionDestroyed', (event: ConnectionEvent) => {
+ if (this.openViduWebRTCService.isMyOwnConnection(event.connection.connectionId)) {
+ return;
+ }
+ this.remoteUserService.deleteUserName(event);
+ const nickname: string = this.remoteUserService.getNicknameFromConnectionData(event.connection.data);
+ // Deleting participant when connection is destroyed
+ if (!nickname?.includes('_' + VideoType.SCREEN)) {
+ this.remoteUserService.removeUserByConnectionId(event.connection.connectionId);
+ }
+ });
+ }
+
+ private subscribeToStreamCreated() {
+ this.session.on('streamCreated', (event: StreamEvent) => {
+ const connectionId = event.stream.connection.connectionId;
+
+ if (this.openViduWebRTCService.isMyOwnConnection(connectionId)) {
+ return;
+ }
+
+ const subscriber: Subscriber = this.session.subscribe(event.stream, undefined);
+ this.remoteUserService.add(event, subscriber);
+ // this.oVSessionService.sendNicknameSignal(event.stream.connection);
+ });
+ }
+
+ private subscribeToStreamDestroyed() {
+ this.session.on('streamDestroyed', (event: StreamEvent) => {
+ const connectionId = event.stream.connection.connectionId;
+ this.remoteUserService.removeUserByConnectionId(connectionId);
+ // event.preventDefault();
+ });
+ }
+
+ private subscribeToStreamPropertyChange() {
+ this.session.on('streamPropertyChanged', (event: StreamPropertyChangedEvent) => {
+ const connectionId = event.stream.connection.connectionId;
+ if (this.openViduWebRTCService.isMyOwnConnection(connectionId)) {
+ return;
+ }
+ if (event.changedProperty === 'videoActive') {
+ this.remoteUserService.updateUsers();
+ }
+ });
+ }
+
+ private subscribeToNicknameChanged() {
+ this.session.on('signal:nicknameChanged', (event: any) => {
+ const connectionId = event.from.connectionId;
+ if (this.openViduWebRTCService.isMyOwnConnection(connectionId)) {
+ return;
+ }
+ this.remoteUserService.updateNickname(connectionId, event.data);
+ });
+ }
+
+ private subscribeToReconnection() {
+ this.session.on('reconnecting', () => {
+ this.log.w('Connection lost: Reconnecting');
+ this.actionService.openDialog('Connection Problem', 'Oops! Trying to reconnect to the session ...', false);
+ });
+ this.session.on('reconnected', () => {
+ this.log.w('Connection lost: Reconnected');
+ this.actionService.closeDialog();
+ });
+ this.session.on('sessionDisconnected', (event: SessionDisconnectedEvent) => {
+ if (event.reason === 'networkDisconnect') {
+ this.actionService.closeDialog();
+ this.leaveSession();
+ }
+ });
+ }
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| toolbar.component.ts | +
+
+ |
+ 38.78% | +64/165 | +25.8% | +24/93 | +41.46% | +17/41 | +37.25% | +57/153 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 +143 +144 +145 +146 +147 +148 +149 +150 +151 +152 +153 +154 +155 +156 +157 +158 +159 +160 +161 +162 +163 +164 +165 +166 +167 +168 +169 +170 +171 +172 +173 +174 +175 +176 +177 +178 +179 +180 +181 +182 +183 +184 +185 +186 +187 +188 +189 +190 +191 +192 +193 +194 +195 +196 +197 +198 +199 +200 +201 +202 +203 +204 +205 +206 +207 +208 +209 +210 +211 +212 +213 +214 +215 +216 +217 +218 +219 +220 +221 +222 +223 +224 +225 +226 +227 +228 +229 +230 +231 +232 +233 +234 +235 +236 +237 +238 +239 +240 +241 +242 +243 +244 +245 +246 +247 +248 +249 +250 +251 +252 +253 +254 +255 +256 +257 +258 +259 +260 +261 +262 +263 +264 +265 +266 +267 +268 +269 +270 +271 +272 +273 +274 +275 +276 +277 +278 +279 +280 +281 +282 +283 +284 +285 +286 +287 +288 +289 +290 +291 +292 +293 +294 +295 +296 +297 +298 +299 +300 +301 +302 +303 +304 +305 +306 +307 +308 +309 +310 +311 +312 +313 +314 +315 +316 +317 +318 +319 +320 +321 +322 +323 +324 +325 +326 +327 +328 +329 +330 +331 +332 +333 +334 +335 +336 +337 +338 +339 +340 +341 +342 +343 +344 | 1x +1x +1x +1x +1x + +1x +1x +1x +1x + +1x +1x + + + + + + + + + + + + + + + + +1x + +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x + + +1x + + +1x + + +1x + + +1x + + +1x + + + + + + + + + + + + + +1x +1x +1x +1x +1x +1x +1x +1x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +1x +1x + + +1x + + + +1x + + + + + + + +1x +1x + +1x +1x + +1x + + + + +1x + + + + + + + + + +1x + + + + + + + + +1x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | import { Component, EventEmitter, HostListener, OnDestroy, OnInit, Output } from '@angular/core';
+import { skip, Subscription } from 'rxjs';
+impoIrt { LocalUserService } from '../../services/local-user/local-user.service';
+import { TokenService } from '../../services/token/token.service';
+import { ChatService } from '../../services/chat/chat.service';
+import { DocumentService } from '../../services/document/document.service';
+
+import { VideoFullscreenIcon } from '../../models/icon.model';
+import { WebrtcService } from '../../services/webrtc/webrtc.service';
+import { LoggerService } from '../../services/logger/logger.service';
+import { ILogger } from '../../models/logger.model';
+import { ScreenType } from '../../models/video-type.model';
+import { Publisher, Session } from 'openvidu-browser';
+import { ActionService } from '../../services/action/action.service';
+import { DeviceService } from '../../services/device/device.service';
+import { ChatMessage } from '../../models/chat.model';
+
+@Component({
+ selector: 'ov-toolbar',
+ templateUrl: './toolbar.component.html',
+ styleUrls: ['./toolbar.component.css']
+})
+export class ToolbarComponent implements OnInit, OnDestroy {
+ @Output() onMicClicked = new EventEmitter<any>();
+ @Output() onCamClicked = new EventEmitter<any>();
+ @Output() onScreenShareClicked = new EventEmitter<any>();
+ @Output() onSpeakerLayoutClicked = new EventEmitter<any>();
+ @Output() onLeaveSessionClicked = new EventEmitter<any>();
+ @Output() onChatClicked = new EventEmitter<any>();
+
+ session: Session;
+
+ unreadMessages: number = 0;
+ messageList: ChatMessage[] = [];
+ isChatOpened: boolean;
+ isScreenShareEnabled: boolean;
+ isWebcamVideoEnabled: boolean;
+ isWebcamAudioEnabled: boolean;
+ isAutoLayout: boolean;
+ isConnectionLost: boolean;
+ hasVideoDevices: boolean;
+ hasAudioDevices: boolean;
+
+ fullscreenIcon = VideoFullscreenIcon.BIG;
+ logoUrl = 'assets/images/openvidu_logo.png';
+
+ participantsNames: string[] = [];
+
+ private log: ILogger;
+ private chatTogglingSubscription: Subscription;
+ private chatMessagesSubscription: Subscription;
+ private screenShareStateSubscription: Subscription;
+ private webcamVideoStateSubscription: Subscription;
+ privateI webcamAudioStateSubscription: Subscription;
+
+ constructor(
+ privatIe documentService: DocumentService,
+ private chatService: ChatService,
+ private tokenService: TokenService,
+ privatIe localUsersService: LocalUserService,
+ private openViduWebRTCService: WebrtcService,
+ private oVDevicesService: DeviceService,
+ privatIe actionService: ActionService,
+ private loggerSrv: LoggerService
+ ) {
+ this.lIog = this.loggerSrv.get('ToolbarComponent');
+ }
+
+ ngOnDestroy(): void {
+ if (this.chatTogglingSubscription) {
+ this.chatTogglingSubscription.unsubscribe();
+ }
+ if (this.chatMessagesSubscription) {
+ this.chatMessagesSubscription.unsubscribe();
+ }
+ if (this.screenShareStateSubscription) {
+ this.screenShareStateSubscription.unsubscribe();
+ }
+ if (this.webcamVideoStateSubscription) {
+ this.webcamVideoStateSubscription.unsubscribe();
+ }
+ if (this.webcamAudioStateSubscription) {
+ this.webcamAudioStateSubscription.unsubscribe();
+ }
+ }
+
+ @HostListener('window:resize', ['$event'])
+ sizeChange(event) {
+ const maxHeight = window.screen.height;
+ const maxWidth = window.screen.width;
+ const curHeight = window.innerHeight;
+ const curWidth = window.innerWidth;
+ if (maxWidth !== curWidth && maxHeight !== curHeight) {
+ this.fullscreenIcon = VideoFullscreenIcon.BIG;
+ }
+ }
+
+ async ngOnInit() {
+ await this.oVDevicesService.initDevices();
+ this.hasVideoDevices = this.oVDevicesService.hasVideoDeviceAvailable();
+ this.hasAudioDevices = this.oVDevicesService.hasAudioDeviceAvailable();
+
+ this.session = this.openViduWebRTCService.getWebcamSession();
+
+ this.subscribeToChatToggling();
+ this.subscriberToChatMessages();
+ this.subscribeToUserMediaProperties();
+ this.subscribeToReconnection();
+
+ }
+
+ toggleMicrophone() {
+ this.onMicClicked.emit();
+
+ if (this.localUsersService.isWebCamEnabled()) {
+ this.openViduWebRTCService.publishWebcamAudio(!this.localUsersService.hasWebcamAudioActive());
+ return;
+ }
+ this.openViduWebRTCService.publishScreenAudio(!this.localUsersService.hasScreenAudioActive());
+ }
+
+ async toggleCamera() {
+ this.onCamClicked.emit();
+
+ const publishVideo = !this.localUsersService.hasWebcamVideoActive();
+
+ // Disabling webcam
+ if (this.localUsersService.areBothConnected()) {
+ this.openViduWebRTCService.publishWebcamVideo(publishVideo);
+ this.localUsersService.disableWebcamUser();
+ this.openViduWebRTCService.unpublishWebcamPublisher();
+ return;
+ }
+ // Enabling webcam
+ if (this.localUsersService.isOnlyScreenConnected()) {
+ const hasAudio = this.localUsersService.hasScreenAudioActive();
+
+ if (!this.openViduWebRTCService.isWebcamSessionConnected()) {
+ await this.connectScreenSession();
+ }
+ await this.openViduWebRTCService.publishWebcamPublisher();
+ this.openViduWebRTCService.publishScreenAudio(false);
+ this.openViduWebRTCService.publishWebcamAudio(hasAudio);
+ this.localUsersService.enableWebcamUser();
+ }
+ // Muting/unmuting webcam
+ this.openViduWebRTCService.publishWebcamVideo(publishVideo);
+ }
+
+ async toggleScreenShare() {
+ this.onScreenShareClicked.emit();
+
+ // Disabling screenShare
+ if (this.localUsersService.areBothConnected()) {
+ this.localUsersService.disableScreenUser();
+ this.openViduWebRTCService.unpublishScreenPublisher();
+ return;
+ }
+
+ // Enabling screenShare
+ if (this.localUsersService.isOnlyWebcamConnected()) {
+ const screenPublisher = this.initScreenPublisher();
+
+ screenPublisher.once('accessAllowed', async (event) => {
+ // Listen to event fired when native stop button is clicked
+ screenPublisher.stream
+ .getMediaStream()
+ .getVideoTracks()[0]
+ .addEventListener('ended', () => {
+ this.log.d('Clicked native stop button. Stopping screen sharing');
+ this.toggleScreenShare();
+ });
+ this.log.d('ACCESS ALOWED screenPublisher');
+ this.localUsersService.enableScreenUser(screenPublisher);
+
+ if (!this.openViduWebRTCService.isScreenSessionConnected()) {
+ await this.connectScreenSession();
+ }
+ await this.openViduWebRTCService.publishScreenPublisher();
+ // this.openViduWebRTCService.sendNicknameSignal();
+ if (!this.localUsersService.hasWebcamVideoActive()) {
+ // Disabling webcam
+ this.localUsersService.disableWebcamUser();
+ this.openViduWebRTCService.unpublishWebcamPublisher();
+ }
+ });
+
+ screenPublisher.once('accessDenied', (error: any) => {
+ this.log.e(error);
+ if (error && error.name === 'SCREEN_SHARING_NOT_SUPPORTED') {
+ this.actionService.openDialog('Error sharing screen', 'Your browser does not support screen sharing');
+ }
+ });
+ return;
+ }
+
+ // Disabling screnShare and enabling webcam
+ const hasAudio = this.localUsersService.hasScreenAudioActive();
+ await this.openViduWebRTCService.publishWebcamPublisher();
+ this.openViduWebRTCService.publishScreenAudio(false);
+ this.openViduWebRTCService.publishWebcamAudio(hasAudio);
+ this.localUsersService.enableWebcamUser();
+ this.localUsersService.disableScreenUser();
+ this.openViduWebRTCService.unpublishScreenPublisher();
+ }
+
+ toggleSpeakerLayout() {
+ // this.onSpeakerLayoutClicked.emit();
+
+ // if (!this.localUsersService.isScreenShareEnabled()) {
+ // this.isAutoLayout = !this.isAutoLayout;
+
+ // this.log.d('Automatic Layout ', this.isAutoLayout ? 'Disabled' : 'Enabled');
+ // if (this.isAutoLayout) {
+ // this.subscribeToSpeechDetection();
+ // return;
+ // }
+ // this.log.d('Unsubscribe to speech detection');
+ // this.session.off('publisherStartSpeaking');
+ // this.resetAllBigElements();
+ // this.layoutService.update();
+ // return;
+ // }
+ // this.log.w('Screen is enabled. Speech detection has been rejected');
+ }
+
+ leaveSession() {
+ this.log.d('Leaving session...');
+ this.openViduWebRTCService.disconnect();
+ this.onLeaveSessionClicked.emit();
+ }
+
+ toggleChat() {
+ this.chatService.toggleChat();
+ this.onChatClicked.emit();
+ }
+
+ toggleFullscreen() {
+ this.documIentService.toggleFullscreen('videoRoomNavBar');
+ this.fullscreenIcon = this.fullscreenIcon === VideoFullscreenIcon.BIG ? VideoFullscreenIcon.NORMAL : VideoFullscreenIcon.BIG;
+ }
+
+ private async connectScreenSession() {
+ try {
+ await this.openViduWebRTCService.connectScreenSession(this.tokenService.getScreenToken());
+ } catch (error) {
+ this.log.e('There was an error connecting to the session:', error.code, error.message);
+ this.actionService.openDialog('There was an error connecting to the session:', error?.error || error?.message);
+ }
+ }
+
+ private initScreenPublisher(): Publisher {
+ const videoSource = ScreenType.SCREEN;
+ const audioSource = this.hasAudioDevices ? undefined : null;
+ const willThereBeWebcam = this.localUsersService.isWebCamEnabled() && this.localUsersService.hasWebcamVideoActive();
+ const hasAudio = willThereBeWebcam ? false : this.hasAudioDevices && this.localUsersService.hasWebcamAudioActive();
+ const properties = this.openViduWebRTCService.createPublisherProperties(videoSource, audioSource, true, hasAudio, false);
+ return this.openViduWebRTCService.initPublisher(undefined, properties);
+ }
+
+ private subscribeToReconnection() {
+ this.session.on('reconnecting', () => {
+ if (this.isChatOpened) {
+ this.toggleChat();
+ }
+ this.isConnectionLost = true;
+ });
+ this.session.on('reconnected', () => {
+ this.isConnectionLost = false;
+ });
+ }
+ private subscribeToChatToggling() {
+ this.chatTogglingSubscription = this.chatService.toggleChatObs.subscribe((opened) => {
+ if (opened) {
+ this.unreadMessages = 0;
+ }
+ this.isChatOpened = opened;
+ });
+ }
+
+ private subscriberToChatMessages() {
+ this.chatMessagesSubscription = this.chatService.messagesObs.pipe(skip(1)).subscribe((messages) => {
+ if (!this.isChatOpened) {
+ this.unreadMessages++;
+ }
+ this.messageList = messages;
+ });
+ }
+ private subscribeToUserMediaProperties() {
+ this.screenShareStateSubscription = this.localUsersService.screenShareState.subscribe((enabled) => {
+ this.isScreenShareEnabled = enabled;
+ });
+
+ this.webcamVideoStateSubscription = this.localUsersService.webcamVideoActive.subscribe((enabled) => {
+ this.isWebcamVideoEnabled = enabled;
+ });
+ this.webcamAudioStateSubscription = this.localUsersService.webcamAudioActive.subscribe((enabled) => {
+ this.isWebcamAudioEnabled = enabled;
+ });
+ }
+
+ // private subscribeToSpeechDetection() {
+ // this.log.d('Subscribe to speech detection', this.session);
+ // // Has been mandatory change the user zoom property here because of
+ // // zoom icons and cannot handle publisherStartSpeaking event in other component
+ // this.session.on('publisherStartSpeaking', (event: PublisherSpeakingEvent) => {
+ // const someoneIsSharingScreen =
+ // this.remoteUsersService.someoneIsSharingScreen() && this.localUsersService.isScreenShareEnabled();
+ // if (!someoneIsSharingScreen) {
+ // const elem = event.connection.stream.streamManager.videos[0].video;
+ // const element = this.documentService.getHTMLElementByClassName(elem, LayoutType.ROOT_CLASS);
+ // this.remoteUsersService.setUserZoom(event.connection.connectionId, true);
+ // this.onToggleVideoSize({ element, resetAll: true });
+ // }
+ // });
+ // }
+
+ // private resetAllBigElements() {
+ // this.documentService.removeAllBigElementClass();
+ // this.remoteUsersService.resetUsersZoom();
+ // this.localUsersService.resetUsersZoom();
+ // }
+
+ // onToggleVideoSize(event: { element: HTMLElement; connectionId?: string; resetAll?: boolean }) {
+ // const element = event.element;
+ // if (!!event.resetAll) {
+ // this.resetAllBigElements();
+ // }
+
+ // this.documentService.toggleBigElementClass(element);
+
+ // // Has been mandatory change the user zoom property here because of
+ // // zoom icons and cannot handle publisherStartSpeaking event in other component
+ // if (!!event?.connectionId) {
+ // if (this.openViduWebRTCService.isMyOwnConnection(event.connectionId)) {
+ // this.localUsersService.toggleZoom(event.connectionId);
+ // } else {
+ // this.remoteUsersService.toggleUserZoom(event.connectionId);
+ // }
+ // }
+ // this.layoutService.update();
+ // }
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| user-settings.component.ts | +
+
+ |
+ 42.7% | +79/185 | +24.39% | +40/164 | +44.44% | +20/45 | +41.04% | +71/173 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 +143 +144 +145 +146 +147 +148 +149 +150 +151 +152 +153 +154 +155 +156 +157 +158 +159 +160 +161 +162 +163 +164 +165 +166 +167 +168 +169 +170 +171 +172 +173 +174 +175 +176 +177 +178 +179 +180 +181 +182 +183 +184 +185 +186 +187 +188 +189 +190 +191 +192 +193 +194 +195 +196 +197 +198 +199 +200 +201 +202 +203 +204 +205 +206 +207 +208 +209 +210 +211 +212 +213 +214 +215 +216 +217 +218 +219 +220 +221 +222 +223 +224 +225 +226 +227 +228 +229 +230 +231 +232 +233 +234 +235 +236 +237 +238 +239 +240 +241 +242 +243 +244 +245 +246 +247 +248 +249 +250 +251 +252 +253 +254 +255 +256 +257 +258 +259 +260 +261 +262 +263 +264 +265 +266 +267 +268 +269 +270 +271 +272 +273 +274 +275 +276 +277 +278 +279 +280 +281 +282 +283 +284 +285 +286 +287 +288 +289 +290 +291 +292 +293 +294 +295 +296 +297 +298 +299 +300 +301 +302 +303 +304 +305 +306 +307 +308 +309 +310 +311 +312 +313 +314 +315 +316 +317 +318 +319 +320 +321 +322 +323 +324 +325 +326 +327 +328 +329 +330 +331 +332 +333 +334 +335 +336 +337 | 1x +1x +1x +1x +1x + +1x +2x +2x +1x +1x +2x +2x + + + + + + + + + + + + + + + + + +1x + +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x + + + + + +1x +1x +1x +1x +1x +1x +1x +1x + + + + +1x +1x + +1x +1x + +1x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +1x +1x +1x +1x + + + + + + + + + + + + + + + + + + + + + + +1x +1x +1x +1x +1x +1x + + + + + + + + + + + + + + + + + + + + + + +1x +1x + +1x +1x + + + + +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x + + + + + + + + +1x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +1x + + + + + + + +1x + + + + + + +1x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | import { Component, ElementRef, EventEmitter, HostListener, Input, OnDestroy, OnInit, Output, ViewChild } from '@angular/core';
+import { FormControl, Validators } from '@angular/forms';
+impoIrt { Subscription } from 'rxjs';
+
+import { OpenViduErrorName } from 'openvidu-browser/lib/OpenViduInternal/Enums/OpenViduError';
+import { Publisher } from 'openvidu-browser';
+
+import { ILogger } from '../../models/logger.model';
+import { CameraType, IDevice } from '../../models/device.model';
+import { UserModel } from '../../models/user.model';
+import { Storage } from '../../models/storage.model';
+import { ScreenType } from '../../models/video-type.model';
+
+import { NicknameMatcher } from '../../matchers/nickname.matcher';
+
+import { DeviceService } from '../../services/device/device.service';
+import { LoggerService } from '../../services/logger/logger.service';
+import { StorageService } from '../../services/storage/storage.service';
+import { LocalUserService } from '../../services/local-user/local-user.service';
+import { WebrtcService } from '../../services/webrtc/webrtc.service';
+import { ActionService } from '../../services/action/action.service';
+
+
+@Component({
+ selector: 'ov-user-settings',
+ templateUrl: './user-settings.component.html',
+ styleUrls: ['./user-settings.component.css']
+})
+export class UserSettingsComponent implements OnInit, OnDestroy {
+ @ViewChild('bodyCard') bodyCard: ElementRef;
+
+ @Input() sessionId: string;
+ @Output() onJoinClicked = new EventEmitter<any>();
+ @Output() onCloseClicked = new EventEmitter<any>();
+
+ cameras: IDevice[];
+ microphones: IDevice[];
+ camSelected: IDevice;
+ micSelected: IDevice;
+ isVideoActive = true;
+ isAudioActive = true;
+ screenShareEnabled: boolean;
+ localUsers: UserModel[] = [];
+ columns: number;
+
+ nicknameFormControl = new FormControl('', [Validators.maxLength(25), Validators.required]);
+ matcher = new NicknameMatcher();
+ hasVideoDevices: boolean;
+ hasAudioDevices: boolean;
+ private log: ILogger;
+ private oVUsersSubscription: Subscription;
+ private screenShareStateSubscription: Subscription;
+
+ constructor(
+ private actionService: ActionService,
+ private deviceSrv: DeviceService,
+ private loggerSrv: LoggerService,
+ private openViduWebRTCService: WebrtcService,
+ private localUserService: LocalUserService,
+ private storageSrv: StorageService
+ ) {
+ this.log = this.loggerSrv.get('UserSettingsComponent');
+
+ }
+
+ @HostListener('window:beforeunload')
+ beforeunloadHandler() {
+ this.close();
+ }
+
+ async ngOnInit() {
+ this.subscribeToLocalUsersEvents();
+ this.initNicknameAndSubscribeToChanges();
+ this.columns = window.innerWidth > 900 ? 2 : 1;
+ await this.deviceSrv.initDevices();
+ this.setDevicesInfo();
+ if (this.hasAudioDevices || this.hasVideoDevices) {
+ await this.initwebcamPublisher();
+ }
+ }
+
+ ngOnDestroy() {
+ if (this.oVUsersSubscription) {
+ this.oVUsersSubscription.unsubscribe();
+ }
+
+ if (this.screenShareStateSubscription) {
+ this.screenShareStateSubscription.unsubscribe();
+ }
+ this.deviceSrv.clear();
+ }
+
+ async onCameraSelected(event: any) {
+ const videoSource = event?.value;
+ if (!!videoSource) {
+ // Is New deviceId different from the old one?
+ if (this.deviceSrv.needUpdateVideoTrack(videoSource)) {
+ const mirror = this.deviceSrv.cameraNeedsMirror(videoSource);
+ await this.openViduWebRTCService.replaceTrack(videoSource, null, mirror);
+ this.deviceSrv.setCamSelected(videoSource);
+ this.camSelected = this.deviceSrv.getCamSelected();
+ }
+ // Publish Webcam
+ this.openViduWebRTCService.publishWebcamVideo(true);
+ this.isVideoActive = true;
+ return;
+ }
+ // Unpublish webcam
+ this.openViduWebRTCService.publishWebcamVideo(false);
+ this.isVideoActive = false;
+ }
+
+ async onMicrophoneSelected(event: any) {
+ const audioSource = event?.value;
+
+ if (!!audioSource) {
+ // Is New deviceId different than older?
+ if (this.deviceSrv.needUpdateAudioTrack(audioSource)) {
+ console.log(this.camSelected);
+ const mirror = this.deviceSrv.cameraNeedsMirror(this.camSelected.device);
+ await this.openViduWebRTCService.replaceTrack(null, audioSource, mirror);
+ this.deviceSrv.setMicSelected(audioSource);
+ this.micSelected = this.deviceSrv.getMicSelected();
+ }
+ // Publish microphone
+ this.publishAudio(true);
+ this.isAudioActive = true;
+ return;
+ }
+ // Unpublish microhpone
+ this.publishAudio(false);
+ this.isAudioActive = false;
+ }
+
+ toggleCam() {
+ this.isVideoActive = !this.isVideoActive;
+ this.openViduWebRTCService.publishWebcamVideo(this.isVideoActive);
+
+ if (this.localUserService.areBothConnected()) {
+ this.localUserService.disableWebcamUser();
+ this.openViduWebRTCService.publishScreenAudio(this.isAudioActive);
+ } else if (this.localUserService.isOnlyScreenConnected()) {
+ this.localUserService.enableWebcamUser();
+ }
+ }
+
+ toggleScreenShare() {
+ // Disabling screenShare
+ if (this.localUserService.areBothConnected()) {
+ this.localUserService.disableScreenUser();
+ return;
+ }
+
+ // Enabling screenShare
+ if (this.localUserService.isOnlyWebcamConnected()) {
+ const screenPublisher = this.initScreenPublisher();
+
+ screenPublisher.on('accessAllowed', (event) => {
+ screenPublisher.stream
+ .getMediaStream()
+ .getVideoTracks()[0]
+ .addEventListener('ended', () => {
+ this.log.d('Clicked native stop button. Stopping screen sharing');
+ this.toggleScreenShare();
+ });
+ this.localUserService.enableScreenUser(screenPublisher);
+ if (!this.localUserService.hasWebcamVideoActive()) {
+ this.localUserService.disableWebcamUser();
+ }
+ });
+
+ screenPublisher.on('accessDenied', (error: any) => {
+ if (error && error.name === 'SCREEN_SHARING_NOT_SUPPORTED') {
+ this.actionService.openDialog('Error sharing screen', 'Your browser does not support screen sharing');
+ }
+ });
+ return;
+ }
+
+ // Disabling screnShare and enabling webcam
+ this.localUserService.enableWebcamUser();
+ this.localUserService.disableScreenUser();
+ }
+
+ toggleMic() {
+ this.isAudioActive = !this.isAudioActive;
+ this.publishAudio(this.isAudioActive);
+ }
+
+ initNicknameAndSubscribeToChanges() {
+
+ const nickname = this.storageSrv.get(Storage.USER_NICKNAME) || this.generateRandomNickname();
+ this.nicknameFormControl.setValue(nickname);
+ this.localUserService.updateUsersNickname(nickname);
+
+ this.nicknameFormControl.valueChanges.subscribe((value) => {
+ this.localUserService.updateUsersNickname(value);
+ this.storageSrv.set(Storage.USER_NICKNAME, value);
+ });
+ }
+
+ eventKeyPress(event) {
+ if (event && event.keyCode === 13 && this.nicknameFormControl.valid) {
+ this.joinSession();
+ }
+ }
+
+ onResize(event) {
+ this.columns = event.target.innerWidth > 900 ? 2 : 1;
+ }
+
+ joinSession() {
+ if (this.nicknameFormControl.valid) {
+ return this.onJoinClicked.emit();
+ }
+ this.scrollToBottom();
+ }
+
+ close() {
+ this.onCloseClicked.emit();
+ }
+
+ private setDevicesInfo() {
+ this.hasVideoDevices = this.deviceSrv.hasVideoDeviceAvailable();
+ this.hasAudioDevices = this.deviceSrv.hasAudioDeviceAvailable();
+ this.microphones = this.deviceSrv.getMicrophones();
+ this.cameras = this.deviceSrv.getCameras();
+ this.camSelected = this.deviceSrv.getCamSelected();
+ this.micSelected = this.deviceSrv.getMicSelected();
+ }
+
+ private scrollToBottom(): void {
+ try {
+ this.bodyCard.nativeElement.scrollTop = this.bodyCard.nativeElement.scrollHeight;
+ } catch (err) {}
+ }
+
+ // !DUPLICATED ON toolbar.component.ts
+ private initScreenPublisher(): Publisher {
+ const videoSource = ScreenType.SCREEN;
+ const audioSource = this.hasAudioDevices ? undefined : null;
+ const willThereEBeWebcam = this.localUserService.isWebCamEnabled() && this.localUserService.hasWebcamVideoActive();
+ const hasAudio = willThereBeWebcam ? false : this.hasAudioDevices && this.isAudioActive;
+ const properties = this.openViduWebRTCService.createPublisherProperties(videoSource, audioSource, true, hasAudio, false);
+ return this.openViduWebRTCService.initPublisher(undefined, properties);
+ }
+
+ private publishAudio(audio: boolean) {
+ this.localUserService.isWebCamEnabled()
+ ? this.openViduWebRTCService.publishWebcamAudio(audio)
+ : this.openViduWebRTCService.publishScreenAudio(audio);
+ }
+
+ private subscribeToLocalUsersEvents() {
+ this.oVUsersSubscription = this.localUserService.OVUsers.subscribe((users) => {
+ this.localUsers = users;
+ });
+ this.screenShareStateSubscription = this.localUserService.screenShareState.subscribe((enabled) => {
+ this.screenShareEnabled = enabled;
+ });
+ }
+
+ private async initwebcamPublisher() {
+ const micStorageDevice = this.micSelected?.device || undefined;
+ const camStorageDevice = this.camSelected?.device || undefined;
+
+ const videoSource = this.hasVideoDevices ? camStorageDevice : false;
+ const audioSource = this.hasAudioDevices ? micStorageDevice : false;
+ const publishAudio = this.hasAudioDevices ? this.isAudioActive : false;
+ const publishVideo = this.hasVideoDevices ? this.isVideoActive : false;
+ const mirror = this.camSelected && this.camSelected.type === CameraType.FRONT;
+ const properties = this.openViduWebRTCService.createPublisherProperties(
+ videoSource,
+ audioSource,
+ publishVideo,
+ publishAudio,
+ mirror
+ );
+ if (this.hasAudioDevices || this.hasVideoDevices) {
+ const publisher = this.openViduWebRTCService.initPublisher(undefined, properties);
+ this.localUserService.setWebcamPublisher(publisher);
+ this.handlePublisherSuccess(publisher);
+ this.handlePublisherError(publisher);
+ } else {
+ this.localUserService.setWebcamPublisher(null);
+ }
+ }
+
+
+ private handlePublisherSuccess(publisher: Publisher) {
+ publisher.once('accessAllowed', async () => {
+ if (this.deviceSrv.areEmptyLabels()) {
+ await this.deviceSrv.initDevices();
+ if (this.hasAudioDevices) {
+ const audioLabel = publisher?.stream?.getMediaStream()?.getAudioTracks()[0]?.label;
+ this.deviceSrv.setMicSelected(audioLabel);
+ }
+
+ if (this.hasVideoDevices) {
+ const videoLabel = publisher?.stream?.getMediaStream()?.getVideoTracks()[0]?.label;
+ this.deviceSrv.setCamSelected(videoLabel);
+ }
+ this.setDevicesInfo();
+ }
+ });
+ }
+
+ private handlePublisherError(publisher: Publisher) {
+ publisher.once('accessDenied', (e: any) => {
+ let message: string;
+ if (e.name === OpenViduErrorName.DEVICE_ALREADY_IN_USE) {
+ this.log.w('Video device already in use. Disabling video device...');
+ // Allow access to the room with only mic if camera device is already in use
+ this.hasVideoDevices = false;
+ this.deviceSrv.disableVideoDevices();
+ return this.initwebcamPublisher();
+ }
+ if (e.name === OpenViduErrorName.DEVICE_ACCESS_DENIED) {
+ message = 'Access to media devices was not allowed.';
+ this.hasVideoDevices = false;
+ this.hasAudioDevices = false;
+ this.deviceSrv.disableVideoDevices();
+ this.deviceSrv.disableAudioDevices();
+ return this.initwebcamPublisher();
+ } else if (e.name === OpenViduErrorName.NO_INPUT_SOURCE_SET) {
+ message = 'No video or audio devices have been found. Please, connect at least one.';
+ }
+ this.actionService.openDialog(e.name.replace(/_/g, ' '), message, true);
+ this.log.e(e.message);
+ });
+ }
+
+ private generateRandomNickname(): string {
+ return 'OpenVidu_User' + Math.floor(Math.random() * 100);
+ }
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| video.component.ts | +
+
+ |
+ 55.17% | +16/29 | +37.5% | +12/32 | +55.55% | +5/9 | +50% | +12/24 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 | 1x +1x +1x +1x +1x + + + + +1x + +1x + + +1x +1x + + + + + +1x + + + + + + + + + + + + + + + + + + + + + + + + + +1x + + + + + +1x + + + + + + + + + + | import { AfterViewInit, Component, ElementRef, Input, EventEmitter, Output, ViewChild } from '@angular/core';
+import { StreamManager } from 'openvidu-browser';
+impoIrt { VideoType } from '../../models/video-type.model';
+
+@Component({
+ selector: 'ov-video',
+ template: `
+ <img *ngIf="!_streamManager?.stream?.videoActive" 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']
+})I
+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);
+ }
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 | 1x +1x +1x +1x +1x + + + +1x + + + + + + + + + + + + + + + + + + + + + + | import { OverlayContainer } from '@angular/cdk/overlay';
+import { Injectable } from '@angular/core';
+I
+@Injectable()
+export class CdkOverlayContainer extends OverlayContainer {
+ containerSelector = '.sidenav-main';
+ customClass = 'cdk-overlay-container';
+ protected _createContainer(): void {
+ const container = document.createElement('div');
+ container.classList.add(this.customClass);
+ let element = this.getElement(this.containerSelector);
+ if (!element) {
+ element = this.getElement('body');
+ }
+ this._containerElement = element.appendChild(container);
+ }
+
+ setSelector(selector: string) {
+ const overlayElement = this.getElement('.' + this.customClass);
+
+ if (overlayElement && this.containerSelector !== selector) {
+ const newContainerOverlayContainer = this.getElement(selector);
+ this.containerSelector = selector;
+ newContainerOverlayContainer?.appendChild(overlayElement);
+ }
+ }
+ private getElement(selector: string): Element {
+ return document.querySelector(selector);
+ }
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| custom-cdk-overlay.ts | +
+
+ |
+ 40.74% | +11/27 | +31.25% | +10/32 | +20% | +1/5 | +31.81% | +7/22 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| openvidu-components-library.component.ts | +
+
+ |
+ 92.85% | +13/14 | +45.45% | +10/22 | +100% | +3/3 | +100% | +8/8 | +
| openvidu-components-library.module.ts | +
+
+ |
+ 73.33% | +11/15 | +45.45% | +10/22 | +50% | +1/2 | +70% | +7/10 | +
| openvidu-components-library.service.ts | +
+
+ |
+ 86.66% | +13/15 | +45.45% | +10/22 | +75% | +3/4 | +88.88% | +8/9 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| nickname.matcher.ts | +
+
+ |
+ 0% | +0/2 | +0% | +0/7 | +0% | +0/1 | +0% | +0/2 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 | + + + + + + + + + | import { FormControl, FormGroupDirective, NgForm } from '@angular/forms';
+import { ErrorStateMatcher } from '@angular/material/core';
+
+/** Error when invalid control is dirty, touched, or submitted. */
+export class NicknameMatcher implements ErrorStateMatcher {
+ isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
+ const isSubmitted = form && form.submitted;
+ return !!(control && control.invalid && (control.dirty || control.touched || isSubmitted));
+ }
+} |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 | +1x +1x +1x + + + + + + | export interface IDevice {
+ label: string;
+ device: string;
+ type?: CameraType;
+}
+
+export enum CameraType {
+ FRONT = 'FRONT',
+ BACK = 'BACK'
+} |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 | +1x +1x +1x + + +1x +1x +1x + | export enum VideoSizeIcon {
+ BIG = 'zoom_in',
+ NORMAL = 'zoom_out'
+}
+
+export enum VideoFullscreenIcon {
+ BIG = 'fullscreen',
+ NORMAL = 'fullscreen_exit'
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| device.model.ts | +
+
+ |
+ 100% | +3/3 | +100% | +2/2 | +100% | +1/1 | +100% | +3/3 | +
| icon.model.ts | +
+
+ |
+ 100% | +6/6 | +100% | +4/4 | +100% | +2/2 | +100% | +6/6 | +
| layout.model.ts | +
+
+ |
+ 6.14% | +11/179 | +12.71% | +15/118 | +16% | +4/25 | +6.39% | +11/172 | +
| linkifier.model.ts | +
+
+ |
+ 33.33% | +1/3 | +100% | +0/0 | +0% | +0/2 | +33.33% | +1/3 | +
| signal.model.ts | +
+
+ |
+ 100% | +3/3 | +100% | +2/2 | +100% | +1/1 | +100% | +3/3 | +
| storage.model.ts | +
+
+ |
+ 100% | +4/4 | +100% | +2/2 | +100% | +1/1 | +100% | +4/4 | +
| user.model.ts | +
+
+ |
+ 23.52% | +4/17 | +10.16% | +6/59 | +13.33% | +2/15 | +23.52% | +4/17 | +
| video-type.model.ts | +
+
+ |
+ 100% | +7/7 | +100% | +4/4 | +100% | +2/2 | +100% | +7/7 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 +143 +144 +145 +146 +147 +148 +149 +150 +151 +152 +153 +154 +155 +156 +157 +158 +159 +160 +161 +162 +163 +164 +165 +166 +167 +168 +169 +170 +171 +172 +173 +174 +175 +176 +177 +178 +179 +180 +181 +182 +183 +184 +185 +186 +187 +188 +189 +190 +191 +192 +193 +194 +195 +196 +197 +198 +199 +200 +201 +202 +203 +204 +205 +206 +207 +208 +209 +210 +211 +212 +213 +214 +215 +216 +217 +218 +219 +220 +221 +222 +223 +224 +225 +226 +227 +228 +229 +230 +231 +232 +233 +234 +235 +236 +237 +238 +239 +240 +241 +242 +243 +244 +245 +246 +247 +248 +249 +250 +251 +252 +253 +254 +255 +256 +257 +258 +259 +260 +261 +262 +263 +264 +265 +266 +267 +268 +269 +270 +271 +272 +273 +274 +275 +276 +277 +278 +279 +280 +281 +282 +283 +284 +285 +286 +287 +288 +289 +290 +291 +292 +293 +294 +295 +296 +297 +298 +299 +300 +301 +302 +303 +304 +305 +306 +307 +308 +309 +310 +311 +312 +313 +314 +315 +316 +317 +318 +319 +320 +321 +322 +323 +324 +325 +326 +327 +328 +329 +330 +331 +332 +333 +334 +335 +336 +337 +338 +339 +340 +341 +342 +343 +344 +345 +346 +347 +348 +349 +350 +351 +352 +353 +354 +355 +356 +357 +358 +359 +360 +361 +362 +363 +364 +365 +366 +367 +368 +369 +370 +371 +372 +373 +374 +375 +376 +377 +378 +379 +380 +381 +382 +383 +384 +385 +386 +387 +388 +389 +390 +391 +392 +393 +394 +395 +396 +397 +398 +399 +400 +401 +402 +403 +404 +405 +406 +407 +408 +409 +410 +411 +412 +413 +414 +415 +416 +417 +418 +419 +420 +421 +422 +423 +424 +425 +426 +427 +428 +429 +430 +431 +432 +433 +434 +435 +436 +437 +438 +439 +440 +441 +442 +443 +444 +445 +446 +447 +448 +449 +450 +451 +452 +453 +454 +455 +456 +457 +458 +459 +460 +461 +462 +463 +464 +465 +466 +467 +468 +469 +470 +471 +472 +473 +474 +475 +476 +477 +478 +479 +480 +481 +482 +483 +484 +485 +486 +487 +488 +489 +490 +491 +492 +493 +494 +495 +496 +497 +498 +499 +500 +501 +502 +503 +504 +505 +506 +507 +508 +509 +510 +511 +512 +513 +514 +515 +516 +517 +518 +519 +520 +521 +522 +523 +524 +525 +526 +527 +528 +529 +530 +531 +532 +533 +534 +535 +536 +537 +538 +539 +540 +541 +542 +543 +544 +545 +546 +547 +548 +549 +550 +551 +552 +553 +554 +555 +556 +557 +558 +559 +560 +561 +562 +563 +564 +565 +566 +567 +568 +569 +570 +571 +572 +573 +574 +575 +576 +577 +578 +579 +580 +581 +582 +583 +584 +585 +586 +587 | +1x +1x +1x +1x +1x + + +1x +1x +1x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +1x + + + + + + + + + + + + +1x + + + + + + + + + +1x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | export enum LayoutClass {
+ ROOT_ELEMENT = 'OT_root',
+ BIG_ELEMENT = 'OV_big',
+ SMALL_ELEMENT = 'OV_small',
+ SIDENAV_CONTAINER = 'sidenav-container'
+}
+
+export enum SidenavMode {
+ OVER = 'over',
+ SIDE = 'side'
+}
+
+/**
+ * @hidden
+ */
+
+export interface OpenViduLayoutOptions {
+ /**
+ * The narrowest ratio that will be used (*2x3* by default)
+ */
+ maxRatio: number;
+
+ /**
+ * The widest ratio that will be used (*16x9* by default)
+ */
+ minRatio: number;
+
+ /**
+ * If this is true then the aspect ratio of the video is maintained and minRatio and maxRatio are ignored (*false* by default)
+ */
+ fixedRatio: boolean;
+ /**
+ * Whether you want to animate the transitions
+ */
+ animate: any;
+ /**
+ * The class to add to elements that should be sized bigger
+ */
+ bigClass: string;
+
+ /**
+ * The class to add to elements that should be sized smaller
+ */
+ smallClass: string;
+
+ /**
+ * The maximum percentage of space the big ones should take up
+ */
+ bigPercentage: any;
+
+ /**
+ * FixedRatio for the big ones
+ */
+ bigFixedRatio: any;
+
+ /**
+ * The narrowest ratio to use for the big elements (*2x3* by default)
+ */
+ bigMaxRatio: any;
+
+ /**
+ * The widest ratio to use for the big elements (*16x9* by default)
+ */
+ bigMinRatio: any;
+
+ /**
+ * Whether to place the big one in the top left `true` or bottom right
+ */
+ bigFirst: any;
+}
+
+export class OpenViduLayout {
+ /**
+ * @hidden
+ */
+ private layoutContainer: HTMLElement;
+
+ /**
+ * @hidden
+ */
+ private opts: OpenViduLayoutOptions;
+
+ /**
+ * Update the layout container
+ */
+ updateLayout() {
+ setTimeout(() => {
+ if (this.layoutContainer?.style?.display === 'none') {
+ return;
+ }
+ let id = this.layoutContainer.id;
+ if (!id) {
+ id = 'OT_' + this.cheapUUID();
+ this.layoutContainer.id = id;
+ }
+ const smallOnes: HTMLVideoElement[] = Array.prototype.filter.call(
+ this.layoutContainer.querySelectorAll('#' + id + '>.' + this.opts.smallClass),
+ this.filterDisplayNone
+ );
+ const bigOnes: HTMLVideoElement[] = Array.prototype.filter
+ .call(this.layoutContainer.querySelectorAll('#' + id + '>.' + this.opts.bigClass), this.filterDisplayNone)
+ .filter((x) => !smallOnes.includes(x));
+
+ const normalOnes: HTMLVideoElement[] = Array.prototype.filter
+ .call(this.layoutContainer.querySelectorAll('#' + id + '>*:not(.' + this.opts.bigClass + ')'), this.filterDisplayNone)
+ .filter((x) => !smallOnes.includes(x));
+
+ this.attachElements(bigOnes, normalOnes, smallOnes);
+ }, 50);
+ }
+
+ /**
+ * Initialize the layout inside of the container with the options required
+ * @param container
+ * @param opts
+ */
+ initLayoutContainer(container: HTMLElement, opts: OpenViduLayoutOptions) {
+ this.opts = {
+ maxRatio: opts.maxRatio != null ? opts.maxRatio : 3 / 2,
+ minRatio: opts.minRatio != null ? opts.minRatio : 9 / 16,
+ fixedRatio: opts.fixedRatio != null ? opts.fixedRatio : false,
+ animate: opts.animate != null ? opts.animate : false,
+ bigClass: opts.bigClass != null ? opts.bigClass : 'OT_big',
+ smallClass: opts.smallClass != null ? opts.smallClass : 'OT_small',
+ bigPercentage: opts.bigPercentage != null ? opts.bigPercentage : 0.8,
+ bigFixedRatio: opts.bigFixedRatio != null ? opts.bigFixedRatio : false,
+ bigMaxRatio: opts.bigMaxRatio != null ? opts.bigMaxRatio : 3 / 2,
+ bigMinRatio: opts.bigMinRatio != null ? opts.bigMinRatio : 9 / 16,
+ bigFirst: opts.bigFirst != null ? opts.bigFirst : true
+ };
+ this.layoutContainer = container;
+ }
+
+ /**
+ * Set the layout configuration
+ * @param options
+ */
+ setLayoutOptions(options: OpenViduLayoutOptions) {
+ this.opts = options;
+ }
+
+ getLayoutContainer(): HTMLElement {
+ return this.layoutContainer
+ }
+
+ /**
+ * @hidden
+ */
+ private fixAspectRatio(elem: HTMLVideoElement, width: number) {
+ const sub: HTMLVideoElement = <HTMLVideoElement>elem.querySelector('.OT_root');
+ if (sub) {
+ // If this is the parent of a subscriber or publisher then we need
+ // to force the mutation observer on the publisher or subscriber to
+ // trigger to get it to fix it's layout
+ const oldWidth = sub.style.width;
+ sub.style.width = width + 'px';
+ // sub.style.height = height + 'px';
+ sub.style.width = oldWidth || '';
+ }
+ }
+
+ /**
+ * @hidden
+ */
+ private positionElement(elem: HTMLVideoElement, x: number, y: number, width: number, height: number, animate: any) {
+ const targetPosition = {
+ left: x + 'px',
+ top: y + 'px',
+ width: width + 'px',
+ height: height + 'px'
+ };
+
+ this.fixAspectRatio(elem, width);
+
+ setTimeout(() => {
+ // animation added in css transition: all .1s linear;
+ elem.style.left = targetPosition.left;
+ elem.style.top = targetPosition.top;
+ elem.style.width = targetPosition.width;
+ elem.style.height = targetPosition.height;
+ this.fixAspectRatio(elem, width);
+ }, 10);
+ }
+
+ /**
+ * @hidden
+ */
+ private getVideoRatio(elem: HTMLVideoElement) {
+ if (!elem) {
+ return 3 / 4;
+ }
+ const video: HTMLVideoElement = <HTMLVideoElement>elem.querySelector('video');
+ if (video && video.videoHeight && video.videoWidth) {
+ return video.videoHeight / video.videoWidth;
+ } else if (elem.videoHeight && elem.videoWidth) {
+ return elem.videoHeight / elem.videoWidth;
+ }
+ return 3 / 4;
+ }
+
+ /**
+ * @hidden
+ */
+ private getCSSNumber(elem: HTMLElement, prop: string) {
+ const cssStr = window.getComputedStyle(elem)[prop];
+
+ return cssStr ? parseInt(cssStr, 10) : 0;
+ }
+
+ /**
+ * @hidden
+ */
+ // Really cheap UUID function
+ private cheapUUID() {
+ return (Math.random() * 100000000).toFixed(0);
+ }
+
+ /**
+ * @hidden
+ */
+ private getHeight(elem: HTMLElement) {
+ const heightStr = window.getComputedStyle(elem)['height'];
+ return heightStr ? parseInt(heightStr, 10) : 0;
+ }
+
+ /**
+ * @hidden
+ */
+ private getWidth(elem: HTMLElement) {
+ const widthStr = window.getComputedStyle(elem)['width'];
+ return widthStr ? parseInt(widthStr, 10) : 0;
+ }
+
+ /**
+ * @hidden
+ */
+ private getBestDimensions(minR: number, maxR: number, count: number, WIDTH: number, HEIGHT: number, targetHeight: number) {
+ let maxArea, targetCols, targetRows, targetWidth, tWidth, tHeight, tRatio;
+
+ // Iterate through every possible combination of rows and columns
+ // and see which one has the least amount of whitespace
+ for (let i = 1; i <= count; i++) {
+ const colsAux = i;
+ const rowsAux = Math.ceil(count / colsAux);
+
+ // Try taking up the whole height and width
+ tHeight = Math.floor(HEIGHT / rowsAux);
+ tWidth = Math.floor(WIDTH / colsAux);
+
+ tRatio = tHeight / tWidth;
+ if (tRatio > maxR) {
+ // We went over decrease the height
+ tRatio = maxR;
+ tHeight = tWidth * tRatio;
+ } else if (tRatio < minR) {
+ // We went under decrease the width
+ tRatio = minR;
+ tWidth = tHeight / tRatio;
+ }
+
+ const area = tWidth * tHeight * count;
+
+ // If this width and height takes up the most space then we're going with that
+ if (maxArea === undefined || area > maxArea) {
+ maxArea = area;
+ targetHeight = tHeight;
+ targetWidth = tWidth;
+ targetCols = colsAux;
+ targetRows = rowsAux;
+ }
+ }
+ return {
+ maxArea: maxArea,
+ targetCols: targetCols,
+ targetRows: targetRows,
+ targetHeight: targetHeight,
+ targetWidth: targetWidth,
+ ratio: targetHeight / targetWidth
+ };
+ }
+
+ /**
+ * @hidden
+ */
+ private arrange(
+ children: HTMLVideoElement[],
+ WIDTH: number,
+ HEIGHT: number,
+ offsetLeft: number,
+ offsetTop: number,
+ fixedRatio: boolean,
+ minRatio: number,
+ maxRatio: number,
+ animate: any
+ ) {
+ let targetHeight;
+
+ const count = children.length;
+ let dimensions;
+
+ if (!fixedRatio) {
+ dimensions = this.getBestDimensions(minRatio, maxRatio, count, WIDTH, HEIGHT, targetHeight);
+ } else {
+ // Use the ratio of the first video element we find to approximate
+ const ratio = this.getVideoRatio(children.length > 0 ? children[0] : null);
+ dimensions = this.getBestDimensions(ratio, ratio, count, WIDTH, HEIGHT, targetHeight);
+ }
+
+ // Loop through each stream in the container and place it inside
+ let x = 0,
+ y = 0;
+ const rows = [];
+ let row;
+ // Iterate through the children and create an array with a new item for each row
+ // and calculate the width of each row so that we know if we go over the size and need
+ // to adjust
+ for (let i = 0; i < children.length; i++) {
+ if (i % dimensions.targetCols === 0) {
+ // This is a new row
+ row = {
+ children: [],
+ width: 0,
+ height: 0
+ };
+ rows.push(row);
+ }
+ const elem: HTMLVideoElement = children[i];
+ row.children.push(elem);
+ let targetWidth = dimensions.targetWidth;
+ targetHeight = dimensions.targetHeight;
+ // If we're using a fixedRatio then we need to set the correct ratio for this element
+ if (fixedRatio) {
+ targetWidth = targetHeight / this.getVideoRatio(elem);
+ }
+ row.width += targetWidth;
+ row.height = targetHeight;
+ }
+ // Calculate total row height adjusting if we go too wide
+ let totalRowHeight = 0;
+ let remainingShortRows = 0;
+ for (let i = 0; i < rows.length; i++) {
+ row = rows[i];
+ if (row.width > WIDTH) {
+ // Went over on the width, need to adjust the height proportionally
+ row.height = Math.floor(row.height * (WIDTH / row.width));
+ row.width = WIDTH;
+ } else if (row.width < WIDTH) {
+ remainingShortRows += 1;
+ }
+ totalRowHeight += row.height;
+ }
+ if (totalRowHeight < HEIGHT && remainingShortRows > 0) {
+ // We can grow some of the rows, we're not taking up the whole height
+ let remainingHeightDiff = HEIGHT - totalRowHeight;
+ totalRowHeight = 0;
+ for (let i = 0; i < rows.length; i++) {
+ row = rows[i];
+ if (row.width < WIDTH) {
+ // Evenly distribute the extra height between the short rows
+ let extraHeight = remainingHeightDiff / remainingShortRows;
+ if (extraHeight / row.height > (WIDTH - row.width) / row.width) {
+ // We can't go that big or we'll go too wide
+ extraHeight = Math.floor(((WIDTH - row.width) / row.width) * row.height);
+ }
+ row.width += Math.floor((extraHeight / row.height) * row.width);
+ row.height += extraHeight;
+ remainingHeightDiff -= extraHeight;
+ remainingShortRows -= 1;
+ }
+ totalRowHeight += row.height;
+ }
+ }
+ // vertical centering
+ y = (HEIGHT - totalRowHeight) / 2;
+ // Iterate through each row and place each child
+ for (let i = 0; i < rows.length; i++) {
+ row = rows[i];
+ // center the row
+ const rowMarginLeft = (WIDTH - row.width) / 2;
+ x = rowMarginLeft;
+ for (let j = 0; j < row.children.length; j++) {
+ const elem: HTMLVideoElement = row.children[j];
+
+ let targetWidth = dimensions.targetWidth;
+ targetHeight = row.height;
+ // If we're using a fixedRatio then we need to set the correct ratio for this element
+ if (fixedRatio) {
+ targetWidth = Math.floor(targetHeight / this.getVideoRatio(elem));
+ }
+ elem.style.position = 'absolute';
+ // $(elem).css('position', 'absolute');
+ const actualWidth =
+ targetWidth -
+ this.getCSSNumber(elem, 'paddingLeft') -
+ this.getCSSNumber(elem, 'paddingRight') -
+ this.getCSSNumber(elem, 'marginLeft') -
+ this.getCSSNumber(elem, 'marginRight') -
+ this.getCSSNumber(elem, 'borderLeft') -
+ this.getCSSNumber(elem, 'borderRight');
+
+ const actualHeight =
+ targetHeight -
+ this.getCSSNumber(elem, 'paddingTop') -
+ this.getCSSNumber(elem, 'paddingBottom') -
+ this.getCSSNumber(elem, 'marginTop') -
+ this.getCSSNumber(elem, 'marginBottom') -
+ this.getCSSNumber(elem, 'borderTop') -
+ this.getCSSNumber(elem, 'borderBottom');
+
+ this.positionElement(elem, x + offsetLeft, y + offsetTop, actualWidth, actualHeight, animate);
+ x += targetWidth;
+ }
+ y += targetHeight;
+ }
+ }
+
+ /**
+ * @hidden
+ */
+ private attachElements(bigOnes: HTMLVideoElement[], normalOnes: HTMLVideoElement[], smallOnes: HTMLVideoElement[]) {
+ const HEIGHT =
+ this.getHeight(this.layoutContainer) -
+ this.getCSSNumber(this.layoutContainer, 'borderTop') -
+ this.getCSSNumber(this.layoutContainer, 'borderBottom');
+ const WIDTH =
+ this.getWidth(this.layoutContainer) -
+ this.getCSSNumber(this.layoutContainer, 'borderLeft') -
+ this.getCSSNumber(this.layoutContainer, 'borderRight');
+ const offsetLeft = 0;
+ const offsetTop = 0;
+
+ if (this.existBigAndNormalOnes(bigOnes, normalOnes, smallOnes)) {
+ const smallOnesAux = smallOnes.length > 0 ? smallOnes : normalOnes;
+ const bigOnesAux = bigOnes.length > 0 ? bigOnes : normalOnes;
+ this.arrangeBigAndSmallOnes(bigOnesAux, smallOnesAux);
+ } else if (this.onlyExistBigOnes(bigOnes, normalOnes, smallOnes)) {
+ // We only have one bigOne just center it
+ this.arrange(
+ bigOnes,
+ WIDTH,
+ HEIGHT,
+ 0,
+ 0,
+ this.opts.bigFixedRatio,
+ this.opts.bigMinRatio,
+ this.opts.bigMaxRatio,
+ this.opts.animate
+ );
+ } else if (this.existBigAndNormalAndSmallOnes(bigOnes, normalOnes, smallOnes)) {
+ this.arrangeBigAndSmallOnes(bigOnes, normalOnes.concat(smallOnes));
+ } else {
+ const normalOnesAux = normalOnes.concat(smallOnes);
+ this.arrange(
+ normalOnesAux,
+ WIDTH - offsetLeft,
+ HEIGHT - offsetTop,
+ offsetLeft,
+ offsetTop,
+ this.opts.fixedRatio,
+ this.opts.minRatio,
+ this.opts.maxRatio,
+ this.opts.animate
+ );
+ }
+ }
+
+ /**
+ * @hidden
+ */
+ private arrangeBigAndSmallOnes(bigOnesAux: HTMLVideoElement[], smallOnesAux: HTMLVideoElement[]) {
+ const HEIGHT =
+ this.getHeight(this.layoutContainer) -
+ this.getCSSNumber(this.layoutContainer, 'borderTop') -
+ this.getCSSNumber(this.layoutContainer, 'borderBottom');
+ const WIDTH =
+ this.getWidth(this.layoutContainer) -
+ this.getCSSNumber(this.layoutContainer, 'borderLeft') -
+ this.getCSSNumber(this.layoutContainer, 'borderRight');
+ const availableRatio = HEIGHT / WIDTH;
+
+ let offsetLeft = 0;
+ let offsetTop = 0;
+ let bigOffsetTop = 0;
+ let bigOffsetLeft = 0;
+ let bigWidth, bigHeight;
+
+ if (availableRatio > this.getVideoRatio(bigOnesAux[0])) {
+ // We are tall, going to take up the whole width and arrange small
+ // guys at the bottom
+ bigWidth = WIDTH;
+ bigHeight = Math.floor(HEIGHT * this.opts.bigPercentage);
+ offsetTop = bigHeight;
+ bigOffsetTop = HEIGHT - offsetTop;
+ } else {
+ // We are wide, going to take up the whole height and arrange the small
+ // guys on the right
+ bigHeight = HEIGHT;
+ bigWidth = Math.floor(WIDTH * this.opts.bigPercentage);
+ offsetLeft = bigWidth;
+ bigOffsetLeft = WIDTH - offsetLeft;
+ }
+ if (this.opts.bigFirst) {
+ this.arrange(
+ bigOnesAux,
+ bigWidth,
+ bigHeight,
+ 0,
+ 0,
+ this.opts.bigFixedRatio,
+ this.opts.bigMinRatio,
+ this.opts.bigMaxRatio,
+ this.opts.animate
+ );
+ this.arrange(
+ smallOnesAux,
+ WIDTH - offsetLeft,
+ HEIGHT - offsetTop,
+ offsetLeft,
+ offsetTop,
+ this.opts.fixedRatio,
+ this.opts.minRatio,
+ this.opts.maxRatio,
+ this.opts.animate
+ );
+ } else {
+ this.arrange(
+ smallOnesAux,
+ WIDTH - offsetLeft,
+ HEIGHT - offsetTop,
+ 0,
+ 0,
+ this.opts.fixedRatio,
+ this.opts.minRatio,
+ this.opts.maxRatio,
+ this.opts.animate
+ );
+ this.arrange(
+ bigOnesAux,
+ bigWidth,
+ bigHeight,
+ bigOffsetLeft,
+ bigOffsetTop,
+ this.opts.bigFixedRatio,
+ this.opts.bigMinRatio,
+ this.opts.bigMaxRatio,
+ this.opts.animate
+ );
+ }
+ }
+
+ /**
+ * @hidden
+ */
+ private existBigAndNormalOnes(bigOnes: HTMLVideoElement[], normalOnes: HTMLVideoElement[], smallOnes: HTMLVideoElement[]) {
+ return (
+ (bigOnes.length > 0 && normalOnes.length > 0 && smallOnes.length === 0) ||
+ (bigOnes.length > 0 && normalOnes.length === 0 && smallOnes.length > 0) ||
+ (bigOnes.length === 0 && normalOnes.length > 0 && smallOnes.length > 0)
+ );
+ }
+
+ /**
+ * @hidden
+ */
+ private onlyExistBigOnes(bigOnes: HTMLVideoElement[], normalOnes: HTMLVideoElement[], smallOnes: HTMLVideoElement[]): boolean {
+ return bigOnes.length > 0 && normalOnes.length === 0 && smallOnes.length === 0;
+ }
+
+ /**
+ * @hidden
+ */
+ private existBigAndNormalAndSmallOnes(
+ bigOnes: HTMLVideoElement[],
+ normalOnes: HTMLVideoElement[],
+ smallOnes: HTMLVideoElement[]
+ ): boolean {
+ return bigOnes.length > 0 && normalOnes.length > 0 && smallOnes.length > 0;
+ }
+
+ /**
+ * @hidden
+ */
+ private filterDisplayNone(element: HTMLElement) {
+ return element.style.display !== 'none';
+ }
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 | +1x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | import { Autolinker, AutolinkerConfig, HashtagMatch } from 'autolinker';
+
+const AUTOLINKER_CFGS: AutolinkerConfig = {
+ urls: {
+ schemeMatches: true,
+ wwwMatches: true,
+ tldMatches: true
+ },
+ email: true,
+ phone: true,
+ mention: 'twitter',
+ hashtag: 'twitter',
+ stripPrefix: false,
+ stripTrailingSlash: false,
+ newWindow: true,
+ truncate: {
+ length: 0,
+ location: 'end'
+ },
+ decodePercentEncoding: true
+};
+
+export class Linkifier {
+ private autolinker: Autolinker;
+
+ constructor() {
+ this.autolinker = new Autolinker(AUTOLINKER_CFGS);
+ }
+
+ public link(textOrHtml: string): string {
+ return this.autolinker.link(textOrHtml);
+ }
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| 1 +2 +3 +4 +5 | +1x +1x +1x + | export enum Signal {
+ NICKNAME_CHANGED = 'nicknameChanged',
+ CHAT = 'chat'
+
+} |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| 1 +2 +3 +4 +5 | +1x +1x +1x +1x | export enum Storage{
+ USER_NICKNAME = 'openviduCallNickname',
+ VIDEO_DEVICE = 'openviduCallVideoDevice',
+ AUDIO_DEVICE = 'openviduCallAudioDevice'
+} |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 +143 +144 | + + + + + + + + +1x +1x +1x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +1x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | import { StreamManager, Publisher } from 'openvidu-browser';
+import { VideoType } from '../models/video-type.model';
+
+/**
+ * Packs all the information about the user
+ */
+export class UserModel {
+ /**
+ * The Connection ID that is publishing the stream
+ */
+ connectionId: string;
+
+ /**
+ * The user nickname
+ */
+ nickname: string;
+
+ /**
+ * StreamManager object ([[Publisher]] or [[Subscriber]])
+ */
+ streamManager: StreamManager;
+
+ /**
+ * @hidden
+ */
+ local: boolean;
+
+ /**
+ * @hidden
+ */
+ videoSizeBig: boolean;
+
+ /**
+ * @hidden
+ */
+ constructor(connectionId?: string, streamManager?: StreamManager, nickname?: string) {
+ this.connectionId = connectionId || '';
+ this.nickname = nickname || 'OpenVidu';
+ this.streamManager = streamManager || null;
+ }
+
+ /**
+ * Return `true` if audio track is active and `false` if audio track is muted
+ */
+ public isAudioActive(): boolean {
+ // console.log("isAudioActive");
+ return (<Publisher>this.streamManager)?.stream?.audioActive;
+ }
+
+ /**
+ * Return `true` if video track is active and `false` if video track is muted
+ */
+ public isVideoActive(): boolean {
+ // console.log("isVideoActive");
+ return (<Publisher>this.streamManager)?.stream?.videoActive;
+ }
+
+ /**
+ * Return the connection ID
+ */
+ public getConnectionId(): string {
+ return this.streamManager?.stream?.connection?.connectionId || this.connectionId;
+ }
+
+ /**
+ * Return the user nickname
+ */
+ public getNickname(): string {
+ return this.nickname;
+ }
+
+ /**
+ * Return the [[streamManger]] object
+ */
+ public getStreamManager(): StreamManager {
+ return this.streamManager;
+ }
+
+ /**
+ * Return `true` if user has a local role and `false` if not
+ */
+ public isLocal(): boolean {
+ return this.local;
+ }
+
+ /**
+ * Return `true` if user has a remote role and `false` if not
+ */
+ public isRemote(): boolean {
+ return (<Publisher>this.streamManager)?.remote;
+ }
+
+ /**
+ * Return `true` if user has a screen role and `false` if not
+ */
+ public isScreen(): boolean {
+ // console.log("isScreen");
+ return (<Publisher>this.streamManager)?.stream?.typeOfVideo === VideoType.SCREEN;
+ }
+
+ /**
+ * Return `true` if user has a camera role and `false` if not
+ */
+ public isCamera(): boolean {
+ // console.log("CCC");
+ return (<Publisher>this.streamManager)?.stream?.typeOfVideo === VideoType.CAMERA || (this.isLocal() && !this.isScreen());
+ }
+
+ /**
+ * Set the streamManager value object
+ * @param streamManager value of streamManager
+ */
+ public setStreamManager(streamManager: StreamManager) {
+ this.streamManager = streamManager;
+ }
+
+ /**
+ * Set the user nickname value
+ * @param nickname value of user nickname
+ */
+ public setNickname(nickname: string) {
+ this.nickname = nickname;
+ }
+
+ public isVideoSizeBig(): boolean {
+ return this.videoSizeBig;
+ }
+
+ /**
+ * @hidden
+ */
+ public setVideoSizeBig(big: boolean) {
+ this.videoSizeBig = big;
+ }
+
+ /**
+ * @hidden
+ */
+ // Used when the streamManager is null (users without devices)
+ public setLocal(local: boolean) {
+ this.local = local;
+ }
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 | +1x +1x +1x +1x + + +1x +1x +1x + | export enum VideoType {
+ CAMERA = 'CAMERA',
+ SCREEN = 'SCREEN',
+ CUSTOM = 'CUSTOM'
+}
+
+export enum ScreenType {
+ WINDOW = 'window',
+ SCREEN = 'screen'
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 | 1x +1x +1x +1x +1x + + + +1x + + +1x +1x + + + + + | import { Component, OnInit } from '@angular/core';
+
+@ComIponent({
+ selector: 'ov-openvidu-components',
+ template: ` <p>openvidu-components works!</p> `,
+ styles: [
+ `
+ p {
+ font-weight: bold;
+ font-size: 20px;
+ }
+ `,
+ ],
+})
+export class OpenviduComponentsLibraryComponent {
+ constructor() {}
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 | 1x +1x +1x +1x +1x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +1x + + + + + + + + + +1x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MatBadgeModule } from '@angular/material/badge';
+impoIrt { MatButtonModule } from '@angular/material/button';
+import { MatCardModule } from '@angular/material/card';
+import { MatOptionModule } from '@angular/material/core';
+import { MatDialogModule } from '@angular/material/dialog';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatGridListModule } from '@angular/material/grid-list';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatSnackBarModule } from '@angular/material/snack-bar';
+import { MatSelectModule } from '@angular/material/select';
+import { MatSidenavModule } from '@angular/material/sidenav';
+import { MatSliderModule } from '@angular/material/slider';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { FlexLayoutModule } from '@angular/flex-layout';
+import { OverlayContainer } from '@angular/cdk/overlay';
+import { MatMenuModule } from '@angular/material/menu';
+
+import { RouterModule } from '@angular/router';
+import { CommonModule } from '@angular/common';
+import { ModuleWithProviders, NgModule } from '@angular/core';
+import { HttpClientModule } from '@angular/common/http';
+
+import { UserSettingsComponent } from './components/user-settings/user-settings.component';
+import { ToolbarComponent } from './components/toolbar/toolbar.component';
+import { VideoComponent } from './components/video/video.component';
+import { ChatComponent } from './components/chat/chat.component';
+import { RoomComponent } from './components/room/room.component';
+import { LayoutComponent } from './components/layout/layout.component';
+import { ParticipantComponent } from './components/participant/participant.component';
+import { DialogTemplateComponent } from './components/material/dialog.component';
+import { FooterComponent } from './components/footer/footer.component';
+
+import { LinkifyPipe } from './pipes/linkify.pipe';
+import { TooltipListPipe } from './pipes/tooltip-list.pipe';
+
+import { LibConfig } from './config/lib.config';
+import { CdkOverlayContainer } from './config/custom-cdk-overlay';
+import { DeviceService } from './services/device/device.service';
+import { LocalUserService } from './services/local-user/local-user.service';
+import { LoggerService } from './services/logger/logger.service';
+import { PlatformService } from './services/platform/platform.service';
+import { StorageService } from './services/storage/storage.service';
+import { TokenService } from './services/token/token.service';
+import { LibraryConfigService } from './services/library-config/library-config.service';
+import { WebrtcService } from './services/webrtc/webrtc.service';
+import { ActionService } from './services/action/action.service';
+import { ChatService } from './services/chat/chat.service';
+import { DocumentService } from './services/document/document.service';
+import { LayoutService } from './services/layout/layout.service';
+import { RemoteUserService } from './services/remote-user/remote-user.service';
+
+
+@NgModule({
+ declarations: [
+ UserSettingsComponent,
+ VideoComponent,
+ ToolbarComponent,
+ ChatComponent,
+ RoomComponent,
+ LayoutComponent,
+ ParticipantComponent,
+ DialogTemplateComponent,
+ LinkifyPipe,
+ TooltipListPipe,
+ FooterComponent
+ ],
+ imports: [
+ CommonModule,
+ HttpClientModule,
+ FormsModule,
+ ReactiveFormsModule,
+ RouterModule.forRoot([]),
+ MatButtonModule,
+ MatCardModule,
+ MatToolbarModule,
+ MatIconModule,
+ MatInputModule,
+ MatFormFieldModule,
+ MatDialogModule,
+ MatTooltipModule,
+ MatBadgeModule,
+ MatGridListModule,
+ MatSelectModule,
+ MatOptionModule,
+ MatProgressSpinnerModule,
+ MatSliderModule,
+ MatSidenavModule,
+ MatSnackBarModule,
+ FlexLayoutModule,
+ MatMenuModule
+ ],
+ providers: [
+ ActionService,
+ CdkOverlayContainer,
+ { provide: OverlayContainer, useClass: CdkOverlayContainer },
+ ChatService,
+ DeviceService,
+ DocumentService,
+ LayoutService,
+ LocalUserService,
+ LoggerService,
+ PlatformService,
+ RemoteUserService,
+ StorageService,
+ TokenService,
+ WebrtcService
+
+ ],
+ exports: [
+ UserSettingsComponent,
+ ToolbarComponent,
+ ChatComponent,
+ RoomComponent,
+ LayoutComponent,
+ FooterComponent,
+ CommonModule
+ ],
+ entryComponents: [
+ DialogTemplateComponent
+ ]
+})
+
+
+export class OpenviduComponentsLibraryModule {
+ static forRoot(environment): ModuleWithProviders<OpenviduComponentsLibraryModule> {
+ console.log('Library config: ', environment);
+ const libConfig: LibConfig = { environment };
+ return {
+ ngModule: OpenviduComponentsLibraryModule,
+ providers: [LibraryConfigService , {provide: 'LIB_CONFIG', useValue: libConfig}]
+ };
+ }
+
+ }
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 | 1x +1x +1x +1x +1x + + +1x + + + + + +1x | import { Injectable } from '@angular/core';
+
+@InjIectable({
+ providedIn: 'root'
+})
+export class OpenviduComponentsLibraryService {
+
+ constructor() { }
+
+ changeFontColor() {
+ console.log('Change font color from service');
+ }
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| linkify.pipe.ts | +
+
+ |
+ 75% | +12/16 | +41.66% | +10/24 | +25% | +1/4 | +80% | +8/10 | +
| tooltip-list.pipe.ts | +
+
+ |
+ 87.5% | +14/16 | +45.45% | +10/22 | +66.66% | +2/3 | +90.9% | +10/11 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 | 1x +1x +1x +1x +1x + + + +1x + + + + + + + | import { Pipe, PipeTransform } from '@angular/core';
+import { Linkifier } from '../models/linkifier.model';
+I
+@Pipe({ name: 'linkify' })
+export class LinkifyPipe implements PipeTransform {
+ private linkifer: Linkifier;
+
+ constructor() {
+ this.linkifer = new Linkifier();
+ }
+
+ transform(str: string): string {
+ return str ? this.linkifer.link(str) : str;
+ }
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 | 1x +1x +1x +1x +1x + + +1x + +1x +1x + + +1x | import { Pipe, PipeTransform } from '@angular/core';
+
+@PipIe({ name: 'tooltipList', pure: true })
+export class TooltipListPipe implements PipeTransform {
+ transform(lines: string[]): string {
+ let list = '';
+ lines.forEach((line) => {
+ list += '• ' + line + '\n';
+ });
+
+ return list;
+ }
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 | 1x +1x +1x +1x +1x + + +1x + + + + + + + + +1x +1x + | import { Injectable } from '@angular/core';
+import { INotificationOptions } from '../../models/notification-options.model';
+I
+@Injectable()
+export class ActionServiceMock {
+ constructor() {}
+
+ launchNotification(options: INotificationOptions, callback): void {
+
+ }
+
+ openDialog(titleMessage: string, descriptionMessage: string, allowClose = true) {
+
+ }
+
+ closeDialog() {
+ }
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 | 1x +1x +1x +1x +1x + + + + + +1x + +1x +1x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +1x + + + | import { Injectable } from '@angular/core';
+import { MatDialog, MatDialogConfig, MatDialogRef } from '@angular/material/dialog';
+impoIrt { MatSnackBar } from '@angular/material/snack-bar';
+import { DialogTemplateComponent } from '../../components/material/dialog.component';
+
+import { INotificationOptions } from '../../models/notification-options.model';
+
+@Injectable({
+ providedIn: 'root'
+})
+export class ActionService {
+
+ private dialogRef: MatDialogRef<DialogTemplateComponent>;
+ constructor(private snackBar: MatSnackBar, public dialog: MatDialog) {}
+
+ launchNotification(options: INotificationOptions, callback): void {
+ if (!options.config) {
+ options.config = {
+ duration: 3000,
+ verticalPosition: 'top',
+ horizontalPosition: 'end'
+ };
+ }
+
+ const notification = this.snackBar.open(options.message, options.buttonActionText, options.config);
+ if (callback) {
+ notification.onAction().subscribe(() => {
+ callback();
+ });
+ }
+ }
+
+ openDialog(titleMessage: string, descriptionMessage: string, allowClose = true) {
+ try {
+ this.closeDialog();
+
+ } catch (error) {
+
+ } finally {
+ const config: MatDialogConfig = {
+ minWidth: '250px',
+ data: { title: titleMessage, description: descriptionMessage, showActionButtons: allowClose },
+ disableClose: !allowClose
+ };
+ this.dialogRef = this.dialog.open(DialogTemplateComponent, config);
+ this.dialogRef.afterClosed().subscribe((result) => {
+ this.dialogRef = null;
+ });
+ }
+ }
+
+ closeDialog() {
+ this.dialogRef.close();
+ }
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| action.service.mock.ts | +
+
+ |
+ 92.85% | +13/14 | +43.47% | +10/23 | +50% | +3/6 | +100% | +8/8 | +
| action.service.ts | +
+
+ |
+ 51.72% | +15/29 | +37.03% | +10/27 | +37.5% | +3/8 | +43.47% | +10/23 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 | 1x +1x +1x +1x +1x + + +1x + + + + +1x +1x + | import { Injectable } from '@angular/core';
+
+@InjIectable({
+ providedIn: 'root'
+})
+export class CdkOverlayServiceMock {
+
+ constructor() {}
+
+ setSelector(selector: string) {
+ }
+}
+
+
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 | 1x +1x +1x +1x +1x + + + +1x + +1x + + | import { Injectable } from '@angular/core';
+import {CdkOverlayContainer } from '../../config/custom-cdk-overlay';
+@InjIectable({
+ providedIn: 'root'
+})
+export class CdkOverlayService {
+ constructor(private cdkOverlayModel: CdkOverlayContainer) {}
+
+ setSelector(selector: string) {
+ this.cdkOverlayModel.setSelector(selector);
+ }
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| cdk-overlay.service.mock.ts | +
+
+ |
+ 92.85% | +13/14 | +45.45% | +10/22 | +100% | +4/4 | +100% | +8/8 | +
| cdk-overlay.service.ts | +
+
+ |
+ 87.5% | +14/16 | +45.45% | +10/22 | +75% | +3/4 | +90% | +9/10 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 | 1x +1x +1x +1x +1x + + + +1x + +4x +4x +4x +4x +4x +4x + + + + + + + + + + + + + +1x +1x + + + + + + + + + + | import { Injectable } from '@angular/core';
+import { Observable, BehaviorSubject } from 'rxjs';
+impoIrt { ChatMessage } from '../../models/chat.model';
+
+@Injectable()
+export class ChatServiceMock {
+ messagesObs: Observable<ChatMessage[]>;
+ messagesUnreadObs: Observable<number>;
+ toggleChatObs: Observable<boolean>;
+ private _messageList = <BehaviorSubject<ChatMessage[]>>new BehaviorSubject([]);
+ private _toggleChat = <BehaviorSubject<boolean>>new BehaviorSubject(false);
+
+
+ private _messagesUnread = <BehaviorSubject<number>>new BehaviorSubject(0);
+
+ constructor() {
+ this.messagesObs = this._messageList.asObservable();
+ this.toggleChatObs = this._toggleChat.asObservable();
+ this.messagesUnreadObs = this._messagesUnread.asObservable();
+ }
+
+ subscribeToChat() {
+ }
+
+ sendMessage(message: string) {
+
+ }
+
+ toggleChat() {
+
+ }
+
+ private isChatOpened(): boolean {
+ return false;
+ }
+
+ private addMessageUnread() {
+
+ }
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 | 1x +1x +1x +1x +1x + + + + + + + + +1x + +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +1x + + + + + +1x + + + + + + + + | import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs/internal/Observable';
+impoIrt { BehaviorSubject } from 'rxjs/internal/BehaviorSubject';
+
+import { ILogger } from '../../models/logger.model';
+import { ChatMessage } from '../../models/chat.model';
+import { INotificationOptions } from '../../models/notification-options.model';
+
+import { ActionService } from '../action/action.service';
+import { WebrtcService } from '../webrtc/webrtc.service';
+import { LocalUserService } from '../local-user/local-user.service';
+import { LoggerService } from '../logger/logger.service';
+import { Signal } from '../../models/signal.model';
+
+@Injectable({
+ providedIn: 'root'
+})
+export class ChatService {
+ messagesObs: Observable<ChatMessage[]>;
+ toggleChatObs: Observable<boolean>;
+
+ private _messageList = <BehaviorSubject<ChatMessage[]>>new BehaviorSubject([]);
+ private _toggleChat = <BehaviorSubject<boolean>>new BehaviorSubject(false);
+
+ private messageList: ChatMessage[] = [];
+ private isChatOpened: boolean = false;
+ private log: ILogger;
+ constructor(
+ private loggerSrv: LoggerService,
+ private openViduWebRTCService: WebrtcService,
+ private localUsersService: LocalUserService,
+ private actionService: ActionService
+ ) {
+ this.log = this.loggerSrv.get('ChatService');
+ this.messagesObs = this._messageList.asObservable();
+ this.toggleChatObs = this._toggleChat.asObservable();
+ }
+
+ subscribeToChat() {
+ const session = this.openViduWebRTCService.getWebcamSession();
+ session.on(`signal:${Signal.CHAT}`, (event: any) => {
+ const connectionId = event.from.connectionId;
+ const data = JSON.parse(event.data);
+ const isMyOwnConnection = this.openViduWebRTCService.isMyOwnConnection(connectionId);
+ this.messageList.push({
+ isLocal: isMyOwnConnection,
+ nickname: data.nickname,
+ message: data.message,
+ });
+ if (!this.isChatOpened) {
+ const notificationOptions: INotificationOptions = {
+ message: `${data.nickname.toUpperCase()} sent a message`,
+ cssClassName: 'messageSnackbar',
+ buttonActionText: 'READ'
+ };
+ this.actionService.launchNotification(notificationOptions, this.toggleChat.bind(this));
+ }
+ this._messageList.next(this.messageList);
+ });
+ }
+
+ sendMessage(message: string) {
+ message = message.replace(/ +(?= )/g, '');
+ if (message !== '' && message !== ' ') {
+ const data = {
+ message: message,
+ nickname: this.localUsersService.getWebcamUserName()
+ };
+
+ this.openViduWebRTCService.sendSignal(Signal.CHAT, undefined, data);
+ }
+ }
+
+ toggleChat() {
+ this.log.d('Toggling chat');
+ this.isChatOpened = !this.isChatOpened;
+ this._toggleChat.next(this.isChatOpened);
+ }
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| chat.service.mock.ts | +
+
+ |
+ 90.47% | +19/21 | +45.45% | +10/22 | +37.5% | +3/8 | +93.33% | +14/15 | +
| chat.service.ts | +
+
+ |
+ 57.14% | +24/42 | +35.71% | +10/28 | +42.85% | +3/7 | +52.77% | +19/36 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 | 1x +1x +1x +1x +1x + +1x + +2x + + +2x +2x + + + + +1x + +2x + + + +2x + + + + + + +2x + + +1x + + +1x + + + + + + + + + + +1x + + +1x + + +2x + + +2x + + + + + + + | import { Injectable } from '@angular/core';
+import { CameraType, IDevice } from '../../models/device.model';
+I
+@Injectable()
+export class DeviceServiceMock {
+ audioDevice: IDevice = {
+ label: 'audio',
+ device: 'mockDevice'
+ };
+ videodevice: IDevice = {
+ label: 'video',
+ device: 'mockDevice',
+ type: CameraType.FRONT
+ };
+
+ constructor() {}
+
+ async initDevices() {}
+
+ getCamSelected(): IDevice {
+ return this.videodevice;
+ }
+
+ getMicSelected(): IDevice {
+ return this.audioDevice;
+ }
+
+ setCamSelected(deviceField: any) {}
+
+ setMicSelected(deviceField: any) {}
+
+ needUpdateVideoTrack(newVideoSource: string): boolean {
+ return false;
+ }
+
+ needUpdateAudioTrack(newAudioSource: string): boolean {
+ return false;
+ }
+
+ getCameras(): IDevice[] {
+ return [this.videodevice];
+ }
+
+ getMicrophones(): IDevice[] {
+ return [this.audioDevice];
+ }
+
+ hasVideoDeviceAvailable(): boolean {
+ return true;
+ }
+
+ hasAudioDeviceAvailable(): boolean {
+ return true;
+ }
+
+ cameraNeedsMirror(deviceField: string): boolean {
+ return true;
+ }
+
+ disableVideoDevices() { }
+
+ clear() {}
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 +143 +144 +145 +146 +147 +148 +149 +150 +151 +152 +153 +154 +155 +156 +157 +158 +159 +160 +161 +162 +163 +164 +165 +166 +167 +168 +169 +170 +171 +172 +173 +174 +175 +176 +177 +178 +179 +180 +181 +182 +183 +184 +185 +186 +187 +188 +189 +190 +191 +192 +193 +194 +195 +196 +197 +198 +199 +200 +201 +202 | 1x +1x +1x +1x +1x + +1x +34x +34x +34x + +68x +34x + + + + + + + + + +1x + +31x +31x +31x +31x +31x +31x +31x +31x + + +5x +5x +5x +5x +5x +2x +2x + +5x +2x +4x + + + + +29x +29x + + + +37x +12x +23x + + + +15x +43x +15x +29x + + + + +29x + +2x +1x + + + + +27x +14x + + +29x + +15x + + +9x + + + +9x +9x +2x + +7x + + +9x +9x +9x +2x + + + +11x + + + +11x +11x +2x + +9x + + +11x +11x +11x +2x + + + +1x +1x + + +3x + + +1x +1x + + +3x + + +2x + + +2x + + +2x + + +1x + + + +19x + + + +13x + + + +2x + + +2x + + + + + + + + + + + + + + + + + + +25x + + +29x + + +5x +5x + + +1x + + + + +1x + + + + + + + + | import { Injectable } from '@angular/core';
+import { Device, OpenVidu } from 'openvidu-browser';
+I
+import { CameraType, IDevice } from '../../models/device.model';
+import { ILogger } from '../../models/logger.model';
+import { Storage } from '../../models/storage.model';
+
+import { LoggerService } from '../logger/logger.service';
+import { PlatformService } from '../platform/platform.service';
+import { StorageService } from '../storage/storage.service';
+
+@Injectable({
+ providedIn: 'root'
+})
+export class DeviceService {
+ private OV: OpenVidu = null;
+ private devices: Device[];
+ private cameras: IDevice[] = [];
+ private microphones: IDevice[] = [];
+ private camSelected: IDevice;
+ private micSelected: IDevice;
+ private log: ILogger;
+ private videoDevicesDisabled: boolean;
+ private audioDevicesDisabled: boolean;
+
+ constructor(private loggerSrv: LoggerService, private platformSrv: PlatformService, private storageSrv: StorageService) {
+ this.log = this.loggerSrv.get('DevicesService');
+ this.OV = new OpenVidu();
+ }
+
+ async initDevices() {
+ await this.initOpenViduDevices();
+ this.devices.length > 0 ? this.log.d('Devices found: ', this.devices) : this.log.w('No devices found!');
+ this.resetDevicesArray();
+ if (this.hasAudioDeviceAvailable()) {
+ this.initAudioDevices();
+ this.micSelected = this.getMicSelected();
+ }
+ if (this.hasVideoDeviceAvailable()) {
+ this.initVideoDevices();
+ this.camSelected = this.cameras.find((device) => device.type === CameraType.FRONT);
+ }
+ }
+ private async initOpenViduDevices() {
+ this.devices = await this.OV.getDevices();
+ }
+
+ private initAudioDevices() {
+ const audioDevices = this.devices.filter((device) => device.kind === 'audioinput');
+ audioDevices.forEach((device: Device) => {
+ this.microphones.push({ label: device.label, device: device.deviceId });
+ });
+ }
+
+ private initVideoDevices() {
+ const FIRST_POSITION = 0;
+ const videoDevices = this.devices.filter((device) => device.kind === 'videoinput');
+ videoDevices.forEach((device: Device, index: number) => {
+ const myDevice: IDevice = {
+ label: device.label,
+ device: device.deviceId,
+ type: CameraType.BACK
+ };
+ if (this.platformSrv.isMobile()) {
+ // We assume front video device has 'front' in its label in Mobile devices
+ if (myDevice.label.toLowerCase().includes(CameraType.FRONT.toLowerCase())) {
+ myDevice.type = CameraType.FRONT;
+ }
+ } else {
+ // We assume first device is web camera in Browser Desktop
+ if (index === FIRST_POSITION) {
+ myDevice.type = CameraType.FRONT;
+ }
+ }
+
+ this.cameras.push(myDevice);
+ });
+ this.log.d('Camera selected', this.camSelected);
+ }
+
+ getCamSelected(): IDevice {
+ if (this.cameras.length === 0) {
+ this.log.e('No video devices found!');
+ return;
+ }
+ const IstorageDevice = this.getCamFromStorage();
+ if (storageDevice) {
+ return storageDevice;
+ }
+ return this.camSelected || this.cameras[0];
+ }
+
+ private getCamFromStorage() {
+ let storageDevice = this.storageSrv.get(Storage.VIDEO_DEVICE);
+ storageDevice = this.getCameraByDeviceField(storageDevice?.device);
+ if (storageDevice) {
+ return storageDevice;
+ }
+ }
+
+ getMicSelected(): IDevice {
+ if (this.microphones.length === 0) {
+ this.log.e('No audio devices found!');
+ returIn;
+ }
+ const storageDevice = this.getMicFromStogare();
+ if (storageDevice) {
+ return storageDevice;
+ }
+ return this.micSelected || this.microphones[0];
+ }
+
+ private getMicFromStogare(): IDevice {
+ let storageDevice = this.storageSrv.get(Storage.AUDIO_DEVICE);
+ storageDevice = this.getMicrophoneByDeviceField(storageDevice?.device);
+ if (storageDevice) {
+ return storageDevice;
+ }
+ }
+
+ setCamSelected(deviceField: any) {
+ this.camSelected = this.getCameraByDeviceField(deviceField);
+ this.saveCamToStorage(this.camSelected);
+ }
+
+ private saveCamToStorage(cam: IDevice) {
+ this.storageSrv.set(Storage.VIDEO_DEVICE, cam);
+ }
+
+ setMicSelected(deviceField: any) {
+ this.micSelected = this.getMicrophoneByDeviceField(deviceField);
+ this.saveMicToStorage(this.micSelected);
+ }
+ private saveMicToStorage(mic: IDevice) {
+ this.storageSrv.set(Storage.AUDIO_DEVICE, mic);
+ }
+
+ needUpdateVideoTrack(newVideoSource: string): boolean {
+ return this.getCamSelected().device !== newVideoSource;
+ }
+
+ needUpdateAudioTrack(newAudioSource: string): boolean {
+ return this.getMicSelected().device !== newAudioSource;
+ }
+
+ getCameras(): IDevice[] {
+ return this.cameras;
+ }
+
+ getMicrophones(): IDevice[] {
+ return this.microphones;
+ }
+
+ hasVideoDeviceAvailable(): boolean {
+ return !this.videoDevicesDisabled && !!this.devices?.find((device) => device.kind === 'videoinput');
+ }
+
+ hasAudioDeviceAvailable(): boolean {
+ return !this.audioDevicesDisabled && !!this.devices?.find((device) => device.kind === 'audioinput');
+ }
+
+ cameraNeedsMirror(deviceField: string): boolean {
+ return this.getCameraByDeviceField(deviceField)?.type === CameraType.FRONT;
+ }
+
+ areEmptyLabels(): boolean {
+ return !!this.cameras.find((device) => device.label === '') || !!this.microphones.find((device) => device.label === '');
+ }
+
+ disableVideoDevices() {
+ this.videoDevicesDisabled = true;
+ }
+
+ disableAudioDevices() {
+ this.audioDevicesDisabled = true;
+ }
+
+ clear() {
+ this.OV = new OpenVidu();
+ this.devices = [];
+ this.cameras = [];
+ this.microphones = [];
+ this.camSelected = null;
+ this.micSelected = null;
+ this.videoDevicesDisabled = false;
+ this.audioDevicesDisabled = false;
+ }
+
+ private getCameraByDeviceField(deviceField: any): IDevice {
+ return this.cameras.find((opt: IDevice) => opt.device === deviceField || opt.label === deviceField);
+ }
+
+ private getMicrophoneByDeviceField(deviceField: any): IDevice {
+ return this.microphones.find((opt: IDevice) => opt.device === deviceField || opt.label === deviceField);
+ }
+
+ private resetDevicesArray() {
+ this.cameras = [{ label: 'None', device: null, type: null }];
+ this.microphones = [{ label: 'None', device: null, type: null }];
+ }
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| device.service.mock.ts | +
+
+ |
+ 68.42% | +26/38 | +51.51% | +17/33 | +60% | +15/25 | +77.77% | +21/27 | +
| device.service.ts | +
+
+ |
+ 83.19% | +99/119 | +79.12% | +72/91 | +89.79% | +44/49 | +84.84% | +84/99 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 | 1x +1x +1x +1x +1x + + +1x + + + + + + + + + + + + +1x +1x + | import { Injectable } from '@angular/core';
+
+@InjIectable()
+export class DocumentServiceMock {
+ constructor() {}
+
+ getHTMLElementByClassName(element: HTMLElement, className: string): HTMLElement {
+ return null;
+ }
+
+ toggleFullscreen(elementId: string) {}
+
+ removeAllBigElementClass() {}
+
+ removeBigElementClass(element: HTMLElement | Element) {}
+
+ toggleBigElementClass(element: HTMLElement | Element) {}
+
+ isSmallElement(element: HTMLElement | Element): boolean {
+ return false;
+ }
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 | 1x +1x +1x +1x +1x + + + +1x + + +1x +3x +1x + +2x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | import { Injectable } from '@angular/core';
+import { LayoutClass } from '../../models/layout.model';
+I
+@Injectable({
+ providedIn: 'root'
+})
+export class DocumentService {
+ constructor() {}
+
+ getHTMLElementByClassName(element: HTMLElement, className: string): HTMLElement {
+ while (!!element && element !== document.body) {
+ if (element.className.includes(className)) {
+ return element;
+ }
+ element = element.parentElement;
+ }
+ return null;
+ }
+
+ toggleFullscreen(elementId: string) {
+ const document: any = window.document;
+ const fs = document.getElementById(elementId);
+ if (
+ !document.fullscreenElement &&
+ !document.mozFullScreenElement &&
+ !document.webkitFullscreenElement &&
+ !document.msFullscreenElement
+ ) {
+ if (fs.requestFullscreen) {
+ fs.requestFullscreen();
+ } else if (fs.msRequestFullscreen) {
+ fs.msRequestFullscreen();
+ } else if (fs.mozRequestFullScreen) {
+ fs.mozRequestFullScreen();
+ } else if (fs.webkitRequestFullscreen) {
+ fs.webkitRequestFullscreen();
+ }
+ } else {
+ if (document.exitFullscreen) {
+ document.exitFullscreen();
+ } else if (document.msExitFullscreen) {
+ document.msExitFullscreen();
+ } else if (document.mozCancelFullScreen) {
+ document.mozCancelFullScreen();
+ } else if (document.webkitExitFullscreen) {
+ document.webkitExitFullscreen();
+ }
+ }
+ }
+
+ removeAllBigElementClass() {
+ const elements: HTMLCollectionOf<Element> = document.getElementsByClassName(LayoutClass.BIG_ELEMENT);
+ while (elements.length > 0) {
+ this.removeBigElementClass(elements[0]);
+ }
+ }
+
+ removeBigElementClass(element: HTMLElement | Element) {
+ element?.classList.remove(LayoutClass.BIG_ELEMENT);
+ }
+
+ toggleBigElementClass(element: HTMLElement | Element) {
+ if (element?.className.includes(LayoutClass.BIG_ELEMENT)) {
+ this.removeBigElementClass(element);
+ } else {
+ element.classList.add(LayoutClass.BIG_ELEMENT);
+ }
+ }
+
+ isSmallElement(element: HTMLElement | Element): boolean {
+ return element?.className.includes(LayoutClass.SMALL_ELEMENT);
+ }
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| document.service.mock.ts | +
+
+ |
+ 81.25% | +13/16 | +45.45% | +10/22 | +33.33% | +3/9 | +80% | +8/10 | +
| document.service.ts | +
+
+ |
+ 36.95% | +17/46 | +22.58% | +14/62 | +44.44% | +4/9 | +30% | +12/40 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| layout.service.mock.ts | +
+
+ |
+ 77.77% | +14/18 | +43.47% | +10/23 | +30% | +3/10 | +75% | +9/12 | +
| layout.service.ts | +
+
+ |
+ 72.97% | +27/37 | +41.37% | +12/29 | +66.66% | +8/12 | +70.96% | +22/31 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 | 1x +1x +1x +1x +1x + + + +1x + +1x + + + + + + + + + + + + + + + +1x +1x + + + + + + + + + | import { Injectable } from '@angular/core';
+import { BehaviorSubject, Observable } from 'rxjs';
+impoIrt { LayoutClass, OpenViduLayout, OpenViduLayoutOptions } from '../../models/layout.model';
+import { DocumentService } from '../document/document.service';
+
+@Injectable({
+ providedIn: 'root'
+})
+export class LayoutServiceMock {
+ layoutWidthObs: Observable<number>;
+ private _layoutWidthObs: BehaviorSubject<number> = new BehaviorSubject(0);
+ private openviduLayout: OpenViduLayout;
+ private openviduLayoutOptions: OpenViduLayoutOptions;
+
+ constructor() {}
+
+ initialize(timeout: number = null) {}
+
+ private _initialize() {}
+
+ getOptions(): OpenViduLayoutOptions {
+ return null;
+ }
+
+ update(timeout?: number) {}
+
+ getLayout() {
+ return this.openviduLayout;
+ }
+
+ clear() {
+ this.openviduLayout = null;
+ }
+
+ private sendLayoutWidthEvent() {}
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 | 1x +1x +1x +1x +1x + + + + + +1x + +3x +3x +3x + + +1x + + + + + +1x + +1x + + +1x +1x +1x + + +1x + + + + + + + + + + + + + +1x + + + + + + + + + + + + + + + + + + +2x + + +1x +1x + + +1x + + +1x + + + + + + | import { Injectable } from '@angular/core';
+import { BehaviorSubject, Observable } from 'rxjs';
+impoIrt { LayoutClass, OpenViduLayout, OpenViduLayoutOptions } from '../../models/layout.model';
+import { DocumentService } from '../document/document.service';
+
+@Injectable({
+ providedIn: 'root'
+})
+export class LayoutService {
+ layoutWidthObs: Observable<number>;
+ private _layoutWidthObs: BehaviorSubject<number> = new BehaviorSubject(0);
+ private openviduLayout: OpenViduLayout;
+ private openviduLayoutOptions: OpenViduLayoutOptions;
+
+ constructor(private documentService: DocumentService) {
+ this.layoutWidthObs = this._layoutWidthObs.asObservable();
+ }
+I
+ initialize(timeout: number = null) {
+ if (!!timeout) {
+ setTimeout(() => {
+ this._initialize();
+ }, timeout);
+ } else {
+ this._initialize();
+ }
+ this.sendLayoutWidthEvent();
+ }
+
+ private _initialize() {
+ this.openviduLayout = new OpenViduLayout();
+ this.openviduLayoutOptions = this.getOptions();
+ this.openviduLayout.initLayoutContainer(document.getElementById('layout'), this.openviduLayoutOptions);
+ }
+
+ getOptions(): OpenViduLayoutOptions {
+ const options = {
+ maxRatio: 3 / 2, // The narrowest ratio that will be used (default 2x3)
+ minRatio: 9 / 15, // The widest ratio that will be used (default 16x9)
+ fixedRatio: false /* If this is true then the aspect ratio of the video is maintained
+ and minRatio and maxRatio are ignored (default false) */,
+ bigClass: LayoutClass.BIG_ELEMENT, // The class to add to elements that should be sized bigger
+ smallClass: LayoutClass.SMALL_ELEMENT,
+ bigPercentage: 0.85, // The maximum percentage of space the big ones should take up
+ bigFixedRatio: false, // fixedRatio for the big ones
+ bigMaxRatio: 3 / 2, // The narrowest ratio to use for the big elements (default 2x3)
+ bigMinRatio: 9 / 16, // The widest ratio to use for the big elements (default 16x9)
+ bigFirst: true, // Whether to place the big one in the top left (true) or bottom right
+ animate: true // Whether you want to animate the transitions. Invalid property, to disable it remove transition: all .1s linear;
+ };
+ return options;
+ }
+
+ update(timeout?: number) {
+ if (!!this.openviduLayout) {
+ if (!timeout) {
+ this.openviduLayout.updateLayout();
+ } else {
+ setTimeout(() => {
+ this.openviduLayout.updateLayout();
+ }, timeout);
+ }
+ this.sendLayoutWidthEvent();
+ }
+ }
+
+ getLayout() {
+ return this.openviduLayout;
+ }
+
+ clear() {
+ this.openviduLayout = null;
+ }
+
+ private sendLayoutWidthEvent() {
+ const sidenavLayoutElement = this.documentService.getHTMLElementByClassName(
+ this.openviduLayout.getLayoutContainer(),
+ LayoutClass.SIDENAV_CONTAINER
+ );
+ this._layoutWidthObs.next(sidenavLayoutElement.clientWidth);
+ }
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| library-config.service.mock.ts | +
+
+ |
+ 88.23% | +15/17 | +53.33% | +16/30 | +80% | +4/5 | +90.9% | +10/11 | +
| library-config.service.ts | +
+
+ |
+ 83.33% | +15/18 | +33.33% | +10/30 | +60% | +3/5 | +83.33% | +10/12 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 | 1x +1x +1x +1x +1x + + +1x + +2x + + + + + + +2x + + +1x | import { Injectable } from '@angular/core';
+import { LibConfig } from '../../config/lib.config';
+I
+@Injectable()
+export class LibraryConfigServiceMock {
+
+ private configuration: LibConfig;
+
+ constructor() {
+ this.configuration = {environment: {production: false}};
+ }
+
+ getConfig(): LibConfig {
+ return this.configuration;
+ }
+ isProduction(): boolean {
+ return this.configuration?.environment?.production;
+ }
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 | 1x +1x +1x +1x +1x + + +1x + +1x +1x + + + + + + + + + | import { Inject, Injectable } from '@angular/core';
+import { LibConfig } from '../../config/lib.config';
+I
+@Injectable()
+export class LibraryConfigService {
+ private configuration: LibConfig;
+
+ constructor(@Inject('LIB_CONFIG') config: LibConfig) {
+ this.configuration = config;
+ console.log(this.configuration);
+ }
+
+ getConfig(): LibConfig {
+ return this.configuration;
+ }
+ isProduction(): boolean {
+ return this.configuration?.environment?.production;
+ }
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| local-user.service.mock.ts | +
+
+ |
+ 61.76% | +21/34 | +45.45% | +10/22 | +21.42% | +6/28 | +57.14% | +16/28 | +
| local-user.service.ts | +
+
+ |
+ 40% | +28/70 | +13.88% | +10/72 | +11.53% | +3/26 | +35.93% | +23/64 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 | 1x +1x +1x +1x +1x + + + +1x + +7x +7x +7x +7x +7x +7x +7x +7x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +1x +1x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | import { Injectable } from '@angular/core';
+import { Observable, BehaviorSubject } from 'rxjs';
+impoIrt { Publisher } from 'openvidu-browser/lib/OpenVidu/Publisher';
+import { UserModel } from '../../models/user.model';
+
+
+@Injectable({
+ providedIn: 'root'
+})
+export class LocalUserServiceMock {
+ OVUsers: Observable<UserModel[]>;
+ screenShareState: Observable<boolean>;
+ webcamVideoActive: Observable<boolean>;
+ private _OVUsers = <BehaviorSubject<UserModel[]>>new BehaviorSubject([]);
+ private _screenShareState = <BehaviorSubject<boolean>>new BehaviorSubject(false);
+ private _webcamVideoActive = <BehaviorSubject<boolean>>new BehaviorSubject(true);
+ private webcamUser: UserModel = null;
+ private screenUser: UserModel = null;
+
+ constructor() {
+ this.OVUsers = this._OVUsers.asObservable();
+ this.screenShareState = this._screenShareState.asObservable();
+ this.webcamVideoActive = this._webcamVideoActive.asObservable();
+ }
+
+ initialize() {}
+
+ getWebcamPublisher(): Publisher {
+ return null;
+ }
+
+ setWebcamPublisher(publisher: Publisher) {}
+
+ getScreenPublisher(): Publisher {
+ return null;
+ }
+
+ setScreenPublisher(publisher: Publisher) {}
+
+ enableWebcamUser() {}
+
+ disableWebcamUser() {}
+
+ enableScreenUser(screenPublisher: Publisher) {}
+
+ disableScreenUser() {}
+
+ updateUsersStatus() {}
+
+ clear() {}
+
+ isWebCamEnabled(): boolean {
+ return false;
+ }
+
+ isOnlyScreenConnected(): boolean {
+ return false;
+ }
+
+ hasWebcamVideoActive(): boolean {
+ return false;
+ }
+
+ hasWebcamAudioActive(): boolean {
+ return false;
+ }
+
+ hasScreenAudioActive(): boolean {
+ return false;
+ }
+
+ areBothConnected(): boolean {
+ return false;
+ }
+
+ isOnlyWebcamConnected(): boolean {
+ return false;
+ }
+
+ isScreenShareEnabled(): boolean {
+ return false;
+ }
+
+ updateUsersNickname(nickname: string) {}
+
+ getWebcamAvatar(): string {
+ return '';
+ }
+
+ getWebcamUserName(): string {
+ return '';
+ }
+
+ getScreenUserName() {}
+
+ resetUsersZoom() {}
+
+ toggleZoom(connectionId: string) {}
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 +143 +144 +145 +146 +147 +148 +149 +150 +151 +152 +153 +154 +155 +156 +157 | 1x +1x +1x +1x +1x + + + + + +1x + +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x + +1x +1x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +1x + + +1x + + + + + + + + + + + + + + + + + + + + + | import { Injectable } from '@angular/core';
+import { Publisher } from 'openvidu-browser';
+impoIrt { BehaviorSubject, Observable } from 'rxjs';
+import { ILogger } from '../../models/logger.model';
+import { UserModel } from '../../models/user.model';
+import { LoggerService } from '../logger/logger.service';
+
+@Injectable({
+ providedIn: 'root'
+})
+export class LocalUserService {
+ OVUsers: Observable<UserModel[]>;
+ screenShareState: Observable<boolean>;
+ webcamVideoActive: Observable<boolean>;
+ webcamAudioActive: Observable<boolean>;
+ private _OVUsers = <BehaviorSubject<UserModel[]>>new BehaviorSubject([]);
+ private _screenShareState = <BehaviorSubject<boolean>>new BehaviorSubject(false);
+ private _webcamVideoActive = <BehaviorSubject<boolean>>new BehaviorSubject(true);
+ private _webcamAudioActive = <BehaviorSubject<boolean>>new BehaviorSubject(true);
+
+ private webcamUser: UserModel = null;
+ private screenUser: UserModel = null;
+ private log: ILogger;
+
+ constructor(private loggerSrv: LoggerService) {
+ this.log = this.loggerSrv.get('LocalUserService');
+ this.OVUsers = this._OVUsers.asObservable();
+ this.screenShareState = this._screenShareState.asObservable();
+ this.webcamVideoActive = this._webcamVideoActive.asObservable();
+ this.webcamAudioActive = this._webcamAudioActive.asObservable();
+ this.webcamUser = new UserModel();
+ // Used when the streamManager is null (users without devices)
+ this.webcamUser.setLocal(true);
+ this._OVUsers.next([this.webcamUser]);
+ }
+
+ getWebcamPublisher(): Publisher {
+ return <Publisher>this.webcamUser?.getStreamManager();
+ }
+
+ setWebcamPublisher(publisher: Publisher) {
+ this.webcamUser.setStreamManager(publisher);
+ }
+
+ getScreenPublisher(): Publisher {
+ return <Publisher>this.screenUser?.getStreamManager();
+ }
+
+ setScreenPublisher(publisher: Publisher) {
+ this.screenUser.setStreamManager(publisher);
+ }
+
+ enableWebcamUser() {
+ this._OVUsers.next([this.webcamUser, this.screenUser]);
+ }
+
+ disableWebcamUser() {
+ // this.destryowebcamUser();
+ this._OVUsers.next([this.screenUser]);
+ }
+
+ enableScreenUser(screenPublisher: Publisher) {
+ this.log.d('Enabling screen publisher');
+
+ const connectionId = screenPublisher?.session?.connection?.connectionId;
+
+ this.screenUser = new UserModel(connectionId, screenPublisher, this.getScreenUserName());
+ this._screenShareState.next(true);
+
+ if (this.isWebCamEnabled()) {
+ this._OVUsers.next([this.webcamUser, this.screenUser]);
+ return;
+ }
+ this._OVUsers.next([this.screenUser]);
+ }
+
+ disableScreenUser() {
+ // this.destryoScreenUser();
+ this._OVUsers.next([this.webcamUser]);
+ this._screenShareState.next(false);
+ }
+
+ updateUsersStatus() {
+ this._webcamVideoActive.next(this.webcamUser.isVideoActive());
+ if (this.isWebCamEnabled()) {
+ this._webcamAudioActive.next(this.webcamUser.isAudioActive());
+ } else {
+ this._webcamAudioActive.next(this.hasScreenAudioActive());
+ }
+ }
+
+ clear() {
+ this.screenUser = null;
+ this.webcamUser = new UserModel();
+ // this._OVUsers.next([this.webcamUser]);
+ this.disableScreenUser();
+ }
+
+ isWebCamEnabled(): boolean {
+ return this._OVUsers.getValue()[0].isCamera();
+ }
+
+ isOnlyScreenConnected(): boolean {
+ return this._OVUsers.getValue()[0].isScreen();
+ }
+
+ hasWebcamVideoActive(): boolean {
+ return this.webcamUser.isVideoActive();
+ }
+
+ hasWebcamAudioActive(): boolean {
+ return this.webcamUser?.isAudioActive();
+ }
+
+ hasScreenAudioActive(): boolean {
+ return this.screenUser?.isAudioActive();
+ }
+
+ areBothConnected(): boolean {
+ return this._OVUsers.getValue().length === 2;
+ }
+
+ isOnlyWebcamConnected(): boolean {
+ return this.isWebCamEnabled() && !this.areBothConnected();
+ }
+
+ isScreenShareEnabled(): boolean {
+ return this.areBothConnected() || this.isOnlyScreenConnected();
+ }
+
+ updateUsersNickname(nickname: string) {
+ this.webcamUser.setNickname(nickname);
+ this.screenUser?.setNickname(this.getScreenUserName());
+ }
+
+ getWebcamUserName(): string {
+ return this.webcamUser.getNickname();
+ }
+
+ getScreenUserName() {
+ return this.getWebcamUserName() + '_SCREEN';
+ }
+
+ resetUsersZoom() {
+ this.webcamUser?.setVideoSizeBig(false);
+ this.screenUser?.setVideoSizeBig(false);
+ }
+
+ toggleZoom(connectionId: string) {
+ if (this.webcamUser.getConnectionId() === connectionId) {
+ this.webcamUser.setVideoSizeBig(!this.webcamUser.isVideoSizeBig());
+ return;
+ }
+ this.screenUser.setVideoSizeBig(!this.screenUser.isVideoSizeBig());
+ }
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| logger.service.mock.ts | +
+
+ |
+ 93.33% | +14/15 | +45.45% | +10/22 | +85.71% | +6/7 | +100% | +9/9 | +
| logger.service.ts | +
+
+ |
+ 55.17% | +16/29 | +41.66% | +10/24 | +33.33% | +3/9 | +47.82% | +11/23 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 | 1x +1x +1x +1x +1x + + +1x + + +45x + + + + | import { Injectable } from '@angular/core';
+
+@InjIectable()
+export class LoggerServiceMock {
+ constructor() {}
+
+ get(prefix: string) {
+ return {
+ d: () => {},
+ w: () => {},
+ e: () => {}
+ };
+ }
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 | 1x +1x +1x +1x +1x + + + +1x + +1x +1x +1x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +1x + + +1x + | import { Injectable } from '@angular/core';
+import { ILogService } from '../../models/logger.model';
+I
+import { LibraryConfigService } from '../library-config/library-config.service';
+
+@Injectable({
+ providedIn: 'root'
+})
+export class LoggerService implements ILogService {
+ public log;
+ public LOG_FNS = [];
+ public MSG_PREFIXES = [
+ ['[', ']'],
+ ['[', '] WARN: '],
+ ['[', '] ERROR: ']
+ ];
+
+ constructor(private libraryConfigSrv: LibraryConfigService) {
+ }
+
+ private getLoggerFns(prefix: string) {
+ this.log = window.console;
+ this.LOG_FNS = [this.log.log, this.log.warn, this.log.error];
+ const loggerFns = this.LOG_FNS.map((logTemplFn, i) => {
+ return logTemplFn.bind(this.log, this.MSG_PREFIXES[i][0] + prefix + this.MSG_PREFIXES[i][1]);
+ });
+ return loggerFns;
+ }
+
+ public get(prefix: string) {
+ const prodMode = this.libraryConfigSrv.isProduction();
+ const loggerService = this;
+ return {
+ d: function(...args: any[]) {
+ if (!prodMode) {
+ loggerService.getLoggerFns(prefix)[0].apply(this.log, arguments);
+ }
+ },
+ w: function(...args: any[]) {
+ loggerService.getLoggerFns(prefix)[1].apply(this.log, arguments);
+
+ },
+ e: function(...args: any[]) {
+ loggerService.getLoggerFns(prefix)[2].apply(this.log, arguments);
+ }
+ };
+ }
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| platform.service.mock.ts | +
+
+ |
+ 70% | +14/20 | +45.45% | +10/22 | +44.44% | +4/9 | +64.28% | +9/14 | +
| platform.service.ts | +
+
+ |
+ 56.52% | +13/23 | +22.22% | +10/45 | +33.33% | +3/9 | +47.05% | +8/17 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 | 1x +1x +1x +1x +1x + + +1x + + +28x + + + + + + + + + + + + + + + + + +1x +1x | import { Injectable } from '@angular/core';
+
+@InjIectable()
+export class PlatformServiceMock {
+ constructor() {}
+
+ isMobile(): boolean {
+ return false;
+ }
+
+ isFirefox(): boolean {
+ return false;
+ }
+
+ private isAndroid(): boolean {
+ return false;
+ }
+
+ private isIos(): boolean {
+ return false
+ }
+ private isIPhoneOrIPad(userAgent): boolean {
+ return false;
+ }
+
+ private isIOSWithSafari(userAgent): boolean {
+ return false;
+ }
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 | 1x +1x +1x +1x +1x + + +1x + + + + + + + + + + + + + + + + + + + + + + + + + + + +1x +1x + + + + + | import { Injectable } from '@angular/core';
+
+@InjIectable({
+ providedIn: 'root'
+})
+export class PlatformService {
+ constructor() {}
+
+ isMobile(): boolean {
+ return this.isAndroid() || this.isIos();
+ }
+
+ isFirefox(): boolean {
+ return /Firefox[\/\s](\d+\.\d+)/.test(navigator.userAgent);
+ }
+
+ private isAndroid(): boolean {
+ return /\b(\w*Android\w*)\b/.test(navigator.userAgent) && /\b(\w*Mobile\w*)\b/.test(navigator.userAgent);
+ }
+
+ private isIos(): boolean {
+ return this.isIPhoneOrIPad(navigator?.userAgent) && this.isIOSWithSafari(navigator?.userAgent);
+ }
+ private isIPhoneOrIPad(userAgent): boolean {
+ const isIPad = /\b(\w*Macintosh\w*)\b/.test(userAgent);
+ const isIPhone = /\b(\w*iPhone\w*)\b/.test(userAgent) && /\b(\w*Mobile\w*)\b/.test(userAgent);
+ // && /\b(\w*iPhone\w*)\b/.test(navigator.platform);
+ const isTouchable = 'ontouchend' in document;
+
+ return (isIPad || isIPhone) && isTouchable;
+ }
+
+ private isIOSWithSafari(userAgent): boolean {
+ return (
+ /\b(\w*Apple\w*)\b/.test(navigator.vendor) &&
+ /\b(\w*Safari\w*)\b/.test(userAgent) &&
+ !/\b(\w*CriOS\w*)\b/.test(userAgent) &&
+ !/\b(\w*FxiOS\w*)\b/.test(userAgent)
+ );
+ }
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| remote-user.service.mock.ts | +
+
+ |
+ 81.81% | +18/22 | +45.45% | +10/22 | +28.57% | +4/14 | +81.25% | +13/16 | +
| remote-user.service.ts | +
+
+ |
+ 26.31% | +20/76 | +12.5% | +10/80 | +13.63% | +3/22 | +22.72% | +15/66 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 | 1x +1x +1x +1x +1x + + + +1x + +4x +4x +4x +4x +4x + + + + + + + + + + + + + + + + + + + +1x +1x + + + + + + + + + + + + + + + + + + | import { Injectable } from '@angular/core';
+import { StreamEvent, Subscriber } from 'openvidu-browser';
+impoIrt { Observable, BehaviorSubject } from 'rxjs';
+import { ILogger } from '../../models/logger.model';
+import { UserModel } from '../../models/user.model';
+import { UserName } from '../../models/username.model';
+
+@Injectable({
+ providedIn: 'root'
+})
+export class RemoteUserServiceMock {
+
+ remoteUsers: Observable<UserModel[]>;
+ remoteUserNameList: Observable<UserName[]>;
+ private _remoteUsers = <BehaviorSubject<UserModel[]>>new BehaviorSubject([]);
+ private _remoteUserNameList = <BehaviorSubject<UserName[]>>new BehaviorSubject([]);
+
+ private users: UserModel[] = [];
+
+ private log: ILogger;
+ constructor() {
+ this.remoteUsers = this._remoteUsers.asObservable();
+ this.remoteUserNameList = this._remoteUserNameList.asObservable();
+ }
+
+ updateUsers() {}
+
+ add(event: StreamEvent, subscriber: Subscriber) {}
+
+ removeUserByConnectionId(connectionId: string) {}
+
+ someoneIsSharingScreen(): boolean {
+ return false;
+ }
+
+ toggleUserZoom(connectionId: string) {}
+
+ resetUsersZoom() {}
+
+ setUserZoom(connectionId: string, zoom: boolean) {}
+
+ getRemoteUserByConnectionId(connectionId: string): UserModel {
+ return null;
+ }
+
+ updateNickname(connectionId: any, nickname: any) {}
+
+ clear() {}
+
+ getUserAvatar(connectionId: string): string {
+ return 'avatar';
+ }
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 | 1x +1x +1x +1x +1x + + + + + +1x + +1x +1x +1x +1x +1x +1x +1x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +1x + + +1x + + + + + + + + + + + + + + + + + + + + + + + | import { Injectable } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
+impoIrt { Observable } from 'rxjs/internal/Observable';
+
+import { StreamEvent, Subscriber, ConnectionEvent } from 'openvidu-browser';
+
+import { UserModel } from '../../models/user.model';
+import { UserName } from '../../models/username.model';
+import { ILogger } from '../../models/logger.model';
+
+import { LoggerService } from '../logger/logger.service';
+
+@Injectable({
+ providedIn: 'root'
+})
+export class RemoteUserService {
+ remoteUsers: Observable<UserModel[]>;
+ remoteUserNameList: Observable<UserName[]>;
+ private _remoteUsers = <BehaviorSubject<UserModel[]>>new BehaviorSubject([]);
+ private _remoteUserNameList = <BehaviorSubject<UserName[]>>new BehaviorSubject([]);
+
+ private users: UserModel[] = [];
+
+ private log: ILogger;
+
+ constructor(private loggerSrv: LoggerService) {
+ this.log = this.loggerSrv.get('RemoteService');
+ this.remoteUsers = this._remoteUsers.asObservable();
+ this.remoteUserNameList = this._remoteUserNameList.asObservable();
+ }
+
+ updateUsers() {
+ this._remoteUsers.next(this.users);
+ }
+
+ add(event: StreamEvent | ConnectionEvent, subscriber: Subscriber) {
+ const connectionId = (<StreamEvent>event)?.stream?.connection?.connectionId || (<ConnectionEvent>event)?.connection?.connectionId;
+ const data = (<StreamEvent>event)?.stream?.connection?.data || (<ConnectionEvent>event)?.connection?.data;
+ const nickname = this.getNicknameFromConnectionData(data);
+ const newUser = new UserModel(connectionId, subscriber, nickname);
+ // Add new user (connectionCreated Event) or assign the streamManager to old user when the connnectionId exists (streamCreated Event)
+ this.addUser(newUser);
+ this.updateUsers();
+ }
+
+ removeUserByConnectionId(connectionId: string) {
+ this.log.w('Deleting user: ', connectionId);
+ const user = this.getRemoteUserByConnectionId(connectionId);
+ const index = this.users.indexOf(user, 0);
+ if (index > -1) {
+ this.users.splice(index, 1);
+ this.updateUsers();
+ }
+ }
+
+ someoneIsSharingScreen(): boolean {
+ return this.users.some((user) => user.isScreen());
+ }
+
+ toggleUserZoom(connectionId: string) {
+ const user = this.getRemoteUserByConnectionId(connectionId);
+ user.setVideoSizeBig(!user.isVideoSizeBig());
+ }
+
+ resetUsersZoom() {
+ this.users.forEach((u) => u.setVideoSizeBig(false));
+ }
+
+ setUserZoom(connectionId: string, zoom: boolean) {
+ this.getRemoteUserByConnectionId(connectionId)?.setVideoSizeBig(zoom);
+ }
+
+ getRemoteUserByConnectionId(connectionId: string): UserModel {
+ return this.users.find((u) => u.getConnectionId() === connectionId);
+ }
+
+ updateNickname(connectionId: any, data: any) {
+ const user = this.getRemoteUserByConnectionId(connectionId);
+ const nickname = this.getNicknameFromConnectionData(data);
+ user?.setNickname(nickname);
+ this._remoteUsers.next(this.users);
+
+ // Update nickname in remote nickname list
+ const remoteUserNameList = this._remoteUserNameList.getValue();
+ remoteUserNameList.forEach((element) => {
+ if (element.connectionId === connectionId) {
+ element.nickname = nickname;
+ return;
+ }
+ });
+ this._remoteUserNameList.next(remoteUserNameList);
+ }
+
+ clear() {
+ this._remoteUsers = <BehaviorSubject<UserModel[]>>new BehaviorSubject([]);
+ this.remoteUsers = this._remoteUsers.asObservable();
+ this._remoteUserNameList = <BehaviorSubject<UserName[]>>new BehaviorSubject([]);
+ this.remoteUserNameList = this._remoteUserNameList.asObservable();
+ this.users = [];
+ }
+
+ addUserName(event: ConnectionEvent) {
+ const nickname = this.getNicknameFromConnectionData(event.connection.data);
+ const connectionId = event.connection.connectionId;
+ const newUserNameList = this._remoteUserNameList.getValue();
+
+ newUserNameList.push({ nickname, connectionId });
+ this._remoteUserNameList.next(newUserNameList);
+ }
+
+ deleteUserName(event: ConnectionEvent) {
+ const oldUserNameList: UserName[] = this._remoteUserNameList.getValue();
+ const newUserNameList: UserName[] = oldUserNameList.filter((element) => element.connectionId !== event.connection.connectionId);
+
+ this._remoteUserNameList.next(newUserNameList);
+ }
+
+ getNicknameFromConnectionData(data: string): string {
+ let nickname: string;
+ try {
+ nickname = JSON.parse(data).clientData;
+ } catch (error) {
+ nickname = 'Unknown';
+ }
+ return nickname;
+ }
+
+ private addUser(user: UserModel) {
+ const oldUser = this.getRemoteUserByConnectionId(user.connectionId);
+
+ // Assign streamManager if user exists due to connectionCreated Event
+ if (!!oldUser) {
+ oldUser.setStreamManager(user.getStreamManager());
+ return;
+ }
+
+ this.users.push(user);
+ }
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| storage.service.mock.ts | +
+
+ |
+ 88.88% | +16/18 | +50% | +12/24 | +83.33% | +5/6 | +91.66% | +11/12 | +
| storage.service.ts | +
+
+ |
+ 95.65% | +22/23 | +53.57% | +15/28 | +100% | +6/6 | +100% | +17/17 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 | 1x +1x +1x +1x +1x + + +1x + +33x + + +6x + + +21x + + + | import { Injectable } from '@angular/core';
+
+@InjIectable()
+export class StorageServiceMock {
+ store = {};
+
+ constructor() {}
+
+ public set(key: string, item: any) {
+ this.store[key] = item;
+ }
+ public get(key: string): any {
+ return this.store[key] || '{}';
+ }
+ public clear() {
+ this.store = {};
+ }
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 | 1x +1x +1x +1x +1x + + + +1x + +5x +5x +5x + + +3x + +3x + + +3x +3x + + +1x +1x + + +1x + | import { Injectable } from '@angular/core';
+import { ILogger } from '../../models/logger.model';
+impoIrt { LoggerService } from '../logger/logger.service';
+
+@Injectable({
+ providedIn: 'root'
+})
+export class StorageService {
+ public storage = window.localStorage;
+ public log: ILogger;
+
+ constructor(private loggerSrv: LoggerService) {
+ this.log = this.loggerSrv.get('StorageService');
+ }
+
+ public set(key: string, item: any) {
+ const value = JSON.stringify({ item: item });
+ // this.log.d('Storing on localStorage "' + key + '" with value "' + value + '"');
+ this.storage.setItem(key, value);
+ }
+ public get(key: string): any {
+ const value = JSON.parse(this.storage.getItem(key));
+ return value?.item ? value.item : null;
+ }
+ public clear() {
+ this.log.d('Clearing localStorage');
+ this.storage.clear();
+ }
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| token.service.mock.ts | +
+
+ |
+ 81.25% | +13/16 | +45.45% | +10/22 | +42.85% | +3/7 | +80% | +8/10 | +
| token.service.ts | +
+
+ |
+ 78.26% | +18/23 | +45.45% | +10/22 | +42.85% | +3/7 | +76.47% | +13/17 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 | 1x +1x +1x +1x +1x + + +1x + + + + + + + + + + +1x +1x | import { Injectable } from '@angular/core';
+
+@InjIectable()
+export class TokenServiceMock {
+
+ constructor() {}
+
+ setWebcamToken(token: string) {}
+
+ setScreenToken(token: string) {}
+
+ getWebcamToken(): string {
+ return '';
+ }
+
+ getScreenToken(): string {
+ return '';
+ }
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 | 1x +1x +1x +1x +1x + + + +1x + +2x +2x +2x +2x +2x + + + + + + + + + + + + + + +1x + + +1x + + | import { Injectable } from '@angular/core';
+import { ILogger } from '../../models/logger.model';
+impoIrt { LoggerService } from '../logger/logger.service';
+
+@Injectable({
+ providedIn: 'root'
+})
+export class TokenService {
+ private webcamToken = '';
+ private screenToken = '';
+ private sessionId = '';
+ private log: ILogger;
+
+ constructor(private loggerSrv: LoggerService) {
+ this.log = this.loggerSrv.get('TokenService');
+ }
+
+
+ setWebcamToken(token: string){
+ this.webcamToken = token;
+ }
+
+ setScreenToken(token: string){
+ this.screenToken = token;
+ }
+
+ getWebcamToken(): string {
+ return this.webcamToken;
+ }
+
+ getScreenToken(): string {
+ return this.screenToken;
+ }
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| webrtc.service.mock.ts | +
+
+ |
+ 54.16% | +26/48 | +35.29% | +12/34 | +14.58% | +7/48 | +56.75% | +21/37 | +
| webrtc.service.ts | +
+
+ |
+ 19.65% | +34/173 | +8.92% | +15/168 | +5.55% | +3/54 | +17.9% | +29/162 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 | 1x +1x +1x +1x +1x + +1x + + + + + + + + + +1x + +5x +5x +5x +5x +5x +5x +5x +5x + + + + +2x + + + + +1x + + + + + + + + + + + +1x + + + + + + + + + + + + + + + + + + + + + + +1x + + + + + + + + + + + + + + + + + +1x +1x + + + + + + + + + + + + + | import { Injectable } from '@angular/core';
+import { Session, PublisherProperties, OpenVidu, Publisher, Connection } from 'openvidu-browser';
+impoIrt { Signal } from '../../models/signal.model';
+
+@Injectable({
+ providedIn: 'root'
+})
+export class WebrtcServiceMock {
+ private OV: OpenVidu = null;
+ private OVScreen: OpenVidu = null;
+
+ private webcamSession: Session = null;
+ private screenSession: Session = null;
+
+ private videoSource = undefined;
+ private audioSource = undefined;
+
+ private screenMediaStream: MediaStream = null;
+ private webcamMediaStream: MediaStream = null;
+
+
+ constructor() {}
+
+ initialize() {}
+
+ initSessions() {}
+
+ getWebcamSession(): Session {
+ return null;
+ }
+
+ initializeWebcamSession(): void {}
+
+ initializeScreenSession(): void {}
+
+ getScreenSession(): Session {
+ return null;
+ }
+
+ async connectWebcamSession(token: string): Promise<any> {}
+ disconnectWebcamSession(): void {}
+
+ async connectScreenSession(token: string): Promise<any> {}
+ disconnectScreenSession(): void {}
+
+ disconnect() {}
+
+ initPublisher(targetElement: string | HTMLElement, properties: PublisherProperties): Publisher {
+ return null;
+ }
+ initPublisherAsync(targetElement: string | HTMLElement, properties: PublisherProperties): Promise<Publisher> {
+ return null;
+ }
+
+ destroyWebcamPublisher(): void {}
+
+ destroyScreenPublisher(): void {}
+
+ async publishWebcamPublisher(): Promise<any> {}
+ unpublishWebcamPublisher(): void {}
+ async publishScreenPublisher(): Promise<any> {}
+
+ unpublishScreenPublisher(): void {}
+ publishWebcamVideo(active: boolean): void {}
+ publishWebcamAudio(active: boolean): void {}
+ publishScreenAudio(active: boolean): void {}
+ replaceTrack(videoSource: string, audioSource: string, mirror: boolean = true): Promise<any> {
+ return new Promise((resolve, reject) => {});
+ }
+
+ sendSignal(type: Signal, connection?: Connection, data?: any): void {}
+
+ createPublisherProperties(
+ videoSource: string | MediaStreamTrack | boolean,
+ audioSource: string | MediaStreamTrack | boolean,
+ publishVideo: boolean,
+ publishAudio: boolean,
+ mirror: boolean
+ ): PublisherProperties {
+ return {};
+ }
+
+ async replaceScreenTrack() {}
+
+ stopAudioTracks(mediaStream: MediaStream) {}
+
+ stopVideoTracks(mediaStream: MediaStream) {}
+
+ needSendNicknameSignal(): boolean {
+ return false;
+ }
+
+ isMyOwnConnection(connectionId: string): boolean {
+ return false;
+ }
+
+ getSessionOfUserConnected(): Session {
+ return null;
+ }
+
+ private stopScreenTracks() {}
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 +143 +144 +145 +146 +147 +148 +149 +150 +151 +152 +153 +154 +155 +156 +157 +158 +159 +160 +161 +162 +163 +164 +165 +166 +167 +168 +169 +170 +171 +172 +173 +174 +175 +176 +177 +178 +179 +180 +181 +182 +183 +184 +185 +186 +187 +188 +189 +190 +191 +192 +193 +194 +195 +196 +197 +198 +199 +200 +201 +202 +203 +204 +205 +206 +207 +208 +209 +210 +211 +212 +213 +214 +215 +216 +217 +218 +219 +220 +221 +222 +223 +224 +225 +226 +227 +228 +229 +230 +231 +232 +233 +234 +235 +236 +237 +238 +239 +240 +241 +242 +243 +244 +245 +246 +247 +248 +249 +250 +251 +252 +253 +254 +255 +256 +257 +258 +259 +260 +261 +262 +263 +264 +265 +266 +267 +268 +269 +270 +271 +272 +273 +274 +275 +276 +277 +278 +279 +280 +281 +282 +283 +284 +285 +286 +287 +288 +289 +290 +291 +292 +293 +294 +295 +296 +297 +298 +299 +300 +301 +302 +303 +304 +305 +306 +307 +308 +309 +310 +311 +312 +313 +314 +315 +316 +317 +318 +319 +320 +321 +322 +323 +324 +325 +326 +327 +328 +329 +330 | 1x +1x +1x +1x +1x + +1x + + + + + + + + + + + + + + + + +1x + +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x + +1x + +1x +1x +1x + +1x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +1x + + + + + +1x + + + + + + + + + + + + + + + + + + + + | import { Injectable } from '@angular/core';
+import { Connection, OpenVidu, Publisher, PublisherProperties, Session, SignalOptions } from 'openvidu-browser';
+I
+import { LoggerService } from '../../services/logger/logger.service';
+import { LocalUserService } from '../../services/local-user/local-user.service';
+
+import { ILogger } from '../../models/logger.model';
+import { ScreenType } from '../../models/video-type.model';
+import { Signal } from '../../models/signal.model';
+import { LibraryConfigService } from '../library-config/library-config.service';
+import { PlatformService } from '../platform/platform.service';
+
+@Injectable({
+ providedIn: 'root'
+})
+export class WebrtcService {
+ private OV: OpenVidu = null;
+ private OVScreen: OpenVidu = null;
+
+ private webcamSession: Session = null;
+ private screenSession: Session = null;
+
+ private videoSource = undefined;
+ private audioSource = undefined;
+
+ private screenMediaStream: MediaStream = null;
+ private webcamMediaStream: MediaStream = null;
+ private log: ILogger;
+
+ constructor(
+ private libraryConfigSrv: LibraryConfigService,
+ private platformService: PlatformService,
+ private loggerSrv: LoggerService,
+ private localUsersSrv: LocalUserService
+ ) {
+ this.log = this.loggerSrv.get('WebRTCService');
+ this.OV = new OpenVidu();
+ if (this.libraryConfigSrv.isProduction()) this.OV.enableProdMode();
+ this.webcamSession = this.OV.initSession();
+I
+ // Initialize screen session only if it is not mobile platform
+ if (!this.platformService.isMobile()) {
+ this.OVScreen = new OpenVidu();
+ if (this.libraryConfigSrv.isProduction()) this.OVScreen.enableProdMode();
+ this.screenSession = this.OVScreen.initSession();
+ }I
+ }
+
+ getWebcamSession(): Session {
+ return this.webcamSession;
+ }
+
+ isWebcamSessionConnected(): boolean {
+ return !!this.webcamSession.capabilities;
+ }
+
+ getScreenSession(): Session {
+ return this.screenSession;
+ }
+
+ isScreenSessionConnected(): boolean {
+ return !!this.screenSession.capabilities;
+ }
+
+ async connectWebcamSession(token: string): Promise<any> {
+ if (!!token) {
+ this.log.d('Connecting webcam session');
+ const webcamUsername = this.localUsersSrv.getWebcamUserName();
+ await this.webcamSession.connect(token, { clientData: webcamUsername });
+ }
+ }
+ disconnectWebcamSession(): void {
+ if (this.webcamSession) {
+ this.log.d('Disconnecting webcam session');
+ this.webcamSession.disconnect();
+ this.webcamSession = null;
+ }
+ }
+
+ async connectScreenSession(token: string): Promise<any> {
+ if (!!token) {
+ this.log.d('Connecting screen session');
+ const screenUsername = this.localUsersSrv.getScreenUserName();
+ await this.screenSession.connect(token, { clientData: screenUsername });
+ }
+ }
+ disconnectScreenSession(): void {
+ if (this.screenSession) {
+ this.log.d('Disconnecting screen session');
+ this.screenSession.disconnect();
+ this.screenSession = null;
+ }
+ }
+
+ disconnect() {
+ this.disconnectWebcamSession();
+ this.disconnectScreenSession();
+ this.videoSource = undefined;
+ this.audioSource = undefined;
+ this.stopVideoTracks(this.localUsersSrv.getWebcamPublisher()?.stream?.getMediaStream());
+ this.stopVideoTracks(this.localUsersSrv.getScreenPublisher()?.stream?.getMediaStream());
+ this.stopAudioTracks(this.localUsersSrv.getWebcamPublisher()?.stream?.getMediaStream());
+ this.stopAudioTracks(this.localUsersSrv.getScreenPublisher()?.stream?.getMediaStream());
+ }
+
+ initPublisher(targetElement: string | HTMLElement, properties: PublisherProperties): Publisher {
+ this.log.d('Initializing publisher with properties: ', properties);
+
+ const publisher = this.OV.initPublisher(targetElement, properties);
+ // this.localUsersSrv.setWebcamPublisher(publisher);
+ publisher.once('streamPlaying', () => {
+ (<HTMLElement>publisher.videos[0].video).parentElement.classList.remove('custom-class');
+ });
+ return publisher;
+ }
+
+ async initPublisherAsync(targetElement: string | HTMLElement, properties: PublisherProperties): Promise<Publisher> {
+ this.log.d('Initializing publisher with properties: ', properties);
+
+ const publisher = await this.OV.initPublisherAsync(targetElement, properties);
+ // this.localUsersSrv.setWebcamPublisher(publisher);
+ publisher.once('streamPlaying', () => {
+ (<HTMLElement>publisher.videos[0].video).parentElement.classList.remove('custom-class');
+ });
+ return publisher;
+ }
+
+ destroyWebcamPublisher(): void {
+ const publisher = this.localUsersSrv.getWebcamPublisher();
+ if (!!publisher) {
+ // publisher.off('streamAudioVolumeChange');
+ if (publisher.stream.getWebRtcPeer()) {
+ publisher.stream.disposeWebRtcPeer();
+ }
+ publisher.stream.disposeMediaStream();
+ this.localUsersSrv.setWebcamPublisher(publisher);
+ }
+ }
+
+ destroyScreenPublisher(): void {
+ const publisher = this.localUsersSrv.getScreenPublisher();
+
+ if (!!publisher) {
+ // publisher.off('streamAudioVolumeChange');
+ if (publisher.stream.getWebRtcPeer()) {
+ publisher.stream.disposeWebRtcPeer();
+ }
+ publisher.stream.disposeMediaStream();
+ this.localUsersSrv.setScreenPublisher(publisher);
+ }
+ }
+
+ async publishWebcamPublisher(): Promise<any> {
+ if (this.webcamSession?.capabilities?.publish) {
+ const publisher = this.localUsersSrv.getWebcamPublisher();
+ if (!!publisher) {
+ return await this.webcamSession.publish(publisher);
+ }
+ }
+ this.log.e('Webcam publisher cannot be published');
+ }
+ unpublishWebcamPublisher(): void {
+ const publisher = this.localUsersSrv.getWebcamPublisher();
+ if (!!publisher) {
+ this.publishScreenAudio(this.localUsersSrv.hasWebcamAudioActive());
+ this.webcamSession.unpublish(publisher);
+ }
+ }
+ async publishScreenPublisher(): Promise<any> {
+ if (this.screenSession?.capabilities?.publish) {
+ const publisher = this.localUsersSrv.getScreenPublisher();
+ if (!!publisher) {
+ return await this.screenSession.publish(publisher);
+ }
+ }
+ this.log.e('Screen publisher cannot be published');
+ }
+
+ unpublishScreenPublisher(): void {
+ const publisher = this.localUsersSrv.getScreenPublisher();
+ if (!!publisher) {
+ this.screenSession.unpublish(publisher);
+ }
+ }
+ publishWebcamVideo(active: boolean): void {
+ this.localUsersSrv.getWebcamPublisher().publishVideo(active);
+ // Send event to subscribers because of video has changed and view must update
+ this.localUsersSrv.updateUsersStatus();
+ }
+ publishWebcamAudio(active: boolean): void {
+ const publisher = this.localUsersSrv.getWebcamPublisher();
+ if (!!publisher) {
+ publisher.publishAudio(active);
+ }
+ this.localUsersSrv.updateUsersStatus();
+ }
+ publishScreenAudio(active: boolean): void {
+ const publisher = this.localUsersSrv.getScreenPublisher();
+ if (!!publisher) {
+ publisher.publishAudio(active);
+ }
+ this.localUsersSrv.updateUsersStatus();
+ }
+ replaceTrack(videoSource: string, audioSource: string, mirror: boolean = true): Promise<void> {
+ return new Promise((resolve, reject) => {
+ if (!!videoSource) {
+ this.log.d('Replacing video track ' + videoSource);
+ this.videoSource = videoSource;
+ // this.stopVideoTracks(this.webcamUser.getStreamManager().stream.getMediaStream());
+ }
+ if (!!audioSource) {
+ this.log.d('Replacing audio track ' + audioSource);
+ this.audioSource = audioSource;
+ // this.stopAudioTracks(this.webcamUser.getStreamManager().stream.getMediaStream());
+ }
+ this.destroyWebcamPublisher();
+ const properties = this.createPublisherProperties(
+ this.videoSource,
+ this.audioSource,
+ this.localUsersSrv.hasWebcamVideoActive(),
+ this.localUsersSrv.hasWebcamAudioActive(),
+ mirror
+ );
+
+ const publisher = this.initPublisher(undefined, properties);
+ this.localUsersSrv.setWebcamPublisher(publisher);
+
+ publisher.once('streamPlaying', () => {
+ this.localUsersSrv.setWebcamPublisher(publisher);
+ resolve();
+ });
+
+ publisher.once('accessDenied', () => {
+ reject();
+ });
+
+ // Reeplace track method
+ // this.webcamMediaStream = await this.OV.getUserMedia(properties);
+ // const track: MediaStreamTrack = !!videoSource
+ // ? this.webcamMediaStream.getVideoTracks()[0]
+ // : this.webcamMediaStream.getAudioTracks()[0];
+
+ // try {
+ // await (<Publisher>this.webcamUser.getStreamManager()).replaceTrack(track);
+ // } catch (error) {
+ // this.log.e('Error replacing track ', error);
+ // }
+ });
+ }
+
+ sendSignal(type: Signal, connection?: Connection, data?: any): void {
+ const signalOptions: SignalOptions = {
+ data: JSON.stringify(data),
+ type: type,
+ to: connection ? [connection] : undefined
+ };
+ this.webcamSession.signal(signalOptions);
+
+ if (type === Signal.NICKNAME_CHANGED && !!this.getScreenSession().connection) {
+ signalOptions.data = JSON.stringify({ clientData: this.localUsersSrv.getScreenUserName() });
+ this.getScreenSession()?.signal(signalOptions);
+ }
+ }
+
+ createPublisherProperties(
+ videoSource: string | MediaStreamTrack | boolean,
+ audioSource: string | MediaStreamTrack | boolean,
+ publishVideo: boolean,
+ publishAudio: boolean,
+ mirror: boolean
+ ): PublisherProperties {
+ return {
+ videoSource,
+ audioSource,
+ publishVideo,
+ publishAudio,
+ mirror
+ };
+ }
+
+ async replaceScreenTrack() {
+ const videoSource = ScreenType.SCREEN;
+ const hasAudio = !this.localUsersSrv.isWebCamEnabled();
+ const properties = this.createPublisherProperties(videoSource, undefined, true, hasAudio, false);
+
+ this.stopScreenTracks();
+ this.screenMediaStream = await this.OVScreen.getUserMedia(properties);
+ await this.localUsersSrv.getScreenPublisher().replaceTrack(this.screenMediaStream.getVideoTracks()[0]);
+ }
+
+ stopAudioTracks(mediaStream: MediaStream) {
+ mediaStream?.getAudioTracks().forEach((track) => {
+ track.stop();
+
+ track.enabled = false;
+ });
+ this.webcamMediaStream?.getAudioTracks().forEach((track) => {
+ track.stop();
+ });
+ }
+
+ stopVideoTracks(mediaStream: MediaStream) {
+ mediaStream?.getVideoTracks().forEach((track) => {
+ track.stop();
+ });
+ }
+
+ needSendNicknameSignal(): boolean {
+ const oldNickname: string = JSON.parse(this.webcamSession.connection.data).clientData;
+ return oldNickname !== this.localUsersSrv.getWebcamUserName();
+ }
+
+ isMyOwnConnection(connectionId: string): boolean {
+ return (
+ this.webcamSession?.connection?.connectionId === connectionId || this.screenSession?.connection?.connectionId === connectionId
+ );
+ }
+
+ getSessionOfUserConnected(): Session {
+ return this.localUsersSrv.isWebCamEnabled() ? this.webcamSession : this.screenSession;
+ }
+
+ private stopScreenTracks() {
+ if (this.screenMediaStream) {
+ this.stopAudioTracks(this.screenMediaStream);
+ this.stopVideoTracks(this.screenMediaStream);
+ }
+ }
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 | + + + + + + + + + + + + + + + + + + + + + | /* + * Public API Surface of openvidu-components + */ + +export * from './lib/openvidu-components-library.service'; +export * from './lib/openvidu-components-library.component'; +export * from './lib/openvidu-components-library.module'; + +// Services +export * from './lib/services/webrtc/webrtc.service'; +export * from './lib/services/local-user/local-user.service'; +export * from './lib/services/remote-user/remote-user.service'; + +// Components +export * from './lib/components/user-settings/user-settings.component'; +export * from './lib/components/toolbar/toolbar.component'; +export * from './lib/components/chat/chat.component'; +export * from './lib/components/room/room.component'; +export * from './lib/components/layout/layout.component'; +export * from './lib/components/footer/footer.component'; + +// Models |
Messages will be removed at the end of the session
+{{ connections }}
+ +
+ 
+
+ `,
+ styleUrls: ['./video.component.css']
+})
+export class VideoComponent implements AfterViewInit {
+ @Input() mutedSound: boolean;
+
+ @Output() toggleVideoSizeEvent = new EventEmitterchat-test works!
+ + + + + +Test the OpenVidu Call app using openvidu-components-angular:
+ + + + +What component do you want to see?
+ + + +
+