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

package/lib/cjs/components/LiveStreamRoom/LiveStreamRoom.js

@@ -0,0 +1,215 @@
+"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`,
+    logo: `${constants_1.PREFIX}-logo`,
+    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;
+    //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)("a", Object.assign({ style: { color: '#FFF' }, href: error.response.data.errors[0].code === types_1.SCLiveStreamConnectionDetailsErrorType.PARTICIPATE_THE_EVENT_TO_JOIN_LIVE_STREAM &&
+                                        scLiveStream.event
+                                        ? scRoutingContext.url(react_core_1.SCRoutes.EVENT_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);
+        if (e.message !== 'NotAllowedError: Permission denied') {
+            enqueueSnackbar(intl.formatMessage({
+                id: 'ui.liveStreamRoom.connect.error.device.permission',
+                defaultMessage: 'ui.liveStreamRoom.connect.error.device.permission'
+            }), { variant: 'error', autoHideDuration: 5000 });
+        }
+        else if (e.message !== 'NotFoundError: Requested device not found') {
+            enqueueSnackbar(intl.formatMessage({
+                id: 'ui.liveStreamRoom.connect.error.device.notFound',
+                defaultMessage: 'ui.liveStreamRoom.connect.error.device.notFound'
+            }), { variant: 'error', autoHideDuration: 5000 });
+        }
+    }, []);
+    /**
+     * 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)(react_core_1.Link, Object.assign({ to: scRoutingContext.url(react_core_1.SCRoutes.HOME_ROUTE_NAME, {}), className: classes.logo }, { children: (0, jsx_runtime_1.jsx)("img", { src: preferences[react_core_1.SCPreferences.LOGO_NAVBAR_LOGO].value, alt: "logo" }) })), (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: [scLiveStream && ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ sx: { width: '47%' }, spacing: 1, className: classes.endPrejoinContentBox }, { children: [scLiveStream &&
+                                        scUserContext.user &&
+                                        scUserContext.user.id !== scLiveStream.host.id &&
+                                        scLiveStream &&
+                                        (((_a = scLiveStream.settings) === null || _a === void 0 ? void 0 : _a.muteParticipants) || ((_b = scLiveStream.settings) === null || _b === void 0 ? void 0 : _b.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" }) }), ((_c = scLiveStream.settings) === null || _c === void 0 ? void 0 : _c.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", {})] })), ((_d = scLiveStream.settings) === null || _d === void 0 ? void 0 : _d.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 declare 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) }))] }));
+});

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

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import type { TrackReferenceOrPlaceholder } from '@livekit/components-core';
+import type { ParticipantClickEvent } from '@livekit/components-core';
+export declare 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;
+    disableTileFocusToggle?: boolean;
+    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, disableTileFocusToggle, ...htmlProps }: FocusLayoutProps): JSX.Element;

package/lib/cjs/components/LiveStreamRoom/LiveStreamVideoConference/FocusLayout.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FocusLayout = exports.FocusLayoutContainerNoParticipants = exports.FocusLayoutContainer = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ParticipantTile_1 = require("./ParticipantTile");
+const utils_1 = require("./utils");
+/**
+ * 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.
+ */
+function FocusLayoutContainer(props) {
+    const elementProps = (0, utils_1.mergeProps)(props, { className: 'lk-focus-layout' });
+    return (0, jsx_runtime_1.jsx)("div", Object.assign({}, elementProps, { children: props.children }));
+}
+exports.FocusLayoutContainer = FocusLayoutContainer;
+function FocusLayoutContainerNoParticipants(props) {
+    const elementProps = (0, utils_1.mergeProps)(props, { className: 'lk-focus-layout' });
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({}, elementProps, { style: { gridTemplateColumns: 'none' } }, { children: props.children })));
+}
+exports.FocusLayoutContainerNoParticipants = FocusLayoutContainerNoParticipants;
+/**
+ * The `FocusLayout` component is just a light wrapper around the `ParticipantTile` to display a single participant.
+ */
+function FocusLayout(_a) {
+    var { trackRef, disableTileFocusToggle = false } = _a, htmlProps = tslib_1.__rest(_a, ["trackRef", "disableTileFocusToggle"]);
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    return (0, jsx_runtime_1.jsx)(ParticipantTile_1.ParticipantTile, Object.assign({ trackRef: trackRef, disableTileFocusToggle: disableTileFocusToggle }, htmlProps));
+}
+exports.FocusLayout = FocusLayout;

