@selfcommunity/react-ui 0.8.0-live.54 → 0.8.0-live.56

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

@@ -12,11 +12,6 @@ export interface CreateLiveStreamButtonProps extends ButtonProps {
      * @default empty object
      */
     CreateLiveStreamDialogComponentProps?: CreateLiveStreamDialogProps;
-    /**
-     * On click callback function
-     * @default null
-     */
-    onButtonClick?: (event: any, reason: any) => void;
     /**
      * On success callback function
      * @default null

package/lib/cjs/components/CreateLiveStreamButton/CreateLiveStreamButton.js

@@ -52,21 +52,7 @@ function CreateLiveStreamButton(inProps) {
     const [open, setOpen] = react_1.default.useState(false);
     // CONST
     const authUserId = scUserContext.user ? scUserContext.user.id : null;
-    const { preferences, features } = (0, react_core_1.useSCPreferences)();
-    // TODO
-    const liveStreamEnabled = true;
-    /* const liveStreamEnabled = useMemo(
-          () =>
-              preferences &&
-              features &&
-              features.includes(SCFeatureName.LIVE_STREAM) &&
-              SCPreferences.CONFIGURATIONS_LIVE_STREAM_ENABLED in preferences &&
-              preferences[SCPreferences.CONFIGURATIONS_LIVE_STREAM_ENABLED].value,
-          [preferences, features]
-      ); */
-    // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-    // @ts-ignore
-    const canCreateLiveStream = (0, react_1.useMemo)(() => true /* scUserContext?.user?.permission?.create_livestream */, [(_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.permission]);
+    const canCreateLiveStream = (0, react_1.useMemo)(() => { var _a, _b; return (_b = (_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.permission) === null || _b === void 0 ? void 0 : _b.create_live_stream; }, [(_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.permission]);
     /**
      * Handle close
      */
@@ -83,7 +69,7 @@ function CreateLiveStreamButton(inProps) {
     /**
      * If there's no authUserId, component is hidden.
      */
-    if (!liveStreamEnabled || !canCreateLiveStream || !authUserId) {
+    if (!canCreateLiveStream || !authUserId) {
         return null;
     }
     /**

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

@@ -44,8 +44,6 @@ export interface CreateLiveStreamDialogProps extends BaseDialogProps {
  |root|.SCCreateLivestreamDialog-root|Styles applied to the root element.|
  |content|.SCCreateLivestreamDialog-content|Styles applied to the content element.|
 
-
-
  * @param inProps
  */
 export default function CreateLiveStreamDialog(inProps: CreateLiveStreamDialogProps): JSX.Element;

package/lib/cjs/components/CreateLiveStreamDialog/CreateLiveStreamDialog.js

@@ -6,14 +6,13 @@ const react_1 = tslib_1.__importStar(require("react"));
 const styles_1 = require("@mui/material/styles");
 const system_1 = require("@mui/system");
 const react_core_1 = require("@selfcommunity/react-core");
-const types_1 = require("@selfcommunity/types");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const react_intl_1 = require("react-intl");
 const BaseDialog_1 = tslib_1.__importDefault(require("../../shared/BaseDialog"));
 const constants_1 = require("./constants");
 const EventForm_1 = tslib_1.__importDefault(require("../EventForm"));
 const LiveStreamSelector_1 = tslib_1.__importDefault(require("./LiveStreamSelector/LiveStreamSelector"));
-const types_2 = require("./types");
+const types_1 = require("./types");
 const LiveStreamForm_1 = tslib_1.__importDefault(require("../LiveStreamForm"));
 const Slide_1 = tslib_1.__importDefault(require("@mui/material/Slide"));
 const material_1 = require("@mui/material");
@@ -55,11 +54,10 @@ const Transition = react_1.default.forwardRef(function Transition(props, ref) {
  |root|.SCCreateLivestreamDialog-root|Styles applied to the root element.|
  |content|.SCCreateLivestreamDialog-content|Styles applied to the content element.|
 
-
-
  * @param inProps
  */
 function CreateLiveStreamDialog(inProps) {
+    var _a, _b;
     //PROPS
     const props = (0, system_1.useThemeProps)({
         props: inProps,
@@ -67,54 +65,38 @@ function CreateLiveStreamDialog(inProps) {
     });
     const { className, open = true, onClose, onSuccess } = props, rest = tslib_1.__rest(props, ["className", "open", "onClose", "onSuccess"]);
     // CONTEXT
-    const scContext = (0, react_core_1.useSCContext)();
     const scUserContext = (0, react_core_1.useSCUser)();
-    const { preferences, features } = (0, react_core_1.useSCPreferences)();
-    const liveStreamEnabled = (0, react_1.useMemo)(() => true, 
-    /* preferences &&
-            features &&
-            features.includes(SCFeatureName.LIVE_STREAM) &&
-            SCPreferences.CONFIGURATIONS_LIVE_STREAM_ENABLED in preferences &&
-            preferences[SCPreferences.CONFIGURATIONS_LIVE_STREAM_ENABLED].value*/ [preferences, features]);
-    const onlyStaffLiveStreamEnabled = (0, react_1.useMemo)(() => true /* preferences[SCPreferences.CONFIGURATIONS_LIVESTREAM_ONLY_STAFF_ENABLED].value */, [preferences]);
-    const canCreateLiveStream = (0, react_1.useMemo)(() => true /* liveStreamEnabled && (scUserContext?.user?.permission?.create_livestream || (onlyStaffLiveStreamEnabled && UserUtils.isStaff(scUserContext.user)))*/, [scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user, onlyStaffLiveStreamEnabled]);
-    const eventsEnabled = (0, react_1.useMemo)(() => preferences &&
-        features &&
-        features.includes(types_1.SCFeatureName.TAGGING) &&
-        react_core_1.SCPreferences.CONFIGURATIONS_EVENTS_ENABLED in preferences &&
-        preferences[react_core_1.SCPreferences.CONFIGURATIONS_EVENTS_ENABLED].value, [preferences, features]);
-    const onlyStaffEventEnabled = (0, react_1.useMemo)(() => preferences[react_core_1.SCPreferences.CONFIGURATIONS_EVENTS_ONLY_STAFF_ENABLED].value, [preferences]);
-    const canCreateEvent = (0, react_1.useMemo)(() => { var _a, _b; return eventsEnabled && (((_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_event) || true || (onlyStaffEventEnabled && react_core_1.UserUtils.isStaff(scUserContext.user))); }, [scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user, eventsEnabled, onlyStaffEventEnabled]);
-    const canCreateLiveStreamEvent = (0, react_1.useMemo)(() => Boolean(canCreateLiveStream && canCreateEvent), [canCreateEvent, canCreateLiveStream]);
+    const canCreateLiveStream = (0, react_1.useMemo)(() => { var _a, _b; return (_b = (_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.permission) === null || _b === void 0 ? void 0 : _b.create_live_stream; }, [(_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.permission]);
+    const canCreateEvent = (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_event; }, [(_b = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _b === void 0 ? void 0 : _b.permission]);
     // STATE
-    const [step, setStep] = (0, react_1.useState)(canCreateLiveStreamEvent ? types_2.CreateLiveStreamStep.SELECT_TYPE : types_2.CreateLiveStreamStep.CREATE_LIVE);
-    const [liveType, setLiveType] = (0, react_1.useState)(canCreateLiveStreamEvent ? null : types_2.LiveStreamType.DIRECT_LIVE);
+    const [step, setStep] = (0, react_1.useState)(canCreateEvent ? types_1.CreateLiveStreamStep.SELECT_TYPE : types_1.CreateLiveStreamStep.CREATE_LIVE);
+    const [liveType, setLiveType] = (0, react_1.useState)(canCreateEvent ? null : types_1.LiveStreamType.DIRECT_LIVE);
     // HANDLER
     const handleLiveTypeSelected = (0, react_1.useCallback)((l) => {
         setLiveType(l);
     }, []);
     const handleLiveTypeSelectedNext = (0, react_1.useCallback)((l) => {
         setLiveType(l);
-        setStep(types_2.CreateLiveStreamStep.CREATE_LIVE);
+        setStep(types_1.CreateLiveStreamStep.CREATE_LIVE);
     }, []);
     const handleBack = (0, react_1.useCallback)((l) => {
-        setStep(types_2.CreateLiveStreamStep.SELECT_TYPE);
+        setStep(types_1.CreateLiveStreamStep.SELECT_TYPE);
     }, []);
     const handleSubmit = (0, react_1.useCallback)((e) => {
         onSuccess && onSuccess(e);
     }, []);
     (0, react_1.useEffect)(() => {
-        if (!canCreateLiveStreamEvent) {
-            setLiveType(types_2.LiveStreamType.DIRECT_LIVE);
+        if (!canCreateEvent) {
+            setLiveType(types_1.LiveStreamType.DIRECT_LIVE);
         }
-    }, [canCreateLiveStreamEvent]);
+    }, [canCreateEvent]);
     // user must be logged
-    if (!scUserContext.user) {
+    if (!scUserContext.user || !canCreateLiveStream) {
         return null;
     }
     /**
      * Renders root object
      */
-    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ DialogContentProps: { dividers: false }, maxWidth: 'md', title: (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.title, component: 'span' }, { children: [Boolean(step === types_2.CreateLiveStreamStep.CREATE_LIVE && canCreateLiveStreamEvent) && ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "text", onClick: handleBack, startIcon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "arrow_back" }) }, { children: "Back" }))), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ component: 'span' }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.createLivestreamDialog.title", defaultMessage: "ui.createLivestreamDialog.title" }) }))] })), fullWidth: true, open: open, onClose: onClose, className: (0, classnames_1.default)(classes.root, className), TransitionComponent: Transition, PaperProps: { elevation: 0 } }, rest, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.content }, { children: [step === types_2.CreateLiveStreamStep.SELECT_TYPE && ((0, jsx_runtime_1.jsx)(LiveStreamSelector_1.default, { liveSelected: liveType, onLiveSelected: handleLiveTypeSelected, onNext: handleLiveTypeSelectedNext })), step === types_2.CreateLiveStreamStep.CREATE_LIVE && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: liveType === types_2.LiveStreamType.EVENT_LIVE ? (0, jsx_runtime_1.jsx)(EventForm_1.default, { onSuccess: handleSubmit }) : (0, jsx_runtime_1.jsx)(LiveStreamForm_1.default, { onSuccess: handleSubmit }) }))] })) })));
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ DialogContentProps: { dividers: false }, maxWidth: 'md', title: (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.title, component: 'span' }, { children: [Boolean(step === types_1.CreateLiveStreamStep.CREATE_LIVE && canCreateEvent) && ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "text", onClick: handleBack, startIcon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "arrow_back" }) }, { children: "Back" }))), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ component: 'span' }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.createLivestreamDialog.title", defaultMessage: "ui.createLivestreamDialog.title" }) }))] })), fullWidth: true, open: open, scroll: 'paper', onClose: onClose, className: (0, classnames_1.default)(classes.root, className), TransitionComponent: Transition, PaperProps: { elevation: 0 } }, rest, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.content }, { children: [step === types_1.CreateLiveStreamStep.SELECT_TYPE && ((0, jsx_runtime_1.jsx)(LiveStreamSelector_1.default, { liveSelected: liveType, onLiveSelected: handleLiveTypeSelected, onNext: handleLiveTypeSelectedNext })), step === types_1.CreateLiveStreamStep.CREATE_LIVE && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: liveType === types_1.LiveStreamType.EVENT_LIVE ? (0, jsx_runtime_1.jsx)(EventForm_1.default, { onSuccess: handleSubmit }) : (0, jsx_runtime_1.jsx)(LiveStreamForm_1.default, { onSuccess: handleSubmit }) }))] })) })));
 }
 exports.default = CreateLiveStreamDialog;

package/lib/cjs/components/CreateLiveStreamDialog/LiveStreamSelector/LiveStreamSelector.js

@@ -25,8 +25,15 @@ const Root = (0, styles_1.styled)(material_1.Container, {
         display: 'flex',
         justifyContent: 'center',
         alignItems: 'center',
+        [theme.breakpoints.down('sm')]: {
+            display: 'block'
+        },
         '& > div': {
-            width: '310px'
+            width: '290px',
+            [theme.breakpoints.down('sm')]: {
+                margin: '0px auto',
+                marginBottom: theme.spacing(2)
+            }
         }
     },
     [`& .${classes.actions}`]: {
@@ -40,7 +47,8 @@ const Root = (0, styles_1.styled)(material_1.Container, {
 const OptionCard = (0, styles_1.styled)(material_1.Paper, {
     shouldForwardProp: (prop) => prop !== 'selected'
 })(({ theme, selected }) => ({
-    maxWidth: '300px',
+    maxWidth: 300,
+    height: 350,
     padding: theme.spacing(3),
     margin: theme.spacing(0, 3),
     cursor: 'pointer',

package/lib/cjs/components/EventForm/EventAddress.d.ts

@@ -1,8 +1,9 @@
 import { SCEventType } from '@selfcommunity/types';
 import { Geolocation } from './types';
 export interface EventAddressProps {
-    event?: SCEventType;
+    event?: SCEventType | Partial<SCEventType>;
     forwardGeolocationData: (data: Geolocation) => void;
+    forwardLivestreamSettingsData: (settings: any) => void;
     className?: string;
 }
 export default function EventAddress(inProps: EventAddressProps): JSX.Element;

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

@@ -16,10 +16,19 @@ const react_intl_1 = require("react-intl");
 const HiddenPlaceholder_1 = tslib_1.__importDefault(require("../../shared/HiddenPlaceholder"));
 const UrlTextField_1 = tslib_1.__importDefault(require("../../shared/UrlTextField"));
 const constants_1 = require("./constants");
+const LiveStream_1 = tslib_1.__importDefault(require("../LiveStream"));
+const LiveStreamFormSettings_1 = tslib_1.__importDefault(require("../LiveStreamForm/LiveStreamFormSettings"));
+const liveStream_1 = require("../../types/liveStream");
+const constants_2 = require("../LiveStreamForm/constants");
+const utils_1 = require("./utils");
 const messages = (0, react_intl_1.defineMessages)({
     virtualPlaceholder: {
         id: 'ui.eventForm.address.online.placeholder',
         defaultMessage: 'ui.eventForm.address.online.placeholder'
+    },
+    name: {
+        id: 'ui.eventForm.name.placeholder',
+        defaultMessage: 'ui.eventForm.name.placeholder'
     }
 });
 const classes = {
@@ -41,13 +50,21 @@ function EventAddress(inProps) {
     // INTL
     const intl = (0, react_intl_1.useIntl)();
     // PROPS
-    const { className, forwardGeolocationData, event } = props;
+    const { className, forwardGeolocationData, forwardLivestreamSettingsData, event } = props;
     // STATE
     const [location, setLocation] = (0, react_1.useState)((event === null || event === void 0 ? void 0 : event.location) || types_1.SCEventLocationType.PERSON);
     const [geolocation, setGeoLocation] = (0, react_1.useState)(event ? { description: event.geolocation } : null);
     const [inputValue, setInputValue] = (0, react_1.useState)('');
     const [suggestions, setSuggestions] = (0, react_1.useState)([]);
     const [timeoutId, setTimeoutId] = (0, react_1.useState)(null);
+    const liveStream = (0, react_1.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) || (0, utils_1.getNewDate)(),
+            settings: /* event?.livestream?.settings || */ constants_2.LIVESTREAM_DEFAULT_SETTINGS
+        } /* || event.livestream? */;
+    }, [event]);
     // CONTEXT
     const scContext = (0, react_core_1.useSCContext)();
     const geocodingApiKey = (0, react_1.useMemo)(() => scContext.settings.integrations && scContext.settings.integrations.geocoding.apiKey, [scContext.settings.integrations]);
@@ -88,6 +105,9 @@ function EventAddress(inProps) {
     const handleLinkChange = (event) => {
         forwardGeolocationData({ location, link: event.target.value });
     };
+    const handleLiveStreamSettingsChange = (settings) => {
+        forwardLivestreamSettingsData(settings);
+    };
     (0, react_1.useEffect)(() => {
         if (timeoutId) {
             clearTimeout(timeoutId);
@@ -114,8 +134,8 @@ function EventAddress(inProps) {
     if (!geocodingApiKey && !isLoaded) {
         return (0, jsx_runtime_1.jsx)(HiddenPlaceholder_1.default, {});
     }
-    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Tabs, Object.assign({ className: classes.tabs, value: location, onChange: handleChange, indicatorColor: "secondary", textColor: "secondary", variant: "fullWidth" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Tab, { value: types_1.SCEventLocationType.PERSON, classes: { root: classes.tab }, icon: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "add_location_alt" }), iconPosition: "start", label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.address.live.label", defaultMessage: "ui.eventForm.address.live.label" }) }), (0, jsx_runtime_1.jsx)(material_1.Tab, { value: types_1.SCEventLocationType.ONLINE, classes: { root: classes.tab }, icon: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "play_circle_outline" }), iconPosition: "start", label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.address.online.label", defaultMessage: "ui.eventForm.address.online.label" }) })] })), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.tabContent }, { children: [location === types_1.SCEventLocationType.PERSON && ((0, jsx_runtime_1.jsx)(material_1.Autocomplete, { size: "small", value: geolocation, onChange: handleSelection, inputValue: inputValue, onInputChange: handleLocationChange, options: suggestions, getOptionLabel: (option) => option.description || geolocation.description, noOptionsText: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.address.live.noResults", defaultMessage: "ui.eventForm.address.live.noResults" }), isOptionEqualToValue: (option, value) => option.description === value.description, renderInput: (params) => ((0, jsx_runtime_1.jsx)(material_1.TextField, Object.assign({}, params, { label: (0, jsx_runtime_1.jsx)(react_intl_1.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: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.InputAdornment, Object.assign({ position: "start" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "add_location_alt" }) })), params.InputProps.endAdornment] })) }) }))) })), location === types_1.SCEventLocationType.ONLINE && ((0, jsx_runtime_1.jsx)(UrlTextField_1.default, { size: "small", fullWidth: true, type: "url", placeholder: `${intl.formatMessage(messages.virtualPlaceholder)}`, helperText: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.address.online.help", defaultMessage: "ui.eventForm.address.online.help" }), InputProps: {
+    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Tabs, Object.assign({ className: classes.tabs, value: location, onChange: handleChange, indicatorColor: "secondary", textColor: "secondary", variant: "fullWidth" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Tab, { value: types_1.SCEventLocationType.PERSON, classes: { root: classes.tab }, icon: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "add_location_alt" }), iconPosition: "start", label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.address.live.label", defaultMessage: "ui.eventForm.address.live.label" }) }), (0, jsx_runtime_1.jsx)(material_1.Tab, { value: types_1.SCEventLocationType.ONLINE, classes: { root: classes.tab }, icon: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "play_circle_outline" }), iconPosition: "start", label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.address.online.label", defaultMessage: "ui.eventForm.address.online.label" }) }), (0, jsx_runtime_1.jsx)(material_1.Tab, { value: types_1.SCEventLocationType.LIVESTREAM, classes: { root: classes.tab }, icon: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "photo_camera" }), iconPosition: "start", label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.address.liveStream.label", defaultMessage: "ui.eventForm.address.liveStream.label" }) })] })), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.tabContent }, { children: [location === types_1.SCEventLocationType.PERSON && ((0, jsx_runtime_1.jsx)(material_1.Autocomplete, { size: "small", value: geolocation, onChange: handleSelection, inputValue: inputValue, onInputChange: handleLocationChange, options: suggestions, getOptionLabel: (option) => option.description || geolocation.description, noOptionsText: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.address.live.noResults", defaultMessage: "ui.eventForm.address.live.noResults" }), isOptionEqualToValue: (option, value) => option.description === value.description, renderInput: (params) => ((0, jsx_runtime_1.jsx)(material_1.TextField, Object.assign({}, params, { label: (0, jsx_runtime_1.jsx)(react_intl_1.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: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.InputAdornment, Object.assign({ position: "start" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "add_location_alt" }) })), params.InputProps.endAdornment] })) }) }))) })), location === types_1.SCEventLocationType.ONLINE && ((0, jsx_runtime_1.jsx)(UrlTextField_1.default, { size: "small", fullWidth: true, type: "url", placeholder: `${intl.formatMessage(messages.virtualPlaceholder)}`, helperText: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.address.online.help", defaultMessage: "ui.eventForm.address.online.help" }), InputProps: {
                             endAdornment: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "play_circle_outline" })
-                        }, onChange: handleLinkChange }))] }))] })));
+                        }, onChange: handleLinkChange })), location === types_1.SCEventLocationType.LIVESTREAM && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(LiveStream_1.default, { template: liveStream_1.SCLiveStreamTemplateType.SNIPPET, liveStream: liveStream, actions: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}) }), (0, jsx_runtime_1.jsx)(LiveStreamFormSettings_1.default, { settings: liveStream.settings, onChange: handleLiveStreamSettingsChange })] }))] }))] })));
 }
 exports.default = EventAddress;

