@selfcommunity/react-ui 0.8.0-live.58 → 0.8.0-live.60

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

@@ -0,0 +1,23 @@
+import type { CaptureOptionsBySource, ToggleSource } from '@livekit/components-core';
+import * as React from 'react';
+import { Track, TrackPublishOptions } from 'livekit-client';
+export declare function getSourceIcon(source: Track.Source, enabled: boolean): JSX.Element;
+export interface TrackToggleProps<T extends ToggleSource> extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onChange'> {
+    source: T;
+    showIcon?: boolean;
+    initialState?: boolean;
+    disabled?: boolean;
+    /**
+     * Function that is called when the enabled state of the toggle changes.
+     * The second function argument `isUserInitiated` is `true` if the change was initiated by a user interaction, such as a click.
+     */
+    onChange?: (enabled: boolean, isUserInitiated: boolean) => void;
+    captureOptions?: CaptureOptionsBySource<T>;
+    publishOptions?: TrackPublishOptions;
+    onDeviceError?: (error: Error) => void;
+}
+/**
+ * With the `TrackToggle` component it is possible to mute and unmute your camera and microphone.
+ * The component uses an html button element under the hood so you can treat it like a button.
+ */
+export declare const TrackToggle: <T extends ToggleSource>(props: TrackToggleProps<T> & React.RefAttributes<HTMLButtonElement>) => React.ReactNode;

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

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TrackToggle = exports.getSourceIcon = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = tslib_1.__importStar(require("react"));
+const livekit_client_1 = require("livekit-client");
+const components_react_1 = require("@livekit/components-react");
+function getSourceIcon(source, enabled) {
+    switch (source) {
+        case livekit_client_1.Track.Source.Microphone:
+            return enabled ? (0, jsx_runtime_1.jsx)(components_react_1.MicIcon, {}) : (0, jsx_runtime_1.jsx)(components_react_1.MicDisabledIcon, {});
+        case livekit_client_1.Track.Source.Camera:
+            return enabled ? (0, jsx_runtime_1.jsx)(components_react_1.CameraIcon, {}) : (0, jsx_runtime_1.jsx)(components_react_1.CameraDisabledIcon, {});
+        case livekit_client_1.Track.Source.ScreenShare:
+            return enabled ? (0, jsx_runtime_1.jsx)(components_react_1.ScreenShareStopIcon, {}) : (0, jsx_runtime_1.jsx)(components_react_1.ScreenShareIcon, {});
+        default:
+            return undefined;
+    }
+}
+exports.getSourceIcon = getSourceIcon;
+/**
+ * With the `TrackToggle` component it is possible to mute and unmute your camera and microphone.
+ * The component uses an html button element under the hood so you can treat it like a button.
+ */
+exports.TrackToggle = 
+/* @__PURE__ */ React.forwardRef(function TrackToggle(_a, ref) {
+    var { showIcon, disabled } = _a, props = tslib_1.__rest(_a, ["showIcon", "disabled"]);
+    const { buttonProps, enabled } = (0, components_react_1.useTrackToggle)(props);
+    return ((0, jsx_runtime_1.jsxs)("button", Object.assign({ ref: ref }, buttonProps, { disabled: disabled }, { children: [(showIcon !== null && showIcon !== void 0 ? showIcon : true) && getSourceIcon(props.source, enabled && !disabled), props.children] })));
+});

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

@@ -1,6 +1,7 @@
 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
  */
@@ -10,11 +11,11 @@ export interface VideoConferenceProps extends React.HTMLAttributes<HTMLDivElemen
     chatMessageDecoder?: MessageDecoder;
     /** @alpha */
     SettingsComponent?: React.ComponentType;
-    speakerFocused?: string;
+    speakerFocused?: SCUserType;
     disableChat?: boolean;
     disableMicrophone?: boolean;
     disableCamera?: boolean;
-    disableScreenShare?: boolean;
+    disableShareScreen?: boolean;
     hideParticipantList?: boolean;
     showSettings?: boolean;
 }
