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

Scrollable sorted jitsi user list

client/src/app/site/interaction/components/call/call.component.html

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

client/src/app/site/interaction/components/call/call.component.scss

@@ -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 {

client/src/app/site/interaction/components/call/call.component.ts

@@ -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();
     }

client/src/app/site/interaction/services/rtc.service.ts

@@ -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;