@stream-io/video-react-native-sdk 0.1.5 → 0.1.7

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

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const expo_build_properties_1 = require("expo-build-properties");
+const withStreamVideoReactNativeBuildGradle = (configuration) => {
+    return (0, expo_build_properties_1.withBuildProperties)(configuration, {
+        android: {
+            extraProguardRules: `
+-keep class org.webrtc.** { *; }
+`,
+        },
+    });
+};
+exports.default = withStreamVideoReactNativeBuildGradle;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stream-io/video-react-native-sdk",
-  "version": "0.1.5",
+  "version": "0.1.7",
   "packageManager": "yarn@3.2.4",
   "main": "dist/commonjs/index.js",
   "module": "dist/module/index.js",
@@ -14,7 +14,7 @@
     "postinstall": "yarn copy-version",
     "clean": "rimraf dist && rimraf expo-config-plugin/dist",
     "start": "yarn copy-version && tsc --project tsconfig.json --watch",
-    "build:expo-plugin": "rimraf plugin/dist && tsc --project expo-config-plugin/tsconfig.json",
+    "build:expo-plugin": "rimraf expo-config-plugin/dist && tsc --project expo-config-plugin/tsconfig.json",
     "build": "yarn clean && yarn copy-version && bob build && yarn build:expo-plugin",
     "test:expo-plugin": "jest expo-config-plugin --coverage",
     "test": "jest --coverage && yarn test:expo-plugin",
@@ -30,7 +30,7 @@
     "package.json",
     "app.plugin.js",
     "expo-config-plugin/README.md",
-    "expo-config-plugin/dist/*",
+    "expo-config-plugin/dist/**/*",
     "!expo-config-plugin/src/*",
     "!expo-config-plugin/fixtures/*",
     "!ios/build",
