@selfcommunity/react-ui 0.10.2-alpha.8 → 0.10.2-courses.100

package/lib/esm/components/LiveStreamForm/LiveStreamForm.js

@@ -0,0 +1,239 @@
+import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { LoadingButton } from '@mui/lab';
+import { Alert, Box, FormGroup, Paper, TextField, Typography } from '@mui/material';
+import { styled } from '@mui/material/styles';
+import { useThemeProps } from '@mui/system';
+import { SCCommunitySubscriptionTier } from '@selfcommunity/types';
+import classNames from 'classnames';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
+import { LIVE_STREAM_DESCRIPTION_MAX_LENGTH, LIVE_STREAM_TITLE_MAX_LENGTH, LIVE_STREAM_SLUG_MAX_LENGTH } from '../../constants/LiveStream';
+import { LIVESTREAM_DEFAULT_SETTINGS, PREFIX } from './constants';
+import UploadEventCover from '../EventForm/UploadEventCover';
+import LiveStreamSettingsForm from './LiveStreamFormSettings';
+import { formatHttpErrorCode, LiveStreamApiClient, LiveStreamService } from '@selfcommunity/api-services';
+import { SCOPE_SC_UI } from '../../constants/Errors';
+import { Logger } from '@selfcommunity/utils';
+import CoverPlaceholder from '../../assets/deafultCover';
+import { Link, SCPreferences, useSCContext, useSCPreferences, useSCUser } from '@selfcommunity/react-core';
+import { SELFCOMMUNITY_PRICING } from '../PlatformWidget/constants';
+import { WARNING_THRESHOLD_EXPIRING_SOON } from '../LiveStreamRoom/constants';
+const classes = {
+    root: `${PREFIX}-root`,
+    warning: `${PREFIX}-warning`,
+    form: `${PREFIX}-form`,
+    title: `${PREFIX}-title`,
+    cover: `${PREFIX}-cover`,
+    slug: `${PREFIX}-slug`,
+    description: `${PREFIX}-description`,
+    content: `${PREFIX}-content`,
+    actions: `${PREFIX}-actions`,
+    error: `${PREFIX}-error`,
+    genericError: `${PREFIX}-generic-error`
+};
+const Root = styled(Box, {
+    name: PREFIX,
+    slot: 'Root'
+})(({ theme }) => ({}));
+const messages = defineMessages({
+    title: {
+        id: 'ui.liveStreamForm.title.placeholder',
+        defaultMessage: 'ui.liveStreamForm.title.placeholder'
+    },
+    slug: {
+        id: 'ui.liveStreamForm.slug.placeholder',
+        defaultMessage: 'ui.liveStreamForm.slug.placeholder'
+    },
+    description: {
+        id: 'ui.liveStreamForm.description.placeholder',
+        defaultMessage: 'ui.liveStreamForm.description.placeholder'
+    }
+});
+/**
+ *> API documentation for the Community-JS LiveStreamForm component. Learn about the available props and the CSS API.
+ *
+ #### Import
+ ```jsx
+ import {LiveStreamForm} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+ The name `LiveStreamForm` 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.|
+ |title|.SCLiveStreamForm-title|Styles applied to the title element.|
+ |cover|.SCLiveStreamForm-cover|Styles applied to the cover field.|
+ |form|.SCLiveStreamForm-form|Styles applied to the form element.|
+ |name|.SCLiveStreamForm-name|Styles applied to the name field.|
+ |description|.SCLiveStreamForm-description|Styles applied to the description field.|
+ |content|.SCLiveStreamForm-content|Styles applied to the  element.|
+ |error|.SCLiveStreamForm-error|Styles applied to the error elements.|
+
+ * @param inProps
+ */
+export default function LiveStreamForm(inProps) {
+    var _a, _b, _c;
+    //PROPS
+    const props = useThemeProps({
+        props: inProps,
+        name: PREFIX
+    });
+    const { className, onSuccess, onError, liveStream = null } = props, rest = __rest(props, ["className", "onSuccess", "onError", "liveStream"]);
+    // HOOKS
+    const scContext = useSCContext();
+    const scUserContext = useSCUser();
+    const { preferences } = useSCPreferences();
+    const isCommunityOwner = useMemo(() => { var _a; return ((_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.id) === 1; }, [scUserContext.user]);
+    const isFreeTrialTier = useMemo(() => preferences &&
+        SCPreferences.CONFIGURATIONS_SUBSCRIPTION_TIER in preferences &&
+        preferences[SCPreferences.CONFIGURATIONS_SUBSCRIPTION_TIER].value &&
+        preferences[SCPreferences.CONFIGURATIONS_SUBSCRIPTION_TIER].value === SCCommunitySubscriptionTier.FREE_TRIAL, [preferences]);
+    const intl = useIntl();
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    const initialFieldState = {
+        title: (liveStream === null || liveStream === void 0 ? void 0 : liveStream.title) || '',
+        description: (liveStream === null || liveStream === void 0 ? void 0 : liveStream.description) || '',
+        slug: (liveStream === null || liveStream === void 0 ? void 0 : liveStream.slug) || '',
+        settings: (liveStream === null || liveStream === void 0 ? void 0 : liveStream.settings) || LIVESTREAM_DEFAULT_SETTINGS,
+        cover: (liveStream === null || liveStream === void 0 ? void 0 : liveStream.cover) || '',
+        coverFile: (liveStream === null || liveStream === void 0 ? void 0 : liveStream.cover) || '',
+        isSubmitting: false
+    };
+    // STATE
+    const [field, setField] = useState(initialFieldState);
+    const [error, setError] = useState({});
+    const [genericError, setGenericError] = useState(null);
+    const [timeRemaining, setTimeRemaining] = useState(null);
+    const _backgroundCover = Object.assign({}, (field.cover ? { background: `url('${field.cover}') center / cover` } : { background: `url('${CoverPlaceholder}') no-repeat 0 0 / 100% 100%` }));
+    const handleChangeCover = useCallback((cover) => {
+        setField((prev) => (Object.assign(Object.assign({}, prev), { ['coverFile']: cover })));
+        const reader = new FileReader();
+        reader.onloadend = () => {
+            setField((prev) => (Object.assign(Object.assign({}, prev), { ['cover']: reader.result })));
+        };
+        reader.readAsDataURL(cover);
+        if (error.coverError) {
+            delete error.coverError;
+            setError(error);
+        }
+    }, [error]);
+    const handleSubmit = useCallback(() => {
+        setField((prev) => (Object.assign(Object.assign({}, prev), { ['isSubmitting']: true })));
+        setGenericError(null);
+        const formData = new FormData();
+        if (field.coverFile) {
+            formData.append('cover', field.coverFile);
+        }
+        formData.append('title', field.title);
+        formData.append('description', field.description);
+        formData.append('slug', field.slug);
+        formData.append('settings', JSON.stringify(field.settings));
+        let liveStreamService;
+        if (liveStream) {
+            liveStreamService = LiveStreamService.update(liveStream.id, formData, {
+                headers: { 'Content-Type': 'multipart/form-data' }
+            });
+        }
+        else {
+            liveStreamService = LiveStreamService.create(formData, { headers: { 'Content-Type': 'multipart/form-data' } });
+        }
+        liveStreamService
+            .then((data) => {
+            setField((prev) => (Object.assign(Object.assign({}, prev), { ['isSubmitting']: false })));
+            onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess(data);
+        })
+            .catch((e) => {
+            const _error = formatHttpErrorCode(e);
+            if ('errorsError' in _error || !Object.keys(_error).length) {
+                setGenericError(intl.formatMessage({
+                    id: 'ui.liveStreamForm.error.monthlyMinuteLimitReached',
+                    defaultMessage: 'ui.liveStreamForm.error.monthlyMinuteLimitReached'
+                }));
+            }
+            else {
+                setGenericError(null);
+            }
+            let __errors = {};
+            if ('coverError' in _error) {
+                __errors = Object.assign(Object.assign({}, __errors), { ['coverError']: _jsx(FormattedMessage, { id: "ui.liveStreamForm.cover.error.invalid", defaultMessage: "ui.liveStreamForm.cover.error.invalid" }) });
+            }
+            if ('titleError' in _error) {
+                __errors = Object.assign(Object.assign({}, __errors), { ['titleError']: _jsx(FormattedMessage, { id: "ui.liveStreamForm.title.error.invalid", defaultMessage: "ui.liveStreamForm.title.error.invalid" }) });
+            }
+            if ('slugError' in _error) {
+                __errors = Object.assign(Object.assign({}, __errors), { ['slugError']: _jsx(FormattedMessage, { id: "ui.liveStreamForm.slug.error.invalid", defaultMessage: "ui.liveStreamForm.slug.error.invalid" }) });
+            }
+            setError(__errors);
+            setField((prev) => (Object.assign(Object.assign({}, prev), { ['isSubmitting']: false })));
+            Logger.error(SCOPE_SC_UI, e);
+            onError === null || onError === void 0 ? void 0 : onError(e);
+        });
+    }, [field, onSuccess, onError]);
+    const handleChange = useCallback((event) => {
+        const { name, value } = event.target;
+        setField((prev) => (Object.assign(Object.assign({}, prev), { [name]: value })));
+        if (error[`${name}Error`]) {
+            delete error[`${name}Error`];
+            setError(error);
+        }
+        setGenericError(null);
+    }, [error, setGenericError]);
+    const handleChangeSettings = useCallback((data) => {
+        setField((prev) => (Object.assign(Object.assign({}, prev), { settings: data })));
+    }, [setField]);
+    const warning = useMemo(() => {
+        let _message;
+        if (isFreeTrialTier && isCommunityOwner) {
+            _message = (_jsx(FormattedMessage, { id: "ui.liveStreamForm.selector.warningSubscriptionRequired", defaultMessage: "ui.liveStreamForm.selector.warningSubscriptionRequired", values: {
+                    // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+                    // @ts-ignore
+                    link: (...chunks) => _jsx(Link, Object.assign({ to: SELFCOMMUNITY_PRICING[scContext.settings.locale.default] }, { children: chunks }))
+                } }));
+        }
+        else if (timeRemaining !== null && timeRemaining <= WARNING_THRESHOLD_EXPIRING_SOON) {
+            if (timeRemaining <= 1) {
+                _message = (_jsx(FormattedMessage, { id: "ui.liveStreamForm.selector.warningMinutesExausted", defaultMessage: "ui.liveStreamForm.selector.warningMinutesExausted" }));
+            }
+            else if (timeRemaining <= WARNING_THRESHOLD_EXPIRING_SOON) {
+                _message = (_jsx(FormattedMessage, { id: "ui.liveStreamForm.selector.warningRemainingMinutes", defaultMessage: "ui.liveStreamForm.selector.warningRemainingMinutes", values: { minutes: timeRemaining } }));
+            }
+        }
+        if (_message) {
+            return (_jsx(Box, Object.assign({ className: classes.warning }, { children: _jsx(Alert, Object.assign({ variant: "filled", severity: "warning" }, { children: _message })) })));
+        }
+        return null;
+    }, [isFreeTrialTier, isCommunityOwner, timeRemaining]);
+    const fetchLivestreamStatus = () => {
+        LiveStreamApiClient.getMonthlyDuration()
+            .then((r) => {
+            setTimeRemaining(r.remaining_minutes);
+        })
+            .catch((error) => {
+            console.error('Error fetching live status:', error);
+        });
+    };
+    useEffect(() => {
+        fetchLivestreamStatus();
+    }, []);
+    /**
+     * Renders root object
+     */
+    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: [warning, _jsx(Paper, Object.assign({ style: _backgroundCover, classes: { root: classes.cover } }, { children: _jsx(UploadEventCover, { isCreationMode: true, onChange: handleChangeCover }) })), Boolean(error['coverError']) && _jsx(Typography, Object.assign({ color: "error" }, { children: error['coverError'] })), _jsxs(FormGroup, Object.assign({ className: classes.form }, { children: [_jsx(TextField, { required: true, className: classes.title, placeholder: `${intl.formatMessage(messages.title)}`, margin: "normal", value: field.title, name: "title", onChange: handleChange, InputProps: {
+                            endAdornment: _jsx(Typography, Object.assign({ variant: "body2" }, { children: LIVE_STREAM_TITLE_MAX_LENGTH - field.title.length }))
+                        }, error: Boolean(field.title.length > LIVE_STREAM_TITLE_MAX_LENGTH) || Boolean(error['titleError']), helperText: field.title.length > LIVE_STREAM_TITLE_MAX_LENGTH ? (_jsx(FormattedMessage, { id: "ui.liveStreamForm.title.error.maxLength", defaultMessage: "ui.liveStreamForm.title.error.maxLength" })) : error['titleError'] ? (error['titleError']) : null }), _jsx(TextField, { required: true, className: classes.slug, placeholder: `${intl.formatMessage(messages.slug)}`, margin: "normal", value: field.slug, name: "slug", onChange: handleChange, InputProps: {
+                            endAdornment: _jsx(Typography, Object.assign({ variant: "body2" }, { children: LIVE_STREAM_SLUG_MAX_LENGTH - field.slug.length }))
+                        }, error: Boolean(field.slug.length > LIVE_STREAM_SLUG_MAX_LENGTH) || Boolean(error['slugError']), helperText: field.title.length > LIVE_STREAM_SLUG_MAX_LENGTH ? (_jsx(FormattedMessage, { id: "ui.liveStreamForm.slug.error.maxLength", defaultMessage: "ui.liveStreamForm.slug.error.maxLength" })) : error['slugError'] ? (error['slugError']) : null }), _jsx(TextField, { multiline: true, rows: 4, className: classes.description, placeholder: `${intl.formatMessage(messages.description)}`, margin: "normal", value: field.description, name: "description", onChange: handleChange, InputProps: {
+                            endAdornment: (_jsx(Typography, Object.assign({ variant: "body2" }, { children: ((_a = field.description) === null || _a === void 0 ? void 0 : _a.length) ? LIVE_STREAM_DESCRIPTION_MAX_LENGTH - field.description.length : LIVE_STREAM_DESCRIPTION_MAX_LENGTH })))
+                        }, error: Boolean(((_b = field.description) === null || _b === void 0 ? void 0 : _b.length) > LIVE_STREAM_DESCRIPTION_MAX_LENGTH), helperText: ((_c = field.description) === null || _c === void 0 ? void 0 : _c.length) > LIVE_STREAM_DESCRIPTION_MAX_LENGTH ? (_jsx(FormattedMessage, { id: "ui.liveStreamForm.description.error.maxLength", defaultMessage: "ui.liveStreamForm.description.error.maxLength" })) : null }), _jsx(LiveStreamSettingsForm, { settings: field.settings, onChange: handleChangeSettings }), genericError && (_jsx(Box, Object.assign({ className: classes.genericError }, { children: _jsx(Alert, Object.assign({ variant: "filled", severity: "error" }, { children: genericError })) }))), _jsx(Box, Object.assign({ className: classes.actions }, { children: _jsx(LoadingButton, Object.assign({ loading: field.isSubmitting, disabled: !field.title ||
+                                field.isSubmitting ||
+                                field.title.length > LIVE_STREAM_TITLE_MAX_LENGTH ||
+                                field.description.length > LIVE_STREAM_DESCRIPTION_MAX_LENGTH ||
+                                isFreeTrialTier ||
+                                timeRemaining <= WARNING_THRESHOLD_EXPIRING_SOON, variant: "contained", onClick: handleSubmit, color: "secondary" }, { children: liveStream ? (_jsx(FormattedMessage, { id: "ui.liveStreamForm.button.edit", defaultMessage: "ui.liveStreamForm.button.edit" })) : (_jsx(FormattedMessage, { id: "ui.liveStreamForm.button.create", defaultMessage: "ui.liveStreamForm.button.create" })) })) }))] }))] })));
+}

