Correct update of position in hand raise queue

Author: DiegoMzmn

frontend/src/app/shared/components/popup/popup.component.ts

@@ -30,5 +30,4 @@ export class PopupComponent implements OnInit {
       this.letterColor = 'rgb(0, 0, 0)';
     }
   }
-
 }

frontend/src/app/shared/components/toolbar/toolbar.component.html

@@ -37,7 +37,7 @@
       <button mat-icon-button (click)="getInviteURL('participant')" *ngIf="localUser && this.userService.isModOfRoom(this.mySessionId)">
         <mat-icon matTooltip="Invite URL for participants">link</mat-icon>
       </button>
-      <button mat-icon-button (click)="raiseHand()" *ngIf="localUser" id="raise_hand_button" matBadge="{{positionInHandRaiseQueue}}" [matBadgeHidden]="!localUser.isHandRaised()" matBadgePosition="below after" matBadgeSize="medium" matBadgeColor="warn">
+      <button mat-icon-button (click)="raiseHand()" *ngIf="localUser" id="raise_hand_button" matBadge="{{localUser.getPositionInHandRaiseQueue()}}" [matBadgeHidden]="!localUser.isHandRaised()" matBadgePosition="below after" matBadgeSize="medium" matBadgeColor="warn">
         <img *ngIf="localUser && !localUser.isHandRaised()" src="../../../../assets/images/raise_hand.png" matTooltip="Raise your hand" id="raise_hand">
         <img *ngIf="localUser && localUser.isHandRaised()" src="../../../../assets/images/lower_hand.png" matTooltip="Lower your hand" id="raise_hand">
       </button>

frontend/src/app/shared/components/toolbar/toolbar.component.ts

