@selfcommunity/react-ui 0.10.5-alpha.1 → 0.10.5-alpha.11

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

@@ -8,7 +8,7 @@ import { LocalizationProvider, MobileDatePicker, MobileTimePicker } from '@mui/x
 import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
 import { EventService, formatHttpErrorCode } from '@selfcommunity/api-services';
 import { SCPreferences, useSCContext, useSCPreferences } from '@selfcommunity/react-core';
-import { SCEventLocationType, SCEventPrivacyType, SCEventRecurrenceType } from '@selfcommunity/types';
+import { SCEventLocationType, SCEventPrivacyType, SCEventRecurrenceType, SCFeatureName } from '@selfcommunity/types';
 import { Logger } from '@selfcommunity/utils';
 import classNames from 'classnames';
 import enLocale from 'date-fns/locale/en-US';
@@ -23,6 +23,8 @@ import { DAILY_LATER_DAYS, MONTHLY_LATER_DAYS, NEVER_LATER_DAYS, PREFIX, WEEKLY_
 import EventAddress from './EventAddress';
 import UploadEventCover from './UploadEventCover';
 import { combineDateAndTime, getLaterDaysDate, getLaterHoursDate, getNewDate } from './utils';
+import { LIVESTREAM_DEFAULT_SETTINGS } from '../LiveStreamForm/constants';
+import CoverPlaceholder from '../../assets/deafultCover';
 const messages = defineMessages({
     name: {
         id: 'ui.eventForm.name.placeholder',
@@ -117,13 +119,13 @@ const Root = styled(Box, {
  * @param inProps
  */
 export default function EventForm(inProps) {
-    var _a, _b, _c;
+    var _a, _b, _c, _d, _e;
     //PROPS
     const props = useThemeProps({
         props: inProps,
         name: PREFIX
     });
-    const { className, onSuccess, onError, event = null } = props, rest = __rest(props, ["className", "onSuccess", "onError", "event"]);
+    const { className, onSuccess, onError, event, presetLocation, EventAddressComponentProps = {} } = props, rest = __rest(props, ["className", "onSuccess", "onError", "event", "presetLocation", "EventAddressComponentProps"]);
     // CONTEXT
     const scContext = useSCContext();
     // INTL
@@ -131,20 +133,29 @@ 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
+            : ((_a = EventAddressComponentProps.locations) === null || _a === void 0 ? void 0 : _a.length)
+                ? presetLocation in EventAddressComponentProps.locations
+                    ? presetLocation
+                    : EventAddressComponentProps.locations[0]
+                : SCEventLocationType.PERSON,
         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: (event === null || event === void 0 ? void 0 : event.privacy) === SCEventPrivacyType.PUBLIC || true,
         isSubmitting: false
     };
@@ -154,13 +165,18 @@ export default function EventForm(inProps) {
     const [genericError, setGenericError] = useState(null);
     // PREFERENCES
     const scPreferences = useSCPreferences();
+    const liveStreamEnabled = useMemo(() => scPreferences.preferences &&
+        scPreferences.features &&
+        scPreferences.features.includes(SCFeatureName.LIVE_STREAM) &&
+        SCPreferences.CONFIGURATIONS_LIVE_STREAM_ENABLED in scPreferences.preferences &&
+        scPreferences.preferences[SCPreferences.CONFIGURATIONS_LIVE_STREAM_ENABLED].value, [scPreferences.preferences, scPreferences.features]);
     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 disablePastStartTime = useMemo(() => field.startDate.getDate() === getNewDate().getDate(), [field]);
     const disablePastEndTime = useMemo(() => field.endDate.getDate() === getNewDate().getDate(), [field]);
     const _backgroundCover = Object.assign({}, (field.imageOriginal
         ? { background: `url('${field.imageOriginal}') center / cover` }
-        : { background: `url('${scPreferences.preferences[SCPreferences.IMAGES_USER_DEFAULT_COVER].value}') center / cover` }));
+        : { background: `url('${CoverPlaceholder}') no-repeat 0 0 / 100% 100%` }));
     const handleChangeCover = useCallback((cover) => {
         setField((prev) => (Object.assign(Object.assign({}, prev), { ['imageOriginalFile']: cover })));
         const reader = new FileReader();
@@ -192,6 +208,9 @@ export default function EventForm(inProps) {
         setField((prev) => (Object.assign(Object.assign({}, prev), data)));
         setGenericError(null);
     }, []);
+    const handleLiveStreamSettingsData = useCallback((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 })));
         setGenericError(null);
@@ -203,14 +222,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', null);
+        }
+        else if (field.location === SCEventLocationType.LIVESTREAM) {
+            formData.append('link', '');
+            formData.append('live_stream_settings', JSON.stringify(Object.assign(Object.assign({}, LIVESTREAM_DEFAULT_SETTINGS), 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', null);
         }
         if (privateEnabled) {
             formData.append('privacy', field.isPublic ? SCEventPrivacyType.PUBLIC : SCEventPrivacyType.PRIVATE);
@@ -234,12 +260,18 @@ export default function EventForm(inProps) {
         })
             .catch((e) => {
             const _error = formatHttpErrorCode(e);
-            if ('errorsError' in _error || !Object.keys(_error).length) {
+            if (!Object.keys(_error).length) {
                 setGenericError(intl.formatMessage({
                     id: 'ui.eventForm.genericError',
                     defaultMessage: 'ui.eventForm.genericError'
                 }));
             }
+            else if ('codeError' in _error) {
+                setGenericError(intl.formatMessage({
+                    id: 'ui.eventForm.liveStream.error.monthlyMinuteLimitReached',
+                    defaultMessage: 'ui.eventForm.liveStream.error.monthlyMinuteLimitReached'
+                }));
+            }
             else {
                 setGenericError(null);
             }
@@ -264,7 +296,7 @@ export default function EventForm(inProps) {
             setError(error);
         }
         setGenericError(null);
-    }, [setField, error]);
+    }, [error, setField, setGenericError]);
     const handleChangeDateTime = useCallback((value, name) => {
         setField((prev) => (Object.assign(Object.assign({}, prev), { [name]: value })));
         if (error[`${name}Error`]) {
@@ -276,7 +308,7 @@ export default function EventForm(inProps) {
             setError(error);
         }
         setGenericError(null);
-    }, [setField, error]);
+    }, [error, setField, setGenericError]);
     const shouldDisableDate = useCallback((date) => {
         let disabled = false;
         switch (field.recurring) {
@@ -345,7 +377,13 @@ export default function EventForm(inProps) {
                                             // @ts-ignore
                                             toolbarTitle: _jsx(FormattedMessage, { id: "ui.eventForm.time.title", defaultMessage: "ui.eventForm.time.title" })
                                         }
-                                    }, onChange: (value) => handleChangeDateTime(value, 'endTime'), shouldDisableTime: shouldDisableTime })] })) })), _jsx(EventAddress, { forwardGeolocationData: handleGeoData, event: event !== null && event !== void 0 ? event : null }), 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: {
+                                    }, onChange: (value) => handleChangeDateTime(value, 'endTime'), shouldDisableTime: shouldDisableTime })] })) })), _jsx(EventAddress, Object.assign({ forwardGeolocationData: handleGeoData, forwardLivestreamSettingsData: handleLiveStreamSettingsData, event: Object.assign(Object.assign({}, event), {
+                            name: field.name,
+                            start_date: field.startDate,
+                            location: field.location,
+                            geolocation: field.geolocation,
+                            live_stream: Object.assign(Object.assign({ title: field.name || `${intl.formatMessage(messages.name)}` }, (event && ((_b = event.live_stream) === null || _b === void 0 ? void 0 : _b.created_at) && { created_at: field.startDate })), { settings: field.liveStreamSettings })
+                        }) }, EventAddressComponentProps)), 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,@typescript-eslint/ban-ts-comment
                                         // @ts-ignores
                                         b: (chunks) => _jsx("strong", { children: chunks })
