Order on users who raise the hand + Check hand raised users are connected + XMLHttpRequest (deprecated in Chrome) -> fetch keepalive

Author: DiegoMzmn

backend/src/main/java/urjc/ovteaching/rooms/Room.java

@@ -107,23 +107,18 @@ public String getName() {
 		return name;
 	}
 
-	@SuppressWarnings("unchecked")
-	public int addHandRaisedUser(String nickname, String avatar, String connectionId) {
-		JSONObject json = new JSONObject();
-		json.put("nickname", nickname);
-		json.put("avatar", avatar);
-		json.put("connectionId", connectionId);
-		if(this.handRaisedUsers.contains(json)) {
+	public int addHandRaisedUser(JSONObject handRaisedUser) {
+		if(this.handRaisedUsers.contains(handRaisedUser)) {
 			return -1;
 		} else {
-			this.handRaisedUsers.add(json);
+			this.handRaisedUsers.add(handRaisedUser);
 			return this.handRaisedUsers.size();
 		}
 	}
 
-	public boolean removeHandRaisedUser(String connectionId) {
+	public boolean removeHandRaisedUser(JSONObject connectionId) {
 		for(JSONObject jsonUser : this.handRaisedUsers) {
-			if(jsonUser.get("connectionId").equals(connectionId)) {
+			if(jsonUser.get("connectionId").equals(connectionId.get("connectionId"))) {
 				this.handRaisedUsers.remove(jsonUser);
 				return true;
 			}

backend/src/main/java/urjc/ovteaching/rooms/RoomService.java

@@ -1,11 +1,15 @@
 package urjc.ovteaching.rooms;
 
+import java.util.Iterator;
 import java.util.List;
 import java.util.Optional;
+import java.util.Set;
 
+import org.json.simple.JSONObject;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.stereotype.Service;
 
+import urjc.ovteaching.OpenViduComponent;
 import urjc.ovteaching.users.User;
 import urjc.ovteaching.users.UserService;
 
@@ -17,6 +21,9 @@ public class RoomService {
 
 	@Autowired
 	private UserService userServ;
+	
+	@Autowired
+	private OpenViduComponent openviduComponent;
 
 	public Optional<Room> findOne(long id) {
 		return roomRep.findById(id);
@@ -65,4 +72,15 @@ public Room findByInviteCode(String code) {
 			return roomRep.findByCodeParticipant(code);
 		}
 	}
+	
+	public void checkConnectedHandRaisedUsers(Room room) {
+		Iterator<JSONObject> it = room.getHandRaisedUsers().iterator();
+		while(it.hasNext()) {
+			JSONObject nextUser = it.next();
+			User fakeUser = new User((String) nextUser.get("username"), "pass", "USER_ROLE");
+			if(!this.openviduComponent.getConnectedAssistants(room).contains(fakeUser)) {
+				it.remove();
+			}
+		}
+	}
 }

backend/src/main/java/urjc/ovteaching/rooms/controllers/RoomController.java

@@ -216,9 +216,9 @@ public ResponseEntity<JSONObject> getAssistants(@PathVariable String roomName, H
 	 * 
 	 * @return the position in the queue
 	 */
-	@JsonView(User.NameOnly.class)
+	@SuppressWarnings("unchecked")
 	@PostMapping("/room/{roomName}/raiseHand")
-	public ResponseEntity<Integer> raiseHand(@PathVariable String roomName, @RequestBody String nickname, @RequestBody String avatar, @RequestBody String connectionId, HttpServletRequest request) {
+	public ResponseEntity<Integer> raiseHand(@PathVariable String roomName, @RequestBody JSONObject handRaisedUser, HttpServletRequest request) {
 		if (!request.isUserInRole("USER")) {
 			return new ResponseEntity<>(HttpStatus.UNAUTHORIZED);
 		}
@@ -229,7 +229,9 @@ public ResponseEntity<Integer> raiseHand(@PathVariable String roomName, @Request
 			return new ResponseEntity<>(HttpStatus.NOT_FOUND);
 		}
 		if (room.isInRoom(user)) {
-			Integer position = room.addHandRaisedUser(nickname, avatar, connectionId);
+			handRaisedUser.put("username", user.getName());
+			this.roomServ.checkConnectedHandRaisedUsers(room);
+			Integer position = room.addHandRaisedUser(handRaisedUser);
 			if(position.equals(-1)) {
 				return new ResponseEntity<>(HttpStatus.CONFLICT);
 			}
@@ -245,9 +247,8 @@ public ResponseEntity<Integer> raiseHand(@PathVariable String roomName, @Request
 	 * 
 	 * @return the httpStatus of the operation
 	 */
-	@JsonView(User.NameOnly.class)
 	@DeleteMapping("/room/{roomName}/raiseHand")
-	public ResponseEntity<?> lowerHand(@PathVariable String roomName, @RequestBody String connectionId, HttpServletRequest request) {
+	public ResponseEntity<?> lowerHand(@PathVariable String roomName, @RequestBody JSONObject connectionId, HttpServletRequest request) {
 		if (!request.isUserInRole("USER")) {
 			return new ResponseEntity<>(HttpStatus.UNAUTHORIZED);
 		}
@@ -262,20 +263,18 @@ public ResponseEntity<?> lowerHand(@PathVariable String roomName, @RequestBody S
 			this.roomServ.save(room);
 			if(wasRemoved) {
 				return new ResponseEntity<>(HttpStatus.OK);
-			} else {
-				return new ResponseEntity<>(HttpStatus.CONFLICT);
 			}
+			return new ResponseEntity<>(HttpStatus.CONFLICT);
 		} else {
 			return new ResponseEntity<>(HttpStatus.UNAUTHORIZED);
 		}
 	}
 
 	/**
-	 * Makes the user lower their hand
+	 * Gets the users who are raising their hand in that room
 	 * 
-	 * @return the httpStatus of the operation
+	 * @return the list of the users raising their hand
 	 */
-	@JsonView(User.NameOnly.class)
 	@GetMapping("/room/{roomName}/raiseHand")
 	public ResponseEntity<List<JSONObject>> getRaisedHands(@PathVariable String roomName, HttpServletRequest request) {
 		if (!request.isUserInRole("USER")) {

backend/src/main/java/urjc/ovteaching/users/User.java

@@ -125,6 +125,14 @@ public Collection<Room> getPresentedRooms() {
 		return presentedRooms;
 	}
 
+	@Override
+	public int hashCode() {
+		final int prime = 31;
+		int result = 1;
+		result = prime * result + ((name == null) ? 0 : name.hashCode());
+		return result;
+	}
+
 	@Override
 	public boolean equals(Object obj) {
 		if (this == obj)

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

@@ -86,4 +86,9 @@
 #raise_hand {
     max-width: 50%;
     max-height: 50%;
+}
+
+::ng-deep #raise_hand_button > .mat-badge-content {
+    right: -8px;
+    top: 1px;
 }

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">
+      <button mat-icon-button (click)="raiseHand()" *ngIf="localUser" id="raise_hand_button" matBadge="{{positionInHandRaiseQueue}}" [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,6 +13,7 @@ import { MatSnackBar } from '@angular/material';
 })
 export class ToolbarComponent implements OnInit {
   fullscreenIcon = 'fullscreen';
+  positionInHandRaiseQueue: number = 0;
 
   @Input() lightTheme: boolean;
   @Input() mySessionId: string;
@@ -75,7 +76,23 @@ export class ToolbarComponent implements OnInit {
   }
 
   raiseHand() {
-    this.raiseHandClicked.emit();
+    if(!this.localUser.isHandRaised()) {
+      this.roomSrv.raiseHand(this.mySessionId, this.localUser.getNickname(), this.localUser.getAvatar(), this.localUser.getConnectionId()).subscribe(
+        position => {
+          this.positionInHandRaiseQueue = position;
+          this.raiseHandClicked.emit();
+        },
+        error => console.error(error) 
+      );
+    } else {
+      this.roomSrv.lowerHand(this.mySessionId, this.localUser.getConnectionId()).subscribe(
+        (_) => {
+          this.raiseHandClicked.emit();
+        },
+        error => console.error(error) 
+      );
+    }
+    
   }
 
   getInviteURL(role:string){

frontend/src/app/shared/services/open-vidu.service.ts

@@ -36,9 +36,10 @@ export class OpenViduService {
   }
 
   syncRemoveUser(roomName: string) {
-    let xhr = new XMLHttpRequest()
-    xhr.open("DELETE",this.baseURL + '/room/' + roomName + '/user',false);
-    xhr.send();
+    fetch(this.baseURL + '/room/' + roomName + '/user', {
+      method: 'DELETE',
+      keepalive: true
+    });
   }
 
   getToken(mySessionId: string): Promise<string> {

frontend/src/app/shared/services/room.service.ts

@@ -1,7 +1,7 @@
 import { Room } from './../models/room-model';
 import { UserService, User } from './user.service';
 import { Injectable } from "@angular/core";
-import { HttpClient } from "@angular/common/http";
+import { HttpClient, HttpHeaders } from "@angular/common/http";
 import 'rxjs/Rx';
 import { Observable } from 'rxjs';
 import { map, catchError } from "rxjs/operators";
@@ -54,13 +54,46 @@ export class RoomService {
     );
   }
 
-  removeUser(roomName: string) {
-    return this.http.delete<any>(this.baseURL + '/room/' + roomName + '/user/session').pipe(
-      map((_) => {}),
+  getHandRaisedUsers(roomName: string): Observable<any> {
+    return this.http.get<any>(this.baseURL + '/room/' + roomName + '/raiseHand').pipe(
+      map(users => { return users }),
+      catchError((error) => this.handleError(error))
+    );
+  }
+
+  raiseHand(roomName: string, nickname: string, avatar: string, connectionId: string): Observable<number> {
+    let body = {
+      "nickname": nickname,
+      "avatar": avatar,
+      "connectionId": connectionId
+    };
+    return this.http.post<any>(this.baseURL + '/room/' + roomName + '/raiseHand', body).pipe(
+      map(users => { return users }),
       catchError((error) => this.handleError(error))
     );
   }
 
+  lowerHand(roomName: string, connectionId: string): Observable<any> {
+    let body = {
+      "connectionId": connectionId
+    };
+    return this.http.request<any>('delete', this.baseURL + '/room/' + roomName + '/raiseHand', { body: body }).pipe(
+      map(response => { return response }),
+      catchError((error) => this.handleError(error))
+    );
+  }
+
+  syncLowerHand(roomName: string, connectionId: string) {
+    let body = {
+      "connectionId": connectionId
+    };
+    fetch(this.baseURL + '/room/' + roomName + '/raiseHand', {
+      method: 'DELETE',
+      body: JSON.stringify(body),
+      keepalive: true
+    });
+  }
+
   private handleError(error: any) {
     console.error(error);
     return Observable.throw("Server error (" + error.status + "): " + error.message)

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

@@ -118,8 +118,11 @@ export class VideoRoomComponent implements OnInit, OnDestroy {
 
   @HostListener('window:beforeunload')
   beforeunloadHandler() {
-    this.exitSession();
     this.openViduSrv.syncRemoveUser(this.mySessionId);
+    if(this.localUsers[0].isHandRaised()) {
+      this.roomService.syncLowerHand(this.mySessionId, this.localUsers[0].getConnectionId());
+    }
+    this.exitSession();
   }
 
   @HostListener('window:resize')
@@ -288,6 +291,12 @@ export class VideoRoomComponent implements OnInit, OnDestroy {
       this.session.disconnect();
     }
     if(this.OV != null) {
+      if(this.localUsers[0].isHandRaised()) {
+        this.roomService.lowerHand(this.roomName, this.localUsers[0].getConnectionId()).subscribe(
+          (_) => {},
+          error => console.error(error) 
+        );
+      }
       this.OV = null;
       this.OVScreen = null;
       this.session = null;
@@ -718,7 +727,8 @@ export class VideoRoomComponent implements OnInit, OnDestroy {
       }
       const connection = event.connection;
       const userDisconnected = this.remoteUsers.filter((user) => user.getConnectionId() === connection.connectionId)[0];
-      this.handsRaised = this.handsRaised.filter((handRaisedUser) => handRaisedUser.connectionId !== connection.connectionId);
+      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();