@stream-io/video-react-native-sdk 0.0.1-alpha.411 → 0.0.1-alpha.412
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 +9 -0
- package/dist/src/components/Call/CallContent/CallContent.js +16 -6
- package/dist/src/components/Call/CallContent/CallContent.js.map +1 -1
- package/dist/src/components/Call/CallLayout/CallParticipantsGrid.d.ts +5 -1
- package/dist/src/components/Call/CallLayout/CallParticipantsGrid.js +8 -3
- package/dist/src/components/Call/CallLayout/CallParticipantsGrid.js.map +1 -1
- package/dist/src/components/Call/CallLayout/CallParticipantsSpotlight.js +2 -3
- package/dist/src/components/Call/CallLayout/CallParticipantsSpotlight.js.map +1 -1
- package/dist/src/components/Participant/FloatingParticipantView/index.d.ts +6 -1
- package/dist/src/components/Participant/FloatingParticipantView/index.js +9 -7
- package/dist/src/components/Participant/FloatingParticipantView/index.js.map +1 -1
- package/dist/src/theme/theme.d.ts +1 -1
- package/dist/src/theme/theme.js +1 -1
- package/dist/src/theme/theme.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/CallContent/CallContent.tsx +30 -7
- package/src/components/Call/CallLayout/CallParticipantsGrid.tsx +13 -2
- package/src/components/Call/CallLayout/CallParticipantsSpotlight.tsx +2 -3
- package/src/components/Participant/FloatingParticipantView/index.tsx +38 -24
- package/src/theme/theme.ts +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,15 @@
|
|
|
2
2
|
|
|
3
3
|
This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
|
|
4
4
|
|
|
5
|
+
## [0.0.1-alpha.412](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-native-sdk-0.0.1-alpha.411...@stream-io/video-react-native-sdk-0.0.1-alpha.412) (2023-08-31)
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
### Features
|
|
9
|
+
|
|
10
|
+
* **react-native:** handle participant switch in floating participant view for 1:1 calls ([#1006](https://github.com/GetStream/stream-video-js/issues/1006)) ([503b694](https://github.com/GetStream/stream-video-js/commit/503b6945c65028f92d704f1b2fc322525d989863))
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
5
14
|
## [0.0.1-alpha.411](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-native-sdk-0.0.1-alpha.410...@stream-io/video-react-native-sdk-0.0.1-alpha.411) (2023-08-31)
|
|
6
15
|
|
|
7
16
|
|
|
@@ -36,18 +36,19 @@ const constants_1 = require("../../../constants");
|
|
|
36
36
|
const hooks_2 = require("../../../utils/hooks");
|
|
37
37
|
const Participant_1 = require("../../Participant");
|
|
38
38
|
const contexts_1 = require("../../../contexts");
|
|
39
|
-
const CallContent = ({ onBackPressed, onParticipantInfoPress, onHangupCallHandler, CallParticipantsList, CallTopView = CallTopView_1.CallTopView, CallControls = CallControls_1.CallControls, FloatingParticipantView = Participant_1.FloatingParticipantView, ParticipantLabel, ParticipantNetworkQualityIndicator, ParticipantReaction, ParticipantVideoFallback, ParticipantView, ParticipantsInfoBadge, VideoRenderer, layout, }) => {
|
|
39
|
+
const CallContent = ({ onBackPressed, onParticipantInfoPress, onHangupCallHandler, CallParticipantsList, CallTopView = CallTopView_1.CallTopView, CallControls = CallControls_1.CallControls, FloatingParticipantView = Participant_1.FloatingParticipantView, ParticipantLabel, ParticipantNetworkQualityIndicator, ParticipantReaction, ParticipantVideoFallback, ParticipantView, ParticipantsInfoBadge, VideoRenderer, layout = 'grid', }) => {
|
|
40
|
+
const [showRemoteParticipantInFloatingView, setShowRemoteParticipantInFloatingView,] = (0, react_1.useState)(false);
|
|
40
41
|
const { theme: { callContent }, } = (0, contexts_1.useTheme)();
|
|
41
|
-
const { useHasOngoingScreenShare } = (0, video_react_bindings_1.useCallStateHooks)();
|
|
42
|
-
const hasScreenShare = useHasOngoingScreenShare();
|
|
43
|
-
const { useRemoteParticipants, useLocalParticipant } = (0, video_react_bindings_1.useCallStateHooks)();
|
|
42
|
+
const { useHasOngoingScreenShare, useRemoteParticipants, useLocalParticipant, } = (0, video_react_bindings_1.useCallStateHooks)();
|
|
44
43
|
const _remoteParticipants = useRemoteParticipants();
|
|
45
|
-
const localParticipant = useLocalParticipant();
|
|
46
44
|
const remoteParticipants = (0, hooks_2.useDebouncedValue)(_remoteParticipants, 300); // we debounce the remote participants to avoid unnecessary rerenders that happen when participant tracks are all subscribed simultaneously
|
|
45
|
+
const localParticipant = useLocalParticipant();
|
|
46
|
+
const hasScreenShare = useHasOngoingScreenShare();
|
|
47
47
|
const showSpotlightLayout = hasScreenShare || layout === 'spotlight';
|
|
48
48
|
const showFloatingView = !showSpotlightLayout &&
|
|
49
49
|
remoteParticipants.length > 0 &&
|
|
50
50
|
remoteParticipants.length < 3;
|
|
51
|
+
const isRemoteParticipantInFloatingView = showRemoteParticipantInFloatingView && remoteParticipants.length === 1;
|
|
51
52
|
/**
|
|
52
53
|
* This hook is used to handle IncallManager specs of the application.
|
|
53
54
|
*/
|
|
@@ -55,6 +56,12 @@ const CallContent = ({ onBackPressed, onParticipantInfoPress, onHangupCallHandle
|
|
|
55
56
|
const call = (0, video_react_bindings_1.useCall)();
|
|
56
57
|
const activeCallRef = (0, react_1.useRef)(call);
|
|
57
58
|
activeCallRef.current = call;
|
|
59
|
+
const handleFloatingViewParticipantSwitch = () => {
|
|
60
|
+
if (remoteParticipants.length !== 1) {
|
|
61
|
+
return;
|
|
62
|
+
}
|
|
63
|
+
setShowRemoteParticipantInFloatingView((prevState) => !prevState);
|
|
64
|
+
};
|
|
58
65
|
(0, react_1.useEffect)(() => {
|
|
59
66
|
return () => {
|
|
60
67
|
if (activeCallRef.current?.state.callingState !== video_client_1.CallingState.LEFT) {
|
|
@@ -71,6 +78,7 @@ const CallContent = ({ onBackPressed, onParticipantInfoPress, onHangupCallHandle
|
|
|
71
78
|
};
|
|
72
79
|
const callParticipantsGridProps = {
|
|
73
80
|
...participantViewProps,
|
|
81
|
+
showLocalParticipant: isRemoteParticipantInFloatingView,
|
|
74
82
|
ParticipantView,
|
|
75
83
|
CallParticipantsList,
|
|
76
84
|
};
|
|
@@ -86,7 +94,9 @@ const CallContent = ({ onBackPressed, onParticipantInfoPress, onHangupCallHandle
|
|
|
86
94
|
// and allows only the top and floating view (its child views) to take up the touches
|
|
87
95
|
pointerEvents="box-none">
|
|
88
96
|
{CallTopView && (<CallTopView onBackPressed={onBackPressed} onParticipantInfoPress={onParticipantInfoPress} ParticipantsInfoBadge={ParticipantsInfoBadge}/>)}
|
|
89
|
-
{showFloatingView && FloatingParticipantView && (<FloatingParticipantView participant={
|
|
97
|
+
{showFloatingView && FloatingParticipantView && (<FloatingParticipantView participant={isRemoteParticipantInFloatingView
|
|
98
|
+
? remoteParticipants[0]
|
|
99
|
+
: localParticipant} onPressHandler={handleFloatingViewParticipantSwitch} {...participantViewProps}/>)}
|
|
90
100
|
</react_native_1.View>
|
|
91
101
|
{showSpotlightLayout ? (<CallLayout_1.CallParticipantsSpotlight {...callParticipantsSpotlightProps}/>) : (<CallLayout_1.CallParticipantsGrid {...callParticipantsGridProps}/>)}
|
|
92
102
|
</react_native_1.View>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CallContent.js","sourceRoot":"","sources":["../../../../../src/components/Call/CallContent/CallContent.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+
|
|
1
|
+
{"version":3,"file":"CallContent.js","sourceRoot":"","sources":["../../../../../src/components/Call/CallContent/CallContent.tsx"],"names":[],"mappings":"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"}
|
|
@@ -8,8 +8,12 @@ export type CallParticipantsGridProps = CallParticipantsListComponentProps & {
|
|
|
8
8
|
* Component to customize the CallParticipantsList.
|
|
9
9
|
*/
|
|
10
10
|
CallParticipantsList?: React.ComponentType<CallParticipantsListProps> | null;
|
|
11
|
+
/**
|
|
12
|
+
* Boolean to decide if local participant will be visible in the grid when there is 1:1 call.
|
|
13
|
+
*/
|
|
14
|
+
showLocalParticipant?: boolean;
|
|
11
15
|
};
|
|
12
16
|
/**
|
|
13
17
|
* Component used to display the list of participants in a grid mode.
|
|
14
18
|
*/
|
|
15
|
-
export declare const CallParticipantsGrid: ({ CallParticipantsList, ParticipantLabel, ParticipantNetworkQualityIndicator, ParticipantReaction, ParticipantVideoFallback, ParticipantView, VideoRenderer, }: CallParticipantsGridProps) => JSX.Element;
|
|
19
|
+
export declare const CallParticipantsGrid: ({ CallParticipantsList, ParticipantLabel, ParticipantNetworkQualityIndicator, ParticipantReaction, ParticipantVideoFallback, ParticipantView, VideoRenderer, showLocalParticipant, }: CallParticipantsGridProps) => JSX.Element;
|
|
@@ -14,16 +14,21 @@ const ThemeContext_1 = require("../../../contexts/ThemeContext");
|
|
|
14
14
|
/**
|
|
15
15
|
* Component used to display the list of participants in a grid mode.
|
|
16
16
|
*/
|
|
17
|
-
const CallParticipantsGrid = ({ CallParticipantsList = CallParticipantsList_1.CallParticipantsList, ParticipantLabel, ParticipantNetworkQualityIndicator, ParticipantReaction, ParticipantVideoFallback, ParticipantView, VideoRenderer, }) => {
|
|
17
|
+
const CallParticipantsGrid = ({ CallParticipantsList = CallParticipantsList_1.CallParticipantsList, ParticipantLabel, ParticipantNetworkQualityIndicator, ParticipantReaction, ParticipantVideoFallback, ParticipantView, VideoRenderer, showLocalParticipant = false, }) => {
|
|
18
18
|
const { theme: { colors, callParticipantsGrid }, } = (0, ThemeContext_1.useTheme)();
|
|
19
|
-
const { useRemoteParticipants, useParticipants } = (0, video_react_bindings_1.useCallStateHooks)();
|
|
19
|
+
const { useRemoteParticipants, useParticipants, useLocalParticipant } = (0, video_react_bindings_1.useCallStateHooks)();
|
|
20
20
|
const _remoteParticipants = useRemoteParticipants();
|
|
21
|
+
const localParticipant = useLocalParticipant();
|
|
21
22
|
const _allParticipants = useParticipants();
|
|
22
23
|
// we debounce the participants arrays to avoid unnecessary rerenders that happen when participant tracks are all subscribed simultaneously
|
|
23
24
|
const remoteParticipants = (0, useDebouncedValue_1.useDebouncedValue)(_remoteParticipants, 300);
|
|
24
25
|
const allParticipants = (0, useDebouncedValue_1.useDebouncedValue)(_allParticipants, 300);
|
|
25
26
|
const showFloatingView = remoteParticipants.length > 0 && remoteParticipants.length < 3;
|
|
26
|
-
const participants = showFloatingView
|
|
27
|
+
const participants = showFloatingView
|
|
28
|
+
? showLocalParticipant && localParticipant
|
|
29
|
+
? [localParticipant]
|
|
30
|
+
: remoteParticipants
|
|
31
|
+
: allParticipants;
|
|
27
32
|
const participantViewProps = {
|
|
28
33
|
ParticipantView,
|
|
29
34
|
ParticipantLabel,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CallParticipantsGrid.js","sourceRoot":"","sources":["../../../../../src/components/Call/CallLayout/CallParticipantsGrid.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,+CAAgD;AAChD,0EAAoE;AACpE,8EAA2E;AAC3E,uFAIsD;AACtD,wDAA8D;AAC9D,iEAA0D;
|
|
1
|
+
{"version":3,"file":"CallParticipantsGrid.js","sourceRoot":"","sources":["../../../../../src/components/Call/CallLayout/CallParticipantsGrid.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,+CAAgD;AAChD,0EAAoE;AACpE,8EAA2E;AAC3E,uFAIsD;AACtD,wDAA8D;AAC9D,iEAA0D;AAgB1D;;GAEG;AACI,MAAM,oBAAoB,GAAG,CAAC,EACnC,oBAAoB,GAAG,2CAA2B,EAClD,gBAAgB,EAChB,kCAAkC,EAClC,mBAAmB,EACnB,wBAAwB,EACxB,eAAe,EACf,aAAa,EACb,oBAAoB,GAAG,KAAK,GACF,EAAE,EAAE;IAC9B,MAAM,EACJ,KAAK,EAAE,EAAE,MAAM,EAAE,oBAAoB,EAAE,GACxC,GAAG,IAAA,uBAAQ,GAAE,CAAC;IACf,MAAM,EAAE,qBAAqB,EAAE,eAAe,EAAE,mBAAmB,EAAE,GACnE,IAAA,wCAAiB,GAAE,CAAC;IACtB,MAAM,mBAAmB,GAAG,qBAAqB,EAAE,CAAC;IACpD,MAAM,gBAAgB,GAAG,mBAAmB,EAAE,CAAC;IAC/C,MAAM,gBAAgB,GAAG,eAAe,EAAE,CAAC;IAC3C,2IAA2I;IAC3I,MAAM,kBAAkB,GAAG,IAAA,qCAAiB,EAAC,mBAAmB,EAAE,GAAG,CAAC,CAAC;IACvE,MAAM,eAAe,GAAG,IAAA,qCAAiB,EAAC,gBAAgB,EAAE,GAAG,CAAC,CAAC;IAEjE,MAAM,gBAAgB,GACpB,kBAAkB,CAAC,MAAM,GAAG,CAAC,IAAI,kBAAkB,CAAC,MAAM,GAAG,CAAC,CAAC;IAEjE,MAAM,YAAY,GAAG,gBAAgB;QACnC,CAAC,CAAC,oBAAoB,IAAI,gBAAgB;YACxC,CAAC,CAAC,CAAC,gBAAgB,CAAC;YACpB,CAAC,CAAC,kBAAkB;QACtB,CAAC,CAAC,eAAe,CAAC;IAEpB,MAAM,oBAAoB,GAAuC;QAC/D,eAAe;QACf,gBAAgB;QAChB,kCAAkC;QAClC,mBAAmB;QACnB,wBAAwB;QACxB,aAAa;KACd,CAAC;IAEF,OAAO,CACL,CAAC,mBAAI,CACH,KAAK,CAAC,CAAC;YACL,MAAM,CAAC,SAAS;YAChB,EAAE,eAAe,EAAE,MAAM,CAAC,SAAS,EAAE;YACrC,oBAAoB,CAAC,SAAS;SAC/B,CAAC,CACF,MAAM,CAAC,CAAC,0BAAgB,CAAC,sBAAsB,CAAC,CAEhD;MAAA,CAAC,oBAAoB,IAAI,CACvB,CAAC,oBAAoB,CACnB,YAAY,CAAC,CAAC,YAAY,CAAC,CAC3B,IAAI,oBAAoB,CAAC,EACzB,CACH,CACH;IAAA,EAAE,mBAAI,CAAC,CACR,CAAC;AACJ,CAAC,CAAC;AAzDW,QAAA,oBAAoB,wBAyD/B;AAEF,MAAM,MAAM,GAAG,yBAAU,CAAC,MAAM,CAAC;IAC/B,SAAS,EAAE;QACT,IAAI,EAAE,CAAC;KACR;CACF,CAAC,CAAC"}
|
|
@@ -20,15 +20,14 @@ const hasScreenShare = (p) => p.publishedTracks.includes(video_client_1.SfuModel
|
|
|
20
20
|
*/
|
|
21
21
|
const CallParticipantsSpotlight = ({ CallParticipantsList = CallParticipantsList_1.CallParticipantsList, ParticipantLabel, ParticipantNetworkQualityIndicator, ParticipantReaction, ParticipantVideoFallback, ParticipantView = Participant_1.ParticipantView, VideoRenderer, }) => {
|
|
22
22
|
const { theme: { colors, callParticipantsSpotlight }, } = (0, ThemeContext_1.useTheme)();
|
|
23
|
-
const { useParticipants
|
|
23
|
+
const { useParticipants } = (0, video_react_bindings_1.useCallStateHooks)();
|
|
24
24
|
const _allParticipants = useParticipants({
|
|
25
25
|
sortBy: video_client_1.speakerLayoutSortPreset,
|
|
26
26
|
});
|
|
27
|
-
const _remoteParticipants = useRemoteParticipants();
|
|
28
27
|
const allParticipants = (0, useDebouncedValue_1.useDebouncedValue)(_allParticipants, 300); // we debounce the participants to avoid unnecessary rerenders that happen when participant tracks are all subscribed simultaneously
|
|
29
28
|
const [participantInSpotlight, ...otherParticipants] = allParticipants;
|
|
30
29
|
const isScreenShareOnSpotlight = hasScreenShare(participantInSpotlight);
|
|
31
|
-
const isUserAloneInCall =
|
|
30
|
+
const isUserAloneInCall = _allParticipants?.length === 1;
|
|
32
31
|
const participantViewProps = {
|
|
33
32
|
ParticipantLabel,
|
|
34
33
|
ParticipantNetworkQualityIndicator,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CallParticipantsSpotlight.js","sourceRoot":"","sources":["../../../../../src/components/Call/CallLayout/CallParticipantsSpotlight.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,0DAIiC;AACjC,0EAAoE;AACpE,+CAAgD;AAChD,8EAA2E;AAC3E,wDAA8D;AAC9D,uFAIsD;AACtD,mDAG2B;AAC3B,iEAA0D;AAa1D,MAAM,cAAc,GAAG,CAAC,CAAyB,EAAE,EAAE,CACnD,CAAC,CAAC,eAAe,CAAC,QAAQ,CAAC,wBAAS,CAAC,SAAS,CAAC,YAAY,CAAC,CAAC;AAE/D;;;GAGG;AACI,MAAM,yBAAyB,GAAG,CAAC,EACxC,oBAAoB,GAAG,2CAA2B,EAClD,gBAAgB,EAChB,kCAAkC,EAClC,mBAAmB,EACnB,wBAAwB,EACxB,eAAe,GAAG,6BAAsB,EACxC,aAAa,GACkB,EAAE,EAAE;IACnC,MAAM,EACJ,KAAK,EAAE,EAAE,MAAM,EAAE,yBAAyB,EAAE,GAC7C,GAAG,IAAA,uBAAQ,GAAE,CAAC;IACf,MAAM,EAAE,eAAe,EAAE,
|
|
1
|
+
{"version":3,"file":"CallParticipantsSpotlight.js","sourceRoot":"","sources":["../../../../../src/components/Call/CallLayout/CallParticipantsSpotlight.tsx"],"names":[],"mappings":"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"}
|
|
@@ -19,8 +19,13 @@ export type FloatingParticipantViewProps = ParticipantViewComponentProps & Pick<
|
|
|
19
19
|
* Custom style to be merged with the floating participant view.
|
|
20
20
|
*/
|
|
21
21
|
style?: StyleProp<ViewStyle>;
|
|
22
|
+
/**
|
|
23
|
+
* Handler used to handle actions on click of the participant view in FloatingParticipantView.
|
|
24
|
+
* Eg: Can be used to handle participant switch on click.
|
|
25
|
+
*/
|
|
26
|
+
onPressHandler?: () => void;
|
|
22
27
|
};
|
|
23
28
|
/**
|
|
24
29
|
* A component to render the floating participant's video.
|
|
25
30
|
*/
|
|
26
|
-
export declare const FloatingParticipantView: ({ alignment, participant, style, ParticipantView, ParticipantNetworkQualityIndicator, ParticipantReaction, VideoRenderer, }: FloatingParticipantViewProps) => JSX.Element | null;
|
|
31
|
+
export declare const FloatingParticipantView: ({ alignment, onPressHandler, participant, style, ParticipantView, ParticipantNetworkQualityIndicator, ParticipantReaction, VideoRenderer, }: FloatingParticipantViewProps) => JSX.Element | null;
|
|
@@ -14,11 +14,11 @@ const ParticipantView_1 = require("../ParticipantView");
|
|
|
14
14
|
const ThemeContext_1 = require("../../../contexts/ThemeContext");
|
|
15
15
|
const AnimatedFloatingView_1 = __importDefault(require("./FloatingView/AnimatedFloatingView"));
|
|
16
16
|
const CustomLocalParticipantViewVideoFallback = () => {
|
|
17
|
-
const { theme: { colors,
|
|
17
|
+
const { theme: { colors, floatingParticipantsView, variants: { iconSizes }, }, } = (0, ThemeContext_1.useTheme)();
|
|
18
18
|
return (<react_native_1.View style={[
|
|
19
19
|
styles.videoFallback,
|
|
20
20
|
{ backgroundColor: colors.disabled },
|
|
21
|
-
|
|
21
|
+
floatingParticipantsView.videoFallback,
|
|
22
22
|
]}>
|
|
23
23
|
<react_native_1.View style={{ height: iconSizes.md, width: iconSizes.md }}>
|
|
24
24
|
<icons_1.VideoSlash color={colors.static_white}/>
|
|
@@ -28,8 +28,8 @@ const CustomLocalParticipantViewVideoFallback = () => {
|
|
|
28
28
|
/**
|
|
29
29
|
* A component to render the floating participant's video.
|
|
30
30
|
*/
|
|
31
|
-
const FloatingParticipantView = ({ alignment = 'top-right', participant, style, ParticipantView = ParticipantView_1.ParticipantView, ParticipantNetworkQualityIndicator, ParticipantReaction, VideoRenderer, }) => {
|
|
32
|
-
const { theme: { colors,
|
|
31
|
+
const FloatingParticipantView = ({ alignment = 'top-right', onPressHandler, participant, style, ParticipantView = ParticipantView_1.ParticipantView, ParticipantNetworkQualityIndicator, ParticipantReaction, VideoRenderer, }) => {
|
|
32
|
+
const { theme: { colors, floatingParticipantsView }, } = (0, ThemeContext_1.useTheme)();
|
|
33
33
|
const floatingAlignmentMap = {
|
|
34
34
|
'top-left': common_1.FloatingViewAlignment.topLeft,
|
|
35
35
|
'top-right': common_1.FloatingViewAlignment.topRight,
|
|
@@ -47,7 +47,7 @@ const FloatingParticipantView = ({ alignment = 'top-right', participant, style,
|
|
|
47
47
|
if (!participant) {
|
|
48
48
|
return null;
|
|
49
49
|
}
|
|
50
|
-
return (<react_native_1.View testID={TestIds_1.ComponentTestIds.LOCAL_PARTICIPANT} style={[styles.container,
|
|
50
|
+
return (<react_native_1.View testID={TestIds_1.ComponentTestIds.LOCAL_PARTICIPANT} style={[styles.container, floatingParticipantsView.container]}
|
|
51
51
|
// "box-none" disallows the container view to be not take up touches
|
|
52
52
|
// and allows only the floating view (its child view) to take up the touches
|
|
53
53
|
pointerEvents="box-none" onLayout={(event) => {
|
|
@@ -63,18 +63,20 @@ const FloatingParticipantView = ({ alignment = 'top-right', participant, style,
|
|
|
63
63
|
});
|
|
64
64
|
}}>
|
|
65
65
|
{containerDimensions && (<AnimatedFloatingView_1.default containerHeight={containerDimensions.height} containerWidth={containerDimensions.width} initialAlignment={floatingAlignmentMap[alignment]}>
|
|
66
|
-
|
|
66
|
+
<react_native_1.Pressable onPress={onPressHandler}>
|
|
67
|
+
{ParticipantView && (<ParticipantView participant={participant} trackType="videoTrack" style={[
|
|
67
68
|
styles.participantViewContainer,
|
|
68
69
|
style,
|
|
69
70
|
{
|
|
70
71
|
backgroundColor: colors.static_grey,
|
|
71
72
|
shadowColor: colors.static_black,
|
|
72
73
|
},
|
|
73
|
-
|
|
74
|
+
floatingParticipantsView.participantViewContainer,
|
|
74
75
|
]}
|
|
75
76
|
// video z order must be one above the one used in grid view
|
|
76
77
|
// (which uses the default: 0)
|
|
77
78
|
videoZOrder={1} {...participantViewProps}/>)}
|
|
79
|
+
</react_native_1.Pressable>
|
|
78
80
|
</AnimatedFloatingView_1.default>)}
|
|
79
81
|
</react_native_1.View>);
|
|
80
82
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/Participant/FloatingParticipantView/index.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,+
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/Participant/FloatingParticipantView/index.tsx"],"names":[],"mappings":"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"}
|
package/dist/src/theme/theme.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"theme.js","sourceRoot":"","sources":["../../../src/theme/theme.ts"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"theme.js","sourceRoot":"","sources":["../../../src/theme/theme.ts"],"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.412";
|
package/dist/version.js
CHANGED
package/package.json
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React, { useEffect, useRef } from 'react';
|
|
1
|
+
import React, { useEffect, useRef, useState } from 'react';
|
|
2
2
|
import { StyleSheet, View } from 'react-native';
|
|
3
3
|
import {
|
|
4
4
|
CallTopView as DefaultCallTopView,
|
|
@@ -77,24 +77,34 @@ export const CallContent = ({
|
|
|
77
77
|
ParticipantView,
|
|
78
78
|
ParticipantsInfoBadge,
|
|
79
79
|
VideoRenderer,
|
|
80
|
-
layout,
|
|
80
|
+
layout = 'grid',
|
|
81
81
|
}: CallContentProps) => {
|
|
82
|
+
const [
|
|
83
|
+
showRemoteParticipantInFloatingView,
|
|
84
|
+
setShowRemoteParticipantInFloatingView,
|
|
85
|
+
] = useState<boolean>(false);
|
|
82
86
|
const {
|
|
83
87
|
theme: { callContent },
|
|
84
88
|
} = useTheme();
|
|
85
|
-
const {
|
|
86
|
-
|
|
87
|
-
|
|
89
|
+
const {
|
|
90
|
+
useHasOngoingScreenShare,
|
|
91
|
+
useRemoteParticipants,
|
|
92
|
+
useLocalParticipant,
|
|
93
|
+
} = useCallStateHooks();
|
|
88
94
|
|
|
89
95
|
const _remoteParticipants = useRemoteParticipants();
|
|
90
|
-
const localParticipant = useLocalParticipant();
|
|
91
96
|
const remoteParticipants = useDebouncedValue(_remoteParticipants, 300); // we debounce the remote participants to avoid unnecessary rerenders that happen when participant tracks are all subscribed simultaneously
|
|
97
|
+
const localParticipant = useLocalParticipant();
|
|
98
|
+
|
|
99
|
+
const hasScreenShare = useHasOngoingScreenShare();
|
|
92
100
|
const showSpotlightLayout = hasScreenShare || layout === 'spotlight';
|
|
93
101
|
|
|
94
102
|
const showFloatingView =
|
|
95
103
|
!showSpotlightLayout &&
|
|
96
104
|
remoteParticipants.length > 0 &&
|
|
97
105
|
remoteParticipants.length < 3;
|
|
106
|
+
const isRemoteParticipantInFloatingView =
|
|
107
|
+
showRemoteParticipantInFloatingView && remoteParticipants.length === 1;
|
|
98
108
|
|
|
99
109
|
/**
|
|
100
110
|
* This hook is used to handle IncallManager specs of the application.
|
|
@@ -105,6 +115,13 @@ export const CallContent = ({
|
|
|
105
115
|
const activeCallRef = useRef(call);
|
|
106
116
|
activeCallRef.current = call;
|
|
107
117
|
|
|
118
|
+
const handleFloatingViewParticipantSwitch = () => {
|
|
119
|
+
if (remoteParticipants.length !== 1) {
|
|
120
|
+
return;
|
|
121
|
+
}
|
|
122
|
+
setShowRemoteParticipantInFloatingView((prevState) => !prevState);
|
|
123
|
+
};
|
|
124
|
+
|
|
108
125
|
useEffect(() => {
|
|
109
126
|
return () => {
|
|
110
127
|
if (activeCallRef.current?.state.callingState !== CallingState.LEFT) {
|
|
@@ -123,6 +140,7 @@ export const CallContent = ({
|
|
|
123
140
|
|
|
124
141
|
const callParticipantsGridProps: CallParticipantsGridProps = {
|
|
125
142
|
...participantViewProps,
|
|
143
|
+
showLocalParticipant: isRemoteParticipantInFloatingView,
|
|
126
144
|
ParticipantView,
|
|
127
145
|
CallParticipantsList,
|
|
128
146
|
};
|
|
@@ -151,7 +169,12 @@ export const CallContent = ({
|
|
|
151
169
|
)}
|
|
152
170
|
{showFloatingView && FloatingParticipantView && (
|
|
153
171
|
<FloatingParticipantView
|
|
154
|
-
participant={
|
|
172
|
+
participant={
|
|
173
|
+
isRemoteParticipantInFloatingView
|
|
174
|
+
? remoteParticipants[0]
|
|
175
|
+
: localParticipant
|
|
176
|
+
}
|
|
177
|
+
onPressHandler={handleFloatingViewParticipantSwitch}
|
|
155
178
|
{...participantViewProps}
|
|
156
179
|
/>
|
|
157
180
|
)}
|
|
@@ -18,6 +18,10 @@ export type CallParticipantsGridProps = CallParticipantsListComponentProps & {
|
|
|
18
18
|
* Component to customize the CallParticipantsList.
|
|
19
19
|
*/
|
|
20
20
|
CallParticipantsList?: React.ComponentType<CallParticipantsListProps> | null;
|
|
21
|
+
/**
|
|
22
|
+
* Boolean to decide if local participant will be visible in the grid when there is 1:1 call.
|
|
23
|
+
*/
|
|
24
|
+
showLocalParticipant?: boolean;
|
|
21
25
|
};
|
|
22
26
|
|
|
23
27
|
/**
|
|
@@ -31,12 +35,15 @@ export const CallParticipantsGrid = ({
|
|
|
31
35
|
ParticipantVideoFallback,
|
|
32
36
|
ParticipantView,
|
|
33
37
|
VideoRenderer,
|
|
38
|
+
showLocalParticipant = false,
|
|
34
39
|
}: CallParticipantsGridProps) => {
|
|
35
40
|
const {
|
|
36
41
|
theme: { colors, callParticipantsGrid },
|
|
37
42
|
} = useTheme();
|
|
38
|
-
const { useRemoteParticipants, useParticipants } =
|
|
43
|
+
const { useRemoteParticipants, useParticipants, useLocalParticipant } =
|
|
44
|
+
useCallStateHooks();
|
|
39
45
|
const _remoteParticipants = useRemoteParticipants();
|
|
46
|
+
const localParticipant = useLocalParticipant();
|
|
40
47
|
const _allParticipants = useParticipants();
|
|
41
48
|
// we debounce the participants arrays to avoid unnecessary rerenders that happen when participant tracks are all subscribed simultaneously
|
|
42
49
|
const remoteParticipants = useDebouncedValue(_remoteParticipants, 300);
|
|
@@ -45,7 +52,11 @@ export const CallParticipantsGrid = ({
|
|
|
45
52
|
const showFloatingView =
|
|
46
53
|
remoteParticipants.length > 0 && remoteParticipants.length < 3;
|
|
47
54
|
|
|
48
|
-
const participants = showFloatingView
|
|
55
|
+
const participants = showFloatingView
|
|
56
|
+
? showLocalParticipant && localParticipant
|
|
57
|
+
? [localParticipant]
|
|
58
|
+
: remoteParticipants
|
|
59
|
+
: allParticipants;
|
|
49
60
|
|
|
50
61
|
const participantViewProps: CallParticipantsListComponentProps = {
|
|
51
62
|
ParticipantView,
|
|
@@ -49,15 +49,14 @@ export const CallParticipantsSpotlight = ({
|
|
|
49
49
|
const {
|
|
50
50
|
theme: { colors, callParticipantsSpotlight },
|
|
51
51
|
} = useTheme();
|
|
52
|
-
const { useParticipants
|
|
52
|
+
const { useParticipants } = useCallStateHooks();
|
|
53
53
|
const _allParticipants = useParticipants({
|
|
54
54
|
sortBy: speakerLayoutSortPreset,
|
|
55
55
|
});
|
|
56
|
-
const _remoteParticipants = useRemoteParticipants();
|
|
57
56
|
const allParticipants = useDebouncedValue(_allParticipants, 300); // we debounce the participants to avoid unnecessary rerenders that happen when participant tracks are all subscribed simultaneously
|
|
58
57
|
const [participantInSpotlight, ...otherParticipants] = allParticipants;
|
|
59
58
|
const isScreenShareOnSpotlight = hasScreenShare(participantInSpotlight);
|
|
60
|
-
const isUserAloneInCall =
|
|
59
|
+
const isUserAloneInCall = _allParticipants?.length === 1;
|
|
61
60
|
|
|
62
61
|
const participantViewProps: ParticipantViewComponentProps = {
|
|
63
62
|
ParticipantLabel,
|
|
@@ -1,5 +1,11 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import {
|
|
3
|
+
Pressable,
|
|
4
|
+
StyleProp,
|
|
5
|
+
StyleSheet,
|
|
6
|
+
View,
|
|
7
|
+
ViewStyle,
|
|
8
|
+
} from 'react-native';
|
|
3
9
|
import { FLOATING_VIDEO_VIEW_STYLE, Z_INDEX } from '../../../constants';
|
|
4
10
|
import { ComponentTestIds } from '../../../constants/TestIds';
|
|
5
11
|
import { VideoSlash } from '../../../icons';
|
|
@@ -36,13 +42,18 @@ export type FloatingParticipantViewProps = ParticipantViewComponentProps &
|
|
|
36
42
|
* Custom style to be merged with the floating participant view.
|
|
37
43
|
*/
|
|
38
44
|
style?: StyleProp<ViewStyle>;
|
|
45
|
+
/**
|
|
46
|
+
* Handler used to handle actions on click of the participant view in FloatingParticipantView.
|
|
47
|
+
* Eg: Can be used to handle participant switch on click.
|
|
48
|
+
*/
|
|
49
|
+
onPressHandler?: () => void;
|
|
39
50
|
};
|
|
40
51
|
|
|
41
52
|
const CustomLocalParticipantViewVideoFallback = () => {
|
|
42
53
|
const {
|
|
43
54
|
theme: {
|
|
44
55
|
colors,
|
|
45
|
-
|
|
56
|
+
floatingParticipantsView,
|
|
46
57
|
variants: { iconSizes },
|
|
47
58
|
},
|
|
48
59
|
} = useTheme();
|
|
@@ -52,7 +63,7 @@ const CustomLocalParticipantViewVideoFallback = () => {
|
|
|
52
63
|
style={[
|
|
53
64
|
styles.videoFallback,
|
|
54
65
|
{ backgroundColor: colors.disabled },
|
|
55
|
-
|
|
66
|
+
floatingParticipantsView.videoFallback,
|
|
56
67
|
]}
|
|
57
68
|
>
|
|
58
69
|
<View style={{ height: iconSizes.md, width: iconSizes.md }}>
|
|
@@ -67,6 +78,7 @@ const CustomLocalParticipantViewVideoFallback = () => {
|
|
|
67
78
|
*/
|
|
68
79
|
export const FloatingParticipantView = ({
|
|
69
80
|
alignment = 'top-right',
|
|
81
|
+
onPressHandler,
|
|
70
82
|
participant,
|
|
71
83
|
style,
|
|
72
84
|
ParticipantView = DefaultParticipantView,
|
|
@@ -75,7 +87,7 @@ export const FloatingParticipantView = ({
|
|
|
75
87
|
VideoRenderer,
|
|
76
88
|
}: FloatingParticipantViewProps) => {
|
|
77
89
|
const {
|
|
78
|
-
theme: { colors,
|
|
90
|
+
theme: { colors, floatingParticipantsView },
|
|
79
91
|
} = useTheme();
|
|
80
92
|
|
|
81
93
|
const floatingAlignmentMap: Record<
|
|
@@ -108,7 +120,7 @@ export const FloatingParticipantView = ({
|
|
|
108
120
|
return (
|
|
109
121
|
<View
|
|
110
122
|
testID={ComponentTestIds.LOCAL_PARTICIPANT}
|
|
111
|
-
style={[styles.container,
|
|
123
|
+
style={[styles.container, floatingParticipantsView.container]}
|
|
112
124
|
// "box-none" disallows the container view to be not take up touches
|
|
113
125
|
// and allows only the floating view (its child view) to take up the touches
|
|
114
126
|
pointerEvents="box-none"
|
|
@@ -131,25 +143,27 @@ export const FloatingParticipantView = ({
|
|
|
131
143
|
containerWidth={containerDimensions.width}
|
|
132
144
|
initialAlignment={floatingAlignmentMap[alignment]}
|
|
133
145
|
>
|
|
134
|
-
{
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
146
|
+
<Pressable onPress={onPressHandler}>
|
|
147
|
+
{ParticipantView && (
|
|
148
|
+
<ParticipantView
|
|
149
|
+
participant={participant}
|
|
150
|
+
trackType="videoTrack"
|
|
151
|
+
style={[
|
|
152
|
+
styles.participantViewContainer,
|
|
153
|
+
style,
|
|
154
|
+
{
|
|
155
|
+
backgroundColor: colors.static_grey,
|
|
156
|
+
shadowColor: colors.static_black,
|
|
157
|
+
},
|
|
158
|
+
floatingParticipantsView.participantViewContainer,
|
|
159
|
+
]}
|
|
160
|
+
// video z order must be one above the one used in grid view
|
|
161
|
+
// (which uses the default: 0)
|
|
162
|
+
videoZOrder={1}
|
|
163
|
+
{...participantViewProps}
|
|
164
|
+
/>
|
|
165
|
+
)}
|
|
166
|
+
</Pressable>
|
|
153
167
|
</AnimatedFloatingView>
|
|
154
168
|
)}
|
|
155
169
|
</View>
|
package/src/theme/theme.ts
CHANGED
|
@@ -81,7 +81,7 @@ export type Theme = {
|
|
|
81
81
|
container: ViewStyle;
|
|
82
82
|
label: TextStyle;
|
|
83
83
|
};
|
|
84
|
-
|
|
84
|
+
floatingParticipantsView: {
|
|
85
85
|
container: ViewStyle;
|
|
86
86
|
participantViewContainer: ViewStyle;
|
|
87
87
|
videoFallback: ViewStyle;
|
|
@@ -328,7 +328,7 @@ export const defaultTheme: Theme = {
|
|
|
328
328
|
userNameLabel: {},
|
|
329
329
|
audioMutedIconContainer: {},
|
|
330
330
|
},
|
|
331
|
-
|
|
331
|
+
floatingParticipantsView: {
|
|
332
332
|
container: {},
|
|
333
333
|
participantViewContainer: {},
|
|
334
334
|
videoFallback: {},
|