@tellescope/react-components 1.246.2 → 1.247.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/lib/cjs/TwilioVideo/TwilioControls.d.ts +2 -0
- package/lib/cjs/TwilioVideo/TwilioControls.d.ts.map +1 -1
- package/lib/cjs/TwilioVideo/TwilioControls.js +14 -3
- package/lib/cjs/TwilioVideo/TwilioControls.js.map +1 -1
- package/lib/cjs/TwilioVideo/TwilioParticipant.d.ts +2 -0
- package/lib/cjs/TwilioVideo/TwilioParticipant.d.ts.map +1 -1
- package/lib/cjs/TwilioVideo/TwilioParticipant.js +52 -21
- package/lib/cjs/TwilioVideo/TwilioParticipant.js.map +1 -1
- package/lib/cjs/TwilioVideo/TwilioVideoContext.d.ts +5 -0
- package/lib/cjs/TwilioVideo/TwilioVideoContext.d.ts.map +1 -1
- package/lib/cjs/TwilioVideo/TwilioVideoContext.js +107 -5
- package/lib/cjs/TwilioVideo/TwilioVideoContext.js.map +1 -1
- package/lib/cjs/TwilioVideo/TwilioVideoRoom.d.ts +2 -0
- package/lib/cjs/TwilioVideo/TwilioVideoRoom.d.ts.map +1 -1
- package/lib/cjs/TwilioVideo/TwilioVideoRoom.js +49 -3
- package/lib/cjs/TwilioVideo/TwilioVideoRoom.js.map +1 -1
- package/lib/cjs/TwilioVideo/index.d.ts +1 -1
- package/lib/cjs/TwilioVideo/index.d.ts.map +1 -1
- package/lib/cjs/TwilioVideo/index.js +2 -1
- package/lib/cjs/TwilioVideo/index.js.map +1 -1
- package/lib/esm/TwilioVideo/TwilioControls.d.ts +2 -0
- package/lib/esm/TwilioVideo/TwilioControls.d.ts.map +1 -1
- package/lib/esm/TwilioVideo/TwilioControls.js +15 -4
- package/lib/esm/TwilioVideo/TwilioControls.js.map +1 -1
- package/lib/esm/TwilioVideo/TwilioParticipant.d.ts +2 -0
- package/lib/esm/TwilioVideo/TwilioParticipant.d.ts.map +1 -1
- package/lib/esm/TwilioVideo/TwilioParticipant.js +52 -21
- package/lib/esm/TwilioVideo/TwilioParticipant.js.map +1 -1
- package/lib/esm/TwilioVideo/TwilioVideoContext.d.ts +5 -0
- package/lib/esm/TwilioVideo/TwilioVideoContext.d.ts.map +1 -1
- package/lib/esm/TwilioVideo/TwilioVideoContext.js +83 -1
- package/lib/esm/TwilioVideo/TwilioVideoContext.js.map +1 -1
- package/lib/esm/TwilioVideo/TwilioVideoRoom.d.ts +2 -0
- package/lib/esm/TwilioVideo/TwilioVideoRoom.d.ts.map +1 -1
- package/lib/esm/TwilioVideo/TwilioVideoRoom.js +49 -3
- package/lib/esm/TwilioVideo/TwilioVideoRoom.js.map +1 -1
- package/lib/esm/TwilioVideo/index.d.ts +1 -1
- package/lib/esm/TwilioVideo/index.d.ts.map +1 -1
- package/lib/esm/TwilioVideo/index.js +1 -1
- package/lib/esm/TwilioVideo/index.js.map +1 -1
- package/lib/tsconfig.tsbuildinfo +1 -1
- package/package.json +9 -9
- package/src/TwilioVideo/TwilioControls.tsx +30 -0
- package/src/TwilioVideo/TwilioParticipant.tsx +51 -17
- package/src/TwilioVideo/TwilioVideoContext.tsx +78 -0
- package/src/TwilioVideo/TwilioVideoRoom.tsx +92 -2
- package/src/TwilioVideo/index.ts +1 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TwilioControls.d.ts","sourceRoot":"","sources":["../../../src/TwilioVideo/TwilioControls.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;
|
|
1
|
+
{"version":3,"file":"TwilioControls.d.ts","sourceRoot":"","sources":["../../../src/TwilioVideo/TwilioControls.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAazB,MAAM,WAAW,qBAAqB;IACpC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAA;IACxB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;IAC3B,iEAAiE;IACjE,eAAe,CAAC,EAAE,OAAO,CAAA;CAC1B;AAED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAsH5D,CAAA"}
|
|
@@ -11,11 +11,11 @@ var __assign = (this && this.__assign) || function () {
|
|
|
11
11
|
};
|
|
12
12
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
13
13
|
import { Box, IconButton, Button } from '@mui/material';
|
|
14
|
-
import { Mic as MicIcon, MicOff as MicOffIcon, Videocam as VideocamIcon, VideocamOff as VideocamOffIcon, CallEnd as CallEndIcon, } from '@mui/icons-material';
|
|
14
|
+
import { Mic as MicIcon, MicOff as MicOffIcon, Videocam as VideocamIcon, VideocamOff as VideocamOffIcon, CallEnd as CallEndIcon, ScreenShare as ScreenShareIcon, StopScreenShare as StopScreenShareIcon, } from '@mui/icons-material';
|
|
15
15
|
import { useTwilioVideo } from './TwilioVideoContext';
|
|
16
16
|
export var TwilioControlBar = function (_a) {
|
|
17
|
-
var onLeave = _a.onLeave, onEndForAll = _a.onEndForAll, style = _a.style;
|
|
18
|
-
var
|
|
17
|
+
var onLeave = _a.onLeave, onEndForAll = _a.onEndForAll, style = _a.style, _b = _a.showScreenShare, showScreenShareProp = _b === void 0 ? true : _b;
|
|
18
|
+
var _c = useTwilioVideo(), isVideoEnabled = _c.isVideoEnabled, isAudioEnabled = _c.isAudioEnabled, isScreenSharing = _c.isScreenSharing, toggleVideo = _c.toggleVideo, toggleAudio = _c.toggleAudio, toggleScreenShare = _c.toggleScreenShare, disconnect = _c.disconnect, isHost = _c.isHost, room = _c.room;
|
|
19
19
|
var handleLeave = function () {
|
|
20
20
|
disconnect();
|
|
21
21
|
onLeave === null || onLeave === void 0 ? void 0 : onLeave();
|
|
@@ -24,6 +24,9 @@ export var TwilioControlBar = function (_a) {
|
|
|
24
24
|
onEndForAll === null || onEndForAll === void 0 ? void 0 : onEndForAll();
|
|
25
25
|
disconnect();
|
|
26
26
|
};
|
|
27
|
+
var supportsScreenShare = typeof navigator !== 'undefined'
|
|
28
|
+
&& navigator.mediaDevices
|
|
29
|
+
&& typeof navigator.mediaDevices.getDisplayMedia === 'function';
|
|
27
30
|
return (_jsxs(Box, __assign({ sx: __assign({ display: 'flex', justifyContent: 'center', alignItems: 'center', gap: 2, backgroundColor: '#1a1a1a', padding: '12px 24px' }, style) }, { children: [_jsx(IconButton, __assign({ onClick: toggleAudio, sx: {
|
|
28
31
|
color: isAudioEnabled ? 'white' : '#ff4444',
|
|
29
32
|
'&:hover': {
|
|
@@ -34,7 +37,15 @@ export var TwilioControlBar = function (_a) {
|
|
|
34
37
|
'&:hover': {
|
|
35
38
|
backgroundColor: 'rgba(255,255,255,0.1)',
|
|
36
39
|
},
|
|
37
|
-
} }, { children: isVideoEnabled ? _jsx(VideocamIcon, {}) : _jsx(VideocamOffIcon, {}) })), _jsx(IconButton, __assign({ onClick:
|
|
40
|
+
} }, { children: isVideoEnabled ? _jsx(VideocamIcon, {}) : _jsx(VideocamOffIcon, {}) })), showScreenShareProp && supportsScreenShare && (_jsx(IconButton, __assign({ onClick: toggleScreenShare, disabled: !room, sx: {
|
|
41
|
+
color: isScreenSharing ? '#4caf50' : 'white',
|
|
42
|
+
'&:hover': {
|
|
43
|
+
backgroundColor: 'rgba(255,255,255,0.1)',
|
|
44
|
+
},
|
|
45
|
+
'&.Mui-disabled': {
|
|
46
|
+
color: 'rgba(255,255,255,0.3)',
|
|
47
|
+
},
|
|
48
|
+
} }, { children: isScreenSharing ? _jsx(StopScreenShareIcon, {}) : _jsx(ScreenShareIcon, {}) }))), _jsx(IconButton, __assign({ onClick: handleLeave, sx: {
|
|
38
49
|
backgroundColor: '#ff4444',
|
|
39
50
|
color: 'white',
|
|
40
51
|
'&:hover': {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TwilioControls.js","sourceRoot":"","sources":["../../../src/TwilioVideo/TwilioControls.tsx"],"names":[],"mappings":";;;;;;;;;;;;AACA,OAAO,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,eAAe,CAAA;AACvD,OAAO,EACL,GAAG,IAAI,OAAO,EACd,MAAM,IAAI,UAAU,EACpB,QAAQ,IAAI,YAAY,EACxB,WAAW,IAAI,eAAe,EAC9B,OAAO,IAAI,WAAW,
|
|
1
|
+
{"version":3,"file":"TwilioControls.js","sourceRoot":"","sources":["../../../src/TwilioVideo/TwilioControls.tsx"],"names":[],"mappings":"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"}
|
|
@@ -6,6 +6,8 @@ export interface TwilioParticipantProps {
|
|
|
6
6
|
style?: React.CSSProperties;
|
|
7
7
|
/** Resolve participant identity to a display label. Defaults to empty string. */
|
|
8
8
|
resolveIdentity?: (identity: string) => string;
|
|
9
|
+
/** When true, render the screen share track instead of the camera track */
|
|
10
|
+
showScreenShare?: boolean;
|
|
9
11
|
}
|
|
10
12
|
export declare const TwilioParticipant: React.FC<TwilioParticipantProps>;
|
|
11
13
|
//# sourceMappingURL=TwilioParticipant.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TwilioParticipant.d.ts","sourceRoot":"","sources":["../../../src/TwilioVideo/TwilioParticipant.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAA;AAC1D,OAAO,EACL,iBAAiB,EACjB,gBAAgB,EAKjB,MAAM,cAAc,CAAA;
|
|
1
|
+
{"version":3,"file":"TwilioParticipant.d.ts","sourceRoot":"","sources":["../../../src/TwilioVideo/TwilioParticipant.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAA;AAC1D,OAAO,EACL,iBAAiB,EACjB,gBAAgB,EAKjB,MAAM,cAAc,CAAA;AAIrB,MAAM,WAAW,sBAAsB;IACrC,WAAW,EAAE,iBAAiB,GAAG,gBAAgB,CAAA;IACjD,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;IAC3B,iFAAiF;IACjF,eAAe,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,MAAM,CAAA;IAC9C,2EAA2E;IAC3E,eAAe,CAAC,EAAE,OAAO,CAAA;CAC1B;AAED,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAmJ9D,CAAA"}
|
|
@@ -12,16 +12,23 @@ var __assign = (this && this.__assign) || function () {
|
|
|
12
12
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
13
13
|
import { useEffect, useRef, useState } from 'react';
|
|
14
14
|
import { Box, Typography } from '@mui/material';
|
|
15
|
+
import { SCREEN_SHARE_TRACK_NAME } from './TwilioVideoContext';
|
|
15
16
|
export var TwilioParticipant = function (_a) {
|
|
16
|
-
var participant = _a.participant, _b = _a.isLocal, isLocal = _b === void 0 ? false : _b, style = _a.style, _c = _a.resolveIdentity, resolveIdentity = _c === void 0 ? function () { return ''; } : _c;
|
|
17
|
+
var participant = _a.participant, _b = _a.isLocal, isLocal = _b === void 0 ? false : _b, style = _a.style, _c = _a.resolveIdentity, resolveIdentity = _c === void 0 ? function () { return ''; } : _c, _d = _a.showScreenShare, showScreenShare = _d === void 0 ? false : _d;
|
|
17
18
|
var videoRef = useRef(null);
|
|
18
19
|
var audioRef = useRef(null);
|
|
19
|
-
var
|
|
20
|
-
var
|
|
20
|
+
var _e = useState(null), cameraTrack = _e[0], setCameraTrack = _e[1];
|
|
21
|
+
var _f = useState(null), screenTrack = _f[0], setScreenTrack = _f[1];
|
|
22
|
+
var _g = useState(null), audioTrack = _g[0], setAudioTrack = _g[1];
|
|
21
23
|
useEffect(function () {
|
|
22
24
|
var handleTrackSubscribed = function (track) {
|
|
23
25
|
if (track.kind === 'video') {
|
|
24
|
-
|
|
26
|
+
if (track.name === SCREEN_SHARE_TRACK_NAME) {
|
|
27
|
+
setScreenTrack(track);
|
|
28
|
+
}
|
|
29
|
+
else {
|
|
30
|
+
setCameraTrack(track);
|
|
31
|
+
}
|
|
25
32
|
}
|
|
26
33
|
else if (track.kind === 'audio') {
|
|
27
34
|
setAudioTrack(track);
|
|
@@ -29,7 +36,12 @@ export var TwilioParticipant = function (_a) {
|
|
|
29
36
|
};
|
|
30
37
|
var handleTrackUnsubscribed = function (track) {
|
|
31
38
|
if (track.kind === 'video') {
|
|
32
|
-
|
|
39
|
+
if (track.name === SCREEN_SHARE_TRACK_NAME) {
|
|
40
|
+
setScreenTrack(null);
|
|
41
|
+
}
|
|
42
|
+
else {
|
|
43
|
+
setCameraTrack(null);
|
|
44
|
+
}
|
|
33
45
|
}
|
|
34
46
|
else if (track.kind === 'audio') {
|
|
35
47
|
setAudioTrack(null);
|
|
@@ -41,41 +53,60 @@ export var TwilioParticipant = function (_a) {
|
|
|
41
53
|
handleTrackSubscribed(publication.track);
|
|
42
54
|
}
|
|
43
55
|
});
|
|
44
|
-
|
|
45
|
-
|
|
56
|
+
if (isLocal) {
|
|
57
|
+
// For local participants, listen for track publications (trackSubscribed doesn't fire for local)
|
|
58
|
+
var handleTrackPublished_1 = function (publication) {
|
|
59
|
+
if (publication.track) {
|
|
60
|
+
handleTrackSubscribed(publication.track);
|
|
61
|
+
}
|
|
62
|
+
};
|
|
63
|
+
var handleTrackStopped_1 = function (track) {
|
|
64
|
+
handleTrackUnsubscribed(track);
|
|
65
|
+
};
|
|
66
|
+
participant.on('trackPublished', handleTrackPublished_1);
|
|
67
|
+
participant.on('trackStopped', handleTrackStopped_1);
|
|
68
|
+
return function () {
|
|
69
|
+
participant.off('trackPublished', handleTrackPublished_1);
|
|
70
|
+
participant.off('trackStopped', handleTrackStopped_1);
|
|
71
|
+
};
|
|
72
|
+
}
|
|
73
|
+
else {
|
|
74
|
+
// For remote participants, listen for track subscriptions
|
|
46
75
|
participant.on('trackSubscribed', handleTrackSubscribed);
|
|
47
76
|
participant.on('trackUnsubscribed', handleTrackUnsubscribed);
|
|
48
|
-
|
|
49
|
-
return function () {
|
|
50
|
-
if ('off' in participant) {
|
|
77
|
+
return function () {
|
|
51
78
|
participant.off('trackSubscribed', handleTrackSubscribed);
|
|
52
79
|
participant.off('trackUnsubscribed', handleTrackUnsubscribed);
|
|
53
|
-
}
|
|
54
|
-
}
|
|
55
|
-
}, [participant]);
|
|
80
|
+
};
|
|
81
|
+
}
|
|
82
|
+
}, [participant, isLocal]);
|
|
83
|
+
var activeVideoTrack = showScreenShare ? screenTrack : cameraTrack;
|
|
56
84
|
// Attach video track
|
|
57
85
|
useEffect(function () {
|
|
58
|
-
if (
|
|
59
|
-
|
|
86
|
+
if (activeVideoTrack && videoRef.current) {
|
|
87
|
+
var el_1 = videoRef.current;
|
|
88
|
+
activeVideoTrack.attach(el_1);
|
|
60
89
|
return function () {
|
|
61
|
-
|
|
90
|
+
activeVideoTrack.detach(el_1);
|
|
62
91
|
};
|
|
63
92
|
}
|
|
64
|
-
}, [
|
|
93
|
+
}, [activeVideoTrack]);
|
|
65
94
|
// Attach audio track (not for local participant to avoid echo)
|
|
66
95
|
useEffect(function () {
|
|
67
96
|
if (audioTrack && audioRef.current && !isLocal) {
|
|
68
|
-
|
|
97
|
+
var el_2 = audioRef.current;
|
|
98
|
+
audioTrack.attach(el_2);
|
|
69
99
|
return function () {
|
|
70
|
-
audioTrack.detach();
|
|
100
|
+
audioTrack.detach(el_2);
|
|
71
101
|
};
|
|
72
102
|
}
|
|
73
103
|
}, [audioTrack, isLocal]);
|
|
104
|
+
var shouldMirror = isLocal && !showScreenShare;
|
|
74
105
|
return (_jsxs(Box, __assign({ sx: __assign({ position: 'relative', width: '100%', height: '100%', backgroundColor: '#1a1a1a', borderRadius: 1, overflow: 'hidden' }, style) }, { children: [_jsx("video", { ref: videoRef, autoPlay: true, muted: isLocal, playsInline: true, style: {
|
|
75
106
|
width: '100%',
|
|
76
107
|
height: '100%',
|
|
77
|
-
objectFit: 'cover',
|
|
78
|
-
transform:
|
|
108
|
+
objectFit: showScreenShare ? 'contain' : 'cover',
|
|
109
|
+
transform: shouldMirror ? 'scaleX(-1)' : 'none',
|
|
79
110
|
} }), !isLocal && _jsx("audio", { ref: audioRef, autoPlay: true }), (function () {
|
|
80
111
|
var label = resolveIdentity(participant.identity);
|
|
81
112
|
if (!label && !isLocal)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TwilioParticipant.js","sourceRoot":"","sources":["../../../src/TwilioVideo/TwilioParticipant.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAc,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAS1D,OAAO,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;
|
|
1
|
+
{"version":3,"file":"TwilioParticipant.js","sourceRoot":"","sources":["../../../src/TwilioVideo/TwilioParticipant.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,11 +1,15 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { Room, LocalVideoTrack, LocalAudioTrack, RemoteParticipant } from 'twilio-video';
|
|
3
|
+
export declare const SCREEN_SHARE_TRACK_NAME = "screen-share";
|
|
3
4
|
export interface TwilioVideoState {
|
|
4
5
|
room: Room | null;
|
|
5
6
|
isConnecting: boolean;
|
|
6
7
|
isConnected: boolean;
|
|
7
8
|
localVideoTrack: LocalVideoTrack | null;
|
|
8
9
|
localAudioTrack: LocalAudioTrack | null;
|
|
10
|
+
localScreenTrack: LocalVideoTrack | null;
|
|
11
|
+
isScreenSharing: boolean;
|
|
12
|
+
screenSharingParticipantSid: string | null;
|
|
9
13
|
participants: RemoteParticipant[];
|
|
10
14
|
error: Error | null;
|
|
11
15
|
isHost: boolean;
|
|
@@ -17,6 +21,7 @@ export interface TwilioVideoActions {
|
|
|
17
21
|
disconnect: () => void;
|
|
18
22
|
toggleVideo: () => Promise<void>;
|
|
19
23
|
toggleAudio: () => void;
|
|
24
|
+
toggleScreenShare: () => Promise<void>;
|
|
20
25
|
setIsHost: (isHost: boolean) => void;
|
|
21
26
|
}
|
|
22
27
|
export type TwilioVideoContextType = TwilioVideoState & TwilioVideoActions;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TwilioVideoContext.d.ts","sourceRoot":"","sources":["../../../src/TwilioVideo/TwilioVideoContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8E,MAAM,OAAO,CAAA;AAClG,OAAc,EACZ,IAAI,EACJ,eAAe,EACf,eAAe,EACf,iBAAiB,EAIlB,MAAM,cAAc,CAAA;AAErB,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,IAAI,GAAG,IAAI,CAAA;IACjB,YAAY,EAAE,OAAO,CAAA;IACrB,WAAW,EAAE,OAAO,CAAA;IACpB,eAAe,EAAE,eAAe,GAAG,IAAI,CAAA;IACvC,eAAe,EAAE,eAAe,GAAG,IAAI,CAAA;IACvC,YAAY,EAAE,iBAAiB,EAAE,CAAA;IACjC,KAAK,EAAE,KAAK,GAAG,IAAI,CAAA;IACnB,MAAM,EAAE,OAAO,CAAA;IACf,cAAc,EAAE,OAAO,CAAA;IACvB,cAAc,EAAE,OAAO,CAAA;CACxB;AAED,MAAM,WAAW,kBAAkB;IACjC,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAA;IAC3D,UAAU,EAAE,MAAM,IAAI,CAAA;IACtB,WAAW,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAA;IAChC,WAAW,EAAE,MAAM,IAAI,CAAA;IACvB,SAAS,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAA;CACrC;AAED,MAAM,MAAM,sBAAsB,GAAG,gBAAgB,GAAG,kBAAkB,CAAA;AAI1E,eAAO,MAAM,cAAc,QAAO,sBAMjC,CAAA;AAED,MAAM,WAAW,wBAAwB;IACvC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B;AAED,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,wBAAwB,
|
|
1
|
+
{"version":3,"file":"TwilioVideoContext.d.ts","sourceRoot":"","sources":["../../../src/TwilioVideo/TwilioVideoContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8E,MAAM,OAAO,CAAA;AAClG,OAAc,EACZ,IAAI,EACJ,eAAe,EACf,eAAe,EACf,iBAAiB,EAIlB,MAAM,cAAc,CAAA;AAErB,eAAO,MAAM,uBAAuB,iBAAiB,CAAA;AAErD,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,IAAI,GAAG,IAAI,CAAA;IACjB,YAAY,EAAE,OAAO,CAAA;IACrB,WAAW,EAAE,OAAO,CAAA;IACpB,eAAe,EAAE,eAAe,GAAG,IAAI,CAAA;IACvC,eAAe,EAAE,eAAe,GAAG,IAAI,CAAA;IACvC,gBAAgB,EAAE,eAAe,GAAG,IAAI,CAAA;IACxC,eAAe,EAAE,OAAO,CAAA;IACxB,2BAA2B,EAAE,MAAM,GAAG,IAAI,CAAA;IAC1C,YAAY,EAAE,iBAAiB,EAAE,CAAA;IACjC,KAAK,EAAE,KAAK,GAAG,IAAI,CAAA;IACnB,MAAM,EAAE,OAAO,CAAA;IACf,cAAc,EAAE,OAAO,CAAA;IACvB,cAAc,EAAE,OAAO,CAAA;CACxB;AAED,MAAM,WAAW,kBAAkB;IACjC,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAA;IAC3D,UAAU,EAAE,MAAM,IAAI,CAAA;IACtB,WAAW,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAA;IAChC,WAAW,EAAE,MAAM,IAAI,CAAA;IACvB,iBAAiB,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAA;IACtC,SAAS,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAA;CACrC;AAED,MAAM,MAAM,sBAAsB,GAAG,gBAAgB,GAAG,kBAAkB,CAAA;AAI1E,eAAO,MAAM,cAAc,QAAO,sBAMjC,CAAA;AAED,MAAM,WAAW,wBAAwB;IACvC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B;AAED,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,wBAAwB,CA6NlE,CAAA"}
|
|
@@ -56,7 +56,8 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
|
|
|
56
56
|
};
|
|
57
57
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
58
58
|
import { createContext, useContext, useState, useCallback, useEffect, useRef } from 'react';
|
|
59
|
-
import Video from 'twilio-video';
|
|
59
|
+
import Video, { LocalVideoTrack, } from 'twilio-video';
|
|
60
|
+
export var SCREEN_SHARE_TRACK_NAME = 'screen-share';
|
|
60
61
|
var TwilioVideoContext = createContext(null);
|
|
61
62
|
export var useTwilioVideo = function () {
|
|
62
63
|
var context = useContext(TwilioVideoContext);
|
|
@@ -76,6 +77,9 @@ export var TwilioVideoProvider = function (_a) {
|
|
|
76
77
|
var _h = useState(false), isHost = _h[0], setIsHost = _h[1];
|
|
77
78
|
var _j = useState(true), isVideoEnabled = _j[0], setIsVideoEnabled = _j[1];
|
|
78
79
|
var _k = useState(true), isAudioEnabled = _k[0], setIsAudioEnabled = _k[1];
|
|
80
|
+
var _l = useState(null), localScreenTrack = _l[0], setLocalScreenTrack = _l[1];
|
|
81
|
+
var _m = useState(false), isScreenSharing = _m[0], setIsScreenSharing = _m[1];
|
|
82
|
+
var _o = useState(null), screenSharingParticipantSid = _o[0], setScreenSharingParticipantSid = _o[1];
|
|
79
83
|
var localTracksRef = useRef([]);
|
|
80
84
|
var connect = useCallback(function (token, roomName) { return __awaiter(void 0, void 0, void 0, function () {
|
|
81
85
|
var tracks, videoTrack, audioTrack, newRoom, existingParticipants, err_1;
|
|
@@ -118,6 +122,17 @@ export var TwilioVideoProvider = function (_a) {
|
|
|
118
122
|
newRoom.on('participantDisconnected', function (participant) {
|
|
119
123
|
setParticipants(function (prev) { return prev.filter(function (p) { return p.sid !== participant.sid; }); });
|
|
120
124
|
});
|
|
125
|
+
// Track remote screen sharing for React re-renders
|
|
126
|
+
newRoom.on('trackSubscribed', function (track, publication, participant) {
|
|
127
|
+
if (track.kind === 'video' && track.name === SCREEN_SHARE_TRACK_NAME) {
|
|
128
|
+
setScreenSharingParticipantSid(participant.sid);
|
|
129
|
+
}
|
|
130
|
+
});
|
|
131
|
+
newRoom.on('trackUnsubscribed', function (track, publication, participant) {
|
|
132
|
+
if (track.kind === 'video' && track.name === SCREEN_SHARE_TRACK_NAME) {
|
|
133
|
+
setScreenSharingParticipantSid(null);
|
|
134
|
+
}
|
|
135
|
+
});
|
|
121
136
|
newRoom.on('disconnected', function () {
|
|
122
137
|
// Stop all local tracks when disconnected
|
|
123
138
|
localTracksRef.current.forEach(function (track) {
|
|
@@ -127,6 +142,9 @@ export var TwilioVideoProvider = function (_a) {
|
|
|
127
142
|
setRoom(null);
|
|
128
143
|
setLocalVideoTrack(null);
|
|
129
144
|
setLocalAudioTrack(null);
|
|
145
|
+
setLocalScreenTrack(null);
|
|
146
|
+
setIsScreenSharing(false);
|
|
147
|
+
setScreenSharingParticipantSid(null);
|
|
130
148
|
setParticipants([]);
|
|
131
149
|
});
|
|
132
150
|
return [3 /*break*/, 6];
|
|
@@ -154,6 +172,9 @@ export var TwilioVideoProvider = function (_a) {
|
|
|
154
172
|
setRoom(null);
|
|
155
173
|
setLocalVideoTrack(null);
|
|
156
174
|
setLocalAudioTrack(null);
|
|
175
|
+
setLocalScreenTrack(null);
|
|
176
|
+
setIsScreenSharing(false);
|
|
177
|
+
setScreenSharingParticipantSid(null);
|
|
157
178
|
setParticipants([]);
|
|
158
179
|
}, [room]);
|
|
159
180
|
var toggleVideo = useCallback(function () { return __awaiter(void 0, void 0, void 0, function () {
|
|
@@ -181,6 +202,63 @@ export var TwilioVideoProvider = function (_a) {
|
|
|
181
202
|
setIsAudioEnabled(!isAudioEnabled);
|
|
182
203
|
}
|
|
183
204
|
}, [localAudioTrack, isAudioEnabled]);
|
|
205
|
+
var stopScreenShare = useCallback(function () {
|
|
206
|
+
if (localScreenTrack) {
|
|
207
|
+
if (room) {
|
|
208
|
+
room.localParticipant.unpublishTrack(localScreenTrack);
|
|
209
|
+
}
|
|
210
|
+
localScreenTrack.stop();
|
|
211
|
+
localTracksRef.current = localTracksRef.current.filter(function (t) { return t !== localScreenTrack; });
|
|
212
|
+
setLocalScreenTrack(null);
|
|
213
|
+
setIsScreenSharing(false);
|
|
214
|
+
}
|
|
215
|
+
}, [localScreenTrack, room]);
|
|
216
|
+
var toggleScreenShare = useCallback(function () { return __awaiter(void 0, void 0, void 0, function () {
|
|
217
|
+
var stream, mediaStreamTrack, screenTrack_1, err_2;
|
|
218
|
+
return __generator(this, function (_a) {
|
|
219
|
+
switch (_a.label) {
|
|
220
|
+
case 0:
|
|
221
|
+
if (isScreenSharing) {
|
|
222
|
+
stopScreenShare();
|
|
223
|
+
return [2 /*return*/];
|
|
224
|
+
}
|
|
225
|
+
_a.label = 1;
|
|
226
|
+
case 1:
|
|
227
|
+
_a.trys.push([1, 5, , 6]);
|
|
228
|
+
return [4 /*yield*/, navigator.mediaDevices.getDisplayMedia({ video: true })];
|
|
229
|
+
case 2:
|
|
230
|
+
stream = _a.sent();
|
|
231
|
+
mediaStreamTrack = stream.getVideoTracks()[0];
|
|
232
|
+
screenTrack_1 = new LocalVideoTrack(mediaStreamTrack, { name: SCREEN_SHARE_TRACK_NAME });
|
|
233
|
+
if (!room) return [3 /*break*/, 4];
|
|
234
|
+
return [4 /*yield*/, room.localParticipant.publishTrack(screenTrack_1)];
|
|
235
|
+
case 3:
|
|
236
|
+
_a.sent();
|
|
237
|
+
_a.label = 4;
|
|
238
|
+
case 4:
|
|
239
|
+
localTracksRef.current.push(screenTrack_1);
|
|
240
|
+
setLocalScreenTrack(screenTrack_1);
|
|
241
|
+
setIsScreenSharing(true);
|
|
242
|
+
// Handle browser "Stop sharing" button
|
|
243
|
+
mediaStreamTrack.onended = function () {
|
|
244
|
+
if (room) {
|
|
245
|
+
room.localParticipant.unpublishTrack(screenTrack_1);
|
|
246
|
+
}
|
|
247
|
+
screenTrack_1.stop();
|
|
248
|
+
localTracksRef.current = localTracksRef.current.filter(function (t) { return t !== screenTrack_1; });
|
|
249
|
+
setLocalScreenTrack(null);
|
|
250
|
+
setIsScreenSharing(false);
|
|
251
|
+
};
|
|
252
|
+
return [3 /*break*/, 6];
|
|
253
|
+
case 5:
|
|
254
|
+
err_2 = _a.sent();
|
|
255
|
+
// User cancelled the screen share picker — not an error
|
|
256
|
+
console.log('Screen share cancelled or failed:', err_2);
|
|
257
|
+
return [3 /*break*/, 6];
|
|
258
|
+
case 6: return [2 /*return*/];
|
|
259
|
+
}
|
|
260
|
+
});
|
|
261
|
+
}); }, [isScreenSharing, stopScreenShare, room]);
|
|
184
262
|
// Cleanup on unmount
|
|
185
263
|
useEffect(function () {
|
|
186
264
|
return function () {
|
|
@@ -198,6 +276,9 @@ export var TwilioVideoProvider = function (_a) {
|
|
|
198
276
|
isConnected: !!room,
|
|
199
277
|
localVideoTrack: localVideoTrack,
|
|
200
278
|
localAudioTrack: localAudioTrack,
|
|
279
|
+
localScreenTrack: localScreenTrack,
|
|
280
|
+
isScreenSharing: isScreenSharing,
|
|
281
|
+
screenSharingParticipantSid: screenSharingParticipantSid,
|
|
201
282
|
participants: participants,
|
|
202
283
|
error: error,
|
|
203
284
|
isHost: isHost,
|
|
@@ -207,6 +288,7 @@ export var TwilioVideoProvider = function (_a) {
|
|
|
207
288
|
disconnect: disconnect,
|
|
208
289
|
toggleVideo: toggleVideo,
|
|
209
290
|
toggleAudio: toggleAudio,
|
|
291
|
+
toggleScreenShare: toggleScreenShare,
|
|
210
292
|
setIsHost: setIsHost,
|
|
211
293
|
};
|
|
212
294
|
return (_jsx(TwilioVideoContext.Provider, __assign({ value: value }, { children: children })));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TwilioVideoContext.js","sourceRoot":"","sources":["../../../src/TwilioVideo/TwilioVideoContext.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,OAAc,EAAE,aAAa,EAAE,UAAU,EAAE,QAAQ,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AAClG,OAAO,
|
|
1
|
+
{"version":3,"file":"TwilioVideoContext.js","sourceRoot":"","sources":["../../../src/TwilioVideo/TwilioVideoContext.tsx"],"names":[],"mappings":"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"}
|
|
@@ -5,6 +5,8 @@ export interface TwilioVideoRoomProps {
|
|
|
5
5
|
style?: React.CSSProperties;
|
|
6
6
|
/** Resolve participant identity to a display label. Defaults to empty string. */
|
|
7
7
|
resolveIdentity?: (identity: string) => string;
|
|
8
|
+
/** Whether to show the screen share button. Defaults to true. */
|
|
9
|
+
showScreenShare?: boolean;
|
|
8
10
|
}
|
|
9
11
|
export declare const TwilioVideoRoom: React.FC<TwilioVideoRoomProps>;
|
|
10
12
|
//# sourceMappingURL=TwilioVideoRoom.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TwilioVideoRoom.d.ts","sourceRoot":"","sources":["../../../src/TwilioVideo/TwilioVideoRoom.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;
|
|
1
|
+
{"version":3,"file":"TwilioVideoRoom.d.ts","sourceRoot":"","sources":["../../../src/TwilioVideo/TwilioVideoRoom.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAOzB,MAAM,WAAW,oBAAoB;IACnC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAA;IACxB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;IAC3B,iFAAiF;IACjF,eAAe,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,MAAM,CAAA;IAC9C,iEAAiE;IACjE,eAAe,CAAC,EAAE,OAAO,CAAA;CAC1B;AAED,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CA0K1D,CAAA"}
|
|
@@ -9,18 +9,64 @@ var __assign = (this && this.__assign) || function () {
|
|
|
9
9
|
};
|
|
10
10
|
return __assign.apply(this, arguments);
|
|
11
11
|
};
|
|
12
|
+
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
|
|
13
|
+
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
|
|
14
|
+
if (ar || !(i in from)) {
|
|
15
|
+
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
|
|
16
|
+
ar[i] = from[i];
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
return to.concat(ar || Array.prototype.slice.call(from));
|
|
20
|
+
};
|
|
12
21
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
13
22
|
import { Box, Grid } from '@mui/material';
|
|
14
23
|
import { useTwilioVideo } from './TwilioVideoContext';
|
|
15
24
|
import { TwilioParticipant } from './TwilioParticipant';
|
|
16
25
|
import { TwilioControlBar } from './TwilioControls';
|
|
17
26
|
export var TwilioVideoRoom = function (_a) {
|
|
18
|
-
var onLeave = _a.onLeave, onEndForAll = _a.onEndForAll, style = _a.style, resolveIdentity = _a.resolveIdentity;
|
|
19
|
-
var
|
|
27
|
+
var onLeave = _a.onLeave, onEndForAll = _a.onEndForAll, style = _a.style, resolveIdentity = _a.resolveIdentity, _b = _a.showScreenShare, showScreenShareProp = _b === void 0 ? true : _b;
|
|
28
|
+
var _c = useTwilioVideo(), room = _c.room, participants = _c.participants, isScreenSharing = _c.isScreenSharing, screenSharingParticipantSid = _c.screenSharingParticipantSid;
|
|
20
29
|
if (!room)
|
|
21
30
|
return null;
|
|
22
31
|
var localParticipant = room.localParticipant;
|
|
23
32
|
var hasRemoteParticipants = participants.length > 0;
|
|
33
|
+
// Find who is sharing their screen (context-driven so React re-renders properly)
|
|
34
|
+
var screenShareParticipant = (function () {
|
|
35
|
+
if (isScreenSharing)
|
|
36
|
+
return localParticipant;
|
|
37
|
+
if (screenSharingParticipantSid) {
|
|
38
|
+
return participants.find(function (p) { return p.sid === screenSharingParticipantSid; }) || null;
|
|
39
|
+
}
|
|
40
|
+
return null;
|
|
41
|
+
})();
|
|
42
|
+
var isScreenShareActive = screenShareParticipant !== null;
|
|
43
|
+
// All participants for the camera strip (local + remote)
|
|
44
|
+
var allParticipants = __spreadArray([
|
|
45
|
+
localParticipant
|
|
46
|
+
], participants, true);
|
|
47
|
+
if (isScreenShareActive) {
|
|
48
|
+
// Presentation layout: screen share large on top, camera strip on bottom
|
|
49
|
+
return (_jsxs(Box, __assign({ sx: __assign({ display: 'flex', flexDirection: 'column', height: '100%', width: '100%', backgroundColor: '#1a1a1a' }, style) }, { children: [_jsx(Box, __assign({ sx: {
|
|
50
|
+
flex: 1,
|
|
51
|
+
overflow: 'hidden',
|
|
52
|
+
minHeight: 0,
|
|
53
|
+
} }, { children: _jsx(TwilioParticipant, { participant: screenShareParticipant, isLocal: screenShareParticipant === localParticipant, showScreenShare: true, resolveIdentity: resolveIdentity }) })), _jsx(Box, __assign({ sx: {
|
|
54
|
+
height: 120,
|
|
55
|
+
display: 'flex',
|
|
56
|
+
flexDirection: 'row',
|
|
57
|
+
gap: 1,
|
|
58
|
+
padding: 1,
|
|
59
|
+
overflowX: 'auto',
|
|
60
|
+
flexShrink: 0,
|
|
61
|
+
} }, { children: allParticipants.map(function (p) { return (_jsx(Box, __assign({ sx: {
|
|
62
|
+
height: '100%',
|
|
63
|
+
aspectRatio: '4/3',
|
|
64
|
+
flexShrink: 0,
|
|
65
|
+
borderRadius: 1,
|
|
66
|
+
overflow: 'hidden',
|
|
67
|
+
} }, { children: _jsx(TwilioParticipant, { participant: p, isLocal: p === localParticipant, showScreenShare: false, resolveIdentity: resolveIdentity }) }), p.sid)); }) })), _jsx(TwilioControlBar, { onLeave: onLeave, onEndForAll: onEndForAll, showScreenShare: showScreenShareProp })] })));
|
|
68
|
+
}
|
|
69
|
+
// Normal layout (no screen share active)
|
|
24
70
|
return (_jsxs(Box, __assign({ sx: __assign({ display: 'flex', flexDirection: 'column', height: '100%', width: '100%', backgroundColor: '#1a1a1a' }, style) }, { children: [_jsxs(Box, __assign({ sx: {
|
|
25
71
|
flex: 1,
|
|
26
72
|
position: 'relative',
|
|
@@ -40,6 +86,6 @@ export var TwilioVideoRoom = function (_a) {
|
|
|
40
86
|
borderRadius: 1,
|
|
41
87
|
overflow: 'hidden',
|
|
42
88
|
boxShadow: '0 2px 8px rgba(0,0,0,0.3)',
|
|
43
|
-
} }, { children: _jsx(TwilioParticipant, { participant: localParticipant, isLocal: true, resolveIdentity: resolveIdentity }) })))] })), _jsx(TwilioControlBar, { onLeave: onLeave, onEndForAll: onEndForAll })] })));
|
|
89
|
+
} }, { children: _jsx(TwilioParticipant, { participant: localParticipant, isLocal: true, resolveIdentity: resolveIdentity }) })))] })), _jsx(TwilioControlBar, { onLeave: onLeave, onEndForAll: onEndForAll, showScreenShare: showScreenShareProp })] })));
|
|
44
90
|
};
|
|
45
91
|
//# sourceMappingURL=TwilioVideoRoom.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TwilioVideoRoom.js","sourceRoot":"","sources":["../../../src/TwilioVideo/TwilioVideoRoom.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"TwilioVideoRoom.js","sourceRoot":"","sources":["../../../src/TwilioVideo/TwilioVideoRoom.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export { TwilioVideoProvider, useTwilioVideo, type TwilioVideoState, type TwilioVideoActions, type TwilioVideoContextType, type TwilioVideoProviderProps, } from './TwilioVideoContext';
|
|
1
|
+
export { TwilioVideoProvider, useTwilioVideo, SCREEN_SHARE_TRACK_NAME, type TwilioVideoState, type TwilioVideoActions, type TwilioVideoContextType, type TwilioVideoProviderProps, } from './TwilioVideoContext';
|
|
2
2
|
export { useStartTwilioVideoCall, useJoinTwilioVideoCall, useTwilioMeetingForCalendarEvent, } from './hooks';
|
|
3
3
|
export { TwilioParticipant, type TwilioParticipantProps } from './TwilioParticipant';
|
|
4
4
|
export { TwilioControlBar, type TwilioControlBarProps } from './TwilioControls';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/TwilioVideo/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,mBAAmB,EACnB,cAAc,EACd,KAAK,gBAAgB,EACrB,KAAK,kBAAkB,EACvB,KAAK,sBAAsB,EAC3B,KAAK,wBAAwB,GAC9B,MAAM,sBAAsB,CAAA;AAE7B,OAAO,EACL,uBAAuB,EACvB,sBAAsB,EACtB,gCAAgC,GACjC,MAAM,SAAS,CAAA;AAEhB,OAAO,EAAE,iBAAiB,EAAE,KAAK,sBAAsB,EAAE,MAAM,qBAAqB,CAAA;AACpF,OAAO,EAAE,gBAAgB,EAAE,KAAK,qBAAqB,EAAE,MAAM,kBAAkB,CAAA;AAC/E,OAAO,EAAE,eAAe,EAAE,KAAK,oBAAoB,EAAE,MAAM,mBAAmB,CAAA;AAC9E,OAAO,EAAE,kBAAkB,EAAE,KAAK,uBAAuB,EAAE,MAAM,sBAAsB,CAAA"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/TwilioVideo/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,mBAAmB,EACnB,cAAc,EACd,uBAAuB,EACvB,KAAK,gBAAgB,EACrB,KAAK,kBAAkB,EACvB,KAAK,sBAAsB,EAC3B,KAAK,wBAAwB,GAC9B,MAAM,sBAAsB,CAAA;AAE7B,OAAO,EACL,uBAAuB,EACvB,sBAAsB,EACtB,gCAAgC,GACjC,MAAM,SAAS,CAAA;AAEhB,OAAO,EAAE,iBAAiB,EAAE,KAAK,sBAAsB,EAAE,MAAM,qBAAqB,CAAA;AACpF,OAAO,EAAE,gBAAgB,EAAE,KAAK,qBAAqB,EAAE,MAAM,kBAAkB,CAAA;AAC/E,OAAO,EAAE,eAAe,EAAE,KAAK,oBAAoB,EAAE,MAAM,mBAAmB,CAAA;AAC9E,OAAO,EAAE,kBAAkB,EAAE,KAAK,uBAAuB,EAAE,MAAM,sBAAsB,CAAA"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export { TwilioVideoProvider, useTwilioVideo, } from './TwilioVideoContext';
|
|
1
|
+
export { TwilioVideoProvider, useTwilioVideo, SCREEN_SHARE_TRACK_NAME, } from './TwilioVideoContext';
|
|
2
2
|
export { useStartTwilioVideoCall, useJoinTwilioVideoCall, useTwilioMeetingForCalendarEvent, } from './hooks';
|
|
3
3
|
export { TwilioParticipant } from './TwilioParticipant';
|
|
4
4
|
export { TwilioControlBar } from './TwilioControls';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/TwilioVideo/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,mBAAmB,EACnB,cAAc,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/TwilioVideo/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,mBAAmB,EACnB,cAAc,EACd,uBAAuB,GAKxB,MAAM,sBAAsB,CAAA;AAE7B,OAAO,EACL,uBAAuB,EACvB,sBAAsB,EACtB,gCAAgC,GACjC,MAAM,SAAS,CAAA;AAEhB,OAAO,EAAE,iBAAiB,EAA+B,MAAM,qBAAqB,CAAA;AACpF,OAAO,EAAE,gBAAgB,EAA8B,MAAM,kBAAkB,CAAA;AAC/E,OAAO,EAAE,eAAe,EAA6B,MAAM,mBAAmB,CAAA;AAC9E,OAAO,EAAE,kBAAkB,EAAgC,MAAM,sBAAsB,CAAA"}
|