npm - @selfcommunity/react-ui - Versions diffs - 0.8.0-live.63 → 0.8.0-live.66 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (16) hide show

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

@@ -18,11 +18,14 @@ const utils_1 = require("@selfcommunity/utils");
 const Errors_1 = require("../../constants/Errors");
 const PreJoin_1 = require("./LiveStreamVideoConference/PreJoin");
 const LiveStreamProvider_1 = require("./LiveStreamVideoConference/LiveStreamProvider");
+const notistack_1 = require("notistack");
 const classes = {
     root: `${constants_1.PREFIX}-root`,
     content: `${constants_1.PREFIX}-content`,
     title: `${constants_1.PREFIX}-title`,
     description: `${constants_1.PREFIX}-description`,
+    endConferenceWrap: `${constants_1.PREFIX}-end-conference-wrap`,
+    btnBackHome: `${constants_1.PREFIX}-btn-back-home`,
     startPrejoinContent: `${constants_1.PREFIX}-start-prejoin-content`,
     preJoin: `${constants_1.PREFIX}-prejoin`,
     preJoinLoading: `${constants_1.PREFIX}-prejoin-loading`,
@@ -75,6 +78,7 @@ function LiveStreamRoom(inProps) {
     const { scLiveStream } = (0, react_core_1.useSCFetchLiveStream)({ id: liveStreamId, liveStream });
     const [preJoinChoices, setPreJoinChoices] = (0, react_1.useState)(presetPreJoinChoices);
     const [loading, setLoading] = (0, react_1.useState)(false);
+    const [error, setError] = (0, react_1.useState)(null);
     const preJoinDefaults = (0, react_1.useMemo)(() => {
         var _a, _b, _c;
         return {
@@ -89,24 +93,19 @@ function LiveStreamRoom(inProps) {
         features.includes(types_1.SCFeatureName.LIVE_STREAM) &&
         react_core_1.SCPreferences.CONFIGURATIONS_LIVE_STREAM_ENABLED in preferences &&
         preferences[react_core_1.SCPreferences.CONFIGURATIONS_LIVE_STREAM_ENABLED].value, [preferences, features]);
-    const 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;
-            });
-        }
-    }, []);
+    // INTL
+    const intl = (0, react_intl_1.useIntl)();
+    // MESSAGES
+    const { enqueueSnackbar } = (0, notistack_1.useSnackbar)();
     // HANDLERS
     /**
      * Handle PreJoin Submit
      */
     const handlePreJoinSubmit = (0, react_1.useCallback)((values) => {
-        if (scLiveStream) {
+        if (scLiveStream || !loading) {
             setLoading(true);
+            setError(null);
+            toggleAttrDisabledPrejoinActions(true);
             api_services_1.LiveStreamService.join(scLiveStream.id)
                 .then((data) => {
                 setPreJoinChoices(values);
@@ -114,12 +113,42 @@ function LiveStreamRoom(inProps) {
                 toggleAttrDisabledPrejoinActions(false);
                 setLoading(false);
             })
-                .catch((e) => {
-                utils_1.Logger.error(Errors_1.SCOPE_SC_UI, e);
+                .catch((error) => {
+                utils_1.Logger.error(Errors_1.SCOPE_SC_UI, error);
+                if (error.response &&
+                    error.response.data &&
+                    typeof error.response.data === 'object' &&
+                    error.response.data.errors &&
+                    error.response.data.errors.length) {
+                    let _msg = intl.formatMessage({
+                        id: 'ui.liveStreamRoom.connect.error.generic',
+                        defaultMessage: 'ui.liveStreamRoom.connect.error.generic'
+                    });
+                    if (error.response.data.errors[0].code) {
+                        const _error = `ui.liveStreamRoom.connect.error.${(0, utils_1.camelCase)(error.response.data.errors[0].code)}`;
+                        _msg = intl.formatMessage({ id: _error, defaultMessage: _error });
+                    }
+                    setError(_msg);
+                    enqueueSnackbar(_msg, { variant: 'error', autoHideDuration: 5000 });
+                }
+                setLoading(false);
             });
-            toggleAttrDisabledPrejoinActions(true);
         }
-    }, [scUserContext.user, setPreJoinChoices, setConnectionDetails, scLiveStream]);
+    }, [scUserContext.user, setPreJoinChoices, setConnectionDetails, scLiveStream, setError, loading]);
+    /**
+     * Handle disable controls button
+     */
+    const toggleAttrDisabledPrejoinActions = (0, react_1.useCallback)((disabled) => {
+        const container = document.querySelector('.lk-prejoin');
+        if (container) {
+            const buttons = container.querySelectorAll('button.lk-button');
+            buttons.forEach((button) => {
+                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                // @ts-ignore
+                button.disabled = disabled;
+            });
+        }
+    }, []);
     /**
      * Handle PreJoin Error
      */
@@ -133,9 +162,9 @@ function LiveStreamRoom(inProps) {
     /**
      * Renders root object
      */
-    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)(LiveStreamProvider_1.LiveStreamContext.Provider, Object.assign({ value: { liveStream: scLiveStream } }, { children: (0, jsx_runtime_1.jsx)(PreJoin_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.jsxs)(material_1.Box, Object.assign({ className: classes.endPrejoinContent }, { children: [Boolean(scUserContext.user &&
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ id: id, className: (0, classnames_1.default)(classes.root, className) }, rest, { children: scLiveStream.closed_at_by_host ? ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.endConferenceWrap }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h5" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamRoom.conference.closed", defaultMessage: "ui.liveStreamRoom.conference.closed" }) })), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "contained", color: "secondary", component: react_core_1.Link, to: '/', className: classes.btnBackHome }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamRoom.button.backHome", defaultMessage: "ui.liveStreamRoom.button.backHome" }) }))] }))) : ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.content, "data-lk-theme": "default" }, { children: connectionDetails === undefined || preJoinChoices === undefined ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [startPrejoinContent && (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.startPrejoinContent }, { children: startPrejoinContent })), (scLiveStream === null || scLiveStream === void 0 ? void 0 : scLiveStream.title) && ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: 'div', variant: "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 || error }) }, { children: [(0, jsx_runtime_1.jsx)(LiveStreamProvider_1.LiveStreamContext.Provider, Object.assign({ value: { liveStream: scLiveStream } }, { children: (0, jsx_runtime_1.jsx)(PreJoin_1.PreJoin, { defaults: preJoinDefaults, onSubmit: handlePreJoinSubmit, onError: handlePreJoinError }) })), 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" }) }))] }))), error && ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.prejoinLoader }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: 'div', variant: "body2" }, { children: error })) })))] })), (0, jsx_runtime_1.jsxs)(material_1.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)))) && ((0, jsx_runtime_1.jsxs)(material_1.Alert, Object.assign({ variant: "filled", severity: "error" }, { children: [scLiveStream && ((_c = scLiveStream.settings) === null || _c === void 0 ? void 0 : _c.muteParticipants) && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamRoom.hostDisableMicrophone", defaultMessage: "ui.liveStreamRoom.hostDisableMicrophone" }), (0, jsx_runtime_1.jsx)("br", {})] })), scLiveStream && ((_d = scLiveStream.settings) === null || _d === void 0 ? void 0 : _d.disableVideo) && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamRoom.hostDisableVideo", defaultMessage: "ui.liveStreamRoom.hostDisableVideo" }) }))] }))), endPrejoinContent] }))] })) : ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.conference }, { children: (0, jsx_runtime_1.jsx)(LiveStreamProvider_1.LiveStreamContext.Provider, Object.assign({ value: { liveStream: scLiveStream } }, { children: (0, jsx_runtime_1.jsx)(LiveStreamVideoConference_1.default, Object.assign({ connectionDetails: connectionDetails, userChoices: preJoinChoices }, LiveStreamVideoConferenceComponentProps)) })) }))) })) })));
+                                (((_a = scLiveStream.settings) === null || _a === void 0 ? void 0 : _a.muteParticipants) || (scLiveStream && ((_b = scLiveStream.settings) === null || _b === void 0 ? void 0 : _b.disableVideo)))) && ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ sx: { width: '60%' }, spacing: 1 }, { children: [scLiveStream && ((_c = scLiveStream.settings) === null || _c === void 0 ? void 0 : _c.muteParticipants) && ((0, jsx_runtime_1.jsx)(material_1.Alert, Object.assign({ variant: "outlined", severity: "info", component: 'div' }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamRoom.hostDisableMicrophone", defaultMessage: "ui.liveStreamRoom.hostDisableMicrophone" }) }))), scLiveStream && ((_d = scLiveStream.settings) === null || _d === void 0 ? void 0 : _d.disableVideo) && ((0, jsx_runtime_1.jsx)(material_1.Alert, Object.assign({ variant: "outlined", severity: "info" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamRoom.hostDisableVideo", defaultMessage: "ui.liveStreamRoom.hostDisableVideo" }) })))] }))), endPrejoinContent] }))] })) : ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.conference }, { children: (0, jsx_runtime_1.jsx)(LiveStreamProvider_1.LiveStreamContext.Provider, Object.assign({ value: { liveStream: scLiveStream } }, { children: (0, jsx_runtime_1.jsx)(LiveStreamVideoConference_1.default, Object.assign({ connectionDetails: connectionDetails, userChoices: preJoinChoices }, LiveStreamVideoConferenceComponentProps)) })) }))) }))) })));
 }
 exports.default = LiveStreamRoom;

