[chore] custom screen share

livekit · Oct 30, 2024 · 87065d9 · 87065d9
1 parent 3e7bd24
commit 87065d9
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 7 deletions.
diff --git a/packages/core/src/components/mediaToggle.ts b/packages/core/src/components/mediaToggle.ts
@@ -91,11 +91,13 @@ export function setupMediaToggle<T extends ToggleSource>(
           );
           return localParticipant.isMicrophoneEnabled;
         case Track.Source.ScreenShare:
-          await localParticipant.setScreenShareEnabled(
-            forceState ?? !localParticipant.isScreenShareEnabled,
-            captureOptions as ScreenShareCaptureOptions,
-            publishOptions,
-          );
+          // await localParticipant.setScreenShareEnabled(
+          //   forceState ?? !localParticipant.isScreenShareEnabled,
+          //   captureOptions as ScreenShareCaptureOptions,
+          //   publishOptions,
+          // );
+          console.warn('do nothing, use custom screen share picker.');
+
           return localParticipant.isScreenShareEnabled;
         default:
           throw new TypeError('Tried to toggle unsupported source');

diff --git a/packages/react/src/components/controls/TrackToggle.tsx b/packages/react/src/components/controls/TrackToggle.tsx
@@ -18,6 +18,7 @@ export interface TrackToggleProps<T extends ToggleSource>
   captureOptions?: CaptureOptionsBySource<T>;
   publishOptions?: TrackPublishOptions;
   onDeviceError?: (error: Error) => void;
+  onClick?: (evt: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
 }
 
 /**

diff --git a/packages/react/src/prefabs/ControlBar.tsx b/packages/react/src/prefabs/ControlBar.tsx
@@ -35,6 +35,7 @@ export interface ControlBarProps extends React.HTMLAttributes<HTMLDivElement> {
    * @alpha
    */
   saveUserChoices?: boolean;
+  onScreenShareClick?: (evt: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
 }
 
 /**
@@ -58,6 +59,7 @@ export function ControlBar({
   controls,
   saveUserChoices = true,
   onDeviceError,
+  onScreenShareClick,
   ...props
 }: ControlBarProps) {
   const [isChatOpen, setIsChatOpen] = React.useState(false);
@@ -93,7 +95,8 @@ export function ControlBar({
     [variation],
   );
   const showText = React.useMemo(
-    () => variation === 'textOnly' || variation === 'verbose',
+    // () => variation === 'textOnly' || variation === 'verbose',
+    () => false,
     [variation],
   );
 
@@ -173,6 +176,7 @@ export function ControlBar({
           captureOptions={{ audio: true, selfBrowserSurface: 'include' }}
           showIcon={showIcon}
           onChange={onScreenShareChange}
+          onClick={onScreenShareClick}
           onDeviceError={(error) => onDeviceError?.({ source: Track.Source.ScreenShare, error })}
         >
           {showText && (isScreenShareEnabled ? 'Stop screen share' : 'Share screen')}

diff --git a/packages/react/src/prefabs/VideoConference.tsx b/packages/react/src/prefabs/VideoConference.tsx
@@ -29,6 +29,7 @@ import { useWarnAboutMissingStyles } from '../hooks/useWarnAboutMissingStyles';
  */
 export interface VideoConferenceProps extends React.HTMLAttributes<HTMLDivElement> {
   chatMessageFormatter?: MessageFormatter;
+  onScreenShareClick?: (evt: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
   chatMessageEncoder?: MessageEncoder;
   chatMessageDecoder?: MessageDecoder;
   /** @alpha */
@@ -58,6 +59,7 @@ export function VideoConference({
   chatMessageDecoder,
   chatMessageEncoder,
   SettingsComponent,
+  onScreenShareClick,
   ...props
 }: VideoConferenceProps) {
   const [widgetState, setWidgetState] = React.useState<WidgetState>({
@@ -155,7 +157,7 @@ export function VideoConference({
                 </FocusLayoutContainer>
               </div>
             )}
-            <ControlBar controls={{ chat: true, settings: !!SettingsComponent }} />
+            <ControlBar controls={{ chat: true, settings: !!SettingsComponent }} onScreenShareClick={onScreenShareClick} />
           </div>
           <Chat
             style={{ display: widgetState.showChat ? 'grid' : 'none' }}