@selfcommunity/react-ui/lib/cjs/components/LiveStream/LiveStream.js

React UI Components to integrate a Community created with SelfCommunity Platform.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const material_1 = require("@mui/material");
const styles_1 = require("@mui/material/styles");
const system_1 = require("@mui/system");
const react_core_1 = require("@selfcommunity/react-core");
const classnames_1 = tslib_1.__importDefault(require("classnames"));
const react_1 = require("react");
const react_intl_1 = require("react-intl");
const BaseItem_1 = tslib_1.__importDefault(require("../../shared/BaseItem"));
const Calendar_1 = tslib_1.__importDefault(require("../../shared/Calendar"));
const liveStream_1 = require("../../types/liveStream");
const User_1 = tslib_1.__importDefault(require("../User"));
const Widget_1 = tslib_1.__importDefault(require("../Widget"));
const constants_1 = require("./constants");
const index_1 = require("./index");
const LiveStreamInfoDetails_1 = tslib_1.__importDefault(require("../../shared/LiveStreamInfoDetails"));
const classes = {
    root: `${constants_1.PREFIX}-root`,
    detailRoot: `${constants_1.PREFIX}-detail-root`,
    previewRoot: `${constants_1.PREFIX}-preview-root`,
    snippetRoot: `${constants_1.PREFIX}-snippet-root`,
    detailImageWrapper: `${constants_1.PREFIX}-detail-image-wrapper`,
    detailImage: `${constants_1.PREFIX}-detail-image`,
    detailInProgress: `${constants_1.PREFIX}-detail-in-progress`,
    detailNameWrapper: `${constants_1.PREFIX}-detail-name-wrapper`,
    detailName: `${constants_1.PREFIX}-detail-name`,
    detailContent: `${constants_1.PREFIX}-detail-content`,
    detailUser: `${constants_1.PREFIX}-detail-user`,
    detailFirstDivider: `${constants_1.PREFIX}-detail-first-divider`,
    detailSecondDivider: `${constants_1.PREFIX}-detail-second-divider`,
    detailActions: `${constants_1.PREFIX}-detail-actions`,
    previewImageWrapper: `${constants_1.PREFIX}-preview-image-wrapper`,
    previewImage: `${constants_1.PREFIX}-preview-image`,
    previewInProgress: `${constants_1.PREFIX}-preview-in-progress`,
    previewNameWrapper: `${constants_1.PREFIX}-preview-name-wrapper`,
    previewName: `${constants_1.PREFIX}-preview-name`,
    previewContent: `${constants_1.PREFIX}-preview-content`,
    previewActions: `${constants_1.PREFIX}-preview-actions`,
    snippetImage: `${constants_1.PREFIX}-snippet-image`,
    snippetAvatar: `${constants_1.PREFIX}-snippet-avatar`,
    snippetInProgress: `${constants_1.PREFIX}-snippet-in-progress`,
    snippetPrimary: `${constants_1.PREFIX}-snippet-primary`,
    snippetSecondary: `${constants_1.PREFIX}-snippet-secondary`,
    snippetActions: `${constants_1.PREFIX}-snippet-actions`
};
const Root = (0, styles_1.styled)(Widget_1.default, {
    name: constants_1.PREFIX,
    slot: 'Root',
    overridesResolver: (props, styles) => styles.root
})(() => ({}));
const DetailRoot = (0, styles_1.styled)(material_1.Box, {
    name: constants_1.PREFIX,
    slot: 'DetailRoot',
    overridesResolver: (props, styles) => styles.detailRoot
})(() => ({}));
const PreviewRoot = (0, styles_1.styled)(material_1.Box, {
    name: constants_1.PREFIX,
    slot: 'PreviewRoot',
    overridesResolver: (props, styles) => styles.previewRoot
})(() => ({}));
const SnippetRoot = (0, styles_1.styled)(BaseItem_1.default, {
    name: constants_1.PREFIX,
    slot: 'SnippetRoot',
    overridesResolver: (props, styles) => styles.snippetRoot
})(() => ({}));
/**
 * > API documentation for the Community-JS Live Stream component. Learn about the available props and the CSS API.
 *
 *
 * This component renders an liveStream item.
 * Take a look at our <strong>demo</strong> component [here](/docs/sdk/community-js/react-ui/Components/Event)

 #### Import

 ```jsx
 import {liveStream} from '@selfcommunity/react-ui';
 ```

 #### Component Name

 The name `SCLiveStream` can be used when providing style overrides in the theme.


 #### CSS

 |Rule Name|Global class|Description|
 |---|---|---|
 |root|.SCLiveStream-root|Styles applied to the root element.|
 |avatar|.SCLiveStream-avatar|Styles applied to the avatar element.|
 |primary|.SCLiveStream-primary|Styles applied to the primary item element section|
 |secondary|.SCLiveStream-secondary|Styles applied to the secondary item element section|
 |actions|.SCLiveStream-actions|Styles applied to the actions section.|


 *
 * @param inProps
 */