@@ -46,8 +46,8 @@
   ],
   "dependencies": {
     "@stream-io/i18n": "^0.1.2",
-    "@stream-io/video-client": "^0.3.31",
-    "@stream-io/video-react-bindings": "^0.2.32",
+    "@stream-io/video-client": "^0.3.33",
+    "@stream-io/video-react-bindings": "^0.2.34",
     "intl-pluralrules": "2.0.1",
     "lodash.merge": "^4.6.2",
     "react-native-url-polyfill": "1.3.0",
@@ -60,6 +60,8 @@
     "@react-native-firebase/app": ">=17.5.0",
     "@react-native-firebase/messaging": ">=17.5.0",
     "@stream-io/react-native-webrtc": ">=104.0.1",
+    "expo": ">=47.0.0",
+    "expo-build-properties": "*",
     "expo-notifications": "*",
     "expo-task-manager": "*",
     "react": ">=17.0.0",
@@ -81,6 +83,12 @@
     "@react-native-firebase/messaging": {
       "optional": true
     },
+    "expo": {
+      "optional": true
+    },
+    "expo-build-properties": {
+      "optional": true
+    },
     "expo-notifications": {
       "optional": true
     },
@@ -119,6 +127,8 @@
     "@types/react-native": "^0.70.4",
     "@types/react-native-incall-manager": "^3.2.1",
     "@types/react-test-renderer": "^18",
+    "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",

package/src/components/Call/CallContent/CallContent.tsx

@@ -174,12 +174,12 @@ export const CallContent = ({
     supportedReactions,
   };
 
-  const landScapeStyles: ViewStyle = {
+  const landscapeStyles: ViewStyle = {
     flexDirection: landscape ? 'row' : 'column',
   };
 
   return (
-    <View style={[styles.container, callContent.container, landScapeStyles]}>
+    <View style={[styles.container, callContent.container, landscapeStyles]}>
       <View style={[styles.container, callContent.callParticipantsContainer]}>
         <View
           style={[styles.view, callContent.topContainer]}

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

@@ -31,7 +31,7 @@ export const CallControls = ({
   const {
     theme: { colors, callControls },
   } = useTheme();
-  const landScapeStyles: ViewStyle = {
+  const landscapeStyles: ViewStyle = {
     flexDirection: landscape ? 'column-reverse' : 'row',
     paddingHorizontal: landscape ? 12 : 0,
     paddingVertical: landscape ? 0 : 12,
@@ -42,7 +42,7 @@ export const CallControls = ({
         styles.container,
         { backgroundColor: colors.static_grey },
         callControls.container,
-        landScapeStyles,
+        landscapeStyles,
         style,
       ]}
     >

package/src/components/Call/CallLayout/CallParticipantsGrid.tsx

@@ -54,7 +54,7 @@ export const CallParticipantsGrid = ({
   // we debounce the participants arrays to avoid unnecessary rerenders that happen when participant tracks are all subscribed simultaneously
   const remoteParticipants = useDebouncedValue(_remoteParticipants, 300);
   const allParticipants = useDebouncedValue(_allParticipants, 300);
-  const landScapeStyles: ViewStyle = {
+  const landscapeStyles: ViewStyle = {
     flexDirection: landscape ? 'row' : 'column',
   };
 
@@ -80,7 +80,7 @@ export const CallParticipantsGrid = ({
     <View
       style={[
         styles.container,
-        landScapeStyles,
+        landscapeStyles,
         { backgroundColor: colors.dark_gray },
         callParticipantsGrid.container,
       ]}

package/src/components/Call/CallLayout/CallParticipantsSpotlight.tsx

@@ -75,7 +75,7 @@ export const CallParticipantsSpotlight = ({
     ParticipantView,
   };
 
-  const landScapeStyles: ViewStyle = {
+  const landscapeStyles: ViewStyle = {
     flexDirection: landscape ? 'row' : 'column',
   };
 
@@ -88,7 +88,7 @@ export const CallParticipantsSpotlight = ({
       testID={ComponentTestIds.CALL_PARTICIPANTS_SPOTLIGHT}
       style={[
         styles.container,
-        landScapeStyles,
+        landscapeStyles,
         {
           backgroundColor: colors.dark_gray,
         },

package/src/components/Call/Lobby/Lobby.tsx

@@ -1,5 +1,5 @@
 import React, { ComponentType } from 'react';
-import { StyleSheet, Text, View } from 'react-native';
+import { StyleSheet, Text, View, ViewStyle } from 'react-native';
 import { MicOff } from '../../../icons';
 import {
   useCall,
@@ -40,6 +40,11 @@ export type LobbyProps = {
    * Component to customize the Join Call Button in the Lobby component.
    */
   JoinCallButton?: ComponentType<JoinCallButtonProps> | null;
+  /**
+   * Check if device is in landscape mode.
+   * This will apply the landscape mode styles to the component.
+   */
+  landscape?: boolean;
   /**
    * Component to customize the Lobby Footer in the Lobby component.
    */
@@ -53,6 +58,7 @@ export const Lobby = ({
   onJoinCallHandler,
   LobbyControls = DefaultLobbyControls,
   JoinCallButton = DefaultJoinCallButton,
+  landscape = false,
   LobbyFooter = DefaultLobbyFooter,
 }: LobbyProps) => {
   const {
@@ -75,16 +81,21 @@ export const Lobby = ({
     name: connectedUser?.name,
   } as StreamVideoParticipant;
 
+  const landscapeStyles: ViewStyle = {
+    flexDirection: landscape ? 'row' : 'column',
+  };
+
   return (
     <View
       style={[
         styles.container,
+        landscapeStyles,
         { backgroundColor: colors.static_grey },
         lobby.container,
       ]}
     >
       {connectedUser && (
-        <>
+        <View style={[styles.topContainer, lobby.topContainer]}>
           <Text
             style={[
               styles.heading,
@@ -126,15 +137,17 @@ export const Lobby = ({
             )}
             <ParticipantStatus />
           </View>
-          {LobbyControls && <LobbyControls />}
-        </>
-      )}
-      {LobbyFooter && (
-        <LobbyFooter
-          JoinCallButton={JoinCallButton}
-          onJoinCallHandler={onJoinCallHandler}
-        />
+        </View>
       )}
+      <View style={[styles.bottomContainer, lobby.bottomContainer]}>
+        {LobbyControls && <LobbyControls />}
+        {LobbyFooter && (
+          <LobbyFooter
+            JoinCallButton={JoinCallButton}
+            onJoinCallHandler={onJoinCallHandler}
+          />
+        )}
+      </View>
     </View>
   );
 };
@@ -195,13 +208,16 @@ const styles = StyleSheet.create({
   container: {
     flex: 1,
     justifyContent: 'center',
+  },
+  topContainer: {
+    flex: 2,
+    justifyContent: 'space-evenly',
     paddingHorizontal: 12,
   },
   heading: {
     textAlign: 'center',
   },
   subHeading: {
-    marginBottom: 16,
     textAlign: 'center',
   },
   videoContainer: {
@@ -213,6 +229,11 @@ const styles = StyleSheet.create({
     padding: 8,
   },
   topView: {},
+  bottomContainer: {
+    flex: 1,
+    justifyContent: 'space-evenly',
+    paddingHorizontal: 12,
+  },
   participantStatusContainer: {
     alignSelf: 'flex-start',
     flexDirection: 'row',

package/src/components/Call/RingingCallContent/IncomingCall.tsx

@@ -1,5 +1,11 @@
 import React from 'react';
-import { ImageBackground, StyleSheet, Text, View } from 'react-native';
+import {
+  ImageBackground,
+  StyleSheet,
+  Text,
+  View,
+  ViewStyle,
+} from 'react-native';
 import {
   useCallStateHooks,
   useConnectedUser,
@@ -28,6 +34,11 @@ export type IncomingCallProps = IncomingCallControlsProps & {
    * Prop to customize the IncomingCall controls.
    */
   IncomingCallControls?: React.ComponentType<IncomingCallControlsProps> | null;
+  /**
+   * Check if device is in landscape mode.
+   * This will apply the landscape mode styles to the component.
+   */
+  landscape?: boolean;
 };
 
 /**
@@ -39,45 +50,59 @@ export const IncomingCall = ({
   onRejectCallHandler,
   CallTopView = DefaultCallTopView,
   IncomingCallControls = DefaultIncomingCallControls,
+  landscape,
 }: IncomingCallProps) => {
   const { t } = useI18n();
   const {
     theme: { colors, incomingCall, typefaces },
   } = useTheme();
 
+  const landscapeContentStyles: ViewStyle = {
+    flexDirection: landscape ? 'row' : 'column',
+  };
+
   return (
     <Background>
       {CallTopView && <CallTopView />}
-      <View style={[styles.content, incomingCall.content]}>
-        <UserInfo />
-        <Text
-          style={[
-            styles.incomingCallText,
-            { color: colors.static_white },
-            typefaces.heading6,
-            incomingCall.incomingCallText,
-          ]}
-        >
-          {t('Incoming Call...')}
-        </Text>
-      </View>
       <View
-        style={[styles.incomingCallControls, incomingCall.incomingCallControls]}
+        style={[styles.content, landscapeContentStyles, incomingCall.content]}
       >
-        {IncomingCallControls && (
-          <IncomingCallControls
-            onAcceptCallHandler={onAcceptCallHandler}
-            onRejectCallHandler={onRejectCallHandler}
-          />
-        )}
+        <View style={[styles.topContainer, incomingCall.topContainer]}>
+          <UserInfo />
+          <Text
+            style={[
+              styles.incomingCallText,
+              { color: colors.static_white },
+              typefaces.heading6,
+              incomingCall.incomingCallText,
+            ]}
+          >
+            {t('Incoming Call...')}
+          </Text>
+        </View>
+        <View style={[styles.bottomContainer, incomingCall.bottomContainer]}>
+          <View
+            style={[
+              styles.incomingCallControls,
+              incomingCall.incomingCallControls,
+            ]}
+          >
+            {IncomingCallControls && (
+              <IncomingCallControls
+                onAcceptCallHandler={onAcceptCallHandler}
+                onRejectCallHandler={onRejectCallHandler}
+              />
+            )}
+          </View>
+        </View>
       </View>
     </Background>
   );
 };
 
-const Background: React.FunctionComponent<{ children: React.ReactNode }> = ({
-  children,
-}) => {
+const Background: React.FunctionComponent<{
+  children: React.ReactNode;
+}> = ({ children }) => {
   const {
     theme: { colors, incomingCall },
   } = useTheme();
@@ -99,7 +124,6 @@ const Background: React.FunctionComponent<{ children: React.ReactNode }> = ({
           uri: avatarsToShow[0],
         }}
         style={[
-          StyleSheet.absoluteFill,
           styles.background,
           { backgroundColor: colors.static_grey },
           incomingCall.background,
@@ -112,7 +136,6 @@ const Background: React.FunctionComponent<{ children: React.ReactNode }> = ({
   return (
     <View
       style={[
-        StyleSheet.absoluteFill,
         styles.background,
         { backgroundColor: colors.static_grey },
         incomingCall.background,
@@ -128,16 +151,15 @@ export const styles = StyleSheet.create({
     flex: 1,
   },
   content: {
-    paddingTop: 8,
+    flex: 1,
   },
+  topContainer: { flex: 1 },
   incomingCallText: {
-    marginTop: 16,
+    marginTop: 8,
     textAlign: 'center',
   },
+  bottomContainer: { flex: 1, justifyContent: 'center' },
   incomingCallControls: {
-    position: 'absolute',
-    bottom: 64,
-    left: 0,
-    right: 0,
+    justifyContent: 'center',
   },
 });

package/src/components/Call/RingingCallContent/OutgoingCall.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { StyleSheet, Text, View } from 'react-native';
+import { StyleSheet, Text, View, ViewStyle } from 'react-native';
 import { UserInfo } from './UserInfo';
 import { Z_INDEX } from '../../../constants';
 import {
@@ -31,6 +31,11 @@ export type OutgoingCallProps = OutgoingCallControlsProps & {
    * Prop to customize the OutgoingCall controls.
    */
   OutgoingCallControls?: React.ComponentType<OutgoingCallControlsProps> | null;
+  /**
+   * Check if device is in landscape mode.
+   * This will apply the landscape mode styles to the component.
+   */
+  landscape?: boolean;
 };
 
 /**
@@ -40,12 +45,17 @@ export type OutgoingCallProps = OutgoingCallControlsProps & {
 export const OutgoingCall = ({
   CallTopView = DefaultCallTopView,
   OutgoingCallControls = DefaultOutgoingCallControls,
+  landscape,
 }: OutgoingCallProps) => {
   const {
     theme: { colors, typefaces, outgoingCall },
   } = useTheme();
   const { t } = useI18n();
 
+  const landscapeContentStyles: ViewStyle = {
+    flexDirection: landscape ? 'row' : 'column',
+  };
+
   return (
     <>
       <View
@@ -56,28 +66,35 @@ export const OutgoingCall = ({
         ]}
       >
         {CallTopView && <CallTopView />}
-        <View style={[styles.content, outgoingCall.content]}>
-          <UserInfo />
-          <Text
-            style={[
-              styles.callingText,
-              { color: colors.static_white },
-              typefaces.heading6,
-              outgoingCall.callingText,
-            ]}
-          >
-            {t('Calling...')}
-          </Text>
-        </View>
         <View
-          style={[
-            styles.outgoingCallControls,
-            outgoingCall.outgoingCallControls,
-          ]}
+          style={[styles.content, landscapeContentStyles, outgoingCall.content]}
         >
-          {OutgoingCallControls && <OutgoingCallControls />}
+          <View style={[styles.topContainer, outgoingCall.topContainer]}>
+            <UserInfo />
+            <Text
+              style={[
+                styles.callingText,
+                { color: colors.static_white },
+                typefaces.heading6,
+                outgoingCall.callingText,
+              ]}
+            >
+              {t('Calling...')}
+            </Text>
+          </View>
+          <View style={[styles.bottomContainer, outgoingCall.bottomContainer]}>
+            <View
+              style={[
+                styles.outgoingCallControls,
+                outgoingCall.outgoingCallControls,
+              ]}
+            >
+              {OutgoingCallControls && <OutgoingCallControls />}
+            </View>
+          </View>
         </View>
       </View>
+
       <Background />
     </>
   );
@@ -133,17 +150,16 @@ const styles = StyleSheet.create({
   container: {
     zIndex: Z_INDEX.IN_MIDDLE,
   },
+  topContainer: { flex: 1 },
   content: {
-    paddingTop: 8,
+    flex: 1,
   },
   callingText: {
     marginTop: 16,
     textAlign: 'center',
   },
+  bottomContainer: { flex: 1, alignSelf: 'center', justifyContent: 'center' },
   outgoingCallControls: {
-    position: 'absolute',
-    bottom: 64,
-    left: 0,
-    right: 0,
+    justifyContent: 'center',
   },
 });

package/src/components/Call/RingingCallContent/RingingCallContent.tsx

@@ -55,7 +55,7 @@ const RingingCallPanel = ({
   CallContent = DefaultCallContent,
   JoiningCallIndicator = DefaultJoiningCallIndicator,
   CallTopView,
-  landscape,
+  landscape = false,
 }: RingingCallContentProps) => {
   const call = useCall();
   const isCallCreatedByMe = call?.isCreatedByMe;
@@ -66,8 +66,12 @@ const RingingCallPanel = ({
   switch (callingState) {
     case CallingState.RINGING:
       return isCallCreatedByMe
-        ? OutgoingCall && <OutgoingCall CallTopView={CallTopView} />
-        : IncomingCall && <IncomingCall CallTopView={CallTopView} />;
+        ? OutgoingCall && (
+            <OutgoingCall CallTopView={CallTopView} landscape={landscape} />
+          )
+        : IncomingCall && (
+            <IncomingCall CallTopView={CallTopView} landscape={landscape} />
+          );
     case CallingState.JOINED:
       return (
         CallContent && (

package/src/components/Call/RingingCallContent/UserInfo.tsx

@@ -134,6 +134,6 @@ const styles = StyleSheet.create({
   },
   name: {
     textAlign: 'center',
-    marginTop: 32,
+    marginTop: 16,
   },
 });

package/src/components/Participant/FloatingParticipantView/FloatingView/ReanimatedFloatingView.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo, useEffect, useRef, MutableRefObject } from 'react';
+import React, { useMemo, useEffect } from 'react';
 import { LayoutRectangle, View } from 'react-native';
 import {
   FloatingViewAlignment,
@@ -46,13 +46,8 @@ try {
     children,
   }: FloatingViewProps) => {
     // to store the starting position of the gesture
-    const startRef: MutableRefObject<{ x: number; y: number } | null> = useRef<{
-      x: number;
-      y: number;
-    }>({
-      x: 0,
-      y: 0,
-    });
+    // NOTE: note be used for deriving styling
+    const start = useSharedValue({ x: 0, y: 0 });
     // to store the necessary translate x, y position
     const translationX = useSharedValue(0);
     const translationY = useSharedValue(0);
@@ -82,55 +77,51 @@ try {
       });
     }, [rectangle, containerWidth, containerHeight]);
 
-    const dragGesture = useMemo(
-      () =>
-        Gesture.Pan()
-          .onStart((_e) => {
-            // store the starting position of the gesture
-            startRef.current = {
-              x: translationX.value,
-              y: translationY.value,
-            };
-          })
-          .onUpdate((e) => {
-            // update the translation with the distance of the gesture + starting position
-            translationX.value = Math.max(
-              0,
-              Math.min(
-                e.translationX + (startRef.current?.x ?? 0),
-                snapAlignments[FloatingViewAlignment.bottomRight].x,
-              ),
-            );
-            translationY.value = Math.max(
-              0,
-              Math.min(
-                e.translationY + (startRef.current?.y ?? 0),
-                snapAlignments[FloatingViewAlignment.bottomRight].y,
-              ),
-            );
-          })
-          .onEnd(() => {
-            // snap to the closest alignment with a spring animation
-            const position = {
-              x: translationX.value,
-              y: translationY.value,
-            };
-            const closestAlignment = getClosestSnapAlignment({
-              position,
-              snapAlignments,
-            });
-            translationX.value = withTiming(closestAlignment.x);
-            translationY.value = withTiming(closestAlignment.y);
-          }),
-      [snapAlignments, translationX, translationY],
-    );
+    const dragGesture = Gesture.Pan()
+      .onStart((_e) => {
+        start.value = {
+          x: translationX.value,
+          y: translationY.value,
+        };
+      })
+      .onUpdate((e) => {
+        // update the translation with the distance of the gesture + starting position
+        translationX.value = Math.max(
+          0,
+          Math.min(
+            e.translationX + (start.value.x ?? 0),
+            snapAlignments[FloatingViewAlignment.bottomRight].x,
+          ),
+        );
+        translationY.value = Math.max(
+          0,
+          Math.min(
+            e.translationY + (start.value.y ?? 0),
+            snapAlignments[FloatingViewAlignment.bottomRight].y,
+          ),
+        );
+      })
+      .onEnd(() => {
+        // snap to the closest alignment with a spring animation
+        const position = {
+          x: translationX.value,
+          y: translationY.value,
+        };
+        const closestAlignment = getClosestSnapAlignment({
+          position,
+          snapAlignments,
+        });
+        translationX.value = withTiming(closestAlignment.x);
+        translationY.value = withTiming(closestAlignment.y);
+      });
 
+    /* Move to the initial position */
     useEffect(() => {
       if (!rectangle) {
         return;
       }
       const alignment = snapAlignments[initialAlignment];
-      startRef.current = alignment;
+      start.value = alignment;
 
       translationX.value = alignment.x;
       translationY.value = alignment.y;
@@ -145,6 +136,7 @@ try {
       opacity,
       translationX,
       translationY,
+      start,
     ]);
 
     const animatedStyle = useAnimatedStyle(() => {

package/src/constants/index.ts

@@ -6,7 +6,7 @@ export const FLOATING_VIDEO_VIEW_STYLE = {
   borderRadius: 10,
 };
 
-export const LOBBY_VIDEO_VIEW_HEIGHT = 280;
+export const LOBBY_VIDEO_VIEW_HEIGHT = 240;
 
 export const defaultEmojiReactions: StreamReactionType[] = [
   {