feat(raise-han) add CTA for opening participants pane on notification

lang/main.json

@@ -821,6 +821,7 @@
         "videoUnmuteBlockedDescription": "Camera unmute and desktop sharing operation have been temporarily blocked because of system limits.",
         "videoUnmuteBlockedTitle": "Camera unmute and desktop sharing blocked!",
         "viewLobby": "View lobby",
+        "viewParticipants": "View participants",
         "viewVisitors": "View visitors",
         "waitingParticipants": "{{waitingParticipants}} people",
         "waitingVisitors": "Visitors waiting in queue: {{waitingVisitors}}",

react/features/base/participants/middleware.ts

@@ -14,6 +14,7 @@ import {
     NOTIFICATION_TIMEOUT_TYPE,
     RAISE_HAND_NOTIFICATION_ID
 } from '../../notifications/constants';
+import { open as openParticipantsPane } from '../../participants-pane/actions';
 import { isForceMuted } from '../../participants-pane/functions';
 import { CALLING, INVITED } from '../../presence-status/constants';
 import { RAISE_HAND_SOUND_ID } from '../../reactions/constants';
@@ -783,10 +784,19 @@ function _raiseHandUpdated({ dispatch, getState }: IStore, conference: IJitsiCon
             || isForceMuted(participant, MEDIA_TYPE.VIDEO, state);
     }
 
-    const action = shouldDisplayAllowAction ? {
-        customActionNameKey: [ 'notify.allowAction' ],
-        customActionHandler: [ () => dispatch(approveParticipant(participantId)) ]
-    } : {};
+    let action;
+
+    if (shouldDisplayAllowAction) {
+        action = {
+            customActionNameKey: [ 'notify.allowAction' ],
+            customActionHandler: [ () => dispatch(approveParticipant(participantId)) ]
+        };
+    } else {
+        action = {
+            customActionNameKey: [ 'notify.viewParticipants' ],
+            customActionHandler: [ () => dispatch(openParticipantsPane()) ]
+        };
+    }
 
     if (raisedHandTimestamp) {
         let notificationTitle;
@@ -810,7 +820,7 @@ function _raiseHandUpdated({ dispatch, getState }: IStore, conference: IJitsiCon
             concatText: true,
             uid: RAISE_HAND_NOTIFICATION_ID,
             ...action
-        }, shouldDisplayAllowAction ? NOTIFICATION_TIMEOUT_TYPE.MEDIUM : NOTIFICATION_TIMEOUT_TYPE.SHORT));
+        }, NOTIFICATION_TIMEOUT_TYPE.MEDIUM));
         dispatch(playSound(RAISE_HAND_SOUND_ID));
     }
 }

react/features/base/participants/subscriber.ts

@@ -3,8 +3,8 @@ import _ from 'lodash';
 import { batch } from 'react-redux';
 
 import { IStore } from '../../app/types';
-import { showNotification } from '../../notifications/actions';
-import { NOTIFICATION_TIMEOUT_TYPE } from '../../notifications/constants';
+import { hideNotification, showNotification } from '../../notifications/actions';
+import { NOTIFICATION_TIMEOUT_TYPE, RAISE_HAND_NOTIFICATION_ID } from '../../notifications/constants';
 import { getCurrentConference } from '../conference/functions';
 import { getSsrcRewritingFeatureFlag, hasBeenNotified, isNextToSpeak } from '../config/functions.any';
 import { VIDEO_TYPE } from '../media/constants';
@@ -36,6 +36,9 @@ StateListenerRegistry.register(
         if (raisedHandsQueue.length && isNextToSpeak(store.getState()) && !hasBeenNotified(store.getState())) {
             _notifyNextSpeakerInRaisedHandQueue(store);
         }
+        if (!raisedHandsQueue[0]) {
+            store.dispatch(hideNotification(RAISE_HAND_NOTIFICATION_ID));
+        }
     }
 );