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

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[] = [
   {

package/src/theme/theme.ts

@@ -101,9 +101,11 @@ export type Theme = {
   };
   lobby: {
     container: ViewStyle;
+    topContainer: ViewStyle;
     heading: TextStyle;
     subHeading: TextStyle;
     videoContainer: ViewStyle;
+    bottomContainer: ViewStyle;
     infoContainer: ViewStyle;
     infoText: TextStyle;
     participantStatusContainer: ViewStyle;
@@ -148,8 +150,10 @@ export type Theme = {
   incomingCall: {
     background: ViewStyle;
     content: ViewStyle;
+    topContainer: ViewStyle;
     incomingCallText: TextStyle;
     incomingCallControls: ViewStyle;
+    bottomContainer: ViewStyle;
     buttonGroup: ViewStyle;
   };
   joiningCallIndicator: {
@@ -159,8 +163,10 @@ export type Theme = {
     container: ViewStyle;
     background: ViewStyle;
     content: ViewStyle;
+    topContainer: ViewStyle;
     callingText: TextStyle;
     outgoingCallControls: ViewStyle;
+    bottomContainer: ViewStyle;
     buttonGroup: ViewStyle;
     deviceControlButtons: ViewStyle;
   };
@@ -213,10 +219,10 @@ export const defaultTheme: Theme = {
     },
     avatarSizes: {
       xs: 50,
-      sm: 100,
-      md: 120,
-      lg: 180,
-      xl: 80,
+      sm: 90,
+      md: 100,
+      lg: 160,
+      xl: 180,
     },
   },
   typefaces: {
@@ -318,8 +324,10 @@ export const defaultTheme: Theme = {
   },
   lobby: {
     container: {},
+    topContainer: {},
     heading: {},
     subHeading: {},
+    bottomContainer: {},
     videoContainer: {},
     infoContainer: {},
     infoText: {},
@@ -373,16 +381,20 @@ export const defaultTheme: Theme = {
   incomingCall: {
     background: {},
     content: {},
+    topContainer: {},
     incomingCallText: {},
     incomingCallControls: {},
+    bottomContainer: {},
     buttonGroup: {},
   },
   outgoingCall: {
     container: {},
     background: {},
     content: {},
+    topContainer: {},
     callingText: {},
     outgoingCallControls: {},
+    bottomContainer: {},
     buttonGroup: {},
     deviceControlButtons: {},
   },

package/src/version.ts

@@ -1 +1 @@
-export const version = '0.1.5';
+export const version = '0.1.6';