@@ -354,16 +392,18 @@ export default function EventForm(inProps) {
                                         // @ts-ignore
                                         b: (chunks) => _jsx("strong", { children: chunks })
                                     } })) }))] }))), _jsx(TextField, { multiline: true, className: classes.description, placeholder: `${intl.formatMessage(messages.description)}`, margin: "normal", value: field.description, name: "description", onChange: handleChange, InputProps: {
-                            endAdornment: (_jsx(Typography, Object.assign({ variant: "body2" }, { children: ((_a = field.description) === null || _a === void 0 ? void 0 : _a.length) ? EVENT_DESCRIPTION_MAX_LENGTH - field.description.length : EVENT_DESCRIPTION_MAX_LENGTH })))
-                        }, error: Boolean(((_b = field.description) === null || _b === void 0 ? void 0 : _b.length) > EVENT_DESCRIPTION_MAX_LENGTH), helperText: ((_c = field.description) === null || _c === void 0 ? void 0 : _c.length) > EVENT_DESCRIPTION_MAX_LENGTH ? (_jsx(FormattedMessage, { id: "ui.eventForm.description.error.maxLength", defaultMessage: "ui.eventForm.description.error.maxLength" })) : null }), genericError && (_jsx(Box, Object.assign({ className: classes.genericError }, { children: _jsx(Alert, Object.assign({ variant: "filled", severity: "error" }, { children: genericError })) }))), _jsx(Box, Object.assign({ className: classes.actions }, { children: _jsx(LoadingButton, Object.assign({ loading: field.isSubmitting, disabled: !field.name ||
+                            endAdornment: (_jsx(Typography, Object.assign({ variant: "body2" }, { children: ((_c = field.description) === null || _c === void 0 ? void 0 : _c.length) ? EVENT_DESCRIPTION_MAX_LENGTH - field.description.length : EVENT_DESCRIPTION_MAX_LENGTH })))
+                        }, error: Boolean(((_d = field.description) === null || _d === void 0 ? void 0 : _d.length) > EVENT_DESCRIPTION_MAX_LENGTH), helperText: ((_e = field.description) === null || _e === void 0 ? void 0 : _e.length) > EVENT_DESCRIPTION_MAX_LENGTH ? (_jsx(FormattedMessage, { id: "ui.eventForm.description.error.maxLength", defaultMessage: "ui.eventForm.description.error.maxLength" })) : null }), genericError && (_jsx(Box, Object.assign({ className: classes.genericError }, { children: _jsx(Alert, Object.assign({ variant: "filled", severity: "error" }, { children: genericError })) }))), _jsx(Box, Object.assign({ className: classes.actions }, { children: _jsx(LoadingButton, Object.assign({ loading: field.isSubmitting, disabled: !field.name ||
                                 !field.startDate ||
                                 !field.startTime ||
                                 !field.endDate ||
                                 !field.endTime ||
+                                Boolean(genericError) ||
                                 (field.location === SCEventLocationType.ONLINE && !field.link) ||
                                 (field.location === SCEventLocationType.PERSON && !field.geolocation) ||
                                 (field.recurring !== SCEventRecurrenceType.NEVER && !field.endDate && !field.endTime) ||
                                 field.isSubmitting ||
                                 field.name.length > EVENT_TITLE_MAX_LENGTH ||
-                                field.description.length > EVENT_DESCRIPTION_MAX_LENGTH, variant: "contained", onClick: handleSubmit, color: "secondary" }, { children: event ? (_jsx(FormattedMessage, { id: "ui.eventForm.button.edit", defaultMessage: "ui.eventForm.button.edit" })) : (_jsx(FormattedMessage, { id: "ui.eventForm.button.create", defaultMessage: "ui.eventForm.button.create" })) })) }))] }))] })));
+                                field.description.length > EVENT_DESCRIPTION_MAX_LENGTH ||
+                                (field.location === SCEventLocationType.LIVESTREAM && !liveStreamEnabled), variant: "contained", onClick: handleSubmit, color: "secondary" }, { children: event ? (_jsx(FormattedMessage, { id: "ui.eventForm.button.edit", defaultMessage: "ui.eventForm.button.edit" })) : (_jsx(FormattedMessage, { id: "ui.eventForm.button.create", defaultMessage: "ui.eventForm.button.create" })) })) }))] }))] })));
 }

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

