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;
}
#action-btn {
border-radius: var(--ov-buttons-radius);
}
.warn-btn {
/* background-color: var(--ov-warn-color) !important; */
color: var(--ov-warn-color);
}

7
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>
<span class="participant-subtitle"></span>
</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>
</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;
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
(dblclick)="toggleVideoEnlarged()"
[streamManager]="_stream.streamManager"
[mutedSound]="mutedSound"
[mutedSound]="_stream.participant.isMutedForcibly"
></ov-video>
@ -59,12 +59,12 @@
<span *ngIf="videoSizeIcon === videoSizeIconEnum.NORMAL">Zoom out</span>
<span *ngIf="videoSizeIcon === videoSizeIconEnum.BIG">Zoom in</span>
</button>
<button mat-menu-item id="volumeButton" *ngIf="this._stream.streamManager?.remote" (click)="toggleSound()">
<mat-icon *ngIf="!mutedSound">volume_up</mat-icon>
<span *ngIf="!mutedSound">Mute sound</span>
<button mat-menu-item id="volumeButton" *ngIf="!this._stream.local" (click)="toggleSound()">
<mat-icon *ngIf="!_stream.participant.isMutedForcibly">volume_up</mat-icon>
<span *ngIf="!_stream.participant.isMutedForcibly">Mute sound</span>
<mat-icon *ngIf="mutedSound">volume_off</mat-icon>
<span *ngIf="mutedSound">Unmute sound</span>
<mat-icon *ngIf="_stream.participant.isMutedForcibly">volume_off</mat-icon>
<span *ngIf="_stream.participant.isMutedForcibly">Unmute sound</span>
</button>
<!-- <button mat-menu-item *ngIf="this._stream.streamManager?.stream?.videoActive" id="fullscreenButton" (click)="toggleFullscreen()">
<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;
videoTypeEnum = VideoType;
videoSizeIcon: VideoSizeIcon = VideoSizeIcon.BIG;
mutedSound: boolean;
toggleNickname: boolean;
nicknameFormControl: FormControl;
matcher: NicknameMatcher;
@ -100,7 +99,8 @@ export class StreamComponent implements OnInit {
}
toggleSound() {
this.mutedSound = !this.mutedSound;
this._stream.participant.setMutedForcibly(!this._stream.participant.isMutedForcibly);
}
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 {
streams: Map<VideoType, StreamModel> = new Map();
id: string;
isMutedForcibly: boolean;
constructor(model?: StreamModel, id?: string) {
let streamModel: StreamModel = {
@ -29,6 +30,7 @@ export abstract class ParticipantAbstractModel {
};
this.streams.set(streamModel.type, streamModel);
this.id = id ? id : new Date().getTime().toString();
this.isMutedForcibly = false;
}
addConnection(streamModel: StreamModel) {
@ -190,6 +192,10 @@ export abstract class ParticipantAbstractModel {
someHasVideoEnlarged(): boolean {
return Array.from(this.streams.values()).some((conn) => conn.videoEnlarged);
}
setMutedForcibly(muted: boolean){
this.isMutedForcibly = muted;
}
}
export class ParticipantModel extends ParticipantAbstractModel {