studio/meet
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

♻️(frontend) disable participant's tile metadata

Browse Source 
Inspired by the props disableSpeakingIndicator, used the same
logic for all metadata displayed on hover on a participant's tile.

Why? I'll need to render the joining participant tile without any
metadata, so the participant see who is joining the room.
This commit is contained in:
lebaudantoine
2024-09-09 22:21:05 +02:00
committed by aleb_the_flash
parent dd9a87a33b
commit a55a4d5b5d
1 changed files with 56 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

101
src/frontend/src/features/rooms/livekit/components/ParticipantTile.tsx
View File

@@ -44,19 +44,24 @@ export function TrackRefContextIfNeeded(
) )
} }
interface ParticipantTileExtendedProps extends ParticipantTileProps {
disableMetadata?: boolean
}
export const ParticipantTile: ( export const ParticipantTile: (
props: ParticipantTileProps & React.RefAttributes<HTMLDivElement> props: ParticipantTileExtendedProps & React.RefAttributes<HTMLDivElement>
) => React.ReactNode = /* @__PURE__ */ React.forwardRef< ) => React.ReactNode = /* @__PURE__ */ React.forwardRef<
HTMLDivElement, HTMLDivElement,
ParticipantTileProps ParticipantTileExtendedProps
>(function ParticipantTile( >(function ParticipantTile(
{ {
trackRef, trackRef,
children, children,
onParticipantClick, onParticipantClick,
disableSpeakingIndicator, disableSpeakingIndicator,
disableMetadata,
...htmlProps ...htmlProps
}: ParticipantTileProps, }: ParticipantTileExtendedProps,
ref ref
) { ) {
const trackReference = useEnsureTrackRef(trackRef) const trackReference = useEnsureTrackRef(trackRef)
@@ -119,50 +124,56 @@ export const ParticipantTile: (
participant={trackReference.participant} participant={trackReference.participant}
/> />
</div> </div>
<div className="lk-participant-metadata"> {!disableMetadata && (
<HStack gap={0.25}> <div className="lk-participant-metadata">
<MutedMicIndicator participant={trackReference.participant} /> <HStack gap={0.25}>
<div <MutedMicIndicator
className="lk-participant-metadata-item" participant={trackReference.participant}
style={{ />
minHeight: '24px', <div
backgroundColor: isHandRaised ? 'white' : undefined, className="lk-participant-metadata-item"
color: isHandRaised ? 'black' : undefined, style={{
transition: 'background 200ms ease, color 400ms ease', minHeight: '24px',
}} backgroundColor: isHandRaised ? 'white' : undefined,
> color: isHandRaised ? 'black' : undefined,
{trackReference.source === Track.Source.Camera ? ( transition: 'background 200ms ease, color 400ms ease',
<> }}
{isHandRaised && ( >
<RiHand {trackReference.source === Track.Source.Camera ? (
color="black" <>
size={16} {isHandRaised && (
style={{ <RiHand
marginInlineEnd: '.25rem', // fixme - match TrackMutedIndicator styling color="black"
animationDuration: '300ms', size={16}
animationName: 'wave_hand', style={{
animationIterationCount: '2', marginInlineEnd: '.25rem', // fixme - match TrackMutedIndicator styling
}} animationDuration: '300ms',
/> animationName: 'wave_hand',
)} animationIterationCount: '2',
{isEncrypted && ( }}
<LockLockedIcon style={{ marginRight: '0.25rem' }} /> />
)} )}
<ParticipantName /> {isEncrypted && (
</> <LockLockedIcon
) : ( style={{ marginRight: '0.25rem' }}
<> />
<ScreenShareIcon style={{ marginRight: '0.25rem' }} /> )}
<ParticipantName>&apos;s screen</ParticipantName> <ParticipantName />
</> </>
)} ) : (
</div> <>
</HStack> <ScreenShareIcon style={{ marginRight: '0.25rem' }} />
<ConnectionQualityIndicator className="lk-participant-metadata-item" /> <ParticipantName>&apos;s screen</ParticipantName>
</div> </>
)}
</div>
</HStack>
<ConnectionQualityIndicator className="lk-participant-metadata-item" />
</div>
)}
</> </>
)} )}
<FocusToggle trackRef={trackReference} /> {!disableMetadata && <FocusToggle trackRef={trackReference} />}
</ParticipantContextIfNeeded> </ParticipantContextIfNeeded>
</TrackRefContextIfNeeded> </TrackRefContextIfNeeded>
</div> </div>