function LiveStream(inProps) {
    // PROPS
    const props = (0, system_1.useThemeProps)({
        props: inProps,
        name: constants_1.PREFIX
    });
    const { id = `live_stream_object_${props.liveStreamId ? props.liveStreamId : props.liveStream ? props.liveStream.id : ''}`, liveStreamId = null, liveStream = null, className = null, template = liveStream_1.SCLiveStreamTemplateType.SNIPPET, hideInProgress = false, hideLiveStreamHost = false, actions, EventSkeletonComponentProps = {} } = props, rest = tslib_1.__rest(props, ["id", "liveStreamId", "liveStream", "className", "template", "hideInProgress", "hideLiveStreamHost", "actions", "EventSkeletonComponentProps"]);
    // STATE
    const { scLiveStream } = (0, react_core_1.useSCFetchLiveStream)({ id: liveStreamId, liveStream });
    const inProgress = (0, react_1.useMemo)(() => scLiveStream /* && scLiveStream.running */, [scLiveStream]);
    // CONTEXT
    const scRoutingContext = (0, react_core_1.useSCRouting)();
    // HOOKS
    const intl = (0, react_intl_1.useIntl)();
    /**
     * Renders liveStream object
     */
    if (!scLiveStream) {
        return (0, jsx_runtime_1.jsx)(index_1.LiveStreamSkeleton, Object.assign({ template: template }, EventSkeletonComponentProps, rest, { actions: actions }));
    }
    /**
     * Renders liveStream object
     */
    let contentObj;
    if (template === liveStream_1.SCLiveStreamTemplateType.DETAIL) {
        contentObj = ((0, jsx_runtime_1.jsxs)(DetailRoot, Object.assign({ className: classes.detailRoot }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.detailImageWrapper }, { children: [(0, jsx_runtime_1.jsx)(material_1.CardMedia, { component: "img", image: scLiveStream.cover, alt: scLiveStream.title, className: classes.detailImage }), !hideInProgress && inProgress && ((0, jsx_runtime_1.jsx)(material_1.Chip, { size: "small", component: "div", label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStream.inProgress", defaultMessage: "ui.liveStream.inProgress" }), className: classes.detailInProgress })), (0, jsx_runtime_1.jsx)(Calendar_1.default, { day: new Date(scLiveStream.created_at).getDate() })] })), (0, jsx_runtime_1.jsxs)(material_1.CardContent, Object.assign({ className: classes.detailContent }, { children: [(0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.detailNameWrapper }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h3", className: classes.detailName }, { children: scLiveStream.title })) })), (0, jsx_runtime_1.jsx)(LiveStreamInfoDetails_1.default, { liveStream: scLiveStream }), !hideLiveStreamHost && ((0, jsx_runtime_1.jsx)(User_1.default, { user: scLiveStream.host, elevation: 0, secondary: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "caption" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.myEventsWidget.planner", defaultMessage: "ui.myEventsWidget.planner" }) })), actions: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}), className: classes.detailUser })), (0, jsx_runtime_1.jsx)(material_1.Divider, { className: classes.detailSecondDivider })] })), actions !== null && actions !== void 0 ? actions : ((0, jsx_runtime_1.jsx)(material_1.CardActions, Object.assign({ className: classes.detailActions }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", variant: "outlined", component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.LIVESTREAM_ROUTE_NAME, scLiveStream) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.liveStream.see", id: "ui.liveStream.see" }) })) })))] })));
    }
    else if (template === liveStream_1.SCLiveStreamTemplateType.PREVIEW) {
        contentObj = ((0, jsx_runtime_1.jsxs)(PreviewRoot, Object.assign({ className: classes.previewRoot }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ position: "relative", className: classes.previewImageWrapper }, { children: [(0, jsx_runtime_1.jsx)(material_1.CardMedia, { component: "img", image: scLiveStream.cover, alt: scLiveStream.title, className: classes.previewImage }), !hideInProgress && inProgress && ((0, jsx_runtime_1.jsx)(material_1.Chip, { size: "small", component: "div", label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStream.inProgress", defaultMessage: "ui.liveStream.inProgress" }), className: classes.previewInProgress }))] })), (0, jsx_runtime_1.jsx)(material_1.CardContent, Object.assign({ className: classes.previewContent }, { children: (0, jsx_runtime_1.jsx)(LiveStreamInfoDetails_1.default, { liveStream: scLiveStream, beforeDateInfo: (0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: scRoutingContext.url(react_core_1.SCRoutes.LIVESTREAM_ROUTE_NAME, scLiveStream), className: classes.previewNameWrapper }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h5", className: classes.previewName }, { children: scLiveStream.title })) })) }) })), actions !== null && actions !== void 0 ? actions : ((0, jsx_runtime_1.jsx)(material_1.CardActions, Object.assign({ className: classes.previewActions }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", variant: "outlined", component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.LIVESTREAM_ROUTE_NAME, scLiveStream) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.liveStream.see", id: "ui.liveStream.see" }) })) })))] })));
    }
    else {
        contentObj = ((0, jsx_runtime_1.jsx)(SnippetRoot, { elevation: 0, square: true, disableTypography: true, className: classes.snippetRoot, image: (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.snippetImage }, { children: [(0, jsx_runtime_1.jsx)(material_1.Avatar, { variant: "square", alt: scLiveStream.title, src: scLiveStream.cover, className: classes.snippetAvatar }), ' ', !hideInProgress && inProgress && ((0, jsx_runtime_1.jsx)(material_1.Chip, { size: "small", component: "div", label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStream.inProgress", defaultMessage: "ui.liveStream.inProgress" }), className: classes.snippetInProgress }))] })), primary: (0, jsx_runtime_1.jsxs)(react_core_1.Link, Object.assign({}, (scLiveStream.id && { to: scRoutingContext.url(react_core_1.SCRoutes.LIVESTREAM_ROUTE_NAME, scLiveStream) }), { className: classes.snippetPrimary }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: "span" }, { children: `${intl.formatDate(scLiveStream.created_at, {
                            weekday: 'long',
                            month: 'long',
                            day: 'numeric'
                        })}` })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: scLiveStream.title }))] })), secondary: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: "p", variant: "body2", className: classes.snippetSecondary }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.eventForm.address.liveStream.label`, defaultMessage: `ui.eventForm.address.liveStream.label` }) })), actions: actions !== null && actions !== void 0 ? actions : ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.snippetActions }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", variant: "outlined", component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.LIVESTREAM_ROUTE_NAME, scLiveStream) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.liveStream.see", id: "ui.liveStream.see" }) })) }))) }));
    }
    /**
     * Renders root object
     */
    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ id: id, className: (0, classnames_1.default)(classes.root, className, `${constants_1.PREFIX}-${template}`) }, rest, { children: contentObj })));
}
exports.default = LiveStream;