@selfcommunity/react-ui 0.8.0-live.66 → 0.8.0-live.67

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

@@ -0,0 +1,104 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useLivestreamCheck = void 0;
+const react_1 = require("react");
+const api_services_1 = require("@selfcommunity/api-services");
+const components_react_1 = require("@livekit/components-react");
+const LiveStreamProvider_1 = require("./LiveStreamProvider");
+const notistack_1 = require("notistack");
+const react_intl_1 = require("react-intl");
+const react_core_1 = require("@selfcommunity/react-core");
+const constants_1 = require("../constants");
+/**
+ * Custom hook for monitoring livestream.
+ * @param {number} warningThreshold
+ * @param showWarnings
+ * @param performDisconnect
+ */
+function useLivestreamCheck(warningThreshold = constants_1.WARNING_THRESHOLD_EXPIRING_SOON, showWarnings = true, performDisconnect = true) {
+    // HOOKS
+    const scUserContext = (0, react_core_1.useSCUser)();
+    const participants = (0, components_react_1.useParticipants)();
+    const { liveStream } = (0, LiveStreamProvider_1.useLiveStream)();
+    const { buttonProps } = (0, components_react_1.useDisconnectButton)({});
+    const { enqueueSnackbar } = (0, notistack_1.useSnackbar)();
+    const __DEBUG = (0, react_1.useRef)(true);
+    // STATE
+    const [timeRemaining, setTimeRemaining] = (0, react_1.useState)(60);
+    const [isExpiringSoon, setIsExpiringSoon] = (0, react_1.useState)(false);
+    const [isExpired, setIsExpired] = (0, react_1.useState)(false);
+    const intervalRef = (0, react_1.useRef)(null);
+    // INTL
+    const intl = (0, react_intl_1.useIntl)();
+    const fetchLivestreamStatus = () => {
+        api_services_1.LiveStreamApiClient.getMonthlyDuration()
+            .then((r) => {
+            setTimeRemaining(r.remaining_minutes);
+            if (r.remaining_minutes > 0 && r.remaining_minutes <= warningThreshold) {
+                setIsExpiringSoon(true);
+                if (!isExpiringSoon && !isExpired && liveStream.host.id === scUserContext.user.id && showWarnings) {
+                    __DEBUG && console.log('Warning: ');
+                    enqueueSnackbar(intl.formatMessage({ id: 'ui.liveStreamRoom.check.fewMinutesRemaining', defaultMessage: 'ui.liveStreamRoom.check.fewMinutesRemaining' }), {
+                        variant: 'warning',
+                        autoHideDuration: 30000
+                    });
+                }
+            }
+            else if (r.remaining_minutes <= 0) {
+                __DEBUG && console.log('Livestream  ');
+                setIsExpired(true);
+                clearInterval(intervalRef.current);
+            }
+        })
+            .catch((error) => {
+            console.error('Error fetching live status:', error);
+        });
+    };
+    const check = (0, react_1.useCallback)(() => {
+        if (__DEBUG) {
+            console.log('Checking live status');
+            console.log(participants.length);
+            console.log('isExpiringSoon: ', isExpiringSoon);
+            console.log('isExpired: ', isExpired);
+            console.log('Checking participants...');
+        }
+        if (participants.length <= 1) {
+            isExpiringSoon ? setIsExpired(true) : setIsExpiringSoon(true);
+            if (!isExpiringSoon && !isExpired && showWarnings) {
+                enqueueSnackbar(intl.formatMessage({ id: 'ui.liveStreamRoom.check.youAreAloneInTheRoom', defaultMessage: 'ui.liveStreamRoom.check.youAreAloneInTheRoom' }), { variant: 'warning', autoHideDuration: 20000 });
+            }
+            else if (isExpired && performDisconnect) {
+                // Leave the room
+                __DEBUG && console.log('Leave the room: no participants');
+                buttonProps.onClick();
+            }
+            return;
+        }
+        __DEBUG && console.log('Checking live speaker...');
+        const speaker = participants.find((pt) => {
+            return pt.name === liveStream.host.username;
+        });
+        if (!speaker) {
+            isExpiringSoon ? setIsExpired(true) : setIsExpiringSoon(true);
+            if (!isExpiringSoon && !isExpired && liveStream.host.id !== scUserContext.user.id && showWarnings) {
+                enqueueSnackbar(intl.formatMessage({ id: 'ui.liveStreamRoom.check.hostMissing', defaultMessage: 'ui.liveStreamRoom.check.hostMissing' }), {
+                    variant: 'warning',
+                    autoHideDuration: 20000
+                });
+            }
+            else if (isExpired && performDisconnect) {
+                // Leave the room
+                __DEBUG && console.log('Leave the room: no host');
+                buttonProps.onClick();
+            }
+        }
+        __DEBUG && console.log('Checking live status resources...');
+        fetchLivestreamStatus();
+    }, [isExpired, isExpiringSoon, buttonProps]);
+    (0, react_1.useEffect)(() => {
+        intervalRef.current = setInterval(check, constants_1.LIVE_CHECKING_INTERVAL * 1000);
+        return () => intervalRef.current && clearInterval(intervalRef.current);
+    }, [isExpired, isExpiringSoon]);
+    return { timeRemaining, isExpiringSoon, isExpired };
+}
+exports.useLivestreamCheck = useLivestreamCheck;

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

@@ -3,3 +3,13 @@ export declare const defaultVideoOptions: {
     readonly hq: true;
     readonly codec: "vp9";
 };
+/**
+ * Checking live status on VideoLiveConference
+ * In minutes
+ */
+export declare const LIVE_CHECKING_INTERVAL = 50;
+/**
+ * Warning threshold expiring soon
+ * In minutes
+ */
+export declare const WARNING_THRESHOLD_EXPIRING_SOON = 5;

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

@@ -1,8 +1,18 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.defaultVideoOptions = exports.PREFIX = void 0;
+exports.WARNING_THRESHOLD_EXPIRING_SOON = exports.LIVE_CHECKING_INTERVAL = exports.defaultVideoOptions = exports.PREFIX = void 0;
 exports.PREFIX = 'SCLiveStreamRoom';
 exports.defaultVideoOptions = {
     hq: true,
     codec: 'vp9'
 };
+/**
+ * Checking live status on VideoLiveConference
+ * In minutes
+ */
+exports.LIVE_CHECKING_INTERVAL = 50;
+/**
+ * Warning threshold expiring soon
+ * In minutes
+ */
+exports.WARNING_THRESHOLD_EXPIRING_SOON = 5;

package/lib/cjs/components/Notification/LiveStream/LiveStream.d.ts

@@ -0,0 +1,15 @@
+import { SCNotificationLiveStreamActivityType } from '@selfcommunity/types';
+import { NotificationItemProps } from '../../../shared/NotificationItem';
+export interface NotificationLiveStreamProps extends Pick<NotificationItemProps, Exclude<keyof NotificationItemProps, 'image' | 'disableTypography' | 'primary' | 'primaryTypographyProps' | 'secondary' | 'secondaryTypographyProps' | 'actions' | 'footer' | 'isNew'>> {
+    /**
+     * Notification obj
+     * @default null
+     */
+    notificationObject: SCNotificationLiveStreamActivityType;
+}
+/**
+ * This component render the content of the notification of type event
+ * @constructor
+ * @param props
+ */
+export default function LiveStreamNotification(props: NotificationLiveStreamProps): JSX.Element;

package/lib/cjs/components/Notification/LiveStream/LiveStream.js

