Skip to content

Commit

Permalink
fix: issues discovered when fixing docs
Browse files Browse the repository at this point in the history
  • Loading branch information
kristian-mkd committed Nov 18, 2024
1 parent 6e78549 commit 5ac13d2
Show file tree
Hide file tree
Showing 4 changed files with 42 additions and 17 deletions.
Original file line number Diff line number Diff line change
@@ -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,
Expand Down Expand Up @@ -184,14 +184,18 @@ export const CallContent = ({
supportedReactions,
};

const landscapeStyles: ViewStyle = {
flexDirection: landscape ? 'row' : 'column',
};

return (
<>
{!disablePictureInPicture && (
<RTCViewPipIOS
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]}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ import {
ParticipantViewProps,
} from '../../Participant/ParticipantView';
import { CallContentProps } from '../CallContent';
import { useTheme } from '../../../contexts';

type FlatListProps = React.ComponentProps<
typeof FlatList<StreamVideoParticipant>
Expand Down Expand Up @@ -83,6 +84,7 @@ export const CallParticipantsList = ({
supportedReactions,
landscape,
}: CallParticipantsListProps) => {
const styles = useStyles();
const [containerLayout, setContainerLayout] = useState({
width: 0,
height: 0,
Expand Down Expand Up @@ -163,18 +165,23 @@ 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];
}
if (landscape) {
return [styles.landScapeStyle, style];
}
return style;
}, [itemWidth, itemHeight, horizontal, landscape]);
}, [itemWidth, itemHeight, horizontal, landscape, styles]);

const participantProps: ParticipantViewComponentProps = {
ParticipantLabel,
Expand Down Expand Up @@ -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.
Expand All @@ -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)
Expand All @@ -303,5 +322,7 @@ function calculateParticipantViewSize({
itemWidth = itemWidth - 8 * 2;
}

itemHeight = itemHeight - margin;
itemWidth = itemWidth - margin;
return { itemHeight, itemWidth };
}
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,7 @@ const useStyles = (showMicLabel: boolean) => {
height: BOTTOM_CONTROLS_HEIGHT,
},
speakingLabelContainer: {
backgroundColor: theme.colors.sheetSecondary,
backgroundColor: theme.colors.sheetPrimary,
width: '100%',
},
label: {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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',
},
];

0 comments on commit 5ac13d2

Please sign in to comment.