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

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

@@ -0,0 +1,75 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PREFIX = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const styles_1 = require("@mui/material/styles");
+const system_1 = require("@mui/system");
+const types_1 = require("@selfcommunity/types");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const react_1 = require("react");
+const react_intl_1 = require("react-intl");
+const constants_1 = require("./constants");
+const react_core_1 = require("@selfcommunity/react-core");
+const UpScalingTierBadge_1 = tslib_1.__importDefault(require("../../shared/UpScalingTierBadge"));
+exports.PREFIX = 'SCLiveStreamFormSettings';
+const classes = {
+    root: `${exports.PREFIX}-root`,
+    switch: `${exports.PREFIX}-switch`,
+    switchLabel: `${exports.PREFIX}-switch-Label`,
+    accessView: `${exports.PREFIX}-access-view`,
+    accessViewIcon: `${exports.PREFIX}-access-view-icon`
+};
+const Root = (0, styles_1.styled)(material_1.Box, {
+    name: exports.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
+ */
+function LiveStreamSettingsForm(inProps) {
+    var _a;
+    //PROPS
+    const props = (0, system_1.useThemeProps)({
+        props: inProps,
+        name: exports.PREFIX
+    });
+    const { className, settings = constants_1.LIVESTREAM_DEFAULT_SETTINGS, onChange } = props, rest = tslib_1.__rest(props, ["className", "settings", "onChange"]);
+    // CONTEXT
+    const scUserContext = (0, react_1.useContext)(react_core_1.SCUserContext);
+    const { preferences } = (0, react_core_1.useSCPreferences)();
+    const authUserId = (0, react_1.useMemo)(() => (scUserContext.user ? scUserContext.user.id : null), [scUserContext.user]);
+    const isCommunityOwner = (0, react_1.useMemo)(() => authUserId === 1, [authUserId]);
+    const isEnterpriseTier = (0, react_1.useMemo)(() => preferences &&
+        react_core_1.SCPreferences.CONFIGURATIONS_SUBSCRIPTION_TIER in preferences &&
+        preferences[react_core_1.SCPreferences.CONFIGURATIONS_SUBSCRIPTION_TIER].value &&
+        preferences[react_core_1.SCPreferences.CONFIGURATIONS_SUBSCRIPTION_TIER].value === types_1.SCCommunitySubscriptionTier.ENTERPRISE, [preferences]);
+    const isEnterpriseFeaturesVisible = (0, react_1.useMemo)(() => Boolean(isEnterpriseTier || isCommunityOwner), [isEnterpriseTier, isCommunityOwner]);
+    /**
+     * Renders root object
+     */
+    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, checked: Boolean(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 && ((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: Boolean(settings === null || settings === void 0 ? void 0 : settings.disableVideo), disabled: !isEnterpriseTier, 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" }) })), (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: Boolean(settings === null || settings === void 0 ? void 0 : settings.disableShareScreen), disabled: !isEnterpriseTier, 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" }) })), (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: Boolean(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, 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, 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, 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", 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) => {
+                            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}` })] }));
+                        } }, { 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, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.liveStreamForm.view.${f}.description`, defaultMessage: `ui.liveStreamForm.view.${f}.description` }) })] }) }), f))) }))] }))] })));
+}
+exports.default = LiveStreamSettingsForm;

package/lib/cjs/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/cjs/components/LiveStreamForm/constants.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LIVESTREAM_DEFAULT_SETTINGS = exports.PREFIX = void 0;
+const types_1 = require("@selfcommunity/types");
+exports.PREFIX = 'SCLiveStreamForm';
+/**
+ * Default live stream settings
+ */
+exports.LIVESTREAM_DEFAULT_SETTINGS = {
+    muteParticipants: true,
+    hideParticipantsList: false,
+    automaticallyNotifyFollowers: false,
+    disableVideo: true,
+    disableChat: false,
+    disableShareScreen: true,
+    showInProfile: true,
+    view: types_1.SCLiveStreamViewType.SPEAKER
+};

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

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

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

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const LiveStreamForm_1 = tslib_1.__importDefault(require("./LiveStreamForm"));
+exports.default = LiveStreamForm_1.default;