@@ -1,16 +1,17 @@
-import { SCEventLocationType, SCEventRecurrenceType } from '@selfcommunity/types';
-export declare type Place = {
+import { SCEventLocationType, SCEventRecurrenceType, SCLiveStreamSettingsType } from '@selfcommunity/types';
+export type Place = {
     description: string;
     id?: string;
 };
-export declare type Geolocation = {
+export type Geolocation = {
     location: SCEventLocationType;
     geolocation?: string;
     lat?: number;
     lng?: number;
     link?: string;
+    liveStreamSettings?: SCLiveStreamSettingsType;
 };
-export declare type InitialFieldState = Geolocation & {
+export type InitialFieldState = Geolocation & {
     imageOriginal: string | ArrayBuffer;
     imageOriginalFile: string | Blob;
     startDate: Date | null;
@@ -23,5 +24,5 @@ export declare type InitialFieldState = Geolocation & {
     isPublic: boolean;
     isSubmitting: boolean;
 };
-export declare type FieldStateKeys = keyof InitialFieldState;
-export declare type FieldStateValues = InitialFieldState[FieldStateKeys];
+export type FieldStateKeys = keyof InitialFieldState;
+export type FieldStateValues = InitialFieldState[FieldStateKeys];

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

@@ -18,7 +18,7 @@ export interface EventFormDialogProps extends BaseDialogProps {
     onClose?: () => void;
     /**
      * Props to spread to EventForm component
-     * @default {}
+     * @default undefined
      */
     EventFormComponentProps?: EventFormProps;
     /**

package/lib/esm/components/EventFormDialog/EventFormDialog.js

@@ -40,14 +40,14 @@ export default function EventFormDialog(inProps) {
         props: inProps,
         name: PREFIX
     });
-    const { className, open = true, onClose, EventFormComponentProps = {} } = props, rest = __rest(props, ["className", "open", "onClose", "EventFormComponentProps"]);
+    const { className, open = true, onClose, EventFormComponentProps } = props, rest = __rest(props, ["className", "open", "onClose", "EventFormComponentProps"]);
     const handleSuccess = useCallback((event) => {
         var _a;
-        (_a = EventFormComponentProps.onSuccess) === null || _a === void 0 ? void 0 : _a.call(EventFormComponentProps, event);
+        (_a = EventFormComponentProps === null || EventFormComponentProps === void 0 ? void 0 : EventFormComponentProps.onSuccess) === null || _a === void 0 ? void 0 : _a.call(EventFormComponentProps, event);
         onClose === null || onClose === void 0 ? void 0 : onClose();
     }, [onClose, EventFormComponentProps]);
     /**
      * Renders root object
      */
-    return (_jsx(Root, Object.assign({ DialogContentProps: { dividers: false }, title: (EventFormComponentProps === null || EventFormComponentProps === void 0 ? void 0 : EventFormComponentProps.event) ? (_jsx(FormattedMessage, { id: "ui.eventForm.title.edit", defaultMessage: "ui.eventForm.title.edit" })) : (_jsx(FormattedMessage, { id: "ui.eventForm.title", defaultMessage: "ui.eventForm.title" })), open: open, onClose: onClose, className: classNames(classes.root, className) }, rest, { children: _jsx(EventForm, Object.assign({}, EventFormComponentProps, { onSuccess: handleSuccess })) })));
+    return (_jsx(Root, Object.assign({ DialogContentProps: { dividers: false }, title: (EventFormComponentProps === null || EventFormComponentProps === void 0 ? void 0 : EventFormComponentProps.event) ? (_jsx(FormattedMessage, { id: "ui.eventForm.title.edit", defaultMessage: "ui.eventForm.title.edit" })) : (_jsx(FormattedMessage, { id: "ui.eventForm.title", defaultMessage: "ui.eventForm.title" })), open: open, onClose: onClose, className: classNames(classes.root, className) }, rest, { children: _jsx(EventForm, Object.assign({}, (EventFormComponentProps && EventFormComponentProps), { onSuccess: handleSuccess })) })));
 }

package/lib/esm/components/EventInfoWidget/EventInfoWidget.js

@@ -66,7 +66,7 @@ export default function EventInfoWidget(inProps) {
     const handleToggleSummary = useCallback(() => {
         setExpanded(!expanded);
     }, [expanded]);
-    const hasGeolocationOrLink = useMemo(() => Boolean((scEvent === null || scEvent === void 0 ? void 0 : scEvent.geolocation) || (scEvent === null || scEvent === void 0 ? void 0 : scEvent.link)), [scEvent]);
+    const hasGeolocationOrLink = useMemo(() => Boolean((scEvent === null || scEvent === void 0 ? void 0 : scEvent.geolocation) || (scEvent === null || scEvent === void 0 ? void 0 : scEvent.link) || (scEvent === null || scEvent === void 0 ? void 0 : scEvent.live_stream)), [scEvent]);
     const showInfo = useMemo(() => ((scEvent === null || scEvent === void 0 ? void 0 : scEvent.privacy) === SCEventPrivacyType.PUBLIC && hasGeolocationOrLink) ||
         ([SCEventSubscriptionStatusType.SUBSCRIBED, SCEventSubscriptionStatusType.GOING, SCEventSubscriptionStatusType.NOT_GOING].indexOf(scEvent === null || scEvent === void 0 ? void 0 : scEvent.subscription_status) > -1 &&
             hasGeolocationOrLink), [scEvent]);

package/lib/esm/components/EventMediaWidget/EventMediaWidget.js

@@ -245,9 +245,9 @@ export default function EventMediaWidget(inProps) {
     }
     return (_jsxs(Root, Object.assign({ className: classes.root }, rest, { showPadding: hasAllow }, { children: [_jsx(CardHeader, { title: _jsxs(Stack, Object.assign({ direction: "row", justifyContent: "space-between", alignItems: "center" }, { children: [_jsx(Typography, Object.assign({ variant: "h5" }, { children: _jsx(FormattedMessage, { id: "ui.eventMediaWidget.title", defaultMessage: "ui.eventMediaWidget.title" }) })), hasAllow && mediasCount > 0 && _jsx(TriggerButton, { size: "small", onAdd: handleAddMedia })] })), className: classes.header }), _jsx(Divider, {}), _jsxs(CardContent, Object.assign({ className: classes.content }, { children: [_jsxs(Box, Object.assign({ className: classes.grid }, { children: [showSkeleton === 'widget' && _jsx(EventMediaSkeleton, {}), medias.slice(0, MEDIAS_TO_SHOW).map((media, i, array) => (_jsx(Box, Object.assign({ onClick: () => handleOpenLightbox(i), sx: {
                                     background: `url(${media.image}) no-repeat center`
-                                }, className: classes.media }, { children: medias.length > array.length && i === array.length - 1 && (_jsxs(Fragment, { children: [_jsx(Box, { className: classes.mediaLayer }), _jsx(Box, Object.assign({ className: classes.countHiddenMediaWrapper }, { children: _jsxs(Typography, Object.assign({ className: classes.countHiddenMedia }, { children: ["+", countHiddenMedia] })) }))] })) }), media.id))), hasAllow && mediasCount === 0 && (_jsx(Tooltip, Object.assign({ title: _jsx(FormattedMessage, { id: "ui.eventMediaWidget.add", defaultMessage: "ui.eventMediaWidget.add" }) }, { children: _jsx(TriggerButton, { size: "large", onAdd: handleAddMedia, isSquare: true }) })))] })), preview !== -1 && _jsx(Lightbox, { onClose: handleCloseLightbox, index: preview, medias: medias, onIndexChange: _fetchNext })] })), hasAllow && mediasCount > 0 && (_jsx(CardActions, Object.assign({ className: classes.actions }, { children: _jsx(Button, Object.assign({ onClick: handleToggleDialogOpen }, { children: _jsx(Typography, Object.assign({ variant: "caption" }, { children: _jsx(FormattedMessage, { id: "ui.eventMediaWidget.showAll", defaultMessage: "ui.eventMediaWidget.showAll" }) })) })) }))), openDialog && (_jsx(DialogRoot, Object.assign({ className: classes.dialogRoot, title: intl.formatMessage(messages.title, { user: scEvent.managed_by.username }), onClose: handleToggleDialogOpen, open: openDialog }, dialogProps, { children: _jsx(InfiniteScroll, Object.assign({ dataLength: medias.length, height: isMobile ? '100%' : '515px', next: handleNext, hasMoreNext: Boolean(state.next), className: classes.dialogInfiniteScroll, endMessage: _jsx(Typography, Object.assign({ className: classes.endMessage }, { children: _jsx(FormattedMessage, { id: "ui.eventMediaWidget.noMoreResults", defaultMessage: "ui.eventMediaWidget.noMoreResults" }) })) }, { children: _jsxs(Box, Object.assign({ className: classes.grid }, { children: [medias.map((media) => (_jsx(Box, Object.assign({ sx: {
+                                }, className: classes.media }, { children: medias.length > array.length && i === array.length - 1 && (_jsxs(Fragment, { children: [_jsx(Box, { className: classes.mediaLayer }), _jsx(Box, Object.assign({ className: classes.countHiddenMediaWrapper }, { children: _jsxs(Typography, Object.assign({ className: classes.countHiddenMedia }, { children: ["+", countHiddenMedia] })) }))] })) }), media.id))), hasAllow && mediasCount === 0 && (_jsx(Tooltip, Object.assign({ title: _jsx(FormattedMessage, { id: "ui.eventMediaWidget.add", defaultMessage: "ui.eventMediaWidget.add" }) }, { children: _jsx(TriggerButton, { size: "large", onAdd: handleAddMedia, isSquare: true }) })))] })), preview !== -1 && _jsx(Lightbox, { onClose: handleCloseLightbox, index: preview, medias: medias, onIndexChange: _fetchNext })] })), hasAllow && mediasCount > 0 && (_jsx(CardActions, Object.assign({ className: classes.actions }, { children: _jsx(Button, Object.assign({ onClick: handleToggleDialogOpen }, { children: _jsx(Typography, Object.assign({ variant: "caption" }, { children: _jsx(FormattedMessage, { id: "ui.eventMediaWidget.showAll", defaultMessage: "ui.eventMediaWidget.showAll" }) })) })) }))), _jsx(DialogRoot, Object.assign({ className: classes.dialogRoot, title: intl.formatMessage(messages.title, { user: scEvent.managed_by.username }), onClose: handleToggleDialogOpen, open: openDialog }, dialogProps, { children: _jsx(InfiniteScroll, Object.assign({ dataLength: medias.length, height: isMobile ? '100%' : '515px', next: handleNext, hasMoreNext: Boolean(state.next), className: classes.dialogInfiniteScroll, endMessage: _jsx(Typography, Object.assign({ className: classes.endMessage }, { children: _jsx(FormattedMessage, { id: "ui.eventMediaWidget.noMoreResults", defaultMessage: "ui.eventMediaWidget.noMoreResults" }) })) }, { children: _jsxs(Box, Object.assign({ className: classes.grid }, { children: [medias.map((media) => (_jsx(Box, Object.assign({ sx: {
                                     background: `url(${media.image}) no-repeat center`
                                 }, className: classes.dialogMediaWrapper }, { children: _jsx(Stack, Object.assign({ className: classes.dialogButtonWrapper }, { children: _jsx(LoadingButton, Object.assign({ className: classes.dialogLoadingButton, loading: mediaId === media.id, size: "large", onClick: () => handleRemoveMedia(media.id), sx: {
                                             color: (theme) => (mediaId === media.id ? 'transparent' : theme.palette.common.white)
-                                        } }, { children: _jsx(Icon, Object.assign({ fontSize: "inherit" }, { children: "delete" })) })) })) }), media.id))), showSkeleton === 'dialog' && Array.from(Array(countHiddenMedia)).map((_, i) => _jsx(EventMediaSkeleton, {}, i))] })) })) }))), openDialogConfirm && (_jsx(ConfirmDialog, { open: openDialogConfirm, title: _jsx(FormattedMessage, { id: "ui.eventMediaWidget.dialog.title", defaultMessage: "ui.eventMediaWidget.dialog.title" }), content: _jsx(FormattedMessage, { id: "ui.eventMediaWidget.dialog.msg", defaultMessage: "ui.eventMediaWidget.dialog.msg" }), btnConfirm: _jsx(FormattedMessage, { id: "ui.eventMediaWidget.dialog.confirm", defaultMessage: "ui.eventMediaWidget.dialog.confirm" }), isUpdating: loading, onConfirm: handleConfirmAction, onClose: handleCloseAction }))] })));
+                                        } }, { children: _jsx(Icon, Object.assign({ fontSize: "inherit" }, { children: "delete" })) })) })) }), media.id))), showSkeleton === 'dialog' && Array.from(Array(countHiddenMedia)).map((_, i) => _jsx(EventMediaSkeleton, {}, i))] })) })) })), _jsx(ConfirmDialog, { open: openDialogConfirm, title: _jsx(FormattedMessage, { id: "ui.eventMediaWidget.dialog.title", defaultMessage: "ui.eventMediaWidget.dialog.title" }), content: _jsx(FormattedMessage, { id: "ui.eventMediaWidget.dialog.msg", defaultMessage: "ui.eventMediaWidget.dialog.msg" }), btnConfirm: _jsx(FormattedMessage, { id: "ui.eventMediaWidget.dialog.confirm", defaultMessage: "ui.eventMediaWidget.dialog.confirm" }), isUpdating: loading, onConfirm: handleConfirmAction, onClose: handleCloseAction })] })));
 }

