Merge branch 'livekit' into toger5/tiles_based_on_rtc_member

src/tile/GridTile.test.tsx

@@ -44,6 +44,8 @@ test("GridTile is accessible", async () => {
           off: () => {},
           client: {
             getUserId: () => null,
+            on: () => {},
+            off: () => {},
           },
         },
         memberships: [],

src/tile/GridTile.tsx

@@ -48,6 +48,7 @@ import { useLatest } from "../useLatest";
 import { GridTileViewModel } from "../state/TileViewModel";
 import { useMergedRefs } from "../useMergedRefs";
 import { useReactions } from "../useReactions";
+import { ReactionOption } from "../reactions";
 
 interface TileProps {
   className?: string;
@@ -93,7 +94,7 @@ const UserMediaTile = forwardRef<HTMLDivElement, UserMediaTileProps>(
       },
       [vm],
     );
-    const { raisedHands, lowerHand } = useReactions();
+    const { raisedHands, lowerHand, reactions } = useReactions();
 
     const MicIcon = audioEnabled ? MicOnSolidIcon : MicOffSolidIcon;
 
@@ -112,6 +113,8 @@ const UserMediaTile = forwardRef<HTMLDivElement, UserMediaTileProps>(
     );
 
     const handRaised: Date | undefined = raisedHands[vm.member?.userId ?? ""];
+    const currentReaction: ReactionOption | undefined =
+      reactions[vm.member?.userId ?? ""];
     const raisedHandOnClick =
       vm.local && handRaised ? (): void => void lowerHand() : undefined;
 
@@ -157,6 +160,7 @@ const UserMediaTile = forwardRef<HTMLDivElement, UserMediaTileProps>(
           </Menu>
         }
         raisedHandTime={handRaised}
+        currentReaction={currentReaction}
         raisedHandOnClick={raisedHandOnClick}
         {...props}
       />

src/tile/MediaView.tsx

@@ -20,6 +20,8 @@ import { Avatar } from "../Avatar";
 import { EncryptionStatus } from "../state/MediaViewModel";
 import { RaisedHandIndicator } from "../reactions/RaisedHandIndicator";
 import { showHandRaisedTimer, useSetting } from "../settings/settings";
+import { ReactionOption } from "../reactions";
+import { ReactionIndicator } from "../reactions/ReactionIndicator";
 
 interface Props extends ComponentProps<typeof animated.div> {
   className?: string;
@@ -37,6 +39,7 @@ interface Props extends ComponentProps<typeof animated.div> {
   displayName: string;
   primaryButton?: ReactNode;
   raisedHandTime?: Date;
+  currentReaction?: ReactionOption;
   raisedHandOnClick?: () => void;
 }
 
@@ -58,6 +61,7 @@ export const MediaView = forwardRef<HTMLDivElement, Props>(
       primaryButton,
       encryptionStatus,
       raisedHandTime,
+      currentReaction,
       raisedHandOnClick,
       ...props
     },
@@ -98,7 +102,22 @@ export const MediaView = forwardRef<HTMLDivElement, Props>(
           )}
         </div>
         <div className={styles.fg}>
-          {encryptionStatus !== EncryptionStatus.Okay && (
+          <div style={{ display: "flex" }}>
+            <RaisedHandIndicator
+              raisedHandTime={raisedHandTime}
+              miniature={avatarSize < 96}
+              showTimer={handRaiseTimerVisible}
+              onClick={raisedHandOnClick}
+            />
+            {currentReaction && (
+              <ReactionIndicator
+                miniature={avatarSize < 96}
+                emoji={currentReaction.emoji}
+              />
+            )}
+          </div>
+          {/* TODO: Bring this back once encryption status is less broken */}
+          {/*encryptionStatus !== EncryptionStatus.Okay && (
             <div className={styles.status}>
               <Text as="span" size="sm" weight="medium" className={styles.name}>
                 {encryptionStatus === EncryptionStatus.Connecting &&
@@ -111,13 +130,7 @@ export const MediaView = forwardRef<HTMLDivElement, Props>(
                   t("e2ee_encryption_status.password_invalid")}
               </Text>
             </div>
-          )}
-          <RaisedHandIndicator
-            raisedHandTime={raisedHandTime}
-            miniature={avatarSize < 96}
-            showTimer={handRaiseTimerVisible}
-            onClick={raisedHandOnClick}
-          />
+          )*/}
           <div className={styles.nameTag}>
             {nameTagLeadingIcon}
             <Text as="span" size="sm" weight="medium" className={styles.name}>