package/lib/cjs/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/cjs/components/LiveStreamForm/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/cjs/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/cjs/components/LiveStreamRoom/LiveStreamRoom.js

@@ -0,0 +1,199 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const styles_1 = require("@mui/material/styles");
+const system_1 = require("@mui/system");
+const react_core_1 = require("@selfcommunity/react-core");
+const types_1 = require("@selfcommunity/types");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const react_intl_1 = require("react-intl");
+const constants_1 = require("./constants");
+const react_1 = require("react");
+const LiveStreamVideoConference_1 = tslib_1.__importDefault(require("./LiveStreamVideoConference"));
+require("@livekit/components-styles");
+const api_services_1 = require("@selfcommunity/api-services");
+const utils_1 = require("@selfcommunity/utils");
+const Errors_1 = require("../../constants/Errors");
+const PreJoin_1 = require("./LiveStreamVideoConference/PreJoin");
+const LiveStreamProvider_1 = require("./LiveStreamVideoConference/LiveStreamProvider");
+const notistack_1 = require("notistack");
+const DialogContent_1 = tslib_1.__importDefault(require("@mui/material/DialogContent"));
+const BaseDialog_1 = tslib_1.__importDefault(require("../../shared/BaseDialog"));
+const CopyTextArea_1 = tslib_1.__importDefault(require("../../shared/CopyTextArea"));
+const classes = {
+    root: `${constants_1.PREFIX}-root`,
+    content: `${constants_1.PREFIX}-content`,
+    title: `${constants_1.PREFIX}-title`,
+    description: `${constants_1.PREFIX}-description`,
+    endConferenceWrap: `${constants_1.PREFIX}-end-conference-wrap`,
+    btnBackHome: `${constants_1.PREFIX}-btn-back-home`,
+    startPrejoinContent: `${constants_1.PREFIX}-start-prejoin-content`,
+    preJoin: `${constants_1.PREFIX}-prejoin`,
+    preJoinLoading: `${constants_1.PREFIX}-prejoin-loading`,
+    prejoinLoader: `${constants_1.PREFIX}-prejoin-loader`,
+    preJoinAlert: `${constants_1.PREFIX}-prejoin-alert`,
+    shareLink: `${constants_1.PREFIX}-share-link`,
+    endPrejoinContent: `${constants_1.PREFIX}-end-prejoin-content`,
+    endPrejoinContentBox: `${constants_1.PREFIX}-end-prejoin-content-box`,
+    conference: `${constants_1.PREFIX}-conference`,
+    error: `${constants_1.PREFIX}-error`
+};
+const Root = (0, styles_1.styled)(material_1.Box, {
+    name: constants_1.PREFIX,
+    slot: 'Root'
+})(({ theme }) => ({}));
+const DialogRoot = (0, styles_1.styled)(BaseDialog_1.default, {
+    name: constants_1.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
+ */
+function LiveStreamRoom(inProps) {
+    var _a, _b, _c, _d, _e, _f;
+    //PROPS
+    const props = (0, system_1.useThemeProps)({
+        props: inProps,
+        name: constants_1.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 = tslib_1.__rest(props, ["id", "liveStreamId", "liveStream", "className", "showPrejoinTitle", "showPrejoinDescription", "startPrejoinContent", "endPrejoinContent", "presetConnectionDetails", "presetPreJoinChoices", "LiveStreamVideoConferenceComponentProps"]);
+    // CONTEXT
+    const scUserContext = (0, react_core_1.useSCUser)();
+    const scRoutingContext = (0, react_core_1.useSCRouting)();
+    const { preferences, features } = (0, react_core_1.useSCPreferences)();
+    // STATE
+    const { scLiveStream } = (0, react_core_1.useSCFetchLiveStream)({ id: liveStreamId, liveStream });
+    const [preJoinChoices, setPreJoinChoices] = (0, react_1.useState)(presetPreJoinChoices);
+    const [loading, setLoading] = (0, react_1.useState)(false);
+    const [error, setError] = (0, react_1.useState)(null);
+    const preJoinDefaults = (0, react_1.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] = (0, react_1.useState)(presetConnectionDetails);
+    const liveStreamEnabled = (0, react_1.useMemo)(() => preferences &&
+        features &&
+        features.includes(types_1.SCFeatureName.LIVE_STREAM) &&
+        react_core_1.SCPreferences.CONFIGURATIONS_LIVE_STREAM_ENABLED in preferences &&
+        preferences[react_core_1.SCPreferences.CONFIGURATIONS_LIVE_STREAM_ENABLED].value, [preferences, features]);
+    const scPreferencesContext = (0, react_1.useContext)(react_core_1.SCPreferencesContext);
+    const appUrl = (0, react_1.useMemo)(() => scPreferencesContext.preferences && scPreferencesContext.preferences[react_core_1.SCPreferences.CONFIGURATIONS_APP_URL].value, [scPreferencesContext.preferences]);
+    // INTL
+    const intl = (0, react_intl_1.useIntl)();
+    // MESSAGES
+    const { enqueueSnackbar } = (0, notistack_1.useSnackbar)();
+    // HANDLERS
+    /**
+     * Handle PreJoin Submit
+     */
+    const handlePreJoinSubmit = (0, react_1.useCallback)((values) => {
+        if (scLiveStream || !loading) {
+            setLoading(true);
+            setError(null);
+            toggleAttrDisabledPrejoinActions(true);
+            api_services_1.LiveStreamService.join(scLiveStream.id)
+                .then((data) => {
+                setPreJoinChoices(values);
+                setConnectionDetails(Object.assign(Object.assign({}, data), { participantName: scUserContext.user.username }));
+                toggleAttrDisabledPrejoinActions(false);
+                setLoading(false);
+            })
+                .catch((error) => {
+                utils_1.Logger.error(Errors_1.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 = ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamRoom.connect.error.generic", defaultMessage: "'ui.liveStreamRoom.connect.error.generic", values: { link: (...chunks) => (0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: '/' }, { children: chunks })) } }));
+                    if (error.response.data.errors[0].code) {
+                        const _error = `ui.liveStreamRoom.connect.error.${(0, utils_1.camelCase)(error.response.data.errors[0].code)}`;
+                        _msg = ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: _error, defaultMessage: _error, values: {
+                                link: (...chunks) => ((0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ style: { color: '#FFF' }, to: error.response.data.errors[0].code !== types_1.SCLiveStreamConnectionDetailsErrorType.PARTICIPATE_THE_EVENT_TO_JOIN_LIVE_STREAM &&
+                                        scLiveStream.event
+                                        ? scRoutingContext.url(react_core_1.SCRoutes.EVENTS_ROUTE_NAME, scLiveStream.event)
+                                        : '/' }, { children: chunks })))
+                            } }));
+                        if (error.response.data.errors[0].code !== types_1.SCLiveStreamConnectionDetailsErrorType.WAITING_HOST_TO_START_LIVE_STREAM &&
+                            error.response.data.errors[0].code !== types_1.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 = (0, react_1.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 = (0, react_1.useCallback)((e) => console.error(e), []);
+    /**
+     * User must be authenticated
+     */
+    if (!scLiveStream || !scUserContext.user || !liveStreamEnabled) {
+        return (0, jsx_runtime_1.jsx)(material_1.CircularProgress, {});
+    }
+    /**
+     * Renders root object
+     */
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ id: id, className: (0, classnames_1.default)(classes.root, className) }, rest, { children: scLiveStream.closed_at_by_host ? ((0, jsx_runtime_1.jsx)(DialogRoot, Object.assign({ open: true, maxWidth: 'md', fullWidth: true }, { children: (0, jsx_runtime_1.jsxs)(DialogContent_1.default, Object.assign({ className: classes.endConferenceWrap }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h5" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamRoom.conference.closed", defaultMessage: "ui.liveStreamRoom.conference.closed" }) })), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "contained", color: "secondary", component: react_core_1.Link, to: '/', className: classes.btnBackHome }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamRoom.button.backHome", defaultMessage: "ui.liveStreamRoom.button.backHome" }) }))] })) }))) : ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.content, "data-lk-theme": "default" }, { children: connectionDetails === undefined || preJoinChoices === undefined ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [startPrejoinContent && (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.startPrejoinContent }, { children: startPrejoinContent })), (scLiveStream === null || scLiveStream === void 0 ? void 0 : scLiveStream.title) && ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: 'div', variant: "h4", className: classes.title, alignContent: 'center' }, { children: scLiveStream === null || scLiveStream === void 0 ? void 0 : scLiveStream.title }))), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: (0, classnames_1.default)(classes.preJoin, { [classes.preJoinLoading]: loading || error }) }, { children: [(0, jsx_runtime_1.jsx)(LiveStreamProvider_1.LiveStreamContext.Provider, Object.assign({ value: { liveStream: scLiveStream } }, { children: (0, jsx_runtime_1.jsx)(PreJoin_1.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 && ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.prejoinLoader }, { children: [(0, jsx_runtime_1.jsx)(material_1.CircularProgress, {}), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: 'div', variant: "body2" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamRoom.connecting", defaultMessage: "ui.liveStreamRoom.connecting" }) }))] })))] })), (0, jsx_runtime_1.jsxs)(material_1.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)))) && ((0, jsx_runtime_1.jsxs)(material_1.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)) && ((0, jsx_runtime_1.jsxs)(material_1.Alert, Object.assign({ variant: "filled", severity: "info", className: classes.preJoinAlert }, { children: [(0, jsx_runtime_1.jsx)(material_1.AlertTitle, { children: (0, jsx_runtime_1.jsx)("b", { children: "Info" }) }), ((_e = scLiveStream.settings) === null || _e === void 0 ? void 0 : _e.muteParticipants) && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["-", ' ', (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamRoom.hostDisableMicrophone", defaultMessage: "ui.liveStreamRoom.hostDisableMicrophone" }), (0, jsx_runtime_1.jsx)("br", {})] })), ((_f = scLiveStream.settings) === null || _f === void 0 ? void 0 : _f.disableVideo) && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["- ", (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamRoom.hostDisableVideo", defaultMessage: "ui.liveStreamRoom.hostDisableVideo" })] }))] }))), (0, jsx_runtime_1.jsx)(CopyTextArea_1.default, { className: classes.shareLink, value: `${appUrl}${scRoutingContext.url(react_core_1.SCRoutes.LIVESTREAM_ROUTE_NAME, scLiveStream)}`, label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamRoom.shareLink", defaultMessage: "ui.liveStreamRoom.shareLink" }) }), (scLiveStream === null || scLiveStream === void 0 ? void 0 : scLiveStream.description) && ((0, jsx_runtime_1.jsxs)(material_1.Alert, Object.assign({ variant: "filled", severity: "info", className: classes.description }, { children: [(0, jsx_runtime_1.jsx)(material_1.AlertTitle, { children: (0, jsx_runtime_1.jsx)("b", { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamRoom.description", defaultMessage: "ui.liveStreamRoom.description" }) }) }), scLiveStream === null || scLiveStream === void 0 ? void 0 : scLiveStream.description] })))] }))), endPrejoinContent] }))] })) : ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.conference }, { children: (0, jsx_runtime_1.jsx)(LiveStreamProvider_1.LiveStreamContext.Provider, Object.assign({ value: { liveStream: scLiveStream } }, { children: (0, jsx_runtime_1.jsx)(LiveStreamVideoConference_1.default, Object.assign({ connectionDetails: connectionDetails, userChoices: preJoinChoices }, LiveStreamVideoConferenceComponentProps)) })) }))) }))) })));
+}
+exports.default = LiveStreamRoom;

