@stream-io/video-react-native-sdk 1.13.3 → 1.14.0

package/expo-config-plugin/dist/withAppDelegate.js

@@ -10,13 +10,17 @@ const addToSwiftBridgingHeaderFile_1 = require("./common/addToSwiftBridgingHeade
 const withAppDelegate = (configuration, props) => {
     return (0, config_plugins_1.withAppDelegate)(configuration, (config) => {
         if (!props?.ringingPushNotifications &&
-            !props?.iOSEnableMultitaskingCameraAccess) {
+            !props?.iOSEnableMultitaskingCameraAccess &&
+            !props?.addNoiseCancellation) {
             // quit early if no change is necessary
             return config;
         }
         if (['objc', 'objcpp'].includes(config.modResults.language)) {
             try {
-                config.modResults.contents = addDidFinishLaunchingWithOptionsObjc(config.modResults.contents, props.iOSEnableMultitaskingCameraAccess);
+                if (props?.addNoiseCancellation) {
+                    config.modResults.contents = (0, codeMod_1.addObjcImports)(config.modResults.contents, ['"NoiseCancellationManagerObjc.h"']);
+                }
+                config.modResults.contents = addDidFinishLaunchingWithOptionsObjc(config.modResults.contents, props.iOSEnableMultitaskingCameraAccess, props.addNoiseCancellation);
                 if (props?.ringingPushNotifications) {
                     config.modResults.contents = (0, codeMod_1.addObjcImports)(config.modResults.contents, [
                         '"RNCallKeep.h"',
@@ -68,7 +72,10 @@ const withAppDelegate = (configuration, props) => {
                     ]);
                     return headerFileContents;
                 });
-                config.modResults.contents = addDidFinishLaunchingWithOptionsSwift(config.modResults.contents, props.iOSEnableMultitaskingCameraAccess);
+                if (props?.addNoiseCancellation) {
+                    config.modResults.contents = (0, codeMod_1.addObjcImports)(config.modResults.contents, ['stream_io_noise_cancellation_react_native']);
+                }
+                config.modResults.contents = addDidFinishLaunchingWithOptionsSwift(config.modResults.contents, props.iOSEnableMultitaskingCameraAccess, props.addNoiseCancellation);
                 if (props?.ringingPushNotifications) {
                     config.modResults.contents = (0, codeMod_1.addSwiftImports)(config.modResults.contents, ['RNCallKeep', 'PushKit', 'RNVoipPushNotification']);
                     config.modResults.contents =
@@ -85,20 +92,26 @@ const withAppDelegate = (configuration, props) => {
         }
     });
 };
-function addDidFinishLaunchingWithOptionsSwift(contents, iOSEnableMultitaskingCameraAccess) {
+function addDidFinishLaunchingWithOptionsSwift(contents, iOSEnableMultitaskingCameraAccess, enableNoiseCancellation) {
+    const functionSelector = 'application(_:didFinishLaunchingWithOptions:)';
     if (iOSEnableMultitaskingCameraAccess) {
-        const functionSelector = 'application(_:didFinishLaunchingWithOptions:)';
         const setupMethod = `let options = WebRTCModuleOptions.sharedInstance()
     options.enableMultitaskingCameraAccess = true`;
         if (!contents.includes('options.enableMultitaskingCameraAccess = true')) {
             contents = (0, codeMod_1.insertContentsInsideSwiftFunctionBlock)(contents, functionSelector, setupMethod, { position: 'head' });
         }
     }
+    if (enableNoiseCancellation) {
+        const setupMethod = `NoiseCancellationManager.getInstance().registerProcessor()`;
+        if (!contents.includes(setupMethod)) {
+            contents = (0, codeMod_1.insertContentsInsideSwiftFunctionBlock)(contents, functionSelector, setupMethod, { position: 'head' });
+        }
+    }
     return contents;
 }
-function addDidFinishLaunchingWithOptionsObjc(contents, iOSEnableMultitaskingCameraAccess) {
+function addDidFinishLaunchingWithOptionsObjc(contents, iOSEnableMultitaskingCameraAccess, enableNoiseCancellation) {
+    const functionSelector = 'application:didFinishLaunchingWithOptions:';
     if (iOSEnableMultitaskingCameraAccess) {
-        const functionSelector = 'application:didFinishLaunchingWithOptions:';
         contents = (0, codeMod_1.addObjcImports)(contents, ['<WebRTCModuleOptions.h>']);
         const setupMethod = `WebRTCModuleOptions *options = [WebRTCModuleOptions sharedInstance];
   options.enableMultitaskingCameraAccess = YES;`;
@@ -106,6 +119,12 @@ function addDidFinishLaunchingWithOptionsObjc(contents, iOSEnableMultitaskingCam
             contents = (0, codeMod_1.insertContentsInsideObjcFunctionBlock)(contents, functionSelector, setupMethod, { position: 'head' });
         }
     }
+    if (enableNoiseCancellation) {
+        const setupMethod = `[[NoiseCancellationManagerObjc sharedInstance] registerProcessor];`;
+        if (!contents.includes(setupMethod)) {
+            contents = (0, codeMod_1.insertContentsInsideObjcFunctionBlock)(contents, functionSelector, setupMethod, { position: 'head' });
+        }
+    }
     return contents;
 }
 function addDidFinishLaunchingWithOptionsRingingSwift(contents, ringingPushNotifications) {

package/expo-config-plugin/dist/withMainApplication.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const config_plugins_1 = require("@expo/config-plugins");
+const codeMod_1 = require("@expo/config-plugins/build/android/codeMod");
+const withStreamVideoReactNativeSDKMainApplication = (configuration, props) => {
+    return (0, config_plugins_1.withMainApplication)(configuration, (config) => {
+        const isMainActivityJava = config.modResults.language === 'java';
+        if (props?.addNoiseCancellation) {
+            config.modResults.contents = (0, codeMod_1.addImports)(config.modResults.contents, ['io.getstream.rn.noisecancellation.NoiseCancellationReactNative'], isMainActivityJava);
+            config.modResults.contents = addNoiseCancellationInsideOnCreate(config.modResults.contents, isMainActivityJava);
+        }
+        return config;
+    });
+};
+function addNoiseCancellationInsideOnCreate(contents, isJava) {
+    const addBlock = isJava
+        ? `NoiseCancellationReactNative.registerProcessor(getApplicationContext());`
+        : `NoiseCancellationReactNative.registerProcessor(applicationContext)`;
+    if (!contents.includes(addBlock)) {
+        contents = (0, codeMod_1.appendContentsInsideDeclarationBlock)(contents, 'onCreate', addBlock + '\n');
+    }
+    return contents;
+}
+exports.default = withStreamVideoReactNativeSDKMainApplication;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stream-io/video-react-native-sdk",
-  "version": "1.13.3",
+  "version": "1.14.0",
   "description": "Stream Video SDK for React Native",
   "author": "https://getstream.io",
   "homepage": "https://getstream.io/video/docs/react-native/",
@@ -45,8 +45,8 @@
     "!**/.*"
   ],
   "dependencies": {
-    "@stream-io/video-client": "1.22.2",
-    "@stream-io/video-react-bindings": "1.6.2",
+    "@stream-io/video-client": "1.23.0",
+    "@stream-io/video-react-bindings": "1.6.3",
     "intl-pluralrules": "2.0.1",
     "lodash.merge": "^4.6.2",
     "react-native-url-polyfill": "1.3.0",
@@ -59,6 +59,7 @@
     "@react-native-community/push-notification-ios": ">=1.11.0",
     "@react-native-firebase/app": ">=17.5.0",
     "@react-native-firebase/messaging": ">=17.5.0",
+    "@stream-io/noise-cancellation-react-native": ">=0.1.0",
     "@stream-io/react-native-webrtc": ">=125.2.1",
     "@stream-io/video-filters-react-native": ">=0.1.0",
     "expo": ">=47.0.0",
@@ -86,6 +87,9 @@
     "@react-native-firebase/messaging": {
       "optional": true
     },
+    "@stream-io/noise-cancellation-react-native": {
+      "optional": true
+    },
     "@stream-io/video-filters-react-native": {
       "optional": true
     },
@@ -121,8 +125,9 @@
     "@react-native-firebase/app": "^22.1.0",
     "@react-native-firebase/messaging": "^22.1.0",
     "@react-native/babel-preset": "^0.79.2",
-    "@stream-io/react-native-webrtc": "^125.2.1",
-    "@stream-io/video-filters-react-native": "^0.3.1",
+    "@stream-io/noise-cancellation-react-native": "^0.1.0",
+    "@stream-io/react-native-webrtc": "^125.3.0",
+    "@stream-io/video-filters-react-native": "^0.4.0",
     "@testing-library/jest-native": "^5.4.3",
     "@testing-library/react-native": "13.2.0",
     "@tsconfig/node14": "14.1.3",

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

@@ -1,14 +1,8 @@
-import React, { useState } from 'react';
-import {
-  ActivityIndicator,
-  Pressable,
-  StyleSheet,
-  Text,
-  View,
-} from 'react-native';
+import React, { useMemo, useState } from 'react';
+import { ActivityIndicator, Pressable, StyleSheet, View } from 'react-native';
 import { useTheme } from '../../../contexts';
-import { LeaveStreamIcon } from '../../../icons';
-import { useCall, useI18n } from '@stream-io/video-react-bindings';
+import { PhoneDown } from '../../../icons';
+import { useCall } from '@stream-io/video-react-bindings';
 import { getLogger } from '@stream-io/video-client';
 
 /**
@@ -30,12 +24,11 @@ export const ViewerLeaveStreamButton = ({
 }: ViewerLeaveStreamButtonProps) => {
   const [isAwaitingResponse, setIsAwaitingResponse] = useState(false);
   const call = useCall();
-  const { t } = useI18n();
+  const styles = useStyles();
   const {
     theme: {
       colors,
       variants: { iconSizes },
-      typefaces,
       viewerLeaveStreamButton,
     },
   } = useTheme();
@@ -57,46 +50,35 @@ export const ViewerLeaveStreamButton = ({
 
   return (
     <Pressable
-      style={[
-        styles.container,
-        { backgroundColor: colors.buttonSecondary },
-        viewerLeaveStreamButton.container,
-      ]}
+      style={viewerLeaveStreamButton.container}
       onPress={onLeaveStreamButtonPress}
     >
-      <View
-        style={[
-          styles.icon,
-          { height: iconSizes.xs, width: iconSizes.xs },
-          viewerLeaveStreamButton.icon,
-        ]}
-      >
-        {isAwaitingResponse ? <ActivityIndicator /> : <LeaveStreamIcon />}
+      <View style={[styles.icon, viewerLeaveStreamButton.icon]}>
+        {isAwaitingResponse ? (
+          <ActivityIndicator />
+        ) : (
+          <PhoneDown color={colors.iconPrimary} size={iconSizes.sm} />
+        )}
       </View>
-      <Text
-        style={[
-          styles.text,
-          typefaces.subtitleBold,
-          { color: colors.textPrimary },
-          viewerLeaveStreamButton.text,
-        ]}
-      >
-        {isAwaitingResponse ? t('Loading...') : t('Leave Stream')}
-      </Text>
     </Pressable>
   );
 };
 
-const styles = StyleSheet.create({
-  container: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    padding: 8,
-    borderRadius: 4,
-  },
-  icon: {},
-  text: {
-    marginLeft: 8,
-    includeFontPadding: false,
-  },
-});
+const useStyles = () => {
+  const { theme } = useTheme();
+  return useMemo(
+    () =>
+      StyleSheet.create({
+        icon: {
+          backgroundColor: theme.colors.buttonSecondary,
+          height: theme.variants.buttonSizes.xs,
+          width: theme.variants.buttonSizes.xs,
+          justifyContent: 'center',
+          alignItems: 'center',
+          borderRadius: theme.variants.borderRadiusSizes.sm,
+          zIndex: 2,
+        },
+      }),
+    [theme],
+  );
+};

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

@@ -1,12 +1,30 @@
-import React from 'react';
-import { StyleSheet, View, type ViewProps } from 'react-native';
-
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import { Pressable, StyleSheet, View, type ViewProps } from 'react-native';
 import {
   ViewerLeaveStreamButton as DefaultViewerLeaveStreamButton,
   type ViewerLeaveStreamButtonProps,
 } from './ViewerLeaveStreamButton';
 import { useTheme } from '../../../contexts';
 import { Z_INDEX } from '../../../constants';
+import {
+  DurationBadge,
+  FollowerCount,
+  LiveIndicator,
+} from '../LivestreamTopView';
+import { IconWrapper, Maximize } from '../../../icons';
+import InCallManager from 'react-native-incall-manager';
+import {
+  VolumeOff,
+  VolumeOn,
+  PauseIcon,
+  PlayIcon,
+} from '../../../icons/LivestreamControls';
 
 /**
  * Props for the ViewerLivestreamControls component.
@@ -16,6 +34,15 @@ export type ViewerLivestreamControlsProps = ViewerLeaveStreamButtonProps & {
    * Component to customize the leave stream button on the viewer's end live stream.
    */
   ViewerLeaveStreamButton?: React.ComponentType<ViewerLeaveStreamButtonProps> | null;
+
+  /**
+   * Handler to be called when the leave stream button is pressed.
+   */
+  onLeaveStreamHandler?: () => void;
+
+  /**
+   * Handler to be called when the layout of the component changes.
+   */
   onLayout?: ViewProps['onLayout'];
 };
 
@@ -27,50 +54,240 @@ export const ViewerLivestreamControls = ({
   onLeaveStreamHandler,
   onLayout,
 }: ViewerLivestreamControlsProps) => {
+  const styles = useStyles();
   const {
-    theme: { colors, viewerLivestreamControls },
+    theme: { colors, viewerLivestreamControls, variants },
   } = useTheme();
 
-  return (
-    <View
-      style={[
-        styles.container,
-        { backgroundColor: colors.sheetOverlay },
-        viewerLivestreamControls.container,
-      ]}
-      onLayout={onLayout}
-    >
-      <View style={[styles.leftElement, viewerLivestreamControls.leftElement]}>
-        {ViewerLeaveStreamButton && (
-          <ViewerLeaveStreamButton
-            onLeaveStreamHandler={onLeaveStreamHandler}
-          />
-        )}
+  const [showControls, setShowControls] = useState(true);
+  const [isMuted, setIsMuted] = useState(false);
+  const [isPlaying, setIsPlaying] = useState(true);
+  const [showPlayPauseButton, setShowPlayPauseButton] = useState(true);
+  const playPauseTimeout = useRef<NodeJS.Timeout | null>(null);
+
+  const hidePlayPauseButtonAfterDelay = useCallback(() => {
+    if (playPauseTimeout.current) {
+      clearTimeout(playPauseTimeout.current);
+    }
+
+    playPauseTimeout.current = setTimeout(() => {
+      setShowPlayPauseButton(false);
+      playPauseTimeout.current = null;
+    }, 3000);
+  }, []);
+
+  useEffect(() => {
+    hidePlayPauseButtonAfterDelay();
+    return () => {
+      if (playPauseTimeout.current) {
+        clearTimeout(playPauseTimeout.current);
+      }
+    };
+  }, [hidePlayPauseButtonAfterDelay]);
+
+  const showPlayPauseButtonWithTimeout = () => {
+    setShowPlayPauseButton(true);
+    hidePlayPauseButtonAfterDelay();
+  };
+
+  const showControlsHandler = () => {
+    showPlayPauseButtonWithTimeout();
+    if (showControls) {
+      return;
+    }
+
+    setShowControls(true);
+  };
+
+  const toggleControls = () => {
+    setShowControls(!showControls);
+  };
+
+  const toggleAudio = () => {
+    setIsMuted(!isMuted);
+    InCallManager.setForceSpeakerphoneOn(isMuted);
+  };
+
+  const togglePlayPause = () => {
+    setIsPlaying(!isPlaying);
+    showPlayPauseButtonWithTimeout();
+  };
+
+  const VolumeButton = (
+    <Pressable onPress={toggleAudio} style={[styles.fullscreenButton]}>
+      <View style={[styles.icon]}>
+        <IconWrapper>
+          {isMuted ? (
+            <VolumeOff
+              color={colors.iconPrimary}
+              size={variants.iconSizes.sm}
+            />
+          ) : (
+            <VolumeOn color={colors.iconPrimary} size={variants.iconSizes.sm} />
+          )}
+        </IconWrapper>
+      </View>
+    </Pressable>
+  );
+
+  const MaximizeButton = (
+    <Pressable onPress={toggleControls} style={[styles.fullscreenButton]}>
+      <View style={[styles.icon]}>
+        <Maximize
+          color={colors.iconPrimary}
+          width={variants.iconSizes.sm}
+          height={variants.iconSizes.sm}
+        />
       </View>
-      <View
-        style={[styles.rightElement, viewerLivestreamControls.rightElement]}
-      />
-    </View>
+    </Pressable>
+  );
+
+  const PlayPauseButton = (
+    <Pressable onPress={togglePlayPause} style={styles.playPauseButton}>
+      <View style={styles.playPauseIcon}>
+        <IconWrapper>
+          {isPlaying ? (
+            <PauseIcon
+              color={colors.iconPrimary}
+              size={variants.iconSizes.lg * 3}
+            />
+          ) : (
+            <PlayIcon
+              color={colors.iconPrimary}
+              size={variants.iconSizes.lg * 3}
+            />
+          )}
+        </IconWrapper>
+      </View>
+    </Pressable>
+  );
+
+  return (
+    <Pressable style={StyleSheet.absoluteFill} onPress={showControlsHandler}>
+      {!isPlaying && <View style={styles.blackOverlay} />}
+
+      {showPlayPauseButton && (
+        <View style={styles.centerButtonContainer}>{PlayPauseButton}</View>
+      )}
+
+      {showControls && (
+        <View
+          style={[styles.container, viewerLivestreamControls.container]}
+          onLayout={onLayout}
+        >
+          <View
+            style={[styles.leftElement, viewerLivestreamControls.leftElement]}
+          >
+            <View style={[styles.leftElement]}>
+              <View style={[styles.liveInfo]}>
+                <LiveIndicator />
+                <FollowerCount />
+              </View>
+            </View>
+          </View>
+          <View>
+            <DurationBadge mode="viewer" />
+          </View>
+
+          <View
+            style={[styles.rightElement, viewerLivestreamControls.rightElement]}
+          >
+            <View style={styles.buttonContainer}>
+              {VolumeButton}
+              {MaximizeButton}
+              {ViewerLeaveStreamButton && (
+                <ViewerLeaveStreamButton
+                  onLeaveStreamHandler={onLeaveStreamHandler}
+                />
+              )}
+            </View>
+          </View>
+        </View>
+      )}
+    </Pressable>
   );
 };
 
-const styles = StyleSheet.create({
-  container: {
-    position: 'absolute',
-    bottom: 0,
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingVertical: 16,
-    paddingHorizontal: 8,
-    zIndex: Z_INDEX.IN_FRONT,
-  },
-  content: {},
-  leftElement: {
-    flex: 1,
-    alignItems: 'flex-start',
-  },
-  rightElement: {
-    flex: 1,
-    alignItems: 'flex-end',
-  },
-});
+const useStyles = () => {
+  const { theme } = useTheme();
+  return useMemo(
+    () =>
+      StyleSheet.create({
+        container: {
+          position: 'absolute',
+          bottom: 0,
+          flexDirection: 'row',
+          alignItems: 'center',
+          justifyContent: 'center',
+          paddingVertical: 16,
+          paddingHorizontal: 8,
+          zIndex: Z_INDEX.IN_FRONT,
+          backgroundColor: theme.colors.sheetOverlay,
+        },
+        leftElement: {
+          flex: 1,
+          alignItems: 'flex-start',
+          justifyContent: 'center',
+        },
+        rightElement: {
+          flex: 1,
+          alignItems: 'flex-end',
+        },
+        liveInfo: {
+          flexDirection: 'row',
+        },
+        icon: {
+          height: theme.variants.iconSizes.sm,
+          width: theme.variants.iconSizes.sm,
+        },
+        fullscreenButton: {
+          backgroundColor: theme.colors.buttonSecondary,
+          height: theme.variants.buttonSizes.xs,
+          width: theme.variants.buttonSizes.xs,
+          justifyContent: 'center',
+          alignItems: 'center',
+          borderRadius: theme.variants.borderRadiusSizes.sm,
+          zIndex: 2,
+        },
+        buttonContainer: {
+          flexDirection: 'row',
+          alignItems: 'center',
+          justifyContent: 'center',
+          gap: theme.variants.spacingSizes.sm,
+        },
+        centerButtonContainer: {
+          position: 'absolute',
+          top: 0,
+          bottom: 0,
+          left: 0,
+          right: 0,
+          justifyContent: 'center',
+          alignItems: 'center',
+          zIndex: Z_INDEX.IN_FRONT,
+          pointerEvents: 'box-none',
+        },
+        playPauseButton: {
+          height: 200,
+          width: 200,
+
+          justifyContent: 'center',
+          alignItems: 'center',
+          zIndex: Z_INDEX.IN_FRONT + 1,
+        },
+        playPauseIcon: {
+          height: 200,
+          width: 200,
+        },
+        blackOverlay: {
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          backgroundColor: 'black',
+          zIndex: Z_INDEX.IN_FRONT - 1,
+        },
+      }),
+    [theme],
+  );
+};

package/src/components/Livestream/LivestreamLayout/LivestreamLayout.tsx

@@ -80,7 +80,7 @@ export const LivestreamLayout = ({
       style={[
         styles.container,
         landScapeStyles,
-        { backgroundColor: colors.sheetTertiary },
+        { backgroundColor: colors.sheetPrimary },
         livestreamLayout.container,
       ]}
     >