κΈ°μ‘΄) javascript λ¬Έλ²μΌλ‘ νμ©νλ λΆλΆ
{localTracks.map((track, index) => (
<div
key={`${track.participant.sid}-${index}`}
className={`${S.participantOverlay} ${activeParticipantSid === track.participant.sid ? S.active : ""}`}
onClick={isLocalOverlay ? (e) => checkClickHandle(e, track.participant, index) : undefined}
>
<ParticipantTile
trackRef={track}
disableSpeakingIndicator={true}
className={isLocalOverlay ? S.localCam : undefined}
/>
<div className={`${S.imageOverlay} ${isReady ? S.active : ""}`}>
<Image src={CamCheck} alt={track.participant.sid} />
</div>
</div>
))}
νμ¬) LiveKit μ»΄ν¬λνΈ μ¬μ©
<TrackLoop tracks={localTracks}>
<div
className={`${S.participantOverlay} ${activePlayerId === localParticipant.identity ? S.active : ""}`}
onClick={isLocalOverlay ? (e) => checkClickHandle(e, localParticipant.identity) : undefined}
>
<ParticipantTile disableSpeakingIndicator={true} className={isLocalOverlay ? S.localCam : undefined} />
<div className={`${S.imageOverlay} ${isReady ? S.active : ""}`}>
<Image src={CamCheck} alt={localParticipant.identity} />
</div>
</div>
</TrackLoop>
TrackLoop λ΄λΆ λͺ¨μ΅
export function TrackLoop({ tracks, ...props }: TrackLoopProps) {
return (
<>
{tracks.map((trackReference) => {
return (
<TrackRefContext.Provider
value={trackReference}
key={getTrackReferenceId(trackReference)}
>
{cloneSingleChild(props.children)}
</TrackRefContext.Provider>
);
})}
</>
);
}
κ° valueκ°μ μ κ·Όνλ λ°©λ²
<TrackRefContext.Consumer>
{(track) => ())}
export function ParticipantTile({
trackRef,
children,
onParticipantClick,
disableSpeakingIndicator,
...htmlProps
}: ParticipantTileProps)
μ΄ λκ°μ§λ₯Ό νμ©νλ©΄ λλ€.
https://docs.livekit.io/reference/components/react/concepts/loops/