@stream-io/video-react-native-sdk 0.0.1-alpha.226 → 0.0.1-alpha.228
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +13 -0
- package/dist/__tests__/components/CallParticipantsView.test.js +21 -3
- package/dist/__tests__/components/CallParticipantsView.test.js.map +1 -1
- package/dist/src/components/CallParticipantsList.js +62 -14
- package/dist/src/components/CallParticipantsList.js.map +1 -1
- package/dist/src/components/CallParticipantsSpotlightView.js +2 -1
- package/dist/src/components/CallParticipantsSpotlightView.js.map +1 -1
- package/package.json +3 -3
- package/src/components/CallParticipantsList.tsx +91 -16
- package/src/components/CallParticipantsSpotlightView.tsx +2 -1
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,19 @@
|
|
|
2
2
|
|
|
3
3
|
This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
|
|
4
4
|
|
|
5
|
+
## [0.0.1-alpha.228](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-native-sdk-0.0.1-alpha.227...@stream-io/video-react-native-sdk-0.0.1-alpha.228) (2023-06-29)
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
### Features
|
|
9
|
+
|
|
10
|
+
* **react-native:** align call participants list with figma ([#737](https://github.com/GetStream/stream-video-js/issues/737)) ([b9e1f04](https://github.com/GetStream/stream-video-js/commit/b9e1f040c5ab14d5d655124d3abd31efa5722163))
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
## [0.0.1-alpha.227](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-native-sdk-0.0.1-alpha.226...@stream-io/video-react-native-sdk-0.0.1-alpha.227) (2023-06-29)
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
|
|
5
18
|
## [0.0.1-alpha.226](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-native-sdk-0.0.1-alpha.225...@stream-io/video-react-native-sdk-0.0.1-alpha.226) (2023-06-28)
|
|
6
19
|
|
|
7
20
|
|
|
@@ -18,6 +18,7 @@ var P_IDS;
|
|
|
18
18
|
P_IDS["LOCAL_1"] = "local-1";
|
|
19
19
|
P_IDS["REMOTE_1"] = "remote-1";
|
|
20
20
|
P_IDS["REMOTE_2"] = "remote-2";
|
|
21
|
+
P_IDS["REMOTE_3"] = "remote-3";
|
|
21
22
|
})(P_IDS || (P_IDS = {}));
|
|
22
23
|
const simulateOnViewableItemsChanged = async (viewableItems) => {
|
|
23
24
|
const flatList = await RNTLTools_1.screen.findByLabelText(A11yLabels_1.A11yComponents.CALL_PARTICIPANTS_LIST);
|
|
@@ -40,7 +41,7 @@ describe('CallParticipantsView', () => {
|
|
|
40
41
|
userId: P_IDS.LOCAL_1,
|
|
41
42
|
}),
|
|
42
43
|
(0, participant_1.default)({
|
|
43
|
-
publishedTracks: [video_client_1.SfuModels.TrackType.AUDIO
|
|
44
|
+
publishedTracks: [video_client_1.SfuModels.TrackType.AUDIO],
|
|
44
45
|
sessionId: P_IDS.REMOTE_1,
|
|
45
46
|
userId: P_IDS.REMOTE_1,
|
|
46
47
|
}),
|
|
@@ -49,6 +50,13 @@ describe('CallParticipantsView', () => {
|
|
|
49
50
|
call,
|
|
50
51
|
});
|
|
51
52
|
expect(await RNTLTools_1.screen.findByLabelText(A11yLabels_1.A11yComponents.CALL_PARTICIPANTS_GRID_VIEW)).toBeVisible();
|
|
53
|
+
// Locating and verifying that all ParticipantViews are rendered
|
|
54
|
+
const localParticipant = (0, RNTLTools_1.within)(RNTLTools_1.screen.getByLabelText(A11yLabels_1.A11yComponents.LOCAL_PARTICIPANT));
|
|
55
|
+
const participant1 = (0, RNTLTools_1.within)(RNTLTools_1.screen.getByLabelText(`participant-${P_IDS.REMOTE_1}`));
|
|
56
|
+
expect(localParticipant.getByLabelText(A11yLabels_1.A11yComponents.PARTICIPANT_MEDIA_STREAM)).toHaveProp('streamURL', 'video-test-url');
|
|
57
|
+
expect(participant1.getByLabelText(A11yLabels_1.A11yComponents.PARTICIPANT_MEDIA_STREAM)).toHaveProp('streamURL', 'audio-test-url');
|
|
58
|
+
// flat list should not be rendered for 2 participants as we should not wrap them in a grid
|
|
59
|
+
expect(RNTLTools_1.screen.queryByLabelText(A11yLabels_1.A11yComponents.CALL_PARTICIPANTS_LIST)).toBeNull();
|
|
52
60
|
});
|
|
53
61
|
it('should render an call participants view with spotlight mode with 2 participants', async () => {
|
|
54
62
|
const call = (0, call_1.mockCall)((0, client_1.mockClientWithUser)(), [
|
|
@@ -74,8 +82,10 @@ describe('CallParticipantsView', () => {
|
|
|
74
82
|
call,
|
|
75
83
|
});
|
|
76
84
|
expect(await RNTLTools_1.screen.findByLabelText(A11yLabels_1.A11yComponents.CALL_PARTICIPANTS_SPOTLIGHT_VIEW)).toBeVisible();
|
|
85
|
+
// Since it has a screen share and thereby spotlight, we should render the flatlist even with 2 participants
|
|
86
|
+
expect(await RNTLTools_1.screen.findByLabelText(A11yLabels_1.A11yComponents.CALL_PARTICIPANTS_LIST)).toBeVisible();
|
|
77
87
|
});
|
|
78
|
-
it('should render an active call with
|
|
88
|
+
it('should render an active call with 4 participants. partic. 1 local partic., partic. 2 muted video, partic. 3 muted audio, partic. 4 muted audio', async () => {
|
|
79
89
|
const call = (0, call_1.mockCall)((0, client_1.mockClientWithUser)(), [
|
|
80
90
|
(0, participant_1.default)({
|
|
81
91
|
isLocalParticipant: true,
|
|
@@ -94,6 +104,12 @@ describe('CallParticipantsView', () => {
|
|
|
94
104
|
sessionId: P_IDS.REMOTE_2,
|
|
95
105
|
userId: P_IDS.REMOTE_2,
|
|
96
106
|
}),
|
|
107
|
+
(0, participant_1.default)({
|
|
108
|
+
publishedTracks: [video_client_1.SfuModels.TrackType.VIDEO],
|
|
109
|
+
audioStream: null,
|
|
110
|
+
sessionId: P_IDS.REMOTE_3,
|
|
111
|
+
userId: P_IDS.REMOTE_3,
|
|
112
|
+
}),
|
|
97
113
|
]);
|
|
98
114
|
(0, RNTLTools_1.render)(<components_1.CallParticipantsView />, {
|
|
99
115
|
call,
|
|
@@ -109,12 +125,14 @@ describe('CallParticipantsView', () => {
|
|
|
109
125
|
const localParticipant = (0, RNTLTools_1.within)(RNTLTools_1.screen.getByLabelText(A11yLabels_1.A11yComponents.LOCAL_PARTICIPANT));
|
|
110
126
|
const participant1 = (0, RNTLTools_1.within)(RNTLTools_1.screen.getByLabelText(`participant-${P_IDS.REMOTE_1}`));
|
|
111
127
|
const participant2 = (0, RNTLTools_1.within)(RNTLTools_1.screen.getByLabelText(`participant-${P_IDS.REMOTE_2}`));
|
|
128
|
+
const participant3 = (0, RNTLTools_1.within)(RNTLTools_1.screen.getByLabelText(`participant-${P_IDS.REMOTE_3}`));
|
|
112
129
|
// Verifying that the local partic.'s video/audio are rendered within their respective participant
|
|
113
130
|
expect(localParticipant.getByLabelText(A11yLabels_1.A11yComponents.PARTICIPANT_MEDIA_STREAM)).toHaveProp('streamURL', 'video-test-url');
|
|
114
131
|
expect(participant1.getByLabelText(A11yLabels_1.A11yComponents.PARTICIPANT_MEDIA_STREAM)).toHaveProp('streamURL', 'audio-test-url');
|
|
115
132
|
expect(participant2.getByLabelText(A11yLabels_1.A11yComponents.PARTICIPANT_MEDIA_STREAM)).toHaveProp('streamURL', 'video-test-url');
|
|
133
|
+
expect(participant3.getByLabelText(A11yLabels_1.A11yComponents.PARTICIPANT_MEDIA_STREAM)).toHaveProp('streamURL', 'video-test-url');
|
|
116
134
|
// Verifying no extra/unknown RTCViews are rendered
|
|
117
|
-
expect(RNTLTools_1.screen.getAllByLabelText(A11yLabels_1.A11yComponents.PARTICIPANT_MEDIA_STREAM)).toHaveLength(
|
|
135
|
+
expect(RNTLTools_1.screen.getAllByLabelText(A11yLabels_1.A11yComponents.PARTICIPANT_MEDIA_STREAM)).toHaveLength(4);
|
|
118
136
|
});
|
|
119
137
|
});
|
|
120
138
|
//# sourceMappingURL=CallParticipantsView.test.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CallParticipantsView.test.js","sourceRoot":"","sources":["../../../__tests__/components/CallParticipantsView.test.tsx"],"names":[],"mappings":";;;;;AAAA,kDAA0B;AAC1B,4CAAqD;AACrD,0DAAoD;AACpD,uEAAmD;AACnD,+DAAgE;AAChE,wCAAyC;AACzC,kDAAiE;AACjE,qDAA4D;AAG5D,OAAO,CAAC,IAAI,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC;AACzB,IAAI,CAAC,aAAa,EAAE,CAAC;AAErB,IAAK,
|
|
1
|
+
{"version":3,"file":"CallParticipantsView.test.js","sourceRoot":"","sources":["../../../__tests__/components/CallParticipantsView.test.tsx"],"names":[],"mappings":"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"}
|
|
@@ -42,7 +42,10 @@ const VIEWABILITY_CONFIG = {
|
|
|
42
42
|
*/
|
|
43
43
|
const CallParticipantsList = (props) => {
|
|
44
44
|
const { numColumns = 2, horizontal, participants } = props;
|
|
45
|
-
const [
|
|
45
|
+
const [containerLayout, setContainerLayout] = (0, react_1.useState)({
|
|
46
|
+
width: 0,
|
|
47
|
+
height: 0,
|
|
48
|
+
});
|
|
46
49
|
// we use a HashSet to track the currently viewable participants
|
|
47
50
|
// and a separate force update state to rerender the component to inform that the HashSet has changed
|
|
48
51
|
// NOTE: we use set instead of array or object for O(1) lookup, add and delete
|
|
@@ -87,38 +90,83 @@ const CallParticipantsList = (props) => {
|
|
|
87
90
|
// NOTE: key must be sessionId always as it is used to track viewable participants
|
|
88
91
|
const keyExtractor = (0, react_1.useRef)((item) => item.sessionId).current;
|
|
89
92
|
const onLayout = (0, react_1.useRef)((event) => {
|
|
90
|
-
const { width } = event.nativeEvent.layout;
|
|
91
|
-
|
|
93
|
+
const { height, width } = event.nativeEvent.layout;
|
|
94
|
+
setContainerLayout((prev) => {
|
|
95
|
+
if (prev.height === height && prev.width === width) {
|
|
96
|
+
return prev;
|
|
97
|
+
}
|
|
98
|
+
return { height, width };
|
|
99
|
+
});
|
|
92
100
|
}).current;
|
|
101
|
+
const { itemHeight, itemWidth } = calculateParticipantViewSize({
|
|
102
|
+
containerHeight: containerLayout.height,
|
|
103
|
+
containerWidth: containerLayout.width,
|
|
104
|
+
participantsLength: participants.length,
|
|
105
|
+
numColumns,
|
|
106
|
+
horizontal,
|
|
107
|
+
});
|
|
93
108
|
const itemContainerStyle = (0, react_1.useMemo)(() => {
|
|
94
|
-
|
|
95
|
-
// number of columns and the margin between the views
|
|
96
|
-
const size = containerWidth / numColumns - theme_1.theme.margin.sm * 2;
|
|
97
|
-
const style = { width: size, height: size };
|
|
109
|
+
const style = { width: itemWidth, height: itemHeight };
|
|
98
110
|
if (horizontal) {
|
|
99
111
|
return [styles.participantWrapperHorizontal, style];
|
|
100
112
|
}
|
|
101
|
-
return
|
|
102
|
-
}, [
|
|
113
|
+
return style;
|
|
114
|
+
}, [itemWidth, itemHeight, horizontal]);
|
|
103
115
|
const renderItem = (0, react_1.useCallback)(({ item: participant }) => {
|
|
104
116
|
const isVisible = viewableParticipantSessionIds.current.has(participant.sessionId);
|
|
105
117
|
return (<ParticipantView_1.ParticipantView participant={participant} containerStyle={itemContainerStyle} kind="video" isVisible={isVisible}/>);
|
|
106
118
|
}, [itemContainerStyle]);
|
|
119
|
+
// in vertical mode, only when there are more than 2 participants in a call, the participants should be displayed in a grid
|
|
120
|
+
// else we display them both in a stretched row on the screen
|
|
121
|
+
const shouldWrapByColumns = !!horizontal || participants.length > 2;
|
|
122
|
+
if (!shouldWrapByColumns) {
|
|
123
|
+
return (<>
|
|
124
|
+
{participants.map((participant, index) => (<ParticipantView_1.ParticipantView participant={participant} containerStyle={styles.flexed} kind="video" isVisible={true} key={keyExtractor(participant, index)}/>))}
|
|
125
|
+
</>);
|
|
126
|
+
}
|
|
107
127
|
return (<react_native_1.FlatList onLayout={onLayout} key={!horizontal ? numColumns : undefined} // setting numColumns as key is a strict requirement of react-native to support changing numColumns on the fly
|
|
108
|
-
data={participants} keyExtractor={keyExtractor} viewabilityConfig={VIEWABILITY_CONFIG} onViewableItemsChanged={onViewableItemsChanged} renderItem={renderItem} numColumns={!horizontal ? numColumns : undefined} horizontal={horizontal} showsHorizontalScrollIndicator={false} extraData={`${forceUpdateValue}
|
|
128
|
+
data={participants} keyExtractor={keyExtractor} viewabilityConfig={VIEWABILITY_CONFIG} onViewableItemsChanged={onViewableItemsChanged} renderItem={renderItem} numColumns={!horizontal ? numColumns : undefined} horizontal={horizontal} showsHorizontalScrollIndicator={false} extraData={`${forceUpdateValue}`} // this is important to force re-render when visibility changes
|
|
109
129
|
accessibilityLabel={A11yLabels_1.A11yComponents.CALL_PARTICIPANTS_LIST}/>);
|
|
110
130
|
};
|
|
111
131
|
exports.CallParticipantsList = CallParticipantsList;
|
|
112
132
|
const styles = react_native_1.StyleSheet.create({
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
overflow: 'hidden',
|
|
116
|
-
borderRadius: theme_1.theme.rounded.sm,
|
|
133
|
+
flexed: {
|
|
134
|
+
flex: 1,
|
|
117
135
|
},
|
|
118
136
|
participantWrapperHorizontal: {
|
|
137
|
+
// note: if marginHorizontal is changed, be sure to change the width calculation in calculateParticipantViewSize function
|
|
119
138
|
marginHorizontal: theme_1.theme.margin.sm,
|
|
120
139
|
overflow: 'hidden',
|
|
121
140
|
borderRadius: theme_1.theme.rounded.sm,
|
|
122
141
|
},
|
|
123
142
|
});
|
|
143
|
+
/**
|
|
144
|
+
* 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.
|
|
145
|
+
* @param {number} containerHeight - height of the container (the phone's screen height) in pixels
|
|
146
|
+
* @param {number} containerWidth - width of the container (the phone's screen width) in pixels
|
|
147
|
+
* @param {number} participantsLength - number of participants
|
|
148
|
+
* @param {number} numColumns - number of columns
|
|
149
|
+
* @param {boolean} horizontal - whether the participant view is in horizontal mode
|
|
150
|
+
* @returns {object} - an object containing the height and width of the participant view
|
|
151
|
+
*/
|
|
152
|
+
function calculateParticipantViewSize({ containerHeight, containerWidth, participantsLength, numColumns, horizontal, }) {
|
|
153
|
+
let itemHeight = containerHeight;
|
|
154
|
+
// in vertical mode, we calculate the height of the participant view based on the containerHeight (aka the phone's screen height)
|
|
155
|
+
if (!horizontal) {
|
|
156
|
+
if (participantsLength <= 4) {
|
|
157
|
+
// special case: if there are 4 or less participants, we display them in 2 rows
|
|
158
|
+
itemHeight = containerHeight / 2;
|
|
159
|
+
}
|
|
160
|
+
else {
|
|
161
|
+
// generally, we display the participants in 3 rows
|
|
162
|
+
itemHeight = containerHeight / 3;
|
|
163
|
+
}
|
|
164
|
+
}
|
|
165
|
+
let itemWidth = containerWidth / numColumns;
|
|
166
|
+
if (horizontal) {
|
|
167
|
+
// in horizontal mode we apply margin to the participant view and that should be subtracted from the width
|
|
168
|
+
itemWidth = itemWidth - theme_1.theme.margin.sm * 2;
|
|
169
|
+
}
|
|
170
|
+
return { itemHeight, itemWidth };
|
|
171
|
+
}
|
|
124
172
|
//# sourceMappingURL=CallParticipantsList.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CallParticipantsList.js","sourceRoot":"","sources":["../../../src/components/CallParticipantsList.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAMe;AACf,+CAA0E;AAC1E,uDAAoD;AACpD,0DAKiC;AACjC,oCAAiC;AACjC,wEAAqE;AACrE,0EAA0D;AAC1D,wDAAyD;AAMzD,MAAM,kBAAkB,GAAuC;IAC7D,kBAAkB,EAAE,KAAK;IACzB,2BAA2B,EAAE,EAAE;CAChC,CAAC;AAqBF;;;GAGG;AACI,MAAM,oBAAoB,GAAG,CAAC,KAAgC,EAAE,EAAE;IACvE,MAAM,EAAE,UAAU,GAAG,CAAC,EAAE,UAAU,EAAE,YAAY,EAAE,GAAG,KAAK,CAAC;IAC3D,MAAM,CAAC,
|
|
1
|
+
{"version":3,"file":"CallParticipantsList.js","sourceRoot":"","sources":["../../../src/components/CallParticipantsList.tsx"],"names":[],"mappings":"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"}
|
|
@@ -33,12 +33,13 @@ exports.CallParticipantsSpotlightView = CallParticipantsSpotlightView;
|
|
|
33
33
|
const styles = react_native_1.StyleSheet.create({
|
|
34
34
|
container: { flex: 1 },
|
|
35
35
|
participantView: {
|
|
36
|
-
flex:
|
|
36
|
+
flex: 2,
|
|
37
37
|
overflow: 'hidden',
|
|
38
38
|
borderRadius: theme_1.theme.rounded.sm,
|
|
39
39
|
marginHorizontal: theme_1.theme.padding.sm,
|
|
40
40
|
},
|
|
41
41
|
participantVideoContainer: {
|
|
42
|
+
flex: 1,
|
|
42
43
|
paddingVertical: theme_1.theme.padding.sm,
|
|
43
44
|
},
|
|
44
45
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CallParticipantsSpotlightView.js","sourceRoot":"","sources":["../../../src/components/CallParticipantsSpotlightView.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,0DAA4E;AAC5E,0EAAkE;AAClE,+CAAgD;AAChD,uDAAoD;AACpD,oCAAiC;AACjC,wEAAqE;AACrE,iEAA8D;AAC9D,0DAAkE;AAClE,wDAAyD;AAEzD,MAAM,cAAc,GAAG,CAAC,CAAyB,EAAE,EAAE,CACnD,CAAC,CAAC,eAAe,CAAC,QAAQ,CAAC,wBAAS,CAAC,SAAS,CAAC,YAAY,CAAC,CAAC;AAExD,MAAM,6BAA6B,GAAG,GAAG,EAAE;IAChD,MAAM,gBAAgB,GAAG,IAAA,sCAAe,EAAC;QACvC,MAAM,EAAE,sCAAuB;KAChC,CAAC,CAAC;IACH,MAAM,eAAe,GAAG,IAAA,qCAAiB,EAAC,gBAAgB,EAAE,GAAG,CAAC,CAAC,CAAC,oIAAoI;IACtM,MAAM,CAAC,sBAAsB,EAAE,GAAG,iBAAiB,CAAC,GAAG,eAAe,CAAC;IACvE,MAAM,wBAAwB,GAAG,cAAc,CAAC,sBAAsB,CAAC,CAAC;IAExE,OAAO,CACL,CAAC,mBAAI,CACH,kBAAkB,CAAC,CAAC,2BAAc,CAAC,gCAAgC,CAAC,CACpE,KAAK,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,CAExB;MAAA,CAAC,sBAAsB,IAAI,CACzB,CAAC,iCAAe,CACd,WAAW,CAAC,CAAC,sBAAsB,CAAC,CACpC,cAAc,CAAC,CAAC,MAAM,CAAC,eAAe,CAAC,CACvC,IAAI,CAAC,CAAC,wBAAwB,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,EACpD,CACH,CACD;MAAA,CAAC,mBAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,yBAAyB,CAAC,CAC5C;QAAA,CAAC,2CAAoB,CACnB,YAAY,CAAC,CACX,wBAAwB,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,iBAAiB,CAC/D,CACD,UAAU,EAEd;MAAA,EAAE,mBAAI,CACR;IAAA,EAAE,mBAAI,CAAC,CACR,CAAC;AACJ,CAAC,CAAC;AA9BW,QAAA,6BAA6B,iCA8BxC;AAEF,MAAM,MAAM,GAAG,yBAAU,CAAC,MAAM,CAAC;IAC/B,SAAS,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE;IACtB,eAAe,EAAE;QACf,IAAI,EAAE,CAAC;QACP,QAAQ,EAAE,QAAQ;QAClB,YAAY,EAAE,aAAK,CAAC,OAAO,CAAC,EAAE;QAC9B,gBAAgB,EAAE,aAAK,CAAC,OAAO,CAAC,EAAE;KACnC;IACD,yBAAyB,EAAE;QACzB,eAAe,EAAE,aAAK,CAAC,OAAO,CAAC,EAAE;KAClC;CACF,CAAC,CAAC"}
|
|
1
|
+
{"version":3,"file":"CallParticipantsSpotlightView.js","sourceRoot":"","sources":["../../../src/components/CallParticipantsSpotlightView.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,0DAA4E;AAC5E,0EAAkE;AAClE,+CAAgD;AAChD,uDAAoD;AACpD,oCAAiC;AACjC,wEAAqE;AACrE,iEAA8D;AAC9D,0DAAkE;AAClE,wDAAyD;AAEzD,MAAM,cAAc,GAAG,CAAC,CAAyB,EAAE,EAAE,CACnD,CAAC,CAAC,eAAe,CAAC,QAAQ,CAAC,wBAAS,CAAC,SAAS,CAAC,YAAY,CAAC,CAAC;AAExD,MAAM,6BAA6B,GAAG,GAAG,EAAE;IAChD,MAAM,gBAAgB,GAAG,IAAA,sCAAe,EAAC;QACvC,MAAM,EAAE,sCAAuB;KAChC,CAAC,CAAC;IACH,MAAM,eAAe,GAAG,IAAA,qCAAiB,EAAC,gBAAgB,EAAE,GAAG,CAAC,CAAC,CAAC,oIAAoI;IACtM,MAAM,CAAC,sBAAsB,EAAE,GAAG,iBAAiB,CAAC,GAAG,eAAe,CAAC;IACvE,MAAM,wBAAwB,GAAG,cAAc,CAAC,sBAAsB,CAAC,CAAC;IAExE,OAAO,CACL,CAAC,mBAAI,CACH,kBAAkB,CAAC,CAAC,2BAAc,CAAC,gCAAgC,CAAC,CACpE,KAAK,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,CAExB;MAAA,CAAC,sBAAsB,IAAI,CACzB,CAAC,iCAAe,CACd,WAAW,CAAC,CAAC,sBAAsB,CAAC,CACpC,cAAc,CAAC,CAAC,MAAM,CAAC,eAAe,CAAC,CACvC,IAAI,CAAC,CAAC,wBAAwB,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,EACpD,CACH,CACD;MAAA,CAAC,mBAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,yBAAyB,CAAC,CAC5C;QAAA,CAAC,2CAAoB,CACnB,YAAY,CAAC,CACX,wBAAwB,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,iBAAiB,CAC/D,CACD,UAAU,EAEd;MAAA,EAAE,mBAAI,CACR;IAAA,EAAE,mBAAI,CAAC,CACR,CAAC;AACJ,CAAC,CAAC;AA9BW,QAAA,6BAA6B,iCA8BxC;AAEF,MAAM,MAAM,GAAG,yBAAU,CAAC,MAAM,CAAC;IAC/B,SAAS,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE;IACtB,eAAe,EAAE;QACf,IAAI,EAAE,CAAC;QACP,QAAQ,EAAE,QAAQ;QAClB,YAAY,EAAE,aAAK,CAAC,OAAO,CAAC,EAAE;QAC9B,gBAAgB,EAAE,aAAK,CAAC,OAAO,CAAC,EAAE;KACnC;IACD,yBAAyB,EAAE;QACzB,IAAI,EAAE,CAAC;QACP,eAAe,EAAE,aAAK,CAAC,OAAO,CAAC,EAAE;KAClC;CACF,CAAC,CAAC"}
|
package/package.json
CHANGED
|
@@ -22,8 +22,8 @@
|
|
|
22
22
|
],
|
|
23
23
|
"dependencies": {
|
|
24
24
|
"@stream-io/i18n": "^0.0.6",
|
|
25
|
-
"@stream-io/video-client": "^0.0.
|
|
26
|
-
"@stream-io/video-react-bindings": "^0.0.
|
|
25
|
+
"@stream-io/video-client": "^0.0.28",
|
|
26
|
+
"@stream-io/video-react-bindings": "^0.0.29"
|
|
27
27
|
},
|
|
28
28
|
"peerDependencies": {
|
|
29
29
|
"@notifee/react-native": ">=7.7.0",
|
|
@@ -85,5 +85,5 @@
|
|
|
85
85
|
"typedoc-plugin-markdown": "^3.15.3",
|
|
86
86
|
"typescript": "^4.9.5"
|
|
87
87
|
},
|
|
88
|
-
"version": "0.0.1-alpha.
|
|
88
|
+
"version": "0.0.1-alpha.228"
|
|
89
89
|
}
|
|
@@ -52,7 +52,10 @@ interface CallParticipantsListProps {
|
|
|
52
52
|
*/
|
|
53
53
|
export const CallParticipantsList = (props: CallParticipantsListProps) => {
|
|
54
54
|
const { numColumns = 2, horizontal, participants } = props;
|
|
55
|
-
const [
|
|
55
|
+
const [containerLayout, setContainerLayout] = useState({
|
|
56
|
+
width: 0,
|
|
57
|
+
height: 0,
|
|
58
|
+
});
|
|
56
59
|
|
|
57
60
|
// we use a HashSet to track the currently viewable participants
|
|
58
61
|
// and a separate force update state to rerender the component to inform that the HashSet has changed
|
|
@@ -103,25 +106,35 @@ export const CallParticipantsList = (props: CallParticipantsListProps) => {
|
|
|
103
106
|
}).current;
|
|
104
107
|
|
|
105
108
|
// NOTE: key must be sessionId always as it is used to track viewable participants
|
|
106
|
-
const keyExtractor = useRef<FlatListProps['keyExtractor']
|
|
109
|
+
const keyExtractor = useRef<NonNullable<FlatListProps['keyExtractor']>>(
|
|
107
110
|
(item) => item.sessionId,
|
|
108
111
|
).current;
|
|
109
112
|
|
|
110
|
-
const onLayout = useRef<FlatListProps['onLayout']
|
|
111
|
-
const { width } = event.nativeEvent.layout;
|
|
112
|
-
|
|
113
|
+
const onLayout = useRef<NonNullable<FlatListProps['onLayout']>>((event) => {
|
|
114
|
+
const { height, width } = event.nativeEvent.layout;
|
|
115
|
+
setContainerLayout((prev) => {
|
|
116
|
+
if (prev.height === height && prev.width === width) {
|
|
117
|
+
return prev;
|
|
118
|
+
}
|
|
119
|
+
return { height, width };
|
|
120
|
+
});
|
|
113
121
|
}).current;
|
|
114
122
|
|
|
123
|
+
const { itemHeight, itemWidth } = calculateParticipantViewSize({
|
|
124
|
+
containerHeight: containerLayout.height,
|
|
125
|
+
containerWidth: containerLayout.width,
|
|
126
|
+
participantsLength: participants.length,
|
|
127
|
+
numColumns,
|
|
128
|
+
horizontal,
|
|
129
|
+
});
|
|
130
|
+
|
|
115
131
|
const itemContainerStyle = useMemo<StyleProp<ViewStyle>>(() => {
|
|
116
|
-
|
|
117
|
-
// number of columns and the margin between the views
|
|
118
|
-
const size = containerWidth / numColumns - theme.margin.sm * 2;
|
|
119
|
-
const style = { width: size, height: size };
|
|
132
|
+
const style = { width: itemWidth, height: itemHeight };
|
|
120
133
|
if (horizontal) {
|
|
121
134
|
return [styles.participantWrapperHorizontal, style];
|
|
122
135
|
}
|
|
123
|
-
return
|
|
124
|
-
}, [
|
|
136
|
+
return style;
|
|
137
|
+
}, [itemWidth, itemHeight, horizontal]);
|
|
125
138
|
|
|
126
139
|
const renderItem = useCallback<NonNullable<FlatListProps['renderItem']>>(
|
|
127
140
|
({ item: participant }) => {
|
|
@@ -140,6 +153,26 @@ export const CallParticipantsList = (props: CallParticipantsListProps) => {
|
|
|
140
153
|
[itemContainerStyle],
|
|
141
154
|
);
|
|
142
155
|
|
|
156
|
+
// in vertical mode, only when there are more than 2 participants in a call, the participants should be displayed in a grid
|
|
157
|
+
// else we display them both in a stretched row on the screen
|
|
158
|
+
const shouldWrapByColumns = !!horizontal || participants.length > 2;
|
|
159
|
+
|
|
160
|
+
if (!shouldWrapByColumns) {
|
|
161
|
+
return (
|
|
162
|
+
<>
|
|
163
|
+
{participants.map((participant, index) => (
|
|
164
|
+
<ParticipantView
|
|
165
|
+
participant={participant}
|
|
166
|
+
containerStyle={styles.flexed}
|
|
167
|
+
kind="video"
|
|
168
|
+
isVisible={true}
|
|
169
|
+
key={keyExtractor(participant, index)}
|
|
170
|
+
/>
|
|
171
|
+
))}
|
|
172
|
+
</>
|
|
173
|
+
);
|
|
174
|
+
}
|
|
175
|
+
|
|
143
176
|
return (
|
|
144
177
|
<FlatList
|
|
145
178
|
onLayout={onLayout}
|
|
@@ -152,21 +185,63 @@ export const CallParticipantsList = (props: CallParticipantsListProps) => {
|
|
|
152
185
|
numColumns={!horizontal ? numColumns : undefined}
|
|
153
186
|
horizontal={horizontal}
|
|
154
187
|
showsHorizontalScrollIndicator={false}
|
|
155
|
-
extraData={`${forceUpdateValue}
|
|
188
|
+
extraData={`${forceUpdateValue}`} // this is important to force re-render when visibility changes
|
|
156
189
|
accessibilityLabel={A11yComponents.CALL_PARTICIPANTS_LIST}
|
|
157
190
|
/>
|
|
158
191
|
);
|
|
159
192
|
};
|
|
160
193
|
|
|
161
194
|
const styles = StyleSheet.create({
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
overflow: 'hidden',
|
|
165
|
-
borderRadius: theme.rounded.sm,
|
|
195
|
+
flexed: {
|
|
196
|
+
flex: 1,
|
|
166
197
|
},
|
|
167
198
|
participantWrapperHorizontal: {
|
|
199
|
+
// note: if marginHorizontal is changed, be sure to change the width calculation in calculateParticipantViewSize function
|
|
168
200
|
marginHorizontal: theme.margin.sm,
|
|
169
201
|
overflow: 'hidden',
|
|
170
202
|
borderRadius: theme.rounded.sm,
|
|
171
203
|
},
|
|
172
204
|
});
|
|
205
|
+
|
|
206
|
+
/**
|
|
207
|
+
* 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.
|
|
208
|
+
* @param {number} containerHeight - height of the container (the phone's screen height) in pixels
|
|
209
|
+
* @param {number} containerWidth - width of the container (the phone's screen width) in pixels
|
|
210
|
+
* @param {number} participantsLength - number of participants
|
|
211
|
+
* @param {number} numColumns - number of columns
|
|
212
|
+
* @param {boolean} horizontal - whether the participant view is in horizontal mode
|
|
213
|
+
* @returns {object} - an object containing the height and width of the participant view
|
|
214
|
+
*/
|
|
215
|
+
function calculateParticipantViewSize({
|
|
216
|
+
containerHeight,
|
|
217
|
+
containerWidth,
|
|
218
|
+
participantsLength,
|
|
219
|
+
numColumns,
|
|
220
|
+
horizontal,
|
|
221
|
+
}: {
|
|
222
|
+
containerHeight: number;
|
|
223
|
+
containerWidth: number;
|
|
224
|
+
participantsLength: number;
|
|
225
|
+
numColumns: number;
|
|
226
|
+
horizontal: boolean | undefined;
|
|
227
|
+
}) {
|
|
228
|
+
let itemHeight = containerHeight;
|
|
229
|
+
// in vertical mode, we calculate the height of the participant view based on the containerHeight (aka the phone's screen height)
|
|
230
|
+
if (!horizontal) {
|
|
231
|
+
if (participantsLength <= 4) {
|
|
232
|
+
// special case: if there are 4 or less participants, we display them in 2 rows
|
|
233
|
+
itemHeight = containerHeight / 2;
|
|
234
|
+
} else {
|
|
235
|
+
// generally, we display the participants in 3 rows
|
|
236
|
+
itemHeight = containerHeight / 3;
|
|
237
|
+
}
|
|
238
|
+
}
|
|
239
|
+
|
|
240
|
+
let itemWidth = containerWidth / numColumns;
|
|
241
|
+
if (horizontal) {
|
|
242
|
+
// in horizontal mode we apply margin to the participant view and that should be subtracted from the width
|
|
243
|
+
itemWidth = itemWidth - theme.margin.sm * 2;
|
|
244
|
+
}
|
|
245
|
+
|
|
246
|
+
return { itemHeight, itemWidth };
|
|
247
|
+
}
|
|
@@ -47,12 +47,13 @@ export const CallParticipantsSpotlightView = () => {
|
|
|
47
47
|
const styles = StyleSheet.create({
|
|
48
48
|
container: { flex: 1 },
|
|
49
49
|
participantView: {
|
|
50
|
-
flex:
|
|
50
|
+
flex: 2,
|
|
51
51
|
overflow: 'hidden',
|
|
52
52
|
borderRadius: theme.rounded.sm,
|
|
53
53
|
marginHorizontal: theme.padding.sm,
|
|
54
54
|
},
|
|
55
55
|
participantVideoContainer: {
|
|
56
|
+
flex: 1,
|
|
56
57
|
paddingVertical: theme.padding.sm,
|
|
57
58
|
},
|
|
58
59
|
});
|