Fix screen sharing cannot be removed from focus (livekit#519)

Ocupe · web-flow · commit 0de3e80364f7 · 2023-06-07T17:02:47.000+02:00
diff --git a/.changeset/chilled-rockets-shout.md b/.changeset/chilled-rockets-shout.md
@@ -0,0 +1,5 @@
+---
+"@livekit/components-react": patch
+---
+
+Fix autofocus logic in the `VideoConference` component that prevented screen sharing from being removed from focus. Fix `usePinnedTracks` not returning `undefined` state.
diff --git a/packages/react/src/hooks/usePinnedTracks.ts b/packages/react/src/hooks/usePinnedTracks.ts
@@ -11,5 +11,5 @@ export function usePinnedTracks(layoutContext?: LayoutContextType): TrackReferen
       return layoutContext.pin.state;
     }
     return [];
-  }, [layoutContext]);
+  }, [layoutContext.pin.state]);
 }
diff --git a/packages/react/src/prefabs/VideoConference.tsx b/packages/react/src/prefabs/VideoConference.tsx
@@ -15,6 +15,7 @@ import { usePinnedTracks } from '../hooks/usePinnedTracks';
 import { CarouselLayout } from '../components/layout/CarouselLayout';
 import { useCreateLayoutContext } from '../context/layout-context';
 import { ParticipantTile } from '../components';
+import type { TrackReferenceOrPlaceholder } from '@livekit/components-core';
 
 /**
  * @public
@@ -41,6 +42,7 @@ export interface VideoConferenceProps extends React.HTMLAttributes<HTMLDivElemen
  */
 export function VideoConference({ chatMessageFormatter, ...props }: VideoConferenceProps) {
   const [widgetState, setWidgetState] = React.useState<WidgetState>({ showChat: false });
+  const lastAutoFocusedScreenShareTrack = React.useRef<TrackReferenceOrPlaceholder | null>(null);
 
   const tracks = useTracks(
     [
@@ -65,18 +67,25 @@ export function VideoConference({ chatMessageFormatter, ...props }: VideoConfere
   const carouselTracks = tracks.filter((track) => !isEqualTrackRef(track, focusTrack));
 
   React.useEffect(() => {
-    // if screen share tracks are published, and no pin is set explicitly, auto set the screen share
-    if (screenShareTracks.length > 0 && focusTrack === undefined) {
+    // If screen share tracks are published, and no pin is set explicitly, auto set the screen share.
+    if (screenShareTracks.length > 0 && lastAutoFocusedScreenShareTrack.current === null) {
+      log.debug('Auto set screen share focus:', { newScreenShareTrack: screenShareTracks[0] });
       layoutContext.pin.dispatch?.({ msg: 'set_pin', trackReference: screenShareTracks[0] });
+      lastAutoFocusedScreenShareTrack.current = screenShareTracks[0];
     } else if (
-      (screenShareTracks.length === 0 && focusTrack?.source === Track.Source.ScreenShare) ||
-      tracks.length <= 1
+      lastAutoFocusedScreenShareTrack.current &&
+      !screenShareTracks.some(
+        (track) =>
+          track.publication.trackSid ===
+          lastAutoFocusedScreenShareTrack.current?.publication?.trackSid,
+      )
     ) {
+      log.debug('Auto clearing screen share focus.');
       layoutContext.pin.dispatch?.({ msg: 'clear_pin' });
+      lastAutoFocusedScreenShareTrack.current = null;
     }
   }, [
-    JSON.stringify(screenShareTracks.map((ref) => ref.publication.trackSid)),
-    tracks.length,
+    screenShareTracks.map((ref) => ref.publication.trackSid).join(),
     focusTrack?.publication?.trackSid,
   ]);
 

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"@livekit/components-react": patch
 +---
++
 +Fix autofocus logic in the `VideoConference` component that prevented screen sharing from being removed from focus. Fix `usePinnedTracks` not returning `undefined` state.
Original file line number	Diff line number	Diff line change
`@@ -11,5 +11,5 @@ export function usePinnedTracks(layoutContext?: LayoutContextType): TrackReferen`
`11`	`11`	`return layoutContext.pin.state;`
`12`	`12`	`}`
`13`	`13`	`return [];`
`14`		`- }, [layoutContext]);`
	`14`	`+ }, [layoutContext.pin.state]);`
`15`	`15`	`}`