Fix participant tile always rendering camera track (livekit#498)

lukasIO · web-flow · commit cfba2c7391c2 · 2023-06-05T13:11:52.000+02:00
diff --git a/.changeset/khaki-mice-worry.md b/.changeset/khaki-mice-worry.md
@@ -0,0 +1,5 @@
+---
+"@livekit/components-react": patch
+---
+
+Fix participant tile always rendering camera track
diff --git a/packages/react/src/components/participant/ParticipantTile.tsx b/packages/react/src/components/participant/ParticipantTile.tsx
@@ -11,6 +11,7 @@ import {
   ParticipantContext,
   useEnsureParticipant,
   useMaybeLayoutContext,
+  useMaybeTrackContext,
 } from '../../context';
 import { useIsMuted, useIsSpeaking } from '../../hooks';
 import { mergeProps } from '../../utils';
@@ -114,12 +115,17 @@ export const ParticipantTile = ({
   ...htmlProps
 }: ParticipantTileProps) => {
   const p = useEnsureParticipant(participant);
-
-  const { elementProps } = useParticipantTile<HTMLDivElement>({
+  const trackRef: TrackReferenceOrPlaceholder = useMaybeTrackContext() ?? {
     participant: p,
-    htmlProps,
     source,
     publication,
+  };
+
+  const { elementProps } = useParticipantTile<HTMLDivElement>({
+    participant: trackRef.participant,
+    htmlProps,
+    source: trackRef.source,
+    publication: trackRef.publication,
     disableSpeakingIndicator,
     onParticipantClick,
   });
@@ -129,37 +135,37 @@ export const ParticipantTile = ({
   const handleSubscribe = React.useCallback(
     (subscribed: boolean) => {
       if (
-        source &&
+        trackRef.source &&
         !subscribed &&
         layoutContext &&
         layoutContext.pin.dispatch &&
-        isParticipantSourcePinned(p, source, layoutContext.pin.state)
+        isParticipantSourcePinned(trackRef.participant, trackRef.source, layoutContext.pin.state)
       ) {
         layoutContext.pin.dispatch({ msg: 'clear_pin' });
       }
     },
-    [p, layoutContext, source],
+    [trackRef.participant, layoutContext, trackRef.source],
   );
 
   return (
     <div style={{ position: 'relative' }} {...elementProps}>
-      <ParticipantContextIfNeeded participant={p}>
+      <ParticipantContextIfNeeded participant={trackRef.participant}>
         {children ?? (
           <>
-            {publication?.kind === 'video' ||
-            source === Track.Source.Camera ||
-            source === Track.Source.ScreenShare ? (
+            {trackRef.publication?.kind === 'video' ||
+            trackRef.source === Track.Source.Camera ||
+            trackRef.source === Track.Source.ScreenShare ? (
               <VideoTrack
-                participant={p}
-                source={source}
-                publication={publication}
+                participant={trackRef.participant}
+                source={trackRef.source}
+                publication={trackRef.publication}
                 onSubscriptionStatusChanged={handleSubscribe}
               />
             ) : (
               <AudioTrack
-                participant={p}
-                source={source}
-                publication={publication}
+                participant={trackRef.participant}
+                source={trackRef.source}
+                publication={trackRef.publication}
                 onSubscriptionStatusChanged={handleSubscribe}
               />
             )}
@@ -168,7 +174,7 @@ export const ParticipantTile = ({
             </div>
             <div className="lk-participant-metadata">
               <div className="lk-participant-metadata-item">
-                {source === Track.Source.Camera ? (
+                {trackRef.source === Track.Source.Camera ? (
                   <>
                     <TrackMutedIndicator
                       source={Track.Source.Microphone}
@@ -187,7 +193,7 @@ export const ParticipantTile = ({
             </div>
           </>
         )}
-        <FocusToggle trackSource={source} />
+        <FocusToggle trackSource={trackRef.source} />
       </ParticipantContextIfNeeded>
     </div>
   );

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"@livekit/components-react": patch
 +---
++
 +Fix participant tile always rendering camera track