Adjust Raised Hands button and toast visibility

ts/components/CallScreen.stories.tsx

@@ -108,6 +108,18 @@ const getConversationsByDemuxId = (overrideProps: GroupCallOverrideProps) => {
   return conversationsByDemuxId;
 };
 
+const getRaisedHands = (overrideProps: GroupCallOverrideProps) => {
+  if (!overrideProps.remoteParticipants) {
+    return;
+  }
+
+  return new Set<number>(
+    overrideProps.remoteParticipants
+      .filter(participant => participant.isHandRaised)
+      .map(participant => participant.demuxId)
+  );
+};
+
 const createActiveGroupCallProp = (overrideProps: GroupCallOverrideProps) => ({
   callMode: CallMode.Group as CallMode.Group,
   connectionState:
@@ -124,7 +136,10 @@ const createActiveGroupCallProp = (overrideProps: GroupCallOverrideProps) => ({
   isConversationTooBigToRing: false,
   peekedParticipants:
     overrideProps.peekedParticipants || overrideProps.remoteParticipants || [],
-  raisedHands: overrideProps.raisedHands || new Set<number>(),
+  raisedHands:
+    overrideProps.raisedHands ||
+    getRaisedHands(overrideProps) ||
+    new Set<number>(),
   remoteParticipants: overrideProps.remoteParticipants || [],
   remoteAudioLevels: new Map<number, number>(
     overrideProps.remoteParticipants?.map((_participant, index) => [

ts/components/CallScreen.tsx

@@ -567,8 +567,8 @@ export function CallScreen({
           });
       }
       return (
-        <div className="CallingReactionsToast__Content">
-          <span className="CallingReactionsToast__HandIcon" />
+        <div className="CallingRaisedHandsToast__Content">
+          <span className="CallingRaisedHandsToast__HandIcon" />
           {message}
           {buttonOverride || (
             <button
@@ -709,12 +709,6 @@ export function CallScreen({
       )}
       {remoteParticipantsElement}
       {lonelyInCallNode}
-      <CallingReactionsToastsContainer
-        reactions={reactions}
-        conversationsByDemuxId={conversationsByDemuxId}
-        localDemuxId={localDemuxId}
-        i18n={i18n}
-      />
       {raisedHands && raisedHandsCount > 0 && (
         <>
           <button
@@ -748,6 +742,19 @@ export function CallScreen({
           )}
         </>
       )}
+      <CallingReactionsToastsContainer
+        reactions={reactions}
+        conversationsByDemuxId={conversationsByDemuxId}
+        localDemuxId={localDemuxId}
+        i18n={i18n}
+      />
+      <CallingButtonToastsContainer
+        hasLocalAudio={hasLocalAudio}
+        outgoingRing={undefined}
+        raisedHands={raisedHands}
+        renderRaisedHandsToast={renderRaisedHandsToast}
+        i18n={i18n}
+      />
       <div className="module-ongoing-call__footer">
         <div className="module-calling__spacer CallControls__OuterSpacer" />
         <div
@@ -762,14 +769,6 @@ export function CallScreen({
             <div className="CallControls__Status">{callStatus}</div>
           </div>
 
-          <CallingButtonToastsContainer
-            hasLocalAudio={hasLocalAudio}
-            outgoingRing={undefined}
-            raisedHands={raisedHands}
-            renderRaisedHandsToast={renderRaisedHandsToast}
-            i18n={i18n}
-          />
-
           {showMoreOptions && (
             <div className="CallControls__MoreOptionsContainer">
               <div

ts/components/CallingLobby.tsx

@@ -274,6 +274,11 @@ export function CallingLobby({
           {i18n('icu:calling__your-video-is-off')}
         </div>
 
+        <CallingButtonToastsContainer
+          hasLocalAudio={hasLocalAudio}
+          outgoingRing={outgoingRing}
+          i18n={i18n}
+        />
         <div className="CallingLobby__Footer">
           <div className="module-calling__spacer CallControls__OuterSpacer" />
           <div className="CallControls">
@@ -283,11 +288,6 @@ export function CallingLobby({
               </div>
               <div className="CallControls__Status">{callStatus}</div>
             </div>
-            <CallingButtonToastsContainer
-              hasLocalAudio={hasLocalAudio}
-              outgoingRing={outgoingRing}
-              i18n={i18n}
-            />
             <div className="CallControls__ButtonContainer">
               <CallingButton
                 buttonType={videoButtonType}

ts/components/CallingToastManager.tsx

@@ -249,8 +249,10 @@ export function CallingButtonToastsContainer(
       maxNonPersistentToasts={1}
       region={toastRegionRef}
     >
-      <div className="CallingButtonToasts" ref={toastRegionRef} />
-      <CallingButtonToasts {...props} />
+      <div className="CallingButtonToasts__outer">
+        <div className="CallingButtonToasts" ref={toastRegionRef} />
+        <CallingButtonToasts {...props} />
+      </div>
     </CallingToastProvider>
   );
 }