Add screen share track to useSession local data (#1255)

Author: 1egoman

.changeset/tidy-mails-fall.md

@@ -0,0 +1,5 @@
+---
+'@livekit/components-react': patch
+---
+
+Add local screenshare track to useSession

packages/react/etc/components-react.api.md

@@ -673,6 +673,10 @@ export type SessionConnectOptions = {
             enabled?: boolean;
             publishOptions?: TrackPublishOptions;
         };
+        screenShare?: {
+            enabled?: boolean;
+            publishOptions?: TrackPublishOptions;
+        };
     };
     roomConnectOptions?: RoomConnectOptions;
 };

packages/react/src/hooks/useSession.ts

@@ -56,6 +56,10 @@ export type SessionConnectOptions = {
       enabled?: boolean;
       publishOptions?: TrackPublishOptions;
     };
+    screenShare?: {
+      enabled?: boolean;
+      publishOptions?: TrackPublishOptions;
+    };
   };
 
   /** Options for Room.connect(.., .., opts) */
@@ -94,6 +98,7 @@ type SessionStateConnecting = SessionStateCommon & {
   local: {
     cameraTrack: undefined;
     microphoneTrack: undefined;
+    screenShareTrack: undefined;
   };
 };
 
@@ -107,6 +112,7 @@ type SessionStateConnected = SessionStateCommon & {
   local: {
     cameraTrack?: TrackReference;
     microphoneTrack?: TrackReference;
+    screenShareTrack?: TrackReference;
   };
 };
 
@@ -117,6 +123,7 @@ type SessionStateDisconnected = SessionStateCommon & {
   local: {
     cameraTrack: undefined;
     microphoneTrack: undefined;
+    screenShareTrack: undefined;
   };
 };
 
@@ -379,7 +386,7 @@ export function useSession(
       participant: localParticipant,
       publication: cameraPublication,
     };
-  }, [localParticipant, cameraPublication, cameraPublication?.isMuted]);
+  }, [localParticipant, cameraPublication]);
   const microphonePublication = localParticipant.getTrackPublication(Track.Source.Microphone);
   const localMicrophone = React.useMemo(() => {
     if (!microphonePublication) {
@@ -390,7 +397,18 @@ export function useSession(
       participant: localParticipant,
       publication: microphonePublication,
     };
-  }, [localParticipant, microphonePublication, microphonePublication?.isMuted]);
+  }, [localParticipant, microphonePublication]);
+  const screenSharePublication = localParticipant.getTrackPublication(Track.Source.ScreenShare);
+  const localScreenShare = React.useMemo(() => {
+    if (!screenSharePublication) {
+      return undefined;
+    }
+    return {
+      source: Track.Source.ScreenShare,
+      participant: localParticipant,
+      publication: screenSharePublication,
+    };
+  }, [localParticipant, screenSharePublication]);
 
   const {
     agentTimeoutFailureReason,
@@ -447,6 +465,7 @@ export function useSession(
           local: {
             cameraTrack: undefined,
             microphoneTrack: undefined,
+            screenShareTrack: undefined,
           },
         };
 
@@ -462,6 +481,7 @@ export function useSession(
           local: {
             cameraTrack: localCamera,
             microphoneTrack: localMicrophone,
+            screenShareTrack: localScreenShare,
           },
         };
 
@@ -475,6 +495,7 @@ export function useSession(
           local: {
             cameraTrack: undefined,
             microphoneTrack: undefined,
+            screenShareTrack: undefined,
           },
         };
     }
@@ -566,6 +587,13 @@ export function useSession(
               tracks.camera?.publishOptions ?? {},
             )
           : Promise.resolve(),
+        tracks.screenShare?.enabled
+          ? room.localParticipant.setScreenShareEnabled(
+              true,
+              undefined,
+              tracks.screenShare?.publishOptions ?? {},
+            )
+          : Promise.resolve(),
       ]);
 
       await waitUntilConnected(signal);