@selfcommunity/react-ui 0.8.0-live.59 → 0.8.0-live.61

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

@@ -15,6 +15,9 @@ const react_core_1 = require("@selfcommunity/react-core");
 const constants_1 = require("./constants");
 const ConfirmDialog_1 = tslib_1.__importDefault(require("../../../shared/ConfirmDialog/ConfirmDialog"));
 const components_react_1 = require("@livekit/components-react");
+const LiveStreamProvider_1 = require("./LiveStreamProvider");
+const utils_1 = require("@selfcommunity/utils");
+const Errors_1 = require("../../../constants/Errors");
 const PREFIX = 'SCParticipantTileActionsMenu';
 const classes = {
     root: `${PREFIX}-root`,
@@ -60,10 +63,9 @@ function ContributionActionsMenu(props) {
     const isMobile = (0, material_1.useMediaQuery)(theme.breakpoints.down('md'));
     const scContext = (0, react_1.useContext)(react_core_1.SCContext);
     const scUserContext = (0, react_1.useContext)(react_core_1.SCUserContext);
-    const scUserId = scUserContext.user ? scUserContext.user.id : null;
-    const scRoutingContext = (0, react_core_1.useSCRouting)();
     const { enqueueSnackbar } = (0, notistack_1.useSnackbar)();
     const p = (0, components_react_1.useEnsureParticipant)(participant);
+    const { liveStream } = (0, LiveStreamProvider_1.useLiveStream)();
     // GENERAL POPPER STATE
     const [open, setOpen] = (0, react_1.useState)(false);
     const [isLoading, setIsLoading] = (0, react_1.useState)(false);
@@ -97,23 +99,17 @@ function ContributionActionsMenu(props) {
         }
     }
     /**
-     * Perform delete contribution
+     * Perform ban participant
      */
-    const performBanParticipant = (0, react_1.useMemo)(() => () => {
-        return api_services_1.http
-            .request({
-            url: api_services_1.Endpoints.DeleteComment.url({ id: p.identity }),
-            method: api_services_1.Endpoints.DeleteComment.method
-        })
-            .then((res) => {
-            if (res.status >= 300) {
-                return Promise.reject(res);
-            }
-            return Promise.resolve(res.data);
-        });
-    }, [p]);
+    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);
+        if (res.status >= 300) {
+            return Promise.reject(res);
+        }
+        return yield Promise.resolve(res.data);
+    }), [p]);
     /**
-     * handle action
+     * Handle action
      */
     function handleAction(action) {
         if (action === constants_1.BAN_ROOM_USER) {
@@ -150,24 +146,29 @@ function ContributionActionsMenu(props) {
         if (p && !isLoading && !currentActionLoading) {
             if (currentAction === constants_1.BAN_ROOM_USER) {
                 setCurrentActionLoading(constants_1.BAN_ROOM_USER);
-                /* performBanParticipant()
-                  .then(() => {
+                performBanParticipant()
+                    .then(() => {
                     onBanParticipant && onBanParticipant(p);
                     performPostConfirmAction(true);
-                  })
-                  .catch((error) => {
-                    Logger.error(SCOPE_SC_UI, error);
+                })
+                    .catch((error) => {
+                    utils_1.Logger.error(Errors_1.SCOPE_SC_UI, error);
                     performPostConfirmAction(false);
-                  }); */
+                });
             }
         }
     }
     /**
      * Can authenticated ban a user in a room
      */
-    function canBanUser() {
-        return scUserContext.user && react_core_1.UserUtils.isStaff(scUserContext.user) && scUserContext.user.id.toString() !== p.identity;
-    }
+    const canBanUser = (0, react_1.useMemo)(() => () => {
+        return (scUserContext.user &&
+            liveStream &&
+            p &&
+            p.identity &&
+            liveStream.host.id === scUserContext.user.id &&
+            scUserContext.user.id.toString() !== p.identity);
+    }, [scUserContext, liveStream, p]);
     /**
      * Renders section general
      */
@@ -180,6 +181,12 @@ function ContributionActionsMenu(props) {
     function renderContent() {
         return ((0, jsx_runtime_1.jsx)(material_1.Box, { children: (0, jsx_runtime_1.jsx)(material_1.MenuList, { children: renderGeneralSection() }) }));
     }
+    /**
+     * Renders component only if the logged user has actions available
+     */
+    if (!canBanUser()) {
+        return null;
+    }
     /**
      * Renders component
      */

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

@@ -1,5 +1,5 @@
 import { SCUserType } from '@selfcommunity/types';
-export interface ParticipantTileProps {
+export interface ParticipantTileAvatarProps {
     className?: string;
     /**
      * User Object
@@ -12,4 +12,4 @@ export interface ParticipantTileProps {
      */
     participant?: any;
 }
-export default function UserAvatar(inProps: ParticipantTileProps): JSX.Element;
+export default function ParticipantTileAvatar(inProps: ParticipantTileAvatarProps): JSX.Element;

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

@@ -2,6 +2,7 @@
 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");
@@ -24,7 +25,7 @@ const Root = (0, styles_1.styled)(material_1.Box, {
         height: 100
     }
 }));