package/lib/cjs/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/cjs/components/LiveStreamRoom/LiveStreamVideoConference/ControlBar.js

@@ -0,0 +1,62 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ControlBar = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const livekit_client_1 = require("livekit-client");
+const React = tslib_1.__importStar(require("react"));
+const components_core_1 = require("@livekit/components-core");
+const components_react_1 = require("@livekit/components-react");
+const TrackToggle_1 = require("./TrackToggle");
+const material_1 = require("@mui/material");
+const SettingsMenuToggle_1 = require("./SettingsMenuToggle");
+const DisconnectButton_1 = require("./DisconnectButton");
+const utils_1 = require("./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.
+ */
+function ControlBar(_a) {
+    var _b, _c, _d, _e, _f;
+    var { variation, controls, saveUserChoices = true, onDeviceError } = _a, props = tslib_1.__rest(_a, ["variation", "controls", "saveUserChoices", "onDeviceError"]);
+    const [isChatOpen, setIsChatOpen] = React.useState(false);
+    const layoutContext = (0, components_react_1.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 = (0, material_1.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 = (0, components_react_1.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 = (0, components_core_1.supportsScreenSharing)();
+    const [isScreenShareEnabled, setIsScreenShareEnabled] = React.useState(false);
+    const onScreenShareChange = React.useCallback((enabled) => {
+        setIsScreenShareEnabled(enabled);
+    }, [setIsScreenShareEnabled]);
+    const htmlProps = (0, utils_1.mergeProps)({ className: 'lk-control-bar' }, props);
+    const { saveAudioInputEnabled, saveVideoInputEnabled, saveAudioInputDeviceId, saveVideoInputDeviceId } = (0, components_react_1.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 ((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 && '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 && '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 && (isScreenShareEnabled ? 'Stop screen share' : 'Share screen') })) })), 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 && '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 && '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 && 'Leave'] }) })), (0, jsx_runtime_1.jsx)(components_react_1.StartMediaButton, {})] })));
+}
+exports.ControlBar = ControlBar;

