other various fixes

GetStream · Nov 6, 2024 · f92ce77 · f92ce77
1 parent e451db1
commit f92ce77
Show file tree

Hide file tree

Showing 12 changed files with 53 additions and 35 deletions.
diff --git a/packages/react-native-sdk/src/components/Call/CallControls/CallControlsButton.tsx b/packages/react-native-sdk/src/components/Call/CallControls/CallControlsButton.tsx
@@ -108,16 +108,7 @@ export const CallControlsButton = (
 const styles = StyleSheet.create({
   container: {
     justifyContent: 'center',
-    borderWidth: 1,
     alignItems: 'center',
-    // For iOS
-    shadowColor: '#000',
-    shadowOffset: {
-      width: 0,
-      height: 2,
-    },
-    shadowOpacity: 0.25,
-    shadowRadius: 8,
 
     // For android
     elevation: 6,

diff --git a/packages/react-native-sdk/src/components/Call/CallLayout/CallParticipantsGrid.tsx b/packages/react-native-sdk/src/components/Call/CallLayout/CallParticipantsGrid.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { StyleSheet, View, ViewStyle } from 'react-native';
 import { useCallStateHooks } from '@stream-io/video-react-bindings';
 import { useDebouncedValue } from '../../../utils/hooks/useDebouncedValue';
@@ -52,6 +52,7 @@ export const CallParticipantsGrid = ({
   const {
     theme: { colors, callParticipantsGrid },
   } = useTheme();
+  const styles = useStyles();
   const { useRemoteParticipants, useParticipants, useLocalParticipant } =
     useCallStateHooks();
   const _remoteParticipants = useRemoteParticipants();
@@ -117,6 +118,16 @@ export const CallParticipantsGrid = ({
   );
 };
 
-const styles = StyleSheet.create({
-  container: { flex: 1 },
-});
+const useStyles = () => {
+  const { theme } = useTheme();
+  return useMemo(
+    () =>
+      StyleSheet.create({
+        container: {
+          flex: 1,
+          padding: theme.variants.spacingSizes.xs,
+        },
+      }),
+    [theme]
+  );
+};
diff --git a/packages/react-native-sdk/src/components/Participant/ParticipantView/ParticipantView.tsx b/packages/react-native-sdk/src/components/Participant/ParticipantView/ParticipantView.tsx
@@ -112,8 +112,8 @@ export const ParticipantView = ({
   const {
     theme: { colors, participantView },
   } = useTheme();
-  const { isSpeaking, userId, reaction } = participant;
-  const styles = useStyles(!!reaction);
+  const { isSpeaking, userId } = participant;
+  const styles = useStyles();
   const isScreenSharing = trackType === 'screenShareTrack';
   const applySpeakerStyle = isSpeaking && !isScreenSharing;
   const speakerStyle = applySpeakerStyle && [

diff --git a/sample-apps/react-native/dogfood/src/components/BottomControlsDrawer.tsx b/sample-apps/react-native/dogfood/src/components/BottomControlsDrawer.tsx
@@ -273,7 +273,8 @@ const useStyles = () => {
         option: {
           flexDirection: 'row',
           alignItems: 'center',
-          borderWidth: 2,
+          borderWidth: 1,
+          borderColor: colors.sheetTertiary,
           borderRadius: variants.borderRadiusSizes.lg,
           paddingHorizontal: variants.spacingSizes.md,
           height: variants.roundButtonSizes.lg,
@@ -284,7 +285,8 @@ const useStyles = () => {
           flexDirection: 'row',
           alignItems: 'center',
           justifyContent: 'center',
-          borderWidth: 2,
+          borderWidth: 1,
+          borderColor: colors.sheetTertiary,
           borderRadius: variants.borderRadiusSizes.lg,
           paddingHorizontal: variants.spacingSizes.md,
           height: variants.roundButtonSizes.lg,

diff --git a/sample-apps/react-native/dogfood/src/components/CallControlls/BottomControls.tsx b/sample-apps/react-native/dogfood/src/components/CallControlls/BottomControls.tsx
@@ -8,7 +8,6 @@ import {
 } from '@stream-io/video-react-native-sdk';
 import React, { useMemo } from 'react';
 import { StyleSheet, Text, View } from 'react-native';
-import { appTheme } from '../../theme';
 import { BOTTOM_CONTROLS_HEIGHT, Z_INDEX } from '../../constants';
 import { MoreActionsButton } from './MoreActionsButton';
 import { ParticipantsButton } from './ParticipantsButton';
@@ -83,12 +82,12 @@ const useStyles = (showMicLabel: boolean) => {
           height: BOTTOM_CONTROLS_HEIGHT,
         },
         speakingLabelContainer: {
-          backgroundColor: appTheme.colors.static_overlay,
+          backgroundColor: theme.colors.sheetSecondary,
           width: '100%',
         },
         label: {
           textAlign: 'center',
-          color: appTheme.colors.static_white,
+          color: theme.colors.typePrimary,
         },
         callControlsWrapper: {
           display: 'flex',

diff --git a/sample-apps/react-native/dogfood/src/components/CallControlls/CallRecordingModal.tsx b/sample-apps/react-native/dogfood/src/components/CallControlls/CallRecordingModal.tsx
@@ -45,6 +45,7 @@ export const CallRecordingModal: React.FC<CallRecordingModalProps> = ({
       transparent={true}
       visible={visible}
       onRequestClose={onCancel}
+      supportedOrientations={['portrait', 'landscape']}
     >
       <TouchableWithoutFeedback onPress={onCancel}>
         <View style={styles.overlay}>
@@ -155,7 +156,7 @@ const useStyles = (isEndRecordingModal: boolean) => {
             : theme.colors.buttonPrimaryDefault,
         },
         buttonText: {
-          color: 'white',
+          color: theme.colors.typePrimary,
           fontSize: 13,
           fontWeight: '600',
         },

diff --git a/sample-apps/react-native/dogfood/src/components/CallControlls/LayoutSwitcherModal.tsx b/sample-apps/react-native/dogfood/src/components/CallControlls/LayoutSwitcherModal.tsx
@@ -40,9 +40,8 @@ const LayoutSwitcherModal: React.FC<PopupComponentProps> = ({
     if (isVisible && anchorPosition) {
       const windowHeight = Dimensions.get('window').height;
       const windowWidth = Dimensions.get('window').width;
-
       let top = anchorPosition.y + anchorPosition.height / 2 + topInset;
-      let left = anchorPosition.x + leftInset;
+      let left = anchorPosition.x + leftInset + 6;
 
       // Ensure the popup stays within the screen bounds
       if (top + 150 > windowHeight) {
@@ -124,13 +123,15 @@ const useStyles = () => {
           position: 'absolute',
           width: 212,
           backgroundColor: theme.colors.sheetSecondary,
-          borderRadius: theme.variants.borderRadiusSizes.lg,
+          borderRadius: theme.variants.borderRadiusSizes.md,
           padding: theme.variants.spacingSizes.md,
           gap: theme.variants.spacingSizes.sm,
         },
         button: {
           backgroundColor: theme.colors.buttonSecondaryDefault,
           borderRadius: theme.variants.borderRadiusSizes.lg,
+          borderWidth: 1,
+          borderColor: theme.colors.sheetTertiary,
           flexDirection: 'row',
           justifyContent: 'flex-start',
           alignItems: 'center',
@@ -141,7 +142,7 @@ const useStyles = () => {
           backgroundColor: theme.colors.buttonPrimaryDefault,
         },
         buttonText: {
-          color: 'white',
+          color: theme.colors.typePrimary,
           textAlign: 'center',
           fontWeight: '600',
           marginTop: 2,

diff --git a/sample-apps/react-native/dogfood/src/components/CallControlls/TopControls.tsx b/sample-apps/react-native/dogfood/src/components/CallControlls/TopControls.tsx
@@ -9,6 +9,7 @@ import {
 import { CallStatusBadge } from './CallStatusBadge';
 import { VideoEffectsButton } from '../VideoEffectsButton';
 import { LayoutSwitcherButton } from './LayoutSwitcherButton';
+import { useOrientation } from '../../hooks/useOrientation';
 
 export type TopControlsProps = {
   onHangupCallHandler?: () => void;
@@ -25,6 +26,8 @@ export const TopControls = ({
   const [topControlsWidth, setTopControlsWidth] = useState<number>(0);
   const styles = useStyles();
   const { theme } = useTheme();
+  const orientation = useOrientation();
+  const isLandscape = orientation === 'landscape';
 
   const onLayout: React.ComponentProps<typeof View>['onLayout'] = (event) => {
     const { height, width } = event.nativeEvent.layout;
@@ -45,7 +48,7 @@ export const TopControls = ({
             <ToggleCameraFaceButton
               backgroundColor={theme.colors.sheetPrimary}
             />
-            {!isAwaitingResponse && <VideoEffectsButton />}
+            {(!isAwaitingResponse || isLandscape) && <VideoEffectsButton />}
           </View>
         </View>
         <View style={styles.centerElement}>

diff --git a/sample-apps/react-native/dogfood/src/components/FeedbackModal.tsx b/sample-apps/react-native/dogfood/src/components/FeedbackModal.tsx
@@ -151,7 +151,7 @@ const useStyles = () => {
           fontSize: 28,
           marginBottom: variants.spacingSizes.sm,
           textAlign: 'center',
-          color: 'white',
+          color: colors.typePrimary,
           fontWeight: '600',
         },
         subtitle: {

diff --git a/sample-apps/react-native/dogfood/src/components/NavigationHeader.tsx b/sample-apps/react-native/dogfood/src/components/NavigationHeader.tsx
@@ -120,7 +120,7 @@ const useStyles = () => {
           flexShrink: 1,
           fontSize: 20,
           fontWeight: '500',
-          color: appTheme.colors.static_white,
+          color: theme.colors.typePrimary,
           marginRight: appTheme.spacing.lg,
         },
         avatar: {

diff --git a/sample-apps/react-native/dogfood/src/components/ParticipantsInfoList.tsx b/sample-apps/react-native/dogfood/src/components/ParticipantsInfoList.tsx
@@ -256,6 +256,7 @@ const useStyles = () => {
           backgroundColor: theme.colors.sheetPrimary,
           borderRadius: 15,
           marginHorizontal: 16,
+          marginTop: 65,
         },
         header: {
           flexDirection: 'row',

diff --git a/sample-apps/react-native/dogfood/src/components/TextInput.tsx b/sample-apps/react-native/dogfood/src/components/TextInput.tsx
@@ -4,9 +4,12 @@ import {
   StyleSheet,
   TextInputProps,
 } from 'react-native';
-import { appTheme } from '../theme';
 import { INPUT_HEIGHT } from '../constants';
-import { useTheme } from '@stream-io/video-react-native-sdk';
+import {
+  Theme,
+  defaultTheme,
+  useTheme,
+} from '@stream-io/video-react-native-sdk';
 
 export const TextInput = (
   props: Omit<TextInputProps, 'placeholderTextColor'>,
@@ -22,23 +25,29 @@ export const TextInput = (
 };
 
 const useStyles = () => {
-  const { theme } = useTheme();
+  let appTheme: Theme;
+  try {
+    /* eslint-disable react-hooks/rules-of-hooks */
+    appTheme = useTheme()?.theme;
+  } catch (e) {
+    appTheme = defaultTheme;
+  }
   return useMemo(
     () =>
       StyleSheet.create({
         input: {
           paddingLeft: appTheme.spacing.lg,
           marginVertical: appTheme.spacing.md,
           height: INPUT_HEIGHT,
-          backgroundColor: theme.colors.sheetSecondary,
+          backgroundColor: appTheme.colors.sheetSecondary,
           borderRadius: 8,
-          borderColor: theme.colors.buttonPrimaryDisabled,
+          borderColor: appTheme.colors.buttonPrimaryDisabled,
           borderWidth: 1,
-          color: theme.colors.typePrimary,
+          color: appTheme.colors.typePrimary,
           fontSize: 17,
           flex: 1,
         },
       }),
-    [theme],
+    [appTheme],
   );
 };