Merge pull request #6176 from tsiegleauq/jitsi-user-scroll

Scrollable sorted jitsi user list
This commit is contained in:
Emanuel Schütze 2021-07-20 14:58:11 +02:00 committed by GitHub
commit 9d60951344
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 34 additions and 34 deletions

View File

@ -25,22 +25,15 @@
*ngIf="showParticles | async"
class="room-list-applause-particles"
></os-applause-particle-display>
<div class="member-list">
<ol>
<li
*ngFor="let memberId of memberList; trackBy: trackByIndex"
[ngClass]="{
focused: members[memberId].focus
}"
>
<ol class="member-list">
<li *ngFor="let member of members | keyvalue: valueNameOrder; trackBy: trackByIndex">
<div class="member-list-entry">
{{ members[memberId].name }}
{{ member.value.name }}
</div>
</li>
</ol>
</div>
</div>
</div>
<!-- Custom control buttons -->
<div>

View File

@ -26,10 +26,12 @@ $wrapper-padding: 5px;
height: 100%;
width: 70px;
right: 0;
pointer-events: none;
}
.member-list {
max-height: 100%;
max-height: 230px;
margin: 0;
overflow-y: auto;
.member-list-entry {

View File

@ -1,3 +1,4 @@
import { KeyValue } from '@angular/common';
import {
AfterViewInit,
ChangeDetectionStrategy,
@ -20,7 +21,7 @@ import { BaseViewComponentDirective } from 'app/site/base/base-view';
import { ApplauseService } from '../../services/applause.service';
import { CallRestrictionService } from '../../services/call-restriction.service';
import { InteractionService } from '../../services/interaction.service';
import { RtcService } from '../../services/rtc.service';
import { ConferenceMember, ConferenceMemberCollection, RtcService } from '../../services/rtc.service';
import { StreamService } from '../../services/stream.service';
const helpDeskTitle = _('Help desk');
@ -35,25 +36,10 @@ const connectingTitle = _('connecting ...');
changeDetection: ChangeDetectionStrategy.OnPush
})
export class CallComponent extends BaseViewComponentDirective implements OnInit, AfterViewInit, OnDestroy {
public isJitsiActiveInAnotherTab: Observable<boolean> = this.rtcService.inOtherTab;
public canEnterCall: Observable<boolean> = this.callRestrictionService.canEnterCallObservable;
public isJitsiDialogOpen: Observable<boolean> = this.rtcService.showCallDialogObservable;
public showParticles: Observable<boolean> = this.applauseService.showParticles;
public hasLiveStreamUrl: Observable<boolean> = this.streamService.hasLiveStreamUrlObvervable;
public isJitsiActive: boolean;
public isJoined: boolean;
public get showHangUp(): boolean {
return this.isJitsiActive && this.isJoined;
}
private dominantSpeaker: string;
private members = {};
public get memberList(): string[] {
return Object.keys(this.members);
}
public get isDisconnected(): boolean {
return !this.isJitsiActive && !this.isJoined;
}
@ -65,6 +51,17 @@ export class CallComponent extends BaseViewComponentDirective implements OnInit,
public get isConnected(): boolean {
return this.isJitsiActive && this.isJoined;
}
public isJitsiActiveInAnotherTab: Observable<boolean> = this.rtcService.inOtherTab;
public canEnterCall: Observable<boolean> = this.callRestrictionService.canEnterCallObservable;
public isJitsiDialogOpen: Observable<boolean> = this.rtcService.showCallDialogObservable;
public showParticles: Observable<boolean> = this.applauseService.showParticles;
public hasLiveStreamUrl: Observable<boolean> = this.streamService.hasLiveStreamUrlObvervable;
public isJitsiActive: boolean;
public isJoined: boolean;
private dominantSpeaker: string;
public members: ConferenceMemberCollection = {};
private autoConnect: boolean;
@ -126,6 +123,10 @@ export class CallComponent extends BaseViewComponentDirective implements OnInit,
);
}
public valueNameOrder = (a: KeyValue<number, ConferenceMember>, b: KeyValue<number, ConferenceMember>): number => {
return a.value.name.localeCompare(b.value.name);
};
public ngOnInit(): void {
this.updateSubtitle();
}

View File

@ -24,9 +24,13 @@ interface ConferenceJoinedResult {
formattedDisplayName: string;
}
interface ConferenceMember {
export interface ConferenceMemberCollection {
[key: number]: ConferenceMember;
}
export interface ConferenceMember {
name: string;
focus: boolean;
focus?: boolean;
}
interface DisplayNameChangeResult {
@ -150,7 +154,7 @@ export class RtcService {
public jitsiMeetUrl = this.jitsiMeetUrlSubject.asObservable();
private members = {};
private memberSubject = new BehaviorSubject<Object>(this.members);
private memberSubject = new BehaviorSubject<ConferenceMemberCollection>(this.members);
public memberObservableObservable = this.memberSubject.asObservable();
private dominantSpeaker: JitsiMember;