@@ -0,0 +1,82 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const styles_1 = require("@mui/material/styles");
+const material_1 = require("@mui/material");
+const react_core_1 = require("@selfcommunity/react-core");
+const react_intl_1 = require("react-intl");
+const DateTimeAgo_1 = tslib_1.__importDefault(require("../../../shared/DateTimeAgo"));
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const types_1 = require("../../../types");
+const NotificationItem_1 = tslib_1.__importDefault(require("../../../shared/NotificationItem"));
+const lab_1 = require("@mui/lab");
+const UserDeletedSnackBar_1 = tslib_1.__importDefault(require("../../../shared/UserDeletedSnackBar"));
+const UserAvatar_1 = tslib_1.__importDefault(require("../../../shared/UserAvatar"));
+const constants_1 = require("../constants");
+const Event_1 = tslib_1.__importDefault(require("../../Event"));
+const classes = {
+    root: `${constants_1.PREFIX}-event-root`,
+    avatar: `${constants_1.PREFIX}-avatar`,
+    actions: `${constants_1.PREFIX}-actions`,
+    seeButton: `${constants_1.PREFIX}see-button`,
+    activeAt: `${constants_1.PREFIX}-active-at`,
+    snippetTime: `${constants_1.PREFIX}-snippet-time`,
+    username: `${constants_1.PREFIX}-username`
+};
+const Root = (0, styles_1.styled)(NotificationItem_1.default, {
+    name: constants_1.PREFIX,
+    slot: 'EventRoot'
+})(() => ({}));
+/**
+ * This component render the content of the notification of type event
+ * @constructor
+ * @param props
+ */
+function LiveStreamNotification(props) {
+    // PROPS
+    const { notificationObject, id = `n_${props.notificationObject['sid']}`, className, template = types_1.SCNotificationObjectTemplateType.DETAIL } = props, rest = tslib_1.__rest(props, ["notificationObject", "id", "className", "template"]);
+    // CONTEXT
+    const scRoutingContext = (0, react_core_1.useSCRouting)();
+    // STATE
+    const [openAlert, setOpenAlert] = (0, react_1.useState)(false);
+    // CONST
+    const isSnippetTemplate = template === types_1.SCNotificationObjectTemplateType.SNIPPET;
+    const isToastTemplate = template === types_1.SCNotificationObjectTemplateType.TOAST;
+    const intl = (0, react_intl_1.useIntl)();
+    // RENDER
+    if (isSnippetTemplate || isToastTemplate) {
+        return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ id: id, className: (0, classnames_1.default)(classes.root, className, `${constants_1.PREFIX}-${template}`), template: template, isNew: notificationObject.is_new, disableTypography: true, image: (0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({}, (!notificationObject.user.deleted && {
+                to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, notificationObject.user)
+            }), { onClick: notificationObject.user.deleted ? () => setOpenAlert(true) : null }, { children: (0, jsx_runtime_1.jsx)(UserAvatar_1.default, Object.assign({ hide: !notificationObject.user.community_badge, smaller: true }, { children: (0, jsx_runtime_1.jsx)(material_1.Avatar, { alt: notificationObject.user.username, variant: "circular", src: notificationObject.user.avatar, classes: { root: classes.avatar } }) })) })), primary: (0, jsx_runtime_1.jsxs)(material_1.Box, { children: [(0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({}, (!notificationObject.user.deleted && {
+                        to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, notificationObject.user)
+                    }), { onClick: notificationObject.user.deleted ? () => setOpenAlert(true) : null, className: classes.username }, { children: notificationObject.user.username })), ' ', (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.notification.event.${notificationObject.type}`, defaultMessage: `ui.notification.event.${notificationObject.type}`, values: {
+                            // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+                            // @ts-ignore
+                            icon: (...chunks) => (0, jsx_runtime_1.jsx)(material_1.Icon, { children: chunks }),
+                            event: notificationObject.live_stream.title,
+                            link: (...chunks) => (0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: scRoutingContext.url(react_core_1.SCRoutes.LIVESTREAM_ROUTE_NAME, notificationObject.live_stream) }, { children: chunks }))
+                        } })] }), secondary: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: "span" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.notification.event.dateTime", defaultMessage: "ui.notification.event.dateTime", values: {
+                            date: intl.formatDate(notificationObject.live_stream.created_at, {
+                                weekday: 'long',
+                                day: 'numeric',
+                                year: 'numeric',
+                                month: 'long'
+                            }),
+                            hour: intl.formatDate(notificationObject.live_stream.created_at, { hour: 'numeric', minute: 'numeric' })
+                        } }) })) }), footer: isToastTemplate ? ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 2 }, { children: [(0, jsx_runtime_1.jsx)(DateTimeAgo_1.default, { date: notificationObject.active_at }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ color: "primary" }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: scRoutingContext.url(react_core_1.SCRoutes.LIVESTREAM_ROUTE_NAME, notificationObject.live_stream) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.notification.event.button.see", defaultMessage: "ui.notification.event.button.see" }) })) }))] }))) : ((0, jsx_runtime_1.jsx)(DateTimeAgo_1.default, { date: notificationObject.active_at, className: classes.snippetTime })) }, rest)));
+    }
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Root, Object.assign({ id: id, className: (0, classnames_1.default)(classes.root, className, `${constants_1.PREFIX}-${template}`), template: template, isNew: notificationObject.is_new, disableTypography: true, image: (0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({}, (!notificationObject.user.deleted && {
+                    to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, notificationObject.user)
+                }), { onClick: notificationObject.user.deleted ? () => setOpenAlert(true) : null }, { children: (0, jsx_runtime_1.jsx)(UserAvatar_1.default, Object.assign({ hide: !notificationObject.user.community_badge, smaller: true }, { children: (0, jsx_runtime_1.jsx)(material_1.Avatar, { className: classes.avatar, alt: notificationObject.user.username, variant: "circular", src: notificationObject.user.avatar }) })) })), primary: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({}, (!notificationObject.user.deleted && {
+                            to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, notificationObject.user)
+                        }), { onClick: notificationObject.user.deleted ? () => setOpenAlert(true) : null, className: classes.username }, { children: notificationObject.user.username })), ' ', (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.notification.${notificationObject.type}`, defaultMessage: `ui.notification.${notificationObject.type}`, values: {
+                                // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+                                // @ts-ignore
+                                icon: (...chunks) => (0, jsx_runtime_1.jsx)(material_1.Icon, { children: chunks }),
+                                event: notificationObject.live_stream.title,
+                                link: (...chunks) => (0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: scRoutingContext.url(react_core_1.SCRoutes.LIVESTREAM_ROUTE_NAME, notificationObject.live_stream) }, { children: chunks }))
+                            } }), (0, jsx_runtime_1.jsx)(Event_1.default, { event: notificationObject.live_stream, actions: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}), elevation: 0 })] }), actions: (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 2 }, { children: [(0, jsx_runtime_1.jsx)(DateTimeAgo_1.default, { date: notificationObject.active_at, className: classes.activeAt }), (0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ color: 'primary', variant: "outlined", size: "small", classes: { root: classes.seeButton }, component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.LIVESTREAM_ROUTE_NAME, notificationObject.live_stream) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.notification.event.button.see", defaultMessage: "ui.notification.event.button.see" }) }))] })) }, rest)), openAlert && (0, jsx_runtime_1.jsx)(UserDeletedSnackBar_1.default, { open: openAlert, handleClose: () => setOpenAlert(false) })] }));
+}
+exports.default = LiveStreamNotification;

package/lib/cjs/components/Notification/LiveStream/index.d.ts

@@ -0,0 +1,3 @@
+import LiveStreamNotification, { NotificationLiveStreamProps } from './LiveStream';
+export default LiveStreamNotification;
+export { NotificationLiveStreamProps };

package/lib/cjs/components/Notification/LiveStream/index.js

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

package/lib/cjs/components/Notification/Notification.js

@@ -308,6 +308,9 @@ function UserNotification(inProps) {
             n.type === types_1.SCNotificationTypologyType.USER_REQUESTED_TO_JOIN_EVENT) {
             return (0, jsx_runtime_1.jsx)(Event_1.default, { notificationObject: n }, i);
         }
+        else if (n.type === types_1.SCNotificationTypologyType.LIVE_STREAM_STARTED) {
+            return (0, jsx_runtime_1.jsx)(Event_1.default, { notificationObject: n }, i);
+        }
         return null;
     }
     /**

package/lib/esm/assets/liveStream/event.d.ts

@@ -0,0 +1,2 @@
+declare const _default: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAACXBIWXMAAAsTAAALEwEAmpwYAAARAElEQVR4nO1dCVRUSZbNqenpmZ6ZrpnuMzN9ps/MmTkz3VNtldqlImpZlpYbssgqCK4o7uKC+1ouJYi7gvuKuOICiruIqCCyyOKKoFKKoCz5Iz6LiCl657wgMxsoliQzWcR/z3mH+BGf/Blx/4sX8eJFpEqlQIECBQoUKFCgQIECBQoUKFCgQIECBQqq4tWrV//AGGsvSdIAWZZdSTjnvQoLC/8PwC+q3a7A3ADw15IkWXPOt3DO0xhj7znnqEkYY2WMsTjO+XJJkr5S2DAjCgoKfs0YW8A5z66NgLqEMfaBMXaFMTYQwGcKOcZrxF9xzscyxtQNIaC4uFgIpYuKilBYWCiE8kpKSh5rNJoJAPpqZRyAOQDstdcWCmE1oKCg4PeMsciGagM1vEajEULpt2/f4vXr10LevXsnRKPRfCgvL88EEAngGQA1gHgAEQB21vR9PmnIsmzJGMszpnuqSUpKSgQh9Jc0RkdQaWlpRnl5+TStlvy+uevdIiHLcl/OeYm5yCApLS0VmkJ/iRRKV5ICAEEAvmjuurc4SJLU3RxkUMOXlZXVK2/evBF2paysTAKwAEAPAP5amaP6lCFJ0n8yxvLNoRHa7qheofuoC9Om0wB0ADBXKyNUn/L8gnMea85uykhZ2dxt0SLAOZ/TAsig+cr7wsLCLqpPfXjLOX/d3GRUIiXhk548MsZ2NDcJNYiz6lNEcXHx78jn1AIIqK4lt1WfIhhji5u78WsTWZY7qVrbyEmW5c6cc09ZlueSMMYmMsa+BfA3dA95bJu74euQjarWAM75f3POAxhjUh2VLUmNj0948fy5uC7Iz0dyXJy+/MGdVGS/eCHS+Xl5SImP15fdT03Fy+xskc7LzUVqYqK+7F5yMl7l5OjL7txONKXbeqL6mKFWqz9njK1jjL01pMITnZ2w2XeFSF8+fRrW7doiPy9XXI8ZaIvtq1eJ9LkTx2H753YoKCgQ157WVti7cYNIhx89ArsOf6bGE9dD+3yP/ZsDRfpk8H44WlqY2m39r+pjBOfckXP+sr4K3ktOxoYlizHVfTAGdvwart2/EcQM79cHVl+1wXgHB3Ft16E93Hp0F+lhfXqLsgmOFWW2X7fH4O++FWkigMooTWLTvi3cv+tRUfZ9L1i1/RLebq7wnzsH8dE3GkyIJEnuqo8NjLFJda3c6eTgtq1w7GyBXevWISYyUpCwZIo3EmJisHvDetGw0RER4nrI9z3xo890xN24js0rfUVZ1MULiI68Ardvv8GPM6aLdMCPy0XZjSsR4tqlqyX8Zs8U6fVLFguCbkRE4OD2bYLEDUt+0GuTgeKn+pjAOZ9tSMWo23HuaomMtDTk5uYKmTFimCCC0tcuXYRLty7Iyc4W11Pc3RC0OVCkI86Ew7V7N7x8mSOuJw1yxuGdO0T6QlioaGjdZ45zGIiQvXtE+syxEKFBurKs588wytoKQQGbGkLIEdXHAkmSbAzRDCZJGNq7Fy6Gheob50VWFh5npOuvSXQNXj1tSlnm0yd4lpmpv06Oj4N9pw7IzsoylJAsSZI88vLy/lHVkiHL8m8YYwWGVColIUF0K0RCbm4uHt67J+yDk2VnXA4Pr9KA5pTE2JsY9E1XoXmx167p8we0/VK8HA20JzLn3JcGLqqWCMbYBkMrE3nurCDk1atXokHOHj8mjPqmZUux/ofFjUbIoR3bsWjieKyY4YM9Gzfo8z16fSdsipEjrxxaQFO1JMiy/FvG2BtDK0FDWiIkV0vIi6znwphPG+KBO0lJjUbIk4wMzBvjhVmeI5H+8KE+f2jv7xG8ZbOxhNCgoJwxNlnVUsA5n96QClQnJLeZxVRCtKR8kCRpgqolgDEWZQwh4x0dMMHJsUnFd9YMrFm4AH6zZ2H1/Hkiz6FTR2z198Opw4dwPGgfbl6NhCSpjSHlHbmBmpWMrKysXzWku6pMCLk7Sg1YVm1scbToBKcuneE7cwbWLVqIya4uGNGvL2IirxijLfd1frkmQ1FR0b9qHYMUI1XU0C/d4gjpbIFD27dVyYuNuiqMfWxUlDGkzG4SIn766ae/o7hYznmpKf1tSyPEybIzDu/Y/rP8xJgYDO/bB2q1Wjg6t670w9Ip3mJ2TxPXOrouCiP6ZaOSoVar/4MxllT94e/fv8eHDx9ERGBrI6S0tBRzRnlixvBh8OjVUzgwL4WFCq/AKOsBmD92jN6TXAMpDo1GRnFx8b8xxtLpQbIs6+NiK0tjaciT9DRM9RiMiNOn8CA1Fd6DB8FnuIdwpUSePYO7SbfhPdhFn3ft4nmkJiRgirvuPlfhD0u6FVsljwy3IYSQv22ahzvUBflV8mXOhM1Z4j2pNkKONWZw8wXdgyiyj7SispSXl5tdQ5gk4WlGGu6kROPw7kDhQo+5cgUbli1AYvwVHNi5UUzmrl+8iE0rFom84G3rELJnlyAqcOUSkbcvcA1O7t+HS6fCsHX1cpG3e5M/wg4GG0RISUlFkHZNZZJajWF9e+P2rdia6pltLgI+A9BLFwn+5s2bZbrI8eqiiyKndOVocl2ZKYTciorC+qXzRQM2JyH1CdmV2pyTjLF/MgchnwM4o436jtBoNIW6CPHqQqGX9KUorfuCujIKyTSFkNSEBIyy7o9pQ9ww3nEgQg/sF93OaBsrTBs6GOMc7XD6yGEkxkRjlM2AijwHO5w9FiLIHG1rLfLG2tvhYuhJQaaXXcV9Y+xtEXH6tMmE0KrmNn8/+AwdgszHj39WT7PGcwH4nUajWUShlfTh9FenAbpI8bpEtxfjYzfqpbVI2MEDwr6QNv7gPRku3buJelXTkB7mJOSP5eXl10gLyJDTX13YfrVI8RpFR6QhhKTfv19hmId5YKqHG84fP460u3cqDPiwCmN96VQoHqSk6O+jvCtnwnH39u0qeVHnzyElPq7CgIs8V9y4fAm3b97EFP3nueJm5BWjCSFNraxhJDTgoIUyWgHV1ZMCOlTmBAUmVG9MamhdV2WueUhC9A2sXTxH9O8h+7Zi78b1YmK2bum8FmlDqKuqKXg7ZM9urJgxvbKGtDc3IcHVG5P2UtDD69KA1k5IaS3yJC0NI6366cj4QPsgzUoIY+yosY3eEELuJydjlNZYT3C2x8ngINxJTNQb8PFOA0WfnRx3C6NttQbc0Q7hR46I2fRovVEfiPMnjiPu+vWqRj0sFLFXI+Flp8uzRUR4uNkJycnKEsvH2no+NCsZWkLWNwUhpU0kNJkje7I/MEAshgUsX4YDW7cIby9pm6mffzbkKBaMG6vTkA2NQcjEpiAknYy62yBMJ6Pu7oZzx4/h4R0y6i4ij4zwxbCTuJecVCWP3nIaHnu7/SXv6rmzwuhOGuSIqUNcce3SOeTm5IjGd7DoKJ7r+u03wvVPGkVRKZRnb9ER+zZtFJM9Y8jIfv4Mg3t0Fx4AbT2/NjshkiS1bQpCEhrDhvj+UPG/ewNFdItzF0sc2LIZz58+RWWQHy7jwX1s918p4sIo+OL2zRhkPs4wSOhlOrk/CIO6dxPDYG0d01SNBcbYI3OQQBGI+wI2CU1wsrSAYxcL7Fy7BpwxsxNC9+1Yv0IYb+t2X2HxxAkoZAz1IS8nR2goBd5RcB2tidQnXnY2WD59GhJioqvUlzE2tbEImWwqGc9/yhRf3HemD5JiY5GfmyvmChT4Ns7BXswRhvfrjXH2dvC07ofQ4GAxv9DnDegnZuWp8fFV8s6EHBGfp8ujEc6FkyeE1kVdCBchpWsXzMf79+UwFG/LyjB/jJeITHl0/76p6+zfmZ0Q8uvrPL3GyryxXsJ1XVPfu3PtGrHGICZcsbE4umunWN8ml4ixxpUcgmQfpg1xxzuNpk4CiKxD27aK5+ruLS4qgqdVf8wbM9rkPSWNsvOKc96hocu0OqG3jFbeqJFqaryioiK49+wh1hxIW4iggOVLMdrGGnNGe6IgL09/L7naadhLje1lay2Gs6Q1+jw7GzF7Jy2hWKtHd+/WSwaFBB3ft0/ItpV++rIbly4JO0dDaBNJsVM1VlSioSuFtHVgi5+vCCSgNYPFkybU+UavnD0L21f547V20imIKizE2oULMH+slz6vNhsSUM2G0NBz1sjh9ZJBz6Xu6Wl6uhhgzPUaVcXYj+jfV3wHEwnZq2osqNXqroyxx3V9ARr2UQQ7DSFPHTwoAgaWeE82qusplGURgE2aYQghJw7uxLmTJ8Ro6WTQvjrJWDV3DkKD9wsnKAXnebsOQvq9e1Xu2+rnK5ZwTbShr1SNiZycnL/nnPswxjIrPzjr2TMkxd3CWPuBiI64rG9UqnDey5dG2wP/ObMReqDCzUFzDnLFTx/qjkmDnHD+xDEx56A8moH7zvLB88xM0dUkRkfXSwZ9Ji3BTh86BKkJdM5MVdBEj/aoGBMSVKVtsrJ+pWoK0CFgjx8+HDPVY3CKQ6cO7yY4O5bOHjXyQ232oqGGOfzIYSwcPxZ2Hb/GrrVrqnRptQl5XYmQmuxHTWTQWkZ1zdAh+nKFHaGXzRRCZFn+nyYhZIlK9ZlTF4vbq+bPLZMKCkwmobSSkG+JGpfS9NbPGjkCm1f8WO//1aUhK3x8RDdK95HNIDJoUlgbzoWEmEVDaEtfkxBi1aaN22RXlyJDzxFpiGQ8fFDlmoIMaDSWmZFR5//RYIAmdmEHgqs0LnliZ3uOEMNbImP6EI86ySDsWL1K7CcxkQyY3etbG5wsLYJ0/XtTiN+smcLPVd9987xGVxkxEQKWLRU2Yc/GjWJ4XB8ZBNrMQ+GmLdqoV4ZzF8uDR3fvajJCFk0YLzbXCN9UHTKwUwexl/Dpo0f6xiUf1SQXJwRvDgRT02FxdeNW1FX9ljoTh70hTUaI1Zd/8hjv5FBiiLE1VV7l5MC5axexSzcoMKBO2btpI1x7dMfMEcNFiJLOT2WoC6X09Wt42dqIyaqp3RVjzLbJCOnZs+cvnCwtUpZPm1paPZDMnJL5OENs6CEXuqENQfMh2jpNAwGa5BkKiphZOmUyHDp3wv2UFFPJSGryQ2vsv/ji1/YWHQ/btG+rGda3d9FoG+vC8Q72bye5OKMmoUli8q1botIUEDDZ1QW7168TS8MkNHuufL/ngP5iRY/eegqea0iD0NYCcqH4zZyB0pKSesmgrmy250gxKKBdXiaS8VaW5eY7zXTAH/7w+YA2bTr0b/enTlv9/UbSJLEmeXj3rjhRgf5SsEBS3C2hAZV9X5Xvp1k6ndxgbMOQv4vsDi0e0bqFOi/3Z0S8zMoSayV0qAB5GYyMeK9OyERVSwLn/LqpleJmkifp6cKvRnvUSWNo9DRzxDDMGDZUf0ABuVuoSzR1EkjBDbRVQ9XSIMuyVXMTwasJbX0+ExIi7MqPPtOEp5dCQSkihbbXmeEZ2XRStqqlgjEW1twkcDMJY2w+bYNmjMUzxjSVysgDfo1Or2jxe9cZY/+l3c/9sZOxvXK9APwt7csvKir6F9XHBs65E/WrzdCI+eZ4Lv2aAu0cU7UmcM6XNTEh2eTQoyMwjF3p1Eo05/yfVa0RjLHVTaQZmYWFhX/UPVeSpG6c8+dGbG9e2+j7BJsb2p275Y1ISGx+fv6/1/KrO4vqO8xfe9DaIcZYO9WnAlmW+xlysBlv+Bu9qr794fSTR5zz3oyxhZzzINoHyDnfT6MnsnUt9iCZxgZt9eKcBxp69B+vmww6RaJjc9epVYCGxYyxDYYe61SJBA1j7Dj92Fdz16FVAsAvOed9GGP+jLHLZIR1oyPt0PWl9se8ttCZh6125KNAgQIFChQoUKBAgQIFChQoUKBAgQIFChQoUKBqnfh/x0mV0mXjHZwAAAAASUVORK5CYII=";
+export default _default;

package/lib/esm/assets/liveStream/event.js

@@ -0,0 +1 @@
+export default 'data:image/png;base64,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';

package/lib/esm/assets/liveStream/live.d.ts

@@ -0,0 +1,2 @@
+declare const _default: "data:image/png;base64,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";
+export default _default;

package/lib/esm/assets/liveStream/live.js

@@ -0,0 +1 @@
+export default 'data:image/png;base64,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';

package/lib/esm/components/CreateLiveStreamDialog/LiveStreamSelector/LiveStreamSelector.d.ts

@@ -1,4 +1,5 @@
 import { LiveStreamType } from '../types';
+export declare const PREFIX = "SCLiveStreamSelector";
 export interface LiveStreamSelectorProps {
     /**
      * Overrides or extends the styles applied to the component.

package/lib/esm/components/CreateLiveStreamDialog/LiveStreamSelector/LiveStreamSelector.js

@@ -1,98 +1,39 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { styled } from '@mui/material/styles';
-import { Box, Typography, Button, Paper, Container, Radio } from '@mui/material';
+import { Box, Typography, Button, Paper, Container, Radio, Alert } from '@mui/material';
 import Icon from '@mui/material/Icon';
-import { PREFIX } from '../constants';
 import { useThemeProps } from '@mui/system';
 import classNames from 'classnames';
 import { LiveStreamType } from '../types';
 import { useSnackbar } from 'notistack';
 import { FormattedMessage } from 'react-intl';
+import EventImage from '../../../assets/liveStream/event';
+import LiveImage from '../../../assets/liveStream/live';
+import { LiveStreamApiClient } from '@selfcommunity/api-services';
+import { WARNING_THRESHOLD_EXPIRING_SOON } from '../../LiveStreamRoom/constants';
+export const PREFIX = 'SCLiveStreamSelector';
 const classes = {
     root: `${PREFIX}-root`,
+    warning: `${PREFIX}-warning`,
     options: `${PREFIX}-options`,
     actions: `${PREFIX}-actions`
 };
 const Root = styled(Container, {
     name: PREFIX,
     slot: 'Root'
-})(({ theme }) => ({
-    [`& .${classes.options}`]: {
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-        [theme.breakpoints.down('sm')]: {
-            display: 'block'
-        },
-        '& > div': {
-            width: '290px',
-            [theme.breakpoints.down('sm')]: {
-                margin: '0px auto',
-                marginBottom: theme.spacing(2)
-            }
-        }
-    },
-    [`& .${classes.actions}`]: {
-        display: 'flex',
-        justifyContent: 'flex-end',
-        alignItems: 'flex-end',
-        marginTop: theme.spacing(4)
-    }
-}));
+})(({ theme }) => ({}));
 // Styled components
 const OptionCard = styled(Paper, {
+    name: PREFIX,
+    slot: 'optionCardRoot',
     shouldForwardProp: (prop) => prop !== 'selected'
-})(({ theme, selected }) => ({
-    maxWidth: 300,
-    height: 350,
-    padding: theme.spacing(3),
-    margin: theme.spacing(0, 3),
-    cursor: 'pointer',
-    transition: theme.transitions.create(['background-color', 'box-shadow'], {
-        duration: theme.transitions.duration.short
-    }),
-    backgroundColor: selected ? theme.palette.grey[100] : theme.palette.background.paper,
-    '&:hover': {
-        backgroundColor: theme.palette.grey[50],
-        boxShadow: theme.shadows[2]
-    },
-    border: `1px solid ${theme.palette.divider}`,
-    [`& > div`]: {
-        display: 'flex',
-        justifyContent: 'space-between',
-        alignItems: 'center',
-        marginBottom: 2,
-        maxWidth: '300px'
-    },
-    [`& ul`]: {
-        marginTop: theme.spacing(2),
-        padding: 0,
-        listStyle: 'none'
-    }
-}));
-const RadioIndicator = styled(Radio, {
-// shouldForwardProp: (prop) => prop !== 'selected'
-})(({ theme, selected }) => ({
-/* width: 16,
-height: 16,
-borderRadius: '50%',
-border: `2px solid ${selected ? theme.palette.secondary.main : theme.palette.grey[300]}`,
-backgroundColor: selected ? theme.palette.secondary.main : 'transparent',
-transition: theme.transitions.create(['border-color', 'background-color'], {
-  duration: theme.transitions.duration.shortest
-}) */
-}));
-const FeatureItem = styled(Box)(({ theme }) => ({
-    display: 'flex',
-    alignItems: 'flex-start',
-    gap: theme.spacing(1.5),
-    marginBottom: theme.spacing(2),
-    '&:last-child': {
-        marginBottom: 0
-    }
-}));
+})(({ theme, selected }) => ({}));
+const FeatureItem = styled(Box, {
+    name: PREFIX,
+    slot: 'featureItemRoot'
+})(({ theme }) => ({}));
 /**
  *> API documentation for the Community-JS LiveStreamSelector component. Learn about the available props and the CSS API.
  *
@@ -123,9 +64,11 @@ export default function LiveStreamSelector(inProps) {
     const { enqueueSnackbar } = useSnackbar();
     // STATE
     const [selectedOption, setSelectedOption] = useState(liveSelected);
+    const [timeRemaining, setTimeRemaining] = useState(null);
     const options = [
         {
             title: 'Schedule a live event',
+            image: EventImage,
             type: LiveStreamType.EVENT_LIVE,
             features: [
                 'Schedule a live room or stream in your event space',
@@ -137,6 +80,7 @@ export default function LiveStreamSelector(inProps) {
         },
         {
             title: 'Start a live stream',
+            image: LiveImage,
             type: LiveStreamType.DIRECT_LIVE,
             features: [
                 'Best for webinars, Q&As, AMAs, and for presentations',
@@ -162,13 +106,25 @@ export default function LiveStreamSelector(inProps) {
             onNext && onNext(selectedOption);
         }
     };
-    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className), maxWidth: "lg", sx: { py: 4 } }, { children: [_jsx(Typography, Object.assign({ variant: "h4", component: "h1", align: "center", gutterBottom: true, sx: { mb: 4, fontWeight: 500 } }, { children: "How do you want to go live?" })), _jsx(Box, Object.assign({ className: classes.options }, { children: options.map((option, index) => (_jsxs(OptionCard, Object.assign({ selected: selectedOption === option.type, onClick: () => handleOptionSelect(option.type), elevation: 0, role: "button", tabIndex: 0, onKeyDown: (e) => {
+    const fetchLivestreamStatus = () => {
+        LiveStreamApiClient.getMonthlyDuration()
+            .then((r) => {
+            setTimeRemaining(r.remaining_minutes);
+        })
+            .catch((error) => {
+            console.error('Error fetching live status:', error);
+        });
+    };
+    useEffect(() => {
+        fetchLivestreamStatus();
+    }, []);
+    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className), maxWidth: "lg", sx: { py: 4 } }, { children: [_jsx(Typography, Object.assign({ variant: "h4", component: "h1", align: "center", gutterBottom: true, sx: { mb: 4, fontWeight: 500 } }, { children: "How do you want to go live?" })), _jsx(Box, Object.assign({ className: classes.warning }, { children: _jsx(Alert, Object.assign({ variant: "filled", severity: "warning" }, { children: timeRemaining <= 1 ? (_jsx(FormattedMessage, { id: "ui.liveStreamRoom.selector.warningMinutesExausted", defaultMessage: "ui.liveStreamRoom.selector.warningMinutesExausted" })) : timeRemaining <= WARNING_THRESHOLD_EXPIRING_SOON ? (_jsx(FormattedMessage, { id: "ui.liveStreamRoom.selector.warningRemainingMinutes", defaultMessage: "ui.liveStreamRoom.selector.warningRemainingMinutes", values: { minutes: timeRemaining } })) : null })) })), _jsx(Box, Object.assign({ className: classes.options }, { children: options.map((option, index) => (_jsxs(OptionCard, Object.assign({ selected: selectedOption === option.type, onClick: () => handleOptionSelect(option.type), elevation: 0, role: "button", tabIndex: 0, onKeyDown: (e) => {
                         if (e.key === 'Enter' || e.key === ' ') {
                             handleOptionSelect(index);
                             e.preventDefault();
                         }
-                    }, theme: undefined }, { children: [_jsxs(Box, { children: [_jsx(Typography, Object.assign({ variant: "h6", component: "h2", sx: { fontWeight: 500 } }, { children: option.title })), _jsx(Radio, { checked: selectedOption === option.type })] }), _jsx(Box, Object.assign({ component: "ul" }, { children: option.features.map((feature, featureIndex) => {
+                    }, theme: undefined }, { children: [_jsxs(Box, { children: [_jsx(Typography, Object.assign({ variant: "h6", component: "h2", sx: { fontWeight: 500 } }, { children: option.title })), _jsx(Radio, { checked: selectedOption === option.type })] }), _jsx("img", { src: option.image, alt: "logo" }), _jsx(Box, Object.assign({ component: "ul" }, { children: option.features.map((feature, featureIndex) => {
                                 const _Icon = option.icons[featureIndex];
                                 return (_jsxs(FeatureItem, Object.assign({ component: "li" }, { children: [_Icon, _jsx(Typography, Object.assign({ variant: "body2", color: "text.secondary", sx: { flex: 1 } }, { children: feature }))] }), featureIndex));
-                            }) }))] }), index))) })), _jsx(Box, Object.assign({ className: classes.actions }, { children: _jsx(Button, Object.assign({ disabled: !selectedOption, variant: "contained", onClick: handleNext, color: "secondary" }, { children: "Next" })) }))] })));
+                            }) }))] }), index))) })), _jsx(Box, Object.assign({ className: classes.actions }, { children: _jsx(Button, Object.assign({ disabled: !selectedOption || !timeRemaining, variant: "contained", onClick: handleNext, color: "secondary" }, { children: "Next" })) }))] })));
 }

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

@@ -52,7 +52,7 @@ export default function LiveStreamSettingsForm(inProps) {
     /**
      * Renders root object
      */
