From 5ac13d20bfcb0984a42c83f596773b039617dfbc Mon Sep 17 00:00:00 2001
From: Kristian Martinoski <martinoskikristian@gmail.com>
Date: Mon, 18 Nov 2024 14:04:17 +0100
Subject: [PATCH] fix: issues discovered when fixing docs

---
 .../Call/CallContent/CallContent.tsx          |  8 +++-
 .../CallParticipantsList.tsx                  | 47 ++++++++++++++-----
 .../CallControlls/BottomControls.tsx          |  2 +-
 .../dogfood/src/constants/KnownUsers.ts       |  2 +-
 4 files changed, 42 insertions(+), 17 deletions(-)

diff --git a/packages/react-native-sdk/src/components/Call/CallContent/CallContent.tsx b/packages/react-native-sdk/src/components/Call/CallContent/CallContent.tsx
index ec53492359..c96803e3bf 100644
--- a/packages/react-native-sdk/src/components/Call/CallContent/CallContent.tsx
+++ b/packages/react-native-sdk/src/components/Call/CallContent/CallContent.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { StyleSheet, View } from 'react-native';
+import { StyleSheet, View, ViewStyle } from 'react-native';
 import InCallManager from 'react-native-incall-manager';
 import {
   CallParticipantsGrid,
@@ -184,6 +184,10 @@ export const CallContent = ({
     supportedReactions,
   };
 
+  const landscapeStyles: ViewStyle = {
+    flexDirection: landscape ? 'row' : 'column',
+  };
+
   return (
     <>
       {!disablePictureInPicture && (
@@ -191,7 +195,7 @@ export const CallContent = ({
           includeLocalParticipantVideo={iOSPiPIncludeLocalParticipantVideo}
         />
       )}
-      <View style={[styles.container, callContent.container]}>
+      <View style={[styles.container, landscapeStyles, callContent.container]}>
         <View style={[styles.content, callContent.callParticipantsContainer]}>
           <View
             style={[styles.view, callContent.topContainer]}
diff --git a/packages/react-native-sdk/src/components/Call/CallParticipantsList/CallParticipantsList.tsx b/packages/react-native-sdk/src/components/Call/CallParticipantsList/CallParticipantsList.tsx
index afc4a53309..4aeef63b79 100644
--- a/packages/react-native-sdk/src/components/Call/CallParticipantsList/CallParticipantsList.tsx
+++ b/packages/react-native-sdk/src/components/Call/CallParticipantsList/CallParticipantsList.tsx
@@ -21,6 +21,7 @@ import {
   ParticipantViewProps,
 } from '../../Participant/ParticipantView';
 import { CallContentProps } from '../CallContent';
+import { useTheme } from '../../../contexts';
 
 type FlatListProps = React.ComponentProps<
   typeof FlatList<StreamVideoParticipant>
@@ -83,6 +84,7 @@ export const CallParticipantsList = ({
   supportedReactions,
   landscape,
 }: CallParticipantsListProps) => {
+  const styles = useStyles();
   const [containerLayout, setContainerLayout] = useState({
     width: 0,
     height: 0,
@@ -163,10 +165,15 @@ export const CallParticipantsList = ({
     participantsLength: participants.length,
     numberOfColumns,
     horizontal,
+    margin: styles.participant.margin,
   });
 
   const itemContainerStyle = useMemo<StyleProp<ViewStyle>>(() => {
-    const style = { width: itemWidth, height: itemHeight };
+    const style = {
+      width: itemWidth,
+      height: itemHeight,
+      margin: styles.participant.margin,
+    };
     if (horizontal) {
       return [styles.participantWrapperHorizontal, style];
     }
@@ -174,7 +181,7 @@ export const CallParticipantsList = ({
       return [styles.landScapeStyle, style];
     }
     return style;
-  }, [itemWidth, itemHeight, horizontal, landscape]);
+  }, [itemWidth, itemHeight, horizontal, landscape, styles]);
 
   const participantProps: ParticipantViewComponentProps = {
     ParticipantLabel,
@@ -251,17 +258,27 @@ export const CallParticipantsList = ({
   );
 };
 
-const styles = StyleSheet.create({
-  flexed: { flex: 1 },
-  participantWrapperHorizontal: {
-    // note: if marginHorizontal is changed, be sure to change the width calculation in calculateParticipantViewSize function
-    marginHorizontal: 8,
-    borderRadius: 10,
-  },
-  landScapeStyle: {
-    borderRadius: 10,
-  },
-});
+const useStyles = () => {
+  const { theme } = useTheme();
+  return useMemo(
+    () =>
+      StyleSheet.create({
+        flexed: { flex: 1 },
+        participantWrapperHorizontal: {
+          // note: if marginHorizontal is changed, be sure to change the width calculation in calculateParticipantViewSize function
+          marginHorizontal: theme.variants.spacingSizes.sm,
+          borderRadius: theme.variants.borderRadiusSizes.sm,
+        },
+        landScapeStyle: {
+          borderRadius: theme.variants.borderRadiusSizes.sm,
+        },
+        participant: {
+          margin: theme.variants.spacingSizes.xs,
+        },
+      }),
+    [theme]
+  );
+};
 
 /**
  * This function calculates the size of the participant view based on the size of the container (the phone's screen size) and the number of participants.
@@ -278,12 +295,14 @@ function calculateParticipantViewSize({
   participantsLength,
   numberOfColumns,
   horizontal,
+  margin,
 }: {
   containerHeight: number;
   containerWidth: number;
   participantsLength: number;
   numberOfColumns: number;
   horizontal: boolean | undefined;
+  margin: number;
 }) {
   let itemHeight = containerHeight;
   // in vertical mode, we calculate the height of the participant view based on the containerHeight (aka the phone's screen height)
@@ -303,5 +322,7 @@ function calculateParticipantViewSize({
     itemWidth = itemWidth - 8 * 2;
   }
 
+  itemHeight = itemHeight - margin;
+  itemWidth = itemWidth - margin;
   return { itemHeight, itemWidth };
 }
diff --git a/sample-apps/react-native/dogfood/src/components/CallControlls/BottomControls.tsx b/sample-apps/react-native/dogfood/src/components/CallControlls/BottomControls.tsx
index 58dc1d0f4c..988dccbc85 100644
--- a/sample-apps/react-native/dogfood/src/components/CallControlls/BottomControls.tsx
+++ b/sample-apps/react-native/dogfood/src/components/CallControlls/BottomControls.tsx
@@ -82,7 +82,7 @@ const useStyles = (showMicLabel: boolean) => {
           height: BOTTOM_CONTROLS_HEIGHT,
         },
         speakingLabelContainer: {
-          backgroundColor: theme.colors.sheetSecondary,
+          backgroundColor: theme.colors.sheetPrimary,
           width: '100%',
         },
         label: {
diff --git a/sample-apps/react-native/dogfood/src/constants/KnownUsers.ts b/sample-apps/react-native/dogfood/src/constants/KnownUsers.ts
index 35cc7915dc..45e308091c 100644
--- a/sample-apps/react-native/dogfood/src/constants/KnownUsers.ts
+++ b/sample-apps/react-native/dogfood/src/constants/KnownUsers.ts
@@ -27,6 +27,6 @@ export const KnownUsers = [
   {
     id: 'kristian',
     name: 'Kristian Martinoski',
-    image: 'https://ca.slack-edge.com/T02RM6X6B-U07L58DPSHG-0f665ede711c-48',
+    image: 'https://ca.slack-edge.com/T02RM6X6B-U07L58DPSHG-0f665ede711c-512',
   },
 ];