@selfcommunity/react-ui 0.10.5-alpha.2 → 0.10.5-alpha.3

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

@@ -0,0 +1,71 @@
+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, 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'
+})(({ theme }) => ({}));
+/**
+ *> 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 } = useSCPreferences();
+    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, checked: Boolean(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: Boolean(settings === null || settings === void 0 ? void 0 : settings.disableVideo), disabled: !isEnterpriseTier, 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: Boolean(settings === null || settings === void 0 ? void 0 : settings.disableShareScreen), disabled: !isEnterpriseTier, 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, checked: Boolean(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, 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, 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, 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", 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, { 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 type InitialFieldState = {
+    title: string;
+    description: string;
+    slug?: string;
+    settings?: Record<string, any>;
+    cover?: string | ArrayBuffer;
+    coverFile?: string | Blob;
+    isSubmitting: boolean;
+};
+export type FieldStateKeys = keyof InitialFieldState;
+export 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;

package/lib/esm/components/LiveStreamRoom/LiveStreamRoom.js

@@ -0,0 +1,196 @@
+import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Alert, AlertTitle, Box, Button, CircularProgress, Stack, Typography } from '@mui/material';
+import { styled } from '@mui/material/styles';
+import { useThemeProps } from '@mui/system';
+import { Link, SCPreferences, SCPreferencesContext, SCRoutes, useSCFetchLiveStream, useSCPreferences, useSCRouting, useSCUser } from '@selfcommunity/react-core';
+import { SCFeatureName, SCLiveStreamConnectionDetailsErrorType } from '@selfcommunity/types';
+import classNames from 'classnames';
+import { FormattedMessage, useIntl } from 'react-intl';
+import { PREFIX } from './constants';
+import { useCallback, useContext, useMemo, useState } from 'react';
+import LiveStreamVideoConference from './LiveStreamVideoConference';
+import '@livekit/components-styles';
+import { LiveStreamService } from '@selfcommunity/api-services';
+import { camelCase, Logger } from '@selfcommunity/utils';
+import { SCOPE_SC_UI } from '../../constants/Errors';
+import { PreJoin } from './LiveStreamVideoConference/PreJoin';
+import { LiveStreamContext } from './LiveStreamVideoConference/LiveStreamProvider';
+import { useSnackbar } from 'notistack';
+import DialogContent from '@mui/material/DialogContent';
+import BaseDialog from '../../shared/BaseDialog';
+import CopyTextField from '../../shared/CopyTextArea';
+const classes = {
+    root: `${PREFIX}-root`,
+    content: `${PREFIX}-content`,
+    title: `${PREFIX}-title`,
+    description: `${PREFIX}-description`,
+    endConferenceWrap: `${PREFIX}-end-conference-wrap`,
+    btnBackHome: `${PREFIX}-btn-back-home`,
+    startPrejoinContent: `${PREFIX}-start-prejoin-content`,
+    preJoin: `${PREFIX}-prejoin`,
+    preJoinLoading: `${PREFIX}-prejoin-loading`,
+    prejoinLoader: `${PREFIX}-prejoin-loader`,
+    preJoinAlert: `${PREFIX}-prejoin-alert`,
+    shareLink: `${PREFIX}-share-link`,
+    endPrejoinContent: `${PREFIX}-end-prejoin-content`,
+    endPrejoinContentBox: `${PREFIX}-end-prejoin-content-box`,
+    conference: `${PREFIX}-conference`,
+    error: `${PREFIX}-error`
+};
+const Root = styled(Box, {
+    name: PREFIX,
+    slot: 'Root'
+})(({ theme }) => ({}));
+const DialogRoot = styled(BaseDialog, {
+    name: PREFIX,
+    slot: 'Root',
+    overridesResolver: (props, styles) => styles.dialogRoot
+})(({ theme }) => ({}));
+/**
+ *> 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) {
+    var _a, _b, _c, _d, _e, _f;
+    //PROPS
+    const props = useThemeProps({
+        props: inProps,
+        name: PREFIX
+    });
+    const { id = `live_stream_room_object_${props.liveStreamId ? props.liveStreamId : props.liveStream ? props.liveStream.id : ''}`, liveStreamId = null, liveStream = null, className, showPrejoinTitle = true, showPrejoinDescription = false, startPrejoinContent, endPrejoinContent, presetConnectionDetails, presetPreJoinChoices, LiveStreamVideoConferenceComponentProps = { options: { codec: 'vp8', hq: false } } } = props, rest = __rest(props, ["id", "liveStreamId", "liveStream", "className", "showPrejoinTitle", "showPrejoinDescription", "startPrejoinContent", "endPrejoinContent", "presetConnectionDetails", "presetPreJoinChoices", "LiveStreamVideoConferenceComponentProps"]);
+    // CONTEXT
+    const scUserContext = useSCUser();
+    const scRoutingContext = useSCRouting();
+    const { preferences, features } = useSCPreferences();
+    // STATE
+    const { scLiveStream } = useSCFetchLiveStream({ id: liveStreamId, liveStream });
+    const [preJoinChoices, setPreJoinChoices] = useState(presetPreJoinChoices);
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState(null);
+    const preJoinDefaults = useMemo(() => {
+        var _a, _b, _c;
+        return {
+            username: ((_a = scUserContext.user) === null || _a === void 0 ? void 0 : _a.username) || '',
+            videoEnabled: ((_b = scLiveStream === null || scLiveStream === void 0 ? void 0 : scLiveStream.settings) === null || _b === void 0 ? void 0 : _b.disableVideo) === false,
+            audioEnabled: ((_c = scLiveStream === null || scLiveStream === void 0 ? void 0 : scLiveStream.settings) === null || _c === void 0 ? void 0 : _c.muteParticipants) === false
+        };
+    }, [scUserContext.user, scLiveStream]);
+    const [connectionDetails, setConnectionDetails] = useState(presetConnectionDetails);
+    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 scPreferencesContext = useContext(SCPreferencesContext);
+    const appUrl = useMemo(() => scPreferencesContext.preferences && scPreferencesContext.preferences[SCPreferences.CONFIGURATIONS_APP_URL].value, [scPreferencesContext.preferences]);
+    // INTL
+    const intl = useIntl();
+    // MESSAGES
+    const { enqueueSnackbar } = useSnackbar();
+    // HANDLERS
+    /**
+     * Handle PreJoin Submit
+     */
+    const handlePreJoinSubmit = useCallback((values) => {
+        if (scLiveStream || !loading) {
+            setLoading(true);
+            setError(null);
+            toggleAttrDisabledPrejoinActions(true);
+            LiveStreamService.join(scLiveStream.id)
+                .then((data) => {
+                setPreJoinChoices(values);
+                setConnectionDetails(Object.assign(Object.assign({}, data), { participantName: scUserContext.user.username }));
+                toggleAttrDisabledPrejoinActions(false);
+                setLoading(false);
+            })
+                .catch((error) => {
+                Logger.error(SCOPE_SC_UI, error);
+                if (error.response &&
+                    error.response.data &&
+                    typeof error.response.data === 'object' &&
+                    error.response.data.errors &&
+                    error.response.data.errors.length) {
+                    let _msg = (_jsx(FormattedMessage, { id: "ui.liveStreamRoom.connect.error.generic", defaultMessage: "'ui.liveStreamRoom.connect.error.generic", values: { link: (...chunks) => _jsx(Link, Object.assign({ to: '/' }, { children: chunks })) } }));
+                    if (error.response.data.errors[0].code) {
+                        const _error = `ui.liveStreamRoom.connect.error.${camelCase(error.response.data.errors[0].code)}`;
+                        _msg = (_jsx(FormattedMessage, { id: _error, defaultMessage: _error, values: {
+                                link: (...chunks) => (_jsx(Link, Object.assign({ style: { color: '#FFF' }, to: error.response.data.errors[0].code !== SCLiveStreamConnectionDetailsErrorType.PARTICIPATE_THE_EVENT_TO_JOIN_LIVE_STREAM &&
+                                        scLiveStream.event
+                                        ? scRoutingContext.url(SCRoutes.EVENTS_ROUTE_NAME, scLiveStream.event)
+                                        : '/' }, { children: chunks })))
+                            } }));
+                        if (error.response.data.errors[0].code !== SCLiveStreamConnectionDetailsErrorType.WAITING_HOST_TO_START_LIVE_STREAM &&
+                            error.response.data.errors[0].code !== SCLiveStreamConnectionDetailsErrorType.PARTICIPANTS_LIMIT_REACHED) {
+                            setError(_msg);
+                        }
+                        else {
+                            setTimeout(() => toggleAttrDisabledPrejoinActions(false), 10000);
+                        }
+                        enqueueSnackbar(_msg, { variant: 'error', autoHideDuration: 5000 });
+                    }
+                    else {
+                        enqueueSnackbar(_msg, { variant: 'error' });
+                        setError(_msg);
+                    }
+                }
+                setLoading(false);
+            });
+        }
+    }, [scUserContext.user, setPreJoinChoices, setConnectionDetails, scLiveStream, setError, loading]);
+    /**
+     * Handle disable controls button
+     */
+    const toggleAttrDisabledPrejoinActions = useCallback((disabled) => {
+        const container = document.querySelector('.lk-prejoin');
+        if (container) {
+            const buttons = container.querySelectorAll('button.lk-button');
+            buttons.forEach((button) => {
+                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                // @ts-ignore
+                button.disabled = disabled;
+            });
+        }
+    }, []);
+    /**
+     * Handle PreJoin Error
+     */
+    const handlePreJoinError = useCallback((e) => console.error(e), []);
+    /**
+     * User must be authenticated
+     */
+    if (!scLiveStream || !scUserContext.user || !liveStreamEnabled) {
+        return _jsx(CircularProgress, {});
+    }
+    /**
+     * Renders root object
+     */
+    return (_jsx(Root, Object.assign({ id: id, className: classNames(classes.root, className) }, rest, { children: scLiveStream.closed_at_by_host ? (_jsx(DialogRoot, Object.assign({ open: true, maxWidth: 'md', fullWidth: true }, { children: _jsxs(DialogContent, Object.assign({ className: classes.endConferenceWrap }, { children: [_jsx(Typography, Object.assign({ variant: "h5" }, { children: _jsx(FormattedMessage, { id: "ui.liveStreamRoom.conference.closed", defaultMessage: "ui.liveStreamRoom.conference.closed" }) })), _jsx(Button, Object.assign({ variant: "contained", color: "secondary", component: Link, to: '/', className: classes.btnBackHome }, { children: _jsx(FormattedMessage, { id: "ui.liveStreamRoom.button.backHome", defaultMessage: "ui.liveStreamRoom.button.backHome" }) }))] })) }))) : (_jsx(Box, Object.assign({ className: classes.content, "data-lk-theme": "default" }, { children: connectionDetails === undefined || preJoinChoices === undefined ? (_jsxs(_Fragment, { children: [startPrejoinContent && _jsx(Box, Object.assign({ className: classes.startPrejoinContent }, { children: startPrejoinContent })), (scLiveStream === null || scLiveStream === void 0 ? void 0 : scLiveStream.title) && (_jsx(Typography, Object.assign({ component: 'div', variant: "h4", className: classes.title, alignContent: 'center' }, { children: scLiveStream === null || scLiveStream === void 0 ? void 0 : scLiveStream.title }))), _jsxs(Box, Object.assign({ className: classNames(classes.preJoin, { [classes.preJoinLoading]: loading || error }) }, { children: [_jsx(LiveStreamContext.Provider, Object.assign({ value: { liveStream: scLiveStream } }, { children: _jsx(PreJoin, { defaults: preJoinDefaults, onSubmit: handlePreJoinSubmit, onError: handlePreJoinError, joinLabel: intl.formatMessage({ id: 'ui.liveStreamRoom.preJoin.joinRoom', defaultMessage: 'ui.liveStreamRoom.preJoin.joinRoom' }), micLabel: intl.formatMessage({
+                                        id: 'ui.liveStreamRoom.preJoin.microphone',
+                                        defaultMessage: 'ui.liveStreamRoom.preJoin.microphone'
+                                    }), camLabel: intl.formatMessage({ id: 'ui.liveStreamRoom.preJoin.camera', defaultMessage: 'ui.liveStreamRoom.preJoin.camera' }), userLabel: intl.formatMessage({ id: 'ui.liveStreamRoom.preJoin.username', defaultMessage: 'ui.liveStreamRoom.preJoin.username' }) }) })), loading && (_jsxs(Box, Object.assign({ className: classes.prejoinLoader }, { children: [_jsx(CircularProgress, {}), _jsx(Typography, Object.assign({ component: 'div', variant: "body2" }, { children: _jsx(FormattedMessage, { id: "ui.liveStreamRoom.connecting", defaultMessage: "ui.liveStreamRoom.connecting" }) }))] })))] })), _jsxs(Box, Object.assign({ className: classes.endPrejoinContent }, { children: [Boolean(scUserContext.user &&
+                                scUserContext.user.id !== scLiveStream.host.id &&
+                                scLiveStream &&
+                                (((_a = scLiveStream.settings) === null || _a === void 0 ? void 0 : _a.muteParticipants) || (scLiveStream && ((_b = scLiveStream.settings) === null || _b === void 0 ? void 0 : _b.disableVideo)))) && (_jsxs(Stack, Object.assign({ sx: { width: '47%' }, spacing: 1, className: classes.endPrejoinContentBox }, { children: [scLiveStream && (((_c = scLiveStream.settings) === null || _c === void 0 ? void 0 : _c.muteParticipants) || ((_d = scLiveStream.settings) === null || _d === void 0 ? void 0 : _d.disableVideo)) && (_jsxs(Alert, Object.assign({ variant: "filled", severity: "info", className: classes.preJoinAlert }, { children: [_jsx(AlertTitle, { children: _jsx("b", { children: "Info" }) }), ((_e = scLiveStream.settings) === null || _e === void 0 ? void 0 : _e.muteParticipants) && (_jsxs(_Fragment, { children: ["-", ' ', _jsx(FormattedMessage, { id: "ui.liveStreamRoom.hostDisableMicrophone", defaultMessage: "ui.liveStreamRoom.hostDisableMicrophone" }), _jsx("br", {})] })), ((_f = scLiveStream.settings) === null || _f === void 0 ? void 0 : _f.disableVideo) && (_jsxs(_Fragment, { children: ["- ", _jsx(FormattedMessage, { id: "ui.liveStreamRoom.hostDisableVideo", defaultMessage: "ui.liveStreamRoom.hostDisableVideo" })] }))] }))), _jsx(CopyTextField, { className: classes.shareLink, value: `${appUrl}${scRoutingContext.url(SCRoutes.LIVESTREAM_ROUTE_NAME, scLiveStream)}`, label: _jsx(FormattedMessage, { id: "ui.liveStreamRoom.shareLink", defaultMessage: "ui.liveStreamRoom.shareLink" }) }), (scLiveStream === null || scLiveStream === void 0 ? void 0 : scLiveStream.description) && (_jsxs(Alert, Object.assign({ variant: "filled", severity: "info", className: classes.description }, { children: [_jsx(AlertTitle, { children: _jsx("b", { children: _jsx(FormattedMessage, { id: "ui.liveStreamRoom.description", defaultMessage: "ui.liveStreamRoom.description" }) }) }), scLiveStream === null || scLiveStream === void 0 ? void 0 : scLiveStream.description] })))] }))), endPrejoinContent] }))] })) : (_jsx(Box, Object.assign({ className: classes.conference }, { children: _jsx(LiveStreamContext.Provider, Object.assign({ value: { liveStream: scLiveStream } }, { children: _jsx(LiveStreamVideoConference, Object.assign({ connectionDetails: connectionDetails, userChoices: preJoinChoices }, LiveStreamVideoConferenceComponentProps)) })) }))) }))) })));
+}

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

