openvidu-components: Updated admin dashboard and fixed linters

pull/750/head
csantosm 2022-08-11 17:24:11 +02:00
parent 30aa871075
commit 95180b669f
2 changed files with 16 additions and 29 deletions

View File

@ -58,29 +58,17 @@
<div <div
*ngFor=" *ngFor="
let recording of recordings let recording of recordings
| searchByStringProperty: { properties: ['sessionId', 'properties.name'], filter: searchValue } | searchByStringProperty: { properties: ['sessionId', 'properties?.name || name'], filter: searchValue }
" "
class="item" class="item"
> >
<mat-card class="recording-card"> <mat-card class="recording-card">
<mat-card-content> <mat-card-content>
<div class="video-div-container"> <div class="video-div-container">
<img <img *ngIf="!!recording.url" [src]="recording.url | thumbnailUrl" />
*ngIf="
!!recording.url &&
recording.properties.hasVideo &&
(recording.properties.outputMode === 'COMPOSED' ||
recording.properties.outputMode === 'COMPOSED_QUICK_START')
"
[src]="recording.url | thumbnailUrl"
/>
<div class="video-btns"> <div class="video-btns">
<button <button
*ngIf=" *ngIf="recording.status !== 'failed' && recording.status !== 'stopped'"
recording.status !== 'failed' &&
recording.status !== 'stopped' &&
recording.properties.outputMode !== 'INDIVIDUAL'
"
mat-icon-button mat-icon-button
(click)="play(recording)" (click)="play(recording)"
> >
@ -109,7 +97,7 @@
<div> <div>
<div class="video-div-tag"> <div class="video-div-tag">
<span class="video-card-tag">{{ 'ADMIN.NAME' | translate }}</span <span class="video-card-tag">{{ 'ADMIN.NAME' | translate }}</span
><span class="video-card-value">{{ recording.properties.name }}</span> ><span class="video-card-value">{{ recording.properties?.name || recording.name }}</span>
</div> </div>
<div class="video-div-tag"> <div class="video-div-tag">
<span class="video-card-tag">{{ 'ADMIN.SESSION' | translate }}</span <span class="video-card-tag">{{ 'ADMIN.SESSION' | translate }}</span
@ -117,7 +105,7 @@
</div> </div>
<div class="video-div-tag"> <div class="video-div-tag">
<span class="video-card-tag">{{ 'ADMIN.OUTPUT' | translate }}</span <span class="video-card-tag">{{ 'ADMIN.OUTPUT' | translate }}</span
><span class="video-card-value">{{ recording.properties.outputMode }}</span> ><span class="video-card-value">{{ recording.properties?.outputMode || recording.outputMode }}</span>
</div> </div>
<div class="video-div-tag"> <div class="video-div-tag">
<span class="video-card-tag">{{ 'ADMIN.DATE' | translate }}</span <span class="video-card-tag">{{ 'ADMIN.DATE' | translate }}</span

View File

@ -15,13 +15,15 @@ export class ParticipantService {
* Local participant Observable which pushes the local participant object in every update. * Local participant Observable which pushes the local participant object in every update.
*/ */
localParticipantObs: Observable<ParticipantAbstractModel>; localParticipantObs: Observable<ParticipantAbstractModel>;
protected _localParticipant = <BehaviorSubject<ParticipantAbstractModel>>new BehaviorSubject(null); protected _localParticipant: BehaviorSubject<ParticipantAbstractModel | null> = new BehaviorSubject<ParticipantAbstractModel | null>(
null
);
/** /**
* Remote participants Observable which pushes the remote participants array in every update. * Remote participants Observable which pushes the remote participants array in every update.
*/ */
remoteParticipantsObs: Observable<ParticipantAbstractModel[]>; remoteParticipantsObs: Observable<ParticipantAbstractModel[]>;
protected _remoteParticipants = <BehaviorSubject<ParticipantAbstractModel[]>>new BehaviorSubject([]); protected _remoteParticipants: BehaviorSubject<ParticipantAbstractModel[]> = new BehaviorSubject<ParticipantAbstractModel[]>([]);
protected localParticipant: ParticipantAbstractModel; protected localParticipant: ParticipantAbstractModel;
protected remoteParticipants: ParticipantAbstractModel[] = []; protected remoteParticipants: ParticipantAbstractModel[] = [];
@ -118,7 +120,7 @@ export class ParticipantService {
videoEnlarged: true, videoEnlarged: true,
streamManager: screenPublisher, streamManager: screenPublisher,
connected: true, connected: true,
connectionId: null connectionId: ''
}; };
this.resetRemoteStreamsToNormalSize(); this.resetRemoteStreamsToNormalSize();
@ -176,11 +178,8 @@ export class ParticipantService {
*/ */
clear() { clear() {
this.disableScreenStream(); this.disableScreenStream();
// this.localParticipant = this.newParticipant();
// this._screensharing.next(false);
this.remoteParticipants = []; this.remoteParticipants = [];
this._remoteParticipants = <BehaviorSubject<ParticipantAbstractModel[]>>new BehaviorSubject([]); this.updateRemoteParticipants();
this.remoteParticipantsObs = this._remoteParticipants.asObservable();
this.updateLocalParticipant(); this.updateLocalParticipant();
} }
@ -306,7 +305,7 @@ export class ParticipantService {
*/ */
removeConnectionByConnectionId(connectionId: string) { removeConnectionByConnectionId(connectionId: string) {
this.log.w('Deleting connection: ', connectionId); this.log.w('Deleting connection: ', connectionId);
let participant = null; let participant: ParticipantAbstractModel | undefined;
if (this.localParticipant.hasConnectionId(connectionId)) { if (this.localParticipant.hasConnectionId(connectionId)) {
participant = this.localParticipant; participant = this.localParticipant;
} else { } else {
@ -338,11 +337,11 @@ export class ParticipantService {
/** /**
* @internal * @internal
*/ */
getRemoteParticipantByConnectionId(connectionId: string): ParticipantAbstractModel { getRemoteParticipantByConnectionId(connectionId: string): ParticipantAbstractModel | undefined {
return this.remoteParticipants.find((p) => p.hasConnectionId(connectionId)); return this.remoteParticipants.find((p) => p.hasConnectionId(connectionId));
} }
protected getRemoteParticipantById(id: string): ParticipantAbstractModel { protected getRemoteParticipantById(id: string): ParticipantAbstractModel | undefined {
return this.remoteParticipants.find((p) => p.id === id); return this.remoteParticipants.find((p) => p.id === id);
} }
/** /**
@ -356,8 +355,8 @@ export class ParticipantService {
* @internal * @internal
*/ */
toggleRemoteVideoEnlarged(connectionId: string) { toggleRemoteVideoEnlarged(connectionId: string) {
const p = this.getRemoteParticipantByConnectionId(connectionId); const participant = this.getRemoteParticipantByConnectionId(connectionId);
p.toggleVideoEnlarged(connectionId); participant?.toggleVideoEnlarged(connectionId);
} }
/** /**