기존) 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/