-    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: [_jsxs(Stack, Object.assign({ direction: "row", spacing: 1, alignItems: "center" }, { children: [_jsx(Switch, { className: classes.switch, checked: Boolean(settings === null || settings === void 0 ? void 0 : settings.muteParticipants), onChange: () => onChange(Object.assign(Object.assign(Object.assign({}, LIVESTREAM_DEFAULT_SETTINGS), settings), { ['muteParticipants']: !(settings === null || settings === void 0 ? void 0 : settings.muteParticipants) })) }), _jsx(Typography, Object.assign({ className: classes.switchLabel }, { children: _jsx(FormattedMessage, { id: "ui.liveStreamForm.muteParticipants", defaultMessage: "ui.liveStreamForm.muteParticipants" }) }))] })), _jsxs(Stack, Object.assign({ direction: "row", spacing: 1, alignItems: "center" }, { children: [_jsx(Switch, { className: classes.switch, checked: Boolean(settings === null || settings === void 0 ? void 0 : settings.disableVideo), onChange: () => onChange(Object.assign(Object.assign(Object.assign({}, LIVESTREAM_DEFAULT_SETTINGS), settings), { ['disableVideo']: !(settings === null || settings === void 0 ? void 0 : settings.disableVideo) })) }), _jsx(Typography, Object.assign({ className: classes.switchLabel }, { children: _jsx(FormattedMessage, { id: "ui.liveStreamForm.disableVideo", defaultMessage: "ui.liveStreamForm.disableVideo" }) }))] })), _jsxs(Stack, Object.assign({ direction: "row", spacing: 1, alignItems: "center" }, { children: [_jsx(Switch, { className: classes.switch, checked: Boolean(settings === null || settings === void 0 ? void 0 : settings.disableChat), onChange: () => onChange(Object.assign(Object.assign(Object.assign({}, LIVESTREAM_DEFAULT_SETTINGS), settings), { ['disableChat']: !(settings === null || settings === void 0 ? void 0 : settings.disableChat) })) }), _jsx(Typography, Object.assign({ className: classes.switchLabel }, { children: _jsx(FormattedMessage, { id: "ui.liveStreamForm.disableChat", defaultMessage: "ui.liveStreamForm.disableChat" }) }))] })), _jsxs(Stack, Object.assign({ direction: "row", spacing: 1, alignItems: "center" }, { children: [_jsx(Switch, { className: classes.switch, checked: Boolean(settings === null || settings === void 0 ? void 0 : settings.disableShareScreen), onChange: () => onChange(Object.assign(Object.assign(Object.assign({}, LIVESTREAM_DEFAULT_SETTINGS), settings), { ['disableShareScreen']: !(settings === null || settings === void 0 ? void 0 : settings.disableShareScreen) })) }), _jsx(Typography, Object.assign({ className: classes.switchLabel }, { children: _jsx(FormattedMessage, { id: "ui.liveStreamForm.disableShareScreen", defaultMessage: "ui.liveStreamForm.disableShareScreen" }) }))] })), _jsxs(Stack, Object.assign({ direction: "row", spacing: 1, alignItems: "center" }, { children: [_jsx(Switch, { className: classes.switch, checked: Boolean(settings === null || settings === void 0 ? void 0 : settings.hideParticipantsList), onChange: () => onChange(Object.assign(Object.assign(Object.assign({}, LIVESTREAM_DEFAULT_SETTINGS), settings), { ['hideParticipantsList']: !(settings === null || settings === void 0 ? void 0 : settings.hideParticipantsList) })) }), _jsx(Typography, Object.assign({ className: classes.switchLabel }, { children: _jsx(FormattedMessage, { id: "ui.liveStreamForm.hideParticipantsList", defaultMessage: "ui.liveStreamForm.hideParticipantsList" }) }))] })), _jsxs(Stack, Object.assign({ direction: "row", spacing: 1, alignItems: "center" }, { children: [_jsx(Switch, { className: classes.switch, checked: Boolean(settings === null || settings === void 0 ? void 0 : settings.automaticallyNotifyFollowers), onChange: () => onChange(Object.assign(Object.assign(Object.assign({}, LIVESTREAM_DEFAULT_SETTINGS), settings), { ['automaticallyNotifyFollowers']: !(settings === null || settings === void 0 ? void 0 : settings.automaticallyNotifyFollowers) })) }), _jsx(Typography, Object.assign({ className: classes.switchLabel }, { children: _jsx(FormattedMessage, { id: "ui.liveStreamForm.automaticallyNotifyFollowers", defaultMessage: "ui.liveStreamForm.automaticallyNotifyFollowers" }) }))] })), _jsxs(FormControl, Object.assign({ className: classes.accessView }, { children: [_jsx(InputLabel, Object.assign({ id: "viewLabel" }, { children: _jsx(FormattedMessage, { id: "ui.liveStreamForm.view.label", defaultMessage: "ui.liveStreamForm.view.label" }) })), _jsx(Select, Object.assign({ name: "view", label: _jsx(FormattedMessage, { id: "ui.liveStreamForm.view.label", defaultMessage: "ui.liveStreamForm.view.label" }), labelId: "viewLabel", fullWidth: true, value: (_a = settings === null || settings === void 0 ? void 0 : settings.view) !== null && _a !== void 0 ? _a : SCLiveStreamViewType.SPEAKER, onChange: (e) => onChange(Object.assign(Object.assign(Object.assign({}, LIVESTREAM_DEFAULT_SETTINGS), settings), { ['view']: e.target.value })), displayEmpty: true, renderValue: (selected) => {
+    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: [_jsxs(Stack, Object.assign({ direction: "row", spacing: 1, alignItems: "center" }, { children: [_jsx(Switch, { className: classes.switch, checked: Boolean(settings === null || settings === void 0 ? void 0 : settings.muteParticipants), onChange: () => onChange(Object.assign(Object.assign(Object.assign({}, LIVESTREAM_DEFAULT_SETTINGS), settings), { ['muteParticipants']: !(settings === null || settings === void 0 ? void 0 : settings.muteParticipants) })) }), _jsx(Typography, Object.assign({ className: classes.switchLabel }, { children: _jsx(FormattedMessage, { id: "ui.liveStreamForm.muteParticipants", defaultMessage: "ui.liveStreamForm.muteParticipants" }) }))] })), _jsxs(Stack, Object.assign({ direction: "row", spacing: 1, alignItems: "center" }, { children: [_jsx(Switch, { className: classes.switch, checked: Boolean(settings === null || settings === void 0 ? void 0 : settings.disableVideo), onChange: () => onChange(Object.assign(Object.assign(Object.assign({}, LIVESTREAM_DEFAULT_SETTINGS), settings), { ['disableVideo']: !(settings === null || settings === void 0 ? void 0 : settings.disableVideo) })) }), _jsx(Typography, Object.assign({ className: classes.switchLabel }, { children: _jsx(FormattedMessage, { id: "ui.liveStreamForm.disableVideo", defaultMessage: "ui.liveStreamForm.disableVideo" }) }))] })), _jsxs(Stack, Object.assign({ direction: "row", spacing: 1, alignItems: "center" }, { children: [_jsx(Switch, { className: classes.switch, checked: Boolean(settings === null || settings === void 0 ? void 0 : settings.disableChat), onChange: () => onChange(Object.assign(Object.assign(Object.assign({}, LIVESTREAM_DEFAULT_SETTINGS), settings), { ['disableChat']: !(settings === null || settings === void 0 ? void 0 : settings.disableChat) })) }), _jsx(Typography, Object.assign({ className: classes.switchLabel }, { children: _jsx(FormattedMessage, { id: "ui.liveStreamForm.disableChat", defaultMessage: "ui.liveStreamForm.disableChat" }) }))] })), _jsxs(Stack, Object.assign({ direction: "row", spacing: 1, alignItems: "center" }, { children: [_jsx(Switch, { className: classes.switch, checked: Boolean(settings === null || settings === void 0 ? void 0 : settings.disableShareScreen), onChange: () => onChange(Object.assign(Object.assign(Object.assign({}, LIVESTREAM_DEFAULT_SETTINGS), settings), { ['disableShareScreen']: !(settings === null || settings === void 0 ? void 0 : settings.disableShareScreen) })) }), _jsx(Typography, Object.assign({ className: classes.switchLabel }, { children: _jsx(FormattedMessage, { id: "ui.liveStreamForm.disableShareScreen", defaultMessage: "ui.liveStreamForm.disableShareScreen" }) }))] })), _jsxs(Stack, Object.assign({ direction: "row", spacing: 1, alignItems: "center" }, { children: [_jsx(Switch, { className: classes.switch, checked: Boolean(settings === null || settings === void 0 ? void 0 : settings.hideParticipantsList), onChange: () => onChange(Object.assign(Object.assign(Object.assign({}, LIVESTREAM_DEFAULT_SETTINGS), settings), { ['hideParticipantsList']: !(settings === null || settings === void 0 ? void 0 : settings.hideParticipantsList) })) }), _jsx(Typography, Object.assign({ className: classes.switchLabel }, { children: _jsx(FormattedMessage, { id: "ui.liveStreamForm.hideParticipantsList", defaultMessage: "ui.liveStreamForm.hideParticipantsList" }) }))] })), _jsxs(Stack, Object.assign({ direction: "row", spacing: 1, alignItems: "center" }, { children: [_jsx(Switch, { className: classes.switch, checked: Boolean(settings === null || settings === void 0 ? void 0 : settings.automaticallyNotifyFollowers), onChange: () => onChange(Object.assign(Object.assign(Object.assign({}, LIVESTREAM_DEFAULT_SETTINGS), settings), { ['automaticallyNotifyFollowers']: !(settings === null || settings === void 0 ? void 0 : settings.automaticallyNotifyFollowers) })) }), _jsx(Typography, Object.assign({ className: classes.switchLabel }, { children: _jsx(FormattedMessage, { id: "ui.liveStreamForm.automaticallyNotifyFollowers", defaultMessage: "ui.liveStreamForm.automaticallyNotifyFollowers" }) }))] })), _jsxs(Stack, Object.assign({ direction: "row", spacing: 1, alignItems: "center" }, { children: [_jsx(Switch, { className: classes.switch, checked: Boolean(settings === null || settings === void 0 ? void 0 : settings.showInProfile), onChange: () => onChange(Object.assign(Object.assign(Object.assign({}, LIVESTREAM_DEFAULT_SETTINGS), settings), { ['showInProfile']: !(settings === null || settings === void 0 ? void 0 : settings.showInProfile) })) }), _jsx(Typography, Object.assign({ className: classes.switchLabel }, { children: _jsx(FormattedMessage, { id: "ui.liveStreamForm.showInProfile", defaultMessage: "ui.liveStreamForm.showInProfile" }) }))] })), _jsxs(FormControl, Object.assign({ className: classes.accessView }, { children: [_jsx(InputLabel, Object.assign({ id: "viewLabel" }, { children: _jsx(FormattedMessage, { id: "ui.liveStreamForm.view.label", defaultMessage: "ui.liveStreamForm.view.label" }) })), _jsx(Select, Object.assign({ name: "view", label: _jsx(FormattedMessage, { id: "ui.liveStreamForm.view.label", defaultMessage: "ui.liveStreamForm.view.label" }), labelId: "viewLabel", fullWidth: true, value: (_a = settings === null || settings === void 0 ? void 0 : settings.view) !== null && _a !== void 0 ? _a : SCLiveStreamViewType.SPEAKER, onChange: (e) => onChange(Object.assign(Object.assign(Object.assign({}, LIVESTREAM_DEFAULT_SETTINGS), settings), { ['view']: e.target.value })), displayEmpty: true, renderValue: (selected) => {
                             return (_jsxs(_Fragment, { children: [_jsx(Icon, Object.assign({ className: classes.accessViewIcon }, { children: selected === SCLiveStreamViewType.SPEAKER ? 'upload' : 'category' })), "\u00A0", _jsx(FormattedMessage, { id: `ui.liveStreamForm.view.${selected}`, defaultMessage: `ui.liveStreamForm.view.${selected}` })] }));
                         } }, { children: Object.values(SCLiveStreamViewType).map((f) => (_jsx(MenuItem, Object.assign({ value: f }, { children: _jsxs(Box, { children: [_jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsxs("b", { children: [_jsx(Icon, Object.assign({ className: classes.accessViewIcon }, { children: f === SCLiveStreamViewType.SPEAKER ? 'upload' : 'category' })), "\u00A0", _jsx(FormattedMessage, { id: `ui.liveStreamForm.view.${f}`, defaultMessage: `ui.liveStreamForm.view.${f}` })] }) })), _jsx(Typography, { children: _jsx(FormattedMessage, { id: `ui.liveStreamForm.view.${f}.description`, defaultMessage: `ui.liveStreamForm.view.${f}.description` }) })] }) }), f))) }))] }))] })));
 }

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

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

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

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

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

@@ -17,6 +17,8 @@ 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';
 const classes = {
     root: `${PREFIX}-root`,
     content: `${PREFIX}-content`,
@@ -36,6 +38,11 @@ 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.
  *
@@ -127,7 +134,7 @@ export default function LiveStreamRoom(inProps) {
                         _msg = intl.formatMessage({ id: _error, defaultMessage: _error });
                     }
                     setError(_msg);
-                    enqueueSnackbar(_msg, { variant: 'error', autoHideDuration: 5000 });
+                    enqueueSnackbar(_msg, { variant: 'error' });
                 }
                 setLoading(false);
             });
