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

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

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

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, hasLocationInfo: false, beforeDateInfo: _jsx(Link, Object.assign({ to: scRoutingContext.url(SCRoutes.EVENT_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.EVENT_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({ to: scRoutingContext.url(SCRoutes.EVENT_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 })));
+}

package/lib/esm/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;

package/lib/esm/components/LiveStream/Skeleton.js

@@ -0,0 +1,89 @@
+import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { AvatarGroup, Box, Button, CardActions, CardContent, Divider, Icon, Stack, useTheme } from '@mui/material';
+import Skeleton from '@mui/material/Skeleton';
+import { styled } from '@mui/material/styles';
+import { useThemeProps } from '@mui/system';
+import classNames from 'classnames';
+import BaseItem from '../../shared/BaseItem';
+import { SCLiveStreamTemplateType } from '../../types/liveStream';
+import Widget from '../Widget';
+import { PREFIX } from './constants';
+const classes = {
+    root: `${PREFIX}-skeleton-root`,
+    skeletonDetailRoot: `${PREFIX}-skeleton-detail-root`,
+    skeletonPreviewRoot: `${PREFIX}-skeleton-preview-root`,
+    skeletonSnippetRoot: `${PREFIX}-skeleton-snippet-root`,
+    skeletonDetailCalendar: `${PREFIX}-skeleton-detail-calendar`,
+    skeletonDetailContent: `${PREFIX}-skeleton-detail-content`,
+    skeletonDetailActions: `${PREFIX}-skeleton-detail-actions`,
+    skeletonDetailUser: `${PREFIX}-skeleton-detail-user`,
+    skeletonDetailFirstDivider: `${PREFIX}-skeleton-detail-first-divider`,
+    skeletonDetailSecondDivider: `${PREFIX}-skeleton-detail-second-divider`,
+    skeletonPreviewContent: `${PREFIX}-skeleton-preview-content`,
+    skeletonPreviewName: `${PREFIX}-skeleton-preview-name`,
+    skeletonPreviewActions: `${PREFIX}-skeleton-preview-actions`,
+    skeletonSnippetImage: `${PREFIX}-skeleton-snippet-image`,
+    skeletonSnippetAction: `${PREFIX}-skeleton-snippet-action`
+};
+const Root = styled(Widget, {
+    name: PREFIX,
+    slot: 'SkeletonRoot'
+})(() => ({}));
+const SkeletonDetailRoot = styled(Box, {
+    name: PREFIX,
+    slot: 'SkeletonDetailRoot'
+})(() => ({}));
+const SkeletonPreviewRoot = styled(Box, {
+    name: PREFIX,
+    slot: 'SkeletonPreviewRoot'
+})(() => ({}));
+const SkeletonSnippetRoot = styled(BaseItem, {
+    name: PREFIX,
+    slot: 'SkeletonSnippetRoot'
+})(() => ({}));
+/**
+ * > 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) {
+    // PROPS
+    const props = useThemeProps({
+        props: inProps,
+        name: PREFIX
+    });
+    const { className, template = SCLiveStreamTemplateType.SNIPPET, skeletonsAnimation = 'wave', actions } = props, rest = __rest(props, ["className", "template", "skeletonsAnimation", "actions"]);
+    const theme = useTheme();
+    /**
+     * Renders liveStream object
+     */
+    let contentObj;
+    if (template === SCLiveStreamTemplateType.DETAIL) {
+        contentObj = (_jsxs(SkeletonDetailRoot, Object.assign({ className: classes.skeletonDetailRoot }, { children: [_jsxs(Box, Object.assign({ position: "relative" }, { children: [_jsx(Skeleton, { variant: "rectangular", animation: skeletonsAnimation, width: "100%", height: "170px" }), _jsx(Skeleton, { className: classes.skeletonDetailCalendar, variant: "rounded", animation: skeletonsAnimation, width: "60px", height: "60px" })] })), _jsxs(CardContent, Object.assign({ className: classes.skeletonDetailContent }, { children: [_jsx(Skeleton, { animation: skeletonsAnimation, width: "36%", height: "40px" }), _jsxs(Stack, Object.assign({ direction: "row", alignItems: "center", gap: "8px", marginBottom: "9px" }, { children: [_jsx(Skeleton, { animation: skeletonsAnimation, variant: "circular", width: "21px", height: "21px" }), _jsx(Skeleton, { animation: skeletonsAnimation, width: "50%", height: "20px" })] })), _jsxs(Stack, Object.assign({ direction: "row", alignItems: "center", gap: "8px", marginBottom: "9px" }, { children: [_jsx(Skeleton, { animation: skeletonsAnimation, variant: "circular", width: "21px", height: "21px" }), _jsx(Skeleton, { animation: skeletonsAnimation, width: "35%", height: "20px" })] })), _jsxs(Stack, Object.assign({ direction: "row", alignItems: "center", gap: "8px", marginBottom: "14px" }, { children: [_jsx(Skeleton, { animation: skeletonsAnimation, variant: "circular", width: "21px", height: "21px" }), _jsx(Skeleton, { animation: skeletonsAnimation, width: "27%", height: "20px" })] })), _jsxs(Stack, Object.assign({ direction: "row", gap: "8px", className: classes.skeletonDetailUser }, { children: [_jsx(Skeleton, { animation: skeletonsAnimation, variant: "circular", width: "36px", height: "36px" }), _jsxs(Stack, Object.assign({ gap: "1px" }, { children: [_jsx(Skeleton, { animation: skeletonsAnimation, width: "75px", height: "15px" }), _jsx(Skeleton, { animation: skeletonsAnimation, width: "86px", height: "16px" })] }))] })), _jsx(Divider, { className: classes.skeletonDetailFirstDivider }), _jsxs(Stack, Object.assign({ direction: "row", gap: "8px", alignItems: "center", height: "28px" }, { children: [_jsx(Skeleton, { animation: skeletonsAnimation, width: "68px", height: "20px" }), _jsxs(AvatarGroup, { children: [_jsx(Skeleton, { animation: skeletonsAnimation, variant: "circular", width: "21px", height: "21px" }), _jsx(Skeleton, { animation: skeletonsAnimation, variant: "circular", width: "21px", height: "21px" }), _jsx(Skeleton, { animation: skeletonsAnimation, variant: "circular", width: "21px", height: "21px" }), _jsx(Skeleton, { animation: skeletonsAnimation, variant: "circular", width: "21px", height: "21px" })] })] })), _jsx(Divider, { className: classes.skeletonDetailSecondDivider })] })), _jsx(CardActions, Object.assign({ className: classes.skeletonDetailActions }, { children: actions !== undefined ? actions : _jsx(Skeleton, { variant: "rounded", width: 100, height: 30 }) }))] })));
+    }
+    else if (template === SCLiveStreamTemplateType.PREVIEW) {
+        contentObj = (_jsxs(SkeletonPreviewRoot, Object.assign({ className: classes.skeletonPreviewRoot }, { children: [_jsx(Box, Object.assign({ position: "relative" }, { children: _jsx(Skeleton, { variant: "rectangular", animation: skeletonsAnimation, width: "100%", height: "80px" }) })), _jsxs(CardContent, Object.assign({ className: classes.skeletonPreviewContent }, { children: [_jsxs(Stack, Object.assign({ direction: "row", alignItems: "center", gap: "8px" }, { children: [_jsx(Skeleton, { animation: skeletonsAnimation, variant: "circular", width: "21px", height: "21px" }), _jsx(Skeleton, { animation: skeletonsAnimation, width: "50%", height: "20px" })] })), _jsx(Skeleton, { animation: skeletonsAnimation, width: "67%", height: "25px", className: classes.skeletonPreviewName }), _jsx(Stack, Object.assign({ direction: "row", alignItems: "center", gap: "8px", marginBottom: "2px" }, { children: _jsx(Skeleton, { animation: skeletonsAnimation, width: "27%", height: "18px" }) })), _jsx(Stack, Object.assign({ direction: "row", gap: "8px", alignItems: "center" }, { children: _jsxs(AvatarGroup, { children: [_jsx(Skeleton, { animation: skeletonsAnimation, variant: "circular", width: `${theme.selfcommunity.user.avatar.sizeSmall}px`, height: `${theme.selfcommunity.user.avatar.sizeSmall}px` }), _jsx(Skeleton, { animation: skeletonsAnimation, variant: "circular", width: `${theme.selfcommunity.user.avatar.sizeSmall}px`, height: `${theme.selfcommunity.user.avatar.sizeSmall}px` }), _jsx(Skeleton, { animation: skeletonsAnimation, variant: "circular", width: `${theme.selfcommunity.user.avatar.sizeSmall}px`, height: `${theme.selfcommunity.user.avatar.sizeSmall}px` })] }) }))] })), _jsx(CardActions, Object.assign({ className: classes.skeletonPreviewActions }, { children: actions !== undefined ? actions : _jsx(Skeleton, { variant: "rounded", width: 100, height: 30 }) }))] })));
+    }
+    else {
+        contentObj = (_jsx(SkeletonSnippetRoot, { elevation: 0, square: true, disableTypography: true, className: classes.skeletonSnippetRoot, image: _jsxs(Box, Object.assign({ className: classes.skeletonSnippetImage }, { children: [_jsx(Skeleton, { animation: skeletonsAnimation, variant: "rectangular", width: 100, height: 60 }), " ", _jsx(Icon, Object.assign({ fontSize: "large" }, { children: "CalendarIcon" }))] })), primary: _jsx(Skeleton, { animation: skeletonsAnimation, variant: "rectangular", height: 10, width: "40%", style: { marginBottom: 12 } }), secondary: _jsxs(_Fragment, { children: [_jsx(Skeleton, { animation: skeletonsAnimation, variant: "rectangular", height: 10, width: "60%", style: { marginBottom: 10, marginRight: 5 } }), _jsx(Skeleton, { animation: skeletonsAnimation, variant: "rectangular", height: 10, width: "35%" })] }), actions: _jsx(_Fragment, { children: actions !== undefined ? (actions) : (_jsx(Button, Object.assign({ size: "small", variant: "outlined", disabled: true }, { children: _jsx(Skeleton, { animation: skeletonsAnimation, height: 10, width: 30, style: { marginTop: 5, marginBottom: 5 } }) }))) }) }));
+    }
+    return (_jsx(Root, Object.assign({ className: classNames(classes.root, className, `${PREFIX}-skeleton-${template}`) }, rest, { children: contentObj })));
+}

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

@@ -0,0 +1 @@
+export declare const PREFIX = "SCLiveStream";

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

@@ -0,0 +1 @@
+export const PREFIX = 'SCLiveStream';

package/lib/esm/components/LiveStream/index.d.ts

@@ -0,0 +1,4 @@
+import LiveStream, { LiveStreamProps } from './LiveStream';
+import LiveStreamSkeleton, { LiveStreamSkeletonProps } from './Skeleton';
+export default LiveStream;
+export { LiveStreamProps, LiveStreamSkeleton, LiveStreamSkeletonProps };

package/lib/esm/components/LiveStream/index.js

@@ -0,0 +1,4 @@
+import LiveStream from './LiveStream';
+import LiveStreamSkeleton from './Skeleton';
+export default LiveStream;
+export { LiveStreamSkeleton };

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

@@ -1,5 +1,5 @@
 import { BoxProps } from '@mui/material';
-import { SCLiveStreamType } from '@selfcommunity/types/src/index';
+import { SCLiveStreamType } from '@selfcommunity/types';
 export interface LiveStreamFormProps extends BoxProps {
     /**
      * Overrides or extends the styles applied to the component.

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

@@ -4,14 +4,17 @@ import { LoadingButton } from '@mui/lab';
 import { Box, FormGroup, Paper, TextField, Typography } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import { useThemeProps } from '@mui/system';
-import { SCPreferences, useSCContext, useSCPreferences } from '@selfcommunity/react-core';
+import { SCPreferences, useSCPreferences } from '@selfcommunity/react-core';
 import classNames from 'classnames';
 import { useCallback, useMemo, useState } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { LIVE_STREAM_DESCRIPTION_MAX_LENGTH, LIVE_STREAM_TITLE_MAX_LENGTH, LIVE_STREAM_SLUG_MAX_LENGTH } from '../../constants/LiveStream';
-import { PREFIX } from './constants';
+import { LIVESTREAM_DEFAULT_SETTINGS, PREFIX } from './constants';
 import UploadEventCover from '../EventForm/UploadEventCover';
-import { generateRoomId } from '../../utils/liveStream';
+import LiveStreamSettingsForm from './LiveStreamFormSettings';
+import { formatHttpErrorCode, LiveStreamService } from '@selfcommunity/api-services';
+import { SCOPE_SC_UI } from '../../constants/Errors';
+import { Logger } from '@selfcommunity/utils';
 const classes = {
     root: `${PREFIX}-root`,
     form: `${PREFIX}-form`,
@@ -75,8 +78,6 @@ export default function LiveStreamForm(inProps) {
         name: PREFIX
     });
     const { className, onSuccess, onError, liveStream = null } = props, rest = __rest(props, ["className", "onSuccess", "onError", "liveStream"]);
-    // CONTEXT
-    const scContext = useSCContext();
     // INTL
     const intl = useIntl();
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -85,7 +86,7 @@ export default function LiveStreamForm(inProps) {
         title: (liveStream === null || liveStream === void 0 ? void 0 : liveStream.title) || '',
         description: (liveStream === null || liveStream === void 0 ? void 0 : liveStream.description) || '',
         slug: (liveStream === null || liveStream === void 0 ? void 0 : liveStream.slug) || '',
-        settings: (liveStream === null || liveStream === void 0 ? void 0 : liveStream.settings) || {},
+        settings: (liveStream === null || liveStream === void 0 ? void 0 : liveStream.settings) || LIVESTREAM_DEFAULT_SETTINGS,
         cover: (liveStream === null || liveStream === void 0 ? void 0 : liveStream.cover) || '',
         coverFile: (liveStream === null || liveStream === void 0 ? void 0 : liveStream.cover) || '',
         isSubmitting: false
@@ -118,47 +119,38 @@ export default function LiveStreamForm(inProps) {
         if (field.coverFile) {
             formData.append('cover', field.coverFile);
         }
-        if (visibilityEnabled) {
-            formData.append('visible', 'true');
-        }
         formData.append('title', field.title);
         formData.append('description', field.description);
-        // TODO: for testing
-        setTimeout(() => {
-            onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess({ roomName: generateRoomId() });
-            setField((prev) => (Object.assign(Object.assign({}, prev), { ['isSubmitting']: false })));
-        }, 1000);
-        /*
-        let eventService: Promise<SCEventType>;
+        formData.append('slug', field.slug);
+        formData.append('settings', JSON.stringify(Object.assign(Object.assign({}, field.settings), LIVESTREAM_DEFAULT_SETTINGS)));
+        let liveStreamService;
         if (liveStream) {
-          eventService = EventService.updateEvent(liveStream.id, formData as unknown as SCEventType, {headers: {'Content-Type': 'multipart/form-data'}});
-        } else {
-          eventService = EventService.createEvent(formData, {headers: {'Content-Type': 'multipart/form-data'}});
+            liveStreamService = LiveStreamService.update(liveStream.id, formData, {
+                headers: { 'Content-Type': 'multipart/form-data' }
+            });
+        }
+        else {
+            liveStreamService = LiveStreamService.create(formData, { headers: { 'Content-Type': 'multipart/form-data' } });
         }
-    
-        eventService
-          .then((data) => {
-            setField((prev) => ({...prev, ['isSubmitting']: false}));
-            // onSuccess?.(data);
-          })
-          .catch((e) => {
+        liveStreamService
+            .then((data) => {
+            setField((prev) => (Object.assign(Object.assign({}, prev), { ['isSubmitting']: false })));
+            onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess(data);
+        })
+            .catch((e) => {
             const _error = formatHttpErrorCode(e);
-    
             // eslint-disable-next-line @typescript-eslint/ban-ts-ignore,@typescript-eslint/ban-ts-comment
             // @ts-ignore
             if (Object.values(_error)[0].error === 'unique') {
-              setError({
-                ...error,
-                ['titleError']: <FormattedMessage id="ui.liveStreamForm.title.error.unique" defaultMessage="ui.liveStreamForm.title.error.unique" />
-              });
-            } else {
-              setError({...error, ..._error});
+                setError(Object.assign(Object.assign({}, error), { ['titleError']: _jsx(FormattedMessage, { id: "ui.liveStreamForm.title.error.unique", defaultMessage: "ui.liveStreamForm.title.error.unique" }), ['slugError']: _jsx(FormattedMessage, { id: "ui.liveStreamForm.slug.error.unique", defaultMessage: "ui.liveStreamForm.slug.error.unique" }) }));
+            }
+            else {
+                setError(Object.assign(Object.assign({}, error), _error));
             }
-    
-            setField((prev) => ({...prev, ['isSubmitting']: false}));
+            setField((prev) => (Object.assign(Object.assign({}, prev), { ['isSubmitting']: false })));
             Logger.error(SCOPE_SC_UI, e);
-            onError?.(e);
-          }); */
+            onError === null || onError === void 0 ? void 0 : onError(e);
+        });
     }, [field, privateEnabled, visibilityEnabled, onSuccess, onError]);
     const handleChange = useCallback((event) => {
         const { name, value } = event.target;
@@ -168,6 +160,9 @@ export default function LiveStreamForm(inProps) {
             setError(error);
         }
     }, [error]);
