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

View File

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

View File

@ -1,3 +1,4 @@
import { KeyValue } from '@angular/common';
import { import {
AfterViewInit, AfterViewInit,
ChangeDetectionStrategy, ChangeDetectionStrategy,
@ -20,7 +21,7 @@ import { BaseViewComponentDirective } from 'app/site/base/base-view';
import { ApplauseService } from '../../services/applause.service'; import { ApplauseService } from '../../services/applause.service';
import { CallRestrictionService } from '../../services/call-restriction.service'; import { CallRestrictionService } from '../../services/call-restriction.service';
import { InteractionService } from '../../services/interaction.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'; import { StreamService } from '../../services/stream.service';
const helpDeskTitle = _('Help desk'); const helpDeskTitle = _('Help desk');
@ -35,25 +36,10 @@ const connectingTitle = _('connecting ...');
changeDetection: ChangeDetectionStrategy.OnPush changeDetection: ChangeDetectionStrategy.OnPush
}) })
export class CallComponent extends BaseViewComponentDirective implements OnInit, AfterViewInit, OnDestroy { 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 { public get showHangUp(): boolean {
return this.isJitsiActive && this.isJoined; return this.isJitsiActive && this.isJoined;
} }
private dominantSpeaker: string;
private members = {};
public get memberList(): string[] {
return Object.keys(this.members);
}
public get isDisconnected(): boolean { public get isDisconnected(): boolean {
return !this.isJitsiActive && !this.isJoined; return !this.isJitsiActive && !this.isJoined;
} }
@ -65,6 +51,17 @@ export class CallComponent extends BaseViewComponentDirective implements OnInit,
public get isConnected(): boolean { public get isConnected(): boolean {
return this.isJitsiActive && this.isJoined; 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; 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 { public ngOnInit(): void {
this.updateSubtitle(); this.updateSubtitle();
} }

View File

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