@selfcommunity/react-ui 0.8.0-live.55 → 0.8.0-live.57

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

@@ -0,0 +1,92 @@
+"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 Skeleton_1 = tslib_1.__importDefault(require("@mui/material/Skeleton"));
+const styles_1 = require("@mui/material/styles");
+const system_1 = require("@mui/system");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const BaseItem_1 = tslib_1.__importDefault(require("../../shared/BaseItem"));
+const liveStream_1 = require("../../types/liveStream");
+const Widget_1 = tslib_1.__importDefault(require("../Widget"));
+const constants_1 = require("./constants");
+const classes = {
+    root: `${constants_1.PREFIX}-skeleton-root`,
+    skeletonDetailRoot: `${constants_1.PREFIX}-skeleton-detail-root`,
+    skeletonPreviewRoot: `${constants_1.PREFIX}-skeleton-preview-root`,
+    skeletonSnippetRoot: `${constants_1.PREFIX}-skeleton-snippet-root`,
+    skeletonDetailCalendar: `${constants_1.PREFIX}-skeleton-detail-calendar`,
+    skeletonDetailContent: `${constants_1.PREFIX}-skeleton-detail-content`,
+    skeletonDetailActions: `${constants_1.PREFIX}-skeleton-detail-actions`,
+    skeletonDetailUser: `${constants_1.PREFIX}-skeleton-detail-user`,
+    skeletonDetailFirstDivider: `${constants_1.PREFIX}-skeleton-detail-first-divider`,
+    skeletonDetailSecondDivider: `${constants_1.PREFIX}-skeleton-detail-second-divider`,
+    skeletonPreviewContent: `${constants_1.PREFIX}-skeleton-preview-content`,
+    skeletonPreviewName: `${constants_1.PREFIX}-skeleton-preview-name`,
+    skeletonPreviewActions: `${constants_1.PREFIX}-skeleton-preview-actions`,
+    skeletonSnippetImage: `${constants_1.PREFIX}-skeleton-snippet-image`,
+    skeletonSnippetAction: `${constants_1.PREFIX}-skeleton-snippet-action`
+};
+const Root = (0, styles_1.styled)(Widget_1.default, {
+    name: constants_1.PREFIX,
+    slot: 'SkeletonRoot'
+})(() => ({}));
+const SkeletonDetailRoot = (0, styles_1.styled)(material_1.Box, {
+    name: constants_1.PREFIX,
+    slot: 'SkeletonDetailRoot'
+})(() => ({}));
+const SkeletonPreviewRoot = (0, styles_1.styled)(material_1.Box, {
+    name: constants_1.PREFIX,
+    slot: 'SkeletonPreviewRoot'
+})(() => ({}));
+const SkeletonSnippetRoot = (0, styles_1.styled)(BaseItem_1.default, {
+    name: constants_1.PREFIX,
+    slot: 'SkeletonSnippetRoot'
+})(() => ({}));
+/**
+ * > API documentation for the Community-JS LiveStream Skeleton component. Learn about the available props and the CSS API.
+
+ #### Import
+
+ ```jsx
+ import {LiveStreamSkeleton} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+
+ The name `SCLiveStream-skeleton-root` can be used when providing style overrides in the theme.
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCLiveStream-skeleton-root|Styles applied to the root element.|
+ |image|.SCLiveStream-skeleton-image|Styles applied to the image element.|
+ |action|.SCLiveStream-skeleton-action|Styles applied to action section.|
+ *
+ */
+function LiveStreamSkeleton(inProps) {
+    // PROPS
+    const props = (0, system_1.useThemeProps)({
+        props: inProps,
+        name: constants_1.PREFIX
+    });
+    const { className, template = liveStream_1.SCLiveStreamTemplateType.SNIPPET, skeletonsAnimation = 'wave', actions } = props, rest = tslib_1.__rest(props, ["className", "template", "skeletonsAnimation", "actions"]);
+    const theme = (0, material_1.useTheme)();
+    /**
+     * Renders liveStream object
+     */
+    let contentObj;
+    if (template === liveStream_1.SCLiveStreamTemplateType.DETAIL) {
+        contentObj = ((0, jsx_runtime_1.jsxs)(SkeletonDetailRoot, Object.assign({ className: classes.skeletonDetailRoot }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ position: "relative" }, { children: [(0, jsx_runtime_1.jsx)(Skeleton_1.default, { variant: "rectangular", animation: skeletonsAnimation, width: "100%", height: "170px" }), (0, jsx_runtime_1.jsx)(Skeleton_1.default, { className: classes.skeletonDetailCalendar, variant: "rounded", animation: skeletonsAnimation, width: "60px", height: "60px" })] })), (0, jsx_runtime_1.jsxs)(material_1.CardContent, Object.assign({ className: classes.skeletonDetailContent }, { children: [(0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: skeletonsAnimation, width: "36%", height: "40px" }), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", alignItems: "center", gap: "8px", marginBottom: "9px" }, { children: [(0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: skeletonsAnimation, variant: "circular", width: "21px", height: "21px" }), (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: skeletonsAnimation, width: "50%", height: "20px" })] })), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", alignItems: "center", gap: "8px", marginBottom: "9px" }, { children: [(0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: skeletonsAnimation, variant: "circular", width: "21px", height: "21px" }), (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: skeletonsAnimation, width: "35%", height: "20px" })] })), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", alignItems: "center", gap: "8px", marginBottom: "14px" }, { children: [(0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: skeletonsAnimation, variant: "circular", width: "21px", height: "21px" }), (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: skeletonsAnimation, width: "27%", height: "20px" })] })), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", gap: "8px", className: classes.skeletonDetailUser }, { children: [(0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: skeletonsAnimation, variant: "circular", width: "36px", height: "36px" }), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ gap: "1px" }, { children: [(0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: skeletonsAnimation, width: "75px", height: "15px" }), (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: skeletonsAnimation, width: "86px", height: "16px" })] }))] })), (0, jsx_runtime_1.jsx)(material_1.Divider, { className: classes.skeletonDetailFirstDivider }), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", gap: "8px", alignItems: "center", height: "28px" }, { children: [(0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: skeletonsAnimation, width: "68px", height: "20px" }), (0, jsx_runtime_1.jsxs)(material_1.AvatarGroup, { children: [(0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: skeletonsAnimation, variant: "circular", width: "21px", height: "21px" }), (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: skeletonsAnimation, variant: "circular", width: "21px", height: "21px" }), (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: skeletonsAnimation, variant: "circular", width: "21px", height: "21px" }), (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: skeletonsAnimation, variant: "circular", width: "21px", height: "21px" })] })] })), (0, jsx_runtime_1.jsx)(material_1.Divider, { className: classes.skeletonDetailSecondDivider })] })), (0, jsx_runtime_1.jsx)(material_1.CardActions, Object.assign({ className: classes.skeletonDetailActions }, { children: actions !== undefined ? actions : (0, jsx_runtime_1.jsx)(Skeleton_1.default, { variant: "rounded", width: 100, height: 30 }) }))] })));
+    }
+    else if (template === liveStream_1.SCLiveStreamTemplateType.PREVIEW) {
+        contentObj = ((0, jsx_runtime_1.jsxs)(SkeletonPreviewRoot, Object.assign({ className: classes.skeletonPreviewRoot }, { children: [(0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ position: "relative" }, { children: (0, jsx_runtime_1.jsx)(Skeleton_1.default, { variant: "rectangular", animation: skeletonsAnimation, width: "100%", height: "80px" }) })), (0, jsx_runtime_1.jsxs)(material_1.CardContent, Object.assign({ className: classes.skeletonPreviewContent }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", alignItems: "center", gap: "8px" }, { children: [(0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: skeletonsAnimation, variant: "circular", width: "21px", height: "21px" }), (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: skeletonsAnimation, width: "50%", height: "20px" })] })), (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: skeletonsAnimation, width: "67%", height: "25px", className: classes.skeletonPreviewName }), (0, jsx_runtime_1.jsx)(material_1.Stack, Object.assign({ direction: "row", alignItems: "center", gap: "8px", marginBottom: "2px" }, { children: (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: skeletonsAnimation, width: "27%", height: "18px" }) })), (0, jsx_runtime_1.jsx)(material_1.Stack, Object.assign({ direction: "row", gap: "8px", alignItems: "center" }, { children: (0, jsx_runtime_1.jsxs)(material_1.AvatarGroup, { children: [(0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: skeletonsAnimation, variant: "circular", width: `${theme.selfcommunity.user.avatar.sizeSmall}px`, height: `${theme.selfcommunity.user.avatar.sizeSmall}px` }), (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: skeletonsAnimation, variant: "circular", width: `${theme.selfcommunity.user.avatar.sizeSmall}px`, height: `${theme.selfcommunity.user.avatar.sizeSmall}px` }), (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: skeletonsAnimation, variant: "circular", width: `${theme.selfcommunity.user.avatar.sizeSmall}px`, height: `${theme.selfcommunity.user.avatar.sizeSmall}px` })] }) }))] })), (0, jsx_runtime_1.jsx)(material_1.CardActions, Object.assign({ className: classes.skeletonPreviewActions }, { children: actions !== undefined ? actions : (0, jsx_runtime_1.jsx)(Skeleton_1.default, { variant: "rounded", width: 100, height: 30 }) }))] })));
+    }
+    else {
+        contentObj = ((0, jsx_runtime_1.jsx)(SkeletonSnippetRoot, { elevation: 0, square: true, disableTypography: true, className: classes.skeletonSnippetRoot, image: (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.skeletonSnippetImage }, { children: [(0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: skeletonsAnimation, variant: "rectangular", width: 100, height: 60 }), " ", (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ fontSize: "large" }, { children: "CalendarIcon" }))] })), primary: (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: skeletonsAnimation, variant: "rectangular", height: 10, width: "40%", style: { marginBottom: 12 } }), secondary: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: skeletonsAnimation, variant: "rectangular", height: 10, width: "60%", style: { marginBottom: 10, marginRight: 5 } }), (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: skeletonsAnimation, variant: "rectangular", height: 10, width: "35%" })] }), actions: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: actions !== undefined ? (actions) : ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", variant: "outlined", disabled: true }, { children: (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: skeletonsAnimation, height: 10, width: 30, style: { marginTop: 5, marginBottom: 5 } }) }))) }) }));
+    }
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className, `${constants_1.PREFIX}-skeleton-${template}`) }, rest, { children: contentObj })));
+}
+exports.default = LiveStreamSkeleton;

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

