@stream-io/video-react-native-sdk 0.0.1-alpha.308 → 0.0.1-alpha.310
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 +8 -0
- package/dist/src/components/call/CallParticipantsListView.d.ts +2 -2
- package/dist/src/components/call/CallParticipantsListView.js +6 -6
- package/dist/src/components/call/CallParticipantsListView.js.map +1 -1
- package/dist/version.d.ts +1 -1
- package/dist/version.js +1 -1
- package/package.json +1 -1
- package/src/components/call/CallParticipantsListView.tsx +9 -9
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,14 @@
|
|
|
2
2
|
|
|
3
3
|
This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
|
|
4
4
|
|
|
5
|
+
## [0.0.1-alpha.310](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-native-sdk-0.0.1-alpha.309...@stream-io/video-react-native-sdk-0.0.1-alpha.310) (2023-07-18)
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
## [0.0.1-alpha.309](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-native-sdk-0.0.1-alpha.308...@stream-io/video-react-native-sdk-0.0.1-alpha.309) (2023-07-18)
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
5
13
|
## [0.0.1-alpha.308](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-native-sdk-0.0.1-alpha.307...@stream-io/video-react-native-sdk-0.0.1-alpha.308) (2023-07-17)
|
|
6
14
|
|
|
7
15
|
|
|
@@ -5,10 +5,10 @@ interface CallParticipantsListProps {
|
|
|
5
5
|
*/
|
|
6
6
|
participants: (StreamVideoParticipant | StreamVideoLocalParticipant)[];
|
|
7
7
|
/**
|
|
8
|
-
* The number of columns to display in the list of participants while in vertical or horizontal scrolling mode
|
|
8
|
+
* The number of columns to display in the list of participants while in vertical or horizontal scrolling mode. This property is only used when there are more than 2 participants.
|
|
9
9
|
* @default 2
|
|
10
10
|
*/
|
|
11
|
-
|
|
11
|
+
numberOfColumns?: number;
|
|
12
12
|
/**
|
|
13
13
|
* If true, the list will be displayed in horizontal scrolling mode
|
|
14
14
|
*/
|
|
@@ -43,7 +43,7 @@ const VIEWABILITY_CONFIG = {
|
|
|
43
43
|
* hence it should be used only in a flex parent container
|
|
44
44
|
*/
|
|
45
45
|
const CallParticipantsListView = (props) => {
|
|
46
|
-
const {
|
|
46
|
+
const { numberOfColumns = 2, horizontal, participants } = props;
|
|
47
47
|
const [containerLayout, setContainerLayout] = (0, react_1.useState)({
|
|
48
48
|
width: 0,
|
|
49
49
|
height: 0,
|
|
@@ -104,7 +104,7 @@ const CallParticipantsListView = (props) => {
|
|
|
104
104
|
containerHeight: containerLayout.height,
|
|
105
105
|
containerWidth: containerLayout.width,
|
|
106
106
|
participantsLength: participants.length,
|
|
107
|
-
|
|
107
|
+
numberOfColumns,
|
|
108
108
|
horizontal,
|
|
109
109
|
});
|
|
110
110
|
const itemContainerStyle = (0, react_1.useMemo)(() => {
|
|
@@ -126,8 +126,8 @@ const CallParticipantsListView = (props) => {
|
|
|
126
126
|
{participants.map((participant, index) => (<ParticipantView_1.ParticipantView participant={participant} containerStyle={styles.flexed} kind="video" isVisible={true} key={keyExtractor(participant, index)}/>))}
|
|
127
127
|
</>);
|
|
128
128
|
}
|
|
129
|
-
return (<react_native_1.FlatList onLayout={onLayout} key={!horizontal ?
|
|
130
|
-
data={participants} keyExtractor={keyExtractor} viewabilityConfig={VIEWABILITY_CONFIG} onViewableItemsChanged={onViewableItemsChanged} renderItem={renderItem} numColumns={!horizontal ?
|
|
129
|
+
return (<react_native_1.FlatList onLayout={onLayout} key={!horizontal ? numberOfColumns : undefined} // setting numColumns as key is a strict requirement of react-native to support changing numColumns on the fly
|
|
130
|
+
data={participants} keyExtractor={keyExtractor} viewabilityConfig={VIEWABILITY_CONFIG} onViewableItemsChanged={onViewableItemsChanged} renderItem={renderItem} numColumns={!horizontal ? numberOfColumns : undefined} horizontal={horizontal} showsHorizontalScrollIndicator={false} extraData={`${forceUpdateValue}`} // this is important to force re-render when visibility changes
|
|
131
131
|
accessibilityLabel={A11yLabels_1.A11yComponents.CALL_PARTICIPANTS_LIST}/>);
|
|
132
132
|
};
|
|
133
133
|
exports.CallParticipantsListView = CallParticipantsListView;
|
|
@@ -151,7 +151,7 @@ const styles = react_native_1.StyleSheet.create({
|
|
|
151
151
|
* @param {boolean} horizontal - whether the participant view is in horizontal mode
|
|
152
152
|
* @returns {object} - an object containing the height and width of the participant view
|
|
153
153
|
*/
|
|
154
|
-
function calculateParticipantViewSize({ containerHeight, containerWidth, participantsLength,
|
|
154
|
+
function calculateParticipantViewSize({ containerHeight, containerWidth, participantsLength, numberOfColumns, horizontal, }) {
|
|
155
155
|
let itemHeight = containerHeight;
|
|
156
156
|
// in vertical mode, we calculate the height of the participant view based on the containerHeight (aka the phone's screen height)
|
|
157
157
|
if (!horizontal) {
|
|
@@ -164,7 +164,7 @@ function calculateParticipantViewSize({ containerHeight, containerWidth, partici
|
|
|
164
164
|
itemHeight = containerHeight / 3;
|
|
165
165
|
}
|
|
166
166
|
}
|
|
167
|
-
let itemWidth = containerWidth /
|
|
167
|
+
let itemWidth = containerWidth / numberOfColumns;
|
|
168
168
|
if (horizontal) {
|
|
169
169
|
// in horizontal mode we apply margin to the participant view and that should be subtracted from the width
|
|
170
170
|
itemWidth = itemWidth - theme_1.theme.margin.sm * 2;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CallParticipantsListView.js","sourceRoot":"","sources":["../../../../src/components/call/CallParticipantsListView.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAMe;AACf,+CAA0E;AAC1E,qEAAkE;AAClE,0DAKiC;AACjC,uCAAoC;AACpC,2EAAwE;AACxE,0EAA0D;AAC1D,2DAA4D;AAM5D,MAAM,kBAAkB,GAAuC;IAC7D,kBAAkB,EAAE,KAAK;IACzB,2BAA2B,EAAE,EAAE;CAChC,CAAC;AAkBF;;;;;GAKG;AACI,MAAM,wBAAwB,GAAG,CAAC,KAAgC,EAAE,EAAE;IAC3E,MAAM,EAAE,
|
|
1
|
+
{"version":3,"file":"CallParticipantsListView.js","sourceRoot":"","sources":["../../../../src/components/call/CallParticipantsListView.tsx"],"names":[],"mappings":"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"}
|
package/dist/version.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare const version = "0.0.1-alpha.
|
|
1
|
+
export declare const version = "0.0.1-alpha.310";
|
package/dist/version.js
CHANGED
package/package.json
CHANGED
|
@@ -33,10 +33,10 @@ interface CallParticipantsListProps {
|
|
|
33
33
|
*/
|
|
34
34
|
participants: (StreamVideoParticipant | StreamVideoLocalParticipant)[];
|
|
35
35
|
/**
|
|
36
|
-
* The number of columns to display in the list of participants while in vertical or horizontal scrolling mode
|
|
36
|
+
* The number of columns to display in the list of participants while in vertical or horizontal scrolling mode. This property is only used when there are more than 2 participants.
|
|
37
37
|
* @default 2
|
|
38
38
|
*/
|
|
39
|
-
|
|
39
|
+
numberOfColumns?: number;
|
|
40
40
|
/**
|
|
41
41
|
* If true, the list will be displayed in horizontal scrolling mode
|
|
42
42
|
*/
|
|
@@ -50,7 +50,7 @@ interface CallParticipantsListProps {
|
|
|
50
50
|
* hence it should be used only in a flex parent container
|
|
51
51
|
*/
|
|
52
52
|
export const CallParticipantsListView = (props: CallParticipantsListProps) => {
|
|
53
|
-
const {
|
|
53
|
+
const { numberOfColumns = 2, horizontal, participants } = props;
|
|
54
54
|
const [containerLayout, setContainerLayout] = useState({
|
|
55
55
|
width: 0,
|
|
56
56
|
height: 0,
|
|
@@ -123,7 +123,7 @@ export const CallParticipantsListView = (props: CallParticipantsListProps) => {
|
|
|
123
123
|
containerHeight: containerLayout.height,
|
|
124
124
|
containerWidth: containerLayout.width,
|
|
125
125
|
participantsLength: participants.length,
|
|
126
|
-
|
|
126
|
+
numberOfColumns,
|
|
127
127
|
horizontal,
|
|
128
128
|
});
|
|
129
129
|
|
|
@@ -175,13 +175,13 @@ export const CallParticipantsListView = (props: CallParticipantsListProps) => {
|
|
|
175
175
|
return (
|
|
176
176
|
<FlatList
|
|
177
177
|
onLayout={onLayout}
|
|
178
|
-
key={!horizontal ?
|
|
178
|
+
key={!horizontal ? numberOfColumns : undefined} // setting numColumns as key is a strict requirement of react-native to support changing numColumns on the fly
|
|
179
179
|
data={participants}
|
|
180
180
|
keyExtractor={keyExtractor}
|
|
181
181
|
viewabilityConfig={VIEWABILITY_CONFIG}
|
|
182
182
|
onViewableItemsChanged={onViewableItemsChanged}
|
|
183
183
|
renderItem={renderItem}
|
|
184
|
-
numColumns={!horizontal ?
|
|
184
|
+
numColumns={!horizontal ? numberOfColumns : undefined}
|
|
185
185
|
horizontal={horizontal}
|
|
186
186
|
showsHorizontalScrollIndicator={false}
|
|
187
187
|
extraData={`${forceUpdateValue}`} // this is important to force re-render when visibility changes
|
|
@@ -215,13 +215,13 @@ function calculateParticipantViewSize({
|
|
|
215
215
|
containerHeight,
|
|
216
216
|
containerWidth,
|
|
217
217
|
participantsLength,
|
|
218
|
-
|
|
218
|
+
numberOfColumns,
|
|
219
219
|
horizontal,
|
|
220
220
|
}: {
|
|
221
221
|
containerHeight: number;
|
|
222
222
|
containerWidth: number;
|
|
223
223
|
participantsLength: number;
|
|
224
|
-
|
|
224
|
+
numberOfColumns: number;
|
|
225
225
|
horizontal: boolean | undefined;
|
|
226
226
|
}) {
|
|
227
227
|
let itemHeight = containerHeight;
|
|
@@ -236,7 +236,7 @@ function calculateParticipantViewSize({
|
|
|
236
236
|
}
|
|
237
237
|
}
|
|
238
238
|
|
|
239
|
-
let itemWidth = containerWidth /
|
|
239
|
+
let itemWidth = containerWidth / numberOfColumns;
|
|
240
240
|
if (horizontal) {
|
|
241
241
|
// in horizontal mode we apply margin to the participant view and that should be subtracted from the width
|
|
242
242
|
itemWidth = itemWidth - theme.margin.sm * 2;
|