package/lib/cjs/components/EventForm/EventForm.js

@@ -186,6 +186,9 @@ function EventForm(inProps) {
     const handleGeoData = (0, react_1.useCallback)((data) => {
         setField((prev) => (Object.assign(Object.assign({}, prev), data)));
     }, []);
+    const handleLiveStreamSettingsData = (0, react_1.useCallback)((data) => {
+        setField((prev) => (Object.assign(Object.assign({}, prev), data)));
+    }, []);
     const handleSubmit = (0, react_1.useCallback)(() => {
         setField((prev) => (Object.assign(Object.assign({}, prev), { ['isSubmitting']: true })));
         const formData = new FormData();
@@ -314,7 +317,11 @@ function EventForm(inProps) {
                                             var _a;
                                             return ((0, jsx_runtime_1.jsx)(material_1.TextField, Object.assign({}, params, { InputProps: Object.assign(Object.assign({}, params.InputProps), { placeholder: `${intl.formatMessage(messages.endTime)}`, startAdornment: ((0, jsx_runtime_1.jsx)(material_1.InputAdornment, Object.assign({ position: "start" }, { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "access_time" }) }) }))) }), error: Boolean(error['endDateError']), helperText: ((_a = error['endDateError']) === null || _a === void 0 ? void 0 : _a.error) ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.time.end.error.invalid", defaultMessage: "ui.eventForm.time.end.error.invalid" })) : null })));
                                         }
-                                    }, onChange: (value) => handleChangeDateTime(value, 'endTime'), shouldDisableTime: shouldDisabledTime })] })) })), (0, jsx_runtime_1.jsx)(EventAddress_1.default, { forwardGeolocationData: handleGeoData, event: event !== null && event !== void 0 ? event : null }), privateEnabled && ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.privacySection }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", spacing: 1, alignItems: "center", justifyContent: "center" }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ className: (0, classnames_1.default)(classes.switchLabel, { [classes.active]: !field.isPublic }) }, { children: [(0, jsx_runtime_1.jsx)(material_1.Icon, { children: "private" }), (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.privacy.private", defaultMessage: "ui.eventForm.privacy.private" })] })), (0, jsx_runtime_1.jsx)(material_1.Switch, { className: classes.switch, checked: field.isPublic, onChange: () => setField((prev) => (Object.assign(Object.assign({}, prev), { ['isPublic']: !field.isPublic }))), disabled: event && !field.isPublic }), (0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ className: (0, classnames_1.default)(classes.switchLabel, { [classes.active]: field.isPublic }) }, { children: [(0, jsx_runtime_1.jsx)(material_1.Icon, { children: "public" }), (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.privacy.public", defaultMessage: "ui.eventForm.privacy.public" })] }))] })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2", textAlign: "center", className: classes.privacySectionInfo }, { children: field.isPublic ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.privacy.public.info", defaultMessage: "ui.eventForm.privacy.public.info", values: {
+                                    }, onChange: (value) => handleChangeDateTime(value, 'endTime'), shouldDisableTime: shouldDisabledTime })] })) })), (0, jsx_runtime_1.jsx)(EventAddress_1.default, { forwardGeolocationData: handleGeoData, forwardLivestreamSettingsData: handleLiveStreamSettingsData, event: event !== null && event !== void 0 ? event : {
+                            name: field.name,
+                            start_date: field.startDate,
+                            geolocation: field.geolocation
+                        } }), privateEnabled && ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.privacySection }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", spacing: 1, alignItems: "center", justifyContent: "center" }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ className: (0, classnames_1.default)(classes.switchLabel, { [classes.active]: !field.isPublic }) }, { children: [(0, jsx_runtime_1.jsx)(material_1.Icon, { children: "private" }), (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.privacy.private", defaultMessage: "ui.eventForm.privacy.private" })] })), (0, jsx_runtime_1.jsx)(material_1.Switch, { className: classes.switch, checked: field.isPublic, onChange: () => setField((prev) => (Object.assign(Object.assign({}, prev), { ['isPublic']: !field.isPublic }))), disabled: event && !field.isPublic }), (0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ className: (0, classnames_1.default)(classes.switchLabel, { [classes.active]: field.isPublic }) }, { children: [(0, jsx_runtime_1.jsx)(material_1.Icon, { children: "public" }), (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.privacy.public", defaultMessage: "ui.eventForm.privacy.public" })] }))] })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2", textAlign: "center", className: classes.privacySectionInfo }, { children: field.isPublic ? ((0, jsx_runtime_1.jsx)(react_intl_1.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) => (0, jsx_runtime_1.jsx)("strong", { children: chunks })

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

@@ -0,0 +1,79 @@
+import { SCLiveStreamType } from '@selfcommunity/types';
+import React from 'react';
+import { SCLiveStreamTemplateType } from '../../types/liveStream';
+import { WidgetProps } from '../Widget';
+import { LiveStreamSkeletonProps } from './index';
+export interface LiveStreamProps extends WidgetProps {
+    /**
+     * Event Object
+     * @default null
+     */
+    liveStream?: SCLiveStreamType;
+    /**
+     * Id of the liveStream for filter the feed
+     * @default null
+     */
+    liveStreamId?: number;
+    /**
+     * Event template type
+     * @default 'preview'
+     */
+    template?: SCLiveStreamTemplateType;
+    /**
+     * Actions
+     * @default null
+     */
+    actions?: React.ReactNode;
+    /**
+     * Hide in progress
+     * @default false
+     */
+    hideInProgress?: boolean;
+    /**
+     * Hide liveStream planner
+     * @default false
+     */
+    hideLiveStreamHost?: boolean;
+    /**
+     * Props to spread to EventSkeleton component
+     * @default {}
+     */
+    LiveStreamSkeletonComponentProps?: LiveStreamSkeletonProps;
+    /**
+     * Any other properties
+     */
+    [p: string]: any;
+}
+/**
+ * > API documentation for the Community-JS Live Stream component. Learn about the available props and the CSS API.
+ *
+ *
+ * This component renders an liveStream item.
+ * Take a look at our <strong>demo</strong> component [here](/docs/sdk/community-js/react-ui/Components/Event)
+
+ #### Import
+
+ ```jsx
+ import {liveStream} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+
+ The name `SCLiveStream` can be used when providing style overrides in the theme.
+
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCLiveStream-root|Styles applied to the root element.|
+ |avatar|.SCLiveStream-avatar|Styles applied to the avatar element.|
+ |primary|.SCLiveStream-primary|Styles applied to the primary item element section|
+ |secondary|.SCLiveStream-secondary|Styles applied to the secondary item element section|
+ |actions|.SCLiveStream-actions|Styles applied to the actions section.|
+
+
+ *
+ * @param inProps
+ */
+export default function LiveStream(inProps: LiveStreamProps): JSX.Element;

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

@@ -0,0 +1,143 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const styles_1 = require("@mui/material/styles");
+const system_1 = require("@mui/system");
+const react_core_1 = require("@selfcommunity/react-core");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const react_1 = require("react");
+const react_intl_1 = require("react-intl");
+const BaseItem_1 = tslib_1.__importDefault(require("../../shared/BaseItem"));
+const Calendar_1 = tslib_1.__importDefault(require("../../shared/Calendar"));
+const liveStream_1 = require("../../types/liveStream");
+const User_1 = tslib_1.__importDefault(require("../User"));
+const Widget_1 = tslib_1.__importDefault(require("../Widget"));
+const constants_1 = require("./constants");
+const index_1 = require("./index");
+const LiveStreamInfoDetails_1 = tslib_1.__importDefault(require("../../shared/LiveStreamInfoDetails"));
+const classes = {
+    root: `${constants_1.PREFIX}-root`,
+    detailRoot: `${constants_1.PREFIX}-detail-root`,
+    previewRoot: `${constants_1.PREFIX}-preview-root`,
+    snippetRoot: `${constants_1.PREFIX}-snippet-root`,
+    detailImageWrapper: `${constants_1.PREFIX}-detail-image-wrapper`,
+    detailImage: `${constants_1.PREFIX}-detail-image`,
+    detailInProgress: `${constants_1.PREFIX}-detail-in-progress`,
+    detailNameWrapper: `${constants_1.PREFIX}-detail-name-wrapper`,
+    detailName: `${constants_1.PREFIX}-detail-name`,
+    detailContent: `${constants_1.PREFIX}-detail-content`,
+    detailUser: `${constants_1.PREFIX}-detail-user`,
+    detailFirstDivider: `${constants_1.PREFIX}-detail-first-divider`,
+    detailSecondDivider: `${constants_1.PREFIX}-detail-second-divider`,
+    detailActions: `${constants_1.PREFIX}-detail-actions`,
+    previewImageWrapper: `${constants_1.PREFIX}-preview-image-wrapper`,
+    previewImage: `${constants_1.PREFIX}-preview-image`,
+    previewInProgress: `${constants_1.PREFIX}-preview-in-progress`,
+    previewNameWrapper: `${constants_1.PREFIX}-preview-name-wrapper`,
+    previewName: `${constants_1.PREFIX}-preview-name`,
+    previewContent: `${constants_1.PREFIX}-preview-content`,
+    previewActions: `${constants_1.PREFIX}-preview-actions`,
+    snippetImage: `${constants_1.PREFIX}-snippet-image`,
+    snippetAvatar: `${constants_1.PREFIX}-snippet-avatar`,
+    snippetInProgress: `${constants_1.PREFIX}-snippet-in-progress`,
+    snippetPrimary: `${constants_1.PREFIX}-snippet-primary`,
+    snippetSecondary: `${constants_1.PREFIX}-snippet-secondary`,
+    snippetActions: `${constants_1.PREFIX}-snippet-actions`
+};
+const Root = (0, styles_1.styled)(Widget_1.default, {
+    name: constants_1.PREFIX,
+    slot: 'Root',
+    overridesResolver: (props, styles) => styles.root
+})(() => ({}));
+const DetailRoot = (0, styles_1.styled)(material_1.Box, {
+    name: constants_1.PREFIX,
+    slot: 'DetailRoot',
+    overridesResolver: (props, styles) => styles.detailRoot
+})(() => ({}));
+const PreviewRoot = (0, styles_1.styled)(material_1.Box, {
+    name: constants_1.PREFIX,
+    slot: 'PreviewRoot',
+    overridesResolver: (props, styles) => styles.previewRoot
+})(() => ({}));
+const SnippetRoot = (0, styles_1.styled)(BaseItem_1.default, {
+    name: constants_1.PREFIX,
+    slot: 'SnippetRoot',
+    overridesResolver: (props, styles) => styles.snippetRoot
+})(() => ({}));
+/**
+ * > API documentation for the Community-JS Live Stream component. Learn about the available props and the CSS API.
+ *
+ *
+ * This component renders an liveStream item.
+ * Take a look at our <strong>demo</strong> component [here](/docs/sdk/community-js/react-ui/Components/Event)
+
+ #### Import
+
+ ```jsx
+ import {liveStream} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+
+ The name `SCLiveStream` can be used when providing style overrides in the theme.
+
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCLiveStream-root|Styles applied to the root element.|
+ |avatar|.SCLiveStream-avatar|Styles applied to the avatar element.|
+ |primary|.SCLiveStream-primary|Styles applied to the primary item element section|
+ |secondary|.SCLiveStream-secondary|Styles applied to the secondary item element section|
+ |actions|.SCLiveStream-actions|Styles applied to the actions section.|
+
+
+ *
+ * @param inProps
+ */
+function LiveStream(inProps) {
+    // PROPS
+    const props = (0, system_1.useThemeProps)({
+        props: inProps,
+        name: constants_1.PREFIX
+    });
+    const { id = `live_stream_object_${props.liveStreamId ? props.liveStreamId : props.liveStream ? props.liveStream.id : ''}`, liveStreamId = null, liveStream = null, className = null, template = liveStream_1.SCLiveStreamTemplateType.SNIPPET, hideInProgress = false, hideLiveStreamHost = false, actions, EventSkeletonComponentProps = {} } = props, rest = tslib_1.__rest(props, ["id", "liveStreamId", "liveStream", "className", "template", "hideInProgress", "hideLiveStreamHost", "actions", "EventSkeletonComponentProps"]);
+    // STATE
+    const { scLiveStream } = (0, react_core_1.useSCFetchLiveStream)({ id: liveStreamId, liveStream });
+    const inProgress = (0, react_1.useMemo)(() => scLiveStream /* && scLiveStream.running */, [scLiveStream]);
+    // CONTEXT
+    const scRoutingContext = (0, react_core_1.useSCRouting)();
+    // HOOKS
+    const intl = (0, react_intl_1.useIntl)();
+    /**
+     * Renders liveStream object
+     */
+    if (!scLiveStream) {
+        return (0, jsx_runtime_1.jsx)(index_1.LiveStreamSkeleton, Object.assign({ template: template }, EventSkeletonComponentProps, rest, { actions: actions }));
+    }
+    /**
+     * Renders liveStream object
+     */
+    let contentObj;
+    if (template === liveStream_1.SCLiveStreamTemplateType.DETAIL) {
+        contentObj = ((0, jsx_runtime_1.jsxs)(DetailRoot, Object.assign({ className: classes.detailRoot }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.detailImageWrapper }, { children: [(0, jsx_runtime_1.jsx)(material_1.CardMedia, { component: "img", image: scLiveStream.cover, alt: scLiveStream.title, className: classes.detailImage }), !hideInProgress && inProgress && ((0, jsx_runtime_1.jsx)(material_1.Chip, { size: "small", component: "div", label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStream.inProgress", defaultMessage: "ui.liveStream.inProgress" }), className: classes.detailInProgress })), (0, jsx_runtime_1.jsx)(Calendar_1.default, { day: new Date(scLiveStream.created_at).getDate() })] })), (0, jsx_runtime_1.jsxs)(material_1.CardContent, Object.assign({ className: classes.detailContent }, { children: [(0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.detailNameWrapper }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h3", className: classes.detailName }, { children: scLiveStream.title })) })), (0, jsx_runtime_1.jsx)(LiveStreamInfoDetails_1.default, { liveStream: scLiveStream }), !hideLiveStreamHost && ((0, jsx_runtime_1.jsx)(User_1.default, { user: scLiveStream.host, elevation: 0, secondary: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "caption" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.myEventsWidget.planner", defaultMessage: "ui.myEventsWidget.planner" }) })), actions: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}), className: classes.detailUser })), (0, jsx_runtime_1.jsx)(material_1.Divider, { className: classes.detailSecondDivider })] })), actions !== null && actions !== void 0 ? actions : ((0, jsx_runtime_1.jsx)(material_1.CardActions, Object.assign({ className: classes.detailActions }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", variant: "outlined", component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.LIVESTREAM_ROUTE_NAME, scLiveStream) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.liveStream.see", id: "ui.liveStream.see" }) })) })))] })));
+    }
+    else if (template === liveStream_1.SCLiveStreamTemplateType.PREVIEW) {
+        contentObj = ((0, jsx_runtime_1.jsxs)(PreviewRoot, Object.assign({ className: classes.previewRoot }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ position: "relative", className: classes.previewImageWrapper }, { children: [(0, jsx_runtime_1.jsx)(material_1.CardMedia, { component: "img", image: scLiveStream.cover, alt: scLiveStream.title, className: classes.previewImage }), !hideInProgress && inProgress && ((0, jsx_runtime_1.jsx)(material_1.Chip, { size: "small", component: "div", label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStream.inProgress", defaultMessage: "ui.liveStream.inProgress" }), className: classes.previewInProgress }))] })), (0, jsx_runtime_1.jsx)(material_1.CardContent, Object.assign({ className: classes.previewContent }, { children: (0, jsx_runtime_1.jsx)(LiveStreamInfoDetails_1.default, { liveStream: scLiveStream, hasLocationInfo: false, beforeDateInfo: (0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: scRoutingContext.url(react_core_1.SCRoutes.EVENT_ROUTE_NAME, scLiveStream), className: classes.previewNameWrapper }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h5", className: classes.previewName }, { children: scLiveStream.title })) })) }) })), actions !== null && actions !== void 0 ? actions : ((0, jsx_runtime_1.jsx)(material_1.CardActions, Object.assign({ className: classes.previewActions }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", variant: "outlined", component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.EVENT_ROUTE_NAME, scLiveStream) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.liveStream.see", id: "ui.liveStream.see" }) })) })))] })));
+    }
+    else {
+        contentObj = ((0, jsx_runtime_1.jsx)(SnippetRoot, { elevation: 0, square: true, disableTypography: true, className: classes.snippetRoot, image: (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.snippetImage }, { children: [(0, jsx_runtime_1.jsx)(material_1.Avatar, { variant: "square", alt: scLiveStream.title, src: scLiveStream.cover, className: classes.snippetAvatar }), ' ', !hideInProgress && inProgress && ((0, jsx_runtime_1.jsx)(material_1.Chip, { size: "small", component: "div", label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStream.inProgress", defaultMessage: "ui.liveStream.inProgress" }), className: classes.snippetInProgress }))] })), primary: (0, jsx_runtime_1.jsxs)(react_core_1.Link, Object.assign({ to: scRoutingContext.url(react_core_1.SCRoutes.EVENT_ROUTE_NAME, scLiveStream), className: classes.snippetPrimary }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: "span" }, { children: `${intl.formatDate(scLiveStream.created_at, {
+                            weekday: 'long',
+                            month: 'long',
+                            day: 'numeric'
+                        })}` })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: scLiveStream.title }))] })), secondary: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: "p", variant: "body2", className: classes.snippetSecondary }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.eventForm.address.liveStream.label`, defaultMessage: `ui.eventForm.address.liveStream.label` }) })), actions: actions !== null && actions !== void 0 ? actions : ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.snippetActions }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", variant: "outlined", component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.LIVESTREAM_ROUTE_NAME, scLiveStream) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.liveStream.see", id: "ui.liveStream.see" }) })) }))) }));
+    }
+    /**
+     * Renders root object
+     */
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ id: id, className: (0, classnames_1.default)(classes.root, className, `${constants_1.PREFIX}-${template}`) }, rest, { children: contentObj })));
+}
+exports.default = LiveStream;

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

