Add feature to release hand raised when the tile indicator is clicked. (#2721)

* Refactor to add support for lowering hand on indicator click.

* Cleanup and lint.

* fix icon being a little off

src/tile/GridTile.tsx

@@ -92,7 +92,7 @@ const UserMediaTile = forwardRef<HTMLDivElement, UserMediaTileProps>(
       },
       [vm],
     );
-    const { raisedHands } = useReactions();
+    const { raisedHands, lowerHand } = useReactions();
 
     const MicIcon = audioEnabled ? MicOnSolidIcon : MicOffSolidIcon;
 
@@ -111,6 +111,8 @@ const UserMediaTile = forwardRef<HTMLDivElement, UserMediaTileProps>(
     );
 
     const handRaised: Date | undefined = raisedHands[vm.member?.userId ?? ""];
+    const raisedHandOnClick =
+      vm.local && handRaised ? (): void => void lowerHand() : undefined;
 
     const showSpeaking = showSpeakingIndicators && speaking;
 
@@ -153,6 +155,7 @@ const UserMediaTile = forwardRef<HTMLDivElement, UserMediaTileProps>(
           </Menu>
         }
         raisedHandTime={handRaised}
+        raisedHandOnClick={raisedHandOnClick}
         {...props}
       />
     );

src/tile/MediaView.tsx

@@ -35,6 +35,7 @@ interface Props extends ComponentProps<typeof animated.div> {
   displayName: string;
   primaryButton?: ReactNode;
   raisedHandTime?: Date;
+  raisedHandOnClick?: () => void;
 }
 
 export const MediaView = forwardRef<HTMLDivElement, Props>(
@@ -54,6 +55,7 @@ export const MediaView = forwardRef<HTMLDivElement, Props>(
       displayName,
       primaryButton,
       raisedHandTime,
+      raisedHandOnClick,
       ...props
     },
     ref,
@@ -97,6 +99,7 @@ export const MediaView = forwardRef<HTMLDivElement, Props>(
             raisedHandTime={raisedHandTime}
             minature={avatarSize < 96}
             showTimer={handRaiseTimerVisible}
+            onClick={raisedHandOnClick}
           />
           <div className={styles.nameTag}>
             {nameTagLeadingIcon}