Merge branch 'livekit' into toger5/tiles_based_on_rtc_member

src/tile/GridTile.tsx

@@ -10,6 +10,7 @@ import {
   ReactNode,
   forwardRef,
   useCallback,
+  useRef,
   useState,
 } from "react";
 import { animated } from "@react-spring/web";
@@ -44,6 +45,8 @@ import {
 import { Slider } from "../Slider";
 import { MediaView } from "./MediaView";
 import { useLatest } from "../useLatest";
+import { GridTileViewModel } from "../state/TileViewModel";
+import { useMergedRefs } from "../useMergedRefs";
 import { useReactions } from "../useReactions";
 
 interface TileProps {
@@ -52,7 +55,6 @@ interface TileProps {
   targetWidth: number;
   targetHeight: number;
   displayName: string;
-  showVideo: boolean;
   showSpeakingIndicators: boolean;
 }
 
@@ -67,7 +69,6 @@ const UserMediaTile = forwardRef<HTMLDivElement, UserMediaTileProps>(
   (
     {
       vm,
-      showVideo,
       showSpeakingIndicators,
       menuStart,
       menuEnd,
@@ -80,6 +81,7 @@ const UserMediaTile = forwardRef<HTMLDivElement, UserMediaTileProps>(
     const { t } = useTranslation();
     const video = useObservableEagerState(vm.video);
     const unencryptedWarning = useObservableEagerState(vm.unencryptedWarning);
+    const encryptionStatus = useObservableEagerState(vm.encryptionStatus);
     const audioEnabled = useObservableEagerState(vm.audioEnabled);
     const videoEnabled = useObservableEagerState(vm.videoEnabled);
     const speaking = useObservableEagerState(vm.speaking);
@@ -94,7 +96,7 @@ const UserMediaTile = forwardRef<HTMLDivElement, UserMediaTileProps>(
       },
       [vm],
     );
-    const { raisedHands } = useReactions();
+    const { raisedHands, lowerHand } = useReactions();
 
     const MicIcon = audioEnabled ? MicOnSolidIcon : MicOffSolidIcon;
 
@@ -113,6 +115,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;
 
@@ -122,7 +126,8 @@ const UserMediaTile = forwardRef<HTMLDivElement, UserMediaTileProps>(
         video={video}
         member={vm.member}
         unencryptedWarning={unencryptedWarning}
-        videoEnabled={videoEnabled && showVideo}
+        encryptionStatus={encryptionStatus}
+        videoEnabled={videoEnabled}
         videoFit={cropVideo ? "cover" : "contain"}
         className={classNames(className, styles.tile, {
           [styles.speaking]: showSpeaking,
@@ -158,6 +163,7 @@ const UserMediaTile = forwardRef<HTMLDivElement, UserMediaTileProps>(
           </Menu>
         }
         raisedHandTime={handRaised}
+        raisedHandOnClick={raisedHandOnClick}
         {...props}
       />
     );
@@ -287,25 +293,27 @@ const RemoteUserMediaTile = forwardRef<
 RemoteUserMediaTile.displayName = "RemoteUserMediaTile";
 
 interface GridTileProps {
-  vm: UserMediaViewModel;
+  vm: GridTileViewModel;
   onOpenProfile: (() => void) | null;
   targetWidth: number;
   targetHeight: number;
   className?: string;
   style?: ComponentProps<typeof animated.div>["style"];
-  showVideo: boolean;
   showSpeakingIndicators: boolean;
 }
 
 export const GridTile = forwardRef<HTMLDivElement, GridTileProps>(
-  ({ vm, onOpenProfile, ...props }, ref) => {
-    const displayName = useDisplayName(vm);
+  ({ vm, onOpenProfile, ...props }, theirRef) => {
+    const ourRef = useRef<HTMLDivElement | null>(null);
+    const ref = useMergedRefs(ourRef, theirRef);
+    const media = useObservableEagerState(vm.media);
+    const displayName = useDisplayName(media);
 
-    if (vm instanceof LocalUserMediaViewModel) {
+    if (media instanceof LocalUserMediaViewModel) {
       return (
         <LocalUserMediaTile
           ref={ref}
-          vm={vm}
+          vm={media}
           onOpenProfile={onOpenProfile}
           displayName={displayName}
           {...props}
@@ -315,7 +323,7 @@ export const GridTile = forwardRef<HTMLDivElement, GridTileProps>(
       return (
         <RemoteUserMediaTile
           ref={ref}
-          vm={vm}
+          vm={media}
           displayName={displayName}
           {...props}
         />