@@ -0,0 +1 @@
+export declare const PREFIX = "SCLiveStream";

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

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PREFIX = void 0;
+exports.PREFIX = 'SCLiveStream';

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

@@ -0,0 +1,4 @@
+import LiveStream, { LiveStreamProps } from './LiveStream';
+import LiveStreamSkeleton, { LiveStreamSkeletonProps } from './Skeleton';
+export default LiveStream;
+export { LiveStreamProps, LiveStreamSkeleton, LiveStreamSkeletonProps };

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

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

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

@@ -1,5 +1,5 @@
 import { BoxProps } from '@mui/material';
-import { SCLiveStreamType } from '@selfcommunity/types/src/index';
+import { SCLiveStreamType } from '@selfcommunity/types';
 export interface LiveStreamFormProps extends BoxProps {
     /**
      * Overrides or extends the styles applied to the component.

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

@@ -13,7 +13,10 @@ const react_intl_1 = require("react-intl");
 const LiveStream_1 = require("../../constants/LiveStream");
 const constants_1 = require("./constants");
 const UploadEventCover_1 = tslib_1.__importDefault(require("../EventForm/UploadEventCover"));
-const liveStream_1 = require("../../utils/liveStream");
+const LiveStreamFormSettings_1 = tslib_1.__importDefault(require("./LiveStreamFormSettings"));
+const api_services_1 = require("@selfcommunity/api-services");
+const Errors_1 = require("../../constants/Errors");
+const utils_1 = require("@selfcommunity/utils");
 const classes = {
     root: `${constants_1.PREFIX}-root`,
     form: `${constants_1.PREFIX}-form`,
@@ -77,8 +80,6 @@ function LiveStreamForm(inProps) {
         name: constants_1.PREFIX
     });
     const { className, onSuccess, onError, liveStream = null } = props, rest = tslib_1.__rest(props, ["className", "onSuccess", "onError", "liveStream"]);
-    // CONTEXT
-    const scContext = (0, react_core_1.useSCContext)();
     // INTL
     const intl = (0, react_intl_1.useIntl)();
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -87,7 +88,7 @@ function LiveStreamForm(inProps) {
         title: (liveStream === null || liveStream === void 0 ? void 0 : liveStream.title) || '',
         description: (liveStream === null || liveStream === void 0 ? void 0 : liveStream.description) || '',
         slug: (liveStream === null || liveStream === void 0 ? void 0 : liveStream.slug) || '',
-        settings: (liveStream === null || liveStream === void 0 ? void 0 : liveStream.settings) || {},
+        settings: (liveStream === null || liveStream === void 0 ? void 0 : liveStream.settings) || constants_1.LIVESTREAM_DEFAULT_SETTINGS,
         cover: (liveStream === null || liveStream === void 0 ? void 0 : liveStream.cover) || '',
         coverFile: (liveStream === null || liveStream === void 0 ? void 0 : liveStream.cover) || '',
         isSubmitting: false
@@ -120,47 +121,38 @@ function LiveStreamForm(inProps) {
         if (field.coverFile) {
             formData.append('cover', field.coverFile);
         }
-        if (visibilityEnabled) {
-            formData.append('visible', 'true');
-        }
         formData.append('title', field.title);
         formData.append('description', field.description);
-        // TODO: for testing
-        setTimeout(() => {
-            onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess({ roomName: (0, liveStream_1.generateRoomId)() });
-            setField((prev) => (Object.assign(Object.assign({}, prev), { ['isSubmitting']: false })));
-        }, 1000);
-        /*
-        let eventService: Promise<SCEventType>;
+        formData.append('slug', field.slug);
+        formData.append('settings', JSON.stringify(Object.assign(Object.assign({}, field.settings), constants_1.LIVESTREAM_DEFAULT_SETTINGS)));
+        let liveStreamService;
         if (liveStream) {
-          eventService = EventService.updateEvent(liveStream.id, formData as unknown as SCEventType, {headers: {'Content-Type': 'multipart/form-data'}});
-        } else {
-          eventService = EventService.createEvent(formData, {headers: {'Content-Type': 'multipart/form-data'}});
+            liveStreamService = api_services_1.LiveStreamService.update(liveStream.id, formData, {
+                headers: { 'Content-Type': 'multipart/form-data' }
+            });
+        }
+        else {
+            liveStreamService = api_services_1.LiveStreamService.create(formData, { headers: { 'Content-Type': 'multipart/form-data' } });
         }
-    
-        eventService
-          .then((data) => {
-            setField((prev) => ({...prev, ['isSubmitting']: false}));
-            // onSuccess?.(data);
-          })
-          .catch((e) => {
-            const _error = formatHttpErrorCode(e);
-    
+        liveStreamService
+            .then((data) => {
+            setField((prev) => (Object.assign(Object.assign({}, prev), { ['isSubmitting']: false })));
+            onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess(data);
+        })
+            .catch((e) => {
+            const _error = (0, api_services_1.formatHttpErrorCode)(e);
             // eslint-disable-next-line @typescript-eslint/ban-ts-ignore,@typescript-eslint/ban-ts-comment
             // @ts-ignore
             if (Object.values(_error)[0].error === 'unique') {
-              setError({
-                ...error,
-                ['titleError']: <FormattedMessage id="ui.liveStreamForm.title.error.unique" defaultMessage="ui.liveStreamForm.title.error.unique" />
-              });
-            } else {
-              setError({...error, ..._error});
+                setError(Object.assign(Object.assign({}, error), { ['titleError']: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamForm.title.error.unique", defaultMessage: "ui.liveStreamForm.title.error.unique" }), ['slugError']: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamForm.slug.error.unique", defaultMessage: "ui.liveStreamForm.slug.error.unique" }) }));
+            }
+            else {
+                setError(Object.assign(Object.assign({}, error), _error));
             }
-    
-            setField((prev) => ({...prev, ['isSubmitting']: false}));
-            Logger.error(SCOPE_SC_UI, e);
-            onError?.(e);
-          }); */
+            setField((prev) => (Object.assign(Object.assign({}, prev), { ['isSubmitting']: false })));
+            utils_1.Logger.error(Errors_1.SCOPE_SC_UI, e);
+            onError === null || onError === void 0 ? void 0 : onError(e);
+        });
     }, [field, privateEnabled, visibilityEnabled, onSuccess, onError]);
     const handleChange = (0, react_1.useCallback)((event) => {
         const { name, value } = event.target;
@@ -170,6 +162,9 @@ function LiveStreamForm(inProps) {
             setError(error);
         }
     }, [error]);