package/lib/esm/components/EventMediaWidget/asUploadButton.d.ts

@@ -1,6 +1,6 @@
 import { UploadButtonProps } from '@rpldy/upload-button';
 import type { ComponentType } from 'react';
-declare type FileInputProps = {
+type FileInputProps = {
     accept: string;
 };
 declare const asUploadButton: (Component: ComponentType<any>, inputProps: FileInputProps) => import("react").ForwardRefExoticComponent<Pick<UploadButtonProps<Element>, "id" | "className" | "text" | "children" | "onClick" | "method" | "headers" | "paramName" | "params" | "forceJsonResponse" | "withCredentials" | "formatGroupParamName" | "sendWithFormData" | "formDataAllowUndefined" | "formatServerResponse" | "isSuccessfulCall" | "destination" | "fileFilter" | "autoUpload" | "clearPendingOnAdd" | "grouped" | "maxGroupSize" | "inputFieldName" | "fastAbortThreshold" | "userData" | "extraProps"> & import("react").RefAttributes<any>>;

package/lib/esm/components/EventMembersWidget/TabContentComponent.js

@@ -132,5 +132,5 @@ export default function TabContentComponent(props) {
     else if (tabValue === TabContentEnum.REQUESTS && (actionProps === null || actionProps === void 0 ? void 0 : actionProps.count) === 0) {
         return (_jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.eventMembersWidget.noOtherRequests", defaultMessage: "ui.eventMembersWidget.noOtherRequests" }) })));
     }
-    return (_jsxs(_Fragment, { children: [_jsx(List, { children: users === null || users === void 0 ? void 0 : users.slice(0, state.visibleItems).map((user) => (_jsx(ListItem, { children: _jsx(User, Object.assign({ elevation: 0, user: user }, userProps, { actions: getActionsComponent(user.id) })) }, user.id))) }), state.count > state.visibleItems && (_jsx(Button, Object.assign({ onClick: handleToggleDialogOpen, className: classes.actionButton }, { children: _jsx(Typography, Object.assign({ variant: "caption" }, { children: _jsx(FormattedMessage, { id: "ui.eventMembersWidget.showAll", defaultMessage: "ui.eventMembersWidget.showAll" }) })) }))), openDialog && (_jsx(DialogRoot, Object.assign({ className: classes.dialogRoot, title: _jsx(FormattedMessage, { defaultMessage: "ui.eventMembersWidget.title", id: "ui.eventMembersWidget.title" }), onClose: handleToggleDialogOpen, open: openDialog }, dialogProps, { children: _jsx(InfiniteScroll, Object.assign({ dataLength: state.results.length, next: handleNext, hasMoreNext: Boolean(state.next), loaderNext: _jsx(UserSkeleton, Object.assign({ elevation: 0 }, userProps)), className: classes.infiniteScroll, endMessage: _jsx(Typography, Object.assign({ className: classes.endMessage }, { children: _jsx(FormattedMessage, { id: "ui.eventMembersWidget.noMoreResults", defaultMessage: "ui.eventMembersWidget.noMoreResults" }) })) }, { children: _jsx(List, { children: state.results.map((user) => (_jsx(ListItem, { children: _jsx(User, Object.assign({ elevation: 0, user: user }, userProps)) }, user.id))) }) })) })))] }));
+    return (_jsxs(_Fragment, { children: [_jsx(List, { children: users === null || users === void 0 ? void 0 : users.slice(0, state.visibleItems).map((user) => (_jsx(ListItem, { children: _jsx(User, Object.assign({ elevation: 0, user: user }, userProps, { actions: getActionsComponent(user.id) })) }, user.id))) }), state.count > state.visibleItems && (_jsx(Button, Object.assign({ onClick: handleToggleDialogOpen, className: classes.actionButton }, { children: _jsx(Typography, Object.assign({ variant: "caption" }, { children: _jsx(FormattedMessage, { id: "ui.eventMembersWidget.showAll", defaultMessage: "ui.eventMembersWidget.showAll" }) })) }))), _jsx(DialogRoot, Object.assign({ className: classes.dialogRoot, title: _jsx(FormattedMessage, { defaultMessage: "ui.eventMembersWidget.title", id: "ui.eventMembersWidget.title" }), onClose: handleToggleDialogOpen, open: openDialog }, dialogProps, { children: _jsx(InfiniteScroll, Object.assign({ dataLength: state.results.length, next: handleNext, hasMoreNext: Boolean(state.next), loaderNext: _jsx(UserSkeleton, Object.assign({ elevation: 0 }, userProps)), className: classes.infiniteScroll, endMessage: _jsx(Typography, Object.assign({ className: classes.endMessage }, { children: _jsx(FormattedMessage, { id: "ui.eventMembersWidget.noMoreResults", defaultMessage: "ui.eventMembersWidget.noMoreResults" }) })) }, { children: _jsx(List, { children: state.results.map((user) => (_jsx(ListItem, { children: _jsx(User, Object.assign({ elevation: 0, user: user }, userProps)) }, user.id))) }) })) }))] }));
 }

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

@@ -1,4 +1,4 @@
-export declare type TabContentType = '1' | '2' | '3';
+export type TabContentType = '1' | '2' | '3';
 export declare enum TabContentEnum {
     PARTICIPANTS = "1",
     INVITED = "2",

package/lib/esm/components/EventParticipantsButton/EventParticipantsButton.js

@@ -133,5 +133,5 @@ export default function EventParticipantsButton(inProps) {
     }, [setOpen]);
     return (_jsxs(_Fragment, { children: [_jsxs(Root, Object.assign({ className: classNames(classes.root, className), onClick: handleToggleDialogOpen, disabled: loading || !scEvent || scEvent.goings_counter === 0, 
                 // @ts-expect-error this is needed to use followers into SCEventParticipantsButton
-                followers: followers }, rest, { children: [!hideCaption && (_jsx(Typography, Object.assign({ className: classes.participants, variant: "caption" }, { children: _jsx(FormattedMessage, { defaultMessage: "ui.eventParticipantsButton.participants", id: "ui.eventParticipantsButton.participants" }) }))), !followers.length && (loading || !scEvent) ? (_jsx(AvatarGroupSkeleton, Object.assign({}, rest, (!participantsAvailable && { skeletonsAnimation: false })))) : (_jsx(AvatarGroup, Object.assign({ total: followers.length, renderSurplus: renderSurplus }, { children: followers.map((c) => (_jsx(Avatar, { alt: c.username, src: c.avatar }, c.id))) })))] })), open && (_jsx(DialogRoot, Object.assign({ className: classes.dialogRoot, title: _jsx(FormattedMessage, { defaultMessage: "ui.eventParticipantsButton.dialogTitle", id: "ui.eventParticipantsButton.dialogTitle", values: { total: scEvent.goings_counter } }), onClose: handleToggleDialogOpen, open: open }, DialogProps, { children: _jsx(InfiniteScroll, Object.assign({ dataLength: followers.length, next: fetchFollowers, hasMoreNext: next !== null || loading, loaderNext: _jsx(UserSkeleton, { elevation: 0 }), className: classes.infiniteScroll, endMessage: _jsx(Typography, Object.assign({ className: classes.endMessage }, { children: _jsx(FormattedMessage, { id: "ui.eventParticipantsButton.noOtherParticipants", defaultMessage: "ui.eventParticipantsButton.noOtherParticipants" }) })) }, { children: _jsx(List, { children: followers.map((follower) => (_jsx(ListItem, { children: _jsx(User, { elevation: 0, user: follower }) }, follower.id))) }) })) })))] }));
+                followers: followers }, rest, { children: [!hideCaption && (_jsx(Typography, Object.assign({ className: classes.participants, variant: "caption" }, { children: _jsx(FormattedMessage, { defaultMessage: "ui.eventParticipantsButton.participants", id: "ui.eventParticipantsButton.participants" }) }))), !followers.length && (loading || !scEvent) ? (_jsx(AvatarGroupSkeleton, Object.assign({}, rest, (!participantsAvailable && { skeletonsAnimation: false })))) : (_jsx(AvatarGroup, Object.assign({ total: followers.length, renderSurplus: renderSurplus }, { children: followers.map((c) => (_jsx(Avatar, { alt: c.username, src: c.avatar }, c.id))) })))] })), _jsx(DialogRoot, Object.assign({ className: classes.dialogRoot, title: _jsx(FormattedMessage, { defaultMessage: "ui.eventParticipantsButton.dialogTitle", id: "ui.eventParticipantsButton.dialogTitle", values: { total: (scEvent === null || scEvent === void 0 ? void 0 : scEvent.goings_counter) || 0 } }), onClose: handleToggleDialogOpen, open: open }, DialogProps, { children: _jsx(InfiniteScroll, Object.assign({ dataLength: followers.length, next: fetchFollowers, hasMoreNext: next !== null || loading, loaderNext: _jsx(UserSkeleton, { elevation: 0 }), className: classes.infiniteScroll, endMessage: _jsx(Typography, Object.assign({ className: classes.endMessage }, { children: _jsx(FormattedMessage, { id: "ui.eventParticipantsButton.noOtherParticipants", defaultMessage: "ui.eventParticipantsButton.noOtherParticipants" }) })) }, { children: _jsx(List, { children: followers.map((follower) => (_jsx(ListItem, { children: _jsx(User, { elevation: 0, user: follower }) }, follower.id))) }) })) }))] }));
 }

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

