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

openvidu-components: Force mute participant from participants panel

pull/707/head
csantosm 2022-02-28 13:06:39 +01:00
parent 3e21207f8c
commit 5f22072f71
6 changed files with 32 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/participants-panel/participant-panel-item/participant-panel-item.component.css
View File

@ -23,3 +23,11 @@ mat-list {
display: contents; display: contents;
} }
#action-btn {
border-radius: var(--ov-buttons-radius);
}
.warn-btn {
/* background-color: var(--ov-warn-color) !important; */
color: var(--ov-warn-color);
}

5
openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/participants-panel/participant-panel-item/participant-panel-item.component.html
View File

@ -6,5 +6,10 @@
<!-- <p matLine> <!-- <p matLine>
<span class="participant-subtitle"></span> <span class="participant-subtitle"></span>
</p> --> </p> -->
<button mat-icon-button id="action-btn" [class.warn-btn]="_participant.isMutedForcibly" (click)="toggleMuteForcibly()">
<mat-icon *ngIf="!_participant.isMutedForcibly">volume_up</mat-icon>
<mat-icon *ngIf="_participant.isMutedForcibly">volume_off</mat-icon>
</button>
</mat-list-item> </mat-list-item>
</mat-list> </mat-list>

4
openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/participants-panel/participant-panel-item/participant-panel-item.component.ts
View File

@ -15,4 +15,8 @@ export class ParticipantPanelItemComponent {
_participant: ParticipantAbstractModel; _participant: ParticipantAbstractModel;
constructor() {} constructor() {}
toggleMuteForcibly() {
this._participant.setMutedForcibly(!this._participant.isMutedForcibly);
}
} }

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

@ -36,7 +36,7 @@
<ov-video <ov-video
(dblclick)="toggleVideoEnlarged()" (dblclick)="toggleVideoEnlarged()"
[streamManager]="_stream.streamManager" [streamManager]="_stream.streamManager"
[mutedSound]="mutedSound" [mutedSound]="_stream.participant.isMutedForcibly"
></ov-video> ></ov-video>
@ -59,12 +59,12 @@
<span *ngIf="videoSizeIcon === videoSizeIconEnum.NORMAL">Zoom out</span> <span *ngIf="videoSizeIcon === videoSizeIconEnum.NORMAL">Zoom out</span>
<span *ngIf="videoSizeIcon === videoSizeIconEnum.BIG">Zoom in</span> <span *ngIf="videoSizeIcon === videoSizeIconEnum.BIG">Zoom in</span>
</button> </button>
<button mat-menu-item id="volumeButton" *ngIf="this._stream.streamManager?.remote" (click)="toggleSound()"> <button mat-menu-item id="volumeButton" *ngIf="!this._stream.local" (click)="toggleSound()">
<mat-icon *ngIf="!mutedSound">volume_up</mat-icon> <mat-icon *ngIf="!_stream.participant.isMutedForcibly">volume_up</mat-icon>
<span *ngIf="!mutedSound">Mute sound</span> <span *ngIf="!_stream.participant.isMutedForcibly">Mute sound</span>
<mat-icon *ngIf="mutedSound">volume_off</mat-icon> <mat-icon *ngIf="_stream.participant.isMutedForcibly">volume_off</mat-icon>
<span *ngIf="mutedSound">Unmute sound</span> <span *ngIf="_stream.participant.isMutedForcibly">Unmute sound</span>
</button> </button>
<!-- <button mat-menu-item *ngIf="this._stream.streamManager?.stream?.videoActive" id="fullscreenButton" (click)="toggleFullscreen()"> <!-- <button mat-menu-item *ngIf="this._stream.streamManager?.stream?.videoActive" id="fullscreenButton" (click)="toggleFullscreen()">
<mat-icon *ngIf="!isFullscreenEnabled">fullscreen</mat-icon> <mat-icon *ngIf="!isFullscreenEnabled">fullscreen</mat-icon>

4
openvidu-components-angular/projects/openvidu-angular/src/lib/components/stream/stream.component.ts
View File

@ -23,7 +23,6 @@ export class StreamComponent implements OnInit {
videoSizeIconEnum = VideoSizeIcon; videoSizeIconEnum = VideoSizeIcon;
videoTypeEnum = VideoType; videoTypeEnum = VideoType;
videoSizeIcon: VideoSizeIcon = VideoSizeIcon.BIG; videoSizeIcon: VideoSizeIcon = VideoSizeIcon.BIG;
mutedSound: boolean;
toggleNickname: boolean; toggleNickname: boolean;
nicknameFormControl: FormControl; nicknameFormControl: FormControl;
matcher: NicknameMatcher; matcher: NicknameMatcher;
@ -100,7 +99,8 @@ export class StreamComponent implements OnInit {
} }
toggleSound() { toggleSound() {
this.mutedSound = !this.mutedSound; this._stream.participant.setMutedForcibly(!this._stream.participant.isMutedForcibly);
} }
toggleNicknameForm() { toggleNicknameForm() {

6
openvidu-components-angular/projects/openvidu-angular/src/lib/models/participant.model.ts
View File

@ -15,6 +15,7 @@ export interface StreamModel {
export abstract class ParticipantAbstractModel { export abstract class ParticipantAbstractModel {
streams: Map<VideoType, StreamModel> = new Map(); streams: Map<VideoType, StreamModel> = new Map();
id: string; id: string;
isMutedForcibly: boolean;
constructor(model?: StreamModel, id?: string) { constructor(model?: StreamModel, id?: string) {
let streamModel: StreamModel = { let streamModel: StreamModel = {
@ -29,6 +30,7 @@ export abstract class ParticipantAbstractModel {
}; };
this.streams.set(streamModel.type, streamModel); this.streams.set(streamModel.type, streamModel);
this.id = id ? id : new Date().getTime().toString(); this.id = id ? id : new Date().getTime().toString();
this.isMutedForcibly = false;
} }
addConnection(streamModel: StreamModel) { addConnection(streamModel: StreamModel) {
@ -190,6 +192,10 @@ export abstract class ParticipantAbstractModel {
someHasVideoEnlarged(): boolean { someHasVideoEnlarged(): boolean {
return Array.from(this.streams.values()).some((conn) => conn.videoEnlarged); return Array.from(this.streams.values()).some((conn) => conn.videoEnlarged);
} }
setMutedForcibly(muted: boolean){
this.isMutedForcibly = muted;
}
} }
export class ParticipantModel extends ParticipantAbstractModel { export class ParticipantModel extends ParticipantAbstractModel {