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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stream-io/video-react-native-sdk",
-  "version": "0.8.6",
+  "version": "0.8.8",
   "packageManager": "yarn@3.2.4",
   "main": "dist/commonjs/index.js",
   "module": "dist/module/index.js",
@@ -46,8 +46,8 @@
     "!**/.*"
   ],
   "dependencies": {
-    "@stream-io/video-client": "^1.4.2",
-    "@stream-io/video-react-bindings": "^0.4.46",
+    "@stream-io/video-client": "^1.4.3",
+    "@stream-io/video-react-bindings": "^0.4.47",
     "intl-pluralrules": "2.0.1",
     "lodash.merge": "^4.6.2",
     "react-native-url-polyfill": "1.3.0",
@@ -113,14 +113,14 @@
     }
   },
   "devDependencies": {
-    "@babel/preset-typescript": "^7.21.5",
-    "@expo/config-plugins": "~7.8.0",
+    "@babel/preset-typescript": "^7.24.7",
+    "@expo/config-plugins": "~7.8.4",
     "@notifee/react-native": "7.8.0",
     "@react-native-community/netinfo": "9.3.9",
     "@react-native-community/push-notification-ios": "1.11.0",
     "@react-native-firebase/app": "17.5.0",
     "@react-native-firebase/messaging": "17.5.0",
-    "@react-native/eslint-config": "^0.74.83",
+    "@react-native/eslint-config": "^0.74.84",
     "@stream-io/react-native-webrtc": "118.1.0",
     "@stream-io/video-filters-react-native": "^0.2.1",
     "@testing-library/jest-native": "^5.4.2",
@@ -132,18 +132,14 @@
     "@types/react-native": "^0.70.4",
     "@types/react-native-incall-manager": "^3.2.1",
     "@types/react-test-renderer": "^18",
-    "eslint": "^8.51.0",
-    "eslint-plugin-jest": "^28.5.0",
-    "eslint-plugin-prettier": "^5.1.3",
-    "expo": "49.0.13",
-    "expo-build-properties": "^0.5.1",
-    "expo-modules-core": "1.5.11",
-    "expo-notifications": "0.20.1",
-    "expo-task-manager": "11.3.0",
-    "jest": "^29.5.0",
-    "prettier": "^3.3.0",
+    "expo": "50.0.19",
+    "expo-build-properties": "^0.12.3",
+    "expo-modules-core": "1.12.16",
+    "expo-notifications": "~0.27.8",
+    "expo-task-manager": "~11.7.3",
+    "jest": "^29.7.0",
     "react-native": "0.71.8",
-    "react-native-builder-bob": "^0.21.3",
+    "react-native-builder-bob": "^0.23.2",
     "react-native-callkeep": "4.3.11",
     "react-native-gesture-handler": "2.16.2",
     "react-native-incall-manager": "^4.0.0",
@@ -151,10 +147,10 @@
     "react-native-svg": "^13.6.0",
     "react-native-voip-push-notification": "3.3.1",
     "react-test-renderer": "^18.2.0",
-    "rimraf": "^5.0.5",
-    "ts-jest": "^29.1.0",
-    "ts-node": "^10.9.1",
-    "typescript": "^5.4.3"
+    "rimraf": "^5.0.7",
+    "ts-jest": "^29.1.5",
+    "ts-node": "^10.9.2",
+    "typescript": "^5.5.2"
   },
   "resolutions": {
     "@types/react": "^18.2.44"

package/src/components/Call/CallControls/ScreenShareToggleButton.tsx

@@ -1,21 +1,11 @@
-import React, { useEffect, useRef } from 'react';
-import { findNodeHandle, NativeModules, Platform } from 'react-native';
+import React, { useRef } from 'react';
+import { Platform } from 'react-native';
 import { ScreenCapturePickerView } from '@stream-io/react-native-webrtc';
 import { ScreenShare } from '../../../icons/ScreenShare';
 import { StopScreenShare } from '../../../icons/StopScreenShare';
 import { CallControlsButton } from './CallControlsButton';
 import { useTheme } from '../../../contexts/ThemeContext';
-import { useCall, useCallStateHooks } from '@stream-io/video-react-bindings';
-import { useIsIosScreenshareBroadcastStarted } from '../../../hooks/useIsIosScreenshareBroadcastStarted';
-import { hasScreenShare, SfuModels } from '@stream-io/video-client';
-import { usePrevious } from '../../../utils/hooks/usePrevious';
-
-// 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';
+import { useScreenShareButton } from '../../../hooks/useScreenShareButton';
 
 /**
  * The props for the Screen Share button in the Call Controls.
@@ -45,94 +35,18 @@ export const ScreenShareToggleButton = ({
     theme: { colors, screenShareToggleButton },
   } = useTheme();
 
-  const call = useCall();
-  const { useLocalParticipant, useCallSettings } = useCallStateHooks();
-  const callSettings = useCallSettings();
-  const isScreenSharingEnabledInCall = callSettings?.screensharing.enabled;
-  const isScreenSharingAccessRequestEnabled =
-    callSettings?.screensharing.access_request_enabled;
-
-  const onScreenShareStartedHandlerRef = useRef(onScreenShareStartedHandler);
-  onScreenShareStartedHandlerRef.current = onScreenShareStartedHandler;
-  const onScreenShareStoppedHandlerRef = useRef(onScreenShareStoppedHandler);
-  onScreenShareStoppedHandlerRef.current = onScreenShareStoppedHandler;
+  const screenCapturePickerViewiOSRef = useRef(null);
 
-  const iosScreenShareStartedFromSystem = useIsIosScreenshareBroadcastStarted();
-  const prevIosScreenShareStartedFromSystem = usePrevious(
-    iosScreenShareStartedFromSystem
+  const { onPress, hasPublishedScreenShare } = useScreenShareButton(
+    screenCapturePickerViewiOSRef,
+    onScreenShareStartedHandler,
+    onScreenShareStoppedHandler
   );
 
-  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
-      ) {
-        onScreenShareStartedHandlerRef.current?.();
-        const media = await navigator.mediaDevices.getDisplayMedia({
-          // @ts-ignore
-          deviceId: 'broadcast',
-          video: true,
-          audio: true,
-        });
-        await call?.publishScreenShareStream(media);
-      } else if (
-        !iosScreenShareStartedFromSystem &&
-        prevIosScreenShareStartedFromSystem
-      ) {
-        onScreenShareStoppedHandlerRef.current?.();
-        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,
-          });
-          onScreenShareStartedHandler?.();
-          await call?.publishScreenShareStream(media);
-        } catch (e) {
-          // ignored.. user didnt allow the screen share in the popup
-        }
-      }
-    } else if (hasPublishedScreenShare) {
-      onScreenShareStoppedHandler?.();
-      await call?.stopPublish(SfuModels.TrackType.SCREEN_SHARE);
-    }
-  };
-
-  if (!isScreenSharingEnabledInCall || !CanDeviceScreenShare) {
-    return null;
-  }
+  if (!onPress) return null;
 
   return (
     <CallControlsButton
-      disabled={!isScreenSharingAccessRequestEnabled}
       onPress={onPress}
       color={hasPublishedScreenShare ? colors.error : colors.static_white}
       style={{

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/components/Livestream/LivestreamTopView/DurationBadge.tsx

@@ -42,7 +42,7 @@ export const DurationBadge = ({ mode }: DurationBadgeProps) => {
     if (mode !== 'host') {
       return;
     }
-    let intervalId: NodeJS.Timer;
+    let intervalId: NodeJS.Timeout;
 
     const handleLiveStarted = () => {
       intervalId = setInterval(() => {
@@ -86,7 +86,7 @@ export const DurationBadge = ({ mode }: DurationBadgeProps) => {
     if (mode !== 'viewer') {
       return;
     }
-    let intervalId: NodeJS.Timer;
+    let intervalId: NodeJS.Timeout;
     const handleLiveStarted = () => {
       intervalId = setInterval(() => {
         setDuration((d) => d + 1);

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.6';
+export const version = '0.8.8';