From 4184c1fa094c797e94535b510da265ad8d63aded Mon Sep 17 00:00:00 2001
From: harshithpabbati <pabbatiharshith@gmail.com>
Date: Wed, 6 Apr 2022 15:38:20 +0530
Subject: [PATCH] use useScreenShare hook

---
 custom/basic-call/pages/index.js              |  5 ++-
 .../components/Tray/ScreenShare.js            | 31 ++++++--------
 custom/fitness-demo/pages/[room].js           |  5 ++-
 custom/shared/contexts/ScreenShareProvider.js | 40 +++++++++++++++++++
 4 files changed, 60 insertions(+), 21 deletions(-)
 create mode 100644 custom/shared/contexts/ScreenShareProvider.js

diff --git a/custom/basic-call/pages/index.js b/custom/basic-call/pages/index.js
index 6ba92ec..9f64b27 100644
--- a/custom/basic-call/pages/index.js
+++ b/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>
diff --git a/custom/fitness-demo/components/Tray/ScreenShare.js b/custom/fitness-demo/components/Tray/ScreenShare.js
index 6321f82..7079314 100644
--- a/custom/fitness-demo/components/Tray/ScreenShare.js
+++ b/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 />
diff --git a/custom/fitness-demo/pages/[room].js b/custom/fitness-demo/pages/[room].js
index cc035bb..dfb0a8b 100644
--- a/custom/fitness-demo/pages/[room].js
+++ b/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>
diff --git a/custom/shared/contexts/ScreenShareProvider.js b/custom/shared/contexts/ScreenShareProvider.js
new file mode 100644
index 0000000..9b4e68c
--- /dev/null
+++ b/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);