@stream-io/video-react-native-sdk 0.8.7 → 0.8.8

package/src/components/Livestream/LivestreamControls/LivestreamScreenShareToggleButton.tsx

@@ -1,30 +1,13 @@
-import React, { useEffect } from 'react';
+import React from 'react';
 import { useTheme } from '../../../contexts/ThemeContext';
-import {
-  findNodeHandle,
-  NativeModules,
-  Platform,
-  Pressable,
-  StyleSheet,
-  View,
-} from 'react-native';
+import { Platform, Pressable, StyleSheet, View } from 'react-native';
 import { ScreenShare } from '../../../icons/ScreenShare';
 import { StopScreenShare } from '../../../icons/StopScreenShare';
 import { ScreenCapturePickerView } from '@stream-io/react-native-webrtc';
-import { hasScreenShare, SfuModels } from '@stream-io/video-client';
-import { useCall, useCallStateHooks } from '@stream-io/video-react-bindings';
-import { useIsIosScreenshareBroadcastStarted } from '../../../hooks/useIsIosScreenshareBroadcastStarted';
-import { usePrevious } from '../../../utils/hooks/usePrevious';
+import { useScreenShareButton } from '../../../hooks/useScreenShareButton';
 
 export type LivestreamScreenShareToggleButtonProps = {};
 
-// ios >= 14.0 or android - platform restrictions
-const CanDeviceScreenShare =
-  (Platform.OS === 'ios' &&
-    // @ts-ignore
-    Number.parseInt(Platform.Version.split('.')[0], 10) >= 14) ||
-  Platform.OS === 'android';
-
 /**
  * The LivestreamVideoControlButton controls the screenshare stream publish/unpublish while in the livestream for the host.
  */
@@ -37,79 +20,11 @@ export const LivestreamScreenShareToggleButton = () => {
     },
   } = useTheme();
 
-  const call = useCall();
-  const { useLocalParticipant, useCallSettings } = useCallStateHooks();
-  const callSettings = useCallSettings();
-  const isScreenSharingEnabledInCall = callSettings?.screensharing.enabled;
-
-  const iosScreenShareStartedFromSystem = useIsIosScreenshareBroadcastStarted();
-  const prevIosScreenShareStartedFromSystem = usePrevious(
-    iosScreenShareStartedFromSystem
-  );
-
-  const localParticipant = useLocalParticipant();
-  const hasPublishedScreenShare =
-    localParticipant && hasScreenShare(localParticipant);
-
-  // listens to iOS screen share broadcast started event from the system
-  useEffect(() => {
-    const run = async () => {
-      if (Platform.OS !== 'ios') {
-        return;
-      }
-      if (
-        iosScreenShareStartedFromSystem &&
-        !prevIosScreenShareStartedFromSystem
-      ) {
-        const media = await navigator.mediaDevices.getDisplayMedia({
-          // @ts-ignore
-          deviceId: 'broadcast',
-          video: true,
-          audio: true,
-        });
-        await call?.publishScreenShareStream(media);
-      } else if (
-        !iosScreenShareStartedFromSystem &&
-        prevIosScreenShareStartedFromSystem
-      ) {
-        await call?.stopPublish(SfuModels.TrackType.SCREEN_SHARE);
-      }
-    };
-    run();
-  }, [
-    call,
-    iosScreenShareStartedFromSystem,
-    prevIosScreenShareStartedFromSystem,
-  ]);
-
   const screenCapturePickerViewiOSRef = React.useRef(null);
 