@@ -160,8 +167,8 @@ export default function LiveStreamRoom(inProps) {
     /**
      * Renders root object
      */
-    return (_jsx(Root, Object.assign({ id: id, className: classNames(classes.root, className) }, rest, { children: scLiveStream.closed_at_by_host ? (_jsxs(Box, Object.assign({ className: classes.endConferenceWrap }, { children: [_jsx(Typography, Object.assign({ variant: "h5" }, { children: _jsx(FormattedMessage, { id: "ui.liveStreamRoom.conference.closed", defaultMessage: "ui.liveStreamRoom.conference.closed" }) })), _jsx(Button, Object.assign({ variant: "contained", color: "secondary", component: Link, to: '/', className: classes.btnBackHome }, { children: _jsx(FormattedMessage, { id: "ui.liveStreamRoom.button.backHome", defaultMessage: "ui.liveStreamRoom.button.backHome" }) }))] }))) : (_jsx(Box, Object.assign({ className: classes.content, "data-lk-theme": "default" }, { children: connectionDetails === undefined || preJoinChoices === undefined ? (_jsxs(_Fragment, { children: [startPrejoinContent && _jsx(Box, Object.assign({ className: classes.startPrejoinContent }, { children: startPrejoinContent })), (scLiveStream === null || scLiveStream === void 0 ? void 0 : scLiveStream.title) && (_jsx(Typography, Object.assign({ component: 'div', variant: "h5", className: classes.title }, { children: scLiveStream === null || scLiveStream === void 0 ? void 0 : scLiveStream.title }))), (scLiveStream === null || scLiveStream === void 0 ? void 0 : scLiveStream.description) && (_jsx(Typography, Object.assign({ component: 'div', variant: "body1", className: classes.description }, { children: scLiveStream === null || scLiveStream === void 0 ? void 0 : scLiveStream.description }))), _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 }) })), 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" }) }))] }))), error && (_jsx(Box, Object.assign({ className: classes.prejoinLoader }, { children: _jsx(Typography, Object.assign({ component: 'div', variant: "body2" }, { children: error })) })))] })), _jsxs(Box, Object.assign({ className: classes.endPrejoinContent }, { children: [Boolean(scUserContext.user &&
+    return (_jsx(Root, Object.assign({ id: id, className: classNames(classes.root, className) }, rest, { children: scLiveStream.closed_at_by_host ? (_jsx(DialogRoot, Object.assign({ open: true, maxWidth: 'md', fullWidth: true }, { children: _jsxs(DialogContent, Object.assign({ className: classes.endConferenceWrap }, { children: [_jsx(Typography, Object.assign({ variant: "h5" }, { children: _jsx(FormattedMessage, { id: "ui.liveStreamRoom.conference.closed", defaultMessage: "ui.liveStreamRoom.conference.closed" }) })), _jsx(Button, Object.assign({ variant: "contained", color: "secondary", component: Link, to: '/', className: classes.btnBackHome }, { children: _jsx(FormattedMessage, { id: "ui.liveStreamRoom.button.backHome", defaultMessage: "ui.liveStreamRoom.button.backHome" }) }))] })) }))) : (_jsx(Box, Object.assign({ className: classes.content, "data-lk-theme": "default" }, { children: connectionDetails === undefined || preJoinChoices === undefined ? (_jsxs(_Fragment, { children: [startPrejoinContent && _jsx(Box, Object.assign({ className: classes.startPrejoinContent }, { children: startPrejoinContent })), (scLiveStream === null || scLiveStream === void 0 ? void 0 : scLiveStream.title) && (_jsx(Typography, Object.assign({ component: 'div', variant: "h5", className: classes.title }, { children: scLiveStream === null || scLiveStream === void 0 ? void 0 : scLiveStream.title }))), (scLiveStream === null || scLiveStream === void 0 ? void 0 : scLiveStream.description) && (_jsx(Typography, Object.assign({ component: 'div', variant: "body1", className: classes.description }, { children: scLiveStream === null || scLiveStream === void 0 ? void 0 : scLiveStream.description }))), _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 }) })), loading && (_jsxs(Box, Object.assign({ className: classes.prejoinLoader }, { children: [_jsx(CircularProgress, {}), _jsx(Typography, Object.assign({ component: 'div', variant: "body2" }, { children: _jsx(FormattedMessage, { id: "ui.liveStreamRoom.connecting", defaultMessage: "ui.liveStreamRoom.connecting" }) }))] })))] })), _jsxs(Box, Object.assign({ className: classes.endPrejoinContent }, { children: [Boolean(scUserContext.user &&
                                 scUserContext.user.id !== scLiveStream.host.id &&
                                 scLiveStream &&
-                                (((_a = scLiveStream.settings) === null || _a === void 0 ? void 0 : _a.muteParticipants) || (scLiveStream && ((_b = scLiveStream.settings) === null || _b === void 0 ? void 0 : _b.disableVideo)))) && (_jsxs(Stack, Object.assign({ sx: { width: '60%' }, spacing: 1 }, { children: [scLiveStream && ((_c = scLiveStream.settings) === null || _c === void 0 ? void 0 : _c.muteParticipants) && (_jsx(Alert, Object.assign({ variant: "outlined", severity: "info", component: 'div' }, { children: _jsx(FormattedMessage, { id: "ui.liveStreamRoom.hostDisableMicrophone", defaultMessage: "ui.liveStreamRoom.hostDisableMicrophone" }) }))), scLiveStream && ((_d = scLiveStream.settings) === null || _d === void 0 ? void 0 : _d.disableVideo) && (_jsx(Alert, Object.assign({ variant: "outlined", severity: "info" }, { children: _jsx(FormattedMessage, { id: "ui.liveStreamRoom.hostDisableVideo", defaultMessage: "ui.liveStreamRoom.hostDisableVideo" }) })))] }))), 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)) })) }))) }))) })));
+                                (((_a = scLiveStream.settings) === null || _a === void 0 ? void 0 : _a.muteParticipants) || (scLiveStream && ((_b = scLiveStream.settings) === null || _b === void 0 ? void 0 : _b.disableVideo)))) && (_jsxs(Stack, Object.assign({ sx: { width: '60%' }, spacing: 1 }, { children: [scLiveStream && ((_c = scLiveStream.settings) === null || _c === void 0 ? void 0 : _c.muteParticipants) && (_jsx(Alert, Object.assign({ variant: "filled", severity: "info", component: 'div' }, { children: _jsx(FormattedMessage, { id: "ui.liveStreamRoom.hostDisableMicrophone", defaultMessage: "ui.liveStreamRoom.hostDisableMicrophone" }) }))), scLiveStream && ((_d = scLiveStream.settings) === null || _d === void 0 ? void 0 : _d.disableVideo) && (_jsx(Alert, Object.assign({ variant: "filled", severity: "info" }, { children: _jsx(FormattedMessage, { id: "ui.liveStreamRoom.hostDisableVideo", defaultMessage: "ui.liveStreamRoom.hostDisableVideo" }) })))] }))), 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)) })) }))) }))) })));
 }