package/lib/esm/components/LiveStreamForm/LiveStreamFormSettings.d.ts

@@ -0,0 +1,47 @@
+import { BoxProps } from '@mui/material';
+import { SCLiveStreamSettingsType } from '@selfcommunity/types';
+export declare const PREFIX = "SCLiveStreamFormSettings";
+export interface LiveStreamFormSettingsProps extends BoxProps {
+    /**
+     * Overrides or extends the styles applied to the component.
+     * @default null
+     */
+    className?: string;
+    /**
+     * Event Object
+     * @default null
+     */
+    settings?: SCLiveStreamSettingsType;
+    /**
+     * onChange callback
+     * @param data
+     */
+    onChange?: (data: any) => void;
+    /**
+     * Any other properties
+     */
+    [p: string]: any;
+}
+/**
+ *> 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: LiveStreamFormSettingsProps): JSX.Element;

package/lib/esm/components/LiveStreamForm/LiveStreamFormSettings.js

@@ -0,0 +1,76 @@
+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 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" }) }))] })), isEnterpriseFeaturesVisible && (_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 || !liveStreamEnabled, 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" }) })), _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 || !liveStreamEnabled, 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" }) })), _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))) }))] }))] })));
+}

package/lib/esm/components/LiveStreamForm/constants.d.ts

@@ -0,0 +1,15 @@
+import { SCLiveStreamViewType } from '@selfcommunity/types';
+export declare const PREFIX = "SCLiveStreamForm";
+/**
+ * Default live stream settings
+ */
+export declare const LIVESTREAM_DEFAULT_SETTINGS: {
+    muteParticipants: boolean;
+    hideParticipantsList: boolean;
+    automaticallyNotifyFollowers: boolean;
+    disableVideo: boolean;
+    disableChat: boolean;
+    disableShareScreen: boolean;
+    showInProfile: boolean;
+    view: SCLiveStreamViewType;
+};