+    const handleChangeSettings = useCallback((data) => {
+        setField((prev) => (Object.assign(Object.assign({}, prev), { settings: data })));
+    }, [setField]);
     /**
      * Renders root object
      */
@@ -177,7 +172,7 @@ export default function LiveStreamForm(inProps) {
                             endAdornment: _jsx(Typography, Object.assign({ variant: "body2" }, { children: LIVE_STREAM_SLUG_MAX_LENGTH - field.title.length }))
                         }, error: Boolean(field.slug.length > LIVE_STREAM_SLUG_MAX_LENGTH) || Boolean(error['slugError']), helperText: field.title.length > LIVE_STREAM_SLUG_MAX_LENGTH ? (_jsx(FormattedMessage, { id: "ui.liveStreamForm.slug.error.maxLength", defaultMessage: "ui.liveStreamForm.slug.error.maxLength" })) : error['slugError'] ? (error['slugError']) : null }), _jsx(TextField, { multiline: true, rows: 4, 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) ? LIVE_STREAM_DESCRIPTION_MAX_LENGTH - field.description.length : LIVE_STREAM_DESCRIPTION_MAX_LENGTH })))
-                        }, error: Boolean(((_b = field.description) === null || _b === void 0 ? void 0 : _b.length) > LIVE_STREAM_DESCRIPTION_MAX_LENGTH), helperText: ((_c = field.description) === null || _c === void 0 ? void 0 : _c.length) > LIVE_STREAM_DESCRIPTION_MAX_LENGTH ? (_jsx(FormattedMessage, { id: "ui.liveStreamForm.description.error.maxLength", defaultMessage: "ui.liveStreamForm.description.error.maxLength" })) : null }), _jsx(Box, Object.assign({ className: classes.actions }, { children: _jsx(LoadingButton, Object.assign({ loading: field.isSubmitting, disabled: !field.title ||
+                        }, error: Boolean(((_b = field.description) === null || _b === void 0 ? void 0 : _b.length) > LIVE_STREAM_DESCRIPTION_MAX_LENGTH), helperText: ((_c = field.description) === null || _c === void 0 ? void 0 : _c.length) > LIVE_STREAM_DESCRIPTION_MAX_LENGTH ? (_jsx(FormattedMessage, { id: "ui.liveStreamForm.description.error.maxLength", defaultMessage: "ui.liveStreamForm.description.error.maxLength" })) : null }), _jsx(LiveStreamSettingsForm, { settings: field.settings, onChange: handleChangeSettings }), _jsx(Box, Object.assign({ className: classes.actions }, { children: _jsx(LoadingButton, Object.assign({ loading: field.isSubmitting, disabled: !field.title ||
                                 Object.keys(error).length !== 0 ||
                                 field.title.length > LIVE_STREAM_TITLE_MAX_LENGTH ||
                                 field.description.length > LIVE_STREAM_DESCRIPTION_MAX_LENGTH, variant: "contained", onClick: handleSubmit, color: "secondary" }, { children: liveStream ? (_jsx(FormattedMessage, { id: "ui.liveStreamForm.button.edit", defaultMessage: "ui.liveStreamForm.button.edit" })) : (_jsx(FormattedMessage, { id: "ui.liveStreamForm.button.create", defaultMessage: "ui.liveStreamForm.button.create" })) })) }))] }))] })));

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