@@ -0,0 +1,29 @@
+import { Track } from 'livekit-client';
+import * as React from 'react';
+/** @public */
+export type ControlBarControls = {
+    microphone?: boolean;
+    camera?: boolean;
+    chat?: boolean;
+    screenShare?: boolean;
+    leave?: boolean;
+    settings?: boolean;
+};
+export interface ControlBarProps extends React.HTMLAttributes<HTMLDivElement> {
+    onDeviceError?: (error: {
+        source: Track.Source;
+        error: Error;
+    }) => void;
+    variation?: 'minimal' | 'verbose' | 'textOnly';
+    controls?: ControlBarControls;
+    /**
+     * If `true`, the user's device choices will be persisted.
+     * This will enable the user to have the same device choices when they rejoin the room.
+     */
+    saveUserChoices?: boolean;
+}
+/**
+ * The `ControlBar` prefab gives the user the basic user interface to control their
+ * media devices (camera, microphone and screen share), open the `Chat` and leave the room.
+ */
+export declare function ControlBar({ variation, controls, saveUserChoices, onDeviceError, ...props }: ControlBarProps): JSX.Element;

package/lib/esm/components/LiveStreamRoom/LiveStreamVideoConference/ControlBar.js

@@ -0,0 +1,58 @@
+import { __rest } from "tslib";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Track } from 'livekit-client';
+import * as React from 'react';
+import { supportsScreenSharing } from '@livekit/components-core';
+import { ChatIcon, ChatToggle, GearIcon, LeaveIcon, MediaDeviceMenu, StartMediaButton, useLocalParticipantPermissions, useMaybeLayoutContext, usePersistentUserChoices } from '@livekit/components-react';
+import { TrackToggle } from './TrackToggle';
+import { useMediaQuery } from '@mui/material';
+import { SettingsMenuToggle } from './SettingsMenuToggle';
+import { DisconnectButton } from './DisconnectButton';
+import { mergeProps } from './utils';
+/**
+ * The `ControlBar` prefab gives the user the basic user interface to control their
+ * media devices (camera, microphone and screen share), open the `Chat` and leave the room.
+ */
+export function ControlBar(_a) {
+    var _b, _c, _d, _e, _f;
+    var { variation, controls, saveUserChoices = true, onDeviceError } = _a, props = __rest(_a, ["variation", "controls", "saveUserChoices", "onDeviceError"]);
+    const [isChatOpen, setIsChatOpen] = React.useState(false);
+    const layoutContext = useMaybeLayoutContext();
+    React.useEffect(() => {
+        var _a, _b;
+        if (((_a = layoutContext === null || layoutContext === void 0 ? void 0 : layoutContext.widget.state) === null || _a === void 0 ? void 0 : _a.showChat) !== undefined) {
+            setIsChatOpen((_b = layoutContext === null || layoutContext === void 0 ? void 0 : layoutContext.widget.state) === null || _b === void 0 ? void 0 : _b.showChat);
+        }
+    }, [(_b = layoutContext === null || layoutContext === void 0 ? void 0 : layoutContext.widget.state) === null || _b === void 0 ? void 0 : _b.showChat]);
+    const isTooLittleSpace = useMediaQuery(`(max-width: ${isChatOpen ? 1000 : 760}px)`);
+    const defaultVariation = isTooLittleSpace ? 'minimal' : 'verbose';
+    variation !== null && variation !== void 0 ? variation : (variation = defaultVariation);
+    const visibleControls = Object.assign({ leave: true }, controls);
+    const localPermissions = useLocalParticipantPermissions();
+    if (!localPermissions) {
+        visibleControls.camera = false;
+        visibleControls.chat = false;
+        visibleControls.microphone = false;
+        visibleControls.screenShare = false;
+    }
+    else {
+        (_c = visibleControls.camera) !== null && _c !== void 0 ? _c : (visibleControls.camera = localPermissions.canPublish);
+        (_d = visibleControls.microphone) !== null && _d !== void 0 ? _d : (visibleControls.microphone = localPermissions.canPublish);
+        (_e = visibleControls.screenShare) !== null && _e !== void 0 ? _e : (visibleControls.screenShare = localPermissions.canPublish);
+        (_f = visibleControls.chat) !== null && _f !== void 0 ? _f : (visibleControls.chat = localPermissions.canPublishData && (controls === null || controls === void 0 ? void 0 : controls.chat));
+    }
+    const showIcon = React.useMemo(() => variation === 'minimal' || variation === 'verbose', [variation]);
+    const showText = React.useMemo(() => variation === 'textOnly' || variation === 'verbose', [variation]);
+    const browserSupportsScreenSharing = supportsScreenSharing();
+    const [isScreenShareEnabled, setIsScreenShareEnabled] = React.useState(false);
+    const onScreenShareChange = React.useCallback((enabled) => {
+        setIsScreenShareEnabled(enabled);
+    }, [setIsScreenShareEnabled]);
+    const htmlProps = mergeProps({ className: 'lk-control-bar' }, props);
+    const { saveAudioInputEnabled, saveVideoInputEnabled, saveAudioInputDeviceId, saveVideoInputDeviceId } = usePersistentUserChoices({
+        preventSave: !saveUserChoices
+    });
+    const microphoneOnChange = React.useCallback((enabled, isUserInitiated) => (isUserInitiated ? saveAudioInputEnabled(enabled) : null), [saveAudioInputEnabled]);
+    const cameraOnChange = React.useCallback((enabled, isUserInitiated) => (isUserInitiated ? saveVideoInputEnabled(enabled) : null), [saveVideoInputEnabled]);
+    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 && '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 && '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 && (isScreenShareEnabled ? 'Stop screen share' : 'Share screen') })) })), visibleControls.chat && (_jsx(_Fragment, { children: _jsxs(ChatToggle, { children: [showIcon && _jsx(ChatIcon, {}), showText && 'Chat'] }) })), visibleControls.settings && (_jsx(_Fragment, { children: _jsxs(SettingsMenuToggle, { children: [showIcon && _jsx(GearIcon, {}), showText && 'Settings'] }) })), visibleControls.leave && (_jsx(_Fragment, { children: _jsxs(DisconnectButton, { children: [showIcon && _jsx(LeaveIcon, {}), showText && 'Leave'] }) })), _jsx(StartMediaButton, {})] })));
+}

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