package/lib/esm/components/LiveStreamForm/constants.js

@@ -0,0 +1,15 @@
+import { SCLiveStreamViewType } from '@selfcommunity/types';
+export const PREFIX = 'SCLiveStreamForm';
+/**
+ * Default live stream settings
+ */
+export const LIVESTREAM_DEFAULT_SETTINGS = {
+    muteParticipants: true,
+    hideParticipantsList: false,
+    automaticallyNotifyFollowers: false,
+    disableVideo: true,
+    disableChat: false,
+    disableShareScreen: true,
+    showInProfile: true,
+    view: SCLiveStreamViewType.SPEAKER
+};

package/lib/esm/components/LiveStreamForm/index.d.ts

@@ -0,0 +1,3 @@
+import LiveStreamForm, { LiveStreamFormProps } from './LiveStreamForm';
+export default LiveStreamForm;
+export { LiveStreamFormProps };

package/lib/esm/components/LiveStreamForm/index.js

@@ -0,0 +1,2 @@
+import LiveStreamForm from './LiveStreamForm';
+export default LiveStreamForm;

package/lib/esm/components/LiveStreamForm/types.d.ts

@@ -0,0 +1,11 @@
+export declare type InitialFieldState = {
+    title: string;
+    description: string;
+    slug?: string;
+    settings?: Record<string, any>;
+    cover?: string | ArrayBuffer;
+    coverFile?: string | Blob;
+    isSubmitting: boolean;
+};
+export declare type FieldStateKeys = keyof InitialFieldState;
+export declare type FieldStateValues = InitialFieldState[FieldStateKeys];