@@ -36,4 +37,4 @@ export interface VideoConferenceProps extends React.HTMLAttributes<HTMLDivElemen
  * ```
  * @public
  */
-export declare function VideoConference({ chatMessageFormatter, chatMessageDecoder, chatMessageEncoder, SettingsComponent, speakerFocused, disableChat, disableMicrophone, disableCamera, disableScreenShare, hideParticipantList, showSettings, ...props }: VideoConferenceProps): JSX.Element;
+export declare function VideoConference({ chatMessageFormatter, chatMessageDecoder, chatMessageEncoder, SettingsComponent, speakerFocused, disableChat, disableMicrophone, disableCamera, disableShareScreen, hideParticipantList, showSettings, ...props }: VideoConferenceProps): JSX.Element;

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

@@ -7,6 +7,7 @@ const React = tslib_1.__importStar(require("react"));
 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");
 /**
  * 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
@@ -27,7 +28,7 @@ const components_react_1 = require("@livekit/components-react");
  */
 function VideoConference(_a) {
     var _b, _c;
-    var { chatMessageFormatter, chatMessageDecoder, chatMessageEncoder, SettingsComponent, speakerFocused, disableChat = false, disableMicrophone = false, disableCamera = false, disableScreenShare = false, hideParticipantList = false, showSettings } = _a, props = tslib_1.__rest(_a, ["chatMessageFormatter", "chatMessageDecoder", "chatMessageEncoder", "SettingsComponent", "speakerFocused", "disableChat", "disableMicrophone", "disableCamera", "disableScreenShare", "hideParticipantList", "showSettings"]);
+    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"]);
     const [widgetState, setWidgetState] = React.useState({
         showChat: false,
         unreadMessages: 0,
@@ -80,7 +81,7 @@ function VideoConference(_a) {
         }
         else if (speakerFocused) {
             const speaker = participants.find((pt) => {
-                return pt.name === speakerFocused;
+                return pt.name === speakerFocused.username;
             });
             if (speaker) {
                 const updatedFocusTrack = tracks.find((tr) => {
@@ -99,12 +100,12 @@ 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)(components_react_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)(components_react_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
+    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: !disableScreenShare
+                                        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, {})] })));
 }

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

@@ -1 +1,2 @@
 export declare const PREFIX = "SCLiveStreamVideoConference";
+export declare const BAN_ROOM_USER = "_ban_room_user";

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

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

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/CreateLiveStreamDialog/CreateLiveStreamDialog.js

@@ -4,6 +4,7 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { styled } from '@mui/material/styles';
 import { useThemeProps } from '@mui/system';
 import { useSCUser } from '@selfcommunity/react-core';
+import { SCEventLocationType } from '@selfcommunity/types';
 import classNames from 'classnames';
 import { FormattedMessage } from 'react-intl';
 import BaseDialog from '../../shared/BaseDialog';
@@ -95,5 +96,5 @@ export default function CreateLiveStreamDialog(inProps) {
     /**
      * Renders root object
      */
-    return (_jsx(Root, Object.assign({ DialogContentProps: { dividers: false }, maxWidth: 'md', title: _jsxs(Box, Object.assign({ className: classes.title, component: 'span' }, { children: [Boolean(step === CreateLiveStreamStep.CREATE_LIVE && canCreateEvent) && (_jsx(Button, Object.assign({ variant: "text", onClick: handleBack, startIcon: _jsx(Icon, { children: "arrow_back" }) }, { children: "Back" }))), _jsx(Box, Object.assign({ component: 'span' }, { children: _jsx(FormattedMessage, { id: "ui.createLivestreamDialog.title", defaultMessage: "ui.createLivestreamDialog.title" }) }))] })), fullWidth: true, open: open, scroll: 'paper', onClose: onClose, className: classNames(classes.root, className), TransitionComponent: Transition, PaperProps: { elevation: 0 } }, rest, { children: _jsxs(Box, Object.assign({ className: classes.content }, { children: [step === CreateLiveStreamStep.SELECT_TYPE && (_jsx(LiveStreamSelector, { liveSelected: liveType, onLiveSelected: handleLiveTypeSelected, onNext: handleLiveTypeSelectedNext })), step === CreateLiveStreamStep.CREATE_LIVE && (_jsx(_Fragment, { children: liveType === LiveStreamType.EVENT_LIVE ? _jsx(EventForm, { onSuccess: handleSubmit }) : _jsx(LiveStreamForm, { onSuccess: handleSubmit }) }))] })) })));
+    return (_jsx(Root, Object.assign({ DialogContentProps: { dividers: false }, maxWidth: 'md', title: _jsxs(Box, Object.assign({ className: classes.title, component: 'span' }, { children: [Boolean(step === CreateLiveStreamStep.CREATE_LIVE && canCreateEvent) && (_jsx(Button, Object.assign({ variant: "text", onClick: handleBack, startIcon: _jsx(Icon, { children: "arrow_back" }) }, { children: "Back" }))), _jsx(Box, Object.assign({ component: 'span' }, { children: _jsx(FormattedMessage, { id: "ui.createLivestreamDialog.title", defaultMessage: "ui.createLivestreamDialog.title" }) }))] })), fullWidth: true, open: open, scroll: 'paper', onClose: onClose, className: classNames(classes.root, className), TransitionComponent: Transition, PaperProps: { elevation: 0 } }, rest, { children: _jsxs(Box, Object.assign({ className: classes.content }, { children: [step === CreateLiveStreamStep.SELECT_TYPE && (_jsx(LiveStreamSelector, { liveSelected: liveType, onLiveSelected: handleLiveTypeSelected, onNext: handleLiveTypeSelectedNext })), step === CreateLiveStreamStep.CREATE_LIVE && (_jsx(_Fragment, { children: liveType === LiveStreamType.EVENT_LIVE ? _jsx(EventForm, { presetLocation: SCEventLocationType.LIVESTREAM, onSuccess: handleSubmit }) : _jsx(LiveStreamForm, { onSuccess: handleSubmit }) }))] })) })));
 }

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,
@@ -56,23 +57,26 @@ export default function EventAddress(inProps) {
     const [suggestions, setSuggestions] = useState([]);
     const [timeoutId, setTimeoutId] = useState(null);
     const liveStream = useMemo(() => {
-        console.log(event);
-        return {
-            title: (event === null || event === void 0 ? void 0 : event.name) || `${intl.formatMessage(messages.name)}`,
-            created_at: (event === null || event === void 0 ? void 0 : event.start_date) || getNewDate(),
-            settings: /* event?.livestream?.settings || */ LIVESTREAM_DEFAULT_SETTINGS
-        } /* || event.livestream? */;
+        return (event.live_stream ||
+            {
+                title: (event === null || event === void 0 ? void 0 : event.name) || `${intl.formatMessage(messages.name)}`,
+                created_at: (event === null || event === void 0 ? void 0 : event.start_date) || getNewDate(),
+                settings: LIVESTREAM_DEFAULT_SETTINGS
+            });
     }, [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);
+        forwardGeolocationData({ location: newValue });
     };
     const handleSelection = (_event, newValue) => __awaiter(this, void 0, void 0, function* () {
         if (newValue) {
@@ -132,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/EventForm/EventForm.d.ts

@@ -1,5 +1,5 @@
 import { BoxProps } from '@mui/material';
-import { SCEventType } from '@selfcommunity/types';
+import { SCEventLocationType, SCEventType } from '@selfcommunity/types';
 export interface EventFormProps extends BoxProps {
     /**
      * Overrides or extends the styles applied to the component.
@@ -11,6 +11,11 @@ export interface EventFormProps extends BoxProps {
      * @default null
      */
     event?: SCEventType;
+    /**
+     * Initial location
+     * @default SCEventLocationType.PERSON
+     */
+    presetLocation?: SCEventLocationType;
     /**
      * On success callback function
      * @default null

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

@@ -118,7 +118,7 @@ export default function EventForm(inProps) {
         props: inProps,
         name: PREFIX
     });
-    const { className, onSuccess, onError, event = null } = props, rest = __rest(props, ["className", "onSuccess", "onError", "event"]);
+    const { className, onSuccess, onError, event, presetLocation = SCEventLocationType.PERSON } = props, rest = __rest(props, ["className", "onSuccess", "onError", "event", "presetLocation"]);
     // CONTEXT
     const scContext = useSCContext();
     // INTL
@@ -126,20 +126,25 @@ export default function EventForm(inProps) {
     const startDateTime = useMemo(() => getNewDate(event === null || event === void 0 ? void 0 : event.start_date), [event]);
     const endDateTime = useMemo(() => getNewDate(event === null || event === void 0 ? void 0 : event.end_date), [event]);
     const initialFieldState = {
+        name: (event === null || event === void 0 ? void 0 : event.name) || '',
+        description: event ? event.description : '',
         imageOriginal: (event === null || event === void 0 ? void 0 : event.image_bigger) || '',
         imageOriginalFile: '',
         startDate: event ? startDateTime : getNewDate(),
         startTime: event ? startDateTime : getLaterHoursDate(1),
         endDate: (event === null || event === void 0 ? void 0 : event.end_date) ? endDateTime : getNewDate(),
         endTime: (event === null || event === void 0 ? void 0 : event.end_date) ? endDateTime : getLaterHoursDate(3),
-        location: (event === null || event === void 0 ? void 0 : event.location) || SCEventLocationType.PERSON,
+        location: (event === null || event === void 0 ? void 0 : event.location)
+            ? event.location === SCEventLocationType.ONLINE && event.live_stream
+                ? SCEventLocationType.LIVESTREAM
+                : SCEventLocationType.ONLINE
+            : presetLocation,
         geolocation: (event === null || event === void 0 ? void 0 : event.geolocation) || '',
         lat: (event === null || event === void 0 ? void 0 : event.geolocation_lat) || null,
         lng: (event === null || event === void 0 ? void 0 : event.geolocation_lng) || null,
         link: (event === null || event === void 0 ? void 0 : event.link) || '',
+        liveStreamSettings: (event === null || event === void 0 ? void 0 : event.live_stream) ? event === null || event === void 0 ? void 0 : event.live_stream.settings : null,
         recurring: (event === null || event === void 0 ? void 0 : event.recurring) || SCEventRecurrenceType.NEVER,
-        name: (event === null || event === void 0 ? void 0 : event.name) || '',
-        description: event ? event.description : '',
         isPublic: (_a = (event === null || event === void 0 ? void 0 : event.privacy) === SCEventPrivacyType.PUBLIC) !== null && _a !== void 0 ? _a : true,
         isSubmitting: false
     };
@@ -185,7 +190,7 @@ export default function EventForm(inProps) {
         setField((prev) => (Object.assign(Object.assign({}, prev), data)));
     }, []);
     const handleLiveStreamSettingsData = useCallback((data) => {
-        setField((prev) => (Object.assign(Object.assign({}, prev), data)));
+        setField((prev) => (Object.assign(Object.assign({}, prev), { liveStreamSettings: Object.assign(Object.assign({}, prev.liveStreamSettings), data) })));
     }, []);
     const handleSubmit = useCallback(() => {
         setField((prev) => (Object.assign(Object.assign({}, prev), { ['isSubmitting']: true })));
@@ -197,14 +202,21 @@ export default function EventForm(inProps) {
         formData.append('start_date', combineDateAndTime(field.startDate, field.startTime));
         formData.append('recurring', field.recurring);
         formData.append('end_date', combineDateAndTime(field.endDate, field.endTime));
-        formData.append('location', field.location);
+        formData.append('location', field.location === SCEventLocationType.PERSON ? SCEventLocationType.PERSON : SCEventLocationType.ONLINE);
         if (field.location === SCEventLocationType.ONLINE) {
             formData.append('link', field.link);
+            formData.append('live_stream_settings', '');
+        }
+        else if (field.location === SCEventLocationType.LIVESTREAM) {
+            formData.append('link', '');
+            formData.append('live_stream_settings', JSON.stringify(field.liveStreamSettings));
         }
         else if (field.location === SCEventLocationType.PERSON) {
             formData.append('geolocation', field.geolocation);
             formData.append('geolocation_lat', field.lat.toString());
             formData.append('geolocation_lng', field.lng.toString());
+            formData.append('link', '');
+            formData.append('live_stream_settings', '');
         }
         if (privateEnabled) {
             formData.append('privacy', field.isPublic ? SCEventPrivacyType.PUBLIC : SCEventPrivacyType.PRIVATE);
@@ -315,11 +327,17 @@ export default function EventForm(inProps) {
                                             var _a;
                                             return (_jsx(TextField, Object.assign({}, params, { InputProps: Object.assign(Object.assign({}, params.InputProps), { placeholder: `${intl.formatMessage(messages.endTime)}`, startAdornment: (_jsx(InputAdornment, Object.assign({ position: "start" }, { children: _jsx(IconButton, { children: _jsx(Icon, { children: "access_time" }) }) }))) }), error: Boolean(error['endDateError']), helperText: ((_a = error['endDateError']) === null || _a === void 0 ? void 0 : _a.error) ? (_jsx(FormattedMessage, { id: "ui.eventForm.time.end.error.invalid", defaultMessage: "ui.eventForm.time.end.error.invalid" })) : null })));
                                         }
-                                    }, onChange: (value) => handleChangeDateTime(value, 'endTime'), shouldDisableTime: shouldDisabledTime })] })) })), _jsx(EventAddress, { forwardGeolocationData: handleGeoData, forwardLivestreamSettingsData: handleLiveStreamSettingsData, event: event !== null && event !== void 0 ? event : {
+                                    }, onChange: (value) => handleChangeDateTime(value, 'endTime'), shouldDisableTime: shouldDisabledTime })] })) })), _jsx(EventAddress, { forwardGeolocationData: handleGeoData, forwardLivestreamSettingsData: handleLiveStreamSettingsData, event: Object.assign(Object.assign({}, event), {
                             name: field.name,
                             start_date: field.startDate,
-                            geolocation: field.geolocation
-                        } }), privateEnabled && (_jsxs(Box, Object.assign({ className: classes.privacySection }, { children: [_jsxs(Stack, Object.assign({ direction: "row", spacing: 1, alignItems: "center", justifyContent: "center" }, { children: [_jsxs(Typography, Object.assign({ className: classNames(classes.switchLabel, { [classes.active]: !field.isPublic }) }, { children: [_jsx(Icon, { children: "private" }), _jsx(FormattedMessage, { id: "ui.eventForm.privacy.private", defaultMessage: "ui.eventForm.privacy.private" })] })), _jsx(Switch, { className: classes.switch, checked: field.isPublic, onChange: () => setField((prev) => (Object.assign(Object.assign({}, prev), { ['isPublic']: !field.isPublic }))), disabled: event && !field.isPublic }), _jsxs(Typography, Object.assign({ className: classNames(classes.switchLabel, { [classes.active]: field.isPublic }) }, { children: [_jsx(Icon, { children: "public" }), _jsx(FormattedMessage, { id: "ui.eventForm.privacy.public", defaultMessage: "ui.eventForm.privacy.public" })] }))] })), _jsx(Typography, Object.assign({ variant: "body2", textAlign: "center", className: classes.privacySectionInfo }, { children: field.isPublic ? (_jsx(FormattedMessage, { id: "ui.eventForm.privacy.public.info", defaultMessage: "ui.eventForm.privacy.public.info", values: {
+                            location: field.location,
+                            geolocation: field.geolocation,
+                            live_stream: {
+                                title: field.name || `${intl.formatMessage(messages.name)}`,
+                                created_at: field.startDate,
+                                settings: field.liveStreamSettings
+                            }
+                        }) }), privateEnabled && (_jsxs(Box, Object.assign({ className: classes.privacySection }, { children: [_jsxs(Stack, Object.assign({ direction: "row", spacing: 1, alignItems: "center", justifyContent: "center" }, { children: [_jsxs(Typography, Object.assign({ className: classNames(classes.switchLabel, { [classes.active]: !field.isPublic }) }, { children: [_jsx(Icon, { children: "private" }), _jsx(FormattedMessage, { id: "ui.eventForm.privacy.private", defaultMessage: "ui.eventForm.privacy.private" })] })), _jsx(Switch, { className: classes.switch, checked: field.isPublic, onChange: () => setField((prev) => (Object.assign(Object.assign({}, prev), { ['isPublic']: !field.isPublic }))), disabled: event && !field.isPublic }), _jsxs(Typography, Object.assign({ className: classNames(classes.switchLabel, { [classes.active]: field.isPublic }) }, { children: [_jsx(Icon, { children: "public" }), _jsx(FormattedMessage, { id: "ui.eventForm.privacy.public", defaultMessage: "ui.eventForm.privacy.public" })] }))] })), _jsx(Typography, Object.assign({ variant: "body2", textAlign: "center", className: classes.privacySectionInfo }, { children: field.isPublic ? (_jsx(FormattedMessage, { id: "ui.eventForm.privacy.public.info", defaultMessage: "ui.eventForm.privacy.public.info", values: {
                                         // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
                                         // @ts-ignore
                                         b: (chunks) => _jsx("strong", { children: chunks })

package/lib/esm/components/EventForm/types.d.ts

@@ -1,4 +1,4 @@
-import { SCEventLocationType, SCEventRecurrenceType } from '@selfcommunity/types';
+import { SCEventLocationType, SCEventRecurrenceType, SCLiveStreamSettingsType } from '@selfcommunity/types';
 export type Place = {
     description: string;
     id?: string;
@@ -9,6 +9,7 @@ export type Geolocation = {
     lat?: number;
     lng?: number;
     link?: string;
+    liveStreamSettings?: SCLiveStreamSettingsType;
 };
 export type InitialFieldState = Geolocation & {
     imageOriginal: string | ArrayBuffer;

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.d.ts

@@ -1,4 +1,5 @@
 import { BoxProps } from '@mui/material';
+import { SCLiveStreamSettingsType } from '@selfcommunity/types';
 export declare const PREFIX = "SCLiveStreamFormSettings";
 export interface LiveStreamFormSettingsProps extends BoxProps {
     /**
@@ -10,7 +11,7 @@ export interface LiveStreamFormSettingsProps extends BoxProps {
      * Event Object
      * @default null
      */
-    settings?: Record<string, any>;
+    settings?: SCLiveStreamSettingsType;
     /**
      * onChange callback
      * @param data

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.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(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(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.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(_Fragment, { children: [_jsx(Icon, Object.assign({ className: classes.accessViewIcon }, { children: selected === SCLiveStreamViewType.SPEAKER ? 'upload' : 'category' })), "\u00A0", _jsx(FormattedMessage, { id: `ui.liveStreamForm.view.${selected}`, defaultMessage: `ui.liveStreamForm.view.${selected}` })] }));
                         } }, { children: Object.values(SCLiveStreamViewType).map((f) => (_jsx(MenuItem, Object.assign({ value: f }, { children: _jsxs(Box, { children: [_jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsxs("b", { children: [_jsx(Icon, Object.assign({ className: classes.accessViewIcon }, { children: f === SCLiveStreamViewType.SPEAKER ? 'upload' : 'category' })), "\u00A0", _jsx(FormattedMessage, { id: `ui.liveStreamForm.view.${f}`, defaultMessage: `ui.liveStreamForm.view.${f}` })] }) })), _jsx(Typography, { children: _jsx(FormattedMessage, { id: `ui.liveStreamForm.view.${f}.description`, defaultMessage: `ui.liveStreamForm.view.${f}.description` }) })] }) }), f))) }))] }))] })));
 }

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

@@ -1,8 +1,11 @@
+import { SCLiveStreamViewType } from '@selfcommunity/types';
 export declare const PREFIX = "SCLiveStreamForm";
 export declare const LIVESTREAM_DEFAULT_SETTINGS: {
-    muteParticipant: boolean;
+    muteParticipants: boolean;
     hideParticipantList: boolean;
     automaticallyNotifyFollowers: boolean;
     disableVideo: boolean;
     disableChat: boolean;
+    disableShareScreen: boolean;
+    view: SCLiveStreamViewType;
 };

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

@@ -1,8 +1,11 @@
+import { SCLiveStreamViewType } from '@selfcommunity/types';
 export const PREFIX = 'SCLiveStreamForm';
 export const LIVESTREAM_DEFAULT_SETTINGS = {
-    muteParticipant: true,
-    hideParticipantList: true,
-    automaticallyNotifyFollowers: true,
+    muteParticipants: true,
+    hideParticipantList: false,
+    automaticallyNotifyFollowers: false,
     disableVideo: true,
-    disableChat: false
+    disableChat: false,
+    disableShareScreen: true,
+    view: SCLiveStreamViewType.SPEAKER
 };

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

@@ -1,6 +1,6 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Box, CircularProgress, Typography } from '@mui/material';
+import { Alert, Box, CircularProgress, Typography } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import { useThemeProps } from '@mui/system';
 import { SCPreferences, useSCFetchLiveStream, useSCPreferences, useSCUser } from '@selfcommunity/react-core';
@@ -8,13 +8,14 @@ import { SCFeatureName } from '@selfcommunity/types';
 import classNames from 'classnames';
 import { FormattedMessage } from 'react-intl';
 import { PREFIX } from './constants';
-import { PreJoin } from '@livekit/components-react';
 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 { SCOPE_SC_UI } from '../../constants/Errors';
+import { PreJoin } from './LiveStreamVideoConference/PreJoin';
+import { LiveStreamContext } from './LiveStreamVideoConference/LiveStreamProvider';
 const classes = {
     root: `${PREFIX}-root`,
     content: `${PREFIX}-content`,
@@ -58,12 +59,13 @@ const Root = styled(Box, {
  * @param inProps
  */
 export default function LiveStreamRoom(inProps) {
+    var _a, _b, _c, _d;
     //PROPS
     const props = useThemeProps({
         props: inProps,
         name: PREFIX
     });
-    const { id = `live_stream_room_object_${props.liveStreamId ? props.liveStreamId : props.liveStream ? props.liveStream.id : ''}`, liveStreamId = null, liveStream = null, className, showPrejoinTitle = true, showPrejoinDescription = false, startPrejoinContent, endPrejoinContent, presetConnectionDetails, presetPreJoinChoices, LiveStreamVideoConferenceComponentProps = {} } = props, rest = __rest(props, ["id", "liveStreamId", "liveStream", "className", "showPrejoinTitle", "showPrejoinDescription", "startPrejoinContent", "endPrejoinContent", "presetConnectionDetails", "presetPreJoinChoices", "LiveStreamVideoConferenceComponentProps"]);
+    const { id = `live_stream_room_object_${props.liveStreamId ? props.liveStreamId : props.liveStream ? props.liveStream.id : ''}`, liveStreamId = null, liveStream = null, className, showPrejoinTitle = true, showPrejoinDescription = false, startPrejoinContent, endPrejoinContent, presetConnectionDetails, presetPreJoinChoices, LiveStreamVideoConferenceComponentProps = { options: { codec: 'vp8', hq: false } } } = props, rest = __rest(props, ["id", "liveStreamId", "liveStream", "className", "showPrejoinTitle", "showPrejoinDescription", "startPrejoinContent", "endPrejoinContent", "presetConnectionDetails", "presetPreJoinChoices", "LiveStreamVideoConferenceComponentProps"]);
     // CONTEXT
     const scUserContext = useSCUser();
     const { preferences, features } = useSCPreferences();
@@ -72,11 +74,11 @@ export default function LiveStreamRoom(inProps) {
     const [preJoinChoices, setPreJoinChoices] = useState(presetPreJoinChoices);
     const [loading, setLoading] = useState(false);
     const preJoinDefaults = useMemo(() => {
-        var _a, _b, _c, _d, _e;
+        var _a, _b, _c;
         return {
             username: ((_a = scUserContext.user) === null || _a === void 0 ? void 0 : _a.username) || '',
-            videoEnabled: (_c = (_b = scLiveStream === null || scLiveStream === void 0 ? void 0 : scLiveStream.settings) === null || _b === void 0 ? void 0 : _b.disableVideo) !== null && _c !== void 0 ? _c : true,
-            audioEnabled: (_e = (_d = scLiveStream === null || scLiveStream === void 0 ? void 0 : scLiveStream.settings) === null || _d === void 0 ? void 0 : _d.muteParticipant) !== null && _e !== void 0 ? _e : true
+            videoEnabled: ((_b = scLiveStream === null || scLiveStream === void 0 ? void 0 : scLiveStream.settings) === null || _b === void 0 ? void 0 : _b.disableVideo) === false,
+            audioEnabled: ((_c = scLiveStream === null || scLiveStream === void 0 ? void 0 : scLiveStream.settings) === null || _c === void 0 ? void 0 : _c.muteParticipants) === false
         };
     }, [scUserContext.user, scLiveStream]);
     const [connectionDetails, setConnectionDetails] = useState(presetConnectionDetails);
@@ -123,11 +125,14 @@ export default function LiveStreamRoom(inProps) {
     /**
      * User must be authenticated
      */
-    if ((!scLiveStream && !scUserContext.user) || !liveStreamEnabled) {
+    if (!scLiveStream || !scUserContext.user || !liveStreamEnabled) {
         return _jsx(CircularProgress, {});
     }
     /**
      * 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(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" }) }))] })))] })), _jsx(Box, Object.assign({ className: classes.endPrejoinContent }, { children: endPrejoinContent }))] })) : (_jsx(Box, Object.assign({ className: classes.conference }, { children: _jsx(LiveStreamVideoConference, Object.assign({ connectionDetails: connectionDetails, userChoices: preJoinChoices, options: { codec: props.codec, hq: props.hq } }, LiveStreamVideoConferenceComponentProps)) }))) })) })));
+    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 &&
+                                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: ["The host of the live set your microphone as off", _jsx("br", {})] })), scLiveStream && ((_d = scLiveStream.settings) === null || _d === void 0 ? void 0 : _d.disableVideo) && _jsx(_Fragment, { children: "The host of the live set your camera as off" })] }))), 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/LiveStreamProvider.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import { SCLiveStreamType } from '@selfcommunity/types';
+/**
+ * Interface LiveStreamContextType
+ */
+export interface LiveStreamContextType {
+    /**
+     * Options
+     */
+    liveStream: SCLiveStreamType;
+}
+export declare const LiveStreamContext: import("react").Context<LiveStreamContextType>;
+/**
+ * Let's only export the `useLiveStream` hook instead of the context.
+ * We only want to use the hook directly and never the context component.
+ */
+export declare function useLiveStream(): LiveStreamContextType;

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

@@ -0,0 +1,9 @@
+import { createContext, useContext } from 'react';
+export const LiveStreamContext = createContext({});
+/**
+ * Let's only export the `useLiveStream` hook instead of the context.
+ * We only want to use the hook directly and never the context component.
+ */
+export function useLiveStream() {
+    return useContext(LiveStreamContext);
+}