package/lib/cjs/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/cjs/components/LiveStreamRoom/LiveStreamVideoConference/DisconnectButton.js

@@ -0,0 +1,76 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DisconnectButton = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = tslib_1.__importStar(require("react"));
+const components_react_1 = require("@livekit/components-react");
+const react_1 = require("react");
+const api_services_1 = require("@selfcommunity/api-services");
+const LiveStreamProvider_1 = require("./LiveStreamProvider");
+const react_intl_1 = require("react-intl");
+const material_1 = require("@mui/material");
+const react_core_1 = require("@selfcommunity/react-core");
+const ConfirmDialog_1 = tslib_1.__importDefault(require("../../../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.
+ */
+exports.DisconnectButton = 
+/* @__PURE__ */ React.forwardRef(function DisconnectButton(props, ref) {
+    // CONTEXT
+    const { liveStream } = (0, LiveStreamProvider_1.useLiveStream)();
+    const scUserContext = (0, react_core_1.useSCUser)();
+    // STATE
+    const [closeLive, setCloseLive] = (0, react_1.useState)(false);
+    const [openConfirmDialog, setOpenConfirmDialog] = (0, react_1.useState)(false);
+    const [isUpdating, setIsUpdating] = (0, react_1.useState)(false);
+    const { buttonProps } = (0, components_react_1.useDisconnectButton)(props);
+    const { onClick } = buttonProps, rest = tslib_1.__rest(buttonProps, ["onClick"]);
+    /**
+     * Intercept fist leave action
+     */
+    const handleOnLeave = (0, react_1.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 = (0, react_1.useCallback)((event) => {
+        setCloseLive(event.target.checked);
+    }, [closeLive]);
+    /**
+     * Perform set liveStream as closed
+     */
+    const performCloseLiveStream = (0, react_1.useMemo)(() => () => tslib_1.__awaiter(this, void 0, void 0, function* () {
+        const res = yield api_services_1.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 ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("button", Object.assign({ ref: ref }, rest, { onClick: handleOnLeave }, { children: props.children })), openConfirmDialog && ((0, jsx_runtime_1.jsx)(ConfirmDialog_1.default, { open: openConfirmDialog, title: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}), content: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamRoom.live.terminate", defaultMessage: "ui.liveStreamRoom.live.terminate" }), (0, jsx_runtime_1.jsx)(material_1.FormGroup, { children: (0, jsx_runtime_1.jsx)(material_1.FormControlLabel, { control: (0, jsx_runtime_1.jsx)(material_1.Checkbox, { checked: closeLive, onChange: handleChangeCloseLive, inputProps: { 'aria-label': 'controlled' } }), label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamRoom.live.terminatePermanently", defaultMessage: "ui.liveStreamRoom.live.terminatePermanently" }) }) })] }), onConfirm: handleLeaveAction, isUpdating: isUpdating, onClose: () => setOpenConfirmDialog(false) }))] }));
+});