@@ -0,0 +1,46 @@
+import { BoxProps } from '@mui/material';
+export declare const PREFIX = "SCLiveStreamFormSettings";
+export interface LiveStreamFormSettingsProps extends BoxProps {
+    /**
+     * Overrides or extends the styles applied to the component.
+     * @default null
+     */
+    className?: string;
+    /**
+     * Event Object
+     * @default null
+     */
+    settings?: Record<string, any>;
+    /**
+     * onChange callback
+     * @param data
+     */
+    onChange?: (data: any) => void;
+    /**
+     * Any other properties
+     */
+    [p: string]: any;
+}
+/**
+ *> API documentation for the Community-JS LiveStreamSettingsForm component. Learn about the available props and the CSS API.
+ *
+ #### Import
+ ```jsx
+ import {LiveStreamSettingsForm} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+ The name `LiveStreamSettingsForm` can be used when providing style overrides in the theme.
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCLiveStreamForm-root|Styles applied to the root element.|
+ |switch|.SCLiveStreamForm-switch|Styles applied to the switch element.|
+ |switchLabel|.SCLiveStreamForm-switch-label|Styles applied to the switchLabel element.|
+ |accessView|.SCLiveStreamForm-access-view|Styles applied to the access view.|
+
+ * @param inProps
+ */
+export default function LiveStreamSettingsForm(inProps: LiveStreamFormSettingsProps): JSX.Element;