package/lib/cjs/components/LiveStreamRoom/LiveStreamVideoConference/DisconnectButton.js CHANGED Viewed

@@ -5,12 +5,67 @@ const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
 const components_react_1 = require("@livekit/components-react");
+const react_1 = require("react");
+const api_services_1 = require("@selfcommunity/api-services");
+const LiveStreamProvider_1 = require("./LiveStreamProvider");
+const react_intl_1 = require("react-intl");
+const material_1 = require("@mui/material");
+const react_core_1 = require("@selfcommunity/react-core");
+const ConfirmDialog_1 = tslib_1.__importDefault(require("../../../shared/ConfirmDialog/ConfirmDialog"));
 /**
  * The `DisconnectButton` is a basic html button with the added ability to disconnect from a LiveKit room.
  * Normally this is the big red button that allows end users to leave the video or audio call.
  */
 exports.DisconnectButton =
 /* @__PURE__ */ React.forwardRef(function DisconnectButton(props, ref) {
+    // CONTEXT
+    const { liveStream } = (0, LiveStreamProvider_1.useLiveStream)();
+    const scUserContext = (0, react_core_1.useSCUser)();
+    // STATE
+    const [closeLive, setCloseLive] = (0, react_1.useState)(false);
+    const [openConfirmDialog, setOpenConfirmDialog] = (0, react_1.useState)(false);
+    const [isUpdating, setIsUpdating] = (0, react_1.useState)(false);
     const { buttonProps } = (0, components_react_1.useDisconnectButton)(props);
-    return ((0, jsx_runtime_1.jsx)("button", Object.assign({ ref: ref }, buttonProps, { children: props.children })));
+    const { onClick } = buttonProps, rest = tslib_1.__rest(buttonProps, ["onClick"]);
+    /**
+     * Intercept fist leave action
+     */
+    const handleOnLeave = (0, react_1.useCallback)(() => {
+        setOpenConfirmDialog(true);
+    }, [setOpenConfirmDialog]);
+    /**
+     * Control close live
+     */
+    const handleChangeCloseLive = (0, react_1.useCallback)((event) => {
+        setCloseLive(event.target.checked);
+    }, [closeLive]);
+    /**
+     * Perform set liveStream as closed
+     */
+    const performCloseLiveStream = (0, react_1.useMemo)(() => () => tslib_1.__awaiter(this, void 0, void 0, function* () {
+        const res = yield api_services_1.LiveStreamApiClient.close(liveStream.id);
+        if (res.status >= 300) {
+            return Promise.reject(res);
+        }
+        return yield Promise.resolve(res.data);
+    }), [liveStream]);
+    /**
+     * Perform patch liveStream before leave the live
+     */
+    const handleLeaveAction = () => {
+        if (!isUpdating && liveStream && scUserContext.user.id === liveStream.host.id && closeLive) {
+            setIsUpdating(true);
+            performCloseLiveStream()
+                .then(() => {
+                onClick === null || onClick === void 0 ? void 0 : onClick();
+            })
+                .catch((error) => {
+                console.error(error);
+            });
+        }
+        else {
+            onClick === null || onClick === void 0 ? void 0 : onClick();
+        }
+    };
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("button", Object.assign({ ref: ref }, rest, { onClick: handleOnLeave }, { children: props.children })), openConfirmDialog && ((0, jsx_runtime_1.jsx)(ConfirmDialog_1.default, { open: openConfirmDialog, title: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}), content: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamRoom.live.terminate", defaultMessage: "ui.liveStreamRoom.live.terminate" }), (0, jsx_runtime_1.jsx)(material_1.FormGroup, { children: (0, jsx_runtime_1.jsx)(material_1.FormControlLabel, { control: (0, jsx_runtime_1.jsx)(material_1.Checkbox, { checked: closeLive, onChange: handleChangeCloseLive, inputProps: { 'aria-label': 'controlled' } }), label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamRoom.live.terminatePermanently", defaultMessage: "ui.liveStreamRoom.live.terminatePermanently" }) }) })] }), onConfirm: handleLeaveAction, isUpdating: isUpdating, onClose: () => setOpenConfirmDialog(false) }))] }));
 });

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