@@ -0,0 +1,46 @@
+import React from 'react';
+import { SCLiveStreamTemplateType } from '../../types/liveStream';
+import { WidgetProps } from '../Widget';
+export interface LiveStreamSkeletonProps extends WidgetProps {
+    /**
+     * Overrides or extends the styles applied to the component.
+     * @default null
+     */
+    className?: string;
+    /**
+     * LiveStream template type
+     * @default 'preview'
+     */
+    template?: SCLiveStreamTemplateType;
+    /**
+     * Disable skeleton animation
+     */
+    skeletonsAnimation?: false | 'wave' | 'pulse';
+    /**
+     * Prop to pass an action to be rendered next to the skeleton
+     */
+    actions?: React.ReactNode;
+}
+/**
+ * > API documentation for the Community-JS LiveStream Skeleton component. Learn about the available props and the CSS API.
+
+ #### Import
+
+ ```jsx
+ import {LiveStreamSkeleton} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+
+ The name `SCLiveStream-skeleton-root` can be used when providing style overrides in the theme.
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCLiveStream-skeleton-root|Styles applied to the root element.|
+ |image|.SCLiveStream-skeleton-image|Styles applied to the image element.|
+ |action|.SCLiveStream-skeleton-action|Styles applied to action section.|
+ *
+ */
+export default function LiveStreamSkeleton(inProps: LiveStreamSkeletonProps): JSX.Element;