+    const handleChangeSettings = (0, react_1.useCallback)((data) => {
+        setField((prev) => (Object.assign(Object.assign({}, prev), { settings: data })));
+    }, [setField]);
     /**
      * Renders root object
      */
@@ -179,7 +174,7 @@ function LiveStreamForm(inProps) {
                             endAdornment: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: LiveStream_1.LIVE_STREAM_SLUG_MAX_LENGTH - field.title.length }))
                         }, error: Boolean(field.slug.length > LiveStream_1.LIVE_STREAM_SLUG_MAX_LENGTH) || Boolean(error['slugError']), helperText: field.title.length > LiveStream_1.LIVE_STREAM_SLUG_MAX_LENGTH ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamForm.slug.error.maxLength", defaultMessage: "ui.liveStreamForm.slug.error.maxLength" })) : error['slugError'] ? (error['slugError']) : null }), (0, jsx_runtime_1.jsx)(material_1.TextField, { multiline: true, rows: 4, className: classes.description, placeholder: `${intl.formatMessage(messages.description)}`, margin: "normal", value: field.description, name: "description", onChange: handleChange, InputProps: {
                             endAdornment: ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: ((_a = field.description) === null || _a === void 0 ? void 0 : _a.length) ? LiveStream_1.LIVE_STREAM_DESCRIPTION_MAX_LENGTH - field.description.length : LiveStream_1.LIVE_STREAM_DESCRIPTION_MAX_LENGTH })))