@@ -69,8 +69,7 @@ function LiveStreamVideoConference(inProps) {
     const canUseChat = (0, react_1.useMemo)(() => { var _a; return scUserContext.user && liveStream && liveStream && !((_a = liveStream === null || liveStream === void 0 ? void 0 : liveStream.settings) === null || _a === void 0 ? void 0 : _a.disableChat); }, [scUserContext, liveStream]);
     const canUseShareScreen = (0, react_1.useMemo)(() => { var _a; return scUserContext.user && liveStream && (liveStream.host.id === scUserContext.user.id || (liveStream && !((_a = liveStream === null || liveStream === void 0 ? void 0 : liveStream.settings) === null || _a === void 0 ? void 0 : _a.disableShareScreen))); }, [scUserContext, liveStream]);
     const speakerFocused = (0, react_1.useMemo)(() => (scUserContext.user && liveStream && liveStream.settings.view === types_1.SCLiveStreamViewType.SPEAKER ? liveStream.host : null), [scUserContext, liveStream]);
-    console.log(canUseChat);
-    console.log(speakerFocused);
+    const hideParticipantsList = (0, react_1.useMemo)(() => { var _a; return scUserContext.user && liveStream && liveStream.host.id !== scUserContext.user.id && liveStream && !((_a = liveStream === null || liveStream === void 0 ? void 0 : liveStream.settings) === null || _a === void 0 ? void 0 : _a.hideParticipantList); }, [scUserContext, liveStream]);
     // CONNECT OPTIONS
     const connectOptions = (0, react_1.useMemo)(() => {
         return {
@@ -110,6 +109,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(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 }, (speakerFocused && { speakerFocused: liveStream.host }), VideoConferenceComponentProps, { disableMicrophone: !canUseAudio, disableCamera: !canUseVideo, disableChat: !canUseChat, disableShareScreen: !canUseShareScreen })), (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(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 }, (speakerFocused && { speakerFocused: liveStream.host }), VideoConferenceComponentProps, { disableMicrophone: !canUseAudio, disableCamera: !canUseVideo, disableChat: !canUseChat, disableShareScreen: !canUseShareScreen, hideParticipantsList: hideParticipantsList })), (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;

package/lib/cjs/components/LiveStreamRoom/LiveStreamVideoConference/ParticipantTile.js CHANGED Viewed

@@ -10,6 +10,7 @@ const components_react_1 = require("@livekit/components-react");
 const ParticipantTileAvatar_1 = tslib_1.__importDefault(require("./ParticipantTileAvatar"));
 const ParticipantTileActions_1 = tslib_1.__importDefault(require("./ParticipantTileActions"));
 const react_core_1 = require("@selfcommunity/react-core");
+const LiveStreamProvider_1 = require("./LiveStreamProvider");
 /**
  * The `ParticipantContextIfNeeded` component only creates a `ParticipantContext`
  * if there is no `ParticipantContext` already.
@@ -45,6 +46,7 @@ exports.ParticipantTile =
     });
     const isEncrypted = (0, components_react_1.useIsEncrypted)(trackReference.participant);
     const layoutContext = (0, components_react_1.useMaybeLayoutContext)();
+    const { liveStream } = (0, LiveStreamProvider_1.useLiveStream)();
     const autoManageSubscription = (_b = (0, components_react_1.useFeatureContext)()) === null || _b === void 0 ? void 0 : _b.autoSubscription;
     const handleSubscribe = React.useCallback((subscribed) => {
         if (trackReference.source &&
@@ -58,7 +60,7 @@ exports.ParticipantTile =
     return ((0, jsx_runtime_1.jsx)("div", Object.assign({ ref: ref, style: { position: 'relative' } }, elementProps, { children: (0, jsx_runtime_1.jsx)(TrackRefContextIfNeeded, Object.assign({ trackRef: trackReference }, { children: (0, jsx_runtime_1.jsxs)(ParticipantContextIfNeeded, Object.assign({ participant: trackReference.participant }, { children: [children !== null && children !== void 0 ? children : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, components_core_1.isTrackReference)(trackReference) &&
                                 (((_c = trackReference.publication) === null || _c === void 0 ? void 0 : _c.kind) === 'video' ||
                                     trackReference.source === livekit_client_1.Track.Source.Camera ||
-                                    trackReference.source === livekit_client_1.Track.Source.ScreenShare) ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(components_react_1.VideoTrack, { trackRef: trackReference, onSubscriptionStatusChanged: handleSubscribe, manageSubscription: autoManageSubscription }) })) : ((0, components_core_1.isTrackReference)(trackReference) && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(components_react_1.AudioTrack, { trackRef: trackReference, onSubscriptionStatusChanged: handleSubscribe }) }))), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "lk-participant-placeholder" }, { children: (0, jsx_runtime_1.jsx)(ParticipantTileAvatar_1.default, { participant: trackReference.participant }) })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "lk-participant-metadata" }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: "lk-participant-metadata-item" }, { children: trackReference.source === livekit_client_1.Track.Source.Camera ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isEncrypted && (0, jsx_runtime_1.jsx)(components_react_1.LockLockedIcon, { style: { marginRight: '0.25rem' } }), (0, jsx_runtime_1.jsx)(components_react_1.TrackMutedIndicator, { trackRef: {
+                                    trackReference.source === livekit_client_1.Track.Source.ScreenShare) ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(components_react_1.VideoTrack, { trackRef: trackReference, onSubscriptionStatusChanged: handleSubscribe, manageSubscription: autoManageSubscription }) })) : ((0, components_core_1.isTrackReference)(trackReference) && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(components_react_1.AudioTrack, { trackRef: trackReference, onSubscriptionStatusChanged: handleSubscribe }) }))), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "lk-participant-placeholder" }, { children: (0, jsx_runtime_1.jsx)(ParticipantTileAvatar_1.default, Object.assign({}, ((liveStream === null || liveStream === void 0 ? void 0 : liveStream.host.id) !== scUserContext.user.id ? { participant: trackReference.participant } : {}))) })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "lk-participant-metadata" }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: "lk-participant-metadata-item" }, { children: trackReference.source === livekit_client_1.Track.Source.Camera ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isEncrypted && (0, jsx_runtime_1.jsx)(components_react_1.LockLockedIcon, { style: { marginRight: '0.25rem' } }), (0, jsx_runtime_1.jsx)(components_react_1.TrackMutedIndicator, { trackRef: {
                                                         participant: trackReference.participant,
                                                         source: livekit_client_1.Track.Source.Microphone
                                                     }, show: 'muted' }), (0, jsx_runtime_1.jsx)(components_react_1.ParticipantName, { children: !disableTileActions && (0, jsx_runtime_1.jsx)(ParticipantTileActions_1.default, {}) })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_react_1.ScreenShareIcon, { style: { marginRight: '0.25rem' } }), (0, jsx_runtime_1.jsx)(components_react_1.ParticipantName, { children: "'s screen" })] })) })), (0, jsx_runtime_1.jsx)(components_react_1.ConnectionQualityIndicator, { className: "lk-participant-metadata-item" })] }))] })), (0, jsx_runtime_1.jsx)(components_react_1.FocusToggle, { trackRef: trackReference })] })) })) })));

package/lib/cjs/components/LiveStreamRoom/LiveStreamVideoConference/ParticipantTileActions.js CHANGED Viewed

@@ -102,7 +102,7 @@ function ContributionActionsMenu(props) {
      * Perform ban participant
      */
     const performBanParticipant = (0, react_1.useMemo)(() => () => tslib_1.__awaiter(this, void 0, void 0, function* () {
-        const res = yield api_services_1.LiveStreamApiClient.removeUserFromRoom(liveStream.id, p.identity);
+        const res = yield api_services_1.LiveStreamApiClient.removeParticipant(liveStream.id, { participant_id: p.identity });
         if (res.status >= 300) {
             return Promise.reject(res);
         }

package/lib/cjs/components/LiveStreamRoom/LiveStreamVideoConference/ParticipantTileAvatar.js CHANGED Viewed

@@ -2,7 +2,6 @@
 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 system_1 = require("@mui/system");
 const material_1 = require("@mui/material");
@@ -34,16 +33,7 @@ function ParticipantTileAvatar(inProps) {
     const { className, user, participant } = props, rest = tslib_1.__rest(props, ["className", "user", "participant"]);
     // CONTEXT
     const scContext = (0, react_core_1.useSCContext)();
-    // AVATAR
-    const avatar = (0, react_1.useMemo)(() => {
-        if (user) {
-            return (0, jsx_runtime_1.jsx)("img", { src: `${user.avatar}` });
-        }
-        if (participant) {
-            return (0, jsx_runtime_1.jsx)("img", { src: `${scContext.settings.portal}/api/v2/avatar/${participant.identity}` });
-        }
-        return (0, jsx_runtime_1.jsx)(ParticipantPlaceholder_1.default, {});
-    }, [user, participant]);
-    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(className, classes.root) }, rest, { children: avatar })));
+    console.log(participant);
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(className, classes.root) }, rest, { children: participant ? ((0, jsx_runtime_1.jsx)("img", { src: `${scContext.settings.portal}/api/v2/avatar/${participant.identity}` })) : user ? ((0, jsx_runtime_1.jsx)("img", { src: `${user.avatar}` })) : ((0, jsx_runtime_1.jsx)(ParticipantPlaceholder_1.default, {})) })));
 }
 exports.default = ParticipantTileAvatar;

