Update focused placeholder to trackRef (#874)

livekit · Jun 3, 2024 · 0761e96 · 0761e96
1 parent ca0847f
commit 0761e96
Show file tree

Hide file tree

Showing 7 changed files with 198 additions and 562 deletions.
diff --git a/.changeset/nervous-rocks-peel.md b/.changeset/nervous-rocks-peel.md
@@ -0,0 +1,5 @@
+---
+"@livekit/components-react": patch
+---
+
+Update focused placeholder to trackRef
diff --git a/.github/workflows/release.yaml b/.github/workflows/release.yaml
@@ -15,7 +15,7 @@ jobs:
       - uses: actions/checkout@v4
       - uses: pnpm/action-setup@v2
         with:
-          version: 8
+          version: 9
       - name: Use Node.js 20
         uses: actions/setup-node@v4
         with:

diff --git a/.github/workflows/size-limit.yaml b/.github/workflows/size-limit.yaml
@@ -13,7 +13,7 @@ jobs:
       - uses: actions/checkout@v4
       - uses: pnpm/action-setup@v2
         with:
-          version: 8
+          version: 9
       - name: Use Node.js 20
         uses: actions/setup-node@v4
         with:

diff --git a/.github/workflows/test.yaml b/.github/workflows/test.yaml
@@ -18,7 +18,7 @@ jobs:
 
       - uses: pnpm/action-setup@v2
         with:
-          version: 8
+          version: 9
       - name: Use Node.js 20
         uses: actions/setup-node@v4
         with:

diff --git a/packages/react/src/hooks/useFocusToggle.ts b/packages/react/src/hooks/useFocusToggle.ts
@@ -29,7 +29,7 @@ export function useFocusToggle({ trackRef, props }: UseFocusToggleProps) {
 
   const inFocus: boolean = React.useMemo(() => {
     return isTrackReferencePinned(trackReference, layoutContext?.pin.state);
-  }, [trackRef, layoutContext?.pin.state]);
+  }, [trackReference, layoutContext?.pin.state]);
 
   const mergedProps = React.useMemo(
     () =>
@@ -52,7 +52,7 @@ export function useFocusToggle({ trackRef, props }: UseFocusToggleProps) {
           }
         },
       }),
-    [props, className, trackRef, inFocus, layoutContext?.pin],
+    [props, className, trackReference, inFocus, layoutContext?.pin],
   );
 
   return { mergedProps, inFocus };

diff --git a/packages/react/src/prefabs/VideoConference.tsx b/packages/react/src/prefabs/VideoConference.tsx
@@ -110,11 +110,22 @@ export function VideoConference({
       layoutContext.pin.dispatch?.({ msg: 'clear_pin' });
       lastAutoFocusedScreenShareTrack.current = null;
     }
+    if (focusTrack && !isTrackReference(focusTrack)) {
+      const updatedFocusTrack = tracks.find(
+        (tr) =>
+          tr.participant.identity === focusTrack.participant.identity &&
+          tr.source === focusTrack.source,
+      );
+      if (updatedFocusTrack !== focusTrack && isTrackReference(updatedFocusTrack)) {
+        layoutContext.pin.dispatch?.({ msg: 'set_pin', trackReference: updatedFocusTrack });
+      }
+    }
   }, [
     screenShareTracks
       .map((ref) => `${ref.publication.trackSid}_${ref.publication.isSubscribed}`)
       .join(),
     focusTrack?.publication?.trackSid,
+    tracks,
   ]);
 
   useWarnAboutMissingStyles();