@stream-io/video-react-native-sdk 0.0.1-alpha.175 → 0.0.1-alpha.176
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/ActiveCall.d.ts +3 -2
- package/dist/src/components/ActiveCall.js +2 -2
- package/dist/src/components/ActiveCall.js.map +1 -1
- package/dist/src/components/CallControlsView.d.ts +9 -1
- package/dist/src/components/CallControlsView.js +58 -6
- package/dist/src/components/CallControlsView.js.map +1 -1
- package/dist/src/components/CallParticipantsBadge.js +24 -1
- package/dist/src/components/CallParticipantsBadge.js.map +1 -1
- package/package.json +1 -1
- package/src/components/ActiveCall.tsx +5 -5
- package/src/components/CallControlsView.tsx +63 -12
- package/src/components/CallParticipantsBadge.tsx +1 -1
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.176](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-native-sdk-0.0.1-alpha.175...@stream-io/video-react-native-sdk-0.0.1-alpha.176) (2023-06-19)
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
### Features
|
|
9
|
+
|
|
10
|
+
* **react-native:** introduce chat in the RN Dogfood app ([#663](https://github.com/GetStream/stream-video-js/issues/663)) ([4043b22](https://github.com/GetStream/stream-video-js/commit/4043b22b62de6eedab425d8b63febc4a874a797c))
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
5
14
|
## [0.0.1-alpha.175](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-native-sdk-0.0.1-alpha.174...@stream-io/video-react-native-sdk-0.0.1-alpha.175) (2023-06-19)
|
|
6
15
|
|
|
7
16
|
|
|
@@ -1,13 +1,14 @@
|
|
|
1
|
+
import { CallControlsViewType } from './CallControlsView';
|
|
1
2
|
/**
|
|
2
3
|
* Props to be passed for the ActiveCall component.
|
|
3
4
|
*/
|
|
4
|
-
export
|
|
5
|
+
export type ActiveCallProps = CallControlsViewType & {
|
|
5
6
|
/**
|
|
6
7
|
* The mode of the call view. Defaults to 'grid'.
|
|
7
8
|
* Note: when there is atleast one screen share, the mode is automatically set to 'spotlight'.
|
|
8
9
|
*/
|
|
9
10
|
mode?: 'grid' | 'spotlight';
|
|
10
|
-
}
|
|
11
|
+
};
|
|
11
12
|
/**
|
|
12
13
|
* View for an active call, includes call controls and participant handling.
|
|
13
14
|
*
|
|
@@ -65,7 +65,7 @@ const ActiveCall = (props) => {
|
|
|
65
65
|
exports.ActiveCall = ActiveCall;
|
|
66
66
|
const InnerActiveCall = (props) => {
|
|
67
67
|
const [height, setHeight] = (0, react_1.useState)(0);
|
|
68
|
-
const { mode = 'grid' } = props;
|
|
68
|
+
const { mode = 'grid', chatButton } = props;
|
|
69
69
|
const hasScreenShare = (0, video_react_bindings_1.useHasOngoingScreenShare)();
|
|
70
70
|
(0, useIncallManager_1.useIncallManager)({ media: 'video', auto: true });
|
|
71
71
|
(0, usePublishMediaStreams_1.usePublishMediaStreams)();
|
|
@@ -90,7 +90,7 @@ const InnerActiveCall = (props) => {
|
|
|
90
90
|
{showSpotLightModeView ? (<CallParticipantsSpotlightView_1.CallParticipantsSpotlightView />) : (<CallParticipantsView_1.CallParticipantsView />)}
|
|
91
91
|
</react_native_1.View>
|
|
92
92
|
<react_native_1.View onLayout={onLayout} style={styles.callControlsWrapper}>
|
|
93
|
-
<CallControlsView_1.CallControlsView />
|
|
93
|
+
<CallControlsView_1.CallControlsView chatButton={chatButton}/>
|
|
94
94
|
</react_native_1.View>
|
|
95
95
|
</react_native_1.View>);
|
|
96
96
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ActiveCall.js","sourceRoot":"","sources":["../../../src/components/ActiveCall.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA2D;AAC3D,0EAGyC;AACzC,+CAAgD;AAChD,
|
|
1
|
+
{"version":3,"file":"ActiveCall.js","sourceRoot":"","sources":["../../../src/components/ActiveCall.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,3 +1,10 @@
|
|
|
1
|
+
type ChatButtonType = {
|
|
2
|
+
onPressHandler: () => void;
|
|
3
|
+
unreadBadgeCountIndicator?: number;
|
|
4
|
+
};
|
|
5
|
+
export type CallControlsViewType = {
|
|
6
|
+
chatButton?: ChatButtonType;
|
|
7
|
+
};
|
|
1
8
|
/**
|
|
2
9
|
* Shows a list/row of controls (mute audio/video, toggle front/back camera, hangup call etc.)
|
|
3
10
|
* the user can trigger within an active call.
|
|
@@ -6,4 +13,5 @@
|
|
|
6
13
|
* | :--- |
|
|
7
14
|
* |  |
|
|
8
15
|
*/
|
|
9
|
-
export declare const CallControlsView: () => JSX.Element;
|
|
16
|
+
export declare const CallControlsView: ({ chatButton }: CallControlsViewType) => JSX.Element;
|
|
17
|
+
export {};
|
|
@@ -1,6 +1,30 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
+
}
|
|
8
|
+
Object.defineProperty(o, k2, desc);
|
|
9
|
+
}) : (function(o, m, k, k2) {
|
|
10
|
+
if (k2 === undefined) k2 = k;
|
|
11
|
+
o[k2] = m[k];
|
|
12
|
+
}));
|
|
13
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
14
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
15
|
+
}) : function(o, v) {
|
|
16
|
+
o["default"] = v;
|
|
17
|
+
});
|
|
18
|
+
var __importStar = (this && this.__importStar) || function (mod) {
|
|
19
|
+
if (mod && mod.__esModule) return mod;
|
|
20
|
+
var result = {};
|
|
21
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
22
|
+
__setModuleDefault(result, mod);
|
|
23
|
+
return result;
|
|
24
|
+
};
|
|
2
25
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
26
|
exports.CallControlsView = void 0;
|
|
27
|
+
const react_1 = __importStar(require("react"));
|
|
4
28
|
const react_native_1 = require("react-native");
|
|
5
29
|
const useCallControls_1 = require("../hooks/useCallControls");
|
|
6
30
|
const icons_1 = require("../icons");
|
|
@@ -8,7 +32,6 @@ const CallControlsButton_1 = require("./CallControlsButton");
|
|
|
8
32
|
const theme_1 = require("../theme");
|
|
9
33
|
const video_client_1 = require("@stream-io/video-client");
|
|
10
34
|
const video_react_bindings_1 = require("@stream-io/video-react-bindings");
|
|
11
|
-
const react_1 = require("react");
|
|
12
35
|
const ReactionsModal_1 = require("./ReactionsModal");
|
|
13
36
|
const ToggleAudioButton_1 = require("./ToggleAudioButton");
|
|
14
37
|
const ToggleVideoButton_1 = require("./ToggleVideoButton");
|
|
@@ -21,15 +44,16 @@ const A11yLabels_1 = require("../constants/A11yLabels");
|
|
|
21
44
|
* | :--- |
|
|
22
45
|
* |  |
|
|
23
46
|
*/
|
|
24
|
-
const CallControlsView = () => {
|
|
47
|
+
const CallControlsView = ({ chatButton }) => {
|
|
25
48
|
const [isReactionModalActive, setIsReactionModalActive] = (0, react_1.useState)(false);
|
|
26
49
|
const { isCameraOnFrontFacingMode, toggleCameraFacingMode } = (0, useCallControls_1.useCallControls)();
|
|
27
50
|
const call = (0, video_react_bindings_1.useCall)();
|
|
28
51
|
const callingState = (0, video_react_bindings_1.useCallCallingState)();
|
|
29
52
|
const onCallHangup = async () => {
|
|
30
53
|
try {
|
|
31
|
-
if (callingState === video_client_1.CallingState.LEFT)
|
|
54
|
+
if (callingState === video_client_1.CallingState.LEFT) {
|
|
32
55
|
return;
|
|
56
|
+
}
|
|
33
57
|
await call?.leave();
|
|
34
58
|
}
|
|
35
59
|
catch (err) {
|
|
@@ -49,9 +73,12 @@ const CallControlsView = () => {
|
|
|
49
73
|
</CallControlsButton_1.CallControlsButton>
|
|
50
74
|
</video_react_bindings_1.Restricted>
|
|
51
75
|
<ReactionsModal_1.ReactionModal isReactionModalActive={isReactionModalActive} setIsReactionModalActive={setIsReactionModalActive}/>
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
76
|
+
{chatButton && (<react_native_1.View>
|
|
77
|
+
<CallControlsButton_1.CallControlsButton color={theme_1.theme.light.static_white} onPress={chatButton.onPressHandler} svgContainerStyle={styles.svgContainerStyle} style={styles.button}>
|
|
78
|
+
<UnreadBadeCountIndicator count={chatButton.unreadBadgeCountIndicator}/>
|
|
79
|
+
<icons_1.Chat color={theme_1.theme.light.static_black}/>
|
|
80
|
+
</CallControlsButton_1.CallControlsButton>
|
|
81
|
+
</react_native_1.View>)}
|
|
55
82
|
<ToggleVideoButton_1.ToggleVideoButton />
|
|
56
83
|
<ToggleAudioButton_1.ToggleAudioButton />
|
|
57
84
|
<video_react_bindings_1.Restricted requiredGrants={[video_client_1.OwnCapability.SEND_VIDEO]}>
|
|
@@ -67,6 +94,15 @@ const CallControlsView = () => {
|
|
|
67
94
|
</react_native_1.View>);
|
|
68
95
|
};
|
|
69
96
|
exports.CallControlsView = CallControlsView;
|
|
97
|
+
const UnreadBadeCountIndicator = ({ count, }) => {
|
|
98
|
+
// Don't show badge if count is 0 or undefined
|
|
99
|
+
if (!count) {
|
|
100
|
+
return null;
|
|
101
|
+
}
|
|
102
|
+
return (<react_native_1.View style={styles.chatBadge}>
|
|
103
|
+
<react_native_1.Text style={styles.chatBadgeText}>{count}</react_native_1.Text>
|
|
104
|
+
</react_native_1.View>);
|
|
105
|
+
};
|
|
70
106
|
const styles = react_native_1.StyleSheet.create({
|
|
71
107
|
container: {
|
|
72
108
|
flexDirection: 'row',
|
|
@@ -92,5 +128,21 @@ const styles = react_native_1.StyleSheet.create({
|
|
|
92
128
|
svgContainerStyle: {
|
|
93
129
|
paddingTop: theme_1.theme.padding.xs,
|
|
94
130
|
},
|
|
131
|
+
chatBadge: {
|
|
132
|
+
backgroundColor: theme_1.theme.light.error,
|
|
133
|
+
borderRadius: theme_1.theme.rounded.xl,
|
|
134
|
+
position: 'absolute',
|
|
135
|
+
left: 15,
|
|
136
|
+
bottom: 20,
|
|
137
|
+
zIndex: 2,
|
|
138
|
+
height: 30,
|
|
139
|
+
width: 30,
|
|
140
|
+
justifyContent: 'center',
|
|
141
|
+
},
|
|
142
|
+
chatBadgeText: {
|
|
143
|
+
color: theme_1.theme.light.static_white,
|
|
144
|
+
textAlign: 'center',
|
|
145
|
+
...theme_1.theme.fonts.bodyBold,
|
|
146
|
+
},
|
|
95
147
|
});
|
|
96
148
|
//# sourceMappingURL=CallControlsView.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CallControlsView.js","sourceRoot":"","sources":["../../../src/components/CallControlsView.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"CallControlsView.js","sourceRoot":"","sources":["../../../src/components/CallControlsView.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,11 +1,34 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
+
}
|
|
8
|
+
Object.defineProperty(o, k2, desc);
|
|
9
|
+
}) : (function(o, m, k, k2) {
|
|
10
|
+
if (k2 === undefined) k2 = k;
|
|
11
|
+
o[k2] = m[k];
|
|
12
|
+
}));
|
|
13
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
14
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
15
|
+
}) : function(o, v) {
|
|
16
|
+
o["default"] = v;
|
|
17
|
+
});
|
|
18
|
+
var __importStar = (this && this.__importStar) || function (mod) {
|
|
19
|
+
if (mod && mod.__esModule) return mod;
|
|
20
|
+
var result = {};
|
|
21
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
22
|
+
__setModuleDefault(result, mod);
|
|
23
|
+
return result;
|
|
24
|
+
};
|
|
2
25
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
26
|
exports.CallParticipantsBadge = void 0;
|
|
27
|
+
const react_1 = __importStar(require("react"));
|
|
4
28
|
const react_native_1 = require("react-native");
|
|
5
29
|
const icons_1 = require("../icons");
|
|
6
30
|
const video_react_bindings_1 = require("@stream-io/video-react-bindings");
|
|
7
31
|
const theme_1 = require("../theme");
|
|
8
|
-
const react_1 = require("react");
|
|
9
32
|
const CallParticipantsInfoView_1 = require("./CallParticipantsInfoView");
|
|
10
33
|
const A11yLabels_1 = require("../constants/A11yLabels");
|
|
11
34
|
const CallParticipantsBadge = () => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CallParticipantsBadge.js","sourceRoot":"","sources":["../../../src/components/CallParticipantsBadge.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"CallParticipantsBadge.js","sourceRoot":"","sources":["../../../src/components/CallParticipantsBadge.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAqD;AACrD,+CAAiE;AACjE,oCAAwC;AACxC,0EAAsE;AACtE,oCAAiC;AACjC,yEAAsE;AACtE,wDAAsD;AAE/C,MAAM,qBAAqB,GAAG,GAAG,EAAE;IACxC,MAAM,gBAAgB,GAAG,IAAA,0CAAmB,GAAE,CAAC;IAC/C,MAAM,CAAC,6BAA6B,EAAE,gCAAgC,CAAC,GACrE,IAAA,gBAAQ,EAAU,KAAK,CAAC,CAAC;IAE3B,MAAM,8BAA8B,GAAG,IAAA,mBAAW,EAAC,GAAG,EAAE;QACtD,gCAAgC,CAAC,IAAI,CAAC,CAAC;IACzC,CAAC,EAAE,CAAC,gCAAgC,CAAC,CAAC,CAAC;IAEvC,OAAO,CACL,CAAC,wBAAS,CACR,KAAK,CAAC,CAAC,MAAM,CAAC,eAAe,CAAC,CAC9B,OAAO,CAAC,CAAC,8BAA8B,CAAC,CACxC,kBAAkB,CAAC,CAAC,wBAAW,CAAC,iBAAiB,CAAC,CAElD;MAAA,CAAC,mBAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CACxB;QAAA,CAAC,mBAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC,gBAAgB,CAAC,EAAE,mBAAI,CACzD;MAAA,EAAE,mBAAI,CACN;MAAA,CAAC,mBAAI,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,iBAAiB,EAAE,aAAK,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CACrD;QAAA,CAAC,oBAAY,CAAC,KAAK,CAAC,CAAC,aAAK,CAAC,KAAK,CAAC,YAAY,CAAC,EAChD;MAAA,EAAE,mBAAI,CACN;MAAA,CAAC,mDAAwB,CACvB,6BAA6B,CAAC,CAAC,6BAA6B,CAAC,CAC7D,gCAAgC,CAAC,CAAC,gCAAgC,CAAC,EAEvE;IAAA,EAAE,wBAAS,CAAC,CACb,CAAC;AACJ,CAAC,CAAC;AA3BW,QAAA,qBAAqB,yBA2BhC;AAEF,MAAM,MAAM,GAAG,yBAAU,CAAC,MAAM,CAAC;IAC/B,eAAe,EAAE;QACf,MAAM,EAAE,CAAC;KACV;IACD,iBAAiB,EAAE,EAAE;IACrB,KAAK,EAAE;QACL,eAAe,EAAE,aAAK,CAAC,KAAK,CAAC,iBAAiB;QAC9C,YAAY,EAAE,aAAK,CAAC,OAAO,CAAC,EAAE;QAC9B,OAAO,EAAE,aAAK,CAAC,OAAO,CAAC,EAAE;QACzB,QAAQ,EAAE,UAAU;QACpB,IAAI,EAAE,aAAK,CAAC,OAAO,CAAC,EAAE;QACtB,GAAG,EAAE,aAAK,CAAC,OAAO,CAAC,EAAE;QACrB,MAAM,EAAE,CAAC;KACV;IACD,SAAS,EAAE;QACT,KAAK,EAAE,aAAK,CAAC,KAAK,CAAC,YAAY;QAC/B,SAAS,EAAE,QAAQ;QACnB,GAAG,aAAK,CAAC,KAAK,CAAC,OAAO;KACvB;CACF,CAAC,CAAC"}
|
package/package.json
CHANGED
|
@@ -4,7 +4,7 @@ import {
|
|
|
4
4
|
useHasOngoingScreenShare,
|
|
5
5
|
} from '@stream-io/video-react-bindings';
|
|
6
6
|
import { StyleSheet, View } from 'react-native';
|
|
7
|
-
import { CallControlsView } from './CallControlsView';
|
|
7
|
+
import { CallControlsView, CallControlsViewType } from './CallControlsView';
|
|
8
8
|
import { CallParticipantsView } from './CallParticipantsView';
|
|
9
9
|
import { CallParticipantsSpotlightView } from './CallParticipantsSpotlightView';
|
|
10
10
|
import { theme } from '../theme';
|
|
@@ -18,13 +18,13 @@ import { CallingState } from '@stream-io/video-client';
|
|
|
18
18
|
/**
|
|
19
19
|
* Props to be passed for the ActiveCall component.
|
|
20
20
|
*/
|
|
21
|
-
export
|
|
21
|
+
export type ActiveCallProps = CallControlsViewType & {
|
|
22
22
|
/**
|
|
23
23
|
* The mode of the call view. Defaults to 'grid'.
|
|
24
24
|
* Note: when there is atleast one screen share, the mode is automatically set to 'spotlight'.
|
|
25
25
|
*/
|
|
26
26
|
mode?: 'grid' | 'spotlight';
|
|
27
|
-
}
|
|
27
|
+
};
|
|
28
28
|
/**
|
|
29
29
|
* View for an active call, includes call controls and participant handling.
|
|
30
30
|
*
|
|
@@ -57,7 +57,7 @@ export const ActiveCall = (props: ActiveCallProps) => {
|
|
|
57
57
|
|
|
58
58
|
const InnerActiveCall = (props: ActiveCallProps) => {
|
|
59
59
|
const [height, setHeight] = useState(0);
|
|
60
|
-
const { mode = 'grid' } = props;
|
|
60
|
+
const { mode = 'grid', chatButton } = props;
|
|
61
61
|
const hasScreenShare = useHasOngoingScreenShare();
|
|
62
62
|
|
|
63
63
|
useIncallManager({ media: 'video', auto: true });
|
|
@@ -94,7 +94,7 @@ const InnerActiveCall = (props: ActiveCallProps) => {
|
|
|
94
94
|
)}
|
|
95
95
|
</View>
|
|
96
96
|
<View onLayout={onLayout} style={styles.callControlsWrapper}>
|
|
97
|
-
<CallControlsView />
|
|
97
|
+
<CallControlsView chatButton={chatButton} />
|
|
98
98
|
</View>
|
|
99
99
|
</View>
|
|
100
100
|
);
|
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import React, { useCallback, useState } from 'react';
|
|
2
|
+
import { StyleSheet, Text, View } from 'react-native';
|
|
2
3
|
import { useCallControls } from '../hooks/useCallControls';
|
|
3
4
|
import { CameraSwitch, Chat, PhoneDown, Reaction } from '../icons';
|
|
4
5
|
import { CallControlsButton } from './CallControlsButton';
|
|
@@ -9,12 +10,20 @@ import {
|
|
|
9
10
|
useCall,
|
|
10
11
|
useCallCallingState,
|
|
11
12
|
} from '@stream-io/video-react-bindings';
|
|
12
|
-
import { useCallback, useState } from 'react';
|
|
13
13
|
import { ReactionModal } from './ReactionsModal';
|
|
14
14
|
import { ToggleAudioButton } from './ToggleAudioButton';
|
|
15
15
|
import { ToggleVideoButton } from './ToggleVideoButton';
|
|
16
16
|
import { A11yButtons } from '../constants/A11yLabels';
|
|
17
17
|
|
|
18
|
+
type ChatButtonType = {
|
|
19
|
+
onPressHandler: () => void;
|
|
20
|
+
unreadBadgeCountIndicator?: number;
|
|
21
|
+
};
|
|
22
|
+
|
|
23
|
+
export type CallControlsViewType = {
|
|
24
|
+
chatButton?: ChatButtonType;
|
|
25
|
+
};
|
|
26
|
+
|
|
18
27
|
/**
|
|
19
28
|
* Shows a list/row of controls (mute audio/video, toggle front/back camera, hangup call etc.)
|
|
20
29
|
* the user can trigger within an active call.
|
|
@@ -23,7 +32,7 @@ import { A11yButtons } from '../constants/A11yLabels';
|
|
|
23
32
|
* | :--- |
|
|
24
33
|
* |  |
|
|
25
34
|
*/
|
|
26
|
-
export const CallControlsView = () => {
|
|
35
|
+
export const CallControlsView = ({ chatButton }: CallControlsViewType) => {
|
|
27
36
|
const [isReactionModalActive, setIsReactionModalActive] =
|
|
28
37
|
useState<boolean>(false);
|
|
29
38
|
|
|
@@ -34,7 +43,9 @@ export const CallControlsView = () => {
|
|
|
34
43
|
|
|
35
44
|
const onCallHangup = async () => {
|
|
36
45
|
try {
|
|
37
|
-
if (callingState === CallingState.LEFT)
|
|
46
|
+
if (callingState === CallingState.LEFT) {
|
|
47
|
+
return;
|
|
48
|
+
}
|
|
38
49
|
await call?.leave();
|
|
39
50
|
} catch (err) {
|
|
40
51
|
console.log('Error Leaving call:', err);
|
|
@@ -64,14 +75,21 @@ export const CallControlsView = () => {
|
|
|
64
75
|
isReactionModalActive={isReactionModalActive}
|
|
65
76
|
setIsReactionModalActive={setIsReactionModalActive}
|
|
66
77
|
/>
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
78
|
+
{chatButton && (
|
|
79
|
+
<View>
|
|
80
|
+
<CallControlsButton
|
|
81
|
+
color={theme.light.static_white}
|
|
82
|
+
onPress={chatButton.onPressHandler}
|
|
83
|
+
svgContainerStyle={styles.svgContainerStyle}
|
|
84
|
+
style={styles.button}
|
|
85
|
+
>
|
|
86
|
+
<UnreadBadeCountIndicator
|
|
87
|
+
count={chatButton.unreadBadgeCountIndicator}
|
|
88
|
+
/>
|
|
89
|
+
<Chat color={theme.light.static_black} />
|
|
90
|
+
</CallControlsButton>
|
|
91
|
+
</View>
|
|
92
|
+
)}
|
|
75
93
|
<ToggleVideoButton />
|
|
76
94
|
<ToggleAudioButton />
|
|
77
95
|
<Restricted requiredGrants={[OwnCapability.SEND_VIDEO]}>
|
|
@@ -101,6 +119,23 @@ export const CallControlsView = () => {
|
|
|
101
119
|
);
|
|
102
120
|
};
|
|
103
121
|
|
|
122
|
+
const UnreadBadeCountIndicator = ({
|
|
123
|
+
count,
|
|
124
|
+
}: {
|
|
125
|
+
count: ChatButtonType['unreadBadgeCountIndicator'];
|
|
126
|
+
}) => {
|
|
127
|
+
// Don't show badge if count is 0 or undefined
|
|
128
|
+
if (!count) {
|
|
129
|
+
return null;
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
return (
|
|
133
|
+
<View style={styles.chatBadge}>
|
|
134
|
+
<Text style={styles.chatBadgeText}>{count}</Text>
|
|
135
|
+
</View>
|
|
136
|
+
);
|
|
137
|
+
};
|
|
138
|
+
|
|
104
139
|
const styles = StyleSheet.create({
|
|
105
140
|
container: {
|
|
106
141
|
flexDirection: 'row',
|
|
@@ -127,4 +162,20 @@ const styles = StyleSheet.create({
|
|
|
127
162
|
svgContainerStyle: {
|
|
128
163
|
paddingTop: theme.padding.xs,
|
|
129
164
|
},
|
|
165
|
+
chatBadge: {
|
|
166
|
+
backgroundColor: theme.light.error,
|
|
167
|
+
borderRadius: theme.rounded.xl,
|
|
168
|
+
position: 'absolute',
|
|
169
|
+
left: 15,
|
|
170
|
+
bottom: 20,
|
|
171
|
+
zIndex: 2,
|
|
172
|
+
height: 30,
|
|
173
|
+
width: 30,
|
|
174
|
+
justifyContent: 'center',
|
|
175
|
+
},
|
|
176
|
+
chatBadgeText: {
|
|
177
|
+
color: theme.light.static_white,
|
|
178
|
+
textAlign: 'center',
|
|
179
|
+
...theme.fonts.bodyBold,
|
|
180
|
+
},
|
|
130
181
|
});
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
+
import React, { useCallback, useState } from 'react';
|
|
1
2
|
import { Pressable, StyleSheet, Text, View } from 'react-native';
|
|
2
3
|
import { Participants } from '../icons';
|
|
3
4
|
import { useParticipantCount } from '@stream-io/video-react-bindings';
|
|
4
5
|
import { theme } from '../theme';
|
|
5
|
-
import { useCallback, useState } from 'react';
|
|
6
6
|
import { CallParticipantsInfoView } from './CallParticipantsInfoView';
|
|
7
7
|
import { A11yButtons } from '../constants/A11yLabels';
|
|
8
8
|
|