@selfcommunity/react-ui 0.8.0-live.46 → 0.8.0-live.49

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

@@ -13,6 +13,7 @@ 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 classes = {
     root: `${constants_1.PREFIX}-root`,
     form: `${constants_1.PREFIX}-form`,
@@ -124,8 +125,9 @@ function LiveStreamForm(inProps) {
         }
         formData.append('title', field.title);
         formData.append('description', field.description);
+        // TODO: for testing
         setTimeout(() => {
-            onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess({});
+            onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess({ roomName: (0, liveStream_1.generateRoomId)() });
             setField((prev) => (Object.assign(Object.assign({}, prev), { ['isSubmitting']: false })));
         }, 1000);
         /*

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

@@ -1,6 +1,9 @@
 import { BoxProps } from '@mui/material';
 import { SCLiveStreamType } from '@selfcommunity/types';
+import { LocalUserChoices } from '@livekit/components-react';
 import React from 'react';
+import { ConnectionDetails } from './types';
+import { LiveStreamVideoConferenceProps } from './LiveStreamVideoConference';
 import '@livekit/components-styles';
 export interface LiveStreamRoomProps extends BoxProps {
     /**
@@ -33,6 +36,21 @@ export interface LiveStreamRoomProps extends BoxProps {
      * Show description of livestream in prejoin
      */
     showPrejoinDescription?: boolean;
+    /**
+     * ConnectionDetails Object
+     * @default null
+     */
+    presetConnectionDetails?: ConnectionDetails;
+    /**
+     * LocalUserChoices Object
+     * @default null
+     */
+    presetPreJoinChoices?: LocalUserChoices;
+    /**
+     * Props to spread to LiveStreamVideoConference Component
+     * @default {}
+     */
+    LiveStreamVideoConferenceComponentProps?: LiveStreamVideoConferenceProps;
     /**
      * Any other properties
      */

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

@@ -21,6 +21,8 @@ const classes = {
     description: `${constants_1.PREFIX}-description`,
     startPrejoinContent: `${constants_1.PREFIX}-start-prejoin-content`,
     preJoin: `${constants_1.PREFIX}-prejoin`,
+    preJoinLoading: `${constants_1.PREFIX}-prejoin-loading`,
+    prejoinLoader: `${constants_1.PREFIX}-prejoin-loader`,
     endPrejoinContent: `${constants_1.PREFIX}-end-prejoin-content`,
     conference: `${constants_1.PREFIX}-conference`,
     error: `${constants_1.PREFIX}-error`
@@ -61,14 +63,14 @@ function LiveStreamRoom(inProps) {
         props: inProps,
         name: constants_1.PREFIX
     });
-    const { className, liveStream = null, showPrejoinTitle = true, showPrejoinDescription = false, startPrejoinContent, endPrejoinContent, connectionDetailsEndpoint } = props, rest = tslib_1.__rest(props, ["className", "liveStream", "showPrejoinTitle", "showPrejoinDescription", "startPrejoinContent", "endPrejoinContent", "connectionDetailsEndpoint"]);
+    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"]);
     // 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 [preJoinChoices, setPreJoinChoices] = (0, react_1.useState)(undefined);
+    const [preJoinChoices, setPreJoinChoices] = (0, react_1.useState)(presetPreJoinChoices);
     const [loading, setLoading] = (0, react_1.useState)(false);
     const preJoinDefaults = (0, react_1.useMemo)(() => {
         var _a;
@@ -78,7 +80,7 @@ function LiveStreamRoom(inProps) {
             audioEnabled: true
         };
     }, [scUserContext.user]);
-    const [connectionDetails, setConnectionDetails] = (0, react_1.useState)(undefined);
+    const [connectionDetails, setConnectionDetails] = (0, react_1.useState)(presetConnectionDetails);
     const liveStreamEnabled = true;
     /* const liveStreamEnabled = useMemo(
           () =>
@@ -90,6 +92,17 @@ function LiveStreamRoom(inProps) {
           [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 toggleAttrDisabledPrejoinActions = (0, react_1.useCallback)((disabled) => {
+        const container = document.querySelector('.lk-prejoin');
+        if (container) {
+            const buttons = container.querySelectorAll('button.lk-button');
+            buttons.forEach((button) => {
+                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                // @ts-ignore
+                button.disabled = disabled;
+            });
+        }
+    }, []);
     // HANDLERS
     /**
      * Handle PreJoin Submit
@@ -99,16 +112,18 @@ function LiveStreamRoom(inProps) {
         // eslint-disable-next-line no-constant-condition
         if ((liveStream || true) && connectionDetailsEndpoint) {
             setLoading(true);
+            toggleAttrDisabledPrejoinActions(true);
             setPreJoinChoices(values);
             const url = new URL(connectionDetailsEndpoint, window.location.origin);
-            url.searchParams.append('roomName', (0, liveStream_1.generateRoomId)());
+            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.region) {
-            //	url.searchParams.append('region', liveStream.region);
-            // }
+            /* 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]);
@@ -125,6 +140,6 @@ function LiveStreamRoom(inProps) {
     /**
      * 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.Box, Object.assign({ 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.Box, Object.assign({ className: classes.description }, { children: liveStream === null || liveStream === void 0 ? void 0 : liveStream.description })), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.preJoin }, { children: (0, jsx_runtime_1.jsx)(components_react_1.PreJoin, { persistUserChoices: true, defaults: preJoinDefaults, onSubmit: handlePreJoinSubmit, onError: handlePreJoinError }) })), (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, { connectionDetails: connectionDetails, userChoices: preJoinChoices, options: { codec: props.codec, hq: props.hq } }) }))) })) })));
+    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.Box, Object.assign({ 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.Box, Object.assign({ 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.jsx)(material_1.Box, Object.assign({ className: classes.prejoinLoader }, { children: (0, jsx_runtime_1.jsx)(material_1.CircularProgress, {}) })))] })), (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

@@ -2,6 +2,7 @@ import { BoxProps } from '@mui/material';
 import { SCLiveStreamType } from '@selfcommunity/types/src/index';
 import { LiveKitRoomProps, LocalUserChoices } from '@livekit/components-react';
 import { VideoCodec } from 'livekit-client';
+import React from 'react';
 import { ConnectionDetails } from '../types';
 export interface LiveStreamVideoConferenceProps extends BoxProps {
     /**
@@ -42,6 +43,14 @@ export interface LiveStreamVideoConferenceProps extends BoxProps {
      * @default {}
      */
     LiveKitRoomComponentsProps?: LiveKitRoomProps;
+    /**
+     * Element to be inserted before end conference content
+     */
+    startConferenceEndContent?: React.ReactNode | null;
+    /**
+     * Element to be inserted after end conference content
+     */
+    endConferenceEndContent?: React.ReactNode | null;
     /**
      * Any other properties
      */

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

@@ -13,10 +13,13 @@ 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 classes = {
     root: `${constants_1.PREFIX}-root`,
     title: `${constants_1.PREFIX}-title`,
     content: `${constants_1.PREFIX}-content`,
+    endConferenceWrap: `${constants_1.PREFIX}-end-conference-wrap`,
+    btnBackHome: `${constants_1.PREFIX}-btn-back-home`,
     actions: `${constants_1.PREFIX}-actions`,
     error: `${constants_1.PREFIX}-error`
 };
@@ -51,9 +54,10 @@ function LiveStreamVideoConference(inProps) {
     });
     const { className, liveStream = null, handleOnLeaveRoom, userChoices = components_core_1.defaultUserChoices, connectionDetails = {}, LiveKitRoomComponentsProps = {
     /* simulateParticipants: true */
-    }, options = constants_2.defaultVideoOptions } = props, rest = tslib_1.__rest(props, ["className", "liveStream", "handleOnLeaveRoom", "userChoices", "connectionDetails", "LiveKitRoomComponentsProps", "options"]);
+    }, startConferenceEndContent, endConferenceEndContent, options = constants_2.defaultVideoOptions } = props, rest = tslib_1.__rest(props, ["className", "liveStream", "handleOnLeaveRoom", "userChoices", "connectionDetails", "LiveKitRoomComponentsProps", "startConferenceEndContent", "endConferenceEndContent", "options"]);
     // CONTEXT
     const scUserContext = (0, react_core_1.useSCUser)();
