@stream-io/video-react-sdk 0.1.18 → 0.2.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/CHANGELOG.md +15 -0
- package/README.md +3 -2
- package/dist/src/components/CallParticipantsList/CallParticipantListingItem.js +48 -22
- package/dist/src/components/CallParticipantsList/CallParticipantListingItem.js.map +1 -1
- package/dist/src/core/components/ParticipantView/DefaultParticipantViewUI.js +4 -4
- package/dist/src/core/components/ParticipantView/DefaultParticipantViewUI.js.map +1 -1
- package/dist/src/translations/en.json +25 -0
- package/dist/src/translations/index.d.ts +25 -0
- package/dist/version.d.ts +1 -1
- package/dist/version.js +1 -1
- package/dist/version.js.map +1 -1
- package/package.json +3 -3
- package/src/components/CallParticipantsList/CallParticipantListingItem.tsx +96 -62
- package/src/core/components/ParticipantView/DefaultParticipantViewUI.tsx +4 -4
- package/src/translations/en.json +27 -1
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,21 @@
|
|
|
2
2
|
|
|
3
3
|
This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
|
|
4
4
|
|
|
5
|
+
## [0.2.0](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-0.1.18...@stream-io/video-react-sdk-0.2.0) (2023-08-07)
|
|
6
|
+
|
|
7
|
+
### Dependency Updates
|
|
8
|
+
|
|
9
|
+
* `@stream-io/video-client` updated to version `0.1.0`
|
|
10
|
+
* `@stream-io/video-react-bindings` updated to version `0.1.13`
|
|
11
|
+
|
|
12
|
+
### ⚠ BREAKING CHANGES
|
|
13
|
+
|
|
14
|
+
* Server-side participant pinning (#881)
|
|
15
|
+
|
|
16
|
+
### Features
|
|
17
|
+
|
|
18
|
+
* Server-side participant pinning ([#881](https://github.com/GetStream/stream-video-js/issues/881)) ([72829f1](https://github.com/GetStream/stream-video-js/commit/72829f1caf5b9c719d063a7e5175b7aa7431cd71))
|
|
19
|
+
|
|
5
20
|
### [0.1.18](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-0.1.17...@stream-io/video-react-sdk-0.1.18) (2023-08-04)
|
|
6
21
|
|
|
7
22
|
### Dependency Updates
|
package/README.md
CHANGED
|
@@ -56,11 +56,12 @@ Here are some of the features we support:
|
|
|
56
56
|
### 0.2 milestone
|
|
57
57
|
|
|
58
58
|
- [ ] Fast-reconnects
|
|
59
|
-
- [
|
|
59
|
+
- [x] ICE restarts
|
|
60
60
|
- [ ] SFU retries
|
|
61
61
|
- [ ] Enhanced SDK build system
|
|
62
62
|
- [ ] Hardware-accelerated video encoding on supported platforms
|
|
63
|
-
- [
|
|
63
|
+
- [x] React hooks for permissions management
|
|
64
|
+
- [x] Server-side participant pinning
|
|
64
65
|
- [ ] Increase test coverage
|
|
65
66
|
|
|
66
67
|
### 0.3 milestone
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import clsx from 'clsx';
|
|
3
3
|
import { forwardRef, useEffect, useState, } from 'react';
|
|
4
|
-
import { Restricted, useCall, useConnectedUser, } from '@stream-io/video-react-bindings';
|
|
4
|
+
import { Restricted, useCall, useConnectedUser, useI18n, } from '@stream-io/video-react-bindings';
|
|
5
5
|
import { OwnCapability, SfuModels, } from '@stream-io/video-client';
|
|
6
6
|
import { IconButton } from '../Button';
|
|
7
7
|
import { GenericMenu, GenericMenuButtonItem, MenuToggle, } from '../Menu';
|
|
@@ -10,18 +10,20 @@ import { Icon } from '../Icon';
|
|
|
10
10
|
export const CallParticipantListingItem = ({ participant, DisplayName = DefaultDisplayName, }) => {
|
|
11
11
|
const isAudioOn = participant.publishedTracks.includes(SfuModels.TrackType.AUDIO);
|
|
12
12
|
const isVideoOn = participant.publishedTracks.includes(SfuModels.TrackType.VIDEO);
|
|
13
|
-
const isPinned = !!participant.
|
|
14
|
-
|
|
13
|
+
const isPinned = !!participant.pin;
|
|
14
|
+
const { t } = useI18n();
|
|
15
|
+
return (_jsxs("div", Object.assign({ className: "str-video__participant-listing-item" }, { children: [_jsx(DisplayName, { participant: participant }), _jsxs("div", Object.assign({ className: "str-video__participant-listing-item__media-indicator-group" }, { children: [_jsx(MediaIndicator, { title: isAudioOn ? t('Microphone on') : t('Microphone off'), className: clsx('str-video__participant-listing-item__icon', `str-video__participant-listing-item__icon-${isAudioOn ? 'mic' : 'mic-off'}`) }), _jsx(MediaIndicator, { title: isVideoOn ? t('Camera on') : t('Camera off'), className: clsx('str-video__participant-listing-item__icon', `str-video__participant-listing-item__icon-${isVideoOn ? 'camera' : 'camera-off'}`) }), isPinned && (_jsx(MediaIndicator, { title: t('Pinned'), className: clsx('str-video__participant-listing-item__icon', 'str-video__participant-listing-item__icon-pinned') })), _jsx(MenuToggle, Object.assign({ placement: "bottom-end", ToggleButton: ToggleButton }, { children: _jsx(ParticipantActionsContextMenu, { participant: participant }) }))] }))] })));
|
|
15
16
|
};
|
|
16
17
|
const MediaIndicator = (props) => (_jsx(WithTooltip, Object.assign({}, props)));
|
|
17
18
|
// todo: implement display device flag
|
|
18
19
|
const DefaultDisplayName = ({ participant }) => {
|
|
19
20
|
const connectedUser = useConnectedUser();
|
|
20
|
-
const
|
|
21
|
-
const
|
|
21
|
+
const { t } = useI18n();
|
|
22
|
+
const meFlag = participant.userId === (connectedUser === null || connectedUser === void 0 ? void 0 : connectedUser.id) ? t('Me') : '';
|
|
23
|
+
const nameOrId = participant.name || participant.userId || t('Unknown');
|
|
22
24
|
let displayName;
|
|
23
25
|
if (!participant.name) {
|
|
24
|
-
displayName = meFlag || nameOrId || 'Unknown';
|
|
26
|
+
displayName = meFlag || nameOrId || t('Unknown');
|
|
25
27
|
}
|
|
26
28
|
else if (meFlag) {
|
|
27
29
|
displayName = `${nameOrId} (${meFlag})`;
|
|
@@ -38,40 +40,58 @@ export const ParticipantActionsContextMenu = ({ participant, participantViewElem
|
|
|
38
40
|
const [fullscreenModeOn, setFullscreenModeOn] = useState(!!document.fullscreenElement);
|
|
39
41
|
const [pictureInPictureElement, setPictureInPictureElement] = useState(document.pictureInPictureElement);
|
|
40
42
|
const activeCall = useCall();
|
|
43
|
+
const { t } = useI18n();
|
|
44
|
+
const { pin, publishedTracks, sessionId, userId } = participant;
|
|
45
|
+
const hasAudio = publishedTracks.includes(SfuModels.TrackType.AUDIO);
|
|
46
|
+
const hasVideo = publishedTracks.includes(SfuModels.TrackType.VIDEO);
|
|
47
|
+
const hasScreenShare = publishedTracks.includes(SfuModels.TrackType.SCREEN_SHARE);
|
|
41
48
|
const blockUser = () => {
|
|
42
|
-
activeCall === null || activeCall === void 0 ? void 0 : activeCall.blockUser(
|
|
49
|
+
activeCall === null || activeCall === void 0 ? void 0 : activeCall.blockUser(userId);
|
|
43
50
|
};
|
|
44
|
-
// FIXME: soft kicking does not work this way
|
|
45
|
-
// also needs to be session-based
|
|
46
|
-
// const kickUserClickHandler = () => {
|
|
47
|
-
// getCall()?.updateCallMembers({
|
|
48
|
-
// remove_members: [participant.userId],
|
|
49
|
-
// disconnectRemovedMembers: true,
|
|
50
|
-
// });
|
|
51
|
-
// };
|
|
52
51
|
const muteAudio = () => {
|
|
53
|
-
activeCall === null || activeCall === void 0 ? void 0 : activeCall.muteUser(
|
|
52
|
+
activeCall === null || activeCall === void 0 ? void 0 : activeCall.muteUser(userId, 'audio');
|
|
54
53
|
};
|
|
55
54
|
const muteVideo = () => {
|
|
56
|
-
activeCall === null || activeCall === void 0 ? void 0 : activeCall.muteUser(
|
|
55
|
+
activeCall === null || activeCall === void 0 ? void 0 : activeCall.muteUser(userId, 'video');
|
|
57
56
|
};
|
|
58
57
|
const muteScreenShare = () => {
|
|
59
|
-
activeCall === null || activeCall === void 0 ? void 0 : activeCall.muteUser(
|
|
58
|
+
activeCall === null || activeCall === void 0 ? void 0 : activeCall.muteUser(userId, 'screenshare');
|
|
60
59
|
};
|
|
61
60
|
const grantPermission = (permission) => () => {
|
|
62
61
|
activeCall === null || activeCall === void 0 ? void 0 : activeCall.updateUserPermissions({
|
|
63
|
-
user_id:
|
|
62
|
+
user_id: userId,
|
|
64
63
|
grant_permissions: [permission],
|
|
65
64
|
});
|
|
66
65
|
};
|
|
67
66
|
const revokePermission = (permission) => () => {
|
|
68
67
|
activeCall === null || activeCall === void 0 ? void 0 : activeCall.updateUserPermissions({
|
|
69
|
-
user_id:
|
|
68
|
+
user_id: userId,
|
|
70
69
|
revoke_permissions: [permission],
|
|
71
70
|
});
|
|
72
71
|
};
|
|
73
72
|
const toggleParticipantPinnedAt = () => {
|
|
74
|
-
|
|
73
|
+
if (pin) {
|
|
74
|
+
activeCall === null || activeCall === void 0 ? void 0 : activeCall.unpin(sessionId);
|
|
75
|
+
}
|
|
76
|
+
else {
|
|
77
|
+
activeCall === null || activeCall === void 0 ? void 0 : activeCall.pin(sessionId);
|
|
78
|
+
}
|
|
79
|
+
};
|
|
80
|
+
const pinForEveryone = () => {
|
|
81
|
+
activeCall === null || activeCall === void 0 ? void 0 : activeCall.pinForEveryone({
|
|
82
|
+
user_id: userId,
|
|
83
|
+
session_id: sessionId,
|
|
84
|
+
}).catch((err) => {
|
|
85
|
+
console.error(`Failed to pin participant ${userId}`, err);
|
|
86
|
+
});
|
|
87
|
+
};
|
|
88
|
+
const unpinForEveryone = () => {
|
|
89
|
+
activeCall === null || activeCall === void 0 ? void 0 : activeCall.unpinForEveryone({
|
|
90
|
+
user_id: userId,
|
|
91
|
+
session_id: sessionId,
|
|
92
|
+
}).catch((err) => {
|
|
93
|
+
console.error(`Failed to unpin participant ${userId}`, err);
|
|
94
|
+
});
|
|
75
95
|
};
|
|
76
96
|
const toggleFullscreenMode = () => {
|
|
77
97
|
if (!fullscreenModeOn)
|
|
@@ -101,6 +121,12 @@ export const ParticipantActionsContextMenu = ({ participant, participantViewElem
|
|
|
101
121
|
.catch(console.error);
|
|
102
122
|
document.exitPictureInPicture().catch(console.error);
|
|
103
123
|
};
|
|
104
|
-
return (_jsxs(GenericMenu, { children: [_jsxs(GenericMenuButtonItem, Object.assign({ onClick: toggleParticipantPinnedAt }, { children: [_jsx(Icon, { icon: "pin" }),
|
|
124
|
+
return (_jsxs(GenericMenu, { children: [_jsxs(GenericMenuButtonItem, Object.assign({ onClick: toggleParticipantPinnedAt, disabled: pin && !pin.isLocalPin }, { children: [_jsx(Icon, { icon: "pin" }), pin ? t('Unpin') : t('Pin')] })), _jsxs(Restricted, Object.assign({ requiredGrants: [OwnCapability.PIN_FOR_EVERYONE] }, { children: [_jsxs(GenericMenuButtonItem, Object.assign({ onClick: pinForEveryone, disabled: pin && !pin.isLocalPin }, { children: [_jsx(Icon, { icon: "pin" }), t('Pin for everyone')] })), _jsxs(GenericMenuButtonItem, Object.assign({ onClick: unpinForEveryone, disabled: !pin || pin.isLocalPin }, { children: [_jsx(Icon, { icon: "pin" }), t('Unpin for everyone')] }))] })), _jsx(Restricted, Object.assign({ requiredGrants: [OwnCapability.BLOCK_USERS] }, { children: _jsxs(GenericMenuButtonItem, Object.assign({ onClick: blockUser }, { children: [_jsx(Icon, { icon: "not-allowed" }), t('Block')] })) })), _jsxs(Restricted, Object.assign({ requiredGrants: [OwnCapability.MUTE_USERS] }, { children: [_jsxs(GenericMenuButtonItem, Object.assign({ disabled: !hasVideo, onClick: muteVideo }, { children: [_jsx(Icon, { icon: "camera-off-outline" }), t('Turn off video')] })), _jsxs(GenericMenuButtonItem, Object.assign({ disabled: !hasScreenShare, onClick: muteScreenShare }, { children: [_jsx(Icon, { icon: "screen-share-off" }), t('Turn off screen share')] })), _jsxs(GenericMenuButtonItem, Object.assign({ disabled: !hasAudio, onClick: muteAudio }, { children: [_jsx(Icon, { icon: "no-audio" }), t('Mute audio')] }))] })), participantViewElement && (_jsx(GenericMenuButtonItem, Object.assign({ onClick: toggleFullscreenMode }, { children: t('{{ direction }} fullscreen', {
|
|
125
|
+
direction: fullscreenModeOn ? t('Leave') : t('Enter'),
|
|
126
|
+
}) }))), videoElement && document.pictureInPictureEnabled && (_jsx(GenericMenuButtonItem, Object.assign({ onClick: togglePictureInPicture }, { children: t('{{ direction }} picture-in-picture', {
|
|
127
|
+
direction: pictureInPictureElement === videoElement
|
|
128
|
+
? t('Leave')
|
|
129
|
+
: t('Enter'),
|
|
130
|
+
}) }))), _jsxs(Restricted, Object.assign({ requiredGrants: [OwnCapability.UPDATE_CALL_PERMISSIONS] }, { children: [_jsx(GenericMenuButtonItem, Object.assign({ onClick: grantPermission(OwnCapability.SEND_AUDIO) }, { children: t('Allow audio') })), _jsx(GenericMenuButtonItem, Object.assign({ onClick: grantPermission(OwnCapability.SEND_VIDEO) }, { children: t('Allow video') })), _jsx(GenericMenuButtonItem, Object.assign({ onClick: grantPermission(OwnCapability.SCREENSHARE) }, { children: t('Allow screen sharing') })), _jsx(GenericMenuButtonItem, Object.assign({ onClick: revokePermission(OwnCapability.SEND_AUDIO) }, { children: t('Disable audio') })), _jsx(GenericMenuButtonItem, Object.assign({ onClick: revokePermission(OwnCapability.SEND_VIDEO) }, { children: t('Disable video') })), _jsx(GenericMenuButtonItem, Object.assign({ onClick: revokePermission(OwnCapability.SCREENSHARE) }, { children: t('Disable screen sharing') }))] }))] }));
|
|
105
131
|
};
|
|
106
132
|
//# 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,EAGL,UAAU,EACV,SAAS,EACT,QAAQ,GACT,MAAM,OAAO,CAAC;AACf,OAAO,EACL,UAAU,EACV,OAAO,EACP,gBAAgB,
|
|
1
|
+
{"version":3,"file":"CallParticipantListingItem.js","sourceRoot":"","sources":["../../../../src/components/CallParticipantsList/CallParticipantListingItem.tsx"],"names":[],"mappings":";AAAA,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAGL,UAAU,EACV,SAAS,EACT,QAAQ,GACT,MAAM,OAAO,CAAC;AACf,OAAO,EACL,UAAU,EACV,OAAO,EACP,gBAAgB,EAChB,OAAO,GACR,MAAM,iCAAiC,CAAC;AACzC,OAAO,EACL,aAAa,EACb,SAAS,GAEV,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AACvC,OAAO,EACL,WAAW,EACX,qBAAqB,EACrB,UAAU,GAEX,MAAM,SAAS,CAAC;AACjB,OAAO,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AACzC,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAQ/B,MAAM,CAAC,MAAM,0BAA0B,GAAG,CAAC,EACzC,WAAW,EACX,WAAW,GAAG,kBAAkB,GACA,EAAE,EAAE;IACpC,MAAM,SAAS,GAAG,WAAW,CAAC,eAAe,CAAC,QAAQ,CACpD,SAAS,CAAC,SAAS,CAAC,KAAK,CAC1B,CAAC;IACF,MAAM,SAAS,GAAG,WAAW,CAAC,eAAe,CAAC,QAAQ,CACpD,SAAS,CAAC,SAAS,CAAC,KAAK,CAC1B,CAAC;IACF,MAAM,QAAQ,GAAG,CAAC,CAAC,WAAW,CAAC,GAAG,CAAC;IAEnC,MAAM,EAAE,CAAC,EAAE,GAAG,OAAO,EAAE,CAAC;IAExB,OAAO,CACL,6BAAK,SAAS,EAAC,qCAAqC,iBAClD,KAAC,WAAW,IAAC,WAAW,EAAE,WAAW,GAAI,EACzC,6BAAK,SAAS,EAAC,4DAA4D,iBACzE,KAAC,cAAc,IACb,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,gBAAgB,CAAC,EAC3D,SAAS,EAAE,IAAI,CACb,2CAA2C,EAC3C,6CACE,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SACtB,EAAE,CACH,GACD,EACF,KAAC,cAAc,IACb,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,EACnD,SAAS,EAAE,IAAI,CACb,2CAA2C,EAC3C,6CACE,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,YACzB,EAAE,CACH,GACD,EACD,QAAQ,IAAI,CACX,KAAC,cAAc,IACb,KAAK,EAAE,CAAC,CAAC,QAAQ,CAAC,EAClB,SAAS,EAAE,IAAI,CACb,2CAA2C,EAC3C,kDAAkD,CACnD,GACD,CACH,EAED,KAAC,UAAU,kBAAC,SAAS,EAAC,YAAY,EAAC,YAAY,EAAE,YAAY,gBAC3D,KAAC,6BAA6B,IAAC,WAAW,EAAE,WAAW,GAAI,IAChD,KACT,KACF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,cAAc,GAAG,CAAC,KAA4B,EAAE,EAAE,CAAC,CACvD,KAAC,WAAW,oBAAK,KAAK,EAAI,CAC3B,CAAC;AAMF,sCAAsC;AACtC,MAAM,kBAAkB,GAAG,CAAC,EAAE,WAAW,EAAoB,EAAE,EAAE;IAC/D,MAAM,aAAa,GAAG,gBAAgB,EAAE,CAAC;IACzC,MAAM,EAAE,CAAC,EAAE,GAAG,OAAO,EAAE,CAAC;IAExB,MAAM,MAAM,GAAG,WAAW,CAAC,MAAM,MAAK,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,EAAE,CAAA,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;IACvE,MAAM,QAAQ,GAAG,WAAW,CAAC,IAAI,IAAI,WAAW,CAAC,MAAM,IAAI,CAAC,CAAC,SAAS,CAAC,CAAC;IACxE,IAAI,WAAW,CAAC;IAChB,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE;QACrB,WAAW,GAAG,MAAM,IAAI,QAAQ,IAAI,CAAC,CAAC,SAAS,CAAC,CAAC;KAClD;SAAM,IAAI,MAAM,EAAE;QACjB,WAAW,GAAG,GAAG,QAAQ,KAAK,MAAM,GAAG,CAAC;KACzC;SAAM;QACL,WAAW,GAAG,QAAQ,CAAC;KACxB;IAED,OAAO,CACL,KAAC,WAAW,kBACV,SAAS,EAAC,mDAAmD,EAC7D,KAAK,EAAE,WAAW,gBAEjB,WAAW,IACA,CACf,CAAC;AACJ,CAAC,CAAC;AAEF,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,6BAA6B,GAAG,CAAC,EAC5C,WAAW,EACX,sBAAsB,EACtB,YAAY,GAKb,EAAE,EAAE;IACH,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,QAAQ,CACtD,CAAC,CAAC,QAAQ,CAAC,iBAAiB,CAC7B,CAAC;IACF,MAAM,CAAC,uBAAuB,EAAE,0BAA0B,CAAC,GAAG,QAAQ,CACpE,QAAQ,CAAC,uBAAuB,CACjC,CAAC;IACF,MAAM,UAAU,GAAG,OAAO,EAAE,CAAC;IAC7B,MAAM,EAAE,CAAC,EAAE,GAAG,OAAO,EAAE,CAAC;IAExB,MAAM,EAAE,GAAG,EAAE,eAAe,EAAE,SAAS,EAAE,MAAM,EAAE,GAAG,WAAW,CAAC;IAEhE,MAAM,QAAQ,GAAG,eAAe,CAAC,QAAQ,CAAC,SAAS,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;IACrE,MAAM,QAAQ,GAAG,eAAe,CAAC,QAAQ,CAAC,SAAS,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;IACrE,MAAM,cAAc,GAAG,eAAe,CAAC,QAAQ,CAC7C,SAAS,CAAC,SAAS,CAAC,YAAY,CACjC,CAAC;IAEF,MAAM,SAAS,GAAG,GAAG,EAAE;QACrB,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,SAAS,CAAC,MAAM,CAAC,CAAC;IAChC,CAAC,CAAC;IACF,MAAM,SAAS,GAAG,GAAG,EAAE;QACrB,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,QAAQ,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACxC,CAAC,CAAC;IACF,MAAM,SAAS,GAAG,GAAG,EAAE;QACrB,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,QAAQ,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACxC,CAAC,CAAC;IACF,MAAM,eAAe,GAAG,GAAG,EAAE;QAC3B,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,QAAQ,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC;IAC9C,CAAC,CAAC;IAEF,MAAM,eAAe,GAAG,CAAC,UAAkB,EAAE,EAAE,CAAC,GAAG,EAAE;QACnD,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,qBAAqB,CAAC;YAChC,OAAO,EAAE,MAAM;YACf,iBAAiB,EAAE,CAAC,UAAU,CAAC;SAChC,CAAC,CAAC;IACL,CAAC,CAAC;IAEF,MAAM,gBAAgB,GAAG,CAAC,UAAkB,EAAE,EAAE,CAAC,GAAG,EAAE;QACpD,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,qBAAqB,CAAC;YAChC,OAAO,EAAE,MAAM;YACf,kBAAkB,EAAE,CAAC,UAAU,CAAC;SACjC,CAAC,CAAC;IACL,CAAC,CAAC;IAEF,MAAM,yBAAyB,GAAG,GAAG,EAAE;QACrC,IAAI,GAAG,EAAE;YACP,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,KAAK,CAAC,SAAS,CAAC,CAAC;SAC9B;aAAM;YACL,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,GAAG,CAAC,SAAS,CAAC,CAAC;SAC5B;IACH,CAAC,CAAC;IAEF,MAAM,cAAc,GAAG,GAAG,EAAE;QAC1B,UAAU,aAAV,UAAU,uBAAV,UAAU,CACN,cAAc,CAAC;YACf,OAAO,EAAE,MAAM;YACf,UAAU,EAAE,SAAS;SACtB,EACA,KAAK,CAAC,CAAC,GAAG,EAAE,EAAE;YACb,OAAO,CAAC,KAAK,CAAC,6BAA6B,MAAM,EAAE,EAAE,GAAG,CAAC,CAAC;QAC5D,CAAC,CAAC,CAAC;IACP,CAAC,CAAC;IAEF,MAAM,gBAAgB,GAAG,GAAG,EAAE;QAC5B,UAAU,aAAV,UAAU,uBAAV,UAAU,CACN,gBAAgB,CAAC;YACjB,OAAO,EAAE,MAAM;YACf,UAAU,EAAE,SAAS;SACtB,EACA,KAAK,CAAC,CAAC,GAAG,EAAE,EAAE;YACb,OAAO,CAAC,KAAK,CAAC,+BAA+B,MAAM,EAAE,EAAE,GAAG,CAAC,CAAC;QAC9D,CAAC,CAAC,CAAC;IACP,CAAC,CAAC;IAEF,MAAM,oBAAoB,GAAG,GAAG,EAAE;QAChC,IAAI,CAAC,gBAAgB;YACnB,OAAO,sBAAsB,aAAtB,sBAAsB,uBAAtB,sBAAsB,CACzB,iBAAiB,GAClB,IAAI,CAAC,GAAG,EAAE,CAAC,mBAAmB,CAAC,IAAI,CAAC,EACpC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;QAE1B,QAAQ;aACL,cAAc,EAAE;aAChB,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC;aACpB,OAAO,CAAC,GAAG,EAAE,CAAC,mBAAmB,CAAC,KAAK,CAAC,CAAC,CAAC;IAC/C,CAAC,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,YAAY;YAAE,OAAO;QAE1B,MAAM,sBAAsB,GAAG,GAAG,EAAE;YAClC,0BAA0B,CAAC,QAAQ,CAAC,uBAAuB,CAAC,CAAC;QAC/D,CAAC,CAAC;QAEF,YAAY,CAAC,gBAAgB,CAC3B,uBAAuB,EACvB,sBAAsB,CACvB,CAAC;QACF,YAAY,CAAC,gBAAgB,CAC3B,uBAAuB,EACvB,sBAAsB,CACvB,CAAC;QAEF,OAAO,GAAG,EAAE;YACV,YAAY,CAAC,mBAAmB,CAC9B,uBAAuB,EACvB,sBAAsB,CACvB,CAAC;YACF,YAAY,CAAC,mBAAmB,CAC9B,uBAAuB,EACvB,sBAAsB,CACvB,CAAC;QACJ,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;IAEnB,MAAM,sBAAsB,GAAG,GAAG,EAAE;QAClC,IAAI,YAAY,IAAI,uBAAuB,KAAK,YAAY;YAC1D,OAAO,YAAY;iBAChB,uBAAuB,EAAE;iBACzB,KAAK,CAAC,OAAO,CAAC,KAAK,CAAkB,CAAC;QAE3C,QAAQ,CAAC,oBAAoB,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;IACvD,CAAC,CAAC;IAEF,OAAO,CACL,MAAC,WAAW,eACV,MAAC,qBAAqB,kBACpB,OAAO,EAAE,yBAAyB,EAClC,QAAQ,EAAE,GAAG,IAAI,CAAC,GAAG,CAAC,UAAU,iBAEhC,KAAC,IAAI,IAAC,IAAI,EAAC,KAAK,GAAG,EAClB,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,KACN,EACxB,MAAC,UAAU,kBAAC,cAAc,EAAE,CAAC,aAAa,CAAC,gBAAgB,CAAC,iBAC1D,MAAC,qBAAqB,kBACpB,OAAO,EAAE,cAAc,EACvB,QAAQ,EAAE,GAAG,IAAI,CAAC,GAAG,CAAC,UAAU,iBAEhC,KAAC,IAAI,IAAC,IAAI,EAAC,KAAK,GAAG,EAClB,CAAC,CAAC,kBAAkB,CAAC,KACA,EACxB,MAAC,qBAAqB,kBACpB,OAAO,EAAE,gBAAgB,EACzB,QAAQ,EAAE,CAAC,GAAG,IAAI,GAAG,CAAC,UAAU,iBAEhC,KAAC,IAAI,IAAC,IAAI,EAAC,KAAK,GAAG,EAClB,CAAC,CAAC,oBAAoB,CAAC,KACF,KACb,EACb,KAAC,UAAU,kBAAC,cAAc,EAAE,CAAC,aAAa,CAAC,WAAW,CAAC,gBACrD,MAAC,qBAAqB,kBAAC,OAAO,EAAE,SAAS,iBACvC,KAAC,IAAI,IAAC,IAAI,EAAC,aAAa,GAAG,EAC1B,CAAC,CAAC,OAAO,CAAC,KACW,IACb,EACb,MAAC,UAAU,kBAAC,cAAc,EAAE,CAAC,aAAa,CAAC,UAAU,CAAC,iBACpD,MAAC,qBAAqB,kBAAC,QAAQ,EAAE,CAAC,QAAQ,EAAE,OAAO,EAAE,SAAS,iBAC5D,KAAC,IAAI,IAAC,IAAI,EAAC,oBAAoB,GAAG,EACjC,CAAC,CAAC,gBAAgB,CAAC,KACE,EACxB,MAAC,qBAAqB,kBACpB,QAAQ,EAAE,CAAC,cAAc,EACzB,OAAO,EAAE,eAAe,iBAExB,KAAC,IAAI,IAAC,IAAI,EAAC,kBAAkB,GAAG,EAC/B,CAAC,CAAC,uBAAuB,CAAC,KACL,EACxB,MAAC,qBAAqB,kBAAC,QAAQ,EAAE,CAAC,QAAQ,EAAE,OAAO,EAAE,SAAS,iBAC5D,KAAC,IAAI,IAAC,IAAI,EAAC,UAAU,GAAG,EACvB,CAAC,CAAC,YAAY,CAAC,KACM,KACb,EACZ,sBAAsB,IAAI,CACzB,KAAC,qBAAqB,kBAAC,OAAO,EAAE,oBAAoB,gBACjD,CAAC,CAAC,4BAA4B,EAAE;oBAC/B,SAAS,EAAE,gBAAgB,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC;iBACtD,CAAC,IACoB,CACzB,EACA,YAAY,IAAI,QAAQ,CAAC,uBAAuB,IAAI,CACnD,KAAC,qBAAqB,kBAAC,OAAO,EAAE,sBAAsB,gBACnD,CAAC,CAAC,oCAAoC,EAAE;oBACvC,SAAS,EACP,uBAAuB,KAAK,YAAY;wBACtC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC;wBACZ,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC;iBACjB,CAAC,IACoB,CACzB,EACD,MAAC,UAAU,kBAAC,cAAc,EAAE,CAAC,aAAa,CAAC,uBAAuB,CAAC,iBACjE,KAAC,qBAAqB,kBACpB,OAAO,EAAE,eAAe,CAAC,aAAa,CAAC,UAAU,CAAC,gBAEjD,CAAC,CAAC,aAAa,CAAC,IACK,EACxB,KAAC,qBAAqB,kBACpB,OAAO,EAAE,eAAe,CAAC,aAAa,CAAC,UAAU,CAAC,gBAEjD,CAAC,CAAC,aAAa,CAAC,IACK,EACxB,KAAC,qBAAqB,kBACpB,OAAO,EAAE,eAAe,CAAC,aAAa,CAAC,WAAW,CAAC,gBAElD,CAAC,CAAC,sBAAsB,CAAC,IACJ,EAExB,KAAC,qBAAqB,kBACpB,OAAO,EAAE,gBAAgB,CAAC,aAAa,CAAC,UAAU,CAAC,gBAElD,CAAC,CAAC,eAAe,CAAC,IACG,EACxB,KAAC,qBAAqB,kBACpB,OAAO,EAAE,gBAAgB,CAAC,aAAa,CAAC,UAAU,CAAC,gBAElD,CAAC,CAAC,eAAe,CAAC,IACG,EACxB,KAAC,qBAAqB,kBACpB,OAAO,EAAE,gBAAgB,CAAC,aAAa,CAAC,WAAW,CAAC,gBAEnD,CAAC,CAAC,wBAAwB,CAAC,IACN,KACb,IACD,CACf,CAAC;AACJ,CAAC,CAAC"}
|
|
@@ -31,17 +31,17 @@ export const DefaultParticipantViewUI = ({ indicatorsVisible = true, menuPlaceme
|
|
|
31
31
|
};
|
|
32
32
|
export const ParticipantDetails = ({ indicatorsVisible = true, }) => {
|
|
33
33
|
const { participant } = useParticipantViewContext();
|
|
34
|
-
const { isDominantSpeaker, isLocalParticipant, connectionQuality, publishedTracks,
|
|
34
|
+
const { isDominantSpeaker, isLocalParticipant, connectionQuality, publishedTracks, pin, sessionId, name, userId, videoStream, } = participant;
|
|
35
35
|
const call = useCall();
|
|
36
36
|
const connectionQualityAsString = !!connectionQuality &&
|
|
37
37
|
SfuModels.ConnectionQuality[connectionQuality].toLowerCase();
|
|
38
38
|
const hasAudio = publishedTracks.includes(SfuModels.TrackType.AUDIO);
|
|
39
39
|
const hasVideo = publishedTracks.includes(SfuModels.TrackType.VIDEO);
|
|
40
|
-
const
|
|
40
|
+
const canUnpin = !!pin && pin.isLocalPin;
|
|
41
41
|
const isDebugMode = useIsDebugMode();
|
|
42
42
|
return (_jsxs("div", Object.assign({ className: "str-video__participant-details" }, { children: [_jsxs("span", Object.assign({ className: "str-video__participant-details__name" }, { children: [name || userId, indicatorsVisible && isDominantSpeaker && (_jsx("span", { className: "str-video__participant-details__name--dominant_speaker", title: "Dominant speaker" })), indicatorsVisible && (_jsx(Notification, Object.assign({ isVisible: isLocalParticipant &&
|
|
43
|
-
connectionQuality === SfuModels.ConnectionQuality.POOR, message: "Poor connection quality. Please check your internet connection." }, { children: connectionQualityAsString && (_jsx("span", { className: clsx('str-video__participant-details__connection-quality', `str-video__participant-details__connection-quality--${connectionQualityAsString}`), title: connectionQualityAsString })) }))), indicatorsVisible && !hasAudio && (_jsx("span", { className: "str-video__participant-details__name--audio-muted" })), indicatorsVisible && !hasVideo && (_jsx("span", { className: "str-video__participant-details__name--video-muted" })), indicatorsVisible &&
|
|
43
|
+
connectionQuality === SfuModels.ConnectionQuality.POOR, message: "Poor connection quality. Please check your internet connection." }, { children: connectionQualityAsString && (_jsx("span", { className: clsx('str-video__participant-details__connection-quality', `str-video__participant-details__connection-quality--${connectionQualityAsString}`), title: connectionQualityAsString })) }))), indicatorsVisible && !hasAudio && (_jsx("span", { className: "str-video__participant-details__name--audio-muted" })), indicatorsVisible && !hasVideo && (_jsx("span", { className: "str-video__participant-details__name--video-muted" })), indicatorsVisible && canUnpin && (
|
|
44
44
|
// TODO: remove this monstrosity once we have a proper design
|
|
45
|
-
_jsx("span", { title: "Unpin", onClick: () => call === null || call === void 0 ? void 0 : call.
|
|
45
|
+
_jsx("span", { title: "Unpin", onClick: () => call === null || call === void 0 ? void 0 : call.unpin(sessionId), style: { cursor: 'pointer' }, className: "str-video__participant-details__name--pinned" }))] })), isDebugMode && (_jsxs(_Fragment, { children: [_jsx(DebugParticipantPublishQuality, { participant: participant, call: call }), _jsx(DebugStatsView, { call: call, sessionId: sessionId, userId: userId, mediaStream: videoStream })] }))] })));
|
|
46
46
|
};
|
|
47
47
|
//# sourceMappingURL=DefaultParticipantViewUI.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DefaultParticipantViewUI.js","sourceRoot":"","sources":["../../../../../src/core/components/ParticipantView/DefaultParticipantViewUI.tsx"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"DefaultParticipantViewUI.js","sourceRoot":"","sources":["../../../../../src/core/components/ParticipantView/DefaultParticipantViewUI.tsx"],"names":[],"mappings":"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"}
|
|
@@ -31,9 +31,34 @@
|
|
|
31
31
|
"Invite": "Invite",
|
|
32
32
|
"Join": "Join",
|
|
33
33
|
"You": "You",
|
|
34
|
+
"Me": "Me",
|
|
35
|
+
"Unknown": "Unknown",
|
|
34
36
|
"Allow": "Allow",
|
|
35
37
|
"Revoke": "Revoke",
|
|
36
38
|
"Dismiss": "Dismiss",
|
|
39
|
+
"Microphone on": "Microphone on",
|
|
40
|
+
"Microphone off": "Microphone off",
|
|
41
|
+
"Camera on": "Camera on",
|
|
42
|
+
"Camera off": "Camera off",
|
|
43
|
+
"Pinned": "Pinned",
|
|
44
|
+
"Unpin": "Unpin",
|
|
45
|
+
"Pin": "Pin",
|
|
46
|
+
"Pin for everyone": "Pin for everyone",
|
|
47
|
+
"Unpin for everyone": "Unpin for everyone",
|
|
48
|
+
"Block": "Block",
|
|
49
|
+
"Turn off video": "Turn off video",
|
|
50
|
+
"Turn off screen share": "Turn off screen share",
|
|
51
|
+
"Mute audio": "Mute audio",
|
|
52
|
+
"Allow audio": "Allow audio",
|
|
53
|
+
"Allow video": "Allow video",
|
|
54
|
+
"Allow screen sharing": "Allow screen sharing",
|
|
55
|
+
"Disable audio": "Disable audio",
|
|
56
|
+
"Disable video": "Disable video",
|
|
57
|
+
"Disable screen sharing": "Disable screen sharing",
|
|
58
|
+
"Enter": "Enter",
|
|
59
|
+
"Leave": "Leave",
|
|
60
|
+
"{{ direction }} fullscreen": "{{ direction }} fullscreen",
|
|
61
|
+
"{{ direction }} picture-in-picture": "{{ direction }} picture-in-picture",
|
|
37
62
|
"Participants ({{ numberOfParticipants }})": "Participants ({{ numberOfParticipants }})",
|
|
38
63
|
"{{ userName }} is sharing their screen": "{{ userName }} is sharing their screen",
|
|
39
64
|
"{{ userName }} is requesting to speak": "{{ userName }} is requesting to speak",
|
|
@@ -32,9 +32,34 @@ export declare const translations: {
|
|
|
32
32
|
Invite: string;
|
|
33
33
|
Join: string;
|
|
34
34
|
You: string;
|
|
35
|
+
Me: string;
|
|
36
|
+
Unknown: string;
|
|
35
37
|
Allow: string;
|
|
36
38
|
Revoke: string;
|
|
37
39
|
Dismiss: string;
|
|
40
|
+
"Microphone on": string;
|
|
41
|
+
"Microphone off": string;
|
|
42
|
+
"Camera on": string;
|
|
43
|
+
"Camera off": string;
|
|
44
|
+
Pinned: string;
|
|
45
|
+
Unpin: string;
|
|
46
|
+
Pin: string;
|
|
47
|
+
"Pin for everyone": string;
|
|
48
|
+
"Unpin for everyone": string;
|
|
49
|
+
Block: string;
|
|
50
|
+
"Turn off video": string;
|
|
51
|
+
"Turn off screen share": string;
|
|
52
|
+
"Mute audio": string;
|
|
53
|
+
"Allow audio": string;
|
|
54
|
+
"Allow video": string;
|
|
55
|
+
"Allow screen sharing": string;
|
|
56
|
+
"Disable audio": string;
|
|
57
|
+
"Disable video": string;
|
|
58
|
+
"Disable screen sharing": string;
|
|
59
|
+
Enter: string;
|
|
60
|
+
Leave: string;
|
|
61
|
+
"{{ direction }} fullscreen": string;
|
|
62
|
+
"{{ direction }} picture-in-picture": string;
|
|
38
63
|
"Participants ({{ numberOfParticipants }})": string;
|
|
39
64
|
"{{ userName }} is sharing their screen": string;
|
|
40
65
|
"{{ userName }} is requesting to speak": string;
|
package/dist/version.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare const version = "0.
|
|
1
|
+
export declare const version = "0.2.0";
|
package/dist/version.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export const version = '0.
|
|
1
|
+
export const version = '0.2.0';
|
|
2
2
|
//# sourceMappingURL=version.js.map
|
package/dist/version.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"version.js","sourceRoot":"","sources":["../version.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,OAAO,GAAG,
|
|
1
|
+
{"version":3,"file":"version.js","sourceRoot":"","sources":["../version.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,OAAO,GAAG,OAAO,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@stream-io/video-react-sdk",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.2.0",
|
|
4
4
|
"packageManager": "yarn@3.2.4",
|
|
5
5
|
"main": "./dist/index.js",
|
|
6
6
|
"types": "./dist/index.d.ts",
|
|
@@ -33,8 +33,8 @@
|
|
|
33
33
|
"@nivo/core": "^0.80.0",
|
|
34
34
|
"@nivo/line": "^0.80.0",
|
|
35
35
|
"@stream-io/i18n": "^0.1.1",
|
|
36
|
-
"@stream-io/video-client": "^0.
|
|
37
|
-
"@stream-io/video-react-bindings": "^0.1.
|
|
36
|
+
"@stream-io/video-client": "^0.2.0",
|
|
37
|
+
"@stream-io/video-react-bindings": "^0.1.13",
|
|
38
38
|
"clsx": "^1.2.1",
|
|
39
39
|
"prop-types": "^15.8.1",
|
|
40
40
|
"rxjs": "~7.8.1"
|
|
@@ -10,6 +10,7 @@ import {
|
|
|
10
10
|
Restricted,
|
|
11
11
|
useCall,
|
|
12
12
|
useConnectedUser,
|
|
13
|
+
useI18n,
|
|
13
14
|
} from '@stream-io/video-react-bindings';
|
|
14
15
|
import {
|
|
15
16
|
OwnCapability,
|
|
@@ -42,14 +43,16 @@ export const CallParticipantListingItem = ({
|
|
|
42
43
|
const isVideoOn = participant.publishedTracks.includes(
|
|
43
44
|
SfuModels.TrackType.VIDEO,
|
|
44
45
|
);
|
|
45
|
-
const isPinned = !!participant.
|
|
46
|
+
const isPinned = !!participant.pin;
|
|
47
|
+
|
|
48
|
+
const { t } = useI18n();
|
|
46
49
|
|
|
47
50
|
return (
|
|
48
51
|
<div className="str-video__participant-listing-item">
|
|
49
52
|
<DisplayName participant={participant} />
|
|
50
53
|
<div className="str-video__participant-listing-item__media-indicator-group">
|
|
51
54
|
<MediaIndicator
|
|
52
|
-
title={isAudioOn ? 'Microphone on' : 'Microphone off'}
|
|
55
|
+
title={isAudioOn ? t('Microphone on') : t('Microphone off')}
|
|
53
56
|
className={clsx(
|
|
54
57
|
'str-video__participant-listing-item__icon',
|
|
55
58
|
`str-video__participant-listing-item__icon-${
|
|
@@ -58,7 +61,7 @@ export const CallParticipantListingItem = ({
|
|
|
58
61
|
)}
|
|
59
62
|
/>
|
|
60
63
|
<MediaIndicator
|
|
61
|
-
title={isVideoOn ? 'Camera on' : 'Camera off'}
|
|
64
|
+
title={isVideoOn ? t('Camera on') : t('Camera off')}
|
|
62
65
|
className={clsx(
|
|
63
66
|
'str-video__participant-listing-item__icon',
|
|
64
67
|
`str-video__participant-listing-item__icon-${
|
|
@@ -68,7 +71,7 @@ export const CallParticipantListingItem = ({
|
|
|
68
71
|
/>
|
|
69
72
|
{isPinned && (
|
|
70
73
|
<MediaIndicator
|
|
71
|
-
title={'Pinned'}
|
|
74
|
+
title={t('Pinned')}
|
|
72
75
|
className={clsx(
|
|
73
76
|
'str-video__participant-listing-item__icon',
|
|
74
77
|
'str-video__participant-listing-item__icon-pinned',
|
|
@@ -95,12 +98,13 @@ type DisplayNameProps = {
|
|
|
95
98
|
// todo: implement display device flag
|
|
96
99
|
const DefaultDisplayName = ({ participant }: DisplayNameProps) => {
|
|
97
100
|
const connectedUser = useConnectedUser();
|
|
101
|
+
const { t } = useI18n();
|
|
98
102
|
|
|
99
|
-
const meFlag = participant.userId === connectedUser?.id ? 'Me' : '';
|
|
100
|
-
const nameOrId = participant.name || participant.userId || 'Unknown';
|
|
103
|
+
const meFlag = participant.userId === connectedUser?.id ? t('Me') : '';
|
|
104
|
+
const nameOrId = participant.name || participant.userId || t('Unknown');
|
|
101
105
|
let displayName;
|
|
102
106
|
if (!participant.name) {
|
|
103
|
-
displayName = meFlag || nameOrId || 'Unknown';
|
|
107
|
+
displayName = meFlag || nameOrId || t('Unknown');
|
|
104
108
|
} else if (meFlag) {
|
|
105
109
|
displayName = `${nameOrId} (${meFlag})`;
|
|
106
110
|
} else {
|
|
@@ -139,49 +143,71 @@ export const ParticipantActionsContextMenu = ({
|
|
|
139
143
|
document.pictureInPictureElement,
|
|
140
144
|
);
|
|
141
145
|
const activeCall = useCall();
|
|
146
|
+
const { t } = useI18n();
|
|
142
147
|
|
|
143
|
-
const
|
|
144
|
-
activeCall?.blockUser(participant.userId);
|
|
145
|
-
};
|
|
148
|
+
const { pin, publishedTracks, sessionId, userId } = participant;
|
|
146
149
|
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
// disconnectRemovedMembers: true,
|
|
153
|
-
// });
|
|
154
|
-
// };
|
|
150
|
+
const hasAudio = publishedTracks.includes(SfuModels.TrackType.AUDIO);
|
|
151
|
+
const hasVideo = publishedTracks.includes(SfuModels.TrackType.VIDEO);
|
|
152
|
+
const hasScreenShare = publishedTracks.includes(
|
|
153
|
+
SfuModels.TrackType.SCREEN_SHARE,
|
|
154
|
+
);
|
|
155
155
|
|
|
156
|
+
const blockUser = () => {
|
|
157
|
+
activeCall?.blockUser(userId);
|
|
158
|
+
};
|
|
156
159
|
const muteAudio = () => {
|
|
157
|
-
activeCall?.muteUser(
|
|
160
|
+
activeCall?.muteUser(userId, 'audio');
|
|
158
161
|
};
|
|
159
162
|
const muteVideo = () => {
|
|
160
|
-
activeCall?.muteUser(
|
|
163
|
+
activeCall?.muteUser(userId, 'video');
|
|
161
164
|
};
|
|
162
165
|
const muteScreenShare = () => {
|
|
163
|
-
activeCall?.muteUser(
|
|
166
|
+
activeCall?.muteUser(userId, 'screenshare');
|
|
164
167
|
};
|
|
165
168
|
|
|
166
169
|
const grantPermission = (permission: string) => () => {
|
|
167
170
|
activeCall?.updateUserPermissions({
|
|
168
|
-
user_id:
|
|
171
|
+
user_id: userId,
|
|
169
172
|
grant_permissions: [permission],
|
|
170
173
|
});
|
|
171
174
|
};
|
|
172
175
|
|
|
173
176
|
const revokePermission = (permission: string) => () => {
|
|
174
177
|
activeCall?.updateUserPermissions({
|
|
175
|
-
user_id:
|
|
178
|
+
user_id: userId,
|
|
176
179
|
revoke_permissions: [permission],
|
|
177
180
|
});
|
|
178
181
|
};
|
|
179
182
|
|
|
180
183
|
const toggleParticipantPinnedAt = () => {
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
184
|
+
if (pin) {
|
|
185
|
+
activeCall?.unpin(sessionId);
|
|
186
|
+
} else {
|
|
187
|
+
activeCall?.pin(sessionId);
|
|
188
|
+
}
|
|
189
|
+
};
|
|
190
|
+
|
|
191
|
+
const pinForEveryone = () => {
|
|
192
|
+
activeCall
|
|
193
|
+
?.pinForEveryone({
|
|
194
|
+
user_id: userId,
|
|
195
|
+
session_id: sessionId,
|
|
196
|
+
})
|
|
197
|
+
.catch((err) => {
|
|
198
|
+
console.error(`Failed to pin participant ${userId}`, err);
|
|
199
|
+
});
|
|
200
|
+
};
|
|
201
|
+
|
|
202
|
+
const unpinForEveryone = () => {
|
|
203
|
+
activeCall
|
|
204
|
+
?.unpinForEveryone({
|
|
205
|
+
user_id: userId,
|
|
206
|
+
session_id: sessionId,
|
|
207
|
+
})
|
|
208
|
+
.catch((err) => {
|
|
209
|
+
console.error(`Failed to unpin participant ${userId}`, err);
|
|
210
|
+
});
|
|
185
211
|
};
|
|
186
212
|
|
|
187
213
|
const toggleFullscreenMode = () => {
|
|
@@ -236,92 +262,100 @@ export const ParticipantActionsContextMenu = ({
|
|
|
236
262
|
|
|
237
263
|
return (
|
|
238
264
|
<GenericMenu>
|
|
239
|
-
<GenericMenuButtonItem
|
|
265
|
+
<GenericMenuButtonItem
|
|
266
|
+
onClick={toggleParticipantPinnedAt}
|
|
267
|
+
disabled={pin && !pin.isLocalPin}
|
|
268
|
+
>
|
|
240
269
|
<Icon icon="pin" />
|
|
241
|
-
{
|
|
270
|
+
{pin ? t('Unpin') : t('Pin')}
|
|
242
271
|
</GenericMenuButtonItem>
|
|
272
|
+
<Restricted requiredGrants={[OwnCapability.PIN_FOR_EVERYONE]}>
|
|
273
|
+
<GenericMenuButtonItem
|
|
274
|
+
onClick={pinForEveryone}
|
|
275
|
+
disabled={pin && !pin.isLocalPin}
|
|
276
|
+
>
|
|
277
|
+
<Icon icon="pin" />
|
|
278
|
+
{t('Pin for everyone')}
|
|
279
|
+
</GenericMenuButtonItem>
|
|
280
|
+
<GenericMenuButtonItem
|
|
281
|
+
onClick={unpinForEveryone}
|
|
282
|
+
disabled={!pin || pin.isLocalPin}
|
|
283
|
+
>
|
|
284
|
+
<Icon icon="pin" />
|
|
285
|
+
{t('Unpin for everyone')}
|
|
286
|
+
</GenericMenuButtonItem>
|
|
287
|
+
</Restricted>
|
|
243
288
|
<Restricted requiredGrants={[OwnCapability.BLOCK_USERS]}>
|
|
244
289
|
<GenericMenuButtonItem onClick={blockUser}>
|
|
245
290
|
<Icon icon="not-allowed" />
|
|
246
|
-
Block
|
|
291
|
+
{t('Block')}
|
|
247
292
|
</GenericMenuButtonItem>
|
|
248
293
|
</Restricted>
|
|
249
|
-
{/* <GenericMenuButtonItem disabled onClick={kickUserClickHandler}>
|
|
250
|
-
Kick
|
|
251
|
-
</GenericMenuButtonItem> */}
|
|
252
294
|
<Restricted requiredGrants={[OwnCapability.MUTE_USERS]}>
|
|
253
|
-
<GenericMenuButtonItem
|
|
254
|
-
disabled={
|
|
255
|
-
!participant.publishedTracks.includes(SfuModels.TrackType.VIDEO)
|
|
256
|
-
}
|
|
257
|
-
onClick={muteVideo}
|
|
258
|
-
>
|
|
295
|
+
<GenericMenuButtonItem disabled={!hasVideo} onClick={muteVideo}>
|
|
259
296
|
<Icon icon="camera-off-outline" />
|
|
260
|
-
Turn off video
|
|
297
|
+
{t('Turn off video')}
|
|
261
298
|
</GenericMenuButtonItem>
|
|
262
299
|
<GenericMenuButtonItem
|
|
263
|
-
disabled={
|
|
264
|
-
!participant.publishedTracks.includes(
|
|
265
|
-
SfuModels.TrackType.SCREEN_SHARE,
|
|
266
|
-
)
|
|
267
|
-
}
|
|
300
|
+
disabled={!hasScreenShare}
|
|
268
301
|
onClick={muteScreenShare}
|
|
269
302
|
>
|
|
270
303
|
<Icon icon="screen-share-off" />
|
|
271
|
-
Turn off screen share
|
|
304
|
+
{t('Turn off screen share')}
|
|
272
305
|
</GenericMenuButtonItem>
|
|
273
|
-
<GenericMenuButtonItem
|
|
274
|
-
disabled={
|
|
275
|
-
!participant.publishedTracks.includes(SfuModels.TrackType.AUDIO)
|
|
276
|
-
}
|
|
277
|
-
onClick={muteAudio}
|
|
278
|
-
>
|
|
306
|
+
<GenericMenuButtonItem disabled={!hasAudio} onClick={muteAudio}>
|
|
279
307
|
<Icon icon="no-audio" />
|
|
280
|
-
Mute audio
|
|
308
|
+
{t('Mute audio')}
|
|
281
309
|
</GenericMenuButtonItem>
|
|
282
310
|
</Restricted>
|
|
283
311
|
{participantViewElement && (
|
|
284
312
|
<GenericMenuButtonItem onClick={toggleFullscreenMode}>
|
|
285
|
-
{
|
|
313
|
+
{t('{{ direction }} fullscreen', {
|
|
314
|
+
direction: fullscreenModeOn ? t('Leave') : t('Enter'),
|
|
315
|
+
})}
|
|
286
316
|
</GenericMenuButtonItem>
|
|
287
317
|
)}
|
|
288
318
|
{videoElement && document.pictureInPictureEnabled && (
|
|
289
319
|
<GenericMenuButtonItem onClick={togglePictureInPicture}>
|
|
290
|
-
{
|
|
291
|
-
|
|
320
|
+
{t('{{ direction }} picture-in-picture', {
|
|
321
|
+
direction:
|
|
322
|
+
pictureInPictureElement === videoElement
|
|
323
|
+
? t('Leave')
|
|
324
|
+
: t('Enter'),
|
|
325
|
+
})}
|
|
292
326
|
</GenericMenuButtonItem>
|
|
293
327
|
)}
|
|
294
328
|
<Restricted requiredGrants={[OwnCapability.UPDATE_CALL_PERMISSIONS]}>
|
|
295
329
|
<GenericMenuButtonItem
|
|
296
330
|
onClick={grantPermission(OwnCapability.SEND_AUDIO)}
|
|
297
331
|
>
|
|
298
|
-
Allow audio
|
|
332
|
+
{t('Allow audio')}
|
|
299
333
|
</GenericMenuButtonItem>
|
|
300
334
|
<GenericMenuButtonItem
|
|
301
335
|
onClick={grantPermission(OwnCapability.SEND_VIDEO)}
|
|
302
336
|
>
|
|
303
|
-
Allow video
|
|
337
|
+
{t('Allow video')}
|
|
304
338
|
</GenericMenuButtonItem>
|
|
305
339
|
<GenericMenuButtonItem
|
|
306
340
|
onClick={grantPermission(OwnCapability.SCREENSHARE)}
|
|
307
341
|
>
|
|
308
|
-
Allow screen sharing
|
|
342
|
+
{t('Allow screen sharing')}
|
|
309
343
|
</GenericMenuButtonItem>
|
|
310
344
|
|
|
311
345
|
<GenericMenuButtonItem
|
|
312
346
|
onClick={revokePermission(OwnCapability.SEND_AUDIO)}
|
|
313
347
|
>
|
|
314
|
-
Disable audio
|
|
348
|
+
{t('Disable audio')}
|
|
315
349
|
</GenericMenuButtonItem>
|
|
316
350
|
<GenericMenuButtonItem
|
|
317
351
|
onClick={revokePermission(OwnCapability.SEND_VIDEO)}
|
|
318
352
|
>
|
|
319
|
-
Disable video
|
|
353
|
+
{t('Disable video')}
|
|
320
354
|
</GenericMenuButtonItem>
|
|
321
355
|
<GenericMenuButtonItem
|
|
322
356
|
onClick={revokePermission(OwnCapability.SCREENSHARE)}
|
|
323
357
|
>
|
|
324
|
-
Disable screen sharing
|
|
358
|
+
{t('Disable screen sharing')}
|
|
325
359
|
</GenericMenuButtonItem>
|
|
326
360
|
</Restricted>
|
|
327
361
|
</GenericMenu>
|
|
@@ -118,7 +118,7 @@ export const ParticipantDetails = ({
|
|
|
118
118
|
isLocalParticipant,
|
|
119
119
|
connectionQuality,
|
|
120
120
|
publishedTracks,
|
|
121
|
-
|
|
121
|
+
pin,
|
|
122
122
|
sessionId,
|
|
123
123
|
name,
|
|
124
124
|
userId,
|
|
@@ -132,7 +132,7 @@ export const ParticipantDetails = ({
|
|
|
132
132
|
|
|
133
133
|
const hasAudio = publishedTracks.includes(SfuModels.TrackType.AUDIO);
|
|
134
134
|
const hasVideo = publishedTracks.includes(SfuModels.TrackType.VIDEO);
|
|
135
|
-
const
|
|
135
|
+
const canUnpin = !!pin && pin.isLocalPin;
|
|
136
136
|
|
|
137
137
|
const isDebugMode = useIsDebugMode();
|
|
138
138
|
|
|
@@ -171,11 +171,11 @@ export const ParticipantDetails = ({
|
|
|
171
171
|
{indicatorsVisible && !hasVideo && (
|
|
172
172
|
<span className="str-video__participant-details__name--video-muted" />
|
|
173
173
|
)}
|
|
174
|
-
{indicatorsVisible &&
|
|
174
|
+
{indicatorsVisible && canUnpin && (
|
|
175
175
|
// TODO: remove this monstrosity once we have a proper design
|
|
176
176
|
<span
|
|
177
177
|
title="Unpin"
|
|
178
|
-
onClick={() => call?.
|
|
178
|
+
onClick={() => call?.unpin(sessionId)}
|
|
179
179
|
style={{ cursor: 'pointer' }}
|
|
180
180
|
className="str-video__participant-details__name--pinned"
|
|
181
181
|
/>
|
package/src/translations/en.json
CHANGED
|
@@ -22,7 +22,7 @@
|
|
|
22
22
|
"Waiting for recording to start...": "Waiting for recording to start...",
|
|
23
23
|
"Record call": "Record call",
|
|
24
24
|
"Reactions": "Reactions",
|
|
25
|
-
"You can now share your screen.": "You can now share your screen.",
|
|
25
|
+
"You can now share your screen.": "You can now share your screen.",
|
|
26
26
|
"Awaiting for an approval to share screen.": "Awaiting for an approval to share screen.",
|
|
27
27
|
"You can no longer share your screen.": "You can no longer share your screen.",
|
|
28
28
|
"Share screen": "Share screen",
|
|
@@ -32,11 +32,37 @@
|
|
|
32
32
|
"Invite": "Invite",
|
|
33
33
|
"Join": "Join",
|
|
34
34
|
"You": "You",
|
|
35
|
+
"Me": "Me",
|
|
36
|
+
"Unknown": "Unknown",
|
|
35
37
|
|
|
36
38
|
"Allow": "Allow",
|
|
37
39
|
"Revoke": "Revoke",
|
|
38
40
|
"Dismiss": "Dismiss",
|
|
39
41
|
|
|
42
|
+
"Microphone on": "Microphone on",
|
|
43
|
+
"Microphone off": "Microphone off",
|
|
44
|
+
"Camera on": "Camera on",
|
|
45
|
+
"Camera off": "Camera off",
|
|
46
|
+
"Pinned": "Pinned",
|
|
47
|
+
"Unpin": "Unpin",
|
|
48
|
+
"Pin": "Pin",
|
|
49
|
+
"Pin for everyone": "Pin for everyone",
|
|
50
|
+
"Unpin for everyone": "Unpin for everyone",
|
|
51
|
+
"Block": "Block",
|
|
52
|
+
"Turn off video": "Turn off video",
|
|
53
|
+
"Turn off screen share": "Turn off screen share",
|
|
54
|
+
"Mute audio": "Mute audio",
|
|
55
|
+
"Allow audio": "Allow audio",
|
|
56
|
+
"Allow video": "Allow video",
|
|
57
|
+
"Allow screen sharing": "Allow screen sharing",
|
|
58
|
+
"Disable audio": "Disable audio",
|
|
59
|
+
"Disable video": "Disable video",
|
|
60
|
+
"Disable screen sharing": "Disable screen sharing",
|
|
61
|
+
"Enter": "Enter",
|
|
62
|
+
"Leave": "Leave",
|
|
63
|
+
"{{ direction }} fullscreen": "{{ direction }} fullscreen",
|
|
64
|
+
"{{ direction }} picture-in-picture": "{{ direction }} picture-in-picture",
|
|
65
|
+
|
|
40
66
|
"Participants ({{ numberOfParticipants }})": "Participants ({{ numberOfParticipants }})",
|
|
41
67
|
"{{ userName }} is sharing their screen": "{{ userName }} is sharing their screen",
|
|
42
68
|
"{{ userName }} is requesting to speak": "{{ userName }} is requesting to speak",
|