-                        }, error: Boolean(((_b = field.description) === null || _b === void 0 ? void 0 : _b.length) > LiveStream_1.LIVE_STREAM_DESCRIPTION_MAX_LENGTH), helperText: ((_c = field.description) === null || _c === void 0 ? void 0 : _c.length) > LiveStream_1.LIVE_STREAM_DESCRIPTION_MAX_LENGTH ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamForm.description.error.maxLength", defaultMessage: "ui.liveStreamForm.description.error.maxLength" })) : null }), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.actions }, { children: (0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ loading: field.isSubmitting, disabled: !field.title ||
+                        }, error: Boolean(((_b = field.description) === null || _b === void 0 ? void 0 : _b.length) > LiveStream_1.LIVE_STREAM_DESCRIPTION_MAX_LENGTH), helperText: ((_c = field.description) === null || _c === void 0 ? void 0 : _c.length) > LiveStream_1.LIVE_STREAM_DESCRIPTION_MAX_LENGTH ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamForm.description.error.maxLength", defaultMessage: "ui.liveStreamForm.description.error.maxLength" })) : null }), (0, jsx_runtime_1.jsx)(LiveStreamFormSettings_1.default, { settings: field.settings, onChange: handleChangeSettings }), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.actions }, { children: (0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ loading: field.isSubmitting, disabled: !field.title ||
                                 Object.keys(error).length !== 0 ||
                                 field.title.length > LiveStream_1.LIVE_STREAM_TITLE_MAX_LENGTH ||
                                 field.description.length > LiveStream_1.LIVE_STREAM_DESCRIPTION_MAX_LENGTH, variant: "contained", onClick: handleSubmit, color: "secondary" }, { children: liveStream ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamForm.button.edit", defaultMessage: "ui.liveStreamForm.button.edit" })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamForm.button.create", defaultMessage: "ui.liveStreamForm.button.create" })) })) }))] }))] })));

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

@@ -0,0 +1,46 @@
+import { BoxProps } from '@mui/material';
+export declare const PREFIX = "SCLiveStreamFormSettings";
+export interface LiveStreamFormSettingsProps extends BoxProps {
+    /**
+     * Overrides or extends the styles applied to the component.
+     * @default null
+     */
+    className?: string;
+    /**
+     * Event Object
+     * @default null
+     */
+    settings?: Record<string, any>;
+    /**
+     * onChange callback
+     * @param data
+     */
+    onChange?: (data: any) => void;
+    /**
+     * Any other properties
+     */
+    [p: string]: any;
+}
+/**
+ *> API documentation for the Community-JS LiveStreamSettingsForm component. Learn about the available props and the CSS API.
+ *
+ #### Import
+ ```jsx
+ import {LiveStreamSettingsForm} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+ The name `LiveStreamSettingsForm` can be used when providing style overrides in the theme.
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCLiveStreamForm-root|Styles applied to the root element.|
+ |switch|.SCLiveStreamForm-switch|Styles applied to the switch element.|
+ |switchLabel|.SCLiveStreamForm-switch-label|Styles applied to the switchLabel element.|
+ |accessView|.SCLiveStreamForm-access-view|Styles applied to the access view.|
+
+ * @param inProps
+ */
+export default function LiveStreamSettingsForm(inProps: LiveStreamFormSettingsProps): JSX.Element;

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

