@stream-io/video-react-native-sdk 0.0.26 → 0.0.28

package/dist/typescript/components/Call/CallLayout/CallParticipantsSpotlight.d.ts

@@ -8,10 +8,15 @@ export type CallParticipantsSpotlightProps = CallParticipantsListComponentProps
      * Component to customize the CallParticipantsList.
      */
     CallParticipantsList?: React.ComponentType<CallParticipantsListProps> | null;
+    /**
+     * Check if device is in landscape mode.
+     * This will apply the landscape mode styles to the component.
+     */
+    landscape?: boolean;
 };
 /**
  * Component used to display the list of participants in a spotlight mode.
  * This can be used when you want to render the screen sharing stream.
  */
-export declare const CallParticipantsSpotlight: ({ CallParticipantsList, ParticipantLabel, ParticipantNetworkQualityIndicator, ParticipantReaction, ParticipantVideoFallback, ParticipantView, VideoRenderer, }: CallParticipantsSpotlightProps) => JSX.Element;
+export declare const CallParticipantsSpotlight: ({ CallParticipantsList, ParticipantLabel, ParticipantNetworkQualityIndicator, ParticipantReaction, ParticipantVideoFallback, ParticipantView, VideoRenderer, landscape, }: CallParticipantsSpotlightProps) => JSX.Element;
 //# sourceMappingURL=CallParticipantsSpotlight.d.ts.map