@@ -9,11 +9,11 @@ import { StickyBoxProps } from '../../shared/StickyBox';
 /**
  * FeedSidebarProps has the same props as StickyBoxProps type
  */
-export declare type FeedSidebarProps = StickyBoxProps;
+export type FeedSidebarProps = StickyBoxProps;
 /**
  * FeedRef props
  */
-export declare type FeedRef = {
+export type FeedRef = {
     addFeedData: (obj: any, syncPagination?: boolean) => void;
     refresh: () => void;
     getCurrentFeedObjectIds: () => number[];

package/lib/esm/components/Feed/Skeleton.d.ts

@@ -11,7 +11,7 @@ interface FeedSkeletonMap {
      */
     className?: string;
 }
-export declare type FeedSkeletonProps = React.PropsWithChildren<FeedSkeletonMap>;
+export type FeedSkeletonProps = React.PropsWithChildren<FeedSkeletonMap>;
 /**
  * > API documentation for the Community-JS Feed Skeleton component. Learn about the available props and the CSS API.
 

package/lib/esm/components/FeedObject/Activities/Activities.js

@@ -33,7 +33,7 @@ export default function Activities(props) {
         feedObject,
         feedObjectType,
         cacheStrategy,
-        pageSize: 2,
+        pageSize: 1,
         orderBy: selectedActivities === SCFeedObjectActivitiesType.CONNECTIONS_COMMENTS
             ? SCCommentsOrderBy.CONNECTION_DESC
             : selectedActivities === SCFeedObjectActivitiesType.FIRST_COMMENTS

package/lib/esm/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/esm/components/LiveStream/LiveStream.js

@@ -0,0 +1,140 @@
+import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Avatar, Box, Button, CardActions, CardContent, CardMedia, Chip, Divider, Typography } from '@mui/material';
+import { styled } from '@mui/material/styles';
+import { useThemeProps } from '@mui/system';
+import { Link, SCRoutes, useSCFetchLiveStream, useSCRouting } from '@selfcommunity/react-core';
+import classNames from 'classnames';
+import { useMemo } from 'react';
+import { FormattedMessage, useIntl } from 'react-intl';
+import BaseItem from '../../shared/BaseItem';
+import Calendar from '../../shared/Calendar';
+import { SCLiveStreamTemplateType } from '../../types/liveStream';
+import User from '../User';
+import Widget from '../Widget';
+import { PREFIX } from './constants';
+import { LiveStreamSkeleton } from './index';
+import LiveStreamInfoDetails from '../../shared/LiveStreamInfoDetails';
+const classes = {
+    root: `${PREFIX}-root`,
+    detailRoot: `${PREFIX}-detail-root`,
+    previewRoot: `${PREFIX}-preview-root`,
+    snippetRoot: `${PREFIX}-snippet-root`,
+    detailImageWrapper: `${PREFIX}-detail-image-wrapper`,
+    detailImage: `${PREFIX}-detail-image`,
+    detailInProgress: `${PREFIX}-detail-in-progress`,
+    detailNameWrapper: `${PREFIX}-detail-name-wrapper`,
+    detailName: `${PREFIX}-detail-name`,
+    detailContent: `${PREFIX}-detail-content`,
+    detailUser: `${PREFIX}-detail-user`,
+    detailFirstDivider: `${PREFIX}-detail-first-divider`,
+    detailSecondDivider: `${PREFIX}-detail-second-divider`,
+    detailActions: `${PREFIX}-detail-actions`,
+    previewImageWrapper: `${PREFIX}-preview-image-wrapper`,
+    previewImage: `${PREFIX}-preview-image`,
+    previewInProgress: `${PREFIX}-preview-in-progress`,
+    previewNameWrapper: `${PREFIX}-preview-name-wrapper`,
+    previewName: `${PREFIX}-preview-name`,
+    previewContent: `${PREFIX}-preview-content`,
+    previewActions: `${PREFIX}-preview-actions`,
+    snippetImage: `${PREFIX}-snippet-image`,
+    snippetAvatar: `${PREFIX}-snippet-avatar`,
+    snippetInProgress: `${PREFIX}-snippet-in-progress`,
+    snippetPrimary: `${PREFIX}-snippet-primary`,
+    snippetSecondary: `${PREFIX}-snippet-secondary`,
+    snippetActions: `${PREFIX}-snippet-actions`
+};
+const Root = styled(Widget, {
+    name: PREFIX,
+    slot: 'Root',
+    overridesResolver: (props, styles) => styles.root
+})(() => ({}));
+const DetailRoot = styled(Box, {
+    name: PREFIX,
+    slot: 'DetailRoot',
+    overridesResolver: (props, styles) => styles.detailRoot
+})(() => ({}));
+const PreviewRoot = styled(Box, {
+    name: PREFIX,
+    slot: 'PreviewRoot',
+    overridesResolver: (props, styles) => styles.previewRoot
+})(() => ({}));
+const SnippetRoot = styled(BaseItem, {
+    name: 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
+ */
+export default function LiveStream(inProps) {
+    // PROPS
+    const props = useThemeProps({
+        props: inProps,
+        name: PREFIX
+    });
+    const { id = `live_stream_object_${props.liveStreamId ? props.liveStreamId : props.liveStream ? props.liveStream.id : ''}`, liveStreamId = null, liveStream = null, className = null, template = SCLiveStreamTemplateType.SNIPPET, hideInProgress = false, hideLiveStreamHost = false, actions, EventSkeletonComponentProps = {} } = props, rest = __rest(props, ["id", "liveStreamId", "liveStream", "className", "template", "hideInProgress", "hideLiveStreamHost", "actions", "EventSkeletonComponentProps"]);
+    // STATE
+    const { scLiveStream } = useSCFetchLiveStream({ id: liveStreamId, liveStream });
+    const inProgress = useMemo(() => scLiveStream /* && scLiveStream.running */, [scLiveStream]);
+    // CONTEXT
+    const scRoutingContext = useSCRouting();
+    // HOOKS
+    const intl = useIntl();
+    /**
+     * Renders liveStream object
+     */
+    if (!scLiveStream) {
+        return _jsx(LiveStreamSkeleton, Object.assign({ template: template }, EventSkeletonComponentProps, rest, { actions: actions }));
+    }
+    /**
+     * Renders liveStream object
+     */
+    let contentObj;
+    if (template === SCLiveStreamTemplateType.DETAIL) {
+        contentObj = (_jsxs(DetailRoot, Object.assign({ className: classes.detailRoot }, { children: [_jsxs(Box, Object.assign({ className: classes.detailImageWrapper }, { children: [_jsx(CardMedia, { component: "img", image: scLiveStream.cover, alt: scLiveStream.title, className: classes.detailImage }), !hideInProgress && inProgress && (_jsx(Chip, { size: "small", component: "div", label: _jsx(FormattedMessage, { id: "ui.liveStream.inProgress", defaultMessage: "ui.liveStream.inProgress" }), className: classes.detailInProgress })), _jsx(Calendar, { day: new Date(scLiveStream.created_at).getDate() })] })), _jsxs(CardContent, Object.assign({ className: classes.detailContent }, { children: [_jsx(Box, Object.assign({ className: classes.detailNameWrapper }, { children: _jsx(Typography, Object.assign({ variant: "h3", className: classes.detailName }, { children: scLiveStream.title })) })), _jsx(LiveStreamInfoDetails, { liveStream: scLiveStream }), !hideLiveStreamHost && (_jsx(User, { user: scLiveStream.host, elevation: 0, secondary: _jsx(Typography, Object.assign({ variant: "caption" }, { children: _jsx(FormattedMessage, { id: "ui.myEventsWidget.planner", defaultMessage: "ui.myEventsWidget.planner" }) })), actions: _jsx(_Fragment, {}), className: classes.detailUser })), _jsx(Divider, { className: classes.detailSecondDivider })] })), actions !== null && actions !== void 0 ? actions : (_jsx(CardActions, Object.assign({ className: classes.detailActions }, { children: _jsx(Button, Object.assign({ size: "small", variant: "outlined", component: Link, to: scRoutingContext.url(SCRoutes.LIVESTREAM_ROUTE_NAME, scLiveStream) }, { children: _jsx(FormattedMessage, { defaultMessage: "ui.liveStream.see", id: "ui.liveStream.see" }) })) })))] })));
+    }
+    else if (template === SCLiveStreamTemplateType.PREVIEW) {
+        contentObj = (_jsxs(PreviewRoot, Object.assign({ className: classes.previewRoot }, { children: [_jsxs(Box, Object.assign({ position: "relative", className: classes.previewImageWrapper }, { children: [_jsx(CardMedia, { component: "img", image: scLiveStream.cover, alt: scLiveStream.title, className: classes.previewImage }), !hideInProgress && inProgress && (_jsx(Chip, { size: "small", component: "div", label: _jsx(FormattedMessage, { id: "ui.liveStream.inProgress", defaultMessage: "ui.liveStream.inProgress" }), className: classes.previewInProgress }))] })), _jsx(CardContent, Object.assign({ className: classes.previewContent }, { children: _jsx(LiveStreamInfoDetails, { liveStream: scLiveStream, beforeDateInfo: _jsx(Link, Object.assign({ to: scRoutingContext.url(SCRoutes.LIVESTREAM_ROUTE_NAME, scLiveStream), className: classes.previewNameWrapper }, { children: _jsx(Typography, Object.assign({ variant: "h5", className: classes.previewName }, { children: scLiveStream.title })) })) }) })), actions !== null && actions !== void 0 ? actions : (_jsx(CardActions, Object.assign({ className: classes.previewActions }, { children: _jsx(Button, Object.assign({ size: "small", variant: "outlined", component: Link, to: scRoutingContext.url(SCRoutes.LIVESTREAM_ROUTE_NAME, scLiveStream) }, { children: _jsx(FormattedMessage, { defaultMessage: "ui.liveStream.see", id: "ui.liveStream.see" }) })) })))] })));
+    }
+    else {
+        contentObj = (_jsx(SnippetRoot, { elevation: 0, square: true, disableTypography: true, className: classes.snippetRoot, image: _jsxs(Box, Object.assign({ className: classes.snippetImage }, { children: [_jsx(Avatar, { variant: "square", alt: scLiveStream.title, src: scLiveStream.cover, className: classes.snippetAvatar }), ' ', !hideInProgress && inProgress && (_jsx(Chip, { size: "small", component: "div", label: _jsx(FormattedMessage, { id: "ui.liveStream.inProgress", defaultMessage: "ui.liveStream.inProgress" }), className: classes.snippetInProgress }))] })), primary: _jsxs(Link, Object.assign({}, (scLiveStream.id && { to: scRoutingContext.url(SCRoutes.LIVESTREAM_ROUTE_NAME, scLiveStream) }), { className: classes.snippetPrimary }, { children: [_jsx(Typography, Object.assign({ component: "span" }, { children: `${intl.formatDate(scLiveStream.created_at, {
+                            weekday: 'long',
+                            month: 'long',
+                            day: 'numeric'
+                        })}` })), _jsx(Typography, Object.assign({ variant: "body1" }, { children: scLiveStream.title }))] })), secondary: _jsx(Typography, Object.assign({ component: "p", variant: "body2", className: classes.snippetSecondary }, { children: _jsx(FormattedMessage, { id: `ui.eventForm.address.liveStream.label`, defaultMessage: `ui.eventForm.address.liveStream.label` }) })), actions: actions !== null && actions !== void 0 ? actions : (_jsx(Box, Object.assign({ className: classes.snippetActions }, { children: _jsx(Button, Object.assign({ size: "small", variant: "outlined", component: Link, to: scRoutingContext.url(SCRoutes.LIVESTREAM_ROUTE_NAME, scLiveStream) }, { children: _jsx(FormattedMessage, { defaultMessage: "ui.liveStream.see", id: "ui.liveStream.see" }) })) }))) }));
+    }
+    /**
+     * Renders root object
+     */
+    return (_jsx(Root, Object.assign({ id: id, className: classNames(classes.root, className, `${PREFIX}-${template}`) }, rest, { children: contentObj })));
+}