diff --git a/packages/react-native-sdk/src/components/Call/CallControls/CallControlsButton.tsx b/packages/react-native-sdk/src/components/Call/CallControls/CallControlsButton.tsx index 2574e70bd5..129a5a9c42 100644 --- 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 index d71bb8c128..856da716f4 100644 --- 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 index a20a869331..ccf8c8826f 100644 --- 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 index 2b0238233a..0b817e762d 100644 --- 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 index 89a5a9411f..c6fe0a0fd3 100644 --- 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 index 97ec6896fd..a8ea2c2bcf 100644 --- 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 = ({ transparent={true} visible={visible} onRequestClose={onCancel} + supportedOrientations={['portrait', 'landscape']} > @@ -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 index 78e8abd797..cfaa31ccf7 100644 --- 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 = ({ 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 index 6b44125060..787d930359 100644 --- 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(0); const styles = useStyles(); const { theme } = useTheme(); + const orientation = useOrientation(); + const isLandscape = orientation === 'landscape'; const onLayout: React.ComponentProps['onLayout'] = (event) => { const { height, width } = event.nativeEvent.layout; @@ -45,7 +48,7 @@ export const TopControls = ({ - {!isAwaitingResponse && } + {(!isAwaitingResponse || isLandscape) && } diff --git a/sample-apps/react-native/dogfood/src/components/FeedbackModal.tsx b/sample-apps/react-native/dogfood/src/components/FeedbackModal.tsx index 511a8b8c9e..086a2dfb70 100644 --- 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 index b3a8ebccdf..ca1659ee6f 100755 --- 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 index 6619c8c0cf..f64d178655 100644 --- 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 index b9c3921b44..1381f193fc 100644 --- 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, @@ -22,7 +25,13 @@ 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({ @@ -30,15 +39,15 @@ const useStyles = () => { 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], ); };