package/dist/typescript/components/Call/CallLayout/CallParticipantsSpotlight.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CallParticipantsSpotlight.d.ts","sourceRoot":"","sources":["../../../../../src/components/Call/CallLayout/CallParticipantsSpotlight.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAU1B,OAAO,EAEL,kCAAkC,EAClC,yBAAyB,EAC1B,MAAM,8CAA8C,CAAC;AAOtD;;GAEG;AACH,MAAM,MAAM,8BAA8B,GACxC,kCAAkC,GAAG;IACnC;;OAEG;IACH,oBAAoB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,yBAAyB,CAAC,GAAG,IAAI,CAAC;CAC9E,CAAC;AAKJ;;;GAGG;AACH,eAAO,MAAM,yBAAyB,mKAQnC,8BAA8B,gBA6EhC,CAAC"}
+{"version":3,"file":"CallParticipantsSpotlight.d.ts","sourceRoot":"","sources":["../../../../../src/components/Call/CallLayout/CallParticipantsSpotlight.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAU1B,OAAO,EAEL,kCAAkC,EAClC,yBAAyB,EAC1B,MAAM,8CAA8C,CAAC;AAOtD;;GAEG;AACH,MAAM,MAAM,8BAA8B,GACxC,kCAAkC,GAAG;IACnC;;OAEG;IACH,oBAAoB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,yBAAyB,CAAC,GAAG,IAAI,CAAC;IAC7E;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAKJ;;;GAGG;AACH,eAAO,MAAM,yBAAyB,8KASnC,8BAA8B,gBAyFhC,CAAC"}

package/dist/typescript/components/Call/CallParticipantsList/CallParticipantsList.d.ts

@@ -24,6 +24,11 @@ export type CallParticipantsListProps = CallParticipantsListComponentProps & {
      * If true, the list will be displayed in horizontal scrolling mode
      */
     horizontal?: boolean;
+    /**
+     * Check if phone is in landscape mode.
+     * This will apply the landscape mode styles to the component.
+     */
+    landscape?: boolean;
 };
 /**
  * This component displays a list of participants in a FlatList.
@@ -31,5 +36,5 @@ export type CallParticipantsListProps = CallParticipantsListComponentProps & {
  * NOTE: this component depends on a flex container to calculate the width and height of the participant view,
  * hence it should be used only in a flex parent container
  */
-export declare const CallParticipantsList: ({ numberOfColumns, horizontal, participants, ParticipantView, ParticipantLabel, ParticipantNetworkQualityIndicator, ParticipantReaction, ParticipantVideoFallback, VideoRenderer, }: CallParticipantsListProps) => JSX.Element;
+export declare const CallParticipantsList: ({ numberOfColumns, horizontal, participants, ParticipantView, ParticipantLabel, ParticipantNetworkQualityIndicator, ParticipantReaction, ParticipantVideoFallback, VideoRenderer, landscape, }: CallParticipantsListProps) => JSX.Element;
 //# sourceMappingURL=CallParticipantsList.d.ts.map

package/dist/typescript/components/Call/CallParticipantsList/CallParticipantsList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CallParticipantsList.d.ts","sourceRoot":"","sources":["../../../../../src/components/Call/CallParticipantsList/CallParticipantsList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAMN,MAAM,OAAO,CAAC;AAGf,OAAO,EACL,2BAA2B,EAC3B,sBAAsB,EAGvB,MAAM,yBAAyB,CAAC;AAIjC,OAAO,EAEL,6BAA6B,EAC7B,oBAAoB,EACrB,MAAM,mCAAmC,CAAC;AAW3C,MAAM,MAAM,kCAAkC,GAC5C,6BAA6B,GAAG;IAC9B;;OAEG;IACH,eAAe,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,oBAAoB,CAAC,GAAG,IAAI,CAAC;CACpE,CAAC;AAEJ;;GAEG;AACH,MAAM,MAAM,yBAAyB,GAAG,kCAAkC,GAAG;IAC3E;;OAEG;IACH,YAAY,EAAE,CAAC,sBAAsB,GAAG,2BAA2B,CAAC,EAAE,CAAC;IACvE;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,oBAAoB,wLAU9B,yBAAyB,gBAkK3B,CAAC"}
+{"version":3,"file":"CallParticipantsList.d.ts","sourceRoot":"","sources":["../../../../../src/components/Call/CallParticipantsList/CallParticipantsList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAMN,MAAM,OAAO,CAAC;AAGf,OAAO,EACL,2BAA2B,EAC3B,sBAAsB,EAGvB,MAAM,yBAAyB,CAAC;AAIjC,OAAO,EAEL,6BAA6B,EAC7B,oBAAoB,EACrB,MAAM,mCAAmC,CAAC;AAW3C,MAAM,MAAM,kCAAkC,GAC5C,6BAA6B,GAAG;IAC9B;;OAEG;IACH,eAAe,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,oBAAoB,CAAC,GAAG,IAAI,CAAC;CACpE,CAAC;AAEJ;;GAEG;AACH,MAAM,MAAM,yBAAyB,GAAG,kCAAkC,GAAG;IAC3E;;OAEG;IACH,YAAY,EAAE,CAAC,sBAAsB,GAAG,2BAA2B,CAAC,EAAE,CAAC;IACvE;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,oBAAoB,mMAW9B,yBAAyB,gBAqK3B,CAAC"}

package/dist/typescript/components/Call/CallTopView/CallTopView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CallTopView.d.ts","sourceRoot":"","sources":["../../../../../src/components/Call/CallTopView/CallTopView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AACxC,OAAO,EAKL,SAAS,EACT,SAAS,EACV,MAAM,cAAc,CAAC;AACtB,OAAO,EAEL,0BAA0B,EAC3B,MAAM,yBAAyB,CAAC;AAOjC,MAAM,MAAM,gBAAgB,GAAG;IAC7B;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B;;;OAGG;IACH,sBAAsB,CAAC,EAAE,MAAM,IAAI,CAAC;IACpC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B;;OAEG;IACH,qBAAqB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,0BAA0B,CAAC,GAAG,IAAI,CAAC;CAChF,CAAC;AAEF,eAAO,MAAM,WAAW,+FAMrB,gBAAgB,gBAiFlB,CAAC"}
+{"version":3,"file":"CallTopView.d.ts","sourceRoot":"","sources":["../../../../../src/components/Call/CallTopView/CallTopView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AACxC,OAAO,EAKL,SAAS,EACT,SAAS,EACV,MAAM,cAAc,CAAC;AACtB,OAAO,EAEL,0BAA0B,EAC3B,MAAM,yBAAyB,CAAC;AAOjC,MAAM,MAAM,gBAAgB,GAAG;IAC7B;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B;;;OAGG;IACH,sBAAsB,CAAC,EAAE,MAAM,IAAI,CAAC;IACpC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B;;OAEG;IACH,qBAAqB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,0BAA0B,CAAC,GAAG,IAAI,CAAC;CAChF,CAAC;AAEF,eAAO,MAAM,WAAW,+FAMrB,gBAAgB,gBAmFlB,CAAC"}

package/dist/typescript/components/Call/RingingCallContent/RingingCallContent.d.ts

@@ -27,6 +27,11 @@ export type RingingCallContentProps = {
      * Prop to customize the JoiningCallIndicator component in the RingingCallContent. It is shown when the call is accepted and is waiting to be joined.
      */
     JoiningCallIndicator?: React.ComponentType | null;
+    /**
+     * Check if device is in landscape mode.
+     * This will apply the landscape mode styles to the component.
+     */
+    landscape?: boolean;
 };
 /**
  * Component to show the Incoming, Outgoing and CalContent component depending upon the Call states when the call is in ringing mode.

package/dist/typescript/components/Call/RingingCallContent/RingingCallContent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RingingCallContent.d.ts","sourceRoot":"","sources":["../../../../../src/components/Call/RingingCallContent/RingingCallContent.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAEL,gBAAgB,EACjB,MAAM,gBAAgB,CAAC;AACxB,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,EAEL,iBAAiB,EAClB,MAAM,gBAAgB,CAAC;AACxB,OAAO,EAEL,iBAAiB,EAClB,MAAM,gBAAgB,CAAC;AAIxB;;GAEG;AACH,MAAM,MAAM,uBAAuB,GAAG;IACpC;;OAEG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,iBAAiB,CAAC,GAAG,IAAI,CAAC;IAC7D;;OAEG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,iBAAiB,CAAC,GAAG,IAAI,CAAC;IAC7D;;OAEG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,gBAAgB,CAAC,GAAG,IAAI,CAAC;IAC3D;;OAEG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,gBAAgB,CAAC,GAAG,IAAI,CAAC;IAC3D;;OAEG;IACH,oBAAoB,CAAC,EAAE,KAAK,CAAC,aAAa,GAAG,IAAI,CAAC;CACnD,CAAC;AA6BF;;GAEG;AACH,eAAO,MAAM,kBAAkB,UAAW,uBAAuB,gBAShE,CAAC"}
+{"version":3,"file":"RingingCallContent.d.ts","sourceRoot":"","sources":["../../../../../src/components/Call/RingingCallContent/RingingCallContent.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAEL,gBAAgB,EACjB,MAAM,gBAAgB,CAAC;AACxB,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,EAEL,iBAAiB,EAClB,MAAM,gBAAgB,CAAC;AACxB,OAAO,EAEL,iBAAiB,EAClB,MAAM,gBAAgB,CAAC;AAIxB;;GAEG;AACH,MAAM,MAAM,uBAAuB,GAAG;IACpC;;OAEG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,iBAAiB,CAAC,GAAG,IAAI,CAAC;IAC7D;;OAEG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,iBAAiB,CAAC,GAAG,IAAI,CAAC;IAC7D;;OAEG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,gBAAgB,CAAC,GAAG,IAAI,CAAC;IAC3D;;OAEG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,gBAAgB,CAAC,GAAG,IAAI,CAAC;IAC3D;;OAEG;IACH,oBAAoB,CAAC,EAAE,KAAK,CAAC,aAAa,GAAG,IAAI,CAAC;IAClD;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAkCF;;GAEG;AACH,eAAO,MAAM,kBAAkB,UAAW,uBAAuB,gBAShE,CAAC"}

package/dist/typescript/version.d.ts

@@ -1,2 +1,2 @@
-export declare const version = "0.0.26";
+export declare const version = "0.0.28";
 //# sourceMappingURL=version.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stream-io/video-react-native-sdk",
-  "version": "0.0.26",
+  "version": "0.0.28",
   "packageManager": "yarn@3.2.4",
   "main": "dist/commonjs/index.js",
   "module": "dist/module/index.js",
@@ -46,8 +46,8 @@
   ],
   "dependencies": {
     "@stream-io/i18n": "^0.1.2",
-    "@stream-io/video-client": "^0.3.27",
-    "@stream-io/video-react-bindings": "^0.2.28",
+    "@stream-io/video-client": "^0.3.28",
+    "@stream-io/video-react-bindings": "^0.2.29",
     "intl-pluralrules": "2.0.1",
     "lodash.merge": "^4.6.2",
     "react-native-url-polyfill": "1.3.0",

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

@@ -1,5 +1,5 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { StyleSheet, View } from 'react-native';
+import { StyleSheet, View, ViewStyle } from 'react-native';
 import {
   CallTopView as DefaultCallTopView,
   CallTopViewProps,
@@ -60,6 +60,11 @@ export type CallContentProps = Pick<CallControlProps, 'onHangupCallHandler'> &
      * This switches the participant's layout between the grid and the spotlight mode.
      */
     layout?: 'grid' | 'spotlight';
+    /**
+     * Check if device is in landscape mode.
+     * This will apply the landscape mode styles to the component.
+     */
+    landscape?: boolean;
   };
 
 export const CallContent = ({
@@ -78,6 +83,7 @@ export const CallContent = ({
   ParticipantsInfoBadge,
   VideoRenderer,
   layout = 'grid',
+  landscape = true,
 }: CallContentProps) => {
   const [
     showRemoteParticipantInFloatingView,
@@ -140,6 +146,7 @@ export const CallContent = ({
 
   const callParticipantsGridProps: CallParticipantsGridProps = {
     ...participantViewProps,
+    landscape,
     showLocalParticipant: isRemoteParticipantInFloatingView,
     ParticipantView,
     CallParticipantsList,
@@ -147,12 +154,17 @@ export const CallContent = ({
 
   const callParticipantsSpotlightProps: CallParticipantsSpotlightProps = {
     ...participantViewProps,
+    landscape,
     ParticipantView,
     CallParticipantsList,
   };
 
+  const landScapeStyles: ViewStyle = {
+    flexDirection: landscape ? 'row' : 'column',
+  };
+
   return (
-    <View style={[styles.container, callContent.container]}>
+    <View style={[styles.container, callContent.container, landScapeStyles]}>
       <View style={[styles.container, callContent.callParticipantsContainer]}>
         <View
           style={[styles.view, callContent.topContainer]}
@@ -187,7 +199,10 @@ export const CallContent = ({
       </View>
 
       {CallControls && (
-        <CallControls onHangupCallHandler={onHangupCallHandler} />
+        <CallControls
+          onHangupCallHandler={onHangupCallHandler}
+          landscape={landscape}
+        />
       )}
     </View>
   );

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { StyleSheet, View, ViewProps } from 'react-native';
+import { StyleSheet, View, ViewProps, ViewStyle } from 'react-native';
 import { ToggleAudioPublishingButton } from './ToggleAudioPublishingButton';
 import { ToggleVideoPublishingButton } from './ToggleVideoPublishingButton';
 import { ToggleCameraFaceButton } from './ToggleCameraFaceButton';
@@ -16,6 +16,11 @@ export type CallControlProps = Pick<ViewProps, 'style'> & {
    * @returns void
    */
   onHangupCallHandler?: () => void;
+  /**
+   * Check if device is in landscape mode.
+   * This will apply the landscape mode styles to the component.
+   */
+  landscape?: boolean;
 };
 
 /**
@@ -25,17 +30,24 @@ export type CallControlProps = Pick<ViewProps, 'style'> & {
 export const CallControls = ({
   style,
   onHangupCallHandler,
+  landscape,
 }: CallControlProps) => {
   const {
     theme: { colors, callControls },
   } = useTheme();
+  const landScapeStyles: ViewStyle = {
+    flexDirection: landscape ? 'column-reverse' : 'row',
+    paddingHorizontal: landscape ? 12 : 0,
+    paddingVertical: landscape ? 0 : 12,
+  };
   return (
     <View
       style={[
         styles.container,
         { backgroundColor: colors.static_grey },
-        style,
         callControls.container,
+        landScapeStyles,
+        style,
       ]}
     >
       <ToggleVideoPublishingButton />
@@ -48,8 +60,6 @@ export const CallControls = ({
 
 const styles = StyleSheet.create({
   container: {
-    paddingVertical: 12,
-    flexDirection: 'row',
     justifyContent: 'space-evenly',
     zIndex: Z_INDEX.IN_FRONT,
   },

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { StyleSheet, View } from 'react-native';
+import { StyleSheet, View, ViewStyle } from 'react-native';
 import { useCallStateHooks } from '@stream-io/video-react-bindings';
 import { useDebouncedValue } from '../../../utils/hooks/useDebouncedValue';
 import {
@@ -22,6 +22,11 @@ export type CallParticipantsGridProps = CallParticipantsListComponentProps & {
    * Boolean to decide if local participant will be visible in the grid when there is 1:1 call.
    */
   showLocalParticipant?: boolean;
+  /**
+   * Check if device is in landscape mode.
+   * This will apply the landscape mode styles to the component.
+   */
+  landscape?: boolean;
 };
 
 /**
@@ -36,6 +41,7 @@ export const CallParticipantsGrid = ({
   ParticipantView,
   VideoRenderer,
   showLocalParticipant = false,
+  landscape,
 }: CallParticipantsGridProps) => {
   const {
     theme: { colors, callParticipantsGrid },
@@ -48,6 +54,9 @@ 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 = {
+    flexDirection: landscape ? 'row' : 'column',
+  };
 
   const showFloatingView =
     remoteParticipants.length > 0 && remoteParticipants.length < 3;
@@ -71,6 +80,7 @@ export const CallParticipantsGrid = ({
     <View
       style={[
         styles.container,
+        landScapeStyles,
         { backgroundColor: colors.dark_gray },
         callParticipantsGrid.container,
       ]}
@@ -79,6 +89,7 @@ export const CallParticipantsGrid = ({
       {CallParticipantsList && (
         <CallParticipantsList
           participants={participants}
+          landscape={landscape}
           {...participantViewProps}
         />
       )}

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

@@ -5,7 +5,7 @@ import {
   StreamVideoParticipant,
 } from '@stream-io/video-client';
 import { useCallStateHooks } from '@stream-io/video-react-bindings';
-import { StyleSheet, View } from 'react-native';
+import { StyleSheet, View, ViewStyle } from 'react-native';
 import { useDebouncedValue } from '../../../utils/hooks/useDebouncedValue';
 import { ComponentTestIds } from '../../../constants/TestIds';
 import {
@@ -28,6 +28,11 @@ export type CallParticipantsSpotlightProps =
      * Component to customize the CallParticipantsList.
      */
     CallParticipantsList?: React.ComponentType<CallParticipantsListProps> | null;
+    /**
+     * Check if device is in landscape mode.
+     * This will apply the landscape mode styles to the component.
+     */
+    landscape?: boolean;
   };
 
 const hasScreenShare = (p: StreamVideoParticipant) =>
@@ -45,6 +50,7 @@ export const CallParticipantsSpotlight = ({
   ParticipantVideoFallback,
   ParticipantView = DefaultParticipantView,
   VideoRenderer,
+  landscape,
 }: CallParticipantsSpotlightProps) => {
   const {
     theme: { colors, callParticipantsSpotlight },
@@ -71,11 +77,20 @@ export const CallParticipantsSpotlight = ({
     ParticipantView,
   };
 
+  const landScapeStyles: ViewStyle = {
+    flexDirection: landscape ? 'row' : 'column',
+  };
+
+  const spotlightContainerLandscapeStyles: ViewStyle = {
+    marginHorizontal: landscape ? 0 : 8,
+  };
+
   return (
     <View
       testID={ComponentTestIds.CALL_PARTICIPANTS_SPOTLIGHT}
       style={[
         styles.container,
+        landScapeStyles,
         {
           backgroundColor: colors.dark_gray,
         },
@@ -93,6 +108,7 @@ export const CallParticipantsSpotlight = ({
                 ]
               : [
                   styles.spotlightContainer,
+                  spotlightContainerLandscapeStyles,
                   callParticipantsSpotlight.spotlightContainer,
                 ]
           }
@@ -114,7 +130,9 @@ export const CallParticipantsSpotlight = ({
               participants={
                 isScreenShareOnSpotlight ? allParticipants : otherParticipants
               }
-              horizontal
+              horizontal={!landscape}
+              numberOfColumns={!landscape ? 2 : 1}
+              landscape={landscape}
               {...callParticipantsListProps}
             />
           )}
@@ -127,7 +145,6 @@ export const CallParticipantsSpotlight = ({
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    paddingVertical: 8,
   },
   fullScreenSpotlightContainer: {
     flex: 1,
@@ -137,7 +154,6 @@ const styles = StyleSheet.create({
     overflow: 'hidden',
     borderRadius: 10,
     marginHorizontal: 8,
-    marginBottom: 8,
   },
   callParticipantsListContainer: {
     flex: 1,

package/src/components/Call/CallParticipantsList/CallParticipantsList.tsx

@@ -56,6 +56,11 @@ export type CallParticipantsListProps = CallParticipantsListComponentProps & {
    * If true, the list will be displayed in horizontal scrolling mode
    */
   horizontal?: boolean;
+  /**
+   * Check if phone is in landscape mode.
+   * This will apply the landscape mode styles to the component.
+   */
+  landscape?: boolean;
 };
 
 /**
@@ -74,6 +79,7 @@ export const CallParticipantsList = ({
   ParticipantReaction,
   ParticipantVideoFallback,
   VideoRenderer,
+  landscape,
 }: CallParticipantsListProps) => {
   const [containerLayout, setContainerLayout] = useState({
     width: 0,
@@ -162,8 +168,11 @@ export const CallParticipantsList = ({
     if (horizontal) {
       return [styles.participantWrapperHorizontal, style];
     }
+    if (landscape) {
+      return [styles.landScapeStyle, style];
+    }
     return style;
-  }, [itemWidth, itemHeight, horizontal]);
+  }, [itemWidth, itemHeight, horizontal, landscape]);
 
   const participantProps: ParticipantViewComponentProps = {
     ParticipantLabel,
@@ -247,6 +256,9 @@ const styles = StyleSheet.create({
     marginHorizontal: 8,
     borderRadius: 10,
   },
+  landScapeStyle: {
+    borderRadius: 10,
+  },
 });
 
 /**

package/src/components/Call/CallTopView/CallTopView.tsx

@@ -50,6 +50,7 @@ export const CallTopView = ({
   ParticipantsInfoBadge = DefaultParticipantsInfoBadge,
 }: CallTopViewProps) => {
   const [callTopViewHeight, setCallTopViewHeight] = useState<number>(0);
+  const [callTopViewWidth, setCallTopViewWidth] = useState<number>(0);
   const {
     theme: {
       colors,
@@ -64,16 +65,17 @@ export const CallTopView = ({
   const isCallReconnecting = callingState === CallingState.RECONNECTING;
 
   const onLayout: React.ComponentProps<typeof View>['onLayout'] = (event) => {
-    const { height } = event.nativeEvent.layout;
+    const { height, width } = event.nativeEvent.layout;
     if (setCallTopViewHeight) {
       setCallTopViewHeight(height);
+      setCallTopViewWidth(width);
     }
   };
 
   return (
     <View style={[styleProp, callTopView.container]}>
       {/* Component for the background of the CallTopView. Since it has a Linear Gradient, an SVG is used to render it. */}
-      <TopViewBackground height={callTopViewHeight} width={'100%'} />
+      <TopViewBackground height={callTopViewHeight} width={callTopViewWidth} />
       <View style={[styles.content, callTopView.content]} onLayout={onLayout}>
         <View style={styles.leftElement}>
           {onBackPressed && (

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

@@ -42,6 +42,11 @@ export type RingingCallContentProps = {
    * Prop to customize the JoiningCallIndicator component in the RingingCallContent. It is shown when the call is accepted and is waiting to be joined.
    */
   JoiningCallIndicator?: React.ComponentType | null;
+  /**
+   * Check if device is in landscape mode.
+   * This will apply the landscape mode styles to the component.
+   */
+  landscape?: boolean;
 };
 
 const RingingCallPanel = ({
@@ -50,6 +55,7 @@ const RingingCallPanel = ({
   CallContent = DefaultCallContent,
   JoiningCallIndicator = DefaultJoiningCallIndicator,
   CallTopView,
+  landscape,
 }: RingingCallContentProps) => {
   const call = useCall();
   const isCallCreatedByMe = call?.isCreatedByMe;
@@ -63,7 +69,11 @@ const RingingCallPanel = ({
         ? OutgoingCall && <OutgoingCall CallTopView={CallTopView} />
         : IncomingCall && <IncomingCall CallTopView={CallTopView} />;
     case CallingState.JOINED:
-      return CallContent && <CallContent CallTopView={CallTopView} />;
+      return (
+        CallContent && (
+          <CallContent CallTopView={CallTopView} landscape={landscape} />
+        )
+      );
     case CallingState.JOINING:
       return JoiningCallIndicator && <JoiningCallIndicator />;
     default:

package/src/components/Participant/FloatingParticipantView/index.tsx

@@ -188,6 +188,7 @@ const styles = StyleSheet.create({
     shadowOpacity: 0.23,
     shadowRadius: 2.62,
     elevation: 4,
+    borderWidth: 0,
   },
   videoFallback: {
     ...StyleSheet.absoluteFillObject,

package/src/components/Participant/ParticipantView/ParticipantView.tsx

@@ -151,7 +151,8 @@ const styles = StyleSheet.create({
     justifyContent: 'space-between',
     padding: 4,
     overflow: 'hidden',
-    margin: 2,
+    borderWidth: 2,
+    borderColor: 'transparent',
   },
   footerContainer: {
     flexDirection: 'row',

package/src/version.ts

@@ -1 +1 @@
-export const version = '0.0.26';
+export const version = '0.0.28';