@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
|
@@ -3,6 +3,8 @@ export interface TwilioControlBarProps {
|
|
|
3
3
|
onLeave?: () => void;
|
|
4
4
|
onEndForAll?: () => void;
|
|
5
5
|
style?: React.CSSProperties;
|
|
6
|
+
/** Whether to show the screen share button. Defaults to true. */
|
|
7
|
+
showScreenShare?: boolean;
|
|
6
8
|
}
|
|
7
9
|
export declare const TwilioControlBar: React.FC<TwilioControlBarProps>;
|
|
8
10
|
//# sourceMappingURL=TwilioControls.d.ts.map
|
|
@@ -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"}
|
|
@@ -17,8 +17,8 @@ var material_1 = require("@mui/material");
|
|
|
17
17
|
var icons_material_1 = require("@mui/icons-material");
|
|
18
18
|
var TwilioVideoContext_1 = require("./TwilioVideoContext");
|
|
19
19
|
var TwilioControlBar = function (_a) {
|
|
20
|
-
var onLeave = _a.onLeave, onEndForAll = _a.onEndForAll, style = _a.style;
|
|
21
|
-
var
|
|
20
|
+
var onLeave = _a.onLeave, onEndForAll = _a.onEndForAll, style = _a.style, _b = _a.showScreenShare, showScreenShareProp = _b === void 0 ? true : _b;
|
|
21
|
+
var _c = (0, TwilioVideoContext_1.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;
|
|
22
22
|
var handleLeave = function () {
|
|
23
23
|
disconnect();
|
|
24
24
|
onLeave === null || onLeave === void 0 ? void 0 : onLeave();
|
|
@@ -27,6 +27,9 @@ var TwilioControlBar = function (_a) {
|
|
|
27
27
|
onEndForAll === null || onEndForAll === void 0 ? void 0 : onEndForAll();
|
|
28
28
|
disconnect();
|
|
29
29
|
};
|
|
30
|
+
var supportsScreenShare = typeof navigator !== 'undefined'
|
|
31
|
+
&& navigator.mediaDevices
|
|
32
|
+
&& typeof navigator.mediaDevices.getDisplayMedia === 'function';
|
|
30
33
|
return ((0, jsx_runtime_1.jsxs)(material_1.Box, __assign({ sx: __assign({ display: 'flex', justifyContent: 'center', alignItems: 'center', gap: 2, backgroundColor: '#1a1a1a', padding: '12px 24px' }, style) }, { children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, __assign({ onClick: toggleAudio, sx: {
|
|
31
34
|
color: isAudioEnabled ? 'white' : '#ff4444',
|
|
32
35
|
'&:hover': {
|
|
@@ -37,7 +40,15 @@ var TwilioControlBar = function (_a) {
|
|
|
37
40
|
'&:hover': {
|
|
38
41
|
backgroundColor: 'rgba(255,255,255,0.1)',
|
|
39
42
|
},
|
|
40
|
-
} }, { children: isVideoEnabled ? (0, jsx_runtime_1.jsx)(icons_material_1.Videocam, {}) : (0, jsx_runtime_1.jsx)(icons_material_1.VideocamOff, {}) })), (0, jsx_runtime_1.jsx)(material_1.IconButton, __assign({ onClick:
|
|
43
|
+
} }, { children: isVideoEnabled ? (0, jsx_runtime_1.jsx)(icons_material_1.Videocam, {}) : (0, jsx_runtime_1.jsx)(icons_material_1.VideocamOff, {}) })), showScreenShareProp && supportsScreenShare && ((0, jsx_runtime_1.jsx)(material_1.IconButton, __assign({ onClick: toggleScreenShare, disabled: !room, sx: {
|
|
44
|
+
color: isScreenSharing ? '#4caf50' : 'white',
|
|
45
|
+
'&:hover': {
|
|
46
|
+
backgroundColor: 'rgba(255,255,255,0.1)',
|
|
47
|
+
},
|
|
48
|
+
'&.Mui-disabled': {
|
|
49
|
+
color: 'rgba(255,255,255,0.3)',
|
|
50
|
+
},
|
|
51
|
+
} }, { children: isScreenSharing ? (0, jsx_runtime_1.jsx)(icons_material_1.StopScreenShare, {}) : (0, jsx_runtime_1.jsx)(icons_material_1.ScreenShare, {}) }))), (0, jsx_runtime_1.jsx)(material_1.IconButton, __assign({ onClick: handleLeave, sx: {
|
|
41
52
|
backgroundColor: '#ff4444',
|
|
42
53
|
color: 'white',
|
|
43
54
|
'&:hover': {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TwilioControls.js","sourceRoot":"","sources":["../../../src/TwilioVideo/TwilioControls.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;AACA,0CAAuD;AACvD,
|
|
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"}
|
|
@@ -15,16 +15,23 @@ exports.TwilioParticipant = void 0;
|
|
|
15
15
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
16
16
|
var react_1 = require("react");
|
|
17
17
|
var material_1 = require("@mui/material");
|
|
18
|
+
var TwilioVideoContext_1 = require("./TwilioVideoContext");
|
|
18
19
|
var TwilioParticipant = function (_a) {
|
|
19
|
-
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;
|
|
20
|
+
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;
|
|
20
21
|
var videoRef = (0, react_1.useRef)(null);
|
|
21
22
|
var audioRef = (0, react_1.useRef)(null);
|
|
22
|
-
var
|
|
23
|
-
var
|
|
23
|
+
var _e = (0, react_1.useState)(null), cameraTrack = _e[0], setCameraTrack = _e[1];
|
|
24
|
+
var _f = (0, react_1.useState)(null), screenTrack = _f[0], setScreenTrack = _f[1];
|
|
25
|
+
var _g = (0, react_1.useState)(null), audioTrack = _g[0], setAudioTrack = _g[1];
|
|
24
26
|
(0, react_1.useEffect)(function () {
|
|
25
27
|
var handleTrackSubscribed = function (track) {
|
|
26
28
|
if (track.kind === 'video') {
|
|
27
|
-
|
|
29
|
+
if (track.name === TwilioVideoContext_1.SCREEN_SHARE_TRACK_NAME) {
|
|
30
|
+
setScreenTrack(track);
|
|
31
|
+
}
|
|
32
|
+
else {
|
|
33
|
+
setCameraTrack(track);
|
|
34
|
+
}
|
|
28
35
|
}
|
|
29
36
|
else if (track.kind === 'audio') {
|
|
30
37
|
setAudioTrack(track);
|
|
@@ -32,7 +39,12 @@ var TwilioParticipant = function (_a) {
|
|
|
32
39
|
};
|
|
33
40
|
var handleTrackUnsubscribed = function (track) {
|
|
34
41
|
if (track.kind === 'video') {
|
|
35
|
-
|
|
42
|
+
if (track.name === TwilioVideoContext_1.SCREEN_SHARE_TRACK_NAME) {
|
|
43
|
+
setScreenTrack(null);
|
|
44
|
+
}
|
|
45
|
+
else {
|
|
46
|
+
setCameraTrack(null);
|
|
47
|
+
}
|
|
36
48
|
}
|
|
37
49
|
else if (track.kind === 'audio') {
|
|
38
50
|
setAudioTrack(null);
|
|
@@ -44,41 +56,60 @@ var TwilioParticipant = function (_a) {
|
|
|
44
56
|
handleTrackSubscribed(publication.track);
|
|
45
57
|
}
|
|
46
58
|
});
|
|
47
|
-
|
|
48
|
-
|
|
59
|
+
if (isLocal) {
|
|
60
|
+
// For local participants, listen for track publications (trackSubscribed doesn't fire for local)
|
|
61
|
+
var handleTrackPublished_1 = function (publication) {
|
|
62
|
+
if (publication.track) {
|
|
63
|
+
handleTrackSubscribed(publication.track);
|
|
64
|
+
}
|
|
65
|
+
};
|
|
66
|
+
var handleTrackStopped_1 = function (track) {
|
|
67
|
+
handleTrackUnsubscribed(track);
|
|
68
|
+
};
|
|
69
|
+
participant.on('trackPublished', handleTrackPublished_1);
|
|
70
|
+
participant.on('trackStopped', handleTrackStopped_1);
|
|
71
|
+
return function () {
|
|
72
|
+
participant.off('trackPublished', handleTrackPublished_1);
|
|
73
|
+
participant.off('trackStopped', handleTrackStopped_1);
|
|
74
|
+
};
|
|
75
|
+
}
|
|
76
|
+
else {
|
|
77
|
+
// For remote participants, listen for track subscriptions
|
|
49
78
|
participant.on('trackSubscribed', handleTrackSubscribed);
|
|
50
79
|
participant.on('trackUnsubscribed', handleTrackUnsubscribed);
|
|
51
|
-
|
|
52
|
-
return function () {
|
|
53
|
-
if ('off' in participant) {
|
|
80
|
+
return function () {
|
|
54
81
|
participant.off('trackSubscribed', handleTrackSubscribed);
|
|
55
82
|
participant.off('trackUnsubscribed', handleTrackUnsubscribed);
|
|
56
|
-
}
|
|
57
|
-
}
|
|
58
|
-
}, [participant]);
|
|
83
|
+
};
|
|
84
|
+
}
|
|
85
|
+
}, [participant, isLocal]);
|
|
86
|
+
var activeVideoTrack = showScreenShare ? screenTrack : cameraTrack;
|
|
59
87
|
// Attach video track
|
|
60
88
|
(0, react_1.useEffect)(function () {
|
|
61
|
-
if (
|
|
62
|
-
|
|
89
|
+
if (activeVideoTrack && videoRef.current) {
|
|
90
|
+
var el_1 = videoRef.current;
|
|
91
|
+
activeVideoTrack.attach(el_1);
|
|
63
92
|
return function () {
|
|
64
|
-
|
|
93
|
+
activeVideoTrack.detach(el_1);
|
|
65
94
|
};
|
|
66
95
|
}
|
|
67
|
-
}, [
|
|
96
|
+
}, [activeVideoTrack]);
|
|
68
97
|
// Attach audio track (not for local participant to avoid echo)
|
|
69
98
|
(0, react_1.useEffect)(function () {
|
|
70
99
|
if (audioTrack && audioRef.current && !isLocal) {
|
|
71
|
-
|
|
100
|
+
var el_2 = audioRef.current;
|
|
101
|
+
audioTrack.attach(el_2);
|
|
72
102
|
return function () {
|
|
73
|
-
audioTrack.detach();
|
|
103
|
+
audioTrack.detach(el_2);
|
|
74
104
|
};
|
|
75
105
|
}
|
|
76
106
|
}, [audioTrack, isLocal]);
|
|
107
|
+
var shouldMirror = isLocal && !showScreenShare;
|
|
77
108
|
return ((0, jsx_runtime_1.jsxs)(material_1.Box, __assign({ sx: __assign({ position: 'relative', width: '100%', height: '100%', backgroundColor: '#1a1a1a', borderRadius: 1, overflow: 'hidden' }, style) }, { children: [(0, jsx_runtime_1.jsx)("video", { ref: videoRef, autoPlay: true, muted: isLocal, playsInline: true, style: {
|
|
78
109
|
width: '100%',
|
|
79
110
|
height: '100%',
|
|
80
|
-
objectFit: 'cover',
|
|
81
|
-
transform:
|
|
111
|
+
objectFit: showScreenShare ? 'contain' : 'cover',
|
|
112
|
+
transform: shouldMirror ? 'scaleX(-1)' : 'none',
|
|
82
113
|
} }), !isLocal && (0, jsx_runtime_1.jsx)("audio", { ref: audioRef, autoPlay: true }), (function () {
|
|
83
114
|
var label = resolveIdentity(participant.identity);
|
|
84
115
|
if (!label && !isLocal)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TwilioParticipant.js","sourceRoot":"","sources":["../../../src/TwilioVideo/TwilioParticipant.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;AAAA,+BAA0D;AAS1D,0CAA+C;
|
|
1
|
+
{"version":3,"file":"TwilioParticipant.js","sourceRoot":"","sources":["../../../src/TwilioVideo/TwilioParticipant.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;AAAA,+BAA0D;AAS1D,0CAA+C;AAC/C,2DAA8D;AAYvD,IAAM,iBAAiB,GAAqC,UAAC,EAMnE;QALC,WAAW,iBAAA,EACX,eAAe,EAAf,OAAO,mBAAG,KAAK,KAAA,EACf,KAAK,WAAA,EACL,uBAA0B,EAA1B,eAAe,mBAAG,cAAM,OAAA,EAAE,EAAF,CAAE,KAAA,EAC1B,uBAAuB,EAAvB,eAAe,mBAAG,KAAK,KAAA;IAEvB,IAAM,QAAQ,GAAG,IAAA,cAAM,EAAmB,IAAI,CAAC,CAAA;IAC/C,IAAM,QAAQ,GAAG,IAAA,cAAM,EAAmB,IAAI,CAAC,CAAA;IACzC,IAAA,KAAgC,IAAA,gBAAQ,EAAoB,IAAI,CAAC,EAAhE,WAAW,QAAA,EAAE,cAAc,QAAqC,CAAA;IACjE,IAAA,KAAgC,IAAA,gBAAQ,EAAoB,IAAI,CAAC,EAAhE,WAAW,QAAA,EAAE,cAAc,QAAqC,CAAA;IACjE,IAAA,KAA8B,IAAA,gBAAQ,EAAoB,IAAI,CAAC,EAA9D,UAAU,QAAA,EAAE,aAAa,QAAqC,CAAA;IAErE,IAAA,iBAAS,EAAC;QACR,IAAM,qBAAqB,GAAG,UAAC,KAA8B;YAC3D,IAAI,KAAK,CAAC,IAAI,KAAK,OAAO,EAAE;gBAC1B,IAAI,KAAK,CAAC,IAAI,KAAK,4CAAuB,EAAE;oBAC1C,cAAc,CAAC,KAAmB,CAAC,CAAA;iBACpC;qBAAM;oBACL,cAAc,CAAC,KAAmB,CAAC,CAAA;iBACpC;aACF;iBAAM,IAAI,KAAK,CAAC,IAAI,KAAK,OAAO,EAAE;gBACjC,aAAa,CAAC,KAAmB,CAAC,CAAA;aACnC;QACH,CAAC,CAAA;QAED,IAAM,uBAAuB,GAAG,UAAC,KAA8B;YAC7D,IAAI,KAAK,CAAC,IAAI,KAAK,OAAO,EAAE;gBAC1B,IAAI,KAAK,CAAC,IAAI,KAAK,4CAAuB,EAAE;oBAC1C,cAAc,CAAC,IAAI,CAAC,CAAA;iBACrB;qBAAM;oBACL,cAAc,CAAC,IAAI,CAAC,CAAA;iBACrB;aACF;iBAAM,IAAI,KAAK,CAAC,IAAI,KAAK,OAAO,EAAE;gBACjC,aAAa,CAAC,IAAI,CAAC,CAAA;aACpB;QACH,CAAC,CAAA;QAED,sBAAsB;QACtB,WAAW,CAAC,MAAM,CAAC,OAAO,CAAC,UAAC,WAA2D;YACrF,IAAI,WAAW,CAAC,KAAK,EAAE;gBACrB,qBAAqB,CAAC,WAAW,CAAC,KAAgC,CAAC,CAAA;aACpE;QACH,CAAC,CAAC,CAAA;QAEF,IAAI,OAAO,EAAE;YACX,iGAAiG;YACjG,IAAM,sBAAoB,GAAG,UAAC,WAAkC;gBAC9D,IAAI,WAAW,CAAC,KAAK,EAAE;oBACrB,qBAAqB,CAAC,WAAW,CAAC,KAAgC,CAAC,CAAA;iBACpE;YACH,CAAC,CAAA;YACD,IAAM,oBAAkB,GAAG,UAAC,KAA8B;gBACxD,uBAAuB,CAAC,KAAK,CAAC,CAAA;YAChC,CAAC,CAAA;YACD,WAAW,CAAC,EAAE,CAAC,gBAAgB,EAAE,sBAAoB,CAAC,CAAA;YACtD,WAAW,CAAC,EAAE,CAAC,cAAc,EAAE,oBAAkB,CAAC,CAAA;YAElD,OAAO;gBACL,WAAW,CAAC,GAAG,CAAC,gBAAgB,EAAE,sBAAoB,CAAC,CAAA;gBACvD,WAAW,CAAC,GAAG,CAAC,cAAc,EAAE,oBAAkB,CAAC,CAAA;YACrD,CAAC,CAAA;SACF;aAAM;YACL,0DAA0D;YAC1D,WAAW,CAAC,EAAE,CAAC,iBAAiB,EAAE,qBAAqB,CAAC,CAAA;YACxD,WAAW,CAAC,EAAE,CAAC,mBAAmB,EAAE,uBAAuB,CAAC,CAAA;YAE5D,OAAO;gBACL,WAAW,CAAC,GAAG,CAAC,iBAAiB,EAAE,qBAAqB,CAAC,CAAA;gBACzD,WAAW,CAAC,GAAG,CAAC,mBAAmB,EAAE,uBAAuB,CAAC,CAAA;YAC/D,CAAC,CAAA;SACF;IACH,CAAC,EAAE,CAAC,WAAW,EAAE,OAAO,CAAC,CAAC,CAAA;IAE1B,IAAM,gBAAgB,GAAG,eAAe,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,WAAW,CAAA;IAEpE,qBAAqB;IACrB,IAAA,iBAAS,EAAC;QACR,IAAI,gBAAgB,IAAI,QAAQ,CAAC,OAAO,EAAE;YACxC,IAAM,IAAE,GAAG,QAAQ,CAAC,OAAO,CAAA;YAC3B,gBAAgB,CAAC,MAAM,CAAC,IAAE,CAAC,CAAA;YAC3B,OAAO;gBACL,gBAAgB,CAAC,MAAM,CAAC,IAAE,CAAC,CAAA;YAC7B,CAAC,CAAA;SACF;IACH,CAAC,EAAE,CAAC,gBAAgB,CAAC,CAAC,CAAA;IAEtB,+DAA+D;IAC/D,IAAA,iBAAS,EAAC;QACR,IAAI,UAAU,IAAI,QAAQ,CAAC,OAAO,IAAI,CAAC,OAAO,EAAE;YAC9C,IAAM,IAAE,GAAG,QAAQ,CAAC,OAAO,CAAA;YAC3B,UAAU,CAAC,MAAM,CAAC,IAAE,CAAC,CAAA;YACrB,OAAO;gBACL,UAAU,CAAC,MAAM,CAAC,IAAE,CAAC,CAAA;YACvB,CAAC,CAAA;SACF;IACH,CAAC,EAAE,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC,CAAA;IAEzB,IAAM,YAAY,GAAG,OAAO,IAAI,CAAC,eAAe,CAAA;IAEhD,OAAO,CACL,wBAAC,cAAG,aACF,EAAE,aACA,QAAQ,EAAE,UAAU,EACpB,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,MAAM,EACd,eAAe,EAAE,SAAS,EAC1B,YAAY,EAAE,CAAC,EACf,QAAQ,EAAE,QAAQ,IACf,KAAK,kBAGV,kCACE,GAAG,EAAE,QAAQ,EACb,QAAQ,QACR,KAAK,EAAE,OAAO,EACd,WAAW,QACX,KAAK,EAAE;oBACL,KAAK,EAAE,MAAM;oBACb,MAAM,EAAE,MAAM;oBACd,SAAS,EAAE,eAAe,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO;oBAChD,SAAS,EAAE,YAAY,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,MAAM;iBAChD,GACD,EACD,CAAC,OAAO,IAAI,kCAAO,GAAG,EAAE,QAAQ,EAAE,QAAQ,SAAG,EAC7C,CAAC;gBACA,IAAM,KAAK,GAAG,eAAe,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAA;gBACnD,IAAI,CAAC,KAAK,IAAI,CAAC,OAAO;oBAAE,OAAO,IAAI,CAAA;gBACnC,OAAO,CACL,wBAAC,qBAAU,aACT,OAAO,EAAC,SAAS,EACjB,EAAE,EAAE;wBACF,QAAQ,EAAE,UAAU;wBACpB,MAAM,EAAE,CAAC;wBACT,IAAI,EAAE,CAAC;wBACP,KAAK,EAAE,OAAO;wBACd,eAAe,EAAE,iBAAiB;wBAClC,OAAO,EAAE,SAAS;wBAClB,YAAY,EAAE,CAAC;qBAChB,iBAEA,KAAK,EAAE,OAAO,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,KACpC,CACd,CAAA;YACH,CAAC,CAAC,EAAE,KACA,CACP,CAAA;AACH,CAAC,CAAA;AAnJY,QAAA,iBAAiB,qBAmJ7B"}
|
|
@@ -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"}
|
|
@@ -10,6 +10,29 @@ var __assign = (this && this.__assign) || function () {
|
|
|
10
10
|
};
|
|
11
11
|
return __assign.apply(this, arguments);
|
|
12
12
|
};
|
|
13
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
14
|
+
if (k2 === undefined) k2 = k;
|
|
15
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
16
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
17
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
18
|
+
}
|
|
19
|
+
Object.defineProperty(o, k2, desc);
|
|
20
|
+
}) : (function(o, m, k, k2) {
|
|
21
|
+
if (k2 === undefined) k2 = k;
|
|
22
|
+
o[k2] = m[k];
|
|
23
|
+
}));
|
|
24
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
25
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
26
|
+
}) : function(o, v) {
|
|
27
|
+
o["default"] = v;
|
|
28
|
+
});
|
|
29
|
+
var __importStar = (this && this.__importStar) || function (mod) {
|
|
30
|
+
if (mod && mod.__esModule) return mod;
|
|
31
|
+
var result = {};
|
|
32
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
33
|
+
__setModuleDefault(result, mod);
|
|
34
|
+
return result;
|
|
35
|
+
};
|
|
13
36
|
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
|
14
37
|
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
15
38
|
return new (P || (P = Promise))(function (resolve, reject) {
|
|
@@ -55,14 +78,12 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
|
|
|
55
78
|
}
|
|
56
79
|
return to.concat(ar || Array.prototype.slice.call(from));
|
|
57
80
|
};
|
|
58
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
59
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
60
|
-
};
|
|
61
81
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
62
|
-
exports.TwilioVideoProvider = exports.useTwilioVideo = void 0;
|
|
82
|
+
exports.TwilioVideoProvider = exports.useTwilioVideo = exports.SCREEN_SHARE_TRACK_NAME = void 0;
|
|
63
83
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
64
84
|
var react_1 = require("react");
|
|
65
|
-
var twilio_video_1 =
|
|
85
|
+
var twilio_video_1 = __importStar(require("twilio-video"));
|
|
86
|
+
exports.SCREEN_SHARE_TRACK_NAME = 'screen-share';
|
|
66
87
|
var TwilioVideoContext = (0, react_1.createContext)(null);
|
|
67
88
|
var useTwilioVideo = function () {
|
|
68
89
|
var context = (0, react_1.useContext)(TwilioVideoContext);
|
|
@@ -83,6 +104,9 @@ var TwilioVideoProvider = function (_a) {
|
|
|
83
104
|
var _h = (0, react_1.useState)(false), isHost = _h[0], setIsHost = _h[1];
|
|
84
105
|
var _j = (0, react_1.useState)(true), isVideoEnabled = _j[0], setIsVideoEnabled = _j[1];
|
|
85
106
|
var _k = (0, react_1.useState)(true), isAudioEnabled = _k[0], setIsAudioEnabled = _k[1];
|
|
107
|
+
var _l = (0, react_1.useState)(null), localScreenTrack = _l[0], setLocalScreenTrack = _l[1];
|
|
108
|
+
var _m = (0, react_1.useState)(false), isScreenSharing = _m[0], setIsScreenSharing = _m[1];
|
|
109
|
+
var _o = (0, react_1.useState)(null), screenSharingParticipantSid = _o[0], setScreenSharingParticipantSid = _o[1];
|
|
86
110
|
var localTracksRef = (0, react_1.useRef)([]);
|
|
87
111
|
var connect = (0, react_1.useCallback)(function (token, roomName) { return __awaiter(void 0, void 0, void 0, function () {
|
|
88
112
|
var tracks, videoTrack, audioTrack, newRoom, existingParticipants, err_1;
|
|
@@ -125,6 +149,17 @@ var TwilioVideoProvider = function (_a) {
|
|
|
125
149
|
newRoom.on('participantDisconnected', function (participant) {
|
|
126
150
|
setParticipants(function (prev) { return prev.filter(function (p) { return p.sid !== participant.sid; }); });
|
|
127
151
|
});
|
|
152
|
+
// Track remote screen sharing for React re-renders
|
|
153
|
+
newRoom.on('trackSubscribed', function (track, publication, participant) {
|
|
154
|
+
if (track.kind === 'video' && track.name === exports.SCREEN_SHARE_TRACK_NAME) {
|
|
155
|
+
setScreenSharingParticipantSid(participant.sid);
|
|
156
|
+
}
|
|
157
|
+
});
|
|
158
|
+
newRoom.on('trackUnsubscribed', function (track, publication, participant) {
|
|
159
|
+
if (track.kind === 'video' && track.name === exports.SCREEN_SHARE_TRACK_NAME) {
|
|
160
|
+
setScreenSharingParticipantSid(null);
|
|
161
|
+
}
|
|
162
|
+
});
|
|
128
163
|
newRoom.on('disconnected', function () {
|
|
129
164
|
// Stop all local tracks when disconnected
|
|
130
165
|
localTracksRef.current.forEach(function (track) {
|
|
@@ -134,6 +169,9 @@ var TwilioVideoProvider = function (_a) {
|
|
|
134
169
|
setRoom(null);
|
|
135
170
|
setLocalVideoTrack(null);
|
|
136
171
|
setLocalAudioTrack(null);
|
|
172
|
+
setLocalScreenTrack(null);
|
|
173
|
+
setIsScreenSharing(false);
|
|
174
|
+
setScreenSharingParticipantSid(null);
|
|
137
175
|
setParticipants([]);
|
|
138
176
|
});
|
|
139
177
|
return [3 /*break*/, 6];
|
|
@@ -161,6 +199,9 @@ var TwilioVideoProvider = function (_a) {
|
|
|
161
199
|
setRoom(null);
|
|
162
200
|
setLocalVideoTrack(null);
|
|
163
201
|
setLocalAudioTrack(null);
|
|
202
|
+
setLocalScreenTrack(null);
|
|
203
|
+
setIsScreenSharing(false);
|
|
204
|
+
setScreenSharingParticipantSid(null);
|
|
164
205
|
setParticipants([]);
|
|
165
206
|
}, [room]);
|
|
166
207
|
var toggleVideo = (0, react_1.useCallback)(function () { return __awaiter(void 0, void 0, void 0, function () {
|
|
@@ -188,6 +229,63 @@ var TwilioVideoProvider = function (_a) {
|
|
|
188
229
|
setIsAudioEnabled(!isAudioEnabled);
|
|
189
230
|
}
|
|
190
231
|
}, [localAudioTrack, isAudioEnabled]);
|
|
232
|
+
var stopScreenShare = (0, react_1.useCallback)(function () {
|
|
233
|
+
if (localScreenTrack) {
|
|
234
|
+
if (room) {
|
|
235
|
+
room.localParticipant.unpublishTrack(localScreenTrack);
|
|
236
|
+
}
|
|
237
|
+
localScreenTrack.stop();
|
|
238
|
+
localTracksRef.current = localTracksRef.current.filter(function (t) { return t !== localScreenTrack; });
|
|
239
|
+
setLocalScreenTrack(null);
|
|
240
|
+
setIsScreenSharing(false);
|
|
241
|
+
}
|
|
242
|
+
}, [localScreenTrack, room]);
|
|
243
|
+
var toggleScreenShare = (0, react_1.useCallback)(function () { return __awaiter(void 0, void 0, void 0, function () {
|
|
244
|
+
var stream, mediaStreamTrack, screenTrack_1, err_2;
|
|
245
|
+
return __generator(this, function (_a) {
|
|
246
|
+
switch (_a.label) {
|
|
247
|
+
case 0:
|
|
248
|
+
if (isScreenSharing) {
|
|
249
|
+
stopScreenShare();
|
|
250
|
+
return [2 /*return*/];
|
|
251
|
+
}
|
|
252
|
+
_a.label = 1;
|
|
253
|
+
case 1:
|
|
254
|
+
_a.trys.push([1, 5, , 6]);
|
|
255
|
+
return [4 /*yield*/, navigator.mediaDevices.getDisplayMedia({ video: true })];
|
|
256
|
+
case 2:
|
|
257
|
+
stream = _a.sent();
|
|
258
|
+
mediaStreamTrack = stream.getVideoTracks()[0];
|
|
259
|
+
screenTrack_1 = new twilio_video_1.LocalVideoTrack(mediaStreamTrack, { name: exports.SCREEN_SHARE_TRACK_NAME });
|
|
260
|
+
if (!room) return [3 /*break*/, 4];
|
|
261
|
+
return [4 /*yield*/, room.localParticipant.publishTrack(screenTrack_1)];
|
|
262
|
+
case 3:
|
|
263
|
+
_a.sent();
|
|
264
|
+
_a.label = 4;
|
|
265
|
+
case 4:
|
|
266
|
+
localTracksRef.current.push(screenTrack_1);
|
|
267
|
+
setLocalScreenTrack(screenTrack_1);
|
|
268
|
+
setIsScreenSharing(true);
|
|
269
|
+
// Handle browser "Stop sharing" button
|
|
270
|
+
mediaStreamTrack.onended = function () {
|
|
271
|
+
if (room) {
|
|
272
|
+
room.localParticipant.unpublishTrack(screenTrack_1);
|
|
273
|
+
}
|
|
274
|
+
screenTrack_1.stop();
|
|
275
|
+
localTracksRef.current = localTracksRef.current.filter(function (t) { return t !== screenTrack_1; });
|
|
276
|
+
setLocalScreenTrack(null);
|
|
277
|
+
setIsScreenSharing(false);
|
|
278
|
+
};
|
|
279
|
+
return [3 /*break*/, 6];
|
|
280
|
+
case 5:
|
|
281
|
+
err_2 = _a.sent();
|
|
282
|
+
// User cancelled the screen share picker — not an error
|
|
283
|
+
console.log('Screen share cancelled or failed:', err_2);
|
|
284
|
+
return [3 /*break*/, 6];
|
|
285
|
+
case 6: return [2 /*return*/];
|
|
286
|
+
}
|
|
287
|
+
});
|
|
288
|
+
}); }, [isScreenSharing, stopScreenShare, room]);
|
|
191
289
|
// Cleanup on unmount
|
|
192
290
|
(0, react_1.useEffect)(function () {
|
|
193
291
|
return function () {
|
|
@@ -205,6 +303,9 @@ var TwilioVideoProvider = function (_a) {
|
|
|
205
303
|
isConnected: !!room,
|
|
206
304
|
localVideoTrack: localVideoTrack,
|
|
207
305
|
localAudioTrack: localAudioTrack,
|
|
306
|
+
localScreenTrack: localScreenTrack,
|
|
307
|
+
isScreenSharing: isScreenSharing,
|
|
308
|
+
screenSharingParticipantSid: screenSharingParticipantSid,
|
|
208
309
|
participants: participants,
|
|
209
310
|
error: error,
|
|
210
311
|
isHost: isHost,
|
|
@@ -214,6 +315,7 @@ var TwilioVideoProvider = function (_a) {
|
|
|
214
315
|
disconnect: disconnect,
|
|
215
316
|
toggleVideo: toggleVideo,
|
|
216
317
|
toggleAudio: toggleAudio,
|
|
318
|
+
toggleScreenShare: toggleScreenShare,
|
|
217
319
|
setIsHost: setIsHost,
|
|
218
320
|
};
|
|
219
321
|
return ((0, jsx_runtime_1.jsx)(TwilioVideoContext.Provider, __assign({ value: value }, { children: children })));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TwilioVideoContext.js","sourceRoot":"","sources":["../../../src/TwilioVideo/TwilioVideoContext.tsx"],"names":[],"mappings":"
|
|
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"}
|
|
@@ -10,6 +10,15 @@ var __assign = (this && this.__assign) || function () {
|
|
|
10
10
|
};
|
|
11
11
|
return __assign.apply(this, arguments);
|
|
12
12
|
};
|
|
13
|
+
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
|
|
14
|
+
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
|
|
15
|
+
if (ar || !(i in from)) {
|
|
16
|
+
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
|
|
17
|
+
ar[i] = from[i];
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
return to.concat(ar || Array.prototype.slice.call(from));
|
|
21
|
+
};
|
|
13
22
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
14
23
|
exports.TwilioVideoRoom = void 0;
|
|
15
24
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
@@ -18,12 +27,49 @@ var TwilioVideoContext_1 = require("./TwilioVideoContext");
|
|
|
18
27
|
var TwilioParticipant_1 = require("./TwilioParticipant");
|
|
19
28
|
var TwilioControls_1 = require("./TwilioControls");
|
|
20
29
|
var TwilioVideoRoom = function (_a) {
|
|
21
|
-
var onLeave = _a.onLeave, onEndForAll = _a.onEndForAll, style = _a.style, resolveIdentity = _a.resolveIdentity;
|
|
22
|
-
var
|
|
30
|
+
var onLeave = _a.onLeave, onEndForAll = _a.onEndForAll, style = _a.style, resolveIdentity = _a.resolveIdentity, _b = _a.showScreenShare, showScreenShareProp = _b === void 0 ? true : _b;
|
|
31
|
+
var _c = (0, TwilioVideoContext_1.useTwilioVideo)(), room = _c.room, participants = _c.participants, isScreenSharing = _c.isScreenSharing, screenSharingParticipantSid = _c.screenSharingParticipantSid;
|
|
23
32
|
if (!room)
|
|
24
33
|
return null;
|
|
25
34
|
var localParticipant = room.localParticipant;
|
|
26
35
|
var hasRemoteParticipants = participants.length > 0;
|
|
36
|
+
// Find who is sharing their screen (context-driven so React re-renders properly)
|
|
37
|
+
var screenShareParticipant = (function () {
|
|
38
|
+
if (isScreenSharing)
|
|
39
|
+
return localParticipant;
|
|
40
|
+
if (screenSharingParticipantSid) {
|
|
41
|
+
return participants.find(function (p) { return p.sid === screenSharingParticipantSid; }) || null;
|
|
42
|
+
}
|
|
43
|
+
return null;
|
|
44
|
+
})();
|
|
45
|
+
var isScreenShareActive = screenShareParticipant !== null;
|
|
46
|
+
// All participants for the camera strip (local + remote)
|
|
47
|
+
var allParticipants = __spreadArray([
|
|
48
|
+
localParticipant
|
|
49
|
+
], participants, true);
|
|
50
|
+
if (isScreenShareActive) {
|
|
51
|
+
// Presentation layout: screen share large on top, camera strip on bottom
|
|
52
|
+
return ((0, jsx_runtime_1.jsxs)(material_1.Box, __assign({ sx: __assign({ display: 'flex', flexDirection: 'column', height: '100%', width: '100%', backgroundColor: '#1a1a1a' }, style) }, { children: [(0, jsx_runtime_1.jsx)(material_1.Box, __assign({ sx: {
|
|
53
|
+
flex: 1,
|
|
54
|
+
overflow: 'hidden',
|
|
55
|
+
minHeight: 0,
|
|
56
|
+
} }, { children: (0, jsx_runtime_1.jsx)(TwilioParticipant_1.TwilioParticipant, { participant: screenShareParticipant, isLocal: screenShareParticipant === localParticipant, showScreenShare: true, resolveIdentity: resolveIdentity }) })), (0, jsx_runtime_1.jsx)(material_1.Box, __assign({ sx: {
|
|
57
|
+
height: 120,
|
|
58
|
+
display: 'flex',
|
|
59
|
+
flexDirection: 'row',
|
|
60
|
+
gap: 1,
|
|
61
|
+
padding: 1,
|
|
62
|
+
overflowX: 'auto',
|
|
63
|
+
flexShrink: 0,
|
|
64
|
+
} }, { children: allParticipants.map(function (p) { return ((0, jsx_runtime_1.jsx)(material_1.Box, __assign({ sx: {
|
|
65
|
+
height: '100%',
|
|
66
|
+
aspectRatio: '4/3',
|
|
67
|
+
flexShrink: 0,
|
|
68
|
+
borderRadius: 1,
|
|
69
|
+
overflow: 'hidden',
|
|
70
|
+
} }, { children: (0, jsx_runtime_1.jsx)(TwilioParticipant_1.TwilioParticipant, { participant: p, isLocal: p === localParticipant, showScreenShare: false, resolveIdentity: resolveIdentity }) }), p.sid)); }) })), (0, jsx_runtime_1.jsx)(TwilioControls_1.TwilioControlBar, { onLeave: onLeave, onEndForAll: onEndForAll, showScreenShare: showScreenShareProp })] })));
|
|
71
|
+
}
|
|
72
|
+
// Normal layout (no screen share active)
|
|
27
73
|
return ((0, jsx_runtime_1.jsxs)(material_1.Box, __assign({ sx: __assign({ display: 'flex', flexDirection: 'column', height: '100%', width: '100%', backgroundColor: '#1a1a1a' }, style) }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, __assign({ sx: {
|
|
28
74
|
flex: 1,
|
|
29
75
|
position: 'relative',
|
|
@@ -43,7 +89,7 @@ var TwilioVideoRoom = function (_a) {
|
|
|
43
89
|
borderRadius: 1,
|
|
44
90
|
overflow: 'hidden',
|
|
45
91
|
boxShadow: '0 2px 8px rgba(0,0,0,0.3)',
|
|
46
|
-
} }, { children: (0, jsx_runtime_1.jsx)(TwilioParticipant_1.TwilioParticipant, { participant: localParticipant, isLocal: true, resolveIdentity: resolveIdentity }) })))] })), (0, jsx_runtime_1.jsx)(TwilioControls_1.TwilioControlBar, { onLeave: onLeave, onEndForAll: onEndForAll })] })));
|
|
92
|
+
} }, { children: (0, jsx_runtime_1.jsx)(TwilioParticipant_1.TwilioParticipant, { participant: localParticipant, isLocal: true, resolveIdentity: resolveIdentity }) })))] })), (0, jsx_runtime_1.jsx)(TwilioControls_1.TwilioControlBar, { onLeave: onLeave, onEndForAll: onEndForAll, showScreenShare: showScreenShareProp })] })));
|
|
47
93
|
};
|
|
48
94
|
exports.TwilioVideoRoom = TwilioVideoRoom;
|
|
49
95
|
//# 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,9 +1,10 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.TwilioLocalPreview = exports.TwilioVideoRoom = exports.TwilioControlBar = exports.TwilioParticipant = exports.useTwilioMeetingForCalendarEvent = exports.useJoinTwilioVideoCall = exports.useStartTwilioVideoCall = exports.useTwilioVideo = exports.TwilioVideoProvider = void 0;
|
|
3
|
+
exports.TwilioLocalPreview = exports.TwilioVideoRoom = exports.TwilioControlBar = exports.TwilioParticipant = exports.useTwilioMeetingForCalendarEvent = exports.useJoinTwilioVideoCall = exports.useStartTwilioVideoCall = exports.SCREEN_SHARE_TRACK_NAME = exports.useTwilioVideo = exports.TwilioVideoProvider = void 0;
|
|
4
4
|
var TwilioVideoContext_1 = require("./TwilioVideoContext");
|
|
5
5
|
Object.defineProperty(exports, "TwilioVideoProvider", { enumerable: true, get: function () { return TwilioVideoContext_1.TwilioVideoProvider; } });
|
|
6
6
|
Object.defineProperty(exports, "useTwilioVideo", { enumerable: true, get: function () { return TwilioVideoContext_1.useTwilioVideo; } });
|
|
7
|
+
Object.defineProperty(exports, "SCREEN_SHARE_TRACK_NAME", { enumerable: true, get: function () { return TwilioVideoContext_1.SCREEN_SHARE_TRACK_NAME; } });
|
|
7
8
|
var hooks_1 = require("./hooks");
|
|
8
9
|
Object.defineProperty(exports, "useStartTwilioVideoCall", { enumerable: true, get: function () { return hooks_1.useStartTwilioVideoCall; } });
|
|
9
10
|
Object.defineProperty(exports, "useJoinTwilioVideoCall", { enumerable: true, get: function () { return hooks_1.useJoinTwilioVideoCall; } });
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/TwilioVideo/index.ts"],"names":[],"mappings":";;;AAAA,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/TwilioVideo/index.ts"],"names":[],"mappings":";;;AAAA,2DAQ6B;AAP3B,yHAAA,mBAAmB,OAAA;AACnB,oHAAA,cAAc,OAAA;AACd,6HAAA,uBAAuB,OAAA;AAOzB,iCAIgB;AAHd,gHAAA,uBAAuB,OAAA;AACvB,+GAAA,sBAAsB,OAAA;AACtB,yHAAA,gCAAgC,OAAA;AAGlC,yDAAoF;AAA3E,sHAAA,iBAAiB,OAAA;AAC1B,mDAA+E;AAAtE,kHAAA,gBAAgB,OAAA;AACzB,qDAA8E;AAArE,kHAAA,eAAe,OAAA;AACxB,2DAAuF;AAA9E,wHAAA,kBAAkB,OAAA"}
|
|
@@ -3,6 +3,8 @@ export interface TwilioControlBarProps {
|
|
|
3
3
|
onLeave?: () => void;
|
|
4
4
|
onEndForAll?: () => void;
|
|
5
5
|
style?: React.CSSProperties;
|
|
6
|
+
/** Whether to show the screen share button. Defaults to true. */
|
|
7
|
+
showScreenShare?: boolean;
|
|
6
8
|
}
|
|
7
9
|
export declare const TwilioControlBar: React.FC<TwilioControlBarProps>;
|
|
8
10
|
//# sourceMappingURL=TwilioControls.d.ts.map
|