@@ -0,0 +1,61 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PREFIX = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const styles_1 = require("@mui/material/styles");
+const system_1 = require("@mui/system");
+const types_1 = require("@selfcommunity/types");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const react_intl_1 = require("react-intl");
+exports.PREFIX = 'SCLiveStreamFormSettings';
+const classes = {
+    root: `${exports.PREFIX}-root`,
+    switch: `${exports.PREFIX}-switch`,
+    switchLabel: `${exports.PREFIX}-switch-Label`,
+    accessView: `${exports.PREFIX}-access-view`,
+    accessViewIcon: `${exports.PREFIX}-access-view-icon`
+};
+const Root = (0, styles_1.styled)(material_1.Box, {
+    name: exports.PREFIX,
+    slot: 'Root'
+})(({ theme }) => ({}));
+/**
+ *> API documentation for the Community-JS LiveStreamSettingsForm component. Learn about the available props and the CSS API.
+ *
+ #### Import
+ ```jsx
+ import {LiveStreamSettingsForm} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+ The name `LiveStreamSettingsForm` can be used when providing style overrides in the theme.
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCLiveStreamForm-root|Styles applied to the root element.|
+ |switch|.SCLiveStreamForm-switch|Styles applied to the switch element.|
+ |switchLabel|.SCLiveStreamForm-switch-label|Styles applied to the switchLabel element.|
+ |accessView|.SCLiveStreamForm-access-view|Styles applied to the access view.|
+
+ * @param inProps
+ */
+function LiveStreamSettingsForm(inProps) {
+    var _a;
+    //PROPS
+    const props = (0, system_1.useThemeProps)({
+        props: inProps,
+        name: exports.PREFIX
+    });
+    const { className, settings = {}, onChange } = props, rest = tslib_1.__rest(props, ["className", "settings", "onChange"]);
+    /**
+     * Renders root object
+     */
+    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", spacing: 1, alignItems: "center" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Switch, { className: classes.switch, checked: Boolean(settings === null || settings === void 0 ? void 0 : settings.muteParticipant), onChange: () => onChange(Object.assign(Object.assign({}, settings), { ['muteParticipant']: !(settings === null || settings === void 0 ? void 0 : settings.muteParticipant) })) }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.switchLabel }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamForm.muteParticipant", defaultMessage: "ui.liveStreamForm.muteParticipant" }) }))] })), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", spacing: 1, alignItems: "center" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Switch, { className: classes.switch, checked: Boolean(settings === null || settings === void 0 ? void 0 : settings.hideParticipantList), onChange: () => onChange(Object.assign(Object.assign({}, settings), { ['hideParticipantList']: !(settings === null || settings === void 0 ? void 0 : settings.hideParticipantList) })) }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.switchLabel }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamForm.hideParticipantList", defaultMessage: "ui.liveStreamForm.hideParticipantList" }) }))] })), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", spacing: 1, alignItems: "center" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Switch, { className: classes.switch, checked: Boolean(settings === null || settings === void 0 ? void 0 : settings.automaticallyNotifyFollowers), onChange: () => onChange(Object.assign(Object.assign({}, settings), { ['automaticallyNotifyFollowers']: !(settings === null || settings === void 0 ? void 0 : settings.automaticallyNotifyFollowers) })) }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.switchLabel }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamForm.automaticallyNotifyFollowers", defaultMessage: "ui.liveStreamForm.automaticallyNotifyFollowers" }) }))] })), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", spacing: 1, alignItems: "center" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Switch, { className: classes.switch, checked: Boolean(settings === null || settings === void 0 ? void 0 : settings.disableVideo), onChange: () => onChange(Object.assign(Object.assign({}, settings), { ['disableVideo']: !(settings === null || settings === void 0 ? void 0 : settings.disableVideo) })) }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.switchLabel }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamForm.disableVideo", defaultMessage: "ui.liveStreamForm.disableVideo" }) }))] })), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", spacing: 1, alignItems: "center" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Switch, { className: classes.switch, checked: Boolean(settings === null || settings === void 0 ? void 0 : settings.disableChat), onChange: () => onChange(Object.assign(Object.assign({}, settings), { ['disableChat']: !(settings === null || settings === void 0 ? void 0 : settings.disableChat) })) }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.switchLabel }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamForm.disableChat", defaultMessage: "ui.liveStreamForm.disableChat" }) }))] })), (0, jsx_runtime_1.jsxs)(material_1.FormControl, Object.assign({ className: classes.accessView }, { children: [(0, jsx_runtime_1.jsx)(material_1.InputLabel, Object.assign({ id: "viewLabel" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamForm.view.label", defaultMessage: "ui.liveStreamForm.view.label" }) })), (0, jsx_runtime_1.jsx)(material_1.Select, Object.assign({ name: "view", label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamForm.view.label", defaultMessage: "ui.liveStreamForm.view.label" }), labelId: "viewLabel", fullWidth: true, value: (_a = settings === null || settings === void 0 ? void 0 : settings.view) !== null && _a !== void 0 ? _a : types_1.SCLiveStreamViewType.SPEAKER, onChange: (e) => onChange(Object.assign(Object.assign({}, settings), { ['view']: e.target.value })), displayEmpty: true, renderValue: (selected) => {
+                            return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ className: classes.accessViewIcon }, { children: selected === types_1.SCLiveStreamViewType.SPEAKER ? 'upload' : 'category' })), "\u00A0", (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.liveStreamForm.view.${selected}`, defaultMessage: `ui.liveStreamForm.view.${selected}` })] }));
+                        } }, { children: Object.values(types_1.SCLiveStreamViewType).map((f) => ((0, jsx_runtime_1.jsx)(material_1.MenuItem, Object.assign({ value: f }, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: (0, jsx_runtime_1.jsxs)("b", { children: [(0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ className: classes.accessViewIcon }, { children: f === types_1.SCLiveStreamViewType.SPEAKER ? 'upload' : 'category' })), "\u00A0", (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.liveStreamForm.view.${f}`, defaultMessage: `ui.liveStreamForm.view.${f}` })] }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.liveStreamForm.view.${f}.description`, defaultMessage: `ui.liveStreamForm.view.${f}.description` }) })] }) }), f))) }))] }))] })));
+}
+exports.default = LiveStreamSettingsForm;

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

@@ -1 +1,8 @@
 export declare const PREFIX = "SCLiveStreamForm";
+export declare const LIVESTREAM_DEFAULT_SETTINGS: {
+    muteParticipant: boolean;
+    hideParticipantList: boolean;
+    automaticallyNotifyFollowers: boolean;
+    disableVideo: boolean;
+    disableChat: boolean;
+};

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

@@ -1,4 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.PREFIX = void 0;
+exports.LIVESTREAM_DEFAULT_SETTINGS = exports.PREFIX = void 0;
 exports.PREFIX = 'SCLiveStreamForm';
+exports.LIVESTREAM_DEFAULT_SETTINGS = {
+    muteParticipant: true,
+    hideParticipantList: true,
+    automaticallyNotifyFollowers: true,
+    disableVideo: true,
+    disableChat: false
+};

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

@@ -17,9 +17,10 @@ export interface LiveStreamRoomProps extends BoxProps {
      */
     liveStream?: SCLiveStreamType;
     /**
-     * Endpoint livestream access
+     * Id of the liveStream for filter the feed
+     * @default null
      */
-    connectionDetailsEndpoint?: string;
+    liveStreamId?: number;
     /**
      * Element to be inserted before title
      */

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

@@ -13,7 +13,9 @@ const components_react_1 = require("@livekit/components-react");
 const react_1 = require("react");
 const LiveStreamVideoConference_1 = tslib_1.__importDefault(require("./LiveStreamVideoConference"));
 require("@livekit/components-styles");
-const liveStream_1 = require("../../utils/liveStream");
+const api_services_1 = require("@selfcommunity/api-services");
+const utils_1 = require("@selfcommunity/utils");
+const Errors_1 = require("../../constants/Errors");
 const classes = {
     root: `${constants_1.PREFIX}-root`,
     content: `${constants_1.PREFIX}-content`,
@@ -63,35 +65,23 @@ function LiveStreamRoom(inProps) {
         props: inProps,
         name: constants_1.PREFIX
     });
-    const { className, liveStream = null, showPrejoinTitle = true, showPrejoinDescription = false, startPrejoinContent, endPrejoinContent, connectionDetailsEndpoint, presetConnectionDetails, presetPreJoinChoices, LiveStreamVideoConferenceComponentProps = {} } = props, rest = tslib_1.__rest(props, ["className", "liveStream", "showPrejoinTitle", "showPrejoinDescription", "startPrejoinContent", "endPrejoinContent", "connectionDetailsEndpoint", "presetConnectionDetails", "presetPreJoinChoices", "LiveStreamVideoConferenceComponentProps"]);
+    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 = {} } = 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 { preferences, features } = (0, react_core_1.useSCPreferences)();
-    // INTL
-    const intl = (0, react_intl_1.useIntl)();
     // 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 preJoinDefaults = (0, react_1.useMemo)(() => {
-        var _a;
+        var _a, _b, _c, _d, _e;
         return {
             username: ((_a = scUserContext.user) === null || _a === void 0 ? void 0 : _a.username) || '',
-            videoEnabled: true,
-            audioEnabled: true
+            videoEnabled: (_c = (_b = scLiveStream === null || scLiveStream === void 0 ? void 0 : scLiveStream.settings) === null || _b === void 0 ? void 0 : _b.disableVideo) !== null && _c !== void 0 ? _c : true,
+            audioEnabled: (_e = (_d = scLiveStream === null || scLiveStream === void 0 ? void 0 : scLiveStream.settings) === null || _d === void 0 ? void 0 : _d.muteParticipant) !== null && _e !== void 0 ? _e : true
         };
-    }, [scUserContext.user]);
+    }, [scUserContext.user, scLiveStream]);
     const [connectionDetails, setConnectionDetails] = (0, react_1.useState)(presetConnectionDetails);
-    const liveStreamEnabled = true;
-    /* 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 canCreateLiveStream = (0, react_1.useMemo)(() => true /* scUserContext?.user?.permission?.create_livestream */, [(_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.permission]);
+    const canCreateLiveStream = (0, react_1.useMemo)(() => { var _a, _b; return (_b = (_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.permission) === null || _b === void 0 ? void 0 : _b.create_live_stream; }, [(_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.permission]);
     const toggleAttrDisabledPrejoinActions = (0, react_1.useCallback)((disabled) => {
         const container = document.querySelector('.lk-prejoin');
         if (container) {
@@ -108,25 +98,21 @@ function LiveStreamRoom(inProps) {
      * Handle PreJoin Submit
      */
     const handlePreJoinSubmit = (0, react_1.useCallback)((values) => tslib_1.__awaiter(this, void 0, void 0, function* () {
-        var _b;
-        // eslint-disable-next-line no-constant-condition
-        if ((liveStream || true) && connectionDetailsEndpoint) {
+        if (scLiveStream) {
             setLoading(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((e) => {
+                utils_1.Logger.error(Errors_1.SCOPE_SC_UI, e);
+            });
             toggleAttrDisabledPrejoinActions(true);
-            setPreJoinChoices(values);
-            const url = new URL(connectionDetailsEndpoint, window.location.origin);
-            url.searchParams.append('roomName', liveStream.roomName || (0, liveStream_1.generateRoomId)());
-            url.searchParams.append('participantName', (_b = scUserContext.user) === null || _b === void 0 ? void 0 : _b.username);
-            /* if (liveStream && liveStream.region) {
-              url.searchParams.append('region', liveStream.region);
-            } */
-            const connectionDetailsResp = yield fetch(url.toString());
-            const connectionDetailsData = yield connectionDetailsResp.json();
-            setConnectionDetails(connectionDetailsData);
-            toggleAttrDisabledPrejoinActions(false);
-            setLoading(false);
         }
-    }), [scUserContext.user, connectionDetailsEndpoint, setPreJoinChoices, setConnectionDetails]);
+    }), [scUserContext.user, setPreJoinChoices, setConnectionDetails, scLiveStream]);
     /**
      * Handle PreJoin Error
      */
@@ -134,12 +120,12 @@ function LiveStreamRoom(inProps) {
     /**
      * User must be authenticated
      */
-    if (!scUserContext.user || !liveStreamEnabled || !canCreateLiveStream) {
+    if ((!scLiveStream && !scUserContext.user) || !canCreateLiveStream) {
         return (0, jsx_runtime_1.jsx)(material_1.CircularProgress, {});
     }
     /**
      * Renders root object
      */
-    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: (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 })), (liveStream === null || liveStream === void 0 ? void 0 : liveStream.title) && ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: 'div', variant: "h5", className: classes.title }, { children: liveStream === null || liveStream === void 0 ? void 0 : liveStream.title }))), (liveStream === null || liveStream === void 0 ? void 0 : liveStream.description) && ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: 'div', variant: "body1", className: classes.description }, { children: liveStream === null || liveStream === void 0 ? void 0 : liveStream.description }))), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: (0, classnames_1.default)(classes.preJoin, { [classes.preJoinLoading]: loading }) }, { children: [(0, jsx_runtime_1.jsx)(components_react_1.PreJoin, { persistUserChoices: true, defaults: preJoinDefaults, onSubmit: handlePreJoinSubmit, onError: handlePreJoinError }), 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.jsx)(material_1.Box, Object.assign({ className: classes.endPrejoinContent }, { children: endPrejoinContent }))] })) : ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.conference }, { children: (0, jsx_runtime_1.jsx)(LiveStreamVideoConference_1.default, Object.assign({ connectionDetails: connectionDetails, userChoices: preJoinChoices, options: { codec: props.codec, hq: props.hq } }, LiveStreamVideoConferenceComponentProps)) }))) })) })));
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ id: id, className: (0, classnames_1.default)(classes.root, className) }, rest, { children: (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: "h5", className: classes.title }, { children: scLiveStream === null || scLiveStream === void 0 ? void 0 : scLiveStream.title }))), (scLiveStream === null || scLiveStream === void 0 ? void 0 : scLiveStream.description) && ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: 'div', variant: "body1", className: classes.description }, { children: scLiveStream === null || scLiveStream === void 0 ? void 0 : scLiveStream.description }))), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: (0, classnames_1.default)(classes.preJoin, { [classes.preJoinLoading]: loading }) }, { children: [(0, jsx_runtime_1.jsx)(components_react_1.PreJoin, { defaults: preJoinDefaults, onSubmit: handlePreJoinSubmit, onError: handlePreJoinError }), 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.jsx)(material_1.Box, Object.assign({ className: classes.endPrejoinContent }, { children: endPrejoinContent }))] })) : ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.conference }, { children: (0, jsx_runtime_1.jsx)(LiveStreamVideoConference_1.default, Object.assign({ connectionDetails: connectionDetails, userChoices: preJoinChoices, options: { codec: props.codec, hq: props.hq } }, LiveStreamVideoConferenceComponentProps)) }))) })) })));
 }
 exports.default = LiveStreamRoom;

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

@@ -1,6 +1,6 @@
 import { BoxProps } from '@mui/material';
 import { SCLiveStreamType } from '@selfcommunity/types/src/index';
-import { LiveKitRoomProps, LocalUserChoices } from '@livekit/components-react';
+import { LiveKitRoomProps, LocalUserChoices, VideoConferenceProps } from '@livekit/components-react';
 import { VideoCodec } from 'livekit-client';
 import React from 'react';
 import { ConnectionDetails } from '../types';
@@ -42,7 +42,12 @@ export interface LiveStreamVideoConferenceProps extends BoxProps {
      * Props to spread to LiveKitRoomComponent
      * @default {}
      */
-    LiveKitRoomComponentsProps?: LiveKitRoomProps;
+    LiveKitRoomComponentProps?: LiveKitRoomProps;
+    /**
+     * Props to spread to VideoConferenceComponent
+     * @default {}
+     */
+    VideoConferenceComponentProps?: VideoConferenceProps;
     /**
      * Element to be inserted before end conference content
      */

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

@@ -10,10 +10,10 @@ const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const constants_1 = require("./constants");
 const components_react_1 = require("@livekit/components-react");
 const react_1 = require("react");
-const RecordingIndicator_1 = tslib_1.__importDefault(require("./RecordingIndicator"));
 const components_core_1 = require("@livekit/components-core");
 const constants_2 = require("../constants");
 const react_intl_1 = require("react-intl");
+const VideoConference_1 = require("./VideoConference");
 const classes = {
     root: `${constants_1.PREFIX}-root`,
     title: `${constants_1.PREFIX}-title`,
@@ -52,9 +52,9 @@ function LiveStreamVideoConference(inProps) {
         props: inProps,
         name: constants_1.PREFIX
     });
-    const { className, liveStream, handleOnLeaveRoom, userChoices = components_core_1.defaultUserChoices, connectionDetails = {}, LiveKitRoomComponentsProps = {
+    const { className, liveStream, handleOnLeaveRoom, userChoices = components_core_1.defaultUserChoices, connectionDetails = {}, LiveKitRoomComponentProps = {
     /* simulateParticipants: true */
-    }, startConferenceEndContent, endConferenceEndContent, options = constants_2.defaultVideoOptions } = props, rest = tslib_1.__rest(props, ["className", "liveStream", "handleOnLeaveRoom", "userChoices", "connectionDetails", "LiveKitRoomComponentsProps", "startConferenceEndContent", "endConferenceEndContent", "options"]);
+    }, VideoConferenceComponentProps = {}, startConferenceEndContent, endConferenceEndContent, options = constants_2.defaultVideoOptions } = props, rest = tslib_1.__rest(props, ["className", "liveStream", "handleOnLeaveRoom", "userChoices", "connectionDetails", "LiveKitRoomComponentProps", "VideoConferenceComponentProps", "startConferenceEndContent", "endConferenceEndContent", "options"]);
     // CONTEXT
     const scUserContext = (0, react_core_1.useSCUser)();
     const scRoutingContext = (0, react_core_1.useSCRouting)();
@@ -178,6 +178,6 @@ function LiveStreamVideoConference(inProps) {
     /**
      * Renders root object
      */
-    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: liveActive && !error ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(components_react_1.LiveKitRoom, Object.assign({ connect: Boolean(e2eeSetupComplete && liveActive), token: connectionDetails['participantToken'], serverUrl: connectionDetails['serverUrl'], connectOptions: connectOptions, video: userChoices.videoEnabled, audio: userChoices.audioEnabled, onDisconnected: handleOnLeave, onEncryptionError: handleEncryptionError, onError: handleError }, LiveKitRoomComponentsProps, { children: (0, jsx_runtime_1.jsxs)(components_react_1.LayoutContextProvider, { children: [(0, jsx_runtime_1.jsx)(components_react_1.VideoConference, { chatMessageFormatter: components_react_1.formatChatMessageLinks }), (0, jsx_runtime_1.jsx)(components_react_1.Chat, {}), (0, jsx_runtime_1.jsx)(RecordingIndicator_1.default, {}), (0, jsx_runtime_1.jsx)(components_react_1.ConnectionState, {})] }) })) })) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: error ? ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.endConferenceWrap }, { children: [startConferenceEndContent, error, endConferenceEndContent] }))) : liveActive === false ? ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.endConferenceWrap }, { children: [startConferenceEndContent, (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.end", defaultMessage: "ui.liveStreamRoom.conference.end" }) })), (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" }) })), endConferenceEndContent] }))) : ((0, jsx_runtime_1.jsx)(material_1.CircularProgress, {})) })) })));
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: liveActive && !error ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(components_react_1.LiveKitRoom, Object.assign({ connect: Boolean(e2eeSetupComplete && liveActive), token: connectionDetails['participantToken'], serverUrl: connectionDetails['serverUrl'], connectOptions: connectOptions, video: userChoices.videoEnabled, audio: userChoices.audioEnabled, onDisconnected: handleOnLeave, onEncryptionError: handleEncryptionError, onError: handleError }, LiveKitRoomComponentProps, { children: (0, jsx_runtime_1.jsxs)(components_react_1.LayoutContextProvider, { children: [(0, jsx_runtime_1.jsx)(VideoConference_1.VideoConference, Object.assign({ chatMessageFormatter: components_react_1.formatChatMessageLinks }, VideoConferenceComponentProps)), (0, jsx_runtime_1.jsx)(components_react_1.ConnectionState, {})] }) })) })) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: error ? ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.endConferenceWrap }, { children: [startConferenceEndContent, error, endConferenceEndContent] }))) : liveActive === false ? ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.endConferenceWrap }, { children: [startConferenceEndContent, (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.end", defaultMessage: "ui.liveStreamRoom.conference.end" }) })), (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" }) })), endConferenceEndContent] }))) : ((0, jsx_runtime_1.jsx)(material_1.CircularProgress, {})) })) })));
 }
 exports.default = LiveStreamVideoConference;