package/lib/cjs/shared/LiveStreamInfoDetails/index.js CHANGED Viewed

@@ -33,7 +33,7 @@ function LiveStreamInfoDetails(inProps) {
     if (!scLiveStream) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: classes.root }, { children: [beforeDateInfo, hasDateInfo && ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.iconTextWrapper }, { children: [!hideDateIcon && (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ fontSize: "small" }, { children: scLiveStream.closed_at ? 'calendar_off' : 'CalendarIcon' })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventInfoDetails.date.startEndTime", defaultMessage: "ui.eventInfoDetails.date.startEndTime", values: {
+    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: classes.root }, { children: [beforeDateInfo, hasDateInfo && ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.iconTextWrapper }, { children: [!hideDateIcon && (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ fontSize: "small" }, { children: scLiveStream.closed_at_by_host ? 'calendar_off' : 'CalendarIcon' })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventInfoDetails.date.startEndTime", defaultMessage: "ui.eventInfoDetails.date.startEndTime", values: {
                                 date: intl.formatDate(scLiveStream.created_at, {
                                     weekday: 'long',
                                     day: 'numeric',
@@ -41,7 +41,7 @@ function LiveStreamInfoDetails(inProps) {
                                     month: 'long'
                                 }),
                                 start: intl.formatDate(scLiveStream.created_at, { hour: 'numeric', minute: 'numeric' })
-                            } }) })), hasInProgress && scLiveStream.running && ((0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({ title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventInfoDetails.inProgress", defaultMessage: "ui.eventInfoDetails.inProgress" }) }, { children: (0, jsx_runtime_1.jsx)(material_1.Box, { className: classes.inProgress }) })))] }))), beforeLocationInfo, hasLocationInfo && ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.iconTextWrapper }, { children: [!hideLocationIcon && (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ fontSize: "small" }, { children: "play_circle_outline" })), (0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: scRoutingContext.url(react_core_1.SCRoutes.LIVESTREAM_ROUTE_NAME, scLiveStream), target: "_blank", className: classes.link }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1", className: classes.url }, { children: scRoutingContext.url(react_core_1.SCRoutes.LIVESTREAM_ROUTE_NAME, scLiveStream) })) }))] }))), beforeCreatedInfo, hasCreatedInfo && ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.creationWrapper }, { children: [!hideCreatedIcon && (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ fontSize: "small" }, { children: "create" })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventInfoDetails.date.create", defaultMessage: "ui.eventInfoDetails.date.create", values: {
+                            } }) })), hasInProgress && scLiveStream.last_started_at && ((0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({ title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventInfoDetails.inProgress", defaultMessage: "ui.eventInfoDetails.inProgress" }) }, { children: (0, jsx_runtime_1.jsx)(material_1.Box, { className: classes.inProgress }) })))] }))), beforeLocationInfo, hasLocationInfo && ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.iconTextWrapper }, { children: [!hideLocationIcon && (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ fontSize: "small" }, { children: "play_circle_outline" })), (0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: scRoutingContext.url(react_core_1.SCRoutes.LIVESTREAM_ROUTE_NAME, scLiveStream), target: "_blank", className: classes.link }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1", className: classes.url }, { children: scRoutingContext.url(react_core_1.SCRoutes.LIVESTREAM_ROUTE_NAME, scLiveStream) })) }))] }))), beforeCreatedInfo, hasCreatedInfo && ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.creationWrapper }, { children: [!hideCreatedIcon && (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ fontSize: "small" }, { children: "create" })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventInfoDetails.date.create", defaultMessage: "ui.eventInfoDetails.date.create", values: {
                                 date: intl.formatDate(scLiveStream.created_at, {
                                     weekday: 'long',
                                     day: 'numeric',

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

@@ -1,26 +1,29 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Alert, Box, CircularProgress, Typography } from '@mui/material';
+import { Alert, Box, Button, CircularProgress, Stack, Typography } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import { useThemeProps } from '@mui/system';
-import { SCPreferences, useSCFetchLiveStream, useSCPreferences, useSCUser } from '@selfcommunity/react-core';
+import { Link, SCPreferences, useSCFetchLiveStream, useSCPreferences, useSCUser } from '@selfcommunity/react-core';
 import { SCFeatureName } from '@selfcommunity/types';
 import classNames from 'classnames';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage, useIntl } from 'react-intl';
 import { PREFIX } from './constants';
 import { useCallback, useMemo, useState } from 'react';
 import LiveStreamVideoConference from './LiveStreamVideoConference';
 import '@livekit/components-styles';
 import { LiveStreamService } from '@selfcommunity/api-services';
-import { Logger } from '@selfcommunity/utils';
+import { camelCase, Logger } from '@selfcommunity/utils';
 import { SCOPE_SC_UI } from '../../constants/Errors';
 import { PreJoin } from './LiveStreamVideoConference/PreJoin';
 import { LiveStreamContext } from './LiveStreamVideoConference/LiveStreamProvider';
+import { useSnackbar } from 'notistack';
 const classes = {
     root: `${PREFIX}-root`,
     content: `${PREFIX}-content`,
     title: `${PREFIX}-title`,
     description: `${PREFIX}-description`,
+    endConferenceWrap: `${PREFIX}-end-conference-wrap`,
+    btnBackHome: `${PREFIX}-btn-back-home`,
     startPrejoinContent: `${PREFIX}-start-prejoin-content`,
     preJoin: `${PREFIX}-prejoin`,
     preJoinLoading: `${PREFIX}-prejoin-loading`,
@@ -73,6 +76,7 @@ export default function LiveStreamRoom(inProps) {
     const { scLiveStream } = useSCFetchLiveStream({ id: liveStreamId, liveStream });
     const [preJoinChoices, setPreJoinChoices] = useState(presetPreJoinChoices);
     const [loading, setLoading] = useState(false);
+    const [error, setError] = useState(null);
     const preJoinDefaults = useMemo(() => {
         var _a, _b, _c;
         return {
@@ -87,24 +91,19 @@ export default function LiveStreamRoom(inProps) {
         features.includes(SCFeatureName.LIVE_STREAM) &&
         SCPreferences.CONFIGURATIONS_LIVE_STREAM_ENABLED in preferences &&
         preferences[SCPreferences.CONFIGURATIONS_LIVE_STREAM_ENABLED].value, [preferences, features]);
-    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;
-            });
-        }
-    }, []);
+    // INTL
+    const intl = useIntl();
+    // MESSAGES
+    const { enqueueSnackbar } = useSnackbar();
     // HANDLERS
     /**
      * Handle PreJoin Submit
      */
     const handlePreJoinSubmit = useCallback((values) => {
-        if (scLiveStream) {
+        if (scLiveStream || !loading) {
             setLoading(true);
+            setError(null);
+            toggleAttrDisabledPrejoinActions(true);
             LiveStreamService.join(scLiveStream.id)
                 .then((data) => {
                 setPreJoinChoices(values);
@@ -112,12 +111,42 @@ export default function LiveStreamRoom(inProps) {
                 toggleAttrDisabledPrejoinActions(false);
                 setLoading(false);
             })
-                .catch((e) => {
-                Logger.error(SCOPE_SC_UI, e);
+                .catch((error) => {
+                Logger.error(SCOPE_SC_UI, error);
+                if (error.response &&
+                    error.response.data &&
+                    typeof error.response.data === 'object' &&
+                    error.response.data.errors &&
+                    error.response.data.errors.length) {
+                    let _msg = intl.formatMessage({
+                        id: 'ui.liveStreamRoom.connect.error.generic',
+                        defaultMessage: 'ui.liveStreamRoom.connect.error.generic'
+                    });
+                    if (error.response.data.errors[0].code) {
+                        const _error = `ui.liveStreamRoom.connect.error.${camelCase(error.response.data.errors[0].code)}`;
+                        _msg = intl.formatMessage({ id: _error, defaultMessage: _error });
+                    }
+                    setError(_msg);
+                    enqueueSnackbar(_msg, { variant: 'error', autoHideDuration: 5000 });
+                }
+                setLoading(false);
             });
-            toggleAttrDisabledPrejoinActions(true);
         }
-    }, [scUserContext.user, setPreJoinChoices, setConnectionDetails, scLiveStream]);
+    }, [scUserContext.user, setPreJoinChoices, setConnectionDetails, scLiveStream, setError, loading]);
+    /**
+     * Handle disable controls button
+     */
+    const toggleAttrDisabledPrejoinActions = useCallback((disabled) => {
+        const container = document.querySelector('.lk-prejoin');
+        if (container) {
+            const buttons = container.querySelectorAll('button.lk-button');
+            buttons.forEach((button) => {
+                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                // @ts-ignore
+                button.disabled = disabled;
+            });
+        }
+    }, []);
     /**
      * Handle PreJoin Error
      */
@@ -131,8 +160,8 @@ export default function LiveStreamRoom(inProps) {
     /**
      * Renders root object
      */
-    return (_jsx(Root, Object.assign({ id: id, 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 })), (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 }) }, { 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 &&
+    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 &&
                                 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(Alert, Object.assign({ variant: "filled", severity: "error" }, { children: [scLiveStream && ((_c = scLiveStream.settings) === null || _c === void 0 ? void 0 : _c.muteParticipants) && (_jsxs(_Fragment, { children: [_jsx(FormattedMessage, { id: "ui.liveStreamRoom.hostDisableMicrophone", defaultMessage: "ui.liveStreamRoom.hostDisableMicrophone" }), _jsx("br", {})] })), scLiveStream && ((_d = scLiveStream.settings) === null || _d === void 0 ? void 0 : _d.disableVideo) && (_jsx(_Fragment, { 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: "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)) })) }))) }))) })));
 }

package/lib/esm/components/LiveStreamRoom/LiveStreamVideoConference/DisconnectButton.js CHANGED Viewed

@@ -1,12 +1,68 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { __awaiter, __rest } from "tslib";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import { useDisconnectButton } from '@livekit/components-react';
+import { useCallback, useMemo, useState } from 'react';
+import { LiveStreamApiClient } from '@selfcommunity/api-services';
+import { useLiveStream } from './LiveStreamProvider';
+import { FormattedMessage } from 'react-intl';
+import { Checkbox, FormControlLabel, FormGroup } from '@mui/material';
+import { useSCUser } from '@selfcommunity/react-core';
+import ConfirmDialog from '../../../shared/ConfirmDialog/ConfirmDialog';
 /**
  * The `DisconnectButton` is a basic html button with the added ability to disconnect from a LiveKit room.
  * Normally this is the big red button that allows end users to leave the video or audio call.
  */
 export const DisconnectButton =
 /* @__PURE__ */ React.forwardRef(function DisconnectButton(props, ref) {
+    // CONTEXT
+    const { liveStream } = useLiveStream();
+    const scUserContext = useSCUser();
+    // STATE
+    const [closeLive, setCloseLive] = useState(false);
+    const [openConfirmDialog, setOpenConfirmDialog] = useState(false);
+    const [isUpdating, setIsUpdating] = useState(false);
     const { buttonProps } = useDisconnectButton(props);
-    return (_jsx("button", Object.assign({ ref: ref }, buttonProps, { children: props.children })));
+    const { onClick } = buttonProps, rest = __rest(buttonProps, ["onClick"]);
+    /**
+     * Intercept fist leave action
+     */
+    const handleOnLeave = useCallback(() => {
+        setOpenConfirmDialog(true);
+    }, [setOpenConfirmDialog]);
+    /**
+     * Control close live
+     */
+    const handleChangeCloseLive = useCallback((event) => {
+        setCloseLive(event.target.checked);
+    }, [closeLive]);
+    /**
+     * Perform set liveStream as closed
+     */
+    const performCloseLiveStream = useMemo(() => () => __awaiter(this, void 0, void 0, function* () {
+        const res = yield LiveStreamApiClient.close(liveStream.id);
+        if (res.status >= 300) {
+            return Promise.reject(res);
+        }
+        return yield Promise.resolve(res.data);
+    }), [liveStream]);
+    /**
+     * Perform patch liveStream before leave the live
+     */
+    const handleLeaveAction = () => {
+        if (!isUpdating && liveStream && scUserContext.user.id === liveStream.host.id && closeLive) {
+            setIsUpdating(true);
+            performCloseLiveStream()
+                .then(() => {
+                onClick === null || onClick === void 0 ? void 0 : onClick();
+            })
+                .catch((error) => {
+                console.error(error);
+            });
+        }
+        else {
+            onClick === null || onClick === void 0 ? void 0 : onClick();
+        }
+    };
+    return (_jsxs(_Fragment, { children: [_jsx("button", Object.assign({ ref: ref }, rest, { onClick: handleOnLeave }, { children: props.children })), openConfirmDialog && (_jsx(ConfirmDialog, { open: openConfirmDialog, title: _jsx(_Fragment, {}), content: _jsxs(_Fragment, { children: [_jsx(FormattedMessage, { id: "ui.liveStreamRoom.live.terminate", defaultMessage: "ui.liveStreamRoom.live.terminate" }), _jsx(FormGroup, { children: _jsx(FormControlLabel, { control: _jsx(Checkbox, { checked: closeLive, onChange: handleChangeCloseLive, inputProps: { 'aria-label': 'controlled' } }), label: _jsx(FormattedMessage, { id: "ui.liveStreamRoom.live.terminatePermanently", defaultMessage: "ui.liveStreamRoom.live.terminatePermanently" }) }) })] }), onConfirm: handleLeaveAction, isUpdating: isUpdating, onClose: () => setOpenConfirmDialog(false) }))] }));
 });

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

@@ -67,8 +67,7 @@ export default function LiveStreamVideoConference(inProps) {
     const canUseChat = useMemo(() => { var _a; return scUserContext.user && liveStream && liveStream && !((_a = liveStream === null || liveStream === void 0 ? void 0 : liveStream.settings) === null || _a === void 0 ? void 0 : _a.disableChat); }, [scUserContext, liveStream]);
     const canUseShareScreen = useMemo(() => { var _a; return scUserContext.user && liveStream && (liveStream.host.id === scUserContext.user.id || (liveStream && !((_a = liveStream === null || liveStream === void 0 ? void 0 : liveStream.settings) === null || _a === void 0 ? void 0 : _a.disableShareScreen))); }, [scUserContext, liveStream]);
     const speakerFocused = useMemo(() => (scUserContext.user && liveStream && liveStream.settings.view === SCLiveStreamViewType.SPEAKER ? liveStream.host : null), [scUserContext, liveStream]);
-    console.log(canUseChat);
-    console.log(speakerFocused);
+    const hideParticipantsList = useMemo(() => { var _a; return scUserContext.user && liveStream && liveStream.host.id !== scUserContext.user.id && liveStream && !((_a = liveStream === null || liveStream === void 0 ? void 0 : liveStream.settings) === null || _a === void 0 ? void 0 : _a.hideParticipantList); }, [scUserContext, liveStream]);
     // CONNECT OPTIONS
     const connectOptions = useMemo(() => {
         return {
@@ -108,5 +107,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: _jsx(LiveKitRoom, Object.assign({ connect: Boolean(liveActive), token: connectionDetails['participantToken'], serverUrl: connectionDetails['serverUrl'], connectOptions: connectOptions, video: userChoices.videoEnabled, audio: userChoices.audioEnabled, onDisconnected: handleOnLeave, onEncryptionError: handleEncryptionError, onError: handleError }, LiveKitRoomComponentProps, { children: _jsxs(LayoutContextProvider, { children: [_jsx(VideoConference, Object.assign({ chatMessageFormatter: formatChatMessageLinks }, (speakerFocused && { speakerFocused: liveStream.host }), VideoConferenceComponentProps, { disableMicrophone: !canUseAudio, disableCamera: !canUseVideo, disableChat: !canUseChat, disableShareScreen: !canUseShareScreen })), _jsx(ConnectionState, {})] }) })) })) : (_jsx(_Fragment, { children: error ? (_jsxs(Box, Object.assign({ className: classes.endConferenceWrap }, { children: [startConferenceEndContent, error, endConferenceEndContent] }))) : 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({ variant: "contained", color: "secondary", component: Link, to: '/', className: classes.btnBackHome }, { children: _jsx(FormattedMessage, { id: "ui.liveStreamRoom.button.backHome", defaultMessage: "ui.liveStreamRoom.button.backHome" }) })), endConferenceEndContent] }))) : (_jsx(CircularProgress, {})) })) })));
+    return (_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: liveActive && !error ? (_jsx(_Fragment, { children: _jsx(LiveKitRoom, Object.assign({ connect: Boolean(liveActive), token: connectionDetails['participantToken'], serverUrl: connectionDetails['serverUrl'], connectOptions: connectOptions, video: userChoices.videoEnabled, audio: userChoices.audioEnabled, onDisconnected: handleOnLeave, onEncryptionError: handleEncryptionError, onError: handleError }, LiveKitRoomComponentProps, { children: _jsxs(LayoutContextProvider, { children: [_jsx(VideoConference, Object.assign({ chatMessageFormatter: formatChatMessageLinks }, (speakerFocused && { speakerFocused: liveStream.host }), VideoConferenceComponentProps, { disableMicrophone: !canUseAudio, disableCamera: !canUseVideo, disableChat: !canUseChat, disableShareScreen: !canUseShareScreen, hideParticipantsList: hideParticipantsList })), _jsx(ConnectionState, {})] }) })) })) : (_jsx(_Fragment, { children: error ? (_jsxs(Box, Object.assign({ className: classes.endConferenceWrap }, { children: [startConferenceEndContent, error, endConferenceEndContent] }))) : 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({ variant: "contained", color: "secondary", component: Link, to: '/', className: classes.btnBackHome }, { children: _jsx(FormattedMessage, { id: "ui.liveStreamRoom.button.backHome", defaultMessage: "ui.liveStreamRoom.button.backHome" }) })), endConferenceEndContent] }))) : (_jsx(CircularProgress, {})) })) })));
 }