@@ -0,0 +1,10 @@
+import * as React from 'react';
+/** @public */
+export interface DisconnectButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    stopTracks?: boolean;
+}
+/**
+ * The `DisconnectButton` is a basic html button with the added ability to disconnect from a LiveKit room.
+ * Normally this is the big red button that allows end users to leave the video or audio call.
+ */
+export declare const DisconnectButton: (props: DisconnectButtonProps & React.RefAttributes<HTMLButtonElement>) => React.ReactNode;

package/lib/esm/components/LiveStreamRoom/LiveStreamVideoConference/DisconnectButton.js

@@ -0,0 +1,73 @@
+import { __awaiter, __rest } from "tslib";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { useDisconnectButton } from '@livekit/components-react';
+import { useCallback, useMemo, useState } from 'react';
+import { LiveStreamApiClient } from '@selfcommunity/api-services';
+import { useLiveStream } from './LiveStreamProvider';
+import { FormattedMessage } from 'react-intl';
+import { Checkbox, FormControlLabel, FormGroup } from '@mui/material';
+import { useSCUser } from '@selfcommunity/react-core';
+import ConfirmDialog from '../../../shared/ConfirmDialog/ConfirmDialog';
+/**
+ * The `DisconnectButton` is a basic html button with the added ability to disconnect from a LiveKit room.
+ * Normally this is the big red button that allows end users to leave the video or audio call.
+ */
+export const DisconnectButton = 
+/* @__PURE__ */ React.forwardRef(function DisconnectButton(props, ref) {
+    // CONTEXT
+    const { liveStream } = useLiveStream();
+    const scUserContext = useSCUser();
+    // STATE
+    const [closeLive, setCloseLive] = useState(false);
+    const [openConfirmDialog, setOpenConfirmDialog] = useState(false);
+    const [isUpdating, setIsUpdating] = useState(false);
+    const { buttonProps } = useDisconnectButton(props);
+    const { onClick } = buttonProps, rest = __rest(buttonProps, ["onClick"]);
+    /**
+     * Intercept fist leave action
+     */
+    const handleOnLeave = useCallback(() => {
+        if (liveStream && scUserContext.user.id === liveStream.host.id) {
+            setOpenConfirmDialog(true);
+        }
+        else {
+            onClick === null || onClick === void 0 ? void 0 : onClick();
+        }
+    }, [setOpenConfirmDialog, liveStream, scUserContext.user]);
+    /**
+     * Control close live
+     */
+    const handleChangeCloseLive = useCallback((event) => {
+        setCloseLive(event.target.checked);
+    }, [closeLive]);
+    /**
+     * Perform set liveStream as closed
+     */
+    const performCloseLiveStream = useMemo(() => () => __awaiter(this, void 0, void 0, function* () {
+        const res = yield LiveStreamApiClient.close(liveStream.id);
+        if (res.status >= 300) {
+            return Promise.reject(res);
+        }
+        return yield Promise.resolve(res.data);
+    }), [liveStream]);
+    /**
+     * Perform patch liveStream before leave the live
+     */
+    const handleLeaveAction = () => {
+        if (!isUpdating && liveStream && scUserContext.user.id === liveStream.host.id && closeLive) {
+            setIsUpdating(true);
+            performCloseLiveStream()
+                .then(() => {
+                onClick === null || onClick === void 0 ? void 0 : onClick();
+            })
+                .catch((error) => {
+                console.error(error);
+            });
+        }
+        else {
+            onClick === null || onClick === void 0 ? void 0 : onClick();
+        }
+    };
+    return (_jsxs(_Fragment, { children: [_jsx("button", Object.assign({ ref: ref }, rest, { onClick: handleOnLeave }, { children: props.children })), openConfirmDialog && (_jsx(ConfirmDialog, { open: openConfirmDialog, title: _jsx(_Fragment, {}), content: _jsxs(_Fragment, { children: [_jsx(FormattedMessage, { id: "ui.liveStreamRoom.live.terminate", defaultMessage: "ui.liveStreamRoom.live.terminate" }), _jsx(FormGroup, { children: _jsx(FormControlLabel, { control: _jsx(Checkbox, { checked: closeLive, onChange: handleChangeCloseLive, inputProps: { 'aria-label': 'controlled' } }), label: _jsx(FormattedMessage, { id: "ui.liveStreamRoom.live.terminatePermanently", defaultMessage: "ui.liveStreamRoom.live.terminatePermanently" }) }) })] }), onConfirm: handleLeaveAction, isUpdating: isUpdating, onClose: () => setOpenConfirmDialog(false) }))] }));
+});

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

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import type { TrackReferenceOrPlaceholder } from '@livekit/components-core';
+import type { ParticipantClickEvent } from '@livekit/components-core';
+export type FocusLayoutContainerProps = React.HTMLAttributes<HTMLDivElement>;
+/**
+ * The `FocusLayoutContainer` is a layout component that expects two children:
+ * A small side component: In a video conference, this is usually a carousel of participants
+ * who are not in focus. And a larger main component to display the focused participant.
+ * For example, with the `FocusLayout` component.
+ */
+export declare function FocusLayoutContainer(props: FocusLayoutContainerProps): JSX.Element;
+export declare function FocusLayoutContainerNoParticipants(props: FocusLayoutContainerProps): JSX.Element;
+export interface FocusLayoutProps extends React.HTMLAttributes<HTMLElement> {
+    /** The track to display in the focus layout. */
+    trackRef?: TrackReferenceOrPlaceholder;
+    onParticipantClick?: (evt: ParticipantClickEvent) => void;
+}
+/**
+ * The `FocusLayout` component is just a light wrapper around the `ParticipantTile` to display a single participant.
+ */
+export declare function FocusLayout({ trackRef, ...htmlProps }: FocusLayoutProps): JSX.Element;