@stream-io/video-react-sdk 0.0.16 → 0.0.18
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 +18 -0
- package/dist/src/components/CallParticipantsList/CallParticipantListingItem.d.ts +2 -1
- package/dist/src/components/CallParticipantsList/CallParticipantListingItem.js +24 -3
- package/dist/src/components/CallParticipantsList/CallParticipantListingItem.js.map +1 -1
- package/dist/src/core/components/ParticipantView/DefaultParticipantViewUI.js +2 -2
- package/dist/src/core/components/ParticipantView/DefaultParticipantViewUI.js.map +1 -1
- package/package.json +3 -3
- package/src/components/CallParticipantsList/CallParticipantListingItem.tsx +55 -1
- package/src/core/components/ParticipantView/DefaultParticipantViewUI.tsx +2 -1
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,24 @@
|
|
|
2
2
|
|
|
3
3
|
This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
|
|
4
4
|
|
|
5
|
+
### [0.0.18](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-0.0.17...@stream-io/video-react-sdk-0.0.18) (2023-06-09)
|
|
6
|
+
|
|
7
|
+
### Dependency Updates
|
|
8
|
+
|
|
9
|
+
* `@stream-io/video-client` updated to version `0.0.1`
|
|
10
|
+
* `@stream-io/video-react-bindings` updated to version `0.0.8`
|
|
11
|
+
|
|
12
|
+
### Features
|
|
13
|
+
|
|
14
|
+
* **react-sdk:** Picture-in-Picture Pronto integration + guide ([#614](https://github.com/GetStream/stream-video-js/issues/614)) ([5b7662a](https://github.com/GetStream/stream-video-js/commit/5b7662a8d17f151796d58c6eed2d9fed7d3d9ba8))
|
|
15
|
+
|
|
16
|
+
### [0.0.17](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-0.0.16...@stream-io/video-react-sdk-0.0.17) (2023-06-08)
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
### Documentation
|
|
20
|
+
|
|
21
|
+
* pull token generator from shared repo ([#615](https://github.com/GetStream/stream-video-js/issues/615)) ([fcf0093](https://github.com/GetStream/stream-video-js/commit/fcf009300307fb08a08346ef01981cb2ea254851))
|
|
22
|
+
|
|
5
23
|
### [0.0.16](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-0.0.15...@stream-io/video-react-sdk-0.0.16) (2023-06-08)
|
|
6
24
|
|
|
7
25
|
### Dependency Updates
|
|
@@ -9,8 +9,9 @@ type CallParticipantListingItemProps = {
|
|
|
9
9
|
}>;
|
|
10
10
|
};
|
|
11
11
|
export declare const CallParticipantListingItem: ({ participant, DisplayName, }: CallParticipantListingItemProps) => JSX.Element;
|
|
12
|
-
export declare const ParticipantActionsContextMenu: ({ participant, participantViewElement, }: {
|
|
12
|
+
export declare const ParticipantActionsContextMenu: ({ participant, participantViewElement, videoElement, }: {
|
|
13
13
|
participant: StreamVideoParticipant;
|
|
14
14
|
participantViewElement?: HTMLDivElement | null | undefined;
|
|
15
|
+
videoElement?: HTMLVideoElement | null | undefined;
|
|
15
16
|
}) => JSX.Element;
|
|
16
17
|
export {};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import clsx from 'clsx';
|
|
3
|
-
import { forwardRef, useState } from 'react';
|
|
3
|
+
import { forwardRef, useEffect, useState, } from 'react';
|
|
4
4
|
import { Restricted, useCall, useConnectedUser, } from '@stream-io/video-react-bindings';
|
|
5
5
|
import { OwnCapability, SfuModels, } from '@stream-io/video-client';
|
|
6
6
|
import { IconButton } from '../Button';
|
|
@@ -34,8 +34,9 @@ const DefaultDisplayName = ({ participant }) => {
|
|
|
34
34
|
const ToggleButton = forwardRef((props, ref) => {
|
|
35
35
|
return _jsx(IconButton, { enabled: props.menuShown, icon: "ellipsis", ref: ref });
|
|
36
36
|
});
|
|
37
|
-
export const ParticipantActionsContextMenu = ({ participant, participantViewElement, }) => {
|
|
37
|
+
export const ParticipantActionsContextMenu = ({ participant, participantViewElement, videoElement, }) => {
|
|
38
38
|
const [fullscreenModeOn, setFullscreenModeOn] = useState(!!document.fullscreenElement);
|
|
39
|
+
const [pictureInPictureElement, setPictureInPictureElement] = useState(document.pictureInPictureElement);
|
|
39
40
|
const activeCall = useCall();
|
|
40
41
|
const blockUser = () => {
|
|
41
42
|
activeCall === null || activeCall === void 0 ? void 0 : activeCall.blockUser(participant.userId);
|
|
@@ -80,6 +81,26 @@ export const ParticipantActionsContextMenu = ({ participant, participantViewElem
|
|
|
80
81
|
.catch(console.error)
|
|
81
82
|
.finally(() => setFullscreenModeOn(false));
|
|
82
83
|
};
|
|
83
|
-
|
|
84
|
+
useEffect(() => {
|
|
85
|
+
if (!videoElement)
|
|
86
|
+
return;
|
|
87
|
+
const handlePictureInPicture = () => {
|
|
88
|
+
setPictureInPictureElement(document.pictureInPictureElement);
|
|
89
|
+
};
|
|
90
|
+
videoElement.addEventListener('enterpictureinpicture', handlePictureInPicture);
|
|
91
|
+
videoElement.addEventListener('leavepictureinpicture', handlePictureInPicture);
|
|
92
|
+
return () => {
|
|
93
|
+
videoElement.removeEventListener('enterpictureinpicture', handlePictureInPicture);
|
|
94
|
+
videoElement.removeEventListener('leavepictureinpicture', handlePictureInPicture);
|
|
95
|
+
};
|
|
96
|
+
}, [videoElement]);
|
|
97
|
+
const togglePictureInPicture = () => {
|
|
98
|
+
if (videoElement && pictureInPictureElement !== videoElement)
|
|
99
|
+
return videoElement
|
|
100
|
+
.requestPictureInPicture()
|
|
101
|
+
.catch(console.error);
|
|
102
|
+
document.exitPictureInPicture().catch(console.error);
|
|
103
|
+
};
|
|
104
|
+
return (_jsxs(GenericMenu, { children: [_jsxs(GenericMenuButtonItem, Object.assign({ onClick: toggleParticipantPinnedAt }, { children: [_jsx(Icon, { icon: "pin" }), participant.pinnedAt ? 'Unpin' : 'Pin'] })), _jsx(Restricted, Object.assign({ requiredGrants: [OwnCapability.BLOCK_USERS] }, { children: _jsxs(GenericMenuButtonItem, Object.assign({ onClick: blockUser }, { children: [_jsx(Icon, { icon: "not-allowed" }), "Block"] })) })), _jsxs(Restricted, Object.assign({ requiredGrants: [OwnCapability.MUTE_USERS] }, { children: [_jsxs(GenericMenuButtonItem, Object.assign({ disabled: !participant.publishedTracks.includes(SfuModels.TrackType.VIDEO), onClick: muteVideo }, { children: [_jsx(Icon, { icon: "camera-off-outline" }), "Turn off video"] })), _jsxs(GenericMenuButtonItem, Object.assign({ disabled: !participant.publishedTracks.includes(SfuModels.TrackType.SCREEN_SHARE), onClick: muteScreenShare }, { children: [_jsx(Icon, { icon: "screen-share-off" }), "Turn off screen share"] })), _jsxs(GenericMenuButtonItem, Object.assign({ disabled: !participant.publishedTracks.includes(SfuModels.TrackType.AUDIO), onClick: muteAudio }, { children: [_jsx(Icon, { icon: "no-audio" }), "Mute audio"] }))] })), participantViewElement && (_jsxs(GenericMenuButtonItem, Object.assign({ onClick: toggleFullscreenMode }, { children: [fullscreenModeOn ? 'Leave' : 'Enter', " fullscreen"] }))), videoElement && document.pictureInPictureEnabled && (_jsxs(GenericMenuButtonItem, Object.assign({ onClick: togglePictureInPicture }, { children: [pictureInPictureElement === videoElement ? 'Leave' : 'Enter', ' ', "picture-in-picture"] }))), _jsxs(Restricted, Object.assign({ requiredGrants: [OwnCapability.UPDATE_CALL_PERMISSIONS] }, { children: [_jsx(GenericMenuButtonItem, Object.assign({ onClick: grantPermission(OwnCapability.SEND_AUDIO) }, { children: "Allow audio" })), _jsx(GenericMenuButtonItem, Object.assign({ onClick: grantPermission(OwnCapability.SEND_VIDEO) }, { children: "Allow video" })), _jsx(GenericMenuButtonItem, Object.assign({ onClick: grantPermission(OwnCapability.SCREENSHARE) }, { children: "Allow screen sharing" })), _jsx(GenericMenuButtonItem, Object.assign({ onClick: revokePermission(OwnCapability.SEND_AUDIO) }, { children: "Disable audio" })), _jsx(GenericMenuButtonItem, Object.assign({ onClick: revokePermission(OwnCapability.SEND_VIDEO) }, { children: "Disable video" })), _jsx(GenericMenuButtonItem, Object.assign({ onClick: revokePermission(OwnCapability.SCREENSHARE) }, { children: "Disable screen sharing" }))] }))] }));
|
|
84
105
|
};
|
|
85
106
|
//# sourceMappingURL=CallParticipantListingItem.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CallParticipantListingItem.js","sourceRoot":"","sources":["../../../../src/components/CallParticipantsList/CallParticipantListingItem.tsx"],"names":[],"mappings":";AAAA,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,
|
|
1
|
+
{"version":3,"file":"CallParticipantListingItem.js","sourceRoot":"","sources":["../../../../src/components/CallParticipantsList/CallParticipantListingItem.tsx"],"names":[],"mappings":"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"}
|
|
@@ -21,12 +21,12 @@ export const DefaultScreenShareOverlay = () => {
|
|
|
21
21
|
};
|
|
22
22
|
export const DefaultParticipantViewUI = ({ indicatorsVisible = true, menuPlacement = 'bottom-end', showMenuButton = true, }) => {
|
|
23
23
|
const call = useCall();
|
|
24
|
-
const { participant, participantViewElement, videoKind } = useParticipantViewContext();
|
|
24
|
+
const { participant, participantViewElement, videoKind, videoElement } = useParticipantViewContext();
|
|
25
25
|
const { reaction, sessionId, publishedTracks } = participant;
|
|
26
26
|
const hasScreenShare = publishedTracks.includes(SfuModels.TrackType.SCREEN_SHARE);
|
|
27
27
|
if (participant.isLoggedInUser && hasScreenShare && videoKind === 'screen')
|
|
28
28
|
return (_jsxs(_Fragment, { children: [_jsx(DefaultScreenShareOverlay, {}), _jsx(ParticipantDetails, { indicatorsVisible: indicatorsVisible })] }));
|
|
29
|
-
return (_jsxs(_Fragment, { children: [showMenuButton && (_jsx(MenuToggle, Object.assign({ strategy: "fixed", placement: menuPlacement, ToggleButton: ToggleButton }, { children: _jsx(ParticipantActionsContextMenu, { participantViewElement: participantViewElement, participant: participant }) }))), reaction && (_jsx(Reaction, { reaction: reaction, sessionId: sessionId, call: call })), _jsx(ParticipantDetails, { indicatorsVisible: indicatorsVisible })] }));
|
|
29
|
+
return (_jsxs(_Fragment, { children: [showMenuButton && (_jsx(MenuToggle, Object.assign({ strategy: "fixed", placement: menuPlacement, ToggleButton: ToggleButton }, { children: _jsx(ParticipantActionsContextMenu, { participantViewElement: participantViewElement, participant: participant, videoElement: videoElement }) }))), reaction && (_jsx(Reaction, { reaction: reaction, sessionId: sessionId, call: call })), _jsx(ParticipantDetails, { indicatorsVisible: indicatorsVisible })] }));
|
|
30
30
|
};
|
|
31
31
|
export const ParticipantDetails = ({ indicatorsVisible = true, }) => {
|
|
32
32
|
const { participant } = useParticipantViewContext();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DefaultParticipantViewUI.js","sourceRoot":"","sources":["../../../../../src/core/components/ParticipantView/DefaultParticipantViewUI.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEnC,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AACpD,OAAO,EAAE,OAAO,EAAE,MAAM,iCAAiC,CAAC;AAC1D,OAAO,EAAE,IAAI,EAAE,MAAM,MAAM,CAAC;AAE5B,OAAO,EACL,IAAI,EACJ,UAAU,EACV,UAAU,EACV,YAAY,EACZ,6BAA6B,GAE9B,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,QAAQ,EAAE,MAAM,8BAA8B,CAAC;AAExD,OAAO,EAAE,8BAA8B,EAAE,MAAM,0DAA0D,CAAC;AAC1G,OAAO,EAAE,cAAc,EAAE,MAAM,0CAA0C,CAAC;AAC1E,OAAO,EAAE,cAAc,EAAE,MAAM,0CAA0C,CAAC;AAC1E,OAAO,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAiB9D,MAAM,YAAY,GAAG,UAAU,CAC7B,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IACb,OAAO,KAAC,UAAU,IAAC,OAAO,EAAE,KAAK,CAAC,SAAS,EAAE,IAAI,EAAC,UAAU,EAAC,GAAG,EAAE,GAAG,GAAI,CAAC;AAC5E,CAAC,CACF,CAAC;AAEF,MAAM,CAAC,MAAM,yBAAyB,GAAG,GAAG,EAAE;IAC5C,MAAM,IAAI,GAAG,OAAO,EAAE,CAAC;IAEvB,MAAM,eAAe,GAAG,GAAG,EAAE;QAC3B,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,WAAW,CAAC,SAAS,CAAC,SAAS,CAAC,YAAY,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;IAC3E,CAAC,CAAC;IAEF,OAAO,CACL,6BAAK,SAAS,EAAC,iCAAiC,iBAC9C,KAAC,IAAI,IAAC,IAAI,EAAC,kBAAkB,GAAG,EAChC,6BAAM,SAAS,EAAC,wCAAwC,oDAEjD,EACP,gCACE,OAAO,EAAE,eAAe,EACxB,SAAS,EAAC,yCAAyC,iBAEnD,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,GAAG,6BACd,KACL,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,wBAAwB,GAAG,CAAC,EACvC,iBAAiB,GAAG,IAAI,EACxB,aAAa,GAAG,YAAY,EAC5B,cAAc,GAAG,IAAI,GACS,EAAE,EAAE;IAClC,MAAM,IAAI,GAAG,OAAO,EAAG,CAAC;IACxB,MAAM,EAAE,WAAW,EAAE,sBAAsB,EAAE,SAAS,EAAE,
|
|
1
|
+
{"version":3,"file":"DefaultParticipantViewUI.js","sourceRoot":"","sources":["../../../../../src/core/components/ParticipantView/DefaultParticipantViewUI.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -26,8 +26,8 @@
|
|
|
26
26
|
"@nivo/core": "^0.80.0",
|
|
27
27
|
"@nivo/line": "^0.80.0",
|
|
28
28
|
"@stream-io/i18n": "^0.0.2",
|
|
29
|
-
"@stream-io/video-client": "^0.0.
|
|
30
|
-
"@stream-io/video-react-bindings": "^0.0.
|
|
29
|
+
"@stream-io/video-client": "^0.0.8",
|
|
30
|
+
"@stream-io/video-react-bindings": "^0.0.8",
|
|
31
31
|
"clsx": "^1.2.1",
|
|
32
32
|
"rxjs": "~7.8.1"
|
|
33
33
|
},
|
|
@@ -47,5 +47,5 @@
|
|
|
47
47
|
"typedoc": "^0.24.7",
|
|
48
48
|
"typescript": "^4.9.5"
|
|
49
49
|
},
|
|
50
|
-
"version": "0.0.
|
|
50
|
+
"version": "0.0.18"
|
|
51
51
|
}
|
|
@@ -1,5 +1,11 @@
|
|
|
1
1
|
import clsx from 'clsx';
|
|
2
|
-
import {
|
|
2
|
+
import {
|
|
3
|
+
ComponentProps,
|
|
4
|
+
ComponentType,
|
|
5
|
+
forwardRef,
|
|
6
|
+
useEffect,
|
|
7
|
+
useState,
|
|
8
|
+
} from 'react';
|
|
3
9
|
import {
|
|
4
10
|
Restricted,
|
|
5
11
|
useCall,
|
|
@@ -120,13 +126,18 @@ const ToggleButton = forwardRef<HTMLButtonElement, ToggleMenuButtonProps>(
|
|
|
120
126
|
export const ParticipantActionsContextMenu = ({
|
|
121
127
|
participant,
|
|
122
128
|
participantViewElement,
|
|
129
|
+
videoElement,
|
|
123
130
|
}: {
|
|
124
131
|
participant: StreamVideoParticipant;
|
|
125
132
|
participantViewElement?: HTMLDivElement | null;
|
|
133
|
+
videoElement?: HTMLVideoElement | null;
|
|
126
134
|
}) => {
|
|
127
135
|
const [fullscreenModeOn, setFullscreenModeOn] = useState(
|
|
128
136
|
!!document.fullscreenElement,
|
|
129
137
|
);
|
|
138
|
+
const [pictureInPictureElement, setPictureInPictureElement] = useState(
|
|
139
|
+
document.pictureInPictureElement,
|
|
140
|
+
);
|
|
130
141
|
const activeCall = useCall();
|
|
131
142
|
|
|
132
143
|
const blockUser = () => {
|
|
@@ -186,6 +197,43 @@ export const ParticipantActionsContextMenu = ({
|
|
|
186
197
|
.finally(() => setFullscreenModeOn(false));
|
|
187
198
|
};
|
|
188
199
|
|
|
200
|
+
useEffect(() => {
|
|
201
|
+
if (!videoElement) return;
|
|
202
|
+
|
|
203
|
+
const handlePictureInPicture = () => {
|
|
204
|
+
setPictureInPictureElement(document.pictureInPictureElement);
|
|
205
|
+
};
|
|
206
|
+
|
|
207
|
+
videoElement.addEventListener(
|
|
208
|
+
'enterpictureinpicture',
|
|
209
|
+
handlePictureInPicture,
|
|
210
|
+
);
|
|
211
|
+
videoElement.addEventListener(
|
|
212
|
+
'leavepictureinpicture',
|
|
213
|
+
handlePictureInPicture,
|
|
214
|
+
);
|
|
215
|
+
|
|
216
|
+
return () => {
|
|
217
|
+
videoElement.removeEventListener(
|
|
218
|
+
'enterpictureinpicture',
|
|
219
|
+
handlePictureInPicture,
|
|
220
|
+
);
|
|
221
|
+
videoElement.removeEventListener(
|
|
222
|
+
'leavepictureinpicture',
|
|
223
|
+
handlePictureInPicture,
|
|
224
|
+
);
|
|
225
|
+
};
|
|
226
|
+
}, [videoElement]);
|
|
227
|
+
|
|
228
|
+
const togglePictureInPicture = () => {
|
|
229
|
+
if (videoElement && pictureInPictureElement !== videoElement)
|
|
230
|
+
return videoElement
|
|
231
|
+
.requestPictureInPicture()
|
|
232
|
+
.catch(console.error) as Promise<void>;
|
|
233
|
+
|
|
234
|
+
document.exitPictureInPicture().catch(console.error);
|
|
235
|
+
};
|
|
236
|
+
|
|
189
237
|
return (
|
|
190
238
|
<GenericMenu>
|
|
191
239
|
<GenericMenuButtonItem onClick={toggleParticipantPinnedAt}>
|
|
@@ -237,6 +285,12 @@ export const ParticipantActionsContextMenu = ({
|
|
|
237
285
|
{fullscreenModeOn ? 'Leave' : 'Enter'} fullscreen
|
|
238
286
|
</GenericMenuButtonItem>
|
|
239
287
|
)}
|
|
288
|
+
{videoElement && document.pictureInPictureEnabled && (
|
|
289
|
+
<GenericMenuButtonItem onClick={togglePictureInPicture}>
|
|
290
|
+
{pictureInPictureElement === videoElement ? 'Leave' : 'Enter'}{' '}
|
|
291
|
+
picture-in-picture
|
|
292
|
+
</GenericMenuButtonItem>
|
|
293
|
+
)}
|
|
240
294
|
<Restricted requiredGrants={[OwnCapability.UPDATE_CALL_PERMISSIONS]}>
|
|
241
295
|
<GenericMenuButtonItem
|
|
242
296
|
onClick={grantPermission(OwnCapability.SEND_AUDIO)}
|
|
@@ -69,7 +69,7 @@ export const DefaultParticipantViewUI = ({
|
|
|
69
69
|
showMenuButton = true,
|
|
70
70
|
}: DefaultParticipantViewUIProps) => {
|
|
71
71
|
const call = useCall()!;
|
|
72
|
-
const { participant, participantViewElement, videoKind } =
|
|
72
|
+
const { participant, participantViewElement, videoKind, videoElement } =
|
|
73
73
|
useParticipantViewContext();
|
|
74
74
|
const { reaction, sessionId, publishedTracks } = participant;
|
|
75
75
|
|
|
@@ -96,6 +96,7 @@ export const DefaultParticipantViewUI = ({
|
|
|
96
96
|
<ParticipantActionsContextMenu
|
|
97
97
|
participantViewElement={participantViewElement}
|
|
98
98
|
participant={participant}
|
|
99
|
+
videoElement={videoElement}
|
|
99
100
|
/>
|
|
100
101
|
</MenuToggle>
|
|
101
102
|
)}
|