package/lib/esm/components/LiveStreamRoom/LiveStreamVideoConference/ParticipantTile.js CHANGED Viewed

@@ -7,6 +7,7 @@ import { AudioTrack, ConnectionQualityIndicator, FocusToggle, LockLockedIcon, Pa
 import ParticipantTileAvatar from './ParticipantTileAvatar';
 import ParticipantTileActions from './ParticipantTileActions';
 import { useSCUser } from '@selfcommunity/react-core';
+import { useLiveStream } from './LiveStreamProvider';
 /**
  * The `ParticipantContextIfNeeded` component only creates a `ParticipantContext`
  * if there is no `ParticipantContext` already.
@@ -40,6 +41,7 @@ export const ParticipantTile =
     });
     const isEncrypted = useIsEncrypted(trackReference.participant);
     const layoutContext = useMaybeLayoutContext();
+    const { liveStream } = useLiveStream();
     const autoManageSubscription = (_b = useFeatureContext()) === null || _b === void 0 ? void 0 : _b.autoSubscription;
     const handleSubscribe = React.useCallback((subscribed) => {
         if (trackReference.source &&
@@ -53,7 +55,7 @@ export const ParticipantTile =
     return (_jsx("div", Object.assign({ ref: ref, style: { position: 'relative' } }, elementProps, { children: _jsx(TrackRefContextIfNeeded, Object.assign({ trackRef: trackReference }, { children: _jsxs(ParticipantContextIfNeeded, Object.assign({ participant: trackReference.participant }, { children: [children !== null && children !== void 0 ? children : (_jsxs(_Fragment, { children: [isTrackReference(trackReference) &&
                                 (((_c = trackReference.publication) === null || _c === void 0 ? void 0 : _c.kind) === 'video' ||
                                     trackReference.source === Track.Source.Camera ||
-                                    trackReference.source === Track.Source.ScreenShare) ? (_jsx(_Fragment, { children: _jsx(VideoTrack, { trackRef: trackReference, onSubscriptionStatusChanged: handleSubscribe, manageSubscription: autoManageSubscription }) })) : (isTrackReference(trackReference) && (_jsx(_Fragment, { children: _jsx(AudioTrack, { trackRef: trackReference, onSubscriptionStatusChanged: handleSubscribe }) }))), _jsx("div", Object.assign({ className: "lk-participant-placeholder" }, { children: _jsx(ParticipantTileAvatar, { participant: trackReference.participant }) })), _jsxs("div", Object.assign({ className: "lk-participant-metadata" }, { children: [_jsx("div", Object.assign({ className: "lk-participant-metadata-item" }, { children: trackReference.source === Track.Source.Camera ? (_jsxs(_Fragment, { children: [isEncrypted && _jsx(LockLockedIcon, { style: { marginRight: '0.25rem' } }), _jsx(TrackMutedIndicator, { trackRef: {
+                                    trackReference.source === Track.Source.ScreenShare) ? (_jsx(_Fragment, { children: _jsx(VideoTrack, { trackRef: trackReference, onSubscriptionStatusChanged: handleSubscribe, manageSubscription: autoManageSubscription }) })) : (isTrackReference(trackReference) && (_jsx(_Fragment, { children: _jsx(AudioTrack, { trackRef: trackReference, onSubscriptionStatusChanged: handleSubscribe }) }))), _jsx("div", Object.assign({ className: "lk-participant-placeholder" }, { children: _jsx(ParticipantTileAvatar, Object.assign({}, ((liveStream === null || liveStream === void 0 ? void 0 : liveStream.host.id) !== scUserContext.user.id ? { participant: trackReference.participant } : {}))) })), _jsxs("div", Object.assign({ className: "lk-participant-metadata" }, { children: [_jsx("div", Object.assign({ className: "lk-participant-metadata-item" }, { children: trackReference.source === Track.Source.Camera ? (_jsxs(_Fragment, { children: [isEncrypted && _jsx(LockLockedIcon, { style: { marginRight: '0.25rem' } }), _jsx(TrackMutedIndicator, { trackRef: {
                                                         participant: trackReference.participant,
                                                         source: Track.Source.Microphone
                                                     }, show: 'muted' }), _jsx(ParticipantName, { children: !disableTileActions && _jsx(ParticipantTileActions, {}) })] })) : (_jsxs(_Fragment, { children: [_jsx(ScreenShareIcon, { style: { marginRight: '0.25rem' } }), _jsx(ParticipantName, { children: "'s screen" })] })) })), _jsx(ConnectionQualityIndicator, { className: "lk-participant-metadata-item" })] }))] })), _jsx(FocusToggle, { trackRef: trackReference })] })) })) })));

package/lib/esm/components/LiveStreamRoom/LiveStreamVideoConference/ParticipantTileActions.js CHANGED Viewed

@@ -100,7 +100,7 @@ export default function ContributionActionsMenu(props) {
      * Perform ban participant
      */
     const performBanParticipant = useMemo(() => () => __awaiter(this, void 0, void 0, function* () {
-        const res = yield LiveStreamApiClient.removeUserFromRoom(liveStream.id, p.identity);
+        const res = yield LiveStreamApiClient.removeParticipant(liveStream.id, { participant_id: p.identity });
         if (res.status >= 300) {
             return Promise.reject(res);
         }