-function UserAvatar(inProps) {
+function ParticipantTileAvatar(inProps) {
     // PROPS
     const props = (0, system_1.useThemeProps)({
         props: inProps,
@@ -33,6 +34,16 @@ function UserAvatar(inProps) {
     const { className, user, participant } = props, rest = tslib_1.__rest(props, ["className", "user", "participant"]);
     // CONTEXT
     const scContext = (0, react_core_1.useSCContext)();
-    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(className, classes.root) }, rest, { children: user ? ((0, jsx_runtime_1.jsx)("img", { src: `${user.avatar}` })) : participant ? ((0, jsx_runtime_1.jsx)("img", { src: `${scContext.settings.portal}/api/v2/avatar/${participant.identity}` })) : ((0, jsx_runtime_1.jsx)(ParticipantPlaceholder_1.default, {})) })));
+    // 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 })));
 }
-exports.default = UserAvatar;
+exports.default = ParticipantTileAvatar;

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

@@ -2,7 +2,6 @@ import type { CreateLocalTracksOptions, LocalAudioTrack, LocalTrack, LocalVideoT
 import { Track } from 'livekit-client';
 import * as React from 'react';
 import type { LocalUserChoices } from '@livekit/components-core';
-import { SCLiveStreamType } from '@selfcommunity/types';
 /**
  * Props for the PreJoin component.
  * @public
@@ -15,11 +14,6 @@ export interface PreJoinProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
      */
     onValidate?: (values: LocalUserChoices) => boolean;
     onError?: (error: Error) => void;
-    /**
-     * Livestream Object
-     * @default null
-     */
-    liveStream?: SCLiveStreamType;
     /** Prefill the input form with initial values. */
     defaults?: Partial<LocalUserChoices>;
     /** Display a debug window for your convenience. */
@@ -58,4 +52,4 @@ export declare function usePreviewDevice<T extends LocalVideoTrack | LocalAudioT
  * ```
  * @public
  */
-export declare function PreJoin({ liveStream, defaults, onValidate, onSubmit, onError, debug, joinLabel, micLabel, camLabel, userLabel, persistUserChoices, ...htmlProps }: PreJoinProps): JSX.Element;
+export declare function PreJoin({ defaults, onValidate, onSubmit, onError, debug, joinLabel, micLabel, camLabel, userLabel, persistUserChoices, ...htmlProps }: PreJoinProps): JSX.Element;

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

@@ -12,6 +12,7 @@ const react_core_1 = require("@selfcommunity/react-core");
 const ParticipantTileAvatar_1 = tslib_1.__importDefault(require("./ParticipantTileAvatar"));
 const react_1 = require("react");
 const TrackToggle_1 = require("./TrackToggle");
+const LiveStreamProvider_1 = require("./LiveStreamProvider");
 /** @alpha */
 function usePreviewTracks(options, onError) {
     const [tracks, setTracks] = React.useState();
@@ -152,7 +153,8 @@ exports.usePreviewDevice = usePreviewDevice;
  * @public
  */
 function PreJoin(_a) {
-    var { liveStream, defaults = {}, onValidate, onSubmit, onError, debug, joinLabel = 'Join Room', micLabel = 'Microphone', camLabel = 'Camera', userLabel = 'Username', persistUserChoices = true } = _a, htmlProps = tslib_1.__rest(_a, ["liveStream", "defaults", "onValidate", "onSubmit", "onError", "debug", "joinLabel", "micLabel", "camLabel", "userLabel", "persistUserChoices"]);
+    var { defaults = {}, onValidate, onSubmit, onError, debug, joinLabel = 'Join Room', micLabel = 'Microphone', camLabel = 'Camera', userLabel = 'Username', persistUserChoices = true } = _a, htmlProps = tslib_1.__rest(_a, ["defaults", "onValidate", "onSubmit", "onError", "debug", "joinLabel", "micLabel", "camLabel", "userLabel", "persistUserChoices"]);
+    const { liveStream } = (0, LiveStreamProvider_1.useLiveStream)();
     const [userChoices, setUserChoices] = React.useState(components_core_2.defaultUserChoices);
     // TODO: Remove and pipe `defaults` object directly into `usePersistentUserChoices` once we fully switch from type `LocalUserChoices` to `UserChoices`.
     const partialDefaults = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (defaults.audioDeviceId !== undefined && { audioDeviceId: defaults.audioDeviceId })), (defaults.videoDeviceId !== undefined && { videoDeviceId: defaults.videoDeviceId })), (defaults.audioEnabled !== undefined && { audioEnabled: defaults.audioEnabled })), (defaults.videoEnabled !== undefined && { videoEnabled: defaults.videoEnabled })), (defaults.username !== undefined && { username: defaults.username }));
@@ -240,8 +242,8 @@ function PreJoin(_a) {
             components_core_1.log.warn('Validation failed with: ', userChoices);
         }
     }
-    const canUseAudio = (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.muteParticipant)); }, [scUserContext, liveStream]);
-    const canUseVideo = (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.disableVideo)); }, [scUserContext, liveStream]);
+    const canUseAudio = (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.muteParticipants))); }, [scUserContext, liveStream]);
+    const canUseVideo = (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.disableVideo))); }, [scUserContext, liveStream]);
     return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "lk-prejoin" }, htmlProps, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "lk-video-container" }, { children: [videoTrack && (0, jsx_runtime_1.jsx)("video", { ref: videoEl, width: "1280", height: "720", "data-lk-facing-mode": facingMode }), (!videoTrack || !videoEnabled) && ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "lk-camera-off-note" }, { children: (0, jsx_runtime_1.jsx)(ParticipantTileAvatar_1.default, { user: scUserContext.user }) })))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "lk-button-group-container" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "lk-button-group audio" }, { children: [(0, jsx_runtime_1.jsx)(TrackToggle_1.TrackToggle, Object.assign({ disabled: !canUseAudio, initialState: audioEnabled, source: livekit_client_1.Track.Source.Microphone, onChange: (enabled) => setAudioEnabled(enabled) }, { children: micLabel })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "lk-button-group-menu" }, { children: (0, jsx_runtime_1.jsx)(components_react_1.MediaDeviceMenu, { initialSelection: audioDeviceId, kind: "audioinput", disabled: !audioTrack || !canUseAudio, tracks: { audioinput: audioTrack }, onActiveDeviceChange: (_, id) => setAudioDeviceId(id) }) }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "lk-button-group video" }, { children: [(0, jsx_runtime_1.jsx)(TrackToggle_1.TrackToggle, Object.assign({ disabled: !canUseVideo, initialState: videoEnabled, source: livekit_client_1.Track.Source.Camera, onChange: (enabled) => setVideoEnabled(enabled) }, { children: camLabel })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "lk-button-group-menu" }, { children: (0, jsx_runtime_1.jsx)(components_react_1.MediaDeviceMenu, { initialSelection: videoDeviceId, kind: "videoinput", disabled: !videoTrack || !canUseVideo, tracks: { videoinput: videoTrack }, onActiveDeviceChange: (_, id) => setVideoDeviceId(id) }) }))] }))] })), (0, jsx_runtime_1.jsxs)("form", Object.assign({ className: "lk-username-container" }, { children: [(0, jsx_runtime_1.jsx)("input", { className: "lk-form-control", id: "username", name: "username", type: "text", defaultValue: username, placeholder: userLabel, onChange: (inputEl) => setUsername(inputEl.target.value), autoComplete: "off" }), (0, jsx_runtime_1.jsx)("button", Object.assign({ className: "lk-button lk-join-button", type: "submit", onClick: handleSubmit, disabled: !isValid }, { children: joinLabel }))] })), debug && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("strong", { children: "User Choices:" }), (0, jsx_runtime_1.jsxs)("ul", Object.assign({ className: "lk-list", style: { overflow: 'hidden', maxWidth: '15rem' } }, { children: [(0, jsx_runtime_1.jsxs)("li", { children: ["Username: ", `${userChoices.username}`] }), (0, jsx_runtime_1.jsxs)("li", { children: ["Video Enabled: ", `${userChoices.videoEnabled}`] }), (0, jsx_runtime_1.jsxs)("li", { children: ["Audio Enabled: ", `${userChoices.audioEnabled}`] }), (0, jsx_runtime_1.jsxs)("li", { children: ["Video Device: ", `${userChoices.videoDeviceId}`] }), (0, jsx_runtime_1.jsxs)("li", { children: ["Audio Device: ", `${userChoices.audioDeviceId}`] })] }))] }))] })));
 }
 exports.PreJoin = PreJoin;

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

@@ -0,0 +1,19 @@
+import * as React from 'react';
+export interface UseSettingsToggleProps {
+    props: React.ButtonHTMLAttributes<HTMLButtonElement>;
+}
+/**
+ * The `useSettingsToggle` hook provides state and functions for toggling the settings menu.
+ */
+export declare function useSettingsToggle({ props }: UseSettingsToggleProps): {
+    mergedProps: React.ButtonHTMLAttributes<HTMLButtonElement> & {
+        className: string;
+        onClick: () => void;
+        'aria-pressed': string;
+    };
+};
+export type SettingsMenuToggleProps = React.ButtonHTMLAttributes<HTMLButtonElement>;
+/**
+ * The `SettingsMenuToggle` component is a button that toggles the visibility of the `SettingsMenu` component.
+ */
+export declare const SettingsMenuToggle: (props: SettingsMenuToggleProps & React.RefAttributes<HTMLButtonElement>) => React.ReactNode;

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

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SettingsMenuToggle = exports.useSettingsToggle = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = tslib_1.__importStar(require("react"));
+const utils_1 = require("./utils");
+const components_react_1 = require("@livekit/components-react");
+/**
+ * The `useSettingsToggle` hook provides state and functions for toggling the settings menu.
+ */
+function useSettingsToggle({ props }) {
+    const { dispatch, state } = (0, components_react_1.useLayoutContext)().widget;
+    const className = 'lk-button lk-settings-toggle';
+    const mergedProps = React.useMemo(() => {
+        return (0, utils_1.mergePropsReactAria)(props, {
+            className,
+            onClick: () => {
+                if (dispatch)
+                    dispatch({ msg: 'toggle_settings' });
+            },
+            'aria-pressed': (state === null || state === void 0 ? void 0 : state.showSettings) ? 'true' : 'false'
+        });
+    }, [props, className, dispatch, state]);
+    return { mergedProps };
+}
+exports.useSettingsToggle = useSettingsToggle;
+/**
+ * The `SettingsMenuToggle` component is a button that toggles the visibility of the `SettingsMenu` component.
+ */
+exports.SettingsMenuToggle = 
+/* @__PURE__ */ React.forwardRef(function SettingsMenuToggle(props, ref) {
+    const { mergedProps } = useSettingsToggle({ props });
+    return ((0, jsx_runtime_1.jsx)("button", Object.assign({ ref: ref }, mergedProps, { children: props.children })));
+});

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

@@ -2,9 +2,6 @@ import * as React from 'react';
 import type { MessageDecoder, MessageEncoder } from '@livekit/components-core';
 import { MessageFormatter } from '@livekit/components-react';
 import { SCUserType } from '@selfcommunity/types';
-/**
- * @public
- */
 export interface VideoConferenceProps extends React.HTMLAttributes<HTMLDivElement> {
     chatMessageFormatter?: MessageFormatter;
     chatMessageEncoder?: MessageEncoder;
@@ -16,7 +13,7 @@ export interface VideoConferenceProps extends React.HTMLAttributes<HTMLDivElemen
     disableMicrophone?: boolean;
     disableCamera?: boolean;
     disableShareScreen?: boolean;
-    hideParticipantList?: boolean;
+    hideParticipantsList?: boolean;
     showSettings?: boolean;
 }
 /**
@@ -24,17 +21,5 @@ export interface VideoConferenceProps extends React.HTMLAttributes<HTMLDivElemen
  * It provides functionality such as focusing on one participant, grid view with pagination to handle large numbers
  * of participants, basic non-persistent chat, screen sharing, and more.
  *
- * @remarks
- * The component is implemented with other LiveKit components like `FocusContextProvider`,
- * `GridLayout`, `ControlBar`, `FocusLayoutContainer` and `FocusLayout`.
- * You can use these components as a starting point for your own custom video conferencing application.
- *
- * @example
- * ```tsx
- * <LiveKitRoom>
- *   <VideoConference />
- * <LiveKitRoom>
- * ```
- * @public
  */
-export declare function VideoConference({ chatMessageFormatter, chatMessageDecoder, chatMessageEncoder, SettingsComponent, speakerFocused, disableChat, disableMicrophone, disableCamera, disableShareScreen, hideParticipantList, showSettings, ...props }: VideoConferenceProps): JSX.Element;
+export declare function VideoConference({ chatMessageFormatter, chatMessageDecoder, chatMessageEncoder, SettingsComponent, speakerFocused, disableChat, disableMicrophone, disableCamera, disableShareScreen, hideParticipantsList, showSettings, ...props }: VideoConferenceProps): JSX.Element;

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

@@ -8,27 +8,16 @@ const components_core_1 = require("@livekit/components-core");
 const livekit_client_1 = require("livekit-client");
 const components_react_1 = require("@livekit/components-react");
 const ParticipantTile_1 = require("./ParticipantTile");
+const ControlBar_1 = require("./ControlBar");
 /**
  * The `VideoConference` ready-made component is your drop-in solution for a classic video conferencing application.
  * It provides functionality such as focusing on one participant, grid view with pagination to handle large numbers
  * of participants, basic non-persistent chat, screen sharing, and more.
  *
- * @remarks
- * The component is implemented with other LiveKit components like `FocusContextProvider`,
- * `GridLayout`, `ControlBar`, `FocusLayoutContainer` and `FocusLayout`.
- * You can use these components as a starting point for your own custom video conferencing application.
- *
- * @example
- * ```tsx
- * <LiveKitRoom>
- *   <VideoConference />
- * <LiveKitRoom>
- * ```
- * @public
  */
 function VideoConference(_a) {
     var _b, _c;
-    var { chatMessageFormatter, chatMessageDecoder, chatMessageEncoder, SettingsComponent, speakerFocused, disableChat = false, disableMicrophone = false, disableCamera = false, disableShareScreen = false, hideParticipantList = false, showSettings } = _a, props = tslib_1.__rest(_a, ["chatMessageFormatter", "chatMessageDecoder", "chatMessageEncoder", "SettingsComponent", "speakerFocused", "disableChat", "disableMicrophone", "disableCamera", "disableShareScreen", "hideParticipantList", "showSettings"]);
+    var { chatMessageFormatter, chatMessageDecoder, chatMessageEncoder, SettingsComponent, speakerFocused, disableChat = false, disableMicrophone = false, disableCamera = false, disableShareScreen = false, hideParticipantsList = false, showSettings } = _a, props = tslib_1.__rest(_a, ["chatMessageFormatter", "chatMessageDecoder", "chatMessageEncoder", "SettingsComponent", "speakerFocused", "disableChat", "disableMicrophone", "disableCamera", "disableShareScreen", "hideParticipantsList", "showSettings"]);
     const [widgetState, setWidgetState] = React.useState({
         showChat: false,
         unreadMessages: 0,
@@ -39,7 +28,6 @@ function VideoConference(_a) {
         { source: livekit_client_1.Track.Source.Camera, withPlaceholder: true },
         { source: livekit_client_1.Track.Source.ScreenShare, withPlaceholder: false }
     ], { updateOnlyOn: [livekit_client_1.RoomEvent.ActiveSpeakersChanged], onlySubscribed: false });
-    const { localParticipant } = (0, components_react_1.useLocalParticipant)();
     const participants = (0, components_react_1.useParticipants)();
     const widgetUpdate = (state) => {
         components_core_1.log.debug('updating widget state', state);
@@ -100,13 +88,11 @@ function VideoConference(_a) {
         participants,
         speakerFocused
     ]);
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "lk-video-conference" }, props, { children: [(0, components_core_1.isWeb)() && ((0, jsx_runtime_1.jsxs)(components_react_1.LayoutContextProvider, Object.assign({ value: layoutContext, onPinChange: handleFocusStateChange, onWidgetChange: widgetUpdate }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "lk-video-conference-inner" }, { children: [!focusTrack ? ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "lk-grid-layout-wrapper" }, { children: (0, jsx_runtime_1.jsx)(components_react_1.GridLayout, Object.assign({ tracks: tracks }, { children: (0, jsx_runtime_1.jsx)(ParticipantTile_1.ParticipantTile, {}) })) }))) : ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "lk-focus-layout-wrapper" }, { children: (0, jsx_runtime_1.jsxs)(components_react_1.FocusLayoutContainer, { children: [!hideParticipantList && ((0, jsx_runtime_1.jsx)(components_react_1.CarouselLayout, Object.assign({ tracks: carouselTracks }, { children: (0, jsx_runtime_1.jsx)(ParticipantTile_1.ParticipantTile, {}) }))), focusTrack && (0, jsx_runtime_1.jsx)(components_react_1.FocusLayout, { trackRef: focusTrack })] }) }))), (0, jsx_runtime_1.jsx)(components_react_1.ControlBar, { controls: Object.assign(Object.assign({}, (localParticipant.name !== speakerFocused.username
-                                    ? {
-                                        chat: !disableChat,
-                                        microphone: !disableMicrophone,
-                                        camera: !disableCamera,
-                                        screenShare: !disableShareScreen
-                                    }
-                                    : {})), { settings: !!SettingsComponent }) })] })), !disableChat && ((0, jsx_runtime_1.jsx)(components_react_1.Chat, { style: { display: widgetState.showChat ? 'grid' : 'none' }, messageFormatter: chatMessageFormatter, messageEncoder: chatMessageEncoder, messageDecoder: chatMessageDecoder })), SettingsComponent && ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "lk-settings-menu-modal", style: { display: widgetState.showSettings ? 'block' : 'none' } }, { children: (0, jsx_runtime_1.jsx)(SettingsComponent, {}) })))] }))), (0, jsx_runtime_1.jsx)(components_react_1.RoomAudioRenderer, {}), (0, jsx_runtime_1.jsx)(components_react_1.ConnectionStateToast, {})] })));
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "lk-video-conference" }, props, { children: [(0, components_core_1.isWeb)() && ((0, jsx_runtime_1.jsxs)(components_react_1.LayoutContextProvider, Object.assign({ value: layoutContext, onPinChange: handleFocusStateChange, onWidgetChange: widgetUpdate }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "lk-video-conference-inner" }, { children: [!focusTrack ? ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "lk-grid-layout-wrapper" }, { children: (0, jsx_runtime_1.jsx)(components_react_1.GridLayout, Object.assign({ tracks: tracks }, { children: (0, jsx_runtime_1.jsx)(ParticipantTile_1.ParticipantTile, {}) })) }))) : ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "lk-focus-layout-wrapper" }, { children: (0, jsx_runtime_1.jsxs)(components_react_1.FocusLayoutContainer, { children: [!hideParticipantsList && ((0, jsx_runtime_1.jsx)(components_react_1.CarouselLayout, Object.assign({ tracks: carouselTracks }, { children: (0, jsx_runtime_1.jsx)(ParticipantTile_1.ParticipantTile, {}) }))), focusTrack && (0, jsx_runtime_1.jsx)(components_react_1.FocusLayout, { trackRef: focusTrack })] }) }))), (0, jsx_runtime_1.jsx)(ControlBar_1.ControlBar, { controls: Object.assign({
+                                    chat: !disableChat,
+                                    microphone: !disableMicrophone,
+                                    camera: !disableCamera,
+                                    screenShare: !disableShareScreen
+                                }, { settings: !!SettingsComponent }) })] })), !disableChat && ((0, jsx_runtime_1.jsx)(components_react_1.Chat, { style: { display: widgetState.showChat ? 'grid' : 'none' }, messageFormatter: chatMessageFormatter, messageEncoder: chatMessageEncoder, messageDecoder: chatMessageDecoder })), SettingsComponent && ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "lk-settings-menu-modal", style: { display: widgetState.showSettings ? 'block' : 'none' } }, { children: (0, jsx_runtime_1.jsx)(SettingsComponent, {}) })))] }))), (0, jsx_runtime_1.jsx)(components_react_1.RoomAudioRenderer, {}), (0, jsx_runtime_1.jsx)(components_react_1.ConnectionStateToast, {})] })));
 }
 exports.VideoConference = VideoConference;

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

@@ -0,0 +1,27 @@
+/// <reference types="react" />
+/**
+ * Calls all functions in the order they were chained with the same arguments.
+ * @internal
+ */
+export declare function chain(...callbacks: any[]): (...args: any[]) => void;
+interface Props {
+    [key: string]: any;
+}
+type TupleTypes<T> = {
+    [P in keyof T]: T[P];
+} extends {
+    [key: number]: infer V;
+} ? V : never;
+type UnionToIntersection<U> = (U extends any ? (k: U) => void : never) extends (k: infer I) => void ? I : never;
+/**
+ * Merges multiple props objects together. Event handlers are chained,
+ * classNames are combined, and ids are deduplicated - different ids
+ * will trigger a side-effect and re-render components hooked up with `useId`.
+ * For all other props, the last prop object overrides all previous ones.
+ * @param args - Multiple sets of props to merge together.
+ * @internal
+ */
+export declare function mergePropsReactAria<T extends Props[]>(...args: T): UnionToIntersection<TupleTypes<T>>;
+export declare function isProp<U extends HTMLElement, T extends React.HTMLAttributes<U>>(prop: T | undefined): prop is T;
+export declare function mergeProps<U extends HTMLElement, T extends Array<React.HTMLAttributes<U> | undefined>>(...props: T): import("react").HTMLAttributes<U>;
+export {};

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

@@ -0,0 +1,82 @@
+"use strict";
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.mergeProps = exports.isProp = exports.mergePropsReactAria = exports.chain = void 0;
+const tslib_1 = require("tslib");
+const clsx_1 = tslib_1.__importDefault(require("clsx"));
+/**
+ * Calls all functions in the order they were chained with the same arguments.
+ * @internal
+ */
+function chain(...callbacks) {
+    return (...args) => {
+        for (const callback of callbacks) {
+            if (typeof callback === 'function') {
+                try {
+                    callback(...args);
+                }
+                catch (e) {
+                    console.error(e);
+                }
+            }
+        }
+    };
+}
+exports.chain = chain;
+/**
+ * Merges multiple props objects together. Event handlers are chained,
+ * classNames are combined, and ids are deduplicated - different ids
+ * will trigger a side-effect and re-render components hooked up with `useId`.
+ * For all other props, the last prop object overrides all previous ones.
+ * @param args - Multiple sets of props to merge together.
+ * @internal
+ */
+function mergePropsReactAria(...args) {
+    // Start with a base clone of the first argument. This is a lot faster than starting
+    // with an empty object and adding properties as we go.
+    const result = Object.assign({}, args[0]);
+    for (let i = 1; i < args.length; i++) {
+        const props = args[i];
+        for (const key in props) {
+            const a = result[key];
+            const b = props[key];
+            // Chain events
+            if (typeof a === 'function' &&
+                typeof b === 'function' &&
+                // This is a lot faster than a regex.
+                key[0] === 'o' &&
+                key[1] === 'n' &&
+                key.charCodeAt(2) >= /* 'A' */ 65 &&
+                key.charCodeAt(2) <= /* 'Z' */ 90) {
+                result[key] = chain(a, b);
+                // Merge classnames, sometimes classNames are empty string which eval to false, so we just need to do a type check
+            }
+            else if ((key === 'className' || key === 'UNSAFE_className') && typeof a === 'string' && typeof b === 'string') {
+                result[key] = (0, clsx_1.default)(a, b);
+            }
+            else {
+                result[key] = b !== undefined ? b : a;
+            }
+        }
+    }
+    return result;
+}
+exports.mergePropsReactAria = mergePropsReactAria;
+function isProp(prop) {
+    return prop !== undefined;
+}
+exports.isProp = isProp;
+function mergeProps(...props) {
+    return mergePropsReactAria(...props.filter(isProp));
+}
+exports.mergeProps = mergeProps;

package/lib/cjs/components/NavigationMenuIconButton/NavigationMenuDrawer.js

@@ -39,6 +39,6 @@ function NavigationMenuDrawer(inProps) {
     const { className = null, showDrawerHeader = true, drawerHeaderContent = (0, jsx_runtime_1.jsx)(DefaultHeaderContent_1.default, {}), drawerContent = (0, jsx_runtime_1.jsx)(DefaultDrawerContent_1.default, {}), showDrawerFooterContent = true, drawerFooterContent = null, ScrollContainerProps = {}, CreateLiveStreamButtonComponentProps = {}, open, onClose } = props, rest = tslib_1.__rest(props, ["className", "showDrawerHeader", "drawerHeaderContent", "drawerContent", "showDrawerFooterContent", "drawerFooterContent", "ScrollContainerProps", "CreateLiveStreamButtonComponentProps", "open", "onClose"]);
     const scUserContext = (0, react_core_1.useSCUser)();
     const canCreateLiveStream = (0, react_1.useMemo)(() => { var _a, _b; return (_b = (_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.permission) === null || _b === void 0 ? void 0 : _b.create_livestream; }, [(_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.permission]);
-    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ anchor: "left", className: (0, classnames_1.default)(classes.root, className), open: open, onClose: onClose }, rest, { children: [showDrawerHeader && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.drawerHeader }, { children: [drawerHeaderContent, (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ className: classes.drawerHeaderAction, onClick: onClose }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "close" }) }))] })), (0, jsx_runtime_1.jsx)(material_1.Divider, {})] })), (0, jsx_runtime_1.jsx)(ScrollContainer_1.default, Object.assign({}, ScrollContainerProps, { children: (0, jsx_runtime_1.jsx)(material_1.List, Object.assign({ className: classes.drawerContent, onClick: onClose }, { children: drawerContent })) })), showDrawerFooterContent && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [Boolean(drawerContent || canCreateLiveStream) && (0, jsx_runtime_1.jsx)(material_1.Divider, {}), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.drawerFooter }, { children: drawerFooterContent ? (drawerFooterContent) : ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.drawerFooterLiveStream }, { children: (0, jsx_runtime_1.jsx)(CreateLiveStreamButton_1.default, Object.assign({ color: "primary", className: classes.drawerFooterLiveStreamButton, fullWidth: true }, CreateLiveStreamButtonComponentProps)) }))) }))] }))] })));
+    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ anchor: "left", className: (0, classnames_1.default)(classes.root, className), open: open, onClose: onClose }, rest, { children: [showDrawerHeader && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.drawerHeader }, { children: [drawerHeaderContent, (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ className: classes.drawerHeaderAction, onClick: onClose }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "close" }) }))] })), (0, jsx_runtime_1.jsx)(material_1.Divider, {})] })), (0, jsx_runtime_1.jsx)(ScrollContainer_1.default, Object.assign({}, ScrollContainerProps, { children: (0, jsx_runtime_1.jsx)(material_1.List, Object.assign({ className: classes.drawerContent, onClick: onClose }, { children: drawerContent })) })), showDrawerFooterContent && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.drawerFooter }, { children: drawerFooterContent ? (drawerFooterContent) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [canCreateLiveStream && (0, jsx_runtime_1.jsx)(material_1.Divider, {}), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.drawerFooterLiveStream }, { children: (0, jsx_runtime_1.jsx)(CreateLiveStreamButton_1.default, Object.assign({ color: "primary", className: classes.drawerFooterLiveStreamButton, fullWidth: true }, CreateLiveStreamButtonComponentProps)) }))] })) })) }))] })));
 }
 exports.default = NavigationMenuDrawer;

package/lib/esm/components/EventForm/EventAddress.js

@@ -5,7 +5,7 @@ import Icon from '@mui/material/Icon';
 import { styled } from '@mui/material/styles';
 import { useThemeProps } from '@mui/system';
 import { useLoadScript } from '@react-google-maps/api';
-import { useSCContext } from '@selfcommunity/react-core';
+import { useSCContext, useSCUser } from '@selfcommunity/react-core';
 import { SCEventLocationType } from '@selfcommunity/types';
 import axios from 'axios';
 import classNames from 'classnames';
@@ -40,6 +40,7 @@ const Root = styled(Box, {
     slot: 'EventAddressRoot'
 })(() => ({}));
 export default function EventAddress(inProps) {
+    var _a;
     //PROPS
     const props = useThemeProps({
         props: inProps,
@@ -65,11 +66,13 @@ export default function EventAddress(inProps) {
     }, [event]);
     // CONTEXT
     const scContext = useSCContext();
+    const scUserContext = useSCUser();
     const geocodingApiKey = useMemo(() => scContext.settings.integrations && scContext.settings.integrations.geocoding.apiKey, [scContext.settings.integrations]);
     const { isLoaded } = useLoadScript({
         googleMapsApiKey: scContext.settings.integrations.geocoding.apiKey,
         libraries: ['places', 'geocoding']
     });
+    const canViewLiveTab = useMemo(() => { var _a, _b; return ((_b = (_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.permission) === null || _b === void 0 ? void 0 : _b.create_live_stream) || event.live_stream; }, [(_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.permission]);
     // HANDLERS
     const handleChange = (_event, newValue) => {
         setLocation(newValue);
@@ -133,7 +136,7 @@ export default function EventAddress(inProps) {
     if (!geocodingApiKey && !isLoaded) {
         return _jsx(HiddenPlaceholder, {});
     }
-    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, { children: [_jsxs(Tabs, Object.assign({ className: classes.tabs, value: location, onChange: handleChange, indicatorColor: "secondary", textColor: "secondary", variant: "fullWidth" }, { children: [_jsx(Tab, { value: SCEventLocationType.PERSON, classes: { root: classes.tab }, icon: _jsx(Icon, { children: "add_location_alt" }), iconPosition: "start", label: _jsx(FormattedMessage, { id: "ui.eventForm.address.live.label", defaultMessage: "ui.eventForm.address.live.label" }) }), _jsx(Tab, { value: SCEventLocationType.ONLINE, classes: { root: classes.tab }, icon: _jsx(Icon, { children: "play_circle_outline" }), iconPosition: "start", label: _jsx(FormattedMessage, { id: "ui.eventForm.address.online.label", defaultMessage: "ui.eventForm.address.online.label" }) }), _jsx(Tab, { value: SCEventLocationType.LIVESTREAM, classes: { root: classes.tab }, icon: _jsx(Icon, { children: "photo_camera" }), iconPosition: "start", label: _jsx(FormattedMessage, { id: "ui.eventForm.address.liveStream.label", defaultMessage: "ui.eventForm.address.liveStream.label" }) })] })), _jsxs(Box, Object.assign({ className: classes.tabContent }, { children: [location === SCEventLocationType.PERSON && (_jsx(Autocomplete, { size: "small", value: geolocation, onChange: handleSelection, inputValue: inputValue, onInputChange: handleLocationChange, options: suggestions, getOptionLabel: (option) => option.description || geolocation.description, noOptionsText: _jsx(FormattedMessage, { id: "ui.eventForm.address.live.noResults", defaultMessage: "ui.eventForm.address.live.noResults" }), isOptionEqualToValue: (option, value) => option.description === value.description, renderInput: (params) => (_jsx(TextField, Object.assign({}, params, { label: _jsx(FormattedMessage, { id: "ui.eventForm.address.live.placeholder", defaultMessage: "ui.eventForm.address.live.placeholder" }), variant: "outlined", fullWidth: true, InputProps: Object.assign(Object.assign({}, params.InputProps), { endAdornment: (_jsxs(_Fragment, { children: [_jsx(InputAdornment, Object.assign({ position: "start" }, { children: _jsx(Icon, { children: "add_location_alt" }) })), params.InputProps.endAdornment] })) }) }))) })), location === SCEventLocationType.ONLINE && (_jsx(UrlTextField, { size: "small", fullWidth: true, type: "url", placeholder: `${intl.formatMessage(messages.virtualPlaceholder)}`, helperText: _jsx(FormattedMessage, { id: "ui.eventForm.address.online.help", defaultMessage: "ui.eventForm.address.online.help" }), InputProps: {
+    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, { children: [_jsxs(Tabs, Object.assign({ className: classes.tabs, value: location, onChange: handleChange, indicatorColor: "secondary", textColor: "secondary", variant: "fullWidth" }, { children: [_jsx(Tab, { value: SCEventLocationType.PERSON, classes: { root: classes.tab }, icon: _jsx(Icon, { children: "add_location_alt" }), iconPosition: "start", label: _jsx(FormattedMessage, { id: "ui.eventForm.address.live.label", defaultMessage: "ui.eventForm.address.live.label" }) }), _jsx(Tab, { value: SCEventLocationType.ONLINE, classes: { root: classes.tab }, icon: _jsx(Icon, { children: "play_circle_outline" }), iconPosition: "start", label: _jsx(FormattedMessage, { id: "ui.eventForm.address.online.label", defaultMessage: "ui.eventForm.address.online.label" }) }), canViewLiveTab && (_jsx(Tab, { value: SCEventLocationType.LIVESTREAM, classes: { root: classes.tab }, icon: _jsx(Icon, { children: "photo_camera" }), iconPosition: "start", label: _jsx(FormattedMessage, { id: "ui.eventForm.address.liveStream.label", defaultMessage: "ui.eventForm.address.liveStream.label" }) }))] })), _jsxs(Box, Object.assign({ className: classes.tabContent }, { children: [location === SCEventLocationType.PERSON && (_jsx(Autocomplete, { size: "small", value: geolocation, onChange: handleSelection, inputValue: inputValue, onInputChange: handleLocationChange, options: suggestions, getOptionLabel: (option) => option.description || geolocation.description, noOptionsText: _jsx(FormattedMessage, { id: "ui.eventForm.address.live.noResults", defaultMessage: "ui.eventForm.address.live.noResults" }), isOptionEqualToValue: (option, value) => option.description === value.description, renderInput: (params) => (_jsx(TextField, Object.assign({}, params, { label: _jsx(FormattedMessage, { id: "ui.eventForm.address.live.placeholder", defaultMessage: "ui.eventForm.address.live.placeholder" }), variant: "outlined", fullWidth: true, InputProps: Object.assign(Object.assign({}, params.InputProps), { endAdornment: (_jsxs(_Fragment, { children: [_jsx(InputAdornment, Object.assign({ position: "start" }, { children: _jsx(Icon, { children: "add_location_alt" }) })), params.InputProps.endAdornment] })) }) }))) })), location === SCEventLocationType.ONLINE && (_jsx(UrlTextField, { size: "small", fullWidth: true, type: "url", placeholder: `${intl.formatMessage(messages.virtualPlaceholder)}`, helperText: _jsx(FormattedMessage, { id: "ui.eventForm.address.online.help", defaultMessage: "ui.eventForm.address.online.help" }), InputProps: {
                             endAdornment: _jsx(Icon, { children: "play_circle_outline" })
-                        }, onChange: handleLinkChange })), location === SCEventLocationType.LIVESTREAM && (_jsxs(_Fragment, { children: [_jsx(LiveStream, { template: SCLiveStreamTemplateType.SNIPPET, liveStream: liveStream, actions: _jsx(_Fragment, {}) }), _jsx(LiveStreamFormSettings, { settings: liveStream.settings, onChange: handleLiveStreamSettingsChange })] }))] }))] })));
+                        }, onChange: handleLinkChange })), canViewLiveTab && location === SCEventLocationType.LIVESTREAM && (_jsxs(_Fragment, { children: [_jsx(LiveStream, { template: SCLiveStreamTemplateType.SNIPPET, liveStream: liveStream, actions: _jsx(_Fragment, {}) }), _jsx(LiveStreamFormSettings, { settings: liveStream.settings, onChange: handleLiveStreamSettingsChange })] }))] }))] })));
 }

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

@@ -6,7 +6,7 @@ import { styled } from '@mui/material/styles';
 import { useThemeProps } from '@mui/system';
 import { SCPreferences, useSCPreferences } from '@selfcommunity/react-core';
 import classNames from 'classnames';
-import { useCallback, useMemo, useState } from 'react';
+import { useCallback, useState } from 'react';
 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 { LIVESTREAM_DEFAULT_SETTINGS, PREFIX } from './constants';
@@ -96,8 +96,6 @@ export default function LiveStreamForm(inProps) {
     const [error, setError] = useState({});
     // PREFERENCES
     const scPreferences = useSCPreferences();
-    const privateEnabled = useMemo(() => scPreferences.preferences[SCPreferences.CONFIGURATIONS_EVENTS_PRIVATE_ENABLED].value, [scPreferences.preferences]);
-    const visibilityEnabled = useMemo(() => scPreferences.preferences[SCPreferences.CONFIGURATIONS_EVENTS_VISIBILITY_ENABLED].value, [scPreferences.preferences]);
     const _backgroundCover = Object.assign({}, (field.cover
         ? { background: `url('${field.cover}') center / cover` }
         : { background: `url('${scPreferences.preferences[SCPreferences.IMAGES_USER_DEFAULT_COVER].value}') center / cover` }));
@@ -151,7 +149,7 @@ export default function LiveStreamForm(inProps) {
             Logger.error(SCOPE_SC_UI, e);
             onError === null || onError === void 0 ? void 0 : onError(e);
         });
-    }, [field, privateEnabled, visibilityEnabled, onSuccess, onError]);
+    }, [field, onSuccess, onError]);
     const handleChange = useCallback((event) => {
         const { name, value } = event.target;
         setField((prev) => (Object.assign(Object.assign({}, prev), { [name]: value })));

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

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