package/lib/cjs/components/LiveStreamRoom/LiveStreamVideoConference/LiveStreamProvider.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import { SCLiveStreamType } from '@selfcommunity/types';
+/**
+ * Interface LiveStreamContextType
+ */
+export interface LiveStreamContextType {
+    /**
+     * Options
+     */
+    liveStream: SCLiveStreamType;
+}
+export declare const LiveStreamContext: import("react").Context<LiveStreamContextType>;
+/**
+ * Let's only export the `useLiveStream` hook instead of the context.
+ * We only want to use the hook directly and never the context component.
+ */
+export declare function useLiveStream(): LiveStreamContextType;

package/lib/cjs/components/LiveStreamRoom/LiveStreamVideoConference/LiveStreamProvider.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useLiveStream = exports.LiveStreamContext = void 0;
+const react_1 = require("react");
+exports.LiveStreamContext = (0, react_1.createContext)({});
+/**
+ * Let's only export the `useLiveStream` hook instead of the context.
+ * We only want to use the hook directly and never the context component.
+ */
+function useLiveStream() {
+    return (0, react_1.useContext)(exports.LiveStreamContext);
+}
+exports.useLiveStream = useLiveStream;

package/lib/cjs/components/LiveStreamRoom/LiveStreamVideoConference/LiveStreamVideoConference.d.ts

@@ -0,0 +1,77 @@
+import { BoxProps } from '@mui/material';
+import { LiveKitRoomProps, LocalUserChoices, VideoConferenceProps } from '@livekit/components-react';
+import { VideoCodec } from 'livekit-client';
+import React from 'react';
+import { ConnectionDetails } from '../types';
+export interface LiveStreamVideoConferenceProps extends BoxProps {
+    /**
+     * Overrides or extends the styles applied to the component.
+     * @default null
+     */
+    className?: string;
+    /**
+     * User choices
+     */
+    userChoices?: LocalUserChoices;
+    /**
+     * Connection details, include
+     *       serverUrl: serverUrl,
+     *       roomName: roomName,
+     *       participantToken: participantToken,
+     *       participantName: participantName
+     */
+    connectionDetails?: ConnectionDetails;
+    /**
+     * Override video options
+     */
+    options?: {
+        hq: boolean;
+        codec: VideoCodec;
+    };
+    /**
+     * onLeave room callback
+     */
+    handleOnLeaveRoom?: () => void;
+    /**
+     * Props to spread to LiveKitRoomComponent
+     * @default {}
+     */
+    LiveKitRoomComponentProps?: LiveKitRoomProps;
+    /**
+     * Props to spread to VideoConferenceComponent
+     * @default {}
+     */
+    VideoConferenceComponentProps?: VideoConferenceProps;
+    /**
+     * Element to be inserted before end conference content
+     */
+    startConferenceEndContent?: React.ReactNode | null;
+    /**
+     * Element to be inserted after end conference content
+     */
+    endConferenceEndContent?: React.ReactNode | null;
+    /**
+     * Any other properties
+     */
+    [p: string]: any;
+}
+/**
+ *> API documentation for the Community-JS LiveStreamVideoConference component. Learn about the available props and the CSS API.
+ *
+ #### Import
+ ```jsx
+ import {LiveStreamVideoConference} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+ The name `LiveStreamVideoConference` 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.|
+
+ * @param inProps
+ */
+export default function LiveStreamVideoConference(inProps: LiveStreamVideoConferenceProps): JSX.Element;