@selfcommunity/react-ui 0.11.0-alpha.23 → 0.11.0-alpha.25
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/components/LiveStreamForm/LiveStreamFormSettings.js +1 -1
- package/lib/cjs/components/LiveStreamRoom/LiveStreamVideoConference/ControlBar.js +3 -1
- package/lib/cjs/components/LiveStreamRoom/LiveStreamVideoConference/LiveStreamSettingsMenu.d.ts +8 -0
- package/lib/cjs/components/LiveStreamRoom/LiveStreamVideoConference/LiveStreamSettingsMenu.js +69 -0
- package/lib/cjs/components/LiveStreamRoom/LiveStreamVideoConference/PreJoin.d.ts +3 -2
- package/lib/cjs/components/LiveStreamRoom/LiveStreamVideoConference/PreJoin.js +31 -2
- package/lib/cjs/components/LiveStreamRoom/LiveStreamVideoConference/VideoConference.js +43 -4
- package/lib/cjs/constants/LiveStream.d.ts +1 -0
- package/lib/cjs/constants/LiveStream.js +2 -1
- package/lib/esm/components/LiveStreamForm/LiveStreamFormSettings.js +1 -1
- package/lib/esm/components/LiveStreamRoom/LiveStreamVideoConference/ControlBar.js +3 -1
- package/lib/esm/components/LiveStreamRoom/LiveStreamVideoConference/LiveStreamSettingsMenu.d.ts +8 -0
- package/lib/esm/components/LiveStreamRoom/LiveStreamVideoConference/LiveStreamSettingsMenu.js +66 -0
- package/lib/esm/components/LiveStreamRoom/LiveStreamVideoConference/PreJoin.d.ts +3 -2
- package/lib/esm/components/LiveStreamRoom/LiveStreamVideoConference/PreJoin.js +31 -2
- package/lib/esm/components/LiveStreamRoom/LiveStreamVideoConference/VideoConference.js +45 -6
- package/lib/esm/constants/LiveStream.d.ts +1 -0
- package/lib/esm/constants/LiveStream.js +1 -0
- package/lib/umd/{653.js → 212.js} +2 -2
- package/lib/umd/react-ui.js +1 -1
- package/package.json +6 -5
- /package/lib/umd/{653.js.LICENSE.txt → 212.js.LICENSE.txt} +0 -0
|
@@ -78,7 +78,7 @@ function LiveStreamSettingsForm(inProps) {
|
|
|
78
78
|
/**
|
|
79
79
|
* Renders root object
|
|
80
80
|
*/
|
|
81
|
-
return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", spacing: 1, alignItems: "center" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Switch, { className: classes.switch, disabled: !liveStreamEnabled, checked: !(settings === null || settings === void 0 ? void 0 : settings.muteParticipants), onChange: () => onChange(Object.assign(Object.assign(Object.assign({}, constants_1.LIVESTREAM_DEFAULT_SETTINGS), settings), { ['muteParticipants']: !(settings === null || settings === void 0 ? void 0 : settings.muteParticipants) })) }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.switchLabel }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamForm.muteParticipants", defaultMessage: "ui.liveStreamForm.muteParticipants" }) }))] })), (isEnterpriseFeaturesVisible || liveStreamVideoConferenceEnabled) && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", spacing: 1, alignItems: "center" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Switch, { className: classes.switch, checked: !(settings === null || settings === void 0 ? void 0 : settings.disableVideo), disabled: !isEnterpriseTier
|
|
81
|
+
return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", spacing: 1, alignItems: "center" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Switch, { className: classes.switch, disabled: !liveStreamEnabled, checked: !(settings === null || settings === void 0 ? void 0 : settings.muteParticipants), onChange: () => onChange(Object.assign(Object.assign(Object.assign({}, constants_1.LIVESTREAM_DEFAULT_SETTINGS), settings), { ['muteParticipants']: !(settings === null || settings === void 0 ? void 0 : settings.muteParticipants) })) }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.switchLabel }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamForm.muteParticipants", defaultMessage: "ui.liveStreamForm.muteParticipants" }) }))] })), liveStreamEnabled && (isEnterpriseFeaturesVisible || liveStreamVideoConferenceEnabled) && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", spacing: 1, alignItems: "center" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Switch, { className: classes.switch, checked: !(settings === null || settings === void 0 ? void 0 : settings.disableVideo), disabled: !isEnterpriseTier && !liveStreamVideoConferenceEnabled, onChange: () => onChange(Object.assign(Object.assign(Object.assign({}, constants_1.LIVESTREAM_DEFAULT_SETTINGS), settings), { ['disableVideo']: !(settings === null || settings === void 0 ? void 0 : settings.disableVideo) })) }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.switchLabel }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamForm.disableVideo", defaultMessage: "ui.liveStreamForm.disableVideo" }) })), !liveStreamVideoConferenceEnabled && (0, jsx_runtime_1.jsx)(UpScalingTierBadge_1.default, { desiredTier: types_1.SCCommunitySubscriptionTier.ENTERPRISE })] })), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", spacing: 1, alignItems: "center" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Switch, { className: classes.switch, checked: !(settings === null || settings === void 0 ? void 0 : settings.disableShareScreen), disabled: !isEnterpriseTier && !liveStreamVideoConferenceEnabled, onChange: () => onChange(Object.assign(Object.assign(Object.assign({}, constants_1.LIVESTREAM_DEFAULT_SETTINGS), settings), { ['disableShareScreen']: !(settings === null || settings === void 0 ? void 0 : settings.disableShareScreen) })) }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.switchLabel }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamForm.disableShareScreen", defaultMessage: "ui.liveStreamForm.disableShareScreen" }) })), !liveStreamVideoConferenceEnabled && (0, jsx_runtime_1.jsx)(UpScalingTierBadge_1.default, { desiredTier: types_1.SCCommunitySubscriptionTier.ENTERPRISE })] }))] })), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", spacing: 1, alignItems: "center" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Switch, { className: classes.switch, disabled: !liveStreamEnabled, checked: !(settings === null || settings === void 0 ? void 0 : settings.disableChat), onChange: () => onChange(Object.assign(Object.assign(Object.assign({}, constants_1.LIVESTREAM_DEFAULT_SETTINGS), settings), { ['disableChat']: !(settings === null || settings === void 0 ? void 0 : settings.disableChat) })) }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.switchLabel }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamForm.disableChat", defaultMessage: "ui.liveStreamForm.disableChat" }) }))] })), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", spacing: 1, alignItems: "center" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Switch, { className: classes.switch, disabled: !liveStreamEnabled, checked: Boolean(settings === null || settings === void 0 ? void 0 : settings.hideParticipantsList), onChange: () => onChange(Object.assign(Object.assign(Object.assign({}, constants_1.LIVESTREAM_DEFAULT_SETTINGS), settings), { ['hideParticipantsList']: !(settings === null || settings === void 0 ? void 0 : settings.hideParticipantsList) })) }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.switchLabel }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamForm.hideParticipantsList", defaultMessage: "ui.liveStreamForm.hideParticipantsList" }) }))] })), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", spacing: 1, alignItems: "center" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Switch, { className: classes.switch, disabled: !liveStreamEnabled, checked: Boolean(settings === null || settings === void 0 ? void 0 : settings.automaticallyNotifyFollowers), onChange: () => onChange(Object.assign(Object.assign(Object.assign({}, constants_1.LIVESTREAM_DEFAULT_SETTINGS), settings), { ['automaticallyNotifyFollowers']: !(settings === null || settings === void 0 ? void 0 : settings.automaticallyNotifyFollowers) })) }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.switchLabel }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamForm.automaticallyNotifyFollowers", defaultMessage: "ui.liveStreamForm.automaticallyNotifyFollowers" }) }))] })), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", spacing: 1, alignItems: "center" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Switch, { className: classes.switch, disabled: !liveStreamEnabled, checked: Boolean(settings === null || settings === void 0 ? void 0 : settings.showInProfile), onChange: () => onChange(Object.assign(Object.assign(Object.assign({}, constants_1.LIVESTREAM_DEFAULT_SETTINGS), settings), { ['showInProfile']: !(settings === null || settings === void 0 ? void 0 : settings.showInProfile) })) }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.switchLabel }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamForm.showInProfile", defaultMessage: "ui.liveStreamForm.showInProfile" }) }))] })), (0, jsx_runtime_1.jsxs)(material_1.FormControl, Object.assign({ className: classes.accessView }, { children: [(0, jsx_runtime_1.jsx)(material_1.InputLabel, Object.assign({ id: "viewLabel" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamForm.view.label", defaultMessage: "ui.liveStreamForm.view.label" }) })), (0, jsx_runtime_1.jsx)(material_1.Select, Object.assign({ name: "view", label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamForm.view.label", defaultMessage: "ui.liveStreamForm.view.label" }), labelId: "viewLabel", disabled: !liveStreamEnabled, fullWidth: true, value: (_a = settings === null || settings === void 0 ? void 0 : settings.view) !== null && _a !== void 0 ? _a : types_1.SCLiveStreamViewType.SPEAKER, onChange: (e) => onChange(Object.assign(Object.assign(Object.assign({}, constants_1.LIVESTREAM_DEFAULT_SETTINGS), settings), { ['view']: e.target.value })), displayEmpty: true, renderValue: (selected) => {
|
|
82
82
|
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ className: classes.accessViewIcon }, { children: selected === types_1.SCLiveStreamViewType.SPEAKER ? 'upload' : 'category' })), "\u00A0", (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.liveStreamForm.view.${selected}`, defaultMessage: `ui.liveStreamForm.view.${selected}` })] }));
|
|
83
83
|
} }, { children: Object.values(types_1.SCLiveStreamViewType).map((f) => ((0, jsx_runtime_1.jsx)(material_1.MenuItem, Object.assign({ value: f }, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: (0, jsx_runtime_1.jsxs)("b", { children: [(0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ className: classes.accessViewIcon }, { children: f === types_1.SCLiveStreamViewType.SPEAKER ? 'upload' : 'category' })), "\u00A0", (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.liveStreamForm.view.${f}`, defaultMessage: `ui.liveStreamForm.view.${f}` })] }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ sx: { textWrap: 'auto' } }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.liveStreamForm.view.${f}.description`, defaultMessage: `ui.liveStreamForm.view.${f}.description` }) }))] }) }), f))) }))] }))] })));
|
|
84
84
|
}
|
|
@@ -12,6 +12,7 @@ const material_1 = require("@mui/material");
|
|
|
12
12
|
const SettingsMenuToggle_1 = require("./SettingsMenuToggle");
|
|
13
13
|
const DisconnectButton_1 = require("./DisconnectButton");
|
|
14
14
|
const utils_1 = require("./utils");
|
|
15
|
+
const react_intl_1 = require("react-intl");
|
|
15
16
|
/**
|
|
16
17
|
* The `ControlBar` prefab gives the user the basic user interface to control their
|
|
17
18
|
* media devices (camera, microphone and screen share), open the `Chat` and leave the room.
|
|
@@ -57,6 +58,7 @@ function ControlBar(_a) {
|
|
|
57
58
|
});
|
|
58
59
|
const microphoneOnChange = React.useCallback((enabled, isUserInitiated) => (isUserInitiated ? saveAudioInputEnabled(enabled) : null), [saveAudioInputEnabled]);
|
|
59
60
|
const cameraOnChange = React.useCallback((enabled, isUserInitiated) => (isUserInitiated ? saveVideoInputEnabled(enabled) : null), [saveVideoInputEnabled]);
|
|
60
|
-
return ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, htmlProps, { children: [visibleControls.microphone && ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "lk-button-group" }, { children: [(0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(TrackToggle_1.TrackToggle, Object.assign({ source: livekit_client_1.Track.Source.Microphone, showIcon: showIcon, onChange: microphoneOnChange, onDeviceError: (error) => onDeviceError === null || onDeviceError === void 0 ? void 0 : onDeviceError({ source: livekit_client_1.Track.Source.Microphone, error }) }, { children: showText &&
|
|
61
|
+
return ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, htmlProps, { children: [visibleControls.microphone && ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "lk-button-group" }, { children: [(0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(TrackToggle_1.TrackToggle, Object.assign({ source: livekit_client_1.Track.Source.Microphone, showIcon: showIcon, onChange: microphoneOnChange, onDeviceError: (error) => onDeviceError === null || onDeviceError === void 0 ? void 0 : onDeviceError({ source: livekit_client_1.Track.Source.Microphone, error }) }, { children: showText && (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamRoom.controlBar.microphone", defaultMessage: "ui.liveStreamRoom.controlBar.microphone" }) })) }), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "lk-button-group-menu" }, { children: (0, jsx_runtime_1.jsx)(components_react_1.MediaDeviceMenu, { kind: "audioinput", onActiveDeviceChange: (_kind, deviceId) => saveAudioInputDeviceId(deviceId !== null && deviceId !== void 0 ? deviceId : '') }) }))] }))), visibleControls.camera && ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "lk-button-group" }, { children: [(0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(TrackToggle_1.TrackToggle, Object.assign({ source: livekit_client_1.Track.Source.Camera, showIcon: showIcon, onChange: cameraOnChange, onDeviceError: (error) => onDeviceError === null || onDeviceError === void 0 ? void 0 : onDeviceError({ source: livekit_client_1.Track.Source.Camera, error }) }, { children: showText && (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamRoom.controlBar.camera", defaultMessage: "ui.liveStreamRoom.controlBar.camera" }) })) }), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "lk-button-group-menu" }, { children: (0, jsx_runtime_1.jsx)(components_react_1.MediaDeviceMenu, { kind: "videoinput", onActiveDeviceChange: (_kind, deviceId) => saveVideoInputDeviceId(deviceId !== null && deviceId !== void 0 ? deviceId : '') }) }))] }))), visibleControls.screenShare && browserSupportsScreenSharing && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(TrackToggle_1.TrackToggle, Object.assign({ source: livekit_client_1.Track.Source.ScreenShare, captureOptions: { audio: true, selfBrowserSurface: 'include', surfaceSwitching: 'exclude' }, showIcon: showIcon, onChange: onScreenShareChange, onDeviceError: (error) => onDeviceError === null || onDeviceError === void 0 ? void 0 : onDeviceError({ source: livekit_client_1.Track.Source.ScreenShare, error }) }, { children: showText &&
|
|
62
|
+
(isScreenShareEnabled ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamRoom.controlBar.stopShareScreen", defaultMessage: "ui.liveStreamRoom.controlBar.stopShareScreen" })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamRoom.controlBar.shareScreen", defaultMessage: "ui.liveStreamRoom.controlBar.shareScreen" }))) })) })), visibleControls.chat && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(components_react_1.ChatToggle, { children: [showIcon && (0, jsx_runtime_1.jsx)(components_react_1.ChatIcon, {}), showText && (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamRoom.controlBar.chat", defaultMessage: "ui.liveStreamRoom.controlBar.chat" })] }) })), visibleControls.settings && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(SettingsMenuToggle_1.SettingsMenuToggle, { children: [showIcon && (0, jsx_runtime_1.jsx)(components_react_1.GearIcon, {}), showText && (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamRoom.controlBar.settings", defaultMessage: "ui.liveStreamRoom.controlBar.settings" })] }) })), visibleControls.leave && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(DisconnectButton_1.DisconnectButton, { children: [showIcon && (0, jsx_runtime_1.jsx)(components_react_1.LeaveIcon, {}), showText && (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamRoom.controlBar.leave", defaultMessage: "ui.liveStreamRoom.controlBar.leave" })] }) })), (0, jsx_runtime_1.jsx)(components_react_1.StartMediaButton, {})] })));
|
|
61
63
|
}
|
|
62
64
|
exports.ControlBar = ControlBar;
|
package/lib/cjs/components/LiveStreamRoom/LiveStreamVideoConference/LiveStreamSettingsMenu.d.ts
ADDED
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
export interface LiveStreamSettingsMenuProps {
|
|
2
|
+
className?: string;
|
|
3
|
+
blurEnabled?: boolean;
|
|
4
|
+
handleBlur?: (event: any) => void;
|
|
5
|
+
actionBlurDisabled?: boolean;
|
|
6
|
+
onlyContentMenu?: boolean;
|
|
7
|
+
}
|
|
8
|
+
export default function LiveStreamSettingsMenu(inProps: LiveStreamSettingsMenuProps): JSX.Element;
|
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
const tslib_1 = require("tslib");
|
|
4
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
|
+
const React = tslib_1.__importStar(require("react"));
|
|
6
|
+
const Button_1 = tslib_1.__importDefault(require("@mui/material/Button"));
|
|
7
|
+
const Menu_1 = tslib_1.__importDefault(require("@mui/material/Menu"));
|
|
8
|
+
const material_1 = require("@mui/material");
|
|
9
|
+
const styles_1 = require("@mui/material/styles");
|
|
10
|
+
const system_1 = require("@mui/system");
|
|
11
|
+
const classnames_1 = tslib_1.__importDefault(require("classnames"));
|
|
12
|
+
const react_1 = require("react");
|
|
13
|
+
const react_intl_1 = require("react-intl");
|
|
14
|
+
const PREFIX = 'SCLiveStreamSettingsMenu';
|
|
15
|
+
const classes = {
|
|
16
|
+
root: `${PREFIX}-root`,
|
|
17
|
+
menuRoot: `${PREFIX}-menu-root`
|
|
18
|
+
};
|
|
19
|
+
const Root = (0, styles_1.styled)(Button_1.default, {
|
|
20
|
+
name: PREFIX,
|
|
21
|
+
slot: 'Root',
|
|
22
|
+
overridesResolver: (props, styles) => styles.root
|
|
23
|
+
})(({ theme }) => ({
|
|
24
|
+
borderRadius: 7,
|
|
25
|
+
color: theme.palette.common.white,
|
|
26
|
+
paddingLeft: theme.spacing(),
|
|
27
|
+
paddingRight: theme.spacing(),
|
|
28
|
+
minWidth: 45
|
|
29
|
+
}));
|
|
30
|
+
const MenuRoot = (0, styles_1.styled)(Menu_1.default, {
|
|
31
|
+
name: PREFIX,
|
|
32
|
+
slot: 'Root',
|
|
33
|
+
overridesResolver: (props, styles) => styles.menuRoot
|
|
34
|
+
})(({ theme }) => ({
|
|
35
|
+
'& .MuiPaper-root': {
|
|
36
|
+
minWidth: 120,
|
|
37
|
+
paddingRight: theme.spacing(2),
|
|
38
|
+
'& div.MuiTypography-body1': {
|
|
39
|
+
paddingLeft: theme.spacing(2)
|
|
40
|
+
},
|
|
41
|
+
'& .MuiFormControlLabel-label.Mui-disabled': {
|
|
42
|
+
color: theme.palette.text.primary
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
}));
|
|
46
|
+
function LiveStreamSettingsMenu(inProps) {
|
|
47
|
+
// PROPS
|
|
48
|
+
const props = (0, system_1.useThemeProps)({
|
|
49
|
+
props: inProps,
|
|
50
|
+
name: PREFIX
|
|
51
|
+
});
|
|
52
|
+
const { className, actionBlurDisabled = false, blurEnabled = false, handleBlur, onlyContentMenu = false } = props, rest = tslib_1.__rest(props, ["className", "actionBlurDisabled", "blurEnabled", "handleBlur", "onlyContentMenu"]);
|
|
53
|
+
const [anchorEl, setAnchorEl] = React.useState(null);
|
|
54
|
+
const open = Boolean(anchorEl);
|
|
55
|
+
const handleClick = (event) => {
|
|
56
|
+
setAnchorEl(event.currentTarget);
|
|
57
|
+
};
|
|
58
|
+
const handleClose = () => {
|
|
59
|
+
setAnchorEl(null);
|
|
60
|
+
};
|
|
61
|
+
const MenuContent = (0, react_1.useMemo)(() => ((0, jsx_runtime_1.jsxs)(material_1.Box, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1", component: "div" }, { children: (0, jsx_runtime_1.jsx)("b", { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamRoom.settingsMenu.visualEffect", defaultMessage: "ui.liveStreamRoom.settingsMenu.visualEffect" }) }) })), (0, jsx_runtime_1.jsx)(material_1.FormControlLabel, { labelPlacement: "start", control: (0, jsx_runtime_1.jsx)(material_1.Switch, { checked: blurEnabled, disabled: actionBlurDisabled, onChange: handleBlur, inputProps: { 'aria-label': 'controlled' } }), label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamRoom.settingsMenu.visualEffect.blurEffect", defaultMessage: "ui.liveStreamRoom.settingsMenu.visualEffect.blurEffect" }) })] })), [blurEnabled, actionBlurDisabled, handleBlur]);
|
|
62
|
+
if (onlyContentMenu) {
|
|
63
|
+
return MenuContent;
|
|
64
|
+
}
|
|
65
|
+
return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(className, classes.root, 'lk-button'), "aria-controls": open ? 'live-stream-settings-menu' : undefined, "aria-haspopup": "true", "aria-expanded": open ? 'true' : undefined, onClick: handleClick }, rest, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "more_vert" }) })), (0, jsx_runtime_1.jsx)(MenuRoot, Object.assign({ id: "live-stream-settings-menu", anchorEl: anchorEl, open: open, onClose: handleClose, MenuListProps: {
|
|
66
|
+
'aria-labelledby': 'basic-button'
|
|
67
|
+
} }, { children: MenuContent }))] }));
|
|
68
|
+
}
|
|
69
|
+
exports.default = LiveStreamSettingsMenu;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { CreateLocalTracksOptions, LocalAudioTrack, LocalTrack, LocalVideoTrack } from 'livekit-client';
|
|
2
|
-
import { Track } from 'livekit-client';
|
|
2
|
+
import { Track, TrackProcessor } from 'livekit-client';
|
|
3
3
|
import * as React from 'react';
|
|
4
4
|
import type { LocalUserChoices } from '@livekit/components-core';
|
|
5
5
|
/**
|
|
@@ -28,6 +28,7 @@ export interface PreJoinProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
|
|
|
28
28
|
* @alpha
|
|
29
29
|
*/
|
|
30
30
|
persistUserChoices?: boolean;
|
|
31
|
+
videoProcessor?: TrackProcessor<Track.Kind.Video>;
|
|
31
32
|
}
|
|
32
33
|
/** @alpha */
|
|
33
34
|
export declare function usePreviewTracks(options: CreateLocalTracksOptions, onError?: (err: Error) => void): {
|
|
@@ -55,4 +56,4 @@ export declare function usePreviewDevice<T extends LocalVideoTrack | LocalAudioT
|
|
|
55
56
|
* ```
|
|
56
57
|
* @public
|
|
57
58
|
*/
|
|
58
|
-
export declare function PreJoin({ defaults, onValidate, onSubmit, onError, debug, joinLabel, micLabel, camLabel, userLabel, persistUserChoices, ...htmlProps }: PreJoinProps): JSX.Element;
|
|
59
|
+
export declare function PreJoin({ defaults, onValidate, onSubmit, onError, debug, joinLabel, micLabel, camLabel, userLabel, persistUserChoices, videoProcessor, ...htmlProps }: PreJoinProps): JSX.Element;
|
|
@@ -13,6 +13,10 @@ const ParticipantTileAvatar_1 = tslib_1.__importDefault(require("./ParticipantTi
|
|
|
13
13
|
const react_1 = require("react");
|
|
14
14
|
const TrackToggle_1 = require("./TrackToggle");
|
|
15
15
|
const LiveStreamProvider_1 = require("./LiveStreamProvider");
|
|
16
|
+
const track_processors_1 = require("@livekit/track-processors");
|
|
17
|
+
const LiveStreamSettingsMenu_1 = tslib_1.__importDefault(require("./LiveStreamSettingsMenu"));
|
|
18
|
+
const utils_1 = require("@selfcommunity/utils");
|
|
19
|
+
const LiveStream_1 = require("../../../constants/LiveStream");
|
|
16
20
|
/** @alpha */
|
|
17
21
|
function usePreviewTracks(options, onError) {
|
|
18
22
|
const [tracks, setTracks] = React.useState();
|
|
@@ -157,7 +161,8 @@ exports.usePreviewDevice = usePreviewDevice;
|
|
|
157
161
|
* @public
|
|
158
162
|
*/
|
|
159
163
|
function PreJoin(_a) {
|
|
160
|
-
var
|
|
164
|
+
var _b;
|
|
165
|
+
var { defaults = {}, onValidate, onSubmit, onError, debug, joinLabel = 'Join Room', micLabel = 'Microphone', camLabel = 'Camera', userLabel = 'Username', persistUserChoices = true, videoProcessor } = _a, htmlProps = tslib_1.__rest(_a, ["defaults", "onValidate", "onSubmit", "onError", "debug", "joinLabel", "micLabel", "camLabel", "userLabel", "persistUserChoices", "videoProcessor"]);
|
|
161
166
|
const { liveStream } = (0, LiveStreamProvider_1.useLiveStream)();
|
|
162
167
|
const scUserContext = (0, react_core_1.useSCUser)();
|
|
163
168
|
const [userChoices, setUserChoices] = React.useState(components_core_2.defaultUserChoices);
|
|
@@ -176,6 +181,9 @@ function PreJoin(_a) {
|
|
|
176
181
|
const [audioDeviceId, setAudioDeviceId] = React.useState(initialUserChoices.audioDeviceId);
|
|
177
182
|
const [videoDeviceId, setVideoDeviceId] = React.useState(initialUserChoices.videoDeviceId);
|
|
178
183
|
const [username, setUsername] = React.useState(initialUserChoices.username);
|
|
184
|
+
// Processors
|
|
185
|
+
const [blurEnabled, setBlurEnabled] = React.useState((0, utils_1.isClientSideRendering)() ? Boolean((_b = window === null || window === void 0 ? void 0 : window.localStorage) === null || _b === void 0 ? void 0 : _b.getItem(LiveStream_1.CHOICE_VIDEO_BLUR_EFFECT)) || false : false);
|
|
186
|
+
const [processorPending, setProcessorPending] = React.useState(false);
|
|
179
187
|
// Save user choices to persistent storage.
|
|
180
188
|
React.useEffect(() => {
|
|
181
189
|
saveAudioInputEnabled(audioEnabled && canUseAudio);
|
|
@@ -230,6 +238,11 @@ function PreJoin(_a) {
|
|
|
230
238
|
((values.videoEnabled && values.videoDeviceId) || !values.videoEnabled));
|
|
231
239
|
}
|
|
232
240
|
}, [onValidate]);
|
|
241
|
+
const handleBlur = React.useCallback(() => {
|
|
242
|
+
var _a;
|
|
243
|
+
setBlurEnabled((enabled) => !enabled);
|
|
244
|
+
(_a = window === null || window === void 0 ? void 0 : window.localStorage) === null || _a === void 0 ? void 0 : _a.setItem(LiveStream_1.CHOICE_VIDEO_BLUR_EFFECT, (!blurEnabled).toString());
|
|
245
|
+
}, [setBlurEnabled, blurEnabled]);
|
|
233
246
|
(0, react_1.useEffect)(() => {
|
|
234
247
|
const newUserChoices = {
|
|
235
248
|
username,
|
|
@@ -241,6 +254,22 @@ function PreJoin(_a) {
|
|
|
241
254
|
setUserChoices(newUserChoices);
|
|
242
255
|
setIsValid(handleValidation(newUserChoices));
|
|
243
256
|
}, [username, scUserContext.user, videoEnabled, handleValidation, audioEnabled, audioDeviceId, videoDeviceId]);
|
|
257
|
+
(0, react_1.useEffect)(() => {
|
|
258
|
+
if (videoTrack && videoEnabled) {
|
|
259
|
+
setProcessorPending(true);
|
|
260
|
+
try {
|
|
261
|
+
if (blurEnabled && !videoTrack.getProcessor()) {
|
|
262
|
+
videoTrack.setProcessor((0, track_processors_1.BackgroundBlur)(20));
|
|
263
|
+
}
|
|
264
|
+
else if (!blurEnabled) {
|
|
265
|
+
videoTrack.stopProcessor();
|
|
266
|
+
}
|
|
267
|
+
}
|
|
268
|
+
finally {
|
|
269
|
+
setProcessorPending(false);
|
|
270
|
+
}
|
|
271
|
+
}
|
|
272
|
+
}, [blurEnabled, videoTrack, videoEnabled]);
|
|
244
273
|
function handleSubmit(event) {
|
|
245
274
|
event.preventDefault();
|
|
246
275
|
if (handleValidation(userChoices)) {
|
|
@@ -252,6 +281,6 @@ function PreJoin(_a) {
|
|
|
252
281
|
components_core_1.log.warn('Validation failed with: ', userChoices);
|
|
253
282
|
}
|
|
254
283
|
}
|
|
255
|
-
return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "lk-prejoin" }, htmlProps, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "lk-video-container" }, { children: [videoTrack && (0, jsx_runtime_1.jsx)("video", { ref: videoEl, width: "1280", height: "720", "data-lk-facing-mode": facingMode }), (!videoTrack || !videoEnabled) && ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "lk-camera-off-note" }, { children: (0, jsx_runtime_1.jsx)(ParticipantTileAvatar_1.default, { user: scUserContext.user }) })))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "lk-button-group-container" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "lk-button-group audio" }, { children: [(0, jsx_runtime_1.jsx)(TrackToggle_1.TrackToggle, Object.assign({ disabled: !canUseAudio, initialState: audioEnabled, source: livekit_client_1.Track.Source.Microphone, onChange: (enabled) => setAudioEnabled(enabled) }, { children: micLabel })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "lk-button-group-menu" }, { children: (0, jsx_runtime_1.jsx)(components_react_1.MediaDeviceMenu, { initialSelection: audioDeviceId, kind: "audioinput", disabled: !audioTrack || !canUseAudio || !audioEnabled, tracks: { audioinput: audioTrack }, onActiveDeviceChange: (_, id) => setAudioDeviceId(id) }) }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "lk-button-group video" }, { children: [(0, jsx_runtime_1.jsx)(TrackToggle_1.TrackToggle, Object.assign({ disabled: !canUseVideo, initialState: videoEnabled, source: livekit_client_1.Track.Source.Camera, onChange: (enabled) => setVideoEnabled(enabled) }, { children: camLabel })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "lk-button-group-menu" }, { children: (0, jsx_runtime_1.jsx)(components_react_1.MediaDeviceMenu, { initialSelection: videoDeviceId, kind: "videoinput", disabled: !videoTrack || !canUseVideo || !videoEnabled, tracks: { videoinput: videoTrack }, onActiveDeviceChange: (_, id) => setVideoDeviceId(id) }) }))] }))] })), (0, jsx_runtime_1.jsx)("form", Object.assign({ className: "lk-username-container" }, { children: (0, jsx_runtime_1.jsx)("button", Object.assign({ className: "lk-button lk-join-button", type: "submit", onClick: handleSubmit, disabled: !isValid || error }, { children: joinLabel })) })), debug && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("strong", { children: "User Choices:" }), (0, jsx_runtime_1.jsxs)("ul", Object.assign({ className: "lk-list", style: { overflow: 'hidden', maxWidth: '15rem' } }, { children: [(0, jsx_runtime_1.jsxs)("li", { children: ["Username: ", `${userChoices.username}`] }), (0, jsx_runtime_1.jsxs)("li", { children: ["Video Enabled: ", `${userChoices.videoEnabled}`] }), (0, jsx_runtime_1.jsxs)("li", { children: ["Audio Enabled: ", `${userChoices.audioEnabled}`] }), (0, jsx_runtime_1.jsxs)("li", { children: ["Video Device: ", `${userChoices.videoDeviceId}`] }), (0, jsx_runtime_1.jsxs)("li", { children: ["Audio Device: ", `${userChoices.audioDeviceId}`] })] }))] }))] })));
|
|
284
|
+
return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "lk-prejoin" }, htmlProps, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "lk-video-container" }, { children: [videoTrack && (0, jsx_runtime_1.jsx)("video", { ref: videoEl, width: "1280", height: "720", "data-lk-facing-mode": facingMode }), (!videoTrack || !videoEnabled) && ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "lk-camera-off-note" }, { children: (0, jsx_runtime_1.jsx)(ParticipantTileAvatar_1.default, { user: scUserContext.user }) })))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "lk-button-group-container" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "lk-button-group audio" }, { children: [(0, jsx_runtime_1.jsx)(TrackToggle_1.TrackToggle, Object.assign({ disabled: !canUseAudio, initialState: audioEnabled, source: livekit_client_1.Track.Source.Microphone, onChange: (enabled) => setAudioEnabled(enabled) }, { children: micLabel })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "lk-button-group-menu" }, { children: (0, jsx_runtime_1.jsx)(components_react_1.MediaDeviceMenu, { initialSelection: audioDeviceId, kind: "audioinput", disabled: !audioTrack || !canUseAudio || !audioEnabled, tracks: { audioinput: audioTrack }, onActiveDeviceChange: (_, id) => setAudioDeviceId(id) }) }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "lk-button-group video" }, { children: [(0, jsx_runtime_1.jsx)(TrackToggle_1.TrackToggle, Object.assign({ disabled: !canUseVideo, initialState: videoEnabled, source: livekit_client_1.Track.Source.Camera, onChange: (enabled) => setVideoEnabled(enabled) }, { children: camLabel })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "lk-button-group-menu" }, { children: (0, jsx_runtime_1.jsx)(components_react_1.MediaDeviceMenu, { initialSelection: videoDeviceId, kind: "videoinput", disabled: !videoTrack || !canUseVideo || !videoEnabled, tracks: { videoinput: videoTrack }, onActiveDeviceChange: (_, id) => setVideoDeviceId(id) }) }))] })), (0, jsx_runtime_1.jsx)(LiveStreamSettingsMenu_1.default, { actionBlurDisabled: !canUseVideo || !videoEnabled, blurEnabled: blurEnabled, handleBlur: handleBlur })] })), (0, jsx_runtime_1.jsx)("form", Object.assign({ className: "lk-username-container" }, { children: (0, jsx_runtime_1.jsx)("button", Object.assign({ className: "lk-button lk-join-button", type: "submit", onClick: handleSubmit, disabled: !isValid || error }, { children: joinLabel })) })), debug && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("strong", { children: "User Choices:" }), (0, jsx_runtime_1.jsxs)("ul", Object.assign({ className: "lk-list", style: { overflow: 'hidden', maxWidth: '15rem' } }, { children: [(0, jsx_runtime_1.jsxs)("li", { children: ["Username: ", `${userChoices.username}`] }), (0, jsx_runtime_1.jsxs)("li", { children: ["Video Enabled: ", `${userChoices.videoEnabled}`] }), (0, jsx_runtime_1.jsxs)("li", { children: ["Audio Enabled: ", `${userChoices.audioEnabled}`] }), (0, jsx_runtime_1.jsxs)("li", { children: ["Video Device: ", `${userChoices.videoDeviceId}`] }), (0, jsx_runtime_1.jsxs)("li", { children: ["Audio Device: ", `${userChoices.audioDeviceId}`] })] }))] }))] })));
|
|
256
285
|
}
|
|
257
286
|
exports.PreJoin = PreJoin;
|
|
@@ -18,6 +18,10 @@ const styles_1 = require("@mui/material/styles");
|
|
|
18
18
|
const material_1 = require("@mui/material");
|
|
19
19
|
const system_1 = require("@mui/system");
|
|
20
20
|
const NoParticipants_1 = tslib_1.__importDefault(require("./NoParticipants"));
|
|
21
|
+
const LiveStreamSettingsMenu_1 = tslib_1.__importDefault(require("./LiveStreamSettingsMenu"));
|
|
22
|
+
const track_processors_1 = require("@livekit/track-processors");
|
|
23
|
+
const utils_1 = require("@selfcommunity/utils");
|
|
24
|
+
const LiveStream_1 = require("../../../constants/LiveStream");
|
|
21
25
|
const PREFIX = 'SCVideoConference';
|
|
22
26
|
const classes = {
|
|
23
27
|
root: `${PREFIX}-root`
|
|
@@ -38,7 +42,7 @@ const Root = (0, styles_1.styled)(material_1.Box, {
|
|
|
38
42
|
*
|
|
39
43
|
*/
|
|
40
44
|
function VideoConference(inProps) {
|
|
41
|
-
var _a, _b;
|
|
45
|
+
var _a, _b, _c;
|
|
42
46
|
// PROPS
|
|
43
47
|
const props = (0, system_1.useThemeProps)({
|
|
44
48
|
props: inProps,
|
|
@@ -55,16 +59,34 @@ function VideoConference(inProps) {
|
|
|
55
59
|
const lastAutoFocusedScreenShareTrack = React.useRef(null);
|
|
56
60
|
// HOOKS
|
|
57
61
|
const scUserContext = (0, react_core_1.useSCUser)();
|
|
62
|
+
const [blurEnabled, setBlurEnabled] = React.useState((0, utils_1.isClientSideRendering)() ? Boolean((_a = window === null || window === void 0 ? void 0 : window.localStorage) === null || _a === void 0 ? void 0 : _a.getItem(LiveStream_1.CHOICE_VIDEO_BLUR_EFFECT)) || false : false);
|
|
63
|
+
const [processorPending, setProcessorPending] = React.useState(false);
|
|
58
64
|
const tracks = (0, components_react_1.useTracks)([
|
|
59
65
|
{ source: livekit_client_1.Track.Source.Camera, withPlaceholder: true },
|
|
60
66
|
{ source: livekit_client_1.Track.Source.ScreenShare, withPlaceholder: false }
|
|
61
67
|
], { updateOnlyOn: [livekit_client_1.RoomEvent.ActiveSpeakersChanged], onlySubscribed: false });
|
|
62
68
|
const tracksNoParticipants = (0, react_1.useMemo)(() => tracks.filter((t) => t.participant.name === scUserContext.user.username || t.participant.name === speakerFocused.username || t.source === 'screen_share'), [tracks, scUserContext.user]);
|
|
69
|
+
const handleBlur = React.useCallback((event) => {
|
|
70
|
+
var _a, _b;
|
|
71
|
+
if (event.target) {
|
|
72
|
+
if ('checked' in event.target) {
|
|
73
|
+
setBlurEnabled((_a = event.target) === null || _a === void 0 ? void 0 : _a.checked);
|
|
74
|
+
}
|
|
75
|
+
else {
|
|
76
|
+
setBlurEnabled((enabled) => !enabled);
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
else {
|
|
80
|
+
setBlurEnabled((enabled) => !enabled);
|
|
81
|
+
}
|
|
82
|
+
(_b = window === null || window === void 0 ? void 0 : window.localStorage) === null || _b === void 0 ? void 0 : _b.setItem(LiveStream_1.CHOICE_VIDEO_BLUR_EFFECT, (!blurEnabled).toString());
|
|
83
|
+
}, [setBlurEnabled, blurEnabled]);
|
|
63
84
|
const participants = (0, components_react_1.useParticipants)();
|
|
64
85
|
const layoutContext = (0, components_react_1.useCreateLayoutContext)();
|
|
65
86
|
const screenShareTracks = tracks.filter(components_core_1.isTrackReference).filter((track) => track.publication.source === livekit_client_1.Track.Source.ScreenShare);
|
|
66
|
-
const focusTrack = (
|
|
87
|
+
const focusTrack = (_b = (0, components_react_1.usePinnedTracks)(layoutContext)) === null || _b === void 0 ? void 0 : _b[0];
|
|
67
88
|
const carouselTracks = tracks.filter((track) => !(0, components_core_1.isEqualTrackRef)(track, focusTrack));
|
|
89
|
+
const { cameraTrack } = (0, components_react_1.useLocalParticipant)();
|
|
68
90
|
(0, useLiveStreamCheck_1.useLivestreamCheck)();
|
|
69
91
|
/**
|
|
70
92
|
* widgetUpdate
|
|
@@ -120,7 +142,7 @@ function VideoConference(inProps) {
|
|
|
120
142
|
}
|
|
121
143
|
}, [
|
|
122
144
|
screenShareTracks.map((ref) => `${ref.publication.trackSid}_${ref.publication.isSubscribed}`).join(),
|
|
123
|
-
(
|
|
145
|
+
(_c = focusTrack === null || focusTrack === void 0 ? void 0 : focusTrack.publication) === null || _c === void 0 ? void 0 : _c.trackSid,
|
|
124
146
|
tracks,
|
|
125
147
|
participants,
|
|
126
148
|
speakerFocused
|
|
@@ -143,11 +165,28 @@ function VideoConference(inProps) {
|
|
|
143
165
|
}
|
|
144
166
|
}
|
|
145
167
|
}, [tracks, participants, speakerFocused]);
|
|
168
|
+
(0, react_1.useEffect)(() => {
|
|
169
|
+
const localCamTrack = cameraTrack === null || cameraTrack === void 0 ? void 0 : cameraTrack.track;
|
|
170
|
+
if (localCamTrack) {
|
|
171
|
+
setProcessorPending(true);
|
|
172
|
+
try {
|
|
173
|
+
if (blurEnabled && !localCamTrack.getProcessor()) {
|
|
174
|
+
localCamTrack.setProcessor((0, track_processors_1.BackgroundBlur)(20));
|
|
175
|
+
}
|
|
176
|
+
else if (!blurEnabled) {
|
|
177
|
+
localCamTrack.stopProcessor();
|
|
178
|
+
}
|
|
179
|
+
}
|
|
180
|
+
finally {
|
|
181
|
+
setProcessorPending(false);
|
|
182
|
+
}
|
|
183
|
+
}
|
|
184
|
+
}, [blurEnabled, cameraTrack]);
|
|
146
185
|
return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(className, classes.root, 'lk-video-conference') }, rest, { children: [(0, components_core_1.isWeb)() && ((0, jsx_runtime_1.jsxs)(components_react_1.LayoutContextProvider, Object.assign({ value: layoutContext, onPinChange: handleFocusStateChange, onWidgetChange: widgetUpdate }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "lk-video-conference-inner" }, { children: [!focusTrack ? ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "lk-grid-layout-wrapper" }, { children: (0, jsx_runtime_1.jsx)(components_react_1.GridLayout, Object.assign({ tracks: hideParticipantsList ? tracksNoParticipants : tracks }, { children: (0, jsx_runtime_1.jsx)(ParticipantTile_1.ParticipantTile, {}) })) }))) : ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "lk-focus-layout-wrapper" }, { children: hideParticipantsList ? ((0, jsx_runtime_1.jsx)(FocusLayout_1.FocusLayoutContainerNoParticipants, { children: focusTrack && (0, jsx_runtime_1.jsx)(FocusLayout_1.FocusLayout, { trackRef: focusTrack }) })) : ((0, jsx_runtime_1.jsxs)(FocusLayout_1.FocusLayoutContainer, { children: [carouselTracks.length ? ((0, jsx_runtime_1.jsx)(components_react_1.CarouselLayout, Object.assign({ tracks: carouselTracks }, { children: (0, jsx_runtime_1.jsx)(ParticipantTile_1.ParticipantTile, {}) }))) : ((0, jsx_runtime_1.jsx)(NoParticipants_1.default, {})), focusTrack && (0, jsx_runtime_1.jsx)(FocusLayout_1.FocusLayout, { trackRef: focusTrack })] })) }))), (0, jsx_runtime_1.jsx)(ControlBar_1.ControlBar, { controls: Object.assign({
|
|
147
186
|
chat: !disableChat,
|
|
148
187
|
microphone: !disableMicrophone,
|
|
149
188
|
camera: !disableCamera,
|
|
150
189
|
screenShare: !disableShareScreen
|
|
151
|
-
}, { settings:
|
|
190
|
+
}, { settings: true }) })] })), !disableChat && ((0, jsx_runtime_1.jsx)(components_react_1.Chat, { style: { display: widgetState.showChat ? 'grid' : 'none' }, messageFormatter: chatMessageFormatter, messageEncoder: chatMessageEncoder, messageDecoder: chatMessageDecoder })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "lk-settings-menu-modal", style: { display: widgetState.showSettings ? 'block' : 'none' } }, { children: SettingsComponent ? ((0, jsx_runtime_1.jsx)(SettingsComponent, {})) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(LiveStreamSettingsMenu_1.default, { onlyContentMenu: true, actionBlurDisabled: !cameraTrack && !disableCamera, blurEnabled: blurEnabled, handleBlur: handleBlur }) })) }))] }))), (0, jsx_runtime_1.jsx)(components_react_1.RoomAudioRenderer, {}), (0, jsx_runtime_1.jsx)(components_react_1.ConnectionStateToast, {})] })));
|
|
152
191
|
}
|
|
153
192
|
exports.VideoConference = VideoConference;
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.LIVE_STREAM_DESCRIPTION_MAX_LENGTH = exports.LIVE_STREAM_SLUG_MAX_LENGTH = exports.LIVE_STREAM_TITLE_MAX_LENGTH = void 0;
|
|
3
|
+
exports.CHOICE_VIDEO_BLUR_EFFECT = exports.LIVE_STREAM_DESCRIPTION_MAX_LENGTH = exports.LIVE_STREAM_SLUG_MAX_LENGTH = exports.LIVE_STREAM_TITLE_MAX_LENGTH = void 0;
|
|
4
4
|
exports.LIVE_STREAM_TITLE_MAX_LENGTH = 100;
|
|
5
5
|
exports.LIVE_STREAM_SLUG_MAX_LENGTH = 50;
|
|
6
6
|
exports.LIVE_STREAM_DESCRIPTION_MAX_LENGTH = 500;
|
|
7
|
+
exports.CHOICE_VIDEO_BLUR_EFFECT = 'lk-video-blur';
|
|
@@ -75,7 +75,7 @@ export default function LiveStreamSettingsForm(inProps) {
|
|
|
75
75
|
/**
|
|
76
76
|
* Renders root object
|
|
77
77
|
*/
|
|
78
|
-
return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: [_jsxs(Stack, Object.assign({ direction: "row", spacing: 1, alignItems: "center" }, { children: [_jsx(Switch, { className: classes.switch, disabled: !liveStreamEnabled, checked: !(settings === null || settings === void 0 ? void 0 : settings.muteParticipants), onChange: () => onChange(Object.assign(Object.assign(Object.assign({}, LIVESTREAM_DEFAULT_SETTINGS), settings), { ['muteParticipants']: !(settings === null || settings === void 0 ? void 0 : settings.muteParticipants) })) }), _jsx(Typography, Object.assign({ className: classes.switchLabel }, { children: _jsx(FormattedMessage, { id: "ui.liveStreamForm.muteParticipants", defaultMessage: "ui.liveStreamForm.muteParticipants" }) }))] })), (isEnterpriseFeaturesVisible || liveStreamVideoConferenceEnabled) && (_jsxs(_Fragment, { children: [_jsxs(Stack, Object.assign({ direction: "row", spacing: 1, alignItems: "center" }, { children: [_jsx(Switch, { className: classes.switch, checked: !(settings === null || settings === void 0 ? void 0 : settings.disableVideo), disabled: !isEnterpriseTier
|
|
78
|
+
return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: [_jsxs(Stack, Object.assign({ direction: "row", spacing: 1, alignItems: "center" }, { children: [_jsx(Switch, { className: classes.switch, disabled: !liveStreamEnabled, checked: !(settings === null || settings === void 0 ? void 0 : settings.muteParticipants), onChange: () => onChange(Object.assign(Object.assign(Object.assign({}, LIVESTREAM_DEFAULT_SETTINGS), settings), { ['muteParticipants']: !(settings === null || settings === void 0 ? void 0 : settings.muteParticipants) })) }), _jsx(Typography, Object.assign({ className: classes.switchLabel }, { children: _jsx(FormattedMessage, { id: "ui.liveStreamForm.muteParticipants", defaultMessage: "ui.liveStreamForm.muteParticipants" }) }))] })), liveStreamEnabled && (isEnterpriseFeaturesVisible || liveStreamVideoConferenceEnabled) && (_jsxs(_Fragment, { children: [_jsxs(Stack, Object.assign({ direction: "row", spacing: 1, alignItems: "center" }, { children: [_jsx(Switch, { className: classes.switch, checked: !(settings === null || settings === void 0 ? void 0 : settings.disableVideo), disabled: !isEnterpriseTier && !liveStreamVideoConferenceEnabled, onChange: () => onChange(Object.assign(Object.assign(Object.assign({}, LIVESTREAM_DEFAULT_SETTINGS), settings), { ['disableVideo']: !(settings === null || settings === void 0 ? void 0 : settings.disableVideo) })) }), _jsx(Typography, Object.assign({ className: classes.switchLabel }, { children: _jsx(FormattedMessage, { id: "ui.liveStreamForm.disableVideo", defaultMessage: "ui.liveStreamForm.disableVideo" }) })), !liveStreamVideoConferenceEnabled && _jsx(UpScalingTierBadge, { desiredTier: SCCommunitySubscriptionTier.ENTERPRISE })] })), _jsxs(Stack, Object.assign({ direction: "row", spacing: 1, alignItems: "center" }, { children: [_jsx(Switch, { className: classes.switch, checked: !(settings === null || settings === void 0 ? void 0 : settings.disableShareScreen), disabled: !isEnterpriseTier && !liveStreamVideoConferenceEnabled, onChange: () => onChange(Object.assign(Object.assign(Object.assign({}, LIVESTREAM_DEFAULT_SETTINGS), settings), { ['disableShareScreen']: !(settings === null || settings === void 0 ? void 0 : settings.disableShareScreen) })) }), _jsx(Typography, Object.assign({ className: classes.switchLabel }, { children: _jsx(FormattedMessage, { id: "ui.liveStreamForm.disableShareScreen", defaultMessage: "ui.liveStreamForm.disableShareScreen" }) })), !liveStreamVideoConferenceEnabled && _jsx(UpScalingTierBadge, { desiredTier: SCCommunitySubscriptionTier.ENTERPRISE })] }))] })), _jsxs(Stack, Object.assign({ direction: "row", spacing: 1, alignItems: "center" }, { children: [_jsx(Switch, { className: classes.switch, disabled: !liveStreamEnabled, checked: !(settings === null || settings === void 0 ? void 0 : settings.disableChat), onChange: () => onChange(Object.assign(Object.assign(Object.assign({}, LIVESTREAM_DEFAULT_SETTINGS), settings), { ['disableChat']: !(settings === null || settings === void 0 ? void 0 : settings.disableChat) })) }), _jsx(Typography, Object.assign({ className: classes.switchLabel }, { children: _jsx(FormattedMessage, { id: "ui.liveStreamForm.disableChat", defaultMessage: "ui.liveStreamForm.disableChat" }) }))] })), _jsxs(Stack, Object.assign({ direction: "row", spacing: 1, alignItems: "center" }, { children: [_jsx(Switch, { className: classes.switch, disabled: !liveStreamEnabled, checked: Boolean(settings === null || settings === void 0 ? void 0 : settings.hideParticipantsList), onChange: () => onChange(Object.assign(Object.assign(Object.assign({}, LIVESTREAM_DEFAULT_SETTINGS), settings), { ['hideParticipantsList']: !(settings === null || settings === void 0 ? void 0 : settings.hideParticipantsList) })) }), _jsx(Typography, Object.assign({ className: classes.switchLabel }, { children: _jsx(FormattedMessage, { id: "ui.liveStreamForm.hideParticipantsList", defaultMessage: "ui.liveStreamForm.hideParticipantsList" }) }))] })), _jsxs(Stack, Object.assign({ direction: "row", spacing: 1, alignItems: "center" }, { children: [_jsx(Switch, { className: classes.switch, disabled: !liveStreamEnabled, checked: Boolean(settings === null || settings === void 0 ? void 0 : settings.automaticallyNotifyFollowers), onChange: () => onChange(Object.assign(Object.assign(Object.assign({}, LIVESTREAM_DEFAULT_SETTINGS), settings), { ['automaticallyNotifyFollowers']: !(settings === null || settings === void 0 ? void 0 : settings.automaticallyNotifyFollowers) })) }), _jsx(Typography, Object.assign({ className: classes.switchLabel }, { children: _jsx(FormattedMessage, { id: "ui.liveStreamForm.automaticallyNotifyFollowers", defaultMessage: "ui.liveStreamForm.automaticallyNotifyFollowers" }) }))] })), _jsxs(Stack, Object.assign({ direction: "row", spacing: 1, alignItems: "center" }, { children: [_jsx(Switch, { className: classes.switch, disabled: !liveStreamEnabled, checked: Boolean(settings === null || settings === void 0 ? void 0 : settings.showInProfile), onChange: () => onChange(Object.assign(Object.assign(Object.assign({}, LIVESTREAM_DEFAULT_SETTINGS), settings), { ['showInProfile']: !(settings === null || settings === void 0 ? void 0 : settings.showInProfile) })) }), _jsx(Typography, Object.assign({ className: classes.switchLabel }, { children: _jsx(FormattedMessage, { id: "ui.liveStreamForm.showInProfile", defaultMessage: "ui.liveStreamForm.showInProfile" }) }))] })), _jsxs(FormControl, Object.assign({ className: classes.accessView }, { children: [_jsx(InputLabel, Object.assign({ id: "viewLabel" }, { children: _jsx(FormattedMessage, { id: "ui.liveStreamForm.view.label", defaultMessage: "ui.liveStreamForm.view.label" }) })), _jsx(Select, Object.assign({ name: "view", label: _jsx(FormattedMessage, { id: "ui.liveStreamForm.view.label", defaultMessage: "ui.liveStreamForm.view.label" }), labelId: "viewLabel", disabled: !liveStreamEnabled, fullWidth: true, value: (_a = settings === null || settings === void 0 ? void 0 : settings.view) !== null && _a !== void 0 ? _a : SCLiveStreamViewType.SPEAKER, onChange: (e) => onChange(Object.assign(Object.assign(Object.assign({}, LIVESTREAM_DEFAULT_SETTINGS), settings), { ['view']: e.target.value })), displayEmpty: true, renderValue: (selected) => {
|
|
79
79
|
return (_jsxs(_Fragment, { children: [_jsx(Icon, Object.assign({ className: classes.accessViewIcon }, { children: selected === SCLiveStreamViewType.SPEAKER ? 'upload' : 'category' })), "\u00A0", _jsx(FormattedMessage, { id: `ui.liveStreamForm.view.${selected}`, defaultMessage: `ui.liveStreamForm.view.${selected}` })] }));
|
|
80
80
|
} }, { children: Object.values(SCLiveStreamViewType).map((f) => (_jsx(MenuItem, Object.assign({ value: f }, { children: _jsxs(Box, { children: [_jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsxs("b", { children: [_jsx(Icon, Object.assign({ className: classes.accessViewIcon }, { children: f === SCLiveStreamViewType.SPEAKER ? 'upload' : 'category' })), "\u00A0", _jsx(FormattedMessage, { id: `ui.liveStreamForm.view.${f}`, defaultMessage: `ui.liveStreamForm.view.${f}` })] }) })), _jsx(Typography, Object.assign({ sx: { textWrap: 'auto' } }, { children: _jsx(FormattedMessage, { id: `ui.liveStreamForm.view.${f}.description`, defaultMessage: `ui.liveStreamForm.view.${f}.description` }) }))] }) }), f))) }))] }))] })));
|
|
81
81
|
}
|
|
@@ -9,6 +9,7 @@ import { useMediaQuery } from '@mui/material';
|
|
|
9
9
|
import { SettingsMenuToggle } from './SettingsMenuToggle';
|
|
10
10
|
import { DisconnectButton } from './DisconnectButton';
|
|
11
11
|
import { mergeProps } from './utils';
|
|
12
|
+
import { FormattedMessage } from 'react-intl';
|
|
12
13
|
/**
|
|
13
14
|
* The `ControlBar` prefab gives the user the basic user interface to control their
|
|
14
15
|
* media devices (camera, microphone and screen share), open the `Chat` and leave the room.
|
|
@@ -54,5 +55,6 @@ export function ControlBar(_a) {
|
|
|
54
55
|
});
|
|
55
56
|
const microphoneOnChange = React.useCallback((enabled, isUserInitiated) => (isUserInitiated ? saveAudioInputEnabled(enabled) : null), [saveAudioInputEnabled]);
|
|
56
57
|
const cameraOnChange = React.useCallback((enabled, isUserInitiated) => (isUserInitiated ? saveVideoInputEnabled(enabled) : null), [saveVideoInputEnabled]);
|
|
57
|
-
return (_jsxs("div", Object.assign({}, htmlProps, { children: [visibleControls.microphone && (_jsxs("div", Object.assign({ className: "lk-button-group" }, { children: [_jsx(_Fragment, { children: _jsx(TrackToggle, Object.assign({ source: Track.Source.Microphone, showIcon: showIcon, onChange: microphoneOnChange, onDeviceError: (error) => onDeviceError === null || onDeviceError === void 0 ? void 0 : onDeviceError({ source: Track.Source.Microphone, error }) }, { children: showText &&
|
|
58
|
+
return (_jsxs("div", Object.assign({}, htmlProps, { children: [visibleControls.microphone && (_jsxs("div", Object.assign({ className: "lk-button-group" }, { children: [_jsx(_Fragment, { children: _jsx(TrackToggle, Object.assign({ source: Track.Source.Microphone, showIcon: showIcon, onChange: microphoneOnChange, onDeviceError: (error) => onDeviceError === null || onDeviceError === void 0 ? void 0 : onDeviceError({ source: Track.Source.Microphone, error }) }, { children: showText && _jsx(FormattedMessage, { id: "ui.liveStreamRoom.controlBar.microphone", defaultMessage: "ui.liveStreamRoom.controlBar.microphone" }) })) }), _jsx("div", Object.assign({ className: "lk-button-group-menu" }, { children: _jsx(MediaDeviceMenu, { kind: "audioinput", onActiveDeviceChange: (_kind, deviceId) => saveAudioInputDeviceId(deviceId !== null && deviceId !== void 0 ? deviceId : '') }) }))] }))), visibleControls.camera && (_jsxs("div", Object.assign({ className: "lk-button-group" }, { children: [_jsx(_Fragment, { children: _jsx(TrackToggle, Object.assign({ source: Track.Source.Camera, showIcon: showIcon, onChange: cameraOnChange, onDeviceError: (error) => onDeviceError === null || onDeviceError === void 0 ? void 0 : onDeviceError({ source: Track.Source.Camera, error }) }, { children: showText && _jsx(FormattedMessage, { id: "ui.liveStreamRoom.controlBar.camera", defaultMessage: "ui.liveStreamRoom.controlBar.camera" }) })) }), _jsx("div", Object.assign({ className: "lk-button-group-menu" }, { children: _jsx(MediaDeviceMenu, { kind: "videoinput", onActiveDeviceChange: (_kind, deviceId) => saveVideoInputDeviceId(deviceId !== null && deviceId !== void 0 ? deviceId : '') }) }))] }))), visibleControls.screenShare && browserSupportsScreenSharing && (_jsx(_Fragment, { children: _jsx(TrackToggle, Object.assign({ source: Track.Source.ScreenShare, captureOptions: { audio: true, selfBrowserSurface: 'include', surfaceSwitching: 'exclude' }, showIcon: showIcon, onChange: onScreenShareChange, onDeviceError: (error) => onDeviceError === null || onDeviceError === void 0 ? void 0 : onDeviceError({ source: Track.Source.ScreenShare, error }) }, { children: showText &&
|
|
59
|
+
(isScreenShareEnabled ? (_jsx(FormattedMessage, { id: "ui.liveStreamRoom.controlBar.stopShareScreen", defaultMessage: "ui.liveStreamRoom.controlBar.stopShareScreen" })) : (_jsx(FormattedMessage, { id: "ui.liveStreamRoom.controlBar.shareScreen", defaultMessage: "ui.liveStreamRoom.controlBar.shareScreen" }))) })) })), visibleControls.chat && (_jsx(_Fragment, { children: _jsxs(ChatToggle, { children: [showIcon && _jsx(ChatIcon, {}), showText && _jsx(FormattedMessage, { id: "ui.liveStreamRoom.controlBar.chat", defaultMessage: "ui.liveStreamRoom.controlBar.chat" })] }) })), visibleControls.settings && (_jsx(_Fragment, { children: _jsxs(SettingsMenuToggle, { children: [showIcon && _jsx(GearIcon, {}), showText && _jsx(FormattedMessage, { id: "ui.liveStreamRoom.controlBar.settings", defaultMessage: "ui.liveStreamRoom.controlBar.settings" })] }) })), visibleControls.leave && (_jsx(_Fragment, { children: _jsxs(DisconnectButton, { children: [showIcon && _jsx(LeaveIcon, {}), showText && _jsx(FormattedMessage, { id: "ui.liveStreamRoom.controlBar.leave", defaultMessage: "ui.liveStreamRoom.controlBar.leave" })] }) })), _jsx(StartMediaButton, {})] })));
|
|
58
60
|
}
|
package/lib/esm/components/LiveStreamRoom/LiveStreamVideoConference/LiveStreamSettingsMenu.d.ts
ADDED
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
export interface LiveStreamSettingsMenuProps {
|
|
2
|
+
className?: string;
|
|
3
|
+
blurEnabled?: boolean;
|
|
4
|
+
handleBlur?: (event: any) => void;
|
|
5
|
+
actionBlurDisabled?: boolean;
|
|
6
|
+
onlyContentMenu?: boolean;
|
|
7
|
+
}
|
|
8
|
+
export default function LiveStreamSettingsMenu(inProps: LiveStreamSettingsMenuProps): JSX.Element;
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
import { __rest } from "tslib";
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
+
import * as React from 'react';
|
|
4
|
+
import Button from '@mui/material/Button';
|
|
5
|
+
import Menu from '@mui/material/Menu';
|
|
6
|
+
import { Box, FormControlLabel, Icon, Switch, Typography } from '@mui/material';
|
|
7
|
+
import { styled } from '@mui/material/styles';
|
|
8
|
+
import { useThemeProps } from '@mui/system';
|
|
9
|
+
import classNames from 'classnames';
|
|
10
|
+
import { Fragment, useMemo } from 'react';
|
|
11
|
+
import { FormattedMessage } from 'react-intl';
|
|
12
|
+
const PREFIX = 'SCLiveStreamSettingsMenu';
|
|
13
|
+
const classes = {
|
|
14
|
+
root: `${PREFIX}-root`,
|
|
15
|
+
menuRoot: `${PREFIX}-menu-root`
|
|
16
|
+
};
|
|
17
|
+
const Root = styled(Button, {
|
|
18
|
+
name: PREFIX,
|
|
19
|
+
slot: 'Root',
|
|
20
|
+
overridesResolver: (props, styles) => styles.root
|
|
21
|
+
})(({ theme }) => ({
|
|
22
|
+
borderRadius: 7,
|
|
23
|
+
color: theme.palette.common.white,
|
|
24
|
+
paddingLeft: theme.spacing(),
|
|
25
|
+
paddingRight: theme.spacing(),
|
|
26
|
+
minWidth: 45
|
|
27
|
+
}));
|
|
28
|
+
const MenuRoot = styled(Menu, {
|
|
29
|
+
name: PREFIX,
|
|
30
|
+
slot: 'Root',
|
|
31
|
+
overridesResolver: (props, styles) => styles.menuRoot
|
|
32
|
+
})(({ theme }) => ({
|
|
33
|
+
'& .MuiPaper-root': {
|
|
34
|
+
minWidth: 120,
|
|
35
|
+
paddingRight: theme.spacing(2),
|
|
36
|
+
'& div.MuiTypography-body1': {
|
|
37
|
+
paddingLeft: theme.spacing(2)
|
|
38
|
+
},
|
|
39
|
+
'& .MuiFormControlLabel-label.Mui-disabled': {
|
|
40
|
+
color: theme.palette.text.primary
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
}));
|
|
44
|
+
export default function LiveStreamSettingsMenu(inProps) {
|
|
45
|
+
// PROPS
|
|
46
|
+
const props = useThemeProps({
|
|
47
|
+
props: inProps,
|
|
48
|
+
name: PREFIX
|
|
49
|
+
});
|
|
50
|
+
const { className, actionBlurDisabled = false, blurEnabled = false, handleBlur, onlyContentMenu = false } = props, rest = __rest(props, ["className", "actionBlurDisabled", "blurEnabled", "handleBlur", "onlyContentMenu"]);
|
|
51
|
+
const [anchorEl, setAnchorEl] = React.useState(null);
|
|
52
|
+
const open = Boolean(anchorEl);
|
|
53
|
+
const handleClick = (event) => {
|
|
54
|
+
setAnchorEl(event.currentTarget);
|
|
55
|
+
};
|
|
56
|
+
const handleClose = () => {
|
|
57
|
+
setAnchorEl(null);
|
|
58
|
+
};
|
|
59
|
+
const MenuContent = useMemo(() => (_jsxs(Box, { children: [_jsx(Typography, Object.assign({ variant: "body1", component: "div" }, { children: _jsx("b", { children: _jsx(FormattedMessage, { id: "ui.liveStreamRoom.settingsMenu.visualEffect", defaultMessage: "ui.liveStreamRoom.settingsMenu.visualEffect" }) }) })), _jsx(FormControlLabel, { labelPlacement: "start", control: _jsx(Switch, { checked: blurEnabled, disabled: actionBlurDisabled, onChange: handleBlur, inputProps: { 'aria-label': 'controlled' } }), label: _jsx(FormattedMessage, { id: "ui.liveStreamRoom.settingsMenu.visualEffect.blurEffect", defaultMessage: "ui.liveStreamRoom.settingsMenu.visualEffect.blurEffect" }) })] })), [blurEnabled, actionBlurDisabled, handleBlur]);
|
|
60
|
+
if (onlyContentMenu) {
|
|
61
|
+
return MenuContent;
|
|
62
|
+
}
|
|
63
|
+
return (_jsxs(Fragment, { children: [_jsx(Root, Object.assign({ className: classNames(className, classes.root, 'lk-button'), "aria-controls": open ? 'live-stream-settings-menu' : undefined, "aria-haspopup": "true", "aria-expanded": open ? 'true' : undefined, onClick: handleClick }, rest, { children: _jsx(Icon, { children: "more_vert" }) })), _jsx(MenuRoot, Object.assign({ id: "live-stream-settings-menu", anchorEl: anchorEl, open: open, onClose: handleClose, MenuListProps: {
|
|
64
|
+
'aria-labelledby': 'basic-button'
|
|
65
|
+
} }, { children: MenuContent }))] }));
|
|
66
|
+
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { CreateLocalTracksOptions, LocalAudioTrack, LocalTrack, LocalVideoTrack } from 'livekit-client';
|
|
2
|
-
import { Track } from 'livekit-client';
|
|
2
|
+
import { Track, TrackProcessor } from 'livekit-client';
|
|
3
3
|
import * as React from 'react';
|
|
4
4
|
import type { LocalUserChoices } from '@livekit/components-core';
|
|
5
5
|
/**
|
|
@@ -28,6 +28,7 @@ export interface PreJoinProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
|
|
|
28
28
|
* @alpha
|
|
29
29
|
*/
|
|
30
30
|
persistUserChoices?: boolean;
|
|
31
|
+
videoProcessor?: TrackProcessor<Track.Kind.Video>;
|
|
31
32
|
}
|
|
32
33
|
/** @alpha */
|
|
33
34
|
export declare function usePreviewTracks(options: CreateLocalTracksOptions, onError?: (err: Error) => void): {
|
|
@@ -55,4 +56,4 @@ export declare function usePreviewDevice<T extends LocalVideoTrack | LocalAudioT
|
|
|
55
56
|
* ```
|
|
56
57
|
* @public
|
|
57
58
|
*/
|
|
58
|
-
export declare function PreJoin({ defaults, onValidate, onSubmit, onError, debug, joinLabel, micLabel, camLabel, userLabel, persistUserChoices, ...htmlProps }: PreJoinProps): JSX.Element;
|
|
59
|
+
export declare function PreJoin({ defaults, onValidate, onSubmit, onError, debug, joinLabel, micLabel, camLabel, userLabel, persistUserChoices, videoProcessor, ...htmlProps }: PreJoinProps): JSX.Element;
|