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

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

@@ -0,0 +1,212 @@
+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`,
+    logo: `${PREFIX}-logo`,
+    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;
+    //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("a", Object.assign({ style: { color: '#FFF' }, href: error.response.data.errors[0].code === SCLiveStreamConnectionDetailsErrorType.PARTICIPATE_THE_EVENT_TO_JOIN_LIVE_STREAM &&
+                                        scLiveStream.event
+                                        ? scRoutingContext.url(SCRoutes.EVENT_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);
+        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 _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(Link, Object.assign({ to: scRoutingContext.url(SCRoutes.HOME_ROUTE_NAME, {}), className: classes.logo }, { children: _jsx("img", { src: preferences[SCPreferences.LOGO_NAVBAR_LOGO].value, alt: "logo" }) })), _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: [scLiveStream && (_jsxs(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)) && (_jsxs(Alert, Object.assign({ variant: "filled", severity: "info", className: classes.preJoinAlert }, { children: [_jsx(AlertTitle, { children: _jsx("b", { children: "Info" }) }), ((_c = scLiveStream.settings) === null || _c === void 0 ? void 0 : _c.muteParticipants) && (_jsxs(_Fragment, { children: ["-", ' ', _jsx(FormattedMessage, { id: "ui.liveStreamRoom.hostDisableMicrophone", defaultMessage: "ui.liveStreamRoom.hostDisableMicrophone" }), _jsx("br", {})] })), ((_d = scLiveStream.settings) === null || _d === void 0 ? void 0 : _d.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 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/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,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/esm/components/LiveStreamRoom/LiveStreamVideoConference/FocusLayout.js

@@ -0,0 +1,27 @@
+import { __rest } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ParticipantTile } from './ParticipantTile';
+import { mergeProps } from './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.
+ */
+export function FocusLayoutContainer(props) {
+    const elementProps = mergeProps(props, { className: 'lk-focus-layout' });
+    return _jsx("div", Object.assign({}, elementProps, { children: props.children }));
+}
+export function FocusLayoutContainerNoParticipants(props) {
+    const elementProps = mergeProps(props, { className: 'lk-focus-layout' });
+    return (_jsx("div", Object.assign({}, elementProps, { style: { gridTemplateColumns: 'none' } }, { children: props.children })));
+}
+/**
+ * The `FocusLayout` component is just a light wrapper around the `ParticipantTile` to display a single participant.
+ */
+export function FocusLayout(_a) {
+    var { trackRef, disableTileFocusToggle = false } = _a, htmlProps = __rest(_a, ["trackRef", "disableTileFocusToggle"]);
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    return _jsx(ParticipantTile, Object.assign({ trackRef: trackRef, disableTileFocusToggle: disableTileFocusToggle }, htmlProps));
+}

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

@@ -0,0 +1,9 @@
+import { createContext, useContext } from 'react';
+export const LiveStreamContext = 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.
+ */
+export function useLiveStream() {
+    return useContext(LiveStreamContext);
+}

package/lib/esm/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;