@selfcommunity/react-ui
Version:
React UI Components to integrate a Community created with SelfCommunity Platform.
82 lines (77 loc) • 11.1 kB
JavaScript
import { __rest } from "tslib";
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { Box, FormControl, Icon, InputLabel, MenuItem, Select, Stack, Switch, Typography } from '@mui/material';
import { styled } from '@mui/material/styles';
import { useThemeProps } from '@mui/system';
import { SCCommunitySubscriptionTier, SCFeatureName, SCLiveStreamViewType } from '@selfcommunity/types';
import classNames from 'classnames';
import { useContext, useMemo } from 'react';
import { FormattedMessage } from 'react-intl';
import { LIVESTREAM_DEFAULT_SETTINGS } from './constants';
import { SCPreferences, SCUserContext, useSCPreferences } from '@selfcommunity/react-core';
import UpScalingTierBadge from '../../shared/UpScalingTierBadge';
export const PREFIX = 'SCLiveStreamFormSettings';
const classes = {
root: `${PREFIX}-root`,
switch: `${PREFIX}-switch`,
switchLabel: `${PREFIX}-switch-Label`,
accessView: `${PREFIX}-access-view`,
accessViewIcon: `${PREFIX}-access-view-icon`
};
const Root = styled(Box, {
name: PREFIX,
slot: 'Root'
})(() => ({}));
/**
*> API documentation for the Community-JS LiveStreamSettingsForm component. Learn about the available props and the CSS API.
*
#### Import
```jsx
import {LiveStreamSettingsForm} from '@selfcommunity/react-ui';
```
#### Component Name
The name `LiveStreamSettingsForm` can be used when providing style overrides in the theme.
#### CSS
|Rule Name|Global class|Description|
|---|---|---|
|root|.SCLiveStreamForm-root|Styles applied to the root element.|
|switch|.SCLiveStreamForm-switch|Styles applied to the switch element.|
|switchLabel|.SCLiveStreamForm-switch-label|Styles applied to the switchLabel element.|
|accessView|.SCLiveStreamForm-access-view|Styles applied to the access view.|
* @param inProps
*/
export default function LiveStreamSettingsForm(inProps) {
var _a;
//PROPS
const props = useThemeProps({
props: inProps,
name: PREFIX
});
const { className, settings = LIVESTREAM_DEFAULT_SETTINGS, onChange } = props, rest = __rest(props, ["className", "settings", "onChange"]);
// CONTEXT
const scUserContext = useContext(SCUserContext);
const { preferences, features } = useSCPreferences();
const liveStreamEnabled = useMemo(() => preferences &&
features &&
features.includes(SCFeatureName.LIVE_STREAM) &&
SCPreferences.CONFIGURATIONS_LIVE_STREAM_ENABLED in preferences &&
preferences[SCPreferences.CONFIGURATIONS_LIVE_STREAM_ENABLED].value, [preferences, features]);
const liveStreamVideoConferenceEnabled = useMemo(() => preferences &&
features &&
features.includes(SCFeatureName.LIVE_STREAM) &&
SCPreferences.CONFIGURATIONS_LIVE_VIDEO_CONFERENCE_ENABLED in preferences &&
preferences[SCPreferences.CONFIGURATIONS_LIVE_VIDEO_CONFERENCE_ENABLED].value, [preferences, features]);
const authUserId = useMemo(() => (scUserContext.user ? scUserContext.user.id : null), [scUserContext.user]);
const isCommunityOwner = useMemo(() => authUserId === 1, [authUserId]);
const isEnterpriseTier = useMemo(() => preferences &&
SCPreferences.CONFIGURATIONS_SUBSCRIPTION_TIER in preferences &&
preferences[SCPreferences.CONFIGURATIONS_SUBSCRIPTION_TIER].value &&
preferences[SCPreferences.CONFIGURATIONS_SUBSCRIPTION_TIER].value === SCCommunitySubscriptionTier.ENTERPRISE, [preferences]);
const isEnterpriseFeaturesVisible = useMemo(() => Boolean(isEnterpriseTier || isCommunityOwner), [isEnterpriseTier, isCommunityOwner]);
/**
* Renders root object
*/
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) => {
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}` })] }));
} }, { 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))) }))] }))] })));
}