-  const onPress = async () => {
-    if (!hasPublishedScreenShare) {
-      if (Platform.OS === 'ios') {
-        const reactTag = findNodeHandle(screenCapturePickerViewiOSRef.current);
-        await NativeModules.ScreenCapturePickerViewManager.show(reactTag);
-        // After this the iOS screen share broadcast started/stopped event will be triggered
-        // and the useEffect listener will handle the rest
-      } else {
-        try {
-          const media = await navigator.mediaDevices.getDisplayMedia({
-            video: true,
-            audio: true,
-          });
-          await call?.publishScreenShareStream(media);
-        } catch (e) {
-          // ignored.. user didnt allow the screen share in the popup
-        }
-      }
-    } else if (hasPublishedScreenShare) {
-      await call?.stopPublish(SfuModels.TrackType.SCREEN_SHARE);
-    }
-  };
-
-  if (!isScreenSharingEnabledInCall || !CanDeviceScreenShare) {
-    return null;
-  }
+  const { onPress, hasPublishedScreenShare } = useScreenShareButton(
+    screenCapturePickerViewiOSRef
+  );
 
   return (
     <Pressable

package/src/components/Livestream/LivestreamPlayer/LivestreamPlayer.tsx

@@ -2,9 +2,10 @@ import React, { useEffect, useState } from 'react';
 import {
   ViewerLivestream as DefaultViewerLivestream,
   ViewerLivestreamProps,
-} from '..';
-import { Call, StreamCall, useStreamVideoClient } from '../../..';
-import { CallingState, getLogger } from '@stream-io/video-client';
+} from '../ViewerLivestream';
+import { Call, CallingState, getLogger } from '@stream-io/video-client';
+import { StreamCall } from '../../../providers/StreamCall';
+import { useStreamVideoClient } from '@stream-io/video-react-bindings';
 
 export type LivestreamPlayerProps = {
   /**

package/src/hooks/index.ts

@@ -6,3 +6,4 @@ export * from './useIsIosScreenshareBroadcastStarted';
 export * from './useIsInPiPMode';
 export * from './useAutoEnterPiPEffect';
 export * from './useApplyDefaultMediaStreamSettings';
+export * from './useScreenShareButton';

package/src/hooks/useScreenShareButton.ts

@@ -0,0 +1,128 @@
+import {
+  getLogger,
+  hasScreenShare,
+  OwnCapability,
+} from '@stream-io/video-client';
+import { useCall, useCallStateHooks } from '@stream-io/video-react-bindings';
+import React, { useRef, useEffect } from 'react';
+import { Platform, findNodeHandle, NativeModules } from 'react-native';
+import { usePrevious } from '../utils/hooks';
+import { useIsIosScreenshareBroadcastStarted } from './useIsIosScreenshareBroadcastStarted';
+
+// ios >= 14.0 or android - platform restrictions
+const CanDeviceScreenShare =
+  (Platform.OS === 'ios' &&
+    // @ts-ignore
+    Number.parseInt(Platform.Version.split('.')[0], 10) >= 14,
+  10) || Platform.OS === 'android';
+
+export const useScreenShareButton = (
+  /**
+   * Ref of the ScreenCapturePickerView component.
+   *
+   */
+  screenCapturePickerViewiOSRef: React.MutableRefObject<any>,
+  /**
+   * Handler to be called when the screen-share has been started.
+   *
+   */
+  onScreenShareStartedHandler?: () => void,
+  /**
+   * Handler to be called when the screen-share has been stopped.
+   *
+   */
+  onScreenShareStoppedHandler?: () => void,
+  /**
+   * Handler to be called when the permissions to stream screen share media is missing
+   *
+   */
+  onMissingScreenShareStreamPermission?: () => void
+) => {
+  const call = useCall();
+  const { useLocalParticipant, useCallSettings, useOwnCapabilities } =
+    useCallStateHooks();
+  const callSettings = useCallSettings();
+  const ownCapabilities = useOwnCapabilities();
+  const hasScreenSharingPermissions = ownCapabilities?.includes(
+    OwnCapability.SCREENSHARE
+  );
+  const isScreenSharingEnabledInCall = callSettings?.screensharing.enabled;
+
+  const onScreenShareStartedHandlerRef = useRef(onScreenShareStartedHandler);
+  onScreenShareStartedHandlerRef.current = onScreenShareStartedHandler;
+  const onScreenShareStoppedHandlerRef = useRef(onScreenShareStoppedHandler);
+  onScreenShareStoppedHandlerRef.current = onScreenShareStoppedHandler;
+
+  const iosScreenShareStartedFromSystem = useIsIosScreenshareBroadcastStarted();
+  const prevIosScreenShareStartedFromSystem = usePrevious(
+    iosScreenShareStartedFromSystem
+  );
+
+  const localParticipant = useLocalParticipant();
+  const hasPublishedScreenShare =
+    localParticipant && hasScreenShare(localParticipant);
+
+  // listens to iOS screen share broadcast started event from the system
+  useEffect(() => {
+    if (Platform.OS !== 'ios') {
+      return;
+    }
+    if (
+      iosScreenShareStartedFromSystem &&
+      !prevIosScreenShareStartedFromSystem
+    ) {
+      onScreenShareStartedHandlerRef.current?.();
+      call?.screenShare.enable();
+    } else if (
+      !iosScreenShareStartedFromSystem &&
+      prevIosScreenShareStartedFromSystem
+    ) {
+      onScreenShareStoppedHandlerRef.current?.();
+      call?.screenShare.disable(true);
+    }
+  }, [
+    call,
+    iosScreenShareStartedFromSystem,
+    prevIosScreenShareStartedFromSystem,
+  ]);
+
+  const onPress = async () => {
+    if (!hasScreenSharingPermissions) {
+      const logger = getLogger(['useScreenShareButton']);
+      logger(
+        'info',
+        'User does not have permissions to stream the screen share media, calling onMissingScreenShareStreamPermission handler if present'
+      );
+      onMissingScreenShareStreamPermission?.();
+    }
+    if (!hasPublishedScreenShare) {
+      if (Platform.OS === 'ios') {
+        const reactTag = findNodeHandle(screenCapturePickerViewiOSRef.current);
+        await NativeModules.ScreenCapturePickerViewManager.show(reactTag);
+        // After this the iOS screen share broadcast started/stopped event will be triggered
+        // and the useEffect listener will handle the rest
+      } else {
+        try {
+          await call?.screenShare.enable();
+          onScreenShareStartedHandler?.();
+        } catch (error) {
+          // ignored.. user didnt allow the screen share in the popup
+          const logger = getLogger(['useScreenShareButton']);
+          logger(
+            'info',
+            'User opted to not give permissions to start a screen share stream',
+            error
+          );
+        }
+      }
+    } else if (hasPublishedScreenShare) {
+      onScreenShareStoppedHandler?.();
+      await call?.screenShare.disable(true);
+    }
+  };
+
+  if (!isScreenSharingEnabledInCall || !CanDeviceScreenShare) {
+    return { onPress: undefined, hasPublishedScreenShare: false };
+  }
+  return { onPress, hasPublishedScreenShare };
+};

package/src/version.ts

@@ -1 +1 @@
-export const version = '0.8.7';
+export const version = '0.8.8';