@ai-vyumi/livecall 0.1.0
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/dist/VyumiLiveCall.d.ts +122 -0
- package/dist/VyumiLiveCall.js +185 -0
- package/dist/callbacks/callbacks.d.ts +149 -0
- package/dist/callbacks/callbacks.js +2 -0
- package/dist/config/const.d.ts +1 -0
- package/dist/config/const.js +4 -0
- package/dist/index.d.ts +3 -0
- package/dist/index.js +10 -0
- package/dist/kit/index.d.ts +12 -0
- package/dist/kit/index.js +514 -0
- package/dist/network/axios.d.ts +8 -0
- package/dist/network/axios.js +49 -0
- package/dist/network/route.d.ts +9 -0
- package/dist/network/route.js +41 -0
- package/dist/service/CallService.d.ts +25 -0
- package/dist/service/CallService.js +225 -0
- package/dist/service/InitServices.d.ts +1 -0
- package/dist/service/InitServices.js +32 -0
- package/dist/service/UserServices.d.ts +1 -0
- package/dist/service/UserServices.js +22 -0
- package/dist/service/WebSocketService.d.ts +24 -0
- package/dist/service/WebSocketService.js +85 -0
- package/dist/service/ZegoServices.d.ts +19 -0
- package/dist/service/ZegoServices.js +216 -0
- package/dist/session/SessionManager.d.ts +36 -0
- package/dist/session/SessionManager.js +94 -0
- package/dist/types/types.d.ts +41 -0
- package/dist/types/types.js +2 -0
- package/dist/utils/Logger.d.ts +7 -0
- package/dist/utils/Logger.js +30 -0
- package/dist/utils/utils.d.ts +1 -0
- package/dist/utils/utils.js +7 -0
- package/package.json +27 -0
|
@@ -0,0 +1,514 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
|
3
|
+
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
4
|
+
return new (P || (P = Promise))(function (resolve, reject) {
|
|
5
|
+
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
6
|
+
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
7
|
+
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
8
|
+
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
9
|
+
});
|
|
10
|
+
};
|
|
11
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
12
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
13
|
+
};
|
|
14
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
15
|
+
const react_1 = require("react");
|
|
16
|
+
const react_native_1 = require("react-native");
|
|
17
|
+
const zego_express_engine_reactnative_1 = require("zego-express-engine-reactnative");
|
|
18
|
+
const SessionManager_1 = __importDefault(require("../session/SessionManager"));
|
|
19
|
+
const VyumiLiveCall_1 = __importDefault(require("../VyumiLiveCall"));
|
|
20
|
+
const colours = {
|
|
21
|
+
bg: '#070d14',
|
|
22
|
+
surface: '#0e1a26',
|
|
23
|
+
surfaceHigh: 'rgba(255, 255, 255, 0.1)',
|
|
24
|
+
border: '#1c2d3f',
|
|
25
|
+
borderMid: '#243547',
|
|
26
|
+
accent: '#2563eb',
|
|
27
|
+
accentDim: '#2563eb',
|
|
28
|
+
danger: '#c0392b',
|
|
29
|
+
dangerDim: 'rgba(192,57,43,0.15)',
|
|
30
|
+
textPrimary: '#e8eef4',
|
|
31
|
+
textSecondary: '#5a7a90',
|
|
32
|
+
textMuted: '#2a3d50',
|
|
33
|
+
white: '#ffffff',
|
|
34
|
+
active: '#f59e0b',
|
|
35
|
+
activeDim: 'rgba(245,158,11,0.15)',
|
|
36
|
+
glowColor: 'rgba(0,140,200,0.18)',
|
|
37
|
+
};
|
|
38
|
+
const ChatBottomSheet = ({ visible, onClose, messages, onSendMessage }) => {
|
|
39
|
+
const [input, setInput] = (0, react_1.useState)('');
|
|
40
|
+
const slideY = (0, react_1.useRef)(new react_native_1.Animated.Value(400)).current;
|
|
41
|
+
(0, react_1.useEffect)(() => {
|
|
42
|
+
react_native_1.Animated.spring(slideY, {
|
|
43
|
+
toValue: visible ? 0 : 400,
|
|
44
|
+
useNativeDriver: true,
|
|
45
|
+
speed: 20,
|
|
46
|
+
bounciness: 4,
|
|
47
|
+
}).start();
|
|
48
|
+
}, [visible]);
|
|
49
|
+
const send = () => {
|
|
50
|
+
const trimmed = input.trim();
|
|
51
|
+
if (!trimmed)
|
|
52
|
+
return;
|
|
53
|
+
onSendMessage(trimmed);
|
|
54
|
+
setInput('');
|
|
55
|
+
};
|
|
56
|
+
if (!visible)
|
|
57
|
+
return null;
|
|
58
|
+
return (<react_native_1.Modal transparent animationType="none" visible={visible}>
|
|
59
|
+
<react_native_1.TouchableWithoutFeedback onPress={onClose}>
|
|
60
|
+
<react_native_1.View style={chatStyles.overlay}/>
|
|
61
|
+
</react_native_1.TouchableWithoutFeedback>
|
|
62
|
+
<react_native_1.Animated.View style={[chatStyles.sheet, { transform: [{ translateY: slideY }] }]}>
|
|
63
|
+
{/* Handle */}
|
|
64
|
+
<react_native_1.View style={chatStyles.handle}/>
|
|
65
|
+
<react_native_1.View style={chatStyles.header}>
|
|
66
|
+
<react_native_1.Text style={chatStyles.headerText}>Messages</react_native_1.Text>
|
|
67
|
+
<react_native_1.TouchableOpacity onPress={onClose}>
|
|
68
|
+
<react_native_1.Text style={chatStyles.closeBtn}>✕</react_native_1.Text>
|
|
69
|
+
</react_native_1.TouchableOpacity>
|
|
70
|
+
</react_native_1.View>
|
|
71
|
+
|
|
72
|
+
<react_native_1.FlatList data={messages} keyExtractor={m => m.id} contentContainerStyle={{ padding: 16, gap: 10 }} renderItem={({ item }) => (<react_native_1.View style={{ alignSelf: item.from === 'user' ? 'flex-end' : 'flex-start' }}>
|
|
73
|
+
<react_native_1.View style={[
|
|
74
|
+
chatStyles.bubble,
|
|
75
|
+
item.from === 'user' ? chatStyles.bubbleUser : chatStyles.bubbleAgent,
|
|
76
|
+
]}>
|
|
77
|
+
<react_native_1.Text style={chatStyles.bubbleText}>{item.text}</react_native_1.Text>
|
|
78
|
+
</react_native_1.View>
|
|
79
|
+
<react_native_1.Text style={chatStyles.bubbleTime}>{item.time}</react_native_1.Text>
|
|
80
|
+
</react_native_1.View>)}/>
|
|
81
|
+
|
|
82
|
+
<react_native_1.KeyboardAvoidingView behavior={react_native_1.Platform.OS === 'ios' ? 'padding' : undefined}>
|
|
83
|
+
<react_native_1.View style={chatStyles.inputRow}>
|
|
84
|
+
<react_native_1.TextInput style={chatStyles.input} value={input} onChangeText={setInput} placeholder="Type a message…" placeholderTextColor={colours.textSecondary} returnKeyType="send" onSubmitEditing={send}/>
|
|
85
|
+
<react_native_1.TouchableOpacity onPress={send} style={chatStyles.sendBtn}>
|
|
86
|
+
<react_native_1.Text style={chatStyles.sendText}>↑</react_native_1.Text>
|
|
87
|
+
</react_native_1.TouchableOpacity>
|
|
88
|
+
</react_native_1.View>
|
|
89
|
+
</react_native_1.KeyboardAvoidingView>
|
|
90
|
+
</react_native_1.Animated.View>
|
|
91
|
+
</react_native_1.Modal>);
|
|
92
|
+
};
|
|
93
|
+
const CtrlBtn = ({ onPress, danger = false, active = false, children }) => (<react_native_1.TouchableOpacity onPress={onPress} activeOpacity={0.75}>
|
|
94
|
+
<react_native_1.View style={[style.ctrlBtn, danger && style.ctrlBtnDanger, active && style.ctrlBtnActive]}>
|
|
95
|
+
{children}
|
|
96
|
+
</react_native_1.View>
|
|
97
|
+
</react_native_1.TouchableOpacity>);
|
|
98
|
+
const SoundWave = ({ active, scale = 1 }) => {
|
|
99
|
+
const MAX_H = 36 * scale;
|
|
100
|
+
const MIN_H = 4 * scale;
|
|
101
|
+
const BAR_W = 4 * scale;
|
|
102
|
+
const GAP = 5 * scale;
|
|
103
|
+
const BAR_COUNT = 5;
|
|
104
|
+
const WAVE_PERIOD = 1200;
|
|
105
|
+
const anims = (0, react_1.useRef)(Array.from({ length: BAR_COUNT }, () => new react_native_1.Animated.Value(MIN_H))).current;
|
|
106
|
+
const frameRef = (0, react_1.useRef)(null);
|
|
107
|
+
const startTimeRef = (0, react_1.useRef)(0);
|
|
108
|
+
const activeRef = (0, react_1.useRef)(active);
|
|
109
|
+
(0, react_1.useEffect)(() => {
|
|
110
|
+
activeRef.current = active;
|
|
111
|
+
}, [active]);
|
|
112
|
+
(0, react_1.useEffect)(() => {
|
|
113
|
+
const tick = (now) => {
|
|
114
|
+
if (startTimeRef.current === 0)
|
|
115
|
+
startTimeRef.current = now;
|
|
116
|
+
const elapsed = now - startTimeRef.current;
|
|
117
|
+
if (!activeRef.current) {
|
|
118
|
+
// Settle all bars to min height
|
|
119
|
+
anims.forEach(a => a.setValue(MIN_H));
|
|
120
|
+
frameRef.current = requestAnimationFrame(tick);
|
|
121
|
+
return;
|
|
122
|
+
}
|
|
123
|
+
// Each bar is offset by (i / BAR_COUNT) of the period → sine wave sweep
|
|
124
|
+
anims.forEach((a, i) => {
|
|
125
|
+
const phase = (i / BAR_COUNT) * Math.PI * 2;
|
|
126
|
+
const t = (elapsed / WAVE_PERIOD) * Math.PI * 2;
|
|
127
|
+
// sin ranges -1..1 → remap to MIN_H..MAX_H
|
|
128
|
+
const norm = (Math.sin(t + phase) + 1) / 2; // 0..1
|
|
129
|
+
a.setValue(MIN_H + norm * (MAX_H - MIN_H));
|
|
130
|
+
});
|
|
131
|
+
frameRef.current = requestAnimationFrame(tick);
|
|
132
|
+
};
|
|
133
|
+
frameRef.current = requestAnimationFrame(tick);
|
|
134
|
+
return () => {
|
|
135
|
+
if (frameRef.current)
|
|
136
|
+
cancelAnimationFrame(frameRef.current);
|
|
137
|
+
startTimeRef.current = 0;
|
|
138
|
+
};
|
|
139
|
+
}, []);
|
|
140
|
+
return (<react_native_1.View style={{
|
|
141
|
+
flexDirection: 'row',
|
|
142
|
+
alignItems: 'center',
|
|
143
|
+
gap: GAP,
|
|
144
|
+
height: MAX_H,
|
|
145
|
+
}}>
|
|
146
|
+
{anims.map((anim, i) => (<react_native_1.Animated.View key={i} style={{
|
|
147
|
+
width: BAR_W,
|
|
148
|
+
borderRadius: BAR_W / 2,
|
|
149
|
+
backgroundColor: colours.accent,
|
|
150
|
+
height: anim,
|
|
151
|
+
}}/>))}
|
|
152
|
+
</react_native_1.View>);
|
|
153
|
+
};
|
|
154
|
+
const AvatarCircle = ({ initials, size = 110 }) => (<react_native_1.View style={{
|
|
155
|
+
width: size,
|
|
156
|
+
height: size,
|
|
157
|
+
borderRadius: size / 2,
|
|
158
|
+
backgroundColor: colours.surfaceHigh,
|
|
159
|
+
borderWidth: 1.5,
|
|
160
|
+
borderColor: colours.border,
|
|
161
|
+
alignItems: 'center',
|
|
162
|
+
justifyContent: 'center',
|
|
163
|
+
}}>
|
|
164
|
+
<react_native_1.Text style={{
|
|
165
|
+
color: colours.textPrimary,
|
|
166
|
+
fontSize: size * 0.34,
|
|
167
|
+
fontWeight: '500',
|
|
168
|
+
letterSpacing: 1,
|
|
169
|
+
}}>
|
|
170
|
+
{initials}
|
|
171
|
+
</react_native_1.Text>
|
|
172
|
+
</react_native_1.View>);
|
|
173
|
+
const VyumiPrebuildCall = ({ vyumiLiveCallCallBacks, }) => {
|
|
174
|
+
const zegoRemoteUserView = (0, react_1.useRef)(null);
|
|
175
|
+
const zegoLocalUserView = (0, react_1.useRef)(null);
|
|
176
|
+
const [muteMicrophone, setMuteMicrophone] = (0, react_1.useState)(false);
|
|
177
|
+
const [enableCamera, setEnableCamera] = (0, react_1.useState)(false);
|
|
178
|
+
const [showChat, setShowChat] = (0, react_1.useState)(false);
|
|
179
|
+
const [useFrontCamera, setUseFrontCamera] = (0, react_1.useState)(true);
|
|
180
|
+
const [chatCount, setChatCount] = (0, react_1.useState)(0);
|
|
181
|
+
const [messages, setMessages] = (0, react_1.useState)([]);
|
|
182
|
+
const isVideoCall = (SessionManager_1.default === null || SessionManager_1.default === void 0 ? void 0 : SessionManager_1.default.currentCallMediaType) === 'video';
|
|
183
|
+
const [remoteUserMicOn, setRemoteUserMicOn] = (0, react_1.useState)(true);
|
|
184
|
+
const [remoteUserCameraOn, setRemoteUserCameraOn] = (0, react_1.useState)(true);
|
|
185
|
+
(0, react_1.useEffect)(() => {
|
|
186
|
+
joinCall();
|
|
187
|
+
}, []);
|
|
188
|
+
const callInteractionCallback = {
|
|
189
|
+
onReceivingMessage: (message) => {
|
|
190
|
+
setMessages(prev => [
|
|
191
|
+
...prev,
|
|
192
|
+
{
|
|
193
|
+
id: String(Date.now()),
|
|
194
|
+
text: message.messageText,
|
|
195
|
+
from: 'agent',
|
|
196
|
+
time: new Date().toLocaleTimeString([], {
|
|
197
|
+
hour: '2-digit',
|
|
198
|
+
minute: '2-digit',
|
|
199
|
+
}),
|
|
200
|
+
name: message.name,
|
|
201
|
+
},
|
|
202
|
+
]);
|
|
203
|
+
console.log('Message received:', message);
|
|
204
|
+
},
|
|
205
|
+
onRemoteMicUpdate: (muted) => {
|
|
206
|
+
setRemoteUserMicOn(!muted);
|
|
207
|
+
},
|
|
208
|
+
onRemoteCameraUpdate: (enabled) => {
|
|
209
|
+
setRemoteUserCameraOn(enabled);
|
|
210
|
+
},
|
|
211
|
+
onCallEnded: () => __awaiter(void 0, void 0, void 0, function* () {
|
|
212
|
+
yield endCall();
|
|
213
|
+
}),
|
|
214
|
+
onPermissionError: (message) => {
|
|
215
|
+
console.log('Permission error:', message);
|
|
216
|
+
},
|
|
217
|
+
onError: (message) => {
|
|
218
|
+
vyumiLiveCallCallBacks === null || vyumiLiveCallCallBacks === void 0 ? void 0 : vyumiLiveCallCallBacks.onError(message);
|
|
219
|
+
},
|
|
220
|
+
onAgentNetworkQuality: (quality) => {
|
|
221
|
+
console.log('Network quality:', quality);
|
|
222
|
+
},
|
|
223
|
+
};
|
|
224
|
+
const joinCall = () => {
|
|
225
|
+
VyumiLiveCall_1.default.joinCall((0, react_native_1.findNodeHandle)(zegoRemoteUserView.current) || 0, (0, react_native_1.findNodeHandle)(zegoLocalUserView.current) || 0, callInteractionCallback);
|
|
226
|
+
};
|
|
227
|
+
const toggleMute = () => __awaiter(void 0, void 0, void 0, function* () {
|
|
228
|
+
yield VyumiLiveCall_1.default.muteMicrophone(!muteMicrophone);
|
|
229
|
+
setMuteMicrophone(m => !m);
|
|
230
|
+
});
|
|
231
|
+
const flipCamera = () => __awaiter(void 0, void 0, void 0, function* () {
|
|
232
|
+
yield VyumiLiveCall_1.default.flipCamera(!useFrontCamera);
|
|
233
|
+
setUseFrontCamera(f => !f);
|
|
234
|
+
});
|
|
235
|
+
const toggleVideo = () => __awaiter(void 0, void 0, void 0, function* () {
|
|
236
|
+
yield VyumiLiveCall_1.default.enableCamera(!enableCamera);
|
|
237
|
+
setEnableCamera(e => !e);
|
|
238
|
+
});
|
|
239
|
+
const sendMessage = (message) => __awaiter(void 0, void 0, void 0, function* () {
|
|
240
|
+
yield VyumiLiveCall_1.default.sendMessage(message);
|
|
241
|
+
setMessages(prev => [
|
|
242
|
+
...prev,
|
|
243
|
+
{
|
|
244
|
+
id: String(Date.now()),
|
|
245
|
+
text: message,
|
|
246
|
+
from: 'user',
|
|
247
|
+
time: new Date().toLocaleTimeString([], {
|
|
248
|
+
hour: '2-digit',
|
|
249
|
+
minute: '2-digit',
|
|
250
|
+
}),
|
|
251
|
+
name: 'You',
|
|
252
|
+
},
|
|
253
|
+
]);
|
|
254
|
+
});
|
|
255
|
+
const endCall = () => __awaiter(void 0, void 0, void 0, function* () {
|
|
256
|
+
yield VyumiLiveCall_1.default.endCall();
|
|
257
|
+
vyumiLiveCallCallBacks === null || vyumiLiveCallCallBacks === void 0 ? void 0 : vyumiLiveCallCallBacks.onCallEnded();
|
|
258
|
+
});
|
|
259
|
+
return (<react_native_1.View style={style.root}>
|
|
260
|
+
<zego_express_engine_reactnative_1.ZegoTextureView ref={zegoRemoteUserView} style={{ flex: 1 }}/>
|
|
261
|
+
|
|
262
|
+
{!remoteUserCameraOn && (<react_native_1.View style={{
|
|
263
|
+
backgroundColor: '#000',
|
|
264
|
+
position: 'absolute',
|
|
265
|
+
top: 0,
|
|
266
|
+
bottom: 0,
|
|
267
|
+
left: 0,
|
|
268
|
+
right: 0,
|
|
269
|
+
justifyContent: 'center',
|
|
270
|
+
alignItems: 'center',
|
|
271
|
+
}}>
|
|
272
|
+
<react_native_1.View style={{ alignItems: 'center' }}>
|
|
273
|
+
<AvatarCircle initials="A"/>
|
|
274
|
+
<react_native_1.View style={{ marginTop: 5 }}/>
|
|
275
|
+
<SoundWave active={remoteUserMicOn}/>
|
|
276
|
+
</react_native_1.View>
|
|
277
|
+
</react_native_1.View>)}
|
|
278
|
+
|
|
279
|
+
<react_native_1.View style={{
|
|
280
|
+
position: 'absolute',
|
|
281
|
+
bottom: 100,
|
|
282
|
+
right: 30,
|
|
283
|
+
height: 150,
|
|
284
|
+
width: 100,
|
|
285
|
+
borderRadius: 10,
|
|
286
|
+
borderWidth: 1,
|
|
287
|
+
borderColor: '#ffffff22',
|
|
288
|
+
overflow: 'hidden',
|
|
289
|
+
backgroundColor: '#000',
|
|
290
|
+
}}>
|
|
291
|
+
{/* Video always mounted underneath */}
|
|
292
|
+
<zego_express_engine_reactnative_1.ZegoTextureView style={react_native_1.StyleSheet.absoluteFill} ref={zegoLocalUserView}/>
|
|
293
|
+
|
|
294
|
+
{/* Black overlay + avatar when camera is off */}
|
|
295
|
+
{!enableCamera && (<react_native_1.View style={Object.assign(Object.assign({}, react_native_1.StyleSheet.absoluteFill), { backgroundColor: '#000', alignItems: 'center', justifyContent: 'center', gap: 8 })}>
|
|
296
|
+
<AvatarCircle initials="A" size={40}/>
|
|
297
|
+
<SoundWave active={!muteMicrophone && !enableCamera} scale={0.5}/>
|
|
298
|
+
</react_native_1.View>)}
|
|
299
|
+
</react_native_1.View>
|
|
300
|
+
|
|
301
|
+
<react_native_1.View style={style.controlBar}>
|
|
302
|
+
<CtrlBtn onPress={() => {
|
|
303
|
+
toggleMute();
|
|
304
|
+
}} active={muteMicrophone}>
|
|
305
|
+
<react_native_1.Image source={muteMicrophone
|
|
306
|
+
? require('../../assets/microphone-slash.png')
|
|
307
|
+
: require('../../assets/microphone.png')} style={style.icon} tintColor={colours.textPrimary}/>
|
|
308
|
+
</CtrlBtn>
|
|
309
|
+
|
|
310
|
+
{isVideoCall && (<CtrlBtn onPress={() => {
|
|
311
|
+
toggleVideo();
|
|
312
|
+
}} active={!enableCamera}>
|
|
313
|
+
<react_native_1.Image source={enableCamera ? require('../../assets/video.png') : require('../../assets/video-slash.png')} style={style.icon} tintColor={colours.textPrimary}/>
|
|
314
|
+
</CtrlBtn>)}
|
|
315
|
+
|
|
316
|
+
{/* Chat */}
|
|
317
|
+
<CtrlBtn onPress={() => {
|
|
318
|
+
setChatCount(0);
|
|
319
|
+
setShowChat(true);
|
|
320
|
+
}}>
|
|
321
|
+
<react_native_1.View>
|
|
322
|
+
<react_native_1.Image source={require('../../assets/comments.png')} style={style.icon} tintColor={colours.textPrimary}/>
|
|
323
|
+
{chatCount > 0 && (<react_native_1.View style={style.badge}>
|
|
324
|
+
<react_native_1.Text style={style.badgeText}>{chatCount}</react_native_1.Text>
|
|
325
|
+
</react_native_1.View>)}
|
|
326
|
+
</react_native_1.View>
|
|
327
|
+
</CtrlBtn>
|
|
328
|
+
|
|
329
|
+
{/* Flip camera — only for video calls */}
|
|
330
|
+
{isVideoCall && (<CtrlBtn onPress={() => {
|
|
331
|
+
flipCamera();
|
|
332
|
+
}}>
|
|
333
|
+
<react_native_1.Image source={require('../../assets/camera-rotate.png')} style={style.icon} tintColor={colours.textPrimary}/>
|
|
334
|
+
</CtrlBtn>)}
|
|
335
|
+
|
|
336
|
+
{/* End call */}
|
|
337
|
+
<CtrlBtn onPress={() => {
|
|
338
|
+
endCall();
|
|
339
|
+
}} danger>
|
|
340
|
+
<react_native_1.Image source={require('../../assets/phone-slash.png')} style={style.icon} tintColor={colours.white}/>
|
|
341
|
+
</CtrlBtn>
|
|
342
|
+
</react_native_1.View>
|
|
343
|
+
|
|
344
|
+
<ChatBottomSheet visible={showChat} onClose={() => {
|
|
345
|
+
setChatCount(0);
|
|
346
|
+
setShowChat(false);
|
|
347
|
+
}} messages={messages} onSendMessage={msg => {
|
|
348
|
+
sendMessage(msg);
|
|
349
|
+
}}/>
|
|
350
|
+
</react_native_1.View>);
|
|
351
|
+
};
|
|
352
|
+
exports.default = VyumiPrebuildCall;
|
|
353
|
+
const style = react_native_1.StyleSheet.create({
|
|
354
|
+
root: {
|
|
355
|
+
flex: 1,
|
|
356
|
+
backgroundColor: colours.bg,
|
|
357
|
+
position: 'relative',
|
|
358
|
+
},
|
|
359
|
+
controlBar: {
|
|
360
|
+
flexDirection: 'row',
|
|
361
|
+
alignItems: 'center',
|
|
362
|
+
alignSelf: 'center',
|
|
363
|
+
gap: 5,
|
|
364
|
+
backgroundColor: 'rgba(10,18,26,0.88)',
|
|
365
|
+
borderWidth: 1,
|
|
366
|
+
borderColor: colours.borderMid,
|
|
367
|
+
padding: 10,
|
|
368
|
+
borderRadius: 999,
|
|
369
|
+
position: 'absolute',
|
|
370
|
+
bottom: 10,
|
|
371
|
+
},
|
|
372
|
+
ctrlBtn: {
|
|
373
|
+
width: 52,
|
|
374
|
+
height: 52,
|
|
375
|
+
borderRadius: 26,
|
|
376
|
+
backgroundColor: colours.surfaceHigh,
|
|
377
|
+
borderWidth: 1,
|
|
378
|
+
borderColor: colours.borderMid,
|
|
379
|
+
alignItems: 'center',
|
|
380
|
+
justifyContent: 'center',
|
|
381
|
+
},
|
|
382
|
+
ctrlBtnDanger: {
|
|
383
|
+
backgroundColor: colours.danger,
|
|
384
|
+
borderColor: colours.danger,
|
|
385
|
+
},
|
|
386
|
+
ctrlBtnActive: {
|
|
387
|
+
backgroundColor: colours.activeDim,
|
|
388
|
+
borderColor: colours.active,
|
|
389
|
+
},
|
|
390
|
+
icon: {
|
|
391
|
+
width: 22,
|
|
392
|
+
height: 22,
|
|
393
|
+
},
|
|
394
|
+
badge: {
|
|
395
|
+
position: 'absolute',
|
|
396
|
+
top: -5,
|
|
397
|
+
right: -5,
|
|
398
|
+
minWidth: 16,
|
|
399
|
+
height: 16,
|
|
400
|
+
borderRadius: 8,
|
|
401
|
+
backgroundColor: colours.accent,
|
|
402
|
+
alignItems: 'center',
|
|
403
|
+
justifyContent: 'center',
|
|
404
|
+
paddingHorizontal: 3,
|
|
405
|
+
},
|
|
406
|
+
badgeText: {
|
|
407
|
+
color: colours.bg,
|
|
408
|
+
fontSize: 9,
|
|
409
|
+
fontWeight: '700',
|
|
410
|
+
},
|
|
411
|
+
});
|
|
412
|
+
const chatStyles = react_native_1.StyleSheet.create({
|
|
413
|
+
overlay: {
|
|
414
|
+
flex: 1,
|
|
415
|
+
backgroundColor: 'rgba(0,0,0,0.55)',
|
|
416
|
+
},
|
|
417
|
+
sheet: {
|
|
418
|
+
position: 'absolute',
|
|
419
|
+
bottom: 0,
|
|
420
|
+
left: 0,
|
|
421
|
+
right: 0,
|
|
422
|
+
height: '60%',
|
|
423
|
+
backgroundColor: colours.surface,
|
|
424
|
+
borderTopLeftRadius: 20,
|
|
425
|
+
borderTopRightRadius: 20,
|
|
426
|
+
borderTopWidth: 1,
|
|
427
|
+
borderColor: colours.borderMid,
|
|
428
|
+
},
|
|
429
|
+
handle: {
|
|
430
|
+
width: 36,
|
|
431
|
+
height: 4,
|
|
432
|
+
borderRadius: 2,
|
|
433
|
+
backgroundColor: colours.borderMid,
|
|
434
|
+
alignSelf: 'center',
|
|
435
|
+
marginTop: 10,
|
|
436
|
+
},
|
|
437
|
+
header: {
|
|
438
|
+
flexDirection: 'row',
|
|
439
|
+
alignItems: 'center',
|
|
440
|
+
justifyContent: 'space-between',
|
|
441
|
+
paddingHorizontal: 20,
|
|
442
|
+
paddingVertical: 14,
|
|
443
|
+
borderBottomWidth: 1,
|
|
444
|
+
borderBottomColor: colours.border,
|
|
445
|
+
},
|
|
446
|
+
headerText: {
|
|
447
|
+
color: colours.textPrimary,
|
|
448
|
+
fontSize: 15,
|
|
449
|
+
fontWeight: '600',
|
|
450
|
+
letterSpacing: 0.3,
|
|
451
|
+
},
|
|
452
|
+
closeBtn: {
|
|
453
|
+
color: colours.textSecondary,
|
|
454
|
+
fontSize: 16,
|
|
455
|
+
},
|
|
456
|
+
bubble: {
|
|
457
|
+
maxWidth: '75%',
|
|
458
|
+
padding: 10,
|
|
459
|
+
borderRadius: 12,
|
|
460
|
+
},
|
|
461
|
+
bubbleUser: {
|
|
462
|
+
backgroundColor: colours.accentDim,
|
|
463
|
+
borderColor: colours.accent,
|
|
464
|
+
alignSelf: 'flex-end',
|
|
465
|
+
borderBottomRightRadius: 4,
|
|
466
|
+
},
|
|
467
|
+
bubbleAgent: {
|
|
468
|
+
backgroundColor: colours.surfaceHigh,
|
|
469
|
+
borderColor: colours.border,
|
|
470
|
+
alignSelf: 'flex-start',
|
|
471
|
+
borderBottomLeftRadius: 4,
|
|
472
|
+
},
|
|
473
|
+
bubbleText: {
|
|
474
|
+
color: colours.textPrimary,
|
|
475
|
+
fontSize: 14,
|
|
476
|
+
lineHeight: 20,
|
|
477
|
+
},
|
|
478
|
+
bubbleTime: {
|
|
479
|
+
color: colours.textSecondary,
|
|
480
|
+
fontSize: 10,
|
|
481
|
+
marginTop: 4,
|
|
482
|
+
textAlign: 'right',
|
|
483
|
+
},
|
|
484
|
+
inputRow: {
|
|
485
|
+
flexDirection: 'row',
|
|
486
|
+
alignItems: 'center',
|
|
487
|
+
margin: 12,
|
|
488
|
+
gap: 10,
|
|
489
|
+
},
|
|
490
|
+
input: {
|
|
491
|
+
flex: 1,
|
|
492
|
+
height: 44,
|
|
493
|
+
backgroundColor: colours.surfaceHigh,
|
|
494
|
+
borderRadius: 22,
|
|
495
|
+
borderWidth: 1,
|
|
496
|
+
borderColor: colours.borderMid,
|
|
497
|
+
paddingHorizontal: 16,
|
|
498
|
+
color: colours.textPrimary,
|
|
499
|
+
fontSize: 14,
|
|
500
|
+
},
|
|
501
|
+
sendBtn: {
|
|
502
|
+
width: 44,
|
|
503
|
+
height: 44,
|
|
504
|
+
borderRadius: 22,
|
|
505
|
+
backgroundColor: colours.accent,
|
|
506
|
+
alignItems: 'center',
|
|
507
|
+
justifyContent: 'center',
|
|
508
|
+
},
|
|
509
|
+
sendText: {
|
|
510
|
+
color: colours.bg,
|
|
511
|
+
fontSize: 18,
|
|
512
|
+
fontWeight: '700',
|
|
513
|
+
},
|
|
514
|
+
});
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
const axios_1 = __importDefault(require("axios"));
|
|
7
|
+
const const_1 = require("../config/const");
|
|
8
|
+
const SessionManager_1 = __importDefault(require("../session/SessionManager"));
|
|
9
|
+
const API = axios_1.default.create({
|
|
10
|
+
baseURL: const_1.API_BASE_URL,
|
|
11
|
+
timeout: 30000,
|
|
12
|
+
headers: {
|
|
13
|
+
'Content-Type': 'application/json',
|
|
14
|
+
},
|
|
15
|
+
});
|
|
16
|
+
// ==================
|
|
17
|
+
// REQUEST
|
|
18
|
+
// ==================
|
|
19
|
+
API.interceptors.request.use((config) => {
|
|
20
|
+
const companyId = SessionManager_1.default.getCompanyId();
|
|
21
|
+
if (companyId) {
|
|
22
|
+
config.headers.set('x-company-id', companyId);
|
|
23
|
+
}
|
|
24
|
+
return config;
|
|
25
|
+
}, error => Promise.reject(error));
|
|
26
|
+
// ==================
|
|
27
|
+
// RESPONSE
|
|
28
|
+
// ==================
|
|
29
|
+
API.interceptors.response.use(response => {
|
|
30
|
+
var _a, _b;
|
|
31
|
+
const result = {
|
|
32
|
+
data: response.data,
|
|
33
|
+
code: response.status,
|
|
34
|
+
valid: true,
|
|
35
|
+
message: (_b = (_a = response.data) === null || _a === void 0 ? void 0 : _a.message) !== null && _b !== void 0 ? _b : '',
|
|
36
|
+
};
|
|
37
|
+
return result;
|
|
38
|
+
}, (error) => {
|
|
39
|
+
var _a, _b, _c, _d, _e;
|
|
40
|
+
const responseData = (_a = error.response) === null || _a === void 0 ? void 0 : _a.data;
|
|
41
|
+
const result = {
|
|
42
|
+
data: responseData !== null && responseData !== void 0 ? responseData : null,
|
|
43
|
+
code: (_c = (_b = error.response) === null || _b === void 0 ? void 0 : _b.status) !== null && _c !== void 0 ? _c : 0,
|
|
44
|
+
valid: false,
|
|
45
|
+
message: (_e = (_d = responseData === null || responseData === void 0 ? void 0 : responseData.message) !== null && _d !== void 0 ? _d : error.message) !== null && _e !== void 0 ? _e : 'Something went wrong',
|
|
46
|
+
};
|
|
47
|
+
return Promise.resolve(result);
|
|
48
|
+
});
|
|
49
|
+
exports.default = API;
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { ApiResult } from './axios';
|
|
2
|
+
export declare const getZegoToken: (payload: any) => Promise<ApiResult>;
|
|
3
|
+
export declare const getConfiguration: () => Promise<ApiResult>;
|
|
4
|
+
export declare const postUserInfo: (payload: any) => Promise<ApiResult>;
|
|
5
|
+
export declare const postInitiateCall: (payload: any) => Promise<ApiResult>;
|
|
6
|
+
export declare const getQueueStatus: (sessionId?: string) => Promise<ApiResult>;
|
|
7
|
+
export declare const postRating: (sessionId: string, payload: any) => Promise<ApiResult>;
|
|
8
|
+
export declare const getScheduleTimeSlots: (queryParams: any) => Promise<ApiResult>;
|
|
9
|
+
export declare const postScheduleCall: (payload: any) => Promise<ApiResult>;
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
exports.postScheduleCall = exports.getScheduleTimeSlots = exports.postRating = exports.getQueueStatus = exports.postInitiateCall = exports.postUserInfo = exports.getConfiguration = exports.getZegoToken = void 0;
|
|
7
|
+
const axios_1 = __importDefault(require("./axios"));
|
|
8
|
+
const getZegoToken = (payload) => {
|
|
9
|
+
return axios_1.default.post('video-call/zego-token', payload);
|
|
10
|
+
};
|
|
11
|
+
exports.getZegoToken = getZegoToken;
|
|
12
|
+
const getConfiguration = () => {
|
|
13
|
+
return axios_1.default.get('video-call/plugin/brand-config');
|
|
14
|
+
};
|
|
15
|
+
exports.getConfiguration = getConfiguration;
|
|
16
|
+
const postUserInfo = (payload) => {
|
|
17
|
+
return axios_1.default.post('conferenceUsers/user-info', payload);
|
|
18
|
+
};
|
|
19
|
+
exports.postUserInfo = postUserInfo;
|
|
20
|
+
const postInitiateCall = (payload) => {
|
|
21
|
+
return axios_1.default.post('video-call/initiate', payload);
|
|
22
|
+
};
|
|
23
|
+
exports.postInitiateCall = postInitiateCall;
|
|
24
|
+
const getQueueStatus = (sessionId) => {
|
|
25
|
+
return axios_1.default.get(`video-call/status/${sessionId}`);
|
|
26
|
+
};
|
|
27
|
+
exports.getQueueStatus = getQueueStatus;
|
|
28
|
+
const postRating = (sessionId, payload) => {
|
|
29
|
+
return axios_1.default.post(`video-call/rating/${sessionId}`, payload);
|
|
30
|
+
};
|
|
31
|
+
exports.postRating = postRating;
|
|
32
|
+
const getScheduleTimeSlots = (queryParams) => {
|
|
33
|
+
return axios_1.default.get('schedulecall/slot/time', {
|
|
34
|
+
params: queryParams,
|
|
35
|
+
});
|
|
36
|
+
};
|
|
37
|
+
exports.getScheduleTimeSlots = getScheduleTimeSlots;
|
|
38
|
+
const postScheduleCall = (payload) => {
|
|
39
|
+
return axios_1.default.post('schedulecall/v2', payload);
|
|
40
|
+
};
|
|
41
|
+
exports.postScheduleCall = postScheduleCall;
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import { CallInteractionCallback, CallSessionCallback } from '../callbacks/callbacks';
|
|
2
|
+
import { MediaType } from '../types/types';
|
|
3
|
+
declare class CallService {
|
|
4
|
+
private sessionCallback;
|
|
5
|
+
private queueInterval;
|
|
6
|
+
private startCheckingQueueUpdate;
|
|
7
|
+
private stopCheckingQueueUpdate;
|
|
8
|
+
createUser(payload: Record<string, any>): Promise<boolean>;
|
|
9
|
+
initiateCall(payload: Record<string, any>, media_type: MediaType, sessionCallback: CallSessionCallback): Promise<void>;
|
|
10
|
+
joinCall({ remoteViewHandle, localViewHandle, interactionCallback, }: {
|
|
11
|
+
remoteViewHandle: number;
|
|
12
|
+
localViewHandle: number;
|
|
13
|
+
interactionCallback: CallInteractionCallback;
|
|
14
|
+
}): Promise<void>;
|
|
15
|
+
private initializeSocket;
|
|
16
|
+
private handleSocketMessage;
|
|
17
|
+
private onNoAgentFound;
|
|
18
|
+
private generateZegoToken;
|
|
19
|
+
scheduleCall(payload: Record<string, any>): Promise<import("../network/axios").ApiResult<any> | undefined>;
|
|
20
|
+
getCallTimeSlots(queryParams: Record<string, any>): Promise<import("../network/axios").ApiResult<any>>;
|
|
21
|
+
cancelCall(): Promise<void>;
|
|
22
|
+
endCall(): Promise<void>;
|
|
23
|
+
}
|
|
24
|
+
declare const callService: CallService;
|
|
25
|
+
export default callService;
|