@stream-io/video-react-native-sdk 0.0.1-alpha.256 → 0.0.1-alpha.258
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +13 -0
- package/dist/src/components/participants/ParticipantView.js +31 -14
- package/dist/src/components/participants/ParticipantView.js.map +1 -1
- package/dist/src/hooks/useCallControls.js +0 -45
- package/dist/src/hooks/useCallControls.js.map +1 -1
- package/dist/src/providers/MediaStreamManagement/useAudioPublisher.js +15 -10
- package/dist/src/providers/MediaStreamManagement/useAudioPublisher.js.map +1 -1
- package/dist/src/providers/MediaStreamManagement/useVideoPublisher.js +14 -10
- package/dist/src/providers/MediaStreamManagement/useVideoPublisher.js.map +1 -1
- package/dist/src/providers/StreamVideo.js +6 -1
- package/dist/src/providers/StreamVideo.js.map +1 -1
- package/package.json +3 -3
- package/src/components/participants/ParticipantView.tsx +30 -11
- package/src/hooks/useCallControls.tsx +2 -60
- package/src/providers/MediaStreamManagement/useAudioPublisher.ts +18 -10
- package/src/providers/MediaStreamManagement/useVideoPublisher.ts +17 -10
- package/src/providers/StreamVideo.tsx +6 -1
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,19 @@
|
|
|
2
2
|
|
|
3
3
|
This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
|
|
4
4
|
|
|
5
|
+
## [0.0.1-alpha.258](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-native-sdk-0.0.1-alpha.257...@stream-io/video-react-native-sdk-0.0.1-alpha.258) (2023-07-07)
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
## [0.0.1-alpha.257](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-native-sdk-0.0.1-alpha.256...@stream-io/video-react-native-sdk-0.0.1-alpha.257) (2023-07-07)
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
### Features
|
|
13
|
+
|
|
14
|
+
* reconnection flow support for react-native ([#746](https://github.com/GetStream/stream-video-js/issues/746)) ([8677317](https://github.com/GetStream/stream-video-js/commit/86773172cd6e9c77940645302cc80b138ecc090a))
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
|
|
5
18
|
## [0.0.1-alpha.256](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-native-sdk-0.0.1-alpha.255...@stream-io/video-react-native-sdk-0.0.1-alpha.256) (2023-07-07)
|
|
6
19
|
|
|
7
20
|
|
|
@@ -28,17 +28,17 @@ const react_1 = __importStar(require("react"));
|
|
|
28
28
|
const react_native_1 = require("react-native");
|
|
29
29
|
const react_native_webrtc_1 = require("react-native-webrtc");
|
|
30
30
|
const video_client_1 = require("@stream-io/video-client");
|
|
31
|
-
const VideoRenderer_1 = require("../utility/internal/VideoRenderer");
|
|
32
|
-
const Avatar_1 = require("../utility/Avatar");
|
|
33
|
-
const icons_1 = require("../../icons");
|
|
34
|
-
const theme_1 = require("../../theme");
|
|
35
|
-
const constants_1 = require("../../theme/constants");
|
|
36
|
-
const ParticipantReaction_1 = require("./internal/ParticipantReaction");
|
|
37
31
|
const video_react_bindings_1 = require("@stream-io/video-react-bindings");
|
|
38
|
-
const
|
|
39
|
-
const constants_2 = require("../../constants");
|
|
32
|
+
const constants_1 = require("../../constants");
|
|
40
33
|
const A11yLabels_1 = require("../../constants/A11yLabels");
|
|
34
|
+
const icons_1 = require("../../icons");
|
|
41
35
|
const MediaStreamManagement_1 = require("../../providers/MediaStreamManagement");
|
|
36
|
+
const theme_1 = require("../../theme");
|
|
37
|
+
const constants_2 = require("../../theme/constants");
|
|
38
|
+
const utility_1 = require("../utility");
|
|
39
|
+
const VideoRenderer_1 = require("../utility/internal/VideoRenderer");
|
|
40
|
+
const NetworkQualityIndicator_1 = require("./internal/NetworkQualityIndicator");
|
|
41
|
+
const ParticipantReaction_1 = require("./internal/ParticipantReaction");
|
|
42
42
|
/**
|
|
43
43
|
* A component that renders the participants' video track or screenShare track
|
|
44
44
|
* and additional info. By an absence of a video track or when disableVideo is truthy,
|
|
@@ -47,6 +47,8 @@ const MediaStreamManagement_1 = require("../../providers/MediaStreamManagement")
|
|
|
47
47
|
const ParticipantView = (props) => {
|
|
48
48
|
const { participant, kind, isVisible = true, disableAudio } = props;
|
|
49
49
|
const call = (0, video_react_bindings_1.useCall)();
|
|
50
|
+
const callingState = (0, video_react_bindings_1.useCallCallingState)();
|
|
51
|
+
const hasJoinedCall = callingState === video_client_1.CallingState.JOINED;
|
|
50
52
|
const pendingVideoLayoutRef = (0, react_1.useRef)();
|
|
51
53
|
const subscribedVideoLayoutRef = (0, react_1.useRef)();
|
|
52
54
|
const { isSpeaking, isLocalParticipant, publishedTracks } = participant;
|
|
@@ -90,15 +92,23 @@ const ParticipantView = (props) => {
|
|
|
90
92
|
isVisible,
|
|
91
93
|
call,
|
|
92
94
|
]);
|
|
95
|
+
(0, react_1.useEffect)(() => {
|
|
96
|
+
if (!hasJoinedCall && subscribedVideoLayoutRef.current) {
|
|
97
|
+
// when call is joined again, we want to use the last subscribed dimension to resubscribe
|
|
98
|
+
pendingVideoLayoutRef.current = subscribedVideoLayoutRef.current;
|
|
99
|
+
subscribedVideoLayoutRef.current = undefined;
|
|
100
|
+
}
|
|
101
|
+
}, [hasJoinedCall]);
|
|
93
102
|
/**
|
|
94
103
|
* This effect updates the subscription either
|
|
95
104
|
* 1. when video tracks are published and was unpublished before
|
|
96
105
|
* 2. when the view's visibility changes
|
|
106
|
+
* 3. when call was rejoined
|
|
97
107
|
*/
|
|
98
108
|
(0, react_1.useEffect)(() => {
|
|
99
109
|
// NOTE: We only want to update the subscription if the pendingVideoLayoutRef is set
|
|
100
110
|
const updateIsNeeded = pendingVideoLayoutRef.current;
|
|
101
|
-
if (!updateIsNeeded || !call || !isPublishingVideoTrack) {
|
|
111
|
+
if (!updateIsNeeded || !call || !isPublishingVideoTrack || !hasJoinedCall) {
|
|
102
112
|
return;
|
|
103
113
|
}
|
|
104
114
|
// NOTE: When the view is not visible, we want to subscribe to audio only.
|
|
@@ -111,7 +121,14 @@ const ParticipantView = (props) => {
|
|
|
111
121
|
subscribedVideoLayoutRef.current = pendingVideoLayoutRef.current;
|
|
112
122
|
pendingVideoLayoutRef.current = undefined;
|
|
113
123
|
}
|
|
114
|
-
}, [
|
|
124
|
+
}, [
|
|
125
|
+
call,
|
|
126
|
+
isPublishingVideoTrack,
|
|
127
|
+
kind,
|
|
128
|
+
participant.sessionId,
|
|
129
|
+
isVisible,
|
|
130
|
+
hasJoinedCall,
|
|
131
|
+
]);
|
|
115
132
|
(0, react_1.useEffect)(() => {
|
|
116
133
|
return () => {
|
|
117
134
|
subscribedVideoLayoutRef.current = undefined;
|
|
@@ -126,7 +143,7 @@ const ParticipantView = (props) => {
|
|
|
126
143
|
// NOTE: If the participant hasn't published a video track yet,
|
|
127
144
|
// or the view is not viewable, we store the dimensions and handle it
|
|
128
145
|
// when the track is published or the video is enabled.
|
|
129
|
-
if (!call || !isPublishingVideoTrack || !isVisible) {
|
|
146
|
+
if (!call || !isPublishingVideoTrack || !isVisible || !hasJoinedCall) {
|
|
130
147
|
pendingVideoLayoutRef.current = dimension;
|
|
131
148
|
return;
|
|
132
149
|
}
|
|
@@ -156,7 +173,7 @@ const ParticipantView = (props) => {
|
|
|
156
173
|
const applySpeakerStyle = isSpeaking && !isScreenSharing;
|
|
157
174
|
const speakerStyle = applySpeakerStyle && styles.isSpeaking;
|
|
158
175
|
const videoOnlyStyle = {
|
|
159
|
-
borderColor:
|
|
176
|
+
borderColor: constants_2.palette.grey800,
|
|
160
177
|
borderWidth: 2,
|
|
161
178
|
};
|
|
162
179
|
const unPinParticipantHandler = () => {
|
|
@@ -176,7 +193,7 @@ const ParticipantView = (props) => {
|
|
|
176
193
|
<react_native_1.View style={styles.topView}>
|
|
177
194
|
<ParticipantReaction_1.ParticipantReaction reaction={reaction} sessionId={sessionId}/>
|
|
178
195
|
</react_native_1.View>
|
|
179
|
-
{canShowVideo ? (<VideoRenderer_1.VideoRenderer zOrder={
|
|
196
|
+
{canShowVideo ? (<VideoRenderer_1.VideoRenderer zOrder={constants_1.Z_INDEX.IN_BACK} mirror={mirror} mediaStream={videoStream} objectFit={isScreenSharing ? 'contain' : 'cover'} style={[styles.videoRenderer, props.videoRendererStyle]}/>) : (<utility_1.Avatar participant={participant}/>)}
|
|
180
197
|
{isAudioAvailable && <react_native_webrtc_1.RTCView streamURL={audioStream.toURL()}/>}
|
|
181
198
|
<react_native_1.View style={styles.bottomView}>
|
|
182
199
|
{kind === 'video' && (<react_native_1.View style={styles.status}>
|
|
@@ -214,7 +231,7 @@ const styles = react_native_1.StyleSheet.create({
|
|
|
214
231
|
},
|
|
215
232
|
topView: {
|
|
216
233
|
alignSelf: 'flex-end',
|
|
217
|
-
zIndex:
|
|
234
|
+
zIndex: constants_1.Z_INDEX.IN_FRONT,
|
|
218
235
|
},
|
|
219
236
|
videoRenderer: {
|
|
220
237
|
...react_native_1.StyleSheet.absoluteFillObject,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ParticipantView.js","sourceRoot":"","sources":["../../../../src/components/participants/ParticipantView.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAiD;AACjD,+CAOsB;AACtB,6DAA8C;AAC9C,
|
|
1
|
+
{"version":3,"file":"ParticipantView.js","sourceRoot":"","sources":["../../../../src/components/participants/ParticipantView.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,14 +1,10 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
-
};
|
|
5
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
3
|
exports.useCallControls = void 0;
|
|
7
4
|
const video_client_1 = require("@stream-io/video-client");
|
|
8
5
|
const video_react_bindings_1 = require("@stream-io/video-react-bindings");
|
|
9
6
|
const react_1 = require("react");
|
|
10
7
|
const useAppStateListener_1 = require("../utils/hooks/useAppStateListener");
|
|
11
|
-
const netinfo_1 = __importDefault(require("@react-native-community/netinfo"));
|
|
12
8
|
const MediaStreamManagement_1 = require("../providers/MediaStreamManagement");
|
|
13
9
|
/**
|
|
14
10
|
* A helper hook which exposes audio, video mute and camera facing mode and
|
|
@@ -22,7 +18,6 @@ const useCallControls = () => {
|
|
|
22
18
|
/** Refs to keep track of the current call and whether the user is online or not */
|
|
23
19
|
const callRef = (0, react_1.useRef)(call);
|
|
24
20
|
callRef.current = call;
|
|
25
|
-
const isOnlineRef = (0, react_1.useRef)(true);
|
|
26
21
|
const { publishAudioStream, publishVideoStream, stopPublishingAudio, stopPublishingVideo, } = (0, MediaStreamManagement_1.useMediaStreamManagement)();
|
|
27
22
|
const isAudioPublished = localParticipant?.publishedTracks.includes(video_client_1.SfuModels.TrackType.AUDIO);
|
|
28
23
|
const isVideoPublished = localParticipant?.publishedTracks.includes(video_client_1.SfuModels.TrackType.VIDEO);
|
|
@@ -38,22 +33,6 @@ const useCallControls = () => {
|
|
|
38
33
|
publishVideoStreamRef.current = publishVideoStream;
|
|
39
34
|
/** Attempt to republish video stream when app comes back to foreground */
|
|
40
35
|
(0, useAppStateListener_1.useAppStateListener)(isVideoPublishedRef.current ? publishVideoStream : undefined);
|
|
41
|
-
/**
|
|
42
|
-
* Effect to re-join to an existing call happens in case the user comes back online
|
|
43
|
-
*/
|
|
44
|
-
(0, react_1.useEffect)(() => {
|
|
45
|
-
const unsubscribe = netinfo_1.default.addEventListener(async (state) => {
|
|
46
|
-
const { isConnected, isInternetReachable } = state;
|
|
47
|
-
const isOnline = isConnected !== false && isInternetReachable !== false;
|
|
48
|
-
isOnlineRef.current = isOnline;
|
|
49
|
-
if (!callRef.current) {
|
|
50
|
-
return;
|
|
51
|
-
}
|
|
52
|
-
const callToJoin = callRef.current;
|
|
53
|
-
await rejoinCall(callToJoin, isOnline, isAudioPublishedRef.current, isVideoPublishedRef.current, publishAudioStreamRef.current, publishVideoStreamRef.current);
|
|
54
|
-
});
|
|
55
|
-
return unsubscribe;
|
|
56
|
-
}, []);
|
|
57
36
|
const toggleVideoMuted = (0, react_1.useCallback)(async () => {
|
|
58
37
|
if (!isVideoPublished) {
|
|
59
38
|
publishVideoStream();
|
|
@@ -78,28 +57,4 @@ const useCallControls = () => {
|
|
|
78
57
|
};
|
|
79
58
|
};
|
|
80
59
|
exports.useCallControls = useCallControls;
|
|
81
|
-
/**
|
|
82
|
-
* Helper function to rejoin a call and then publish the streams
|
|
83
|
-
*/
|
|
84
|
-
async function rejoinCall(callToJoin, isOnline, isAudioPublished, isVideoPublished, publishAudioStream, publishVideoStream) {
|
|
85
|
-
const isCurrentStateOffline = callToJoin.state.callingState === video_client_1.CallingState.OFFLINE;
|
|
86
|
-
if (!isOnline && !isCurrentStateOffline) {
|
|
87
|
-
callToJoin.state.setCallingState(video_client_1.CallingState.OFFLINE);
|
|
88
|
-
}
|
|
89
|
-
else if (isOnline && isCurrentStateOffline && callToJoin.rejoin) {
|
|
90
|
-
try {
|
|
91
|
-
await callToJoin.rejoin();
|
|
92
|
-
if (isAudioPublished) {
|
|
93
|
-
await publishAudioStream();
|
|
94
|
-
}
|
|
95
|
-
if (isVideoPublished) {
|
|
96
|
-
await publishVideoStream();
|
|
97
|
-
}
|
|
98
|
-
}
|
|
99
|
-
catch (e) {
|
|
100
|
-
console.error('Failed to rejoin', e);
|
|
101
|
-
callToJoin.state.setCallingState(video_client_1.CallingState.RECONNECTING_FAILED);
|
|
102
|
-
}
|
|
103
|
-
}
|
|
104
|
-
}
|
|
105
60
|
//# sourceMappingURL=useCallControls.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useCallControls.js","sourceRoot":"","sources":["../../../src/hooks/useCallControls.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"useCallControls.js","sourceRoot":"","sources":["../../../src/hooks/useCallControls.tsx"],"names":[],"mappings":";;;AAAA,0DAAoD;AACpD,0EAA+E;AAC/E,iCAA4C;AAC5C,4EAAyE;AACzE,8EAA8E;AAE9E;;;;;GAKG;AACI,MAAM,eAAe,GAAG,GAAG,EAAE;IAClC,MAAM,gBAAgB,GAAG,IAAA,0CAAmB,GAAE,CAAC;IAC/C,MAAM,IAAI,GAAG,IAAA,8BAAO,GAAE,CAAC;IACvB,mFAAmF;IACnF,MAAM,OAAO,GAAG,IAAA,cAAM,EAAC,IAAI,CAAC,CAAC;IAC7B,OAAO,CAAC,OAAO,GAAG,IAAI,CAAC;IAEvB,MAAM,EACJ,kBAAkB,EAClB,kBAAkB,EAClB,mBAAmB,EACnB,mBAAmB,GACpB,GAAG,IAAA,gDAAwB,GAAE,CAAC;IAE/B,MAAM,gBAAgB,GAAG,gBAAgB,EAAE,eAAe,CAAC,QAAQ,CACjE,wBAAS,CAAC,SAAS,CAAC,KAAK,CAC1B,CAAC;IACF,MAAM,gBAAgB,GAAG,gBAAgB,EAAE,eAAe,CAAC,QAAQ,CACjE,wBAAS,CAAC,SAAS,CAAC,KAAK,CAC1B,CAAC;IACF,2FAA2F;IAC3F,MAAM,mBAAmB,GAAG,IAAA,cAAM,EAAC,KAAK,CAAC,CAAC;IAC1C,MAAM,mBAAmB,GAAG,IAAA,cAAM,EAAC,KAAK,CAAC,CAAC;IAC1C,mBAAmB,CAAC,OAAO,GAAG,CAAC,gBAAgB,CAAC;IAChD,mBAAmB,CAAC,OAAO,GAAG,CAAC,gBAAgB,CAAC;IAEhD,0FAA0F;IAC1F,MAAM,qBAAqB,GAAG,IAAA,cAAM,EAAC,kBAAkB,CAAC,CAAC;IACzD,MAAM,qBAAqB,GAAG,IAAA,cAAM,EAAC,kBAAkB,CAAC,CAAC;IACzD,qBAAqB,CAAC,OAAO,GAAG,kBAAkB,CAAC;IACnD,qBAAqB,CAAC,OAAO,GAAG,kBAAkB,CAAC;IAEnD,0EAA0E;IAC1E,IAAA,yCAAmB,EACjB,mBAAmB,CAAC,OAAO,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,SAAS,CAC7D,CAAC;IAEF,MAAM,gBAAgB,GAAG,IAAA,mBAAW,EAAC,KAAK,IAAI,EAAE;QAC9C,IAAI,CAAC,gBAAgB,EAAE;YACrB,kBAAkB,EAAE,CAAC;SACtB;aAAM;YACL,mBAAmB,EAAE,CAAC;SACvB;IACH,CAAC,EAAE,CAAC,gBAAgB,EAAE,kBAAkB,EAAE,mBAAmB,CAAC,CAAC,CAAC;IAEhE,MAAM,gBAAgB,GAAG,IAAA,mBAAW,EAAC,KAAK,IAAI,EAAE;QAC9C,IAAI,CAAC,gBAAgB,EAAE;YACrB,kBAAkB,EAAE,CAAC;SACtB;aAAM;YACL,mBAAmB,EAAE,CAAC;SACvB;IACH,CAAC,EAAE,CAAC,gBAAgB,EAAE,kBAAkB,EAAE,mBAAmB,CAAC,CAAC,CAAC;IAEhE,OAAO;QACL,gBAAgB;QAChB,gBAAgB;QAChB,gBAAgB;QAChB,gBAAgB;KACjB,CAAC;AACJ,CAAC,CAAC;AA3DW,QAAA,eAAe,mBA2D1B"}
|
|
@@ -32,30 +32,35 @@ const useAudioPublisher = ({ initialAudioMuted, }) => {
|
|
|
32
32
|
console.log('Failed to publish video stream', e);
|
|
33
33
|
}
|
|
34
34
|
}, [call, audioDeviceId]);
|
|
35
|
+
// If the audio device id changes, we need to re-publish the audio stream
|
|
36
|
+
const lastAudioDeviceId = (0, react_1.useRef)(audioDeviceId);
|
|
37
|
+
(0, react_1.useEffect)(() => {
|
|
38
|
+
if (callingState === video_client_1.CallingState.JOINED &&
|
|
39
|
+
audioDeviceId !== lastAudioDeviceId.current) {
|
|
40
|
+
lastAudioDeviceId.current = audioDeviceId;
|
|
41
|
+
publishAudioStream().catch((e) => {
|
|
42
|
+
console.error('Failed to publish audio stream', e);
|
|
43
|
+
});
|
|
44
|
+
}
|
|
45
|
+
}, [audioDeviceId, callingState, publishAudioStream]);
|
|
35
46
|
const initialPublishRun = (0, react_1.useRef)(false);
|
|
36
47
|
/*
|
|
37
|
-
* When joining the call, publish video stream automatically in the following
|
|
38
|
-
*
|
|
39
|
-
* 2. reconnecting to the call with the video already published
|
|
40
|
-
* 3. when the video device is changed (this is handled by the dependency to publishVideoStream function)
|
|
48
|
+
* When joining the call, publish video stream automatically in the following case:
|
|
49
|
+
* - joining the call from the lobby, and the video is not muted
|
|
41
50
|
*/
|
|
42
51
|
(0, react_1.useEffect)(() => {
|
|
43
52
|
if (callingState !== video_client_1.CallingState.JOINED) {
|
|
44
53
|
return;
|
|
45
54
|
}
|
|
46
55
|
const shouldJoinInitially = !initialAudioMuted && !initialPublishRun.current;
|
|
47
|
-
|
|
48
|
-
// if we are not joining the call from the lobby or equivalent view,
|
|
49
|
-
// and we are not reconnecting to the call,
|
|
50
|
-
// then do not publish the audio stream
|
|
51
|
-
if (!shouldJoinInitially && !shouldRejoin) {
|
|
56
|
+
if (!shouldJoinInitially) {
|
|
52
57
|
return;
|
|
53
58
|
}
|
|
54
59
|
publishAudioStream().catch((e) => {
|
|
55
60
|
console.error('Failed to publish audio stream', e);
|
|
56
61
|
});
|
|
57
62
|
initialPublishRun.current = true;
|
|
58
|
-
}, [callingState, initialAudioMuted,
|
|
63
|
+
}, [callingState, initialAudioMuted, publishAudioStream]);
|
|
59
64
|
/*
|
|
60
65
|
* When track ended unexpectedly due to unknown external factors, try to publish the video stream again
|
|
61
66
|
* Note: this is not triggered when track.stop is called
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useAudioPublisher.js","sourceRoot":"","sources":["../../../../src/providers/MediaStreamManagement/useAudioPublisher.ts"],"names":[],"mappings":";;;AAAA,iCAAuD;AACvD,0DAKiC;AACjC,0EAIyC;AACzC,0EAA6E;AAS7E;;;GAGG;AACI,MAAM,iBAAiB,GAAG,CAAC,EAChC,iBAAiB,GACE,EAAE,EAAE;IACvB,MAAM,IAAI,GAAG,IAAA,8BAAO,GAAE,CAAC;IACvB,MAAM,YAAY,GAAG,IAAA,0CAAmB,GAAE,CAAC;IAC3C,MAAM,WAAW,GAAG,IAAA,0CAAmB,GAAE,CAAC;IAC1C,MAAM,aAAa,GAAG,IAAA,6CAAwB,EAC5C,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,kBAAkB,CACpC,EAAE,QAAQ,CAAC;IAEZ,MAAM,iBAAiB,GAAG,WAAW,EAAE,eAAe,CAAC,QAAQ,CAC7D,wBAAS,CAAC,SAAS,CAAC,KAAK,CAC1B,CAAC;IAEF,MAAM,kBAAkB,GAAG,IAAA,mBAAW,EAAC,KAAK,IAAI,EAAE;QAChD,IAAI,CAAC,IAAI,IAAI,CAAC,aAAa,EAAE;YAC3B,OAAO;SACR;QACD,IAAI,CAAC,IAAI,CAAC,kBAAkB,CAAC,aAAa,CAAC,4BAAa,CAAC,UAAU,CAAC,EAAE;YACpE,MAAM,IAAI,KAAK,CACb,6DAA6D,CAC9D,CAAC;SACH;QACD,IAAI;YACF,MAAM,WAAW,GAAG,MAAM,IAAA,6BAAc,EAAC;gBACvC,QAAQ,EAAE,aAAa;aACxB,CAAC,CAAC;YAEH,MAAM,IAAI,CAAC,kBAAkB,CAAC,WAAW,CAAC,CAAC;SAC5C;QAAC,OAAO,CAAC,EAAE;YACV,OAAO,CAAC,GAAG,CAAC,gCAAgC,EAAE,CAAC,CAAC,CAAC;SAClD;IACH,CAAC,EAAE,CAAC,IAAI,EAAE,aAAa,CAAC,CAAC,CAAC;IAE1B,MAAM,iBAAiB,GAAG,IAAA,cAAM,EAAC,
|
|
1
|
+
{"version":3,"file":"useAudioPublisher.js","sourceRoot":"","sources":["../../../../src/providers/MediaStreamManagement/useAudioPublisher.ts"],"names":[],"mappings":"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"}
|
|
@@ -32,30 +32,34 @@ const useVideoPublisher = ({ initialVideoMuted, }) => {
|
|
|
32
32
|
console.log('Failed to publish video stream', e);
|
|
33
33
|
}
|
|
34
34
|
}, [call, videoDeviceId]);
|
|
35
|
+
const lastVideoDeviceId = (0, react_1.useRef)(videoDeviceId);
|
|
36
|
+
(0, react_1.useEffect)(() => {
|
|
37
|
+
if (callingState === video_client_1.CallingState.JOINED &&
|
|
38
|
+
videoDeviceId !== lastVideoDeviceId.current) {
|
|
39
|
+
lastVideoDeviceId.current = videoDeviceId;
|
|
40
|
+
publishVideoStream().catch((e) => {
|
|
41
|
+
console.error('Failed to publish video stream', e);
|
|
42
|
+
});
|
|
43
|
+
}
|
|
44
|
+
}, [callingState, publishVideoStream, videoDeviceId]);
|
|
35
45
|
const initialPublishRun = (0, react_1.useRef)(false);
|
|
36
46
|
/*
|
|
37
|
-
* When joining the call, publish video stream automatically in the following
|
|
38
|
-
*
|
|
39
|
-
* 2. reconnecting to the call with the video already published
|
|
40
|
-
* 3. when the video device is changed (this is handled by the dependency to publishVideoStream function)
|
|
47
|
+
* When joining the call, publish video stream automatically in the following case:
|
|
48
|
+
* - joining the call from the lobby, and the video is not muted
|
|
41
49
|
*/
|
|
42
50
|
(0, react_1.useEffect)(() => {
|
|
43
51
|
if (callingState !== video_client_1.CallingState.JOINED) {
|
|
44
52
|
return;
|
|
45
53
|
}
|
|
46
54
|
const shouldJoinInitially = !initialVideoMuted && !initialPublishRun.current;
|
|
47
|
-
|
|
48
|
-
// if we are not joining the call from the lobby or equivalent view,
|
|
49
|
-
// and we are not reconnecting to the call,
|
|
50
|
-
// then do not publish the video stream
|
|
51
|
-
if (!shouldJoinInitially && !shouldRejoin) {
|
|
55
|
+
if (!shouldJoinInitially) {
|
|
52
56
|
return;
|
|
53
57
|
}
|
|
54
58
|
publishVideoStream().catch((e) => {
|
|
55
59
|
console.error('Failed to publish video stream', e);
|
|
56
60
|
});
|
|
57
61
|
initialPublishRun.current = true;
|
|
58
|
-
}, [callingState, initialVideoMuted,
|
|
62
|
+
}, [callingState, initialVideoMuted, publishVideoStream]);
|
|
59
63
|
/*
|
|
60
64
|
* When track ended unexpectedly due to unknown external factors, try to publish the video stream again
|
|
61
65
|
* Note: this is not triggered when track.stop is called
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useVideoPublisher.js","sourceRoot":"","sources":["../../../../src/providers/MediaStreamManagement/useVideoPublisher.ts"],"names":[],"mappings":";;;AAAA,iCAAuD;AACvD,0DAKiC;AACjC,0EAIyC;AACzC,0EAA6E;AAS7E;;;GAGG;AACI,MAAM,iBAAiB,GAAG,CAAC,EAChC,iBAAiB,GACE,EAAE,EAAE;IACvB,MAAM,IAAI,GAAG,IAAA,8BAAO,GAAE,CAAC;IACvB,MAAM,YAAY,GAAG,IAAA,0CAAmB,GAAE,CAAC;IAC3C,MAAM,WAAW,GAAG,IAAA,0CAAmB,GAAE,CAAC;IAC1C,MAAM,aAAa,GAAG,IAAA,6CAAwB,EAC5C,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,kBAAkB,CACpC,EAAE,QAAQ,CAAC;IAEZ,MAAM,iBAAiB,GAAG,WAAW,EAAE,eAAe,CAAC,QAAQ,CAC7D,wBAAS,CAAC,SAAS,CAAC,KAAK,CAC1B,CAAC;IAEF,MAAM,kBAAkB,GAAG,IAAA,mBAAW,EAAC,KAAK,IAAI,EAAE;QAChD,IAAI,CAAC,IAAI,IAAI,CAAC,aAAa,EAAE;YAC3B,OAAO;SACR;QACD,IAAI,CAAC,IAAI,CAAC,kBAAkB,CAAC,aAAa,CAAC,4BAAa,CAAC,UAAU,CAAC,EAAE;YACpE,MAAM,IAAI,KAAK,CACb,6DAA6D,CAC9D,CAAC;SACH;QACD,IAAI;YACF,MAAM,WAAW,GAAG,MAAM,IAAA,6BAAc,EAAC;gBACvC,QAAQ,EAAE,aAAa;aACxB,CAAC,CAAC;YAEH,MAAM,IAAI,CAAC,kBAAkB,CAAC,WAAW,CAAC,CAAC;SAC5C;QAAC,OAAO,CAAC,EAAE;YACV,OAAO,CAAC,GAAG,CAAC,gCAAgC,EAAE,CAAC,CAAC,CAAC;SAClD;IACH,CAAC,EAAE,CAAC,IAAI,EAAE,aAAa,CAAC,CAAC,CAAC;IAE1B,MAAM,iBAAiB,GAAG,IAAA,cAAM,EAAC,
|
|
1
|
+
{"version":3,"file":"useVideoPublisher.js","sourceRoot":"","sources":["../../../../src/providers/MediaStreamManagement/useVideoPublisher.ts"],"names":[],"mappings":"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"}
|
|
@@ -46,9 +46,14 @@ const StreamVideo = (props) => {
|
|
|
46
46
|
* Effect to inform the coordinator about the online status of the app
|
|
47
47
|
*/
|
|
48
48
|
(0, react_1.useEffect)(() => {
|
|
49
|
+
let prevIsOnline = true;
|
|
49
50
|
const unsubscribe = netinfo_1.default.addEventListener((state) => {
|
|
50
51
|
const { isConnected, isInternetReachable } = state;
|
|
51
|
-
const isOnline = isConnected
|
|
52
|
+
const isOnline = isConnected === true && isInternetReachable !== false;
|
|
53
|
+
if (isOnline === prevIsOnline) {
|
|
54
|
+
return;
|
|
55
|
+
}
|
|
56
|
+
prevIsOnline = isOnline;
|
|
52
57
|
// @ts-expect-error - due to being incompatible with DOM event type
|
|
53
58
|
client.streamClient.wsConnection?.onlineStatusChanged({
|
|
54
59
|
type: isOnline ? 'online' : 'offline',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StreamVideo.js","sourceRoot":"","sources":["../../../src/providers/StreamVideo.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,0EAGyC;AACzC,+CAA4D;AAC5D,uEAA0E;AAC1E,8EAAsD;AACtD,iDAA8C;AAC9C,oCAAiD;AAEjD;;;;;;GAMG;AACI,MAAM,WAAW,GAAG,CAAC,KAA0C,EAAE,EAAE;IACxE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,qBAAqB,EAAE,YAAY,EAAE,QAAQ,EAAE,GACvE,KAAK,CAAC;IAER;;OAEG;IACH,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,MAAM,WAAW,GAAG,iBAAO,CAAC,gBAAgB,CAAC,CAAC,KAAK,EAAE,EAAE;YACrD,MAAM,EAAE,WAAW,EAAE,mBAAmB,EAAE,GAAG,KAAK,CAAC;YACnD,MAAM,QAAQ,GAAG,WAAW,KAAK,
|
|
1
|
+
{"version":3,"file":"StreamVideo.js","sourceRoot":"","sources":["../../../src/providers/StreamVideo.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,0EAGyC;AACzC,+CAA4D;AAC5D,uEAA0E;AAC1E,8EAAsD;AACtD,iDAA8C;AAC9C,oCAAiD;AAEjD;;;;;;GAMG;AACI,MAAM,WAAW,GAAG,CAAC,KAA0C,EAAE,EAAE;IACxE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,qBAAqB,EAAE,YAAY,EAAE,QAAQ,EAAE,GACvE,KAAK,CAAC;IAER;;OAEG;IACH,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,YAAY,GAAG,IAAI,CAAC;QACxB,MAAM,WAAW,GAAG,iBAAO,CAAC,gBAAgB,CAAC,CAAC,KAAK,EAAE,EAAE;YACrD,MAAM,EAAE,WAAW,EAAE,mBAAmB,EAAE,GAAG,KAAK,CAAC;YACnD,MAAM,QAAQ,GAAG,WAAW,KAAK,IAAI,IAAI,mBAAmB,KAAK,KAAK,CAAC;YACvE,IAAI,QAAQ,KAAK,YAAY,EAAE;gBAC7B,OAAO;aACR;YACD,YAAY,GAAG,QAAQ,CAAC;YACxB,mEAAmE;YACnE,MAAM,CAAC,YAAY,CAAC,YAAY,EAAE,mBAAmB,CAAC;gBACpD,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS;aACtC,CAAC,CAAC;QACL,CAAC,CAAC,CAAC;QAEH,OAAO,WAAW,CAAC;IACrB,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAEb,OAAO,CACL,CAAC,kCAAmB,CAClB,MAAM,CAAC,CAAC,MAAM,CAAC,CACf,qBAAqB,CAAC,CAAC,qBAAqB,CAAC,CAC7C,YAAY,CAAC,CAAC,YAAY,CAAC,CAC3B,QAAQ,CAAC,CAAC,QAAQ,CAAC,CAEnB;MAAA,CAAC,6CAAwB,CACvB;QAAA,CAAC,2BAAY,CAAC,AAAD,EACb;QAAA,CAAC,YAAY,CAAC,AAAD,EACb;QAAA,CAAC,QAAQ,CACX;MAAA,EAAE,6CAAwB,CAC5B;IAAA,EAAE,kCAAmB,CAAC,CACvB,CAAC;AACJ,CAAC,CAAC;AAvCW,QAAA,WAAW,eAuCtB;AAEF;;;GAGG;AACH,MAAM,YAAY,GAAG,GAAG,EAAE;IACxB,IAAA,6BAAqB,GAAE,CAAC;IACxB,OAAO,IAAI,CAAC;AACd,CAAC,CAAC"}
|
package/package.json
CHANGED
|
@@ -21,8 +21,8 @@
|
|
|
21
21
|
],
|
|
22
22
|
"dependencies": {
|
|
23
23
|
"@stream-io/i18n": "^0.0.8",
|
|
24
|
-
"@stream-io/video-client": "^0.0.
|
|
25
|
-
"@stream-io/video-react-bindings": "^0.0.
|
|
24
|
+
"@stream-io/video-client": "^0.0.40",
|
|
25
|
+
"@stream-io/video-react-bindings": "^0.0.42"
|
|
26
26
|
},
|
|
27
27
|
"peerDependencies": {
|
|
28
28
|
"@notifee/react-native": ">=7.7.0",
|
|
@@ -84,5 +84,5 @@
|
|
|
84
84
|
"typedoc-plugin-markdown": "^3.15.3",
|
|
85
85
|
"typescript": "^4.9.5"
|
|
86
86
|
},
|
|
87
|
-
"version": "0.0.1-alpha.
|
|
87
|
+
"version": "0.0.1-alpha.258"
|
|
88
88
|
}
|
|
@@ -9,22 +9,23 @@ import {
|
|
|
9
9
|
} from 'react-native';
|
|
10
10
|
import { RTCView } from 'react-native-webrtc';
|
|
11
11
|
import {
|
|
12
|
+
CallingState,
|
|
12
13
|
SfuModels,
|
|
13
14
|
StreamVideoLocalParticipant,
|
|
14
15
|
StreamVideoParticipant,
|
|
15
16
|
VisibilityState,
|
|
16
17
|
} from '@stream-io/video-client';
|
|
17
|
-
import {
|
|
18
|
-
import { Avatar } from '../utility/Avatar';
|
|
19
|
-
import { MicOff, PinVertical, ScreenShare, VideoSlash } from '../../icons';
|
|
20
|
-
import { theme } from '../../theme';
|
|
21
|
-
import { palette } from '../../theme/constants';
|
|
22
|
-
import { ParticipantReaction } from './internal/ParticipantReaction';
|
|
23
|
-
import { useCall } from '@stream-io/video-react-bindings';
|
|
24
|
-
import { NetworkQualityIndicator } from './internal/NetworkQualityIndicator';
|
|
18
|
+
import { useCall, useCallCallingState } from '@stream-io/video-react-bindings';
|
|
25
19
|
import { Z_INDEX } from '../../constants';
|
|
26
20
|
import { A11yComponents } from '../../constants/A11yLabels';
|
|
21
|
+
import { MicOff, VideoSlash, PinVertical, ScreenShare } from '../../icons';
|
|
27
22
|
import { useMediaStreamManagement } from '../../providers/MediaStreamManagement';
|
|
23
|
+
import { theme } from '../../theme';
|
|
24
|
+
import { palette } from '../../theme/constants';
|
|
25
|
+
import { Avatar } from '../utility';
|
|
26
|
+
import { VideoRenderer } from '../utility/internal/VideoRenderer';
|
|
27
|
+
import { NetworkQualityIndicator } from './internal/NetworkQualityIndicator';
|
|
28
|
+
import { ParticipantReaction } from './internal/ParticipantReaction';
|
|
28
29
|
|
|
29
30
|
/**
|
|
30
31
|
* Props to be passed for the ParticipantView component.
|
|
@@ -65,6 +66,8 @@ export const ParticipantView = (props: ParticipantViewProps) => {
|
|
|
65
66
|
const { participant, kind, isVisible = true, disableAudio } = props;
|
|
66
67
|
|
|
67
68
|
const call = useCall();
|
|
69
|
+
const callingState = useCallCallingState();
|
|
70
|
+
const hasJoinedCall = callingState === CallingState.JOINED;
|
|
68
71
|
const pendingVideoLayoutRef = useRef<SfuModels.VideoDimension>();
|
|
69
72
|
const subscribedVideoLayoutRef = useRef<SfuModels.VideoDimension>();
|
|
70
73
|
const { isSpeaking, isLocalParticipant, publishedTracks } = participant;
|
|
@@ -111,15 +114,24 @@ export const ParticipantView = (props: ParticipantViewProps) => {
|
|
|
111
114
|
call,
|
|
112
115
|
]);
|
|
113
116
|
|
|
117
|
+
useEffect(() => {
|
|
118
|
+
if (!hasJoinedCall && subscribedVideoLayoutRef.current) {
|
|
119
|
+
// when call is joined again, we want to use the last subscribed dimension to resubscribe
|
|
120
|
+
pendingVideoLayoutRef.current = subscribedVideoLayoutRef.current;
|
|
121
|
+
subscribedVideoLayoutRef.current = undefined;
|
|
122
|
+
}
|
|
123
|
+
}, [hasJoinedCall]);
|
|
124
|
+
|
|
114
125
|
/**
|
|
115
126
|
* This effect updates the subscription either
|
|
116
127
|
* 1. when video tracks are published and was unpublished before
|
|
117
128
|
* 2. when the view's visibility changes
|
|
129
|
+
* 3. when call was rejoined
|
|
118
130
|
*/
|
|
119
131
|
useEffect(() => {
|
|
120
132
|
// NOTE: We only want to update the subscription if the pendingVideoLayoutRef is set
|
|
121
133
|
const updateIsNeeded = pendingVideoLayoutRef.current;
|
|
122
|
-
if (!updateIsNeeded || !call || !isPublishingVideoTrack) {
|
|
134
|
+
if (!updateIsNeeded || !call || !isPublishingVideoTrack || !hasJoinedCall) {
|
|
123
135
|
return;
|
|
124
136
|
}
|
|
125
137
|
|
|
@@ -135,7 +147,14 @@ export const ParticipantView = (props: ParticipantViewProps) => {
|
|
|
135
147
|
subscribedVideoLayoutRef.current = pendingVideoLayoutRef.current;
|
|
136
148
|
pendingVideoLayoutRef.current = undefined;
|
|
137
149
|
}
|
|
138
|
-
}, [
|
|
150
|
+
}, [
|
|
151
|
+
call,
|
|
152
|
+
isPublishingVideoTrack,
|
|
153
|
+
kind,
|
|
154
|
+
participant.sessionId,
|
|
155
|
+
isVisible,
|
|
156
|
+
hasJoinedCall,
|
|
157
|
+
]);
|
|
139
158
|
|
|
140
159
|
useEffect(() => {
|
|
141
160
|
return () => {
|
|
@@ -153,7 +172,7 @@ export const ParticipantView = (props: ParticipantViewProps) => {
|
|
|
153
172
|
// NOTE: If the participant hasn't published a video track yet,
|
|
154
173
|
// or the view is not viewable, we store the dimensions and handle it
|
|
155
174
|
// when the track is published or the video is enabled.
|
|
156
|
-
if (!call || !isPublishingVideoTrack || !isVisible) {
|
|
175
|
+
if (!call || !isPublishingVideoTrack || !isVisible || !hasJoinedCall) {
|
|
157
176
|
pendingVideoLayoutRef.current = dimension;
|
|
158
177
|
return;
|
|
159
178
|
}
|
|
@@ -1,8 +1,7 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { SfuModels } from '@stream-io/video-client';
|
|
2
2
|
import { useCall, useLocalParticipant } from '@stream-io/video-react-bindings';
|
|
3
|
-
import { useCallback,
|
|
3
|
+
import { useCallback, useRef } from 'react';
|
|
4
4
|
import { useAppStateListener } from '../utils/hooks/useAppStateListener';
|
|
5
|
-
import NetInfo from '@react-native-community/netinfo';
|
|
6
5
|
import { useMediaStreamManagement } from '../providers/MediaStreamManagement';
|
|
7
6
|
|
|
8
7
|
/**
|
|
@@ -17,7 +16,6 @@ export const useCallControls = () => {
|
|
|
17
16
|
/** Refs to keep track of the current call and whether the user is online or not */
|
|
18
17
|
const callRef = useRef(call);
|
|
19
18
|
callRef.current = call;
|
|
20
|
-
const isOnlineRef = useRef(true);
|
|
21
19
|
|
|
22
20
|
const {
|
|
23
21
|
publishAudioStream,
|
|
@@ -49,31 +47,6 @@ export const useCallControls = () => {
|
|
|
49
47
|
isVideoPublishedRef.current ? publishVideoStream : undefined,
|
|
50
48
|
);
|
|
51
49
|
|
|
52
|
-
/**
|
|
53
|
-
* Effect to re-join to an existing call happens in case the user comes back online
|
|
54
|
-
*/
|
|
55
|
-
useEffect(() => {
|
|
56
|
-
const unsubscribe = NetInfo.addEventListener(async (state) => {
|
|
57
|
-
const { isConnected, isInternetReachable } = state;
|
|
58
|
-
const isOnline = isConnected !== false && isInternetReachable !== false;
|
|
59
|
-
isOnlineRef.current = isOnline;
|
|
60
|
-
if (!callRef.current) {
|
|
61
|
-
return;
|
|
62
|
-
}
|
|
63
|
-
const callToJoin = callRef.current;
|
|
64
|
-
await rejoinCall(
|
|
65
|
-
callToJoin,
|
|
66
|
-
isOnline,
|
|
67
|
-
isAudioPublishedRef.current,
|
|
68
|
-
isVideoPublishedRef.current,
|
|
69
|
-
publishAudioStreamRef.current,
|
|
70
|
-
publishVideoStreamRef.current,
|
|
71
|
-
);
|
|
72
|
-
});
|
|
73
|
-
|
|
74
|
-
return unsubscribe;
|
|
75
|
-
}, []);
|
|
76
|
-
|
|
77
50
|
const toggleVideoMuted = useCallback(async () => {
|
|
78
51
|
if (!isVideoPublished) {
|
|
79
52
|
publishVideoStream();
|
|
@@ -97,34 +70,3 @@ export const useCallControls = () => {
|
|
|
97
70
|
toggleVideoMuted,
|
|
98
71
|
};
|
|
99
72
|
};
|
|
100
|
-
|
|
101
|
-
/**
|
|
102
|
-
* Helper function to rejoin a call and then publish the streams
|
|
103
|
-
*/
|
|
104
|
-
async function rejoinCall(
|
|
105
|
-
callToJoin: Call,
|
|
106
|
-
isOnline: boolean,
|
|
107
|
-
isAudioPublished: boolean,
|
|
108
|
-
isVideoPublished: boolean,
|
|
109
|
-
publishAudioStream: () => Promise<void>,
|
|
110
|
-
publishVideoStream: () => Promise<void>,
|
|
111
|
-
) {
|
|
112
|
-
const isCurrentStateOffline =
|
|
113
|
-
callToJoin.state.callingState === CallingState.OFFLINE;
|
|
114
|
-
if (!isOnline && !isCurrentStateOffline) {
|
|
115
|
-
callToJoin.state.setCallingState(CallingState.OFFLINE);
|
|
116
|
-
} else if (isOnline && isCurrentStateOffline && callToJoin.rejoin) {
|
|
117
|
-
try {
|
|
118
|
-
await callToJoin.rejoin();
|
|
119
|
-
if (isAudioPublished) {
|
|
120
|
-
await publishAudioStream();
|
|
121
|
-
}
|
|
122
|
-
if (isVideoPublished) {
|
|
123
|
-
await publishVideoStream();
|
|
124
|
-
}
|
|
125
|
-
} catch (e) {
|
|
126
|
-
console.error('Failed to rejoin', e);
|
|
127
|
-
callToJoin.state.setCallingState(CallingState.RECONNECTING_FAILED);
|
|
128
|
-
}
|
|
129
|
-
}
|
|
130
|
-
}
|
|
@@ -57,13 +57,25 @@ export const useAudioPublisher = ({
|
|
|
57
57
|
}
|
|
58
58
|
}, [call, audioDeviceId]);
|
|
59
59
|
|
|
60
|
+
// If the audio device id changes, we need to re-publish the audio stream
|
|
61
|
+
const lastAudioDeviceId = useRef(audioDeviceId);
|
|
62
|
+
useEffect(() => {
|
|
63
|
+
if (
|
|
64
|
+
callingState === CallingState.JOINED &&
|
|
65
|
+
audioDeviceId !== lastAudioDeviceId.current
|
|
66
|
+
) {
|
|
67
|
+
lastAudioDeviceId.current = audioDeviceId;
|
|
68
|
+
publishAudioStream().catch((e) => {
|
|
69
|
+
console.error('Failed to publish audio stream', e);
|
|
70
|
+
});
|
|
71
|
+
}
|
|
72
|
+
}, [audioDeviceId, callingState, publishAudioStream]);
|
|
73
|
+
|
|
60
74
|
const initialPublishRun = useRef(false);
|
|
61
75
|
|
|
62
76
|
/*
|
|
63
|
-
* When joining the call, publish video stream automatically in the following
|
|
64
|
-
*
|
|
65
|
-
* 2. reconnecting to the call with the video already published
|
|
66
|
-
* 3. when the video device is changed (this is handled by the dependency to publishVideoStream function)
|
|
77
|
+
* When joining the call, publish video stream automatically in the following case:
|
|
78
|
+
* - joining the call from the lobby, and the video is not muted
|
|
67
79
|
*/
|
|
68
80
|
useEffect(() => {
|
|
69
81
|
if (callingState !== CallingState.JOINED) {
|
|
@@ -71,18 +83,14 @@ export const useAudioPublisher = ({
|
|
|
71
83
|
}
|
|
72
84
|
const shouldJoinInitially =
|
|
73
85
|
!initialAudioMuted && !initialPublishRun.current;
|
|
74
|
-
|
|
75
|
-
// if we are not joining the call from the lobby or equivalent view,
|
|
76
|
-
// and we are not reconnecting to the call,
|
|
77
|
-
// then do not publish the audio stream
|
|
78
|
-
if (!shouldJoinInitially && !shouldRejoin) {
|
|
86
|
+
if (!shouldJoinInitially) {
|
|
79
87
|
return;
|
|
80
88
|
}
|
|
81
89
|
publishAudioStream().catch((e) => {
|
|
82
90
|
console.error('Failed to publish audio stream', e);
|
|
83
91
|
});
|
|
84
92
|
initialPublishRun.current = true;
|
|
85
|
-
}, [callingState, initialAudioMuted,
|
|
93
|
+
}, [callingState, initialAudioMuted, publishAudioStream]);
|
|
86
94
|
|
|
87
95
|
/*
|
|
88
96
|
* When track ended unexpectedly due to unknown external factors, try to publish the video stream again
|
|
@@ -57,13 +57,24 @@ export const useVideoPublisher = ({
|
|
|
57
57
|
}
|
|
58
58
|
}, [call, videoDeviceId]);
|
|
59
59
|
|
|
60
|
+
const lastVideoDeviceId = useRef(videoDeviceId);
|
|
61
|
+
useEffect(() => {
|
|
62
|
+
if (
|
|
63
|
+
callingState === CallingState.JOINED &&
|
|
64
|
+
videoDeviceId !== lastVideoDeviceId.current
|
|
65
|
+
) {
|
|
66
|
+
lastVideoDeviceId.current = videoDeviceId;
|
|
67
|
+
publishVideoStream().catch((e) => {
|
|
68
|
+
console.error('Failed to publish video stream', e);
|
|
69
|
+
});
|
|
70
|
+
}
|
|
71
|
+
}, [callingState, publishVideoStream, videoDeviceId]);
|
|
72
|
+
|
|
60
73
|
const initialPublishRun = useRef(false);
|
|
61
74
|
|
|
62
75
|
/*
|
|
63
|
-
* When joining the call, publish video stream automatically in the following
|
|
64
|
-
*
|
|
65
|
-
* 2. reconnecting to the call with the video already published
|
|
66
|
-
* 3. when the video device is changed (this is handled by the dependency to publishVideoStream function)
|
|
76
|
+
* When joining the call, publish video stream automatically in the following case:
|
|
77
|
+
* - joining the call from the lobby, and the video is not muted
|
|
67
78
|
*/
|
|
68
79
|
useEffect(() => {
|
|
69
80
|
if (callingState !== CallingState.JOINED) {
|
|
@@ -71,18 +82,14 @@ export const useVideoPublisher = ({
|
|
|
71
82
|
}
|
|
72
83
|
const shouldJoinInitially =
|
|
73
84
|
!initialVideoMuted && !initialPublishRun.current;
|
|
74
|
-
|
|
75
|
-
// if we are not joining the call from the lobby or equivalent view,
|
|
76
|
-
// and we are not reconnecting to the call,
|
|
77
|
-
// then do not publish the video stream
|
|
78
|
-
if (!shouldJoinInitially && !shouldRejoin) {
|
|
85
|
+
if (!shouldJoinInitially) {
|
|
79
86
|
return;
|
|
80
87
|
}
|
|
81
88
|
publishVideoStream().catch((e) => {
|
|
82
89
|
console.error('Failed to publish video stream', e);
|
|
83
90
|
});
|
|
84
91
|
initialPublishRun.current = true;
|
|
85
|
-
}, [callingState, initialVideoMuted,
|
|
92
|
+
}, [callingState, initialVideoMuted, publishVideoStream]);
|
|
86
93
|
|
|
87
94
|
/*
|
|
88
95
|
* When track ended unexpectedly due to unknown external factors, try to publish the video stream again
|
|
@@ -23,9 +23,14 @@ export const StreamVideo = (props: PropsWithChildren<StreamVideoProps>) => {
|
|
|
23
23
|
* Effect to inform the coordinator about the online status of the app
|
|
24
24
|
*/
|
|
25
25
|
useEffect(() => {
|
|
26
|
+
let prevIsOnline = true;
|
|
26
27
|
const unsubscribe = NetInfo.addEventListener((state) => {
|
|
27
28
|
const { isConnected, isInternetReachable } = state;
|
|
28
|
-
const isOnline = isConnected
|
|
29
|
+
const isOnline = isConnected === true && isInternetReachable !== false;
|
|
30
|
+
if (isOnline === prevIsOnline) {
|
|
31
|
+
return;
|
|
32
|
+
}
|
|
33
|
+
prevIsOnline = isOnline;
|
|
29
34
|
// @ts-expect-error - due to being incompatible with DOM event type
|
|
30
35
|
client.streamClient.wsConnection?.onlineStatusChanged({
|
|
31
36
|
type: isOnline ? 'online' : 'offline',
|