package/lib/esm/components/LiveStreamForm/types.js

@@ -0,0 +1 @@
+export {};

package/lib/esm/components/LiveStreamRoom/LiveStreamRoom.d.ts

@@ -0,0 +1,85 @@
+import { BoxProps } from '@mui/material';
+import { SCLiveStreamType } from '@selfcommunity/types';
+import { LocalUserChoices } from '@livekit/components-react';
+import React from 'react';
+import { ConnectionDetails } from './types';
+import { LiveStreamVideoConferenceProps } from './LiveStreamVideoConference';
+import '@livekit/components-styles';
+export interface LiveStreamRoomProps extends BoxProps {
+    /**
+     * Overrides or extends the styles applied to the component.
+     * @default null
+     */
+    className?: string;
+    /**
+     * Event Object
+     * @default null
+     */
+    liveStream?: SCLiveStreamType;
+    /**
+     * Id of the liveStream for filter the feed
+     * @default null
+     */
+    liveStreamId?: number;
+    /**
+     * Element to be inserted before title
+     */
+    startPrejoinContent?: React.ReactNode | null;
+    /**
+     * Element to be inserted after title
+     */
+    endPrejoinContent?: React.ReactNode | null;
+    /**
+     * Show title of livestream in prejoin
+     */
+    showPrejoinTitle?: boolean;
+    /**
+     * Show description of livestream in prejoin
+     */
+    showPrejoinDescription?: boolean;
+    /**
+     * ConnectionDetails Object
+     * @default null
+     */
+    presetConnectionDetails?: ConnectionDetails;
+    /**
+     * LocalUserChoices Object
+     * @default null
+     */
+    presetPreJoinChoices?: LocalUserChoices;
+    /**
+     * Props to spread to LiveStreamVideoConference Component
+     * @default {}
+     */
+    LiveStreamVideoConferenceComponentProps?: LiveStreamVideoConferenceProps;
+    /**
+     * Any other properties
+     */
+    [p: string]: any;
+}
+/**
+ *> API documentation for the Community-JS LiveStreamRoom component. Learn about the available props and the CSS API.
+ *
+ #### Import
+ ```jsx
+ import {LiveStreamRoom} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+ The name `LiveStreamRoom` can be used when providing style overrides in the theme.
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCLiveStreamRoom-root|Styles applied to the root element.|
+ |title|.SCLiveStreamRoom-title|Styles applied to the title element.|
+ |description|.SCLiveStreamRoom-description|Styles applied to the description element.|
+ |content|.SCLiveStreamRoom-content|Styles applied to the content.|
+ |prejoin|.SCLiveStreamRoom-prejoin|Styles applied to the prejoin.|
+ |conference|.SCLiveStreamRoom-conference|Styles applied to the conference.|
+ |error|.SCLiveStreamRoom-error|Styles applied to the error elements.|
+
+ * @param inProps
+ */
+export default function LiveStreamRoom(inProps: LiveStreamRoomProps): JSX.Element;