+    const scRoutingContext = (0, react_core_1.useSCRouting)();
     const { preferences, features } = (0, react_core_1.useSCPreferences)();
     // Passphrase
     // const e2eePassphrase = typeof window !== 'undefined' && decodePassphrase(location.hash.substring(1));
@@ -174,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.jsxs)(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.jsx)(components_react_1.VideoConference, { chatMessageFormatter: components_react_1.formatChatMessageLinks }), (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 ? error : liveActive === false ? (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: "Grazie!" }) : (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.jsxs)(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.jsx)(components_react_1.VideoConference, { chatMessageFormatter: components_react_1.formatChatMessageLinks }), (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 ? (error) : 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({ 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;

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

@@ -11,6 +11,7 @@ import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { LIVE_STREAM_DESCRIPTION_MAX_LENGTH, LIVE_STREAM_TITLE_MAX_LENGTH, LIVE_STREAM_SLUG_MAX_LENGTH } from '../../constants/LiveStream';
 import { PREFIX } from './constants';
 import UploadEventCover from '../EventForm/UploadEventCover';
+import { generateRoomId } from '../../utils/liveStream';
 const classes = {
     root: `${PREFIX}-root`,
     form: `${PREFIX}-form`,
@@ -122,8 +123,9 @@ export default function LiveStreamForm(inProps) {
         }
         formData.append('title', field.title);
         formData.append('description', field.description);
+        // TODO: for testing
         setTimeout(() => {
-            onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess({});
+            onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess({ roomName: generateRoomId() });
             setField((prev) => (Object.assign(Object.assign({}, prev), { ['isSubmitting']: false })));
         }, 1000);
         /*

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

@@ -1,6 +1,9 @@
 import { BoxProps } from '@mui/material';
 import { SCLiveStreamType } from '@selfcommunity/types';
+import { LocalUserChoices } from '@livekit/components-react';
 import React from 'react';
+import { ConnectionDetails } from './types';
+import { LiveStreamVideoConferenceProps } from './LiveStreamVideoConference';
 import '@livekit/components-styles';
 export interface LiveStreamRoomProps extends BoxProps {
     /**
@@ -33,6 +36,21 @@ export interface LiveStreamRoomProps extends BoxProps {
      * Show description of livestream in prejoin
      */
     showPrejoinDescription?: boolean;
+    /**
+     * ConnectionDetails Object
+     * @default null
+     */
+    presetConnectionDetails?: ConnectionDetails;
+    /**
+     * LocalUserChoices Object
+     * @default null
+     */
+    presetPreJoinChoices?: LocalUserChoices;
+    /**
+     * Props to spread to LiveStreamVideoConference Component
+     * @default {}
+     */
+    LiveStreamVideoConferenceComponentProps?: LiveStreamVideoConferenceProps;
     /**
      * Any other properties
      */

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

@@ -1,5 +1,5 @@
 import { __awaiter, __rest } from "tslib";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Box, CircularProgress } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import { useThemeProps } from '@mui/system';
@@ -19,6 +19,8 @@ const classes = {
     description: `${PREFIX}-description`,
     startPrejoinContent: `${PREFIX}-start-prejoin-content`,
     preJoin: `${PREFIX}-prejoin`,
+    preJoinLoading: `${PREFIX}-prejoin-loading`,
+    prejoinLoader: `${PREFIX}-prejoin-loader`,
     endPrejoinContent: `${PREFIX}-end-prejoin-content`,
     conference: `${PREFIX}-conference`,
     error: `${PREFIX}-error`
@@ -59,14 +61,14 @@ export default function LiveStreamRoom(inProps) {
         props: inProps,
         name: PREFIX
     });
-    const { className, liveStream = null, showPrejoinTitle = true, showPrejoinDescription = false, startPrejoinContent, endPrejoinContent, connectionDetailsEndpoint } = props, rest = __rest(props, ["className", "liveStream", "showPrejoinTitle", "showPrejoinDescription", "startPrejoinContent", "endPrejoinContent", "connectionDetailsEndpoint"]);
+    const { className, liveStream = null, showPrejoinTitle = true, showPrejoinDescription = false, startPrejoinContent, endPrejoinContent, connectionDetailsEndpoint, presetConnectionDetails, presetPreJoinChoices, LiveStreamVideoConferenceComponentProps = {} } = props, rest = __rest(props, ["className", "liveStream", "showPrejoinTitle", "showPrejoinDescription", "startPrejoinContent", "endPrejoinContent", "connectionDetailsEndpoint", "presetConnectionDetails", "presetPreJoinChoices", "LiveStreamVideoConferenceComponentProps"]);
     // CONTEXT
     const scUserContext = useSCUser();
     const { preferences, features } = useSCPreferences();
     // INTL
     const intl = useIntl();
     // STATE
-    const [preJoinChoices, setPreJoinChoices] = useState(undefined);
+    const [preJoinChoices, setPreJoinChoices] = useState(presetPreJoinChoices);
     const [loading, setLoading] = useState(false);
     const preJoinDefaults = useMemo(() => {
         var _a;
@@ -76,7 +78,7 @@ export default function LiveStreamRoom(inProps) {
             audioEnabled: true
         };
     }, [scUserContext.user]);
-    const [connectionDetails, setConnectionDetails] = useState(undefined);
+    const [connectionDetails, setConnectionDetails] = useState(presetConnectionDetails);
     const liveStreamEnabled = true;
     /* const liveStreamEnabled = useMemo(
           () =>
@@ -88,6 +90,17 @@ export default function LiveStreamRoom(inProps) {
           [preferences, features]
       ); */
     const canCreateLiveStream = 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 toggleAttrDisabledPrejoinActions = useCallback((disabled) => {
+        const container = document.querySelector('.lk-prejoin');
+        if (container) {
+            const buttons = container.querySelectorAll('button.lk-button');
+            buttons.forEach((button) => {
+                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                // @ts-ignore
+                button.disabled = disabled;
+            });
+        }
+    }, []);
     // HANDLERS
     /**
      * Handle PreJoin Submit
@@ -97,16 +110,18 @@ export default function LiveStreamRoom(inProps) {
         // eslint-disable-next-line no-constant-condition
         if ((liveStream || true) && connectionDetailsEndpoint) {
             setLoading(true);
+            toggleAttrDisabledPrejoinActions(true);
             setPreJoinChoices(values);
             const url = new URL(connectionDetailsEndpoint, window.location.origin);
-            url.searchParams.append('roomName', generateRoomId());
+            url.searchParams.append('roomName', liveStream.roomName || generateRoomId());
             url.searchParams.append('participantName', (_b = scUserContext.user) === null || _b === void 0 ? void 0 : _b.username);
-            // if (liveStream.region) {
-            //	url.searchParams.append('region', liveStream.region);
-            // }
+            /* 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]);
@@ -123,5 +138,5 @@ export default function LiveStreamRoom(inProps) {
     /**
      * Renders root object
      */
-    return (_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: _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 })), (liveStream === null || liveStream === void 0 ? void 0 : liveStream.title) && _jsx(Box, Object.assign({ className: classes.title }, { children: liveStream === null || liveStream === void 0 ? void 0 : liveStream.title })), (liveStream === null || liveStream === void 0 ? void 0 : liveStream.description) && _jsx(Box, Object.assign({ className: classes.description }, { children: liveStream === null || liveStream === void 0 ? void 0 : liveStream.description })), _jsx(Box, Object.assign({ className: classes.preJoin }, { children: _jsx(PreJoin, { persistUserChoices: true, defaults: preJoinDefaults, onSubmit: handlePreJoinSubmit, onError: handlePreJoinError }) })), _jsx(Box, Object.assign({ className: classes.endPrejoinContent }, { children: endPrejoinContent }))] })) : (_jsx(Box, Object.assign({ className: classes.conference }, { children: _jsx(LiveStreamVideoConference, { connectionDetails: connectionDetails, userChoices: preJoinChoices, options: { codec: props.codec, hq: props.hq } }) }))) })) })));
+    return (_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: _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 })), (liveStream === null || liveStream === void 0 ? void 0 : liveStream.title) && _jsx(Box, Object.assign({ className: classes.title }, { children: liveStream === null || liveStream === void 0 ? void 0 : liveStream.title })), (liveStream === null || liveStream === void 0 ? void 0 : liveStream.description) && _jsx(Box, Object.assign({ className: classes.description }, { children: liveStream === null || liveStream === void 0 ? void 0 : liveStream.description })), _jsxs(Box, Object.assign({ className: classNames(classes.preJoin, { [classes.preJoinLoading]: loading }) }, { children: [_jsx(PreJoin, { persistUserChoices: true, defaults: preJoinDefaults, onSubmit: handlePreJoinSubmit, onError: handlePreJoinError }), loading && (_jsx(Box, Object.assign({ className: classes.prejoinLoader }, { children: _jsx(CircularProgress, {}) })))] })), _jsx(Box, Object.assign({ className: classes.endPrejoinContent }, { children: endPrejoinContent }))] })) : (_jsx(Box, Object.assign({ className: classes.conference }, { children: _jsx(LiveStreamVideoConference, Object.assign({ connectionDetails: connectionDetails, userChoices: preJoinChoices, options: { codec: props.codec, hq: props.hq } }, LiveStreamVideoConferenceComponentProps)) }))) })) })));
 }

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

