fix: revert some more SDK layouts changes

GetStream · Nov 1, 2024 · f9a46be · f9a46be
1 parent b486cf1
commit f9a46be
Show file tree

Hide file tree

Showing 7 changed files with 28 additions and 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
@@ -140,7 +140,6 @@ export const CallContent = ({
     !isInPiPMode &&
     remoteParticipants.length > 0 &&
     remoteParticipants.length < 3;
-
   const isRemoteParticipantInFloatingView =
     showFloatingView &&
     showRemoteParticipantInFloatingView &&
@@ -175,6 +174,7 @@ export const CallContent = ({
   const callParticipantsGridProps: CallParticipantsGridProps = {
     ...participantViewProps,
     landscape,
+    showLocalParticipant: isRemoteParticipantInFloatingView,
     ParticipantView,
     CallParticipantsList,
     supportedReactions,

diff --git a/packages/react-native-sdk/src/components/Call/CallLayout/CallParticipantsGrid.tsx b/packages/react-native-sdk/src/components/Call/CallLayout/CallParticipantsGrid.tsx
@@ -76,7 +76,7 @@ export const CallParticipantsGrid = ({
       ? [localParticipant]
       : remoteParticipants
     : allParticipants;
-    
+
   if (isInPiPMode) {
     participants =
       remoteParticipants.length > 0

diff --git a/packages/react-native-sdk/src/components/Call/CallLayout/CallParticipantsSpotlight.tsx b/packages/react-native-sdk/src/components/Call/CallLayout/CallParticipantsSpotlight.tsx
@@ -58,7 +58,7 @@ export const CallParticipantsSpotlight = ({
   const {
     theme: { callParticipantsSpotlight, variants },
   } = useTheme();
-  const styles = useStyles(landscape);
+  const styles = useStyles();
   const { useParticipants } = useCallStateHooks();
   const _allParticipants = useParticipants({
     sortBy: speakerLayoutSortPreset,
@@ -153,32 +153,27 @@ export const CallParticipantsSpotlight = ({
   );
 };
 
-const useStyles = (landscape: boolean | undefined) => {
+const useStyles = () => {
   const { theme } = useTheme();
   return useMemo(
     () =>
       StyleSheet.create({
         container: {
           flex: 1,
-          padding: theme.variants.spacingSizes.xs,
-          backgroundColor: theme.colors.sheetPrimary,
         },
         fullScreenSpotlightContainer: {
           flex: 1,
         },
         spotlightContainer: {
-          flex: landscape ? 3 : 4,
+          flex: 2,
           overflow: 'hidden',
-          borderRadius: theme.variants.borderRadiusSizes.md,
-          marginHorizontal: theme.variants.spacingSizes.xs,
+          borderRadius: theme.variants.borderRadiusSizes.sm,
+          marginHorizontal: theme.variants.spacingSizes.sm,
         },
         callParticipantsListContainer: {
           flex: 1,
-          flexDirection: 'row',
-          backgroundColor: theme.colors.sheetPrimary,
-          marginLeft: landscape ? theme.variants.spacingSizes.sm : 0,
         },
       }),
-    [theme, landscape]
+    [theme]
   );
 };
diff --git a/packages/react-native-sdk/src/components/Call/CallParticipantsList/CallParticipantsList.tsx b/packages/react-native-sdk/src/components/Call/CallParticipantsList/CallParticipantsList.tsx
@@ -21,7 +21,6 @@ import {
   ParticipantViewProps,
 } from '../../Participant/ParticipantView';
 import { CallContentProps } from '../CallContent';
-import { useTheme } from '../../..';
 
 type FlatListProps = React.ComponentProps<
   typeof FlatList<StreamVideoParticipant>
@@ -84,7 +83,6 @@ export const CallParticipantsList = ({
   supportedReactions,
   landscape,
 }: CallParticipantsListProps) => {
-  // const { theme } = useTheme();
   const [containerLayout, setContainerLayout] = useState({
     width: 0,
     height: 0,
@@ -300,7 +298,6 @@ function calculateParticipantViewSize({
   }
 
   let itemWidth = containerWidth / numberOfColumns;
-  itemWidth = itemWidth - 4 * 2;
   if (horizontal) {
     // in horizontal mode we apply margin of 8 to the participant view and that should be subtracted from the width
     itemWidth = itemWidth - 8 * 2;

diff --git a/packages/react-native-sdk/src/components/Participant/ParticipantView/ParticipantLabel.tsx b/packages/react-native-sdk/src/components/Participant/ParticipantView/ParticipantLabel.tsx
@@ -101,7 +101,7 @@ export const ParticipantLabel = ({
           {participantLabel}
         </Text>
         <View style={styles.indicatorWrapper}>
-          <SpeechIndicator isSpeaking={participant.isSpeaking} />
+          <SpeechIndicator isSpeaking={participant.isDominantSpeaker} />
         </View>
       </View>
       {isPinningEnabled && (

diff --git a/packages/react-native-sdk/src/icons/Spotlight.tsx b/packages/react-native-sdk/src/icons/Spotlight.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import { Svg, Path } from 'react-native-svg';
+import { ColorValue } from 'react-native/types';
+
+type Props = {
+  color: ColorValue;
+};
+
+export const SpotLight = ({ color }: Props) => (
+  <Svg viewBox="0 0 24 24">
+    <Path
+      fill={color}
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M 12 22 C 17.5228 22 22 17.5228 22 12 C 22 6.47715 17.5228 2 12 2 C 6.47715 2 2 6.47715 2 12 C 2 17.5228 6.47715 22 12 22 Z M 12 24 C 18.6274 24 24 18.6274 24 12 C 24 5.37258 18.6274 0 12 0 C 5.37258 0 0 5.37258 0 12 C 0 18.6274 5.37258 24 12 24 Z"
+    />
+  </Svg>
+);
diff --git a/packages/react-native-sdk/src/icons/index.tsx b/packages/react-native-sdk/src/icons/index.tsx
@@ -8,6 +8,7 @@ export * from './Video';
 export * from './VideoSlash';
 export * from './ThreeDots';
 export * from './PinVertical';
+export * from './Spotlight';
 export * from './ScreenShareIndicator';
 export * from './ScreenShare';
 export * from './Reaction';