use useScreenShare hook

custom/basic-call/pages/index.js

@@ -2,6 +2,7 @@ import React, { useState, useCallback } from 'react';
 import { CallProvider } from '@custom/shared/contexts/CallProvider';
 import { MediaDeviceProvider } from '@custom/shared/contexts/MediaDeviceProvider';
 import { ParticipantsProvider } from '@custom/shared/contexts/ParticipantsProvider';
+import { ScreenShareProvider } from '@custom/shared/contexts/ScreenShareProvider';
 import { TracksProvider } from '@custom/shared/contexts/TracksProvider';
 import { UIStateProvider } from '@custom/shared/contexts/UIStateProvider';
 import { WaitingRoomProvider } from '@custom/shared/contexts/WaitingRoomProvider';
@@ -125,7 +126,9 @@ export default function Index({
           <TracksProvider>
             <MediaDeviceProvider>
               <WaitingRoomProvider>
-                {customAppComponent || <App />}
+                <ScreenShareProvider>
+                  {customAppComponent || <App />}
+                </ScreenShareProvider>
               </WaitingRoomProvider>
             </MediaDeviceProvider>
           </TracksProvider>

custom/fitness-demo/components/Tray/ScreenShare.js

@@ -1,30 +1,23 @@
-import React, { useMemo } from 'react';
+import React from 'react';
 
 import { TrayButton } from '@custom/shared/components/Tray';
 import { useCallState } from '@custom/shared/contexts/CallProvider';
 import { useParticipants } from '@custom/shared/contexts/ParticipantsProvider';
+import { useScreenShare } from '@custom/shared/contexts/ScreenShareProvider';
 import { ReactComponent as IconShare } from '@custom/shared/icons/share-sm.svg';
 
-const MAX_SCREEN_SHARES = 2;
-
 export const ScreenShareTray = () => {
-  const { callObject, enableScreenShare } = useCallState();
-  const { screens, participants, localParticipant } = useParticipants();
-
-  const isSharingScreen = useMemo(
-    () => screens.some((s) => s.isLocal),
-    [screens]
-  );
-
-  const screensLength = useMemo(() => screens.length, [screens]);
+  const { enableScreenShare } = useCallState();
+  const { localParticipant } = useParticipants();
+  const {
+    isSharingScreen,
+    isDisabled,
+    startScreenShare,
+    stopScreenShare
+  } = useScreenShare();
 
   const toggleScreenShare = () =>
-    isSharingScreen ? callObject.stopScreenShare() : callObject.startScreenShare();
-
-  const disabled =
-    participants.length &&
-    screensLength >= MAX_SCREEN_SHARES &&
-    !isSharingScreen;
+    isSharingScreen ? stopScreenShare() : startScreenShare();
 
   if (!enableScreenShare) return null;
   if (!localParticipant.isOwner) return null;
@@ -33,7 +26,7 @@ export const ScreenShareTray = () => {
     <TrayButton
       label={isSharingScreen ? 'Stop': 'Share'}
       orange={isSharingScreen}
-      disabled={disabled}
+      disabled={isDisabled}
       onClick={toggleScreenShare}
     >
       <IconShare />

custom/fitness-demo/pages/[room].js

@@ -2,6 +2,7 @@ import React from 'react';
 import { CallProvider } from '@custom/shared/contexts/CallProvider';
 import { MediaDeviceProvider } from '@custom/shared/contexts/MediaDeviceProvider';
 import { ParticipantsProvider } from '@custom/shared/contexts/ParticipantsProvider';
+import { ScreenShareProvider } from '@custom/shared/contexts/ScreenShareProvider';
 import { TracksProvider } from '@custom/shared/contexts/TracksProvider';
 import { UIStateProvider } from '@custom/shared/contexts/UIStateProvider';
 import { WaitingRoomProvider } from '@custom/shared/contexts/WaitingRoomProvider';
@@ -40,7 +41,9 @@ const Room = ({
           <TracksProvider>
             <MediaDeviceProvider>
               <WaitingRoomProvider>
-                {customAppComponent || <App />}
+                <ScreenShareProvider>
+                  {customAppComponent || <App />}
+                </ScreenShareProvider>
               </WaitingRoomProvider>
             </MediaDeviceProvider>
           </TracksProvider>

custom/shared/contexts/ScreenShareProvider.js

@@ -0,0 +1,40 @@
+import React, { createContext, useContext, useMemo } from 'react';
+import { useScreenShare as useDailyScreenShare } from '@daily-co/daily-react-hooks';
+import PropTypes from 'prop-types';
+
+export const MAX_SCREEN_SHARES = 2;
+
+const ScreenShareContext = createContext(null);
+
+export const ScreenShareProvider = ({ children }) => {
+  const {
+    isSharingScreen,
+    screens,
+    startScreenShare,
+    stopScreenShare
+  } = useDailyScreenShare();
+
+  const isDisabled = useMemo(() => screens.length >= MAX_SCREEN_SHARES && !isSharingScreen,
+    [isSharingScreen, screens.length]
+  );
+
+  return (
+    <ScreenShareContext.Provider
+      value={{
+        isSharingScreen,
+        isDisabled,
+        screens,
+        startScreenShare,
+        stopScreenShare,
+      }}
+    >
+      {children}
+    </ScreenShareContext.Provider>
+  );
+};
+
+ScreenShareProvider.propTypes = {
+  children: PropTypes.node,
+};
+
+export const useScreenShare = () => useContext(ScreenShareContext);