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

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

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 })));
}