feat: display raised hand in webcam too

mynaparrot · Feb 13, 2025 · 0cb8c58 · 0cb8c58
1 parent 1587e22
commit 0cb8c58
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 30 deletions.
diff --git a/src/components/media-elements/videos/video/index.tsx b/src/components/media-elements/videos/video/index.tsx
@@ -6,14 +6,20 @@ import PinWebcam from './pinWebcam';
 import MicStatus from './micStatus';
 import ConnectionStatus from './connectionStatus';
 import { sleep } from '../../../../helpers/utils';
+import Participant from './participant';
 
 export interface IVideoComponentProps {
   userId: string;
+  name: string;
+  isLocal: boolean;
   track: RemoteTrackPublication | LocalTrackPublication;
   displayPinIcon: boolean;
 }
+
 const VideoComponent = ({
   userId,
+  name,
+  isLocal,
   track,
   displayPinIcon,
 }: IVideoComponentProps) => {
@@ -43,27 +49,30 @@ const VideoComponent = ({
   };
 
   return (
-    <div className="camera-modules">
-      <div className="camera-video-player">
-        <VideoElm track={track} setVideoRef={setVideoRef} />
-        <div className="cam-icons w-max h-auto flex items-center gap-2 absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-[999] transition-all duration-300 opacity-0 group-hover:opacity-100">
-          {displayPinIcon ? <PinWebcam userId={userId} /> : null}
-          <button
-            className="cam-fullscreen cursor-pointer w-7 h-7 rounded-full bg-Gray-950/50 shadow-shadowXS flex items-center justify-center"
-            onClick={fullScreen}
-          >
-            <i className="icon pnm-fullscreen text[14px] text-white" />
-          </button>
-          <MicStatus userId={userId} />
-          {document.pictureInPictureEnabled ? (
+    <div className="video-camera-item-inner w-full h-full relative">
+      <Participant userId={userId} name={name} isLocal={isLocal} />
+      <div className="camera-modules">
+        <div className="camera-video-player">
+          <VideoElm track={track} setVideoRef={setVideoRef} />
+          <div className="cam-icons w-max h-auto flex items-center gap-2 absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-[999] transition-all duration-300 opacity-0 group-hover:opacity-100">
+            {displayPinIcon ? <PinWebcam userId={userId} /> : null}
             <button
-              className="cam-pip cursor-pointer w-7 h-7 rounded-full bg-Gray-950/50 shadow-shadowXS flex items-center justify-center"
-              onClick={pictureInPicture}
+              className="cam-fullscreen cursor-pointer w-7 h-7 rounded-full bg-Gray-950/50 shadow-shadowXS flex items-center justify-center"
+              onClick={fullScreen}
             >
-              <i className="icon pnm-pip text-[14px] text-white" />
+              <i className="icon pnm-fullscreen text[14px] text-white" />
             </button>
-          ) : null}
-          <ConnectionStatus userId={userId} />
+            <MicStatus userId={userId} />
+            {document.pictureInPictureEnabled ? (
+              <button
+                className="cam-pip cursor-pointer w-7 h-7 rounded-full bg-Gray-950/50 shadow-shadowXS flex items-center justify-center"
+                onClick={pictureInPicture}
+              >
+                <i className="icon pnm-pip text-[14px] text-white" />
+              </button>
+            ) : null}
+            <ConnectionStatus userId={userId} />
+          </div>
         </div>
       </div>
     </div>

diff --git a/src/components/media-elements/videos/video/participant.tsx b/src/components/media-elements/videos/video/participant.tsx
@@ -0,0 +1,26 @@
+import React from 'react';
+import { useAppSelector } from '../../../../store';
+import { participantsSelector } from '../../../../store/slices/participantSlice';
+import { HandsIconSVG } from '../../../../assets/Icons/HandsIconSVG';
+
+export interface IParticipantProps {
+  userId: string;
+  name: string;
+  isLocal: boolean;
+}
+
+const Participant = ({ userId, name, isLocal }: IParticipantProps) => {
+  const raisedHand = useAppSelector(
+    (state) =>
+      participantsSelector.selectById(state, userId)?.metadata.raisedHand,
+  );
+
+  return (
+    <div className="name absolute bottom-4 left-4 text-sm font-medium text-white z-10">
+      {name} {isLocal ? '(me)' : null}
+      {raisedHand ? <HandsIconSVG classes="h-4 w-auto" /> : null}
+    </div>
+  );
+};
+
+export default Participant;
diff --git a/src/components/media-elements/videos/videoParticipant.tsx b/src/components/media-elements/videos/videoParticipant.tsx
@@ -30,19 +30,14 @@ const VideoParticipant = ({
     for (const track of participant.videoTrackPublications.values()) {
       if (track.source === Track.Source.Camera) {
         const elm = (
-          <div
-            className="video-camera-item-inner w-full h-full relative"
+          <VideoComponent
+            userId={participant.identity}
+            name={participant.name ?? ''}
+            isLocal={participantType.isLocal}
+            track={track}
+            displayPinIcon={displayPinIcon}
             key={track.trackSid}
-          >
-            <div className="name absolute bottom-4 left-4 text-sm font-medium text-white z-10">
-              {participant.name} {participantType.isLocal ? '(me)' : null}
-            </div>
-            <VideoComponent
-              userId={participant.identity}
-              track={track}
-              displayPinIcon={displayPinIcon}
-            />
-          </div>
+          />
         );
         elements.push(elm);
       }