diff --git a/src/components/media-elements/videos/video/index.tsx b/src/components/media-elements/videos/video/index.tsx index f1b3cf28..fb865866 100644 --- 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 ( -
-
- -
- {displayPinIcon ? : null} - - - {document.pictureInPictureEnabled ? ( +
+ +
+
+ +
+ {displayPinIcon ? : null} - ) : null} - + + {document.pictureInPictureEnabled ? ( + + ) : null} + +
diff --git a/src/components/media-elements/videos/video/participant.tsx b/src/components/media-elements/videos/video/participant.tsx new file mode 100644 index 00000000..6d92a879 --- /dev/null +++ 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 ( +
+ {name} {isLocal ? '(me)' : null} + {raisedHand ? : null} +
+ ); +}; + +export default Participant; diff --git a/src/components/media-elements/videos/videoParticipant.tsx b/src/components/media-elements/videos/videoParticipant.tsx index c0111d34..c3411fed 100644 --- 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 = ( -
-
- {participant.name} {participantType.isLocal ? '(me)' : null} -
- -
+ /> ); elements.push(elm); }