@@ -2,6 +2,7 @@ import { BoxProps } from '@mui/material';
 import { SCLiveStreamType } from '@selfcommunity/types/src/index';
 import { LiveKitRoomProps, LocalUserChoices } from '@livekit/components-react';
 import { VideoCodec } from 'livekit-client';
+import React from 'react';
 import { ConnectionDetails } from '../types';
 export interface LiveStreamVideoConferenceProps extends BoxProps {
     /**
@@ -42,6 +43,14 @@ export interface LiveStreamVideoConferenceProps extends BoxProps {
      * @default {}
      */
     LiveKitRoomComponentsProps?: LiveKitRoomProps;
+    /**
+     * Element to be inserted before end conference content
+     */
+    startConferenceEndContent?: React.ReactNode | null;
+    /**
+     * Element to be inserted after end conference content
+     */
+    endConferenceEndContent?: React.ReactNode | null;
     /**
      * Any other properties
      */

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

@@ -1,9 +1,9 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Box, CircularProgress } from '@mui/material';
+import { Box, Button, CircularProgress, Typography } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import { useThemeProps } from '@mui/system';
-import { useSCPreferences, useSCUser } from '@selfcommunity/react-core';
+import { Link, useSCPreferences, useSCRouting, useSCUser } from '@selfcommunity/react-core';
 import classNames from 'classnames';
 import { PREFIX } from './constants';
 import { ConnectionState, formatChatMessageLinks, LiveKitRoom, VideoConference } from '@livekit/components-react';