@@ -13,7 +13,6 @@ import { MatSnackBar } from '@angular/material';
 })
 export class ToolbarComponent implements OnInit {
   fullscreenIcon = 'fullscreen';
-  positionInHandRaiseQueue: number = 0;
 
   @Input() lightTheme: boolean;
   @Input() mySessionId: string;
@@ -79,7 +78,7 @@ export class ToolbarComponent implements OnInit {
     if(!this.localUser.isHandRaised()) {
       this.roomSrv.raiseHand(this.mySessionId, this.localUser.getNickname(), this.localUser.getAvatar(), this.localUser.getConnectionId()).subscribe(
         position => {
-          this.positionInHandRaiseQueue = position;
+          this.localUser.setPositionInHandRaiseQueue(position);
           this.raiseHandClicked.emit();
         },
         error => console.error(error) 
@@ -92,7 +91,6 @@ export class ToolbarComponent implements OnInit {
         error => console.error(error) 
       );
     }
-    
   }
 
   getInviteURL(role:string){

frontend/src/app/shared/models/user-model.ts

@@ -30,6 +30,11 @@ export class UserModel {
    */
   private handRaised: boolean;
 
+  /**
+   * The position in the queue of people who are raising their hand (0 if not raising their hand)
+   */
+  private positionInHandRaiseQueue: number;
+
   /**
    * The user nickname
    */
@@ -69,6 +74,7 @@ export class UserModel {
     this.videoActive = true;
     this.screenShareActive = false;
     this.handRaised = false;
+    this.positionInHandRaiseQueue = 0;
     this.nickname = '';
     this.streamManager = null;
     this.type = 'local';
@@ -102,6 +108,13 @@ export class UserModel {
     return this.handRaised;
   }
 
+  /**
+   * Return the position in the queue of people who are raising their hand (0 if not raising their hand)
+   */
+  public getPositionInHandRaiseQueue(): number {
+    return this.positionInHandRaiseQueue;
+  }
+
   /**
    * Return the connection ID
    */
@@ -190,6 +203,14 @@ export class UserModel {
     this.handRaised = isHandRaised;
   }
 
+  /**
+   * Set the position in the queue of people who are raising their hand
+   * @param positionInHandRaiseQueue value of the position
+   */
+  public setPositionInHandRaiseQueue(positionInHandRaiseQueue: number) {
+    this.positionInHandRaiseQueue = positionInHandRaiseQueue;
+  }
+
   /**
    * Set the streamManager value object
    * @param streamManager value of streamManager

frontend/src/app/video-room/video-room.component.ts

@@ -1,3 +1,4 @@
+import { ToolbarComponent } from './../shared/components/toolbar/toolbar.component';
 import { RoomService } from './../shared/services/room.service';
 import { AssistantsComponent } from './../shared/components/menu/assistants/assistants.component';
 import { UserService } from '../shared/services/user.service';
@@ -24,7 +25,7 @@ import { ChatComponent } from '../shared/components/menu/chat/chat.component';
 import { OvSettings } from '../shared/models/ov-settings';
 import { ApiService } from '../shared/services/api.service';
 import { ThrowStmt } from '@angular/compiler';
-import { trigger, transition, style, animate, query, stagger, animateChild } from '@angular/animations';
+import { trigger, transition, style, animate } from '@angular/animations';
 
 @Component({
   selector: 'app-video-room',
@@ -645,6 +646,9 @@ export class VideoRoomComponent implements OnInit, OnDestroy {
           if (data.isHandRaised !== undefined) {
             user.setHandRaised(data.isHandRaised);
           }
+          if(data.positionInHandRaiseQueue !== undefined) {
+            user.setPositionInHandRaiseQueue(data.positionInHandRaiseQueue);
+          }
         }
       });
       this.remoteUsers.forEach((user: UserModel) => {
@@ -664,9 +668,15 @@ export class VideoRoomComponent implements OnInit, OnDestroy {
           if (data.avatar !== undefined) {
             user.setUserAvatar(data.avatar);
           }
+          if(data.positionInHandRaiseQueue !== undefined) {
+            user.setPositionInHandRaiseQueue(data.positionInHandRaiseQueue);
+          }
           if (data.isHandRaised !== undefined) {
+            const previousHandRaised = user.isHandRaised();
             user.setHandRaised(data.isHandRaised);
-            this.raiseOrLowerHand(user);
+            if(previousHandRaised!==user.isHandRaised()) {
+              this.raiseOrLowerHand(user);
+            }
           }
           if (data.isFirstTime) {
             this.showConnectionPopup(user.getNickname(), true, data.avatar);
@@ -678,7 +688,7 @@ export class VideoRoomComponent implements OnInit, OnDestroy {
   }
 
   raiseOrLowerHand(user: UserModel) {
-    if(user.isHandRaised()) {
+    if(user.isHandRaised()) { //Raise the hand
       let unupdatedUser = this.handsRaised.filter(handRaisedUser => handRaisedUser.connectionId===user.getConnectionId())[0];
       if(unupdatedUser) { //Update the user that was already raising their hand
         const index = this.handsRaised.indexOf(unupdatedUser);
@@ -698,13 +708,17 @@ export class VideoRoomComponent implements OnInit, OnDestroy {
           this.recalculatePopupOffsets();
         }
       }
-    } else {
+    } else { //Lower the hand
       this.handsRaised = this.handsRaised.filter(handRaisedUser => handRaisedUser.connectionId!==user.getConnectionId());
       if(this.handsRaised.length==0) {
         setTimeout(() => {
           this.recalculatePopupOffsets();
         }, 500);
       }
+      const localUserPosition = this.localUsers[0].getPositionInHandRaiseQueue();
+      if(user.getPositionInHandRaiseQueue()<localUserPosition) {
+        this.localUsers[0].setPositionInHandRaiseQueue(localUserPosition-1);
+      }
     }
     this.handsRaisedMessage = (this.handsRaised.length>1 ? 'And ' + (this.handsRaised.length-1) + ' other ' + (this.handsRaised.length===2 ? 'person' : 'people') + ' are' : 'Is') + ' raising their hand'
   }
@@ -727,8 +741,10 @@ export class VideoRoomComponent implements OnInit, OnDestroy {
       }
       const connection = event.connection;
       const userDisconnected = this.remoteUsers.filter((user) => user.getConnectionId() === connection.connectionId)[0];
-      userDisconnected.setHandRaised(false);
-      this.raiseOrLowerHand(userDisconnected);
+      if(userDisconnected.isHandRaised()) {
+        userDisconnected.setHandRaised(false);
+        this.raiseOrLowerHand(userDisconnected);
+      }
       this.remoteUsers = this.remoteUsers.filter((user) => user.getConnectionId() !== connection.connectionId);
       this.showConnectionPopup(userDisconnected.getNickname(), false, userDisconnected.getAvatar());
       this.updateModConnections();
@@ -763,6 +779,7 @@ export class VideoRoomComponent implements OnInit, OnDestroy {
       isVideoActive: user.isVideoActive(),
       isScreenShareActive: user.isScreenShareActive(),
       isHandRaised: user.isHandRaised(),
+      positionInHandRaiseQueue: user.getPositionInHandRaiseQueue(),
       nickname: user.getNickname(),
       avatar: user.getAvatar(),
       isFirstTime: isFirstTime,