@@ -11,10 +11,13 @@ import { useCallback, useMemo, useState } from 'react';
 import RecordingIndicator from './RecordingIndicator';
 import { defaultUserChoices } from '@livekit/components-core';
 import { defaultVideoOptions } from '../constants';
+import { FormattedMessage } from 'react-intl';
 const classes = {
     root: `${PREFIX}-root`,
     title: `${PREFIX}-title`,
     content: `${PREFIX}-content`,
+    endConferenceWrap: `${PREFIX}-end-conference-wrap`,
+    btnBackHome: `${PREFIX}-btn-back-home`,
     actions: `${PREFIX}-actions`,
     error: `${PREFIX}-error`
 };
@@ -49,9 +52,10 @@ export default function LiveStreamVideoConference(inProps) {
     });
     const { className, liveStream = null, handleOnLeaveRoom, userChoices = defaultUserChoices, connectionDetails = {}, LiveKitRoomComponentsProps = {
     /* simulateParticipants: true */
-    }, options = defaultVideoOptions } = props, rest = __rest(props, ["className", "liveStream", "handleOnLeaveRoom", "userChoices", "connectionDetails", "LiveKitRoomComponentsProps", "options"]);
+    }, startConferenceEndContent, endConferenceEndContent, options = defaultVideoOptions } = props, rest = __rest(props, ["className", "liveStream", "handleOnLeaveRoom", "userChoices", "connectionDetails", "LiveKitRoomComponentsProps", "startConferenceEndContent", "endConferenceEndContent", "options"]);
     // CONTEXT
     const scUserContext = useSCUser();
+    const scRoutingContext = useSCRouting();
     const { preferences, features } = useSCPreferences();
     // Passphrase
     // const e2eePassphrase = typeof window !== 'undefined' && decodePassphrase(location.hash.substring(1));
@@ -172,5 +176,5 @@ export default function LiveStreamVideoConference(inProps) {
     /**
      * Renders root object
      */
-    return (_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: liveActive && !error ? (_jsx(_Fragment, { children: _jsxs(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: [_jsx(VideoConference, { chatMessageFormatter: formatChatMessageLinks }), _jsx(RecordingIndicator, {}), _jsx(ConnectionState, {})] })) })) : (_jsx(_Fragment, { children: error ? error : liveActive === false ? _jsx(_Fragment, { children: "Grazie!" }) : _jsx(CircularProgress, {}) })) })));
+    return (_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: liveActive && !error ? (_jsx(_Fragment, { children: _jsxs(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: [_jsx(VideoConference, { chatMessageFormatter: formatChatMessageLinks }), _jsx(RecordingIndicator, {}), _jsx(ConnectionState, {})] })) })) : (_jsx(_Fragment, { children: error ? (error) : liveActive === false ? (_jsxs(Box, Object.assign({ className: classes.endConferenceWrap }, { children: [startConferenceEndContent, _jsx(Typography, Object.assign({ variant: "h5" }, { children: _jsx(FormattedMessage, { id: "ui.liveStreamRoom.conference.end", defaultMessage: "ui.liveStreamRoom.conference.end" }) })), _jsx(Button, Object.assign({ color: "secondary", component: Link, to: '/', className: classes.btnBackHome }, { children: _jsx(FormattedMessage, { id: "ui.liveStreamRoom.button.backHome", defaultMessage: "ui.liveStreamRoom.button.backHome" }) })), endConferenceEndContent] }))) : (_jsx(CircularProgress, {})) })) })));
 }