@selfcommunity/react-ui 0.10.2-alpha.8 → 0.10.2-courses.100

package/lib/esm/components/LiveStreamRoom/LiveStreamVideoConference/LiveStreamVideoConference.js

@@ -0,0 +1,152 @@
+import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Box, Button, CircularProgress, Typography } from '@mui/material';
+import { styled } from '@mui/material/styles';
+import { useThemeProps } from '@mui/system';
+import { Link, SCPreferences, SCRoutes, useSCPreferences, useSCRouting, useSCUser } from '@selfcommunity/react-core';
+import { SCLiveStreamViewType } from '@selfcommunity/types';
+import classNames from 'classnames';
+import { PREFIX } from './constants';
+import { ConnectionState, formatChatMessageLinks, LayoutContextProvider, LiveKitRoom } from '@livekit/components-react';
+import { useCallback, useMemo, useState } from 'react';
+import { defaultUserChoices } from '@livekit/components-core';
+import { defaultVideoOptions } from '../constants';
+import { FormattedMessage, useIntl } from 'react-intl';
+import { VideoConference } from './VideoConference';
+import { useLiveStream } from './LiveStreamProvider';
+import DialogContent from '@mui/material/DialogContent';
+import BaseDialog from '../../../shared/BaseDialog';
+import { closeSnackbar } from 'notistack';
+const classes = {
+    root: `${PREFIX}-root`,
+    logo: `${PREFIX}-logo`,
+    title: `${PREFIX}-title`,
+    content: `${PREFIX}-content`,
+    endConferenceWrap: `${PREFIX}-end-conference-wrap`,
+    btnBackHome: `${PREFIX}-btn-back-home`,
+    actions: `${PREFIX}-actions`,
+    error: `${PREFIX}-error`
+};
+const Root = styled(Box, {
+    name: PREFIX,
+    slot: 'Root'
+})(({ theme }) => ({}));
+const DialogRoot = styled(BaseDialog, {
+    name: PREFIX,
+    slot: 'Root',
+    overridesResolver: (props, styles) => styles.dialogRoot
+})(({ theme }) => ({}));
+const PREFERENCES = [SCPreferences.LOGO_NAVBAR_LOGO];
+/**
+ *> API documentation for the Community-JS LiveStreamVideoConference component. Learn about the available props and the CSS API.
+ *
+ #### Import
+ ```jsx
+ import {LiveStreamVideoConference} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+ The name `LiveStreamVideoConference` 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.|
+
+ * @param inProps
+ */
+export default function LiveStreamVideoConference(inProps) {
+    //PROPS
+    const props = useThemeProps({
+        props: inProps,
+        name: PREFIX
+    });
+    const { className, handleOnLeaveRoom, userChoices = defaultUserChoices, connectionDetails = {}, LiveKitRoomComponentProps = {
+    /* simulateParticipants: true */
+    }, VideoConferenceComponentProps = {}, startConferenceEndContent, endConferenceEndContent, options = defaultVideoOptions } = props, rest = __rest(props, ["className", "handleOnLeaveRoom", "userChoices", "connectionDetails", "LiveKitRoomComponentProps", "VideoConferenceComponentProps", "startConferenceEndContent", "endConferenceEndContent", "options"]);
+    // CONTEXT
+    const scUserContext = useSCUser();
+    const scRoutingContext = useSCRouting();
+    const scPreferences = useSCPreferences();
+    const { liveStream } = useLiveStream();
+    // STATE
+    const [liveActive, setLiveActive] = useState(true);
+    const [error, setError] = useState(null);
+    // INTL
+    const intl = useIntl();
+    // PREFERENCES
+    const preferences = useMemo(() => {
+        const _preferences = {};
+        PREFERENCES.map((p) => (_preferences[p] = p in scPreferences.preferences ? scPreferences.preferences[p].value : null));
+        return _preferences;
+    }, [scPreferences.preferences]);
+    // PERMISSIONS
+    const canUseAudio = useMemo(() => { var _a; return scUserContext.user && liveStream && (liveStream.host.id === scUserContext.user.id || (liveStream && !((_a = liveStream === null || liveStream === void 0 ? void 0 : liveStream.settings) === null || _a === void 0 ? void 0 : _a.muteParticipants))); }, [scUserContext, liveStream]);
+    const canUseVideo = useMemo(() => { var _a; return scUserContext.user && liveStream && (liveStream.host.id === scUserContext.user.id || (liveStream && !((_a = liveStream === null || liveStream === void 0 ? void 0 : liveStream.settings) === null || _a === void 0 ? void 0 : _a.disableVideo))); }, [scUserContext, liveStream]);
+    const canUseChat = useMemo(() => { var _a; return scUserContext.user && liveStream && liveStream && !((_a = liveStream === null || liveStream === void 0 ? void 0 : liveStream.settings) === null || _a === void 0 ? void 0 : _a.disableChat); }, [scUserContext, liveStream]);
+    const canUseShareScreen = useMemo(() => { var _a; return scUserContext.user && liveStream && (liveStream.host.id === scUserContext.user.id || (liveStream && !((_a = liveStream === null || liveStream === void 0 ? void 0 : liveStream.settings) === null || _a === void 0 ? void 0 : _a.disableShareScreen))); }, [scUserContext, liveStream]);
+    const speakerFocused = useMemo(() => (scUserContext.user && liveStream && liveStream.settings.view === SCLiveStreamViewType.SPEAKER ? liveStream.host : null), [scUserContext, liveStream]);
+    const hideParticipantsList = useMemo(() => { var _a; return scUserContext.user && liveStream && ((_a = liveStream === null || liveStream === void 0 ? void 0 : liveStream.settings) === null || _a === void 0 ? void 0 : _a.hideParticipantsList) && liveStream.host.id !== scUserContext.user.id; }, [scUserContext, liveStream]);
+    // CONNECT OPTIONS
+    const connectOptions = useMemo(() => {
+        return {
+            autoSubscribe: true
+        };
+    }, []);
+    // HANDLERS
+    /**
+     * Handle on leave
+     */
+    const handleOnLeave = useCallback(() => {
+        setLiveActive(false);
+        handleOnLeaveRoom === null || handleOnLeaveRoom === void 0 ? void 0 : handleOnLeaveRoom();
+    }, [handleOnLeaveRoom]);
+    /**
+     * Handle on error
+     */
+    const handleError = useCallback((error) => {
+        console.error(error);
+        if (error.message === 'Permission denied') {
+            setError(intl.formatMessage({
+                id: 'ui.liveStreamRoom.connect.error.device.permission',
+                defaultMessage: 'ui.liveStreamRoom.connect.error.device.permission'
+            }));
+        }
+        else if (error.message === 'Requested device not found') {
+            setError(intl.formatMessage({
+                id: 'ui.liveStreamRoom.connect.error.device.notFound',
+                defaultMessage: 'ui.liveStreamRoom.connect.error.device.notFound'
+            }));
+        }
+        else {
+            console.log(`Encountered an unexpected error, check the console logs for details: ${error.message}`);
+            setError(intl.formatMessage({
+                id: 'ui.liveStreamRoom.connect.error.clientInitiatedDisconnect',
+                defaultMessage: 'ui.liveStreamRoom.connect.error.clientInitiatedDisconnect'
+            }));
+        }
+        setLiveActive(false);
+    }, []);
+    /**
+     * Handle encryption error
+     */
+    const handleEncryptionError = useCallback((error) => {
+        console.error(error);
+        setError(`Encountered an unexpected encryption error, check the console logs for details: ${error.message}`);
+        setLiveActive(false);
+    }, []);
+    const handleBackHome = useCallback(() => {
+        closeSnackbar();
+    }, [closeSnackbar]);
+    /**
+     * User must be authenticated
+     */
+    if (!scUserContext.user || !connectionDetails) {
+        return _jsx(CircularProgress, {});
+    }
+    /**
+     * Renders root object
+     */
+    return (_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: liveActive && !error ? (_jsx(_Fragment, { children: _jsx(LiveKitRoom, Object.assign({ connect: Boolean(liveActive), token: connectionDetails['participantToken'], serverUrl: connectionDetails['serverUrl'], connectOptions: connectOptions, video: userChoices.videoEnabled, audio: userChoices.audioEnabled, onDisconnected: handleOnLeave, onEncryptionError: handleEncryptionError, onError: handleError }, LiveKitRoomComponentProps, { children: _jsxs(LayoutContextProvider, { children: [_jsx(VideoConference, Object.assign({ chatMessageFormatter: formatChatMessageLinks }, (speakerFocused && { speakerFocused: liveStream.host }), VideoConferenceComponentProps, { disableMicrophone: !canUseAudio, disableCamera: !canUseVideo, disableChat: !canUseChat, disableShareScreen: !canUseShareScreen, hideParticipantsList: hideParticipantsList })), _jsx(ConnectionState, {})] }) })) })) : (_jsx(_Fragment, { children: error ? (_jsx(DialogRoot, Object.assign({ open: true, maxWidth: 'md', fullWidth: true }, { children: _jsx(DialogContent, { children: _jsxs(Box, Object.assign({ className: classes.endConferenceWrap }, { children: [_jsx(Link, Object.assign({ to: scRoutingContext.url(SCRoutes.HOME_ROUTE_NAME, {}), className: classes.logo }, { children: _jsx("img", { src: preferences[SCPreferences.LOGO_NAVBAR_LOGO], alt: "logo" }) })), startConferenceEndContent, error, _jsx(Button, Object.assign({ variant: "contained", color: "secondary", component: Link, to: '/', className: classes.btnBackHome }, { children: _jsx(FormattedMessage, { id: "ui.liveStreamRoom.button.backHome", defaultMessage: "ui.liveStreamRoom.button.backHome" }) })), endConferenceEndContent] })) }) }))) : liveActive === false ? (_jsx(DialogRoot, Object.assign({ open: true, maxWidth: 'md', fullWidth: true }, { children: _jsx(DialogContent, { children: _jsxs(Box, Object.assign({ className: classes.endConferenceWrap }, { children: [_jsx(Link, Object.assign({ to: scRoutingContext.url(SCRoutes.HOME_ROUTE_NAME, {}), className: classes.logo }, { children: _jsx("img", { src: preferences[SCPreferences.LOGO_NAVBAR_LOGO], alt: "logo" }) })), startConferenceEndContent, _jsx(Typography, Object.assign({ variant: "h5" }, { children: _jsx(FormattedMessage, { id: "ui.liveStreamRoom.conference.end", defaultMessage: "ui.liveStreamRoom.conference.end" }) })), _jsx(Button, Object.assign({ variant: "contained", color: "secondary", component: Link, to: '/', onClick: handleBackHome, className: classes.btnBackHome }, { children: _jsx(FormattedMessage, { id: "ui.liveStreamRoom.button.backHome", defaultMessage: "ui.liveStreamRoom.button.backHome" }) })), endConferenceEndContent] })) }) }))) : (_jsx(CircularProgress, {})) })) })));
+}

package/lib/esm/components/LiveStreamRoom/LiveStreamVideoConference/NoParticipants.d.ts

@@ -0,0 +1,4 @@
+export interface NoParticipantsProps {
+    className?: string;
+}
+export default function NoParticipants(inProps: NoParticipantsProps): JSX.Element;

package/lib/esm/components/LiveStreamRoom/LiveStreamVideoConference/NoParticipants.js

@@ -0,0 +1,34 @@
+import { __rest } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { styled } from '@mui/material/styles';
+import { useThemeProps } from '@mui/system';
+import { Box } from '@mui/material';
+import classNames from 'classnames';
+import { FormattedMessage } from 'react-intl';
+const PREFIX = 'SCNoParticipants';
+const classes = {
+    root: `${PREFIX}-root`
+};
+const Root = styled(Box, {
+    name: PREFIX,
+    slot: 'Root',
+    overridesResolver: (props, styles) => styles.root
+})(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: '#1e1e1e',
+    transition: 'opacity .2sease-in-out',
+    pointerEvents: 'none',
+    borderRadius: 7
+}));
+export default function NoParticipants(inProps) {
+    // PROPS
+    const props = useThemeProps({
+        props: inProps,
+        name: PREFIX
+    });
+    const { className } = props, rest = __rest(props, ["className"]);
+    // RENDER
+    return (_jsx(Root, Object.assign({ className: classNames(className, classes.root) }, rest, { children: _jsx(FormattedMessage, { id: "ui.liveStreamRoom.noParticipants", defaultMessage: "ui.liveStreamRoom.noParticipants" }) })));
+}

package/lib/esm/components/LiveStreamRoom/LiveStreamVideoConference/ParticipantPlaceholder.d.ts

@@ -0,0 +1,6 @@
+import type { SVGProps } from 'react';
+/**
+ * @internal
+ */
+declare const SvgParticipantPlaceholder: (props: SVGProps<SVGSVGElement>) => JSX.Element;
+export default SvgParticipantPlaceholder;

package/lib/esm/components/LiveStreamRoom/LiveStreamVideoConference/ParticipantPlaceholder.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * @internal
+ */
+const SvgParticipantPlaceholder = (props) => (_jsxs("svg", Object.assign({ width: 90, height: 90, viewBox: "0 0 320 320", preserveAspectRatio: "xMidYMid meet", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: [_jsx("path", { d: "M160 180C204.182 180 240 144.183 240 100C240 55.8172 204.182 20 160 20C115.817 20 79.9997 55.8172 79.9997 100C79.9997 144.183 115.817 180 160 180Z", fill: "white", fillOpacity: 0.25 }), _jsx("path", { d: "M97.6542 194.614C103.267 191.818 109.841 192.481 115.519 195.141C129.025 201.466 144.1 205 159.999 205C175.899 205 190.973 201.466 204.48 195.141C210.158 192.481 216.732 191.818 222.345 194.614C262.703 214.719 291.985 253.736 298.591 300.062C300.15 310.997 291.045 320 280 320H39.9997C28.954 320 19.8495 310.997 21.4087 300.062C28.014 253.736 57.2966 214.72 97.6542 194.614Z", fill: "white", fillOpacity: 0.25 })] })));
+export default SvgParticipantPlaceholder;

package/lib/esm/components/LiveStreamRoom/LiveStreamVideoConference/ParticipantTile.d.ts

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import type { Participant } from 'livekit-client';
+import type { ParticipantClickEvent, TrackReferenceOrPlaceholder } from '@livekit/components-core';
+/**
+ * The `ParticipantContextIfNeeded` component only creates a `ParticipantContext`
+ * if there is no `ParticipantContext` already.
+ */
+export declare function ParticipantContextIfNeeded(props: React.PropsWithChildren<{
+    participant?: Participant;
+}>): JSX.Element;
+/**
+ * Only create a `TrackRefContext` if there is no `TrackRefContext` already.
+ */
+export declare function TrackRefContextIfNeeded(props: React.PropsWithChildren<{
+    trackRef?: TrackReferenceOrPlaceholder;
+}>): JSX.Element;
+export interface ParticipantTileProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** The track reference to display. */
+    trackRef?: TrackReferenceOrPlaceholder;
+    disableSpeakingIndicator?: boolean;
+    disableTileActions?: boolean;
+    disableTileFocusToggle?: boolean;
+    onParticipantClick?: (event: ParticipantClickEvent) => void;
+}
+/**
+ * The `ParticipantTile` component is the base utility wrapper for displaying a visual representation of a participant.
+ * This component can be used as a child of the `TrackLoop` component or by passing a track reference as property.
+ */
+export declare const ParticipantTile: (props: ParticipantTileProps & React.RefAttributes<HTMLDivElement>) => React.ReactNode;

package/lib/esm/components/LiveStreamRoom/LiveStreamVideoConference/ParticipantTile.js

@@ -0,0 +1,60 @@
+import { __rest } from "tslib";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { Track } from 'livekit-client';
+import { isTrackReference, isTrackReferencePinned } from '@livekit/components-core';
+import { AudioTrack, ConnectionQualityIndicator, FocusToggle, LockLockedIcon, ParticipantContext, ParticipantName, ScreenShareIcon, TrackMutedIndicator, TrackRefContext, useEnsureTrackRef, useFeatureContext, useIsEncrypted, useMaybeLayoutContext, useMaybeParticipantContext, useMaybeTrackRefContext, useParticipantTile, VideoTrack } from '@livekit/components-react';
+import ParticipantTileAvatar from './ParticipantTileAvatar';
+import ParticipantTileActions from './ParticipantTileActions';
+import { useSCUser } from '@selfcommunity/react-core';
+/**
+ * The `ParticipantContextIfNeeded` component only creates a `ParticipantContext`
+ * if there is no `ParticipantContext` already.
+ */
+export function ParticipantContextIfNeeded(props) {
+    const hasContext = !!useMaybeParticipantContext();
+    return props.participant && !hasContext ? (_jsx(ParticipantContext.Provider, Object.assign({ value: props.participant }, { children: props.children }))) : (_jsx(_Fragment, { children: props.children }));
+}
+/**
+ * Only create a `TrackRefContext` if there is no `TrackRefContext` already.
+ */
+export function TrackRefContextIfNeeded(props) {
+    const hasContext = !!useMaybeTrackRefContext();
+    return props.trackRef && !hasContext ? (_jsx(TrackRefContext.Provider, Object.assign({ value: props.trackRef }, { children: props.children }))) : (_jsx(_Fragment, { children: props.children }));
+}
+/**
+ * The `ParticipantTile` component is the base utility wrapper for displaying a visual representation of a participant.
+ * This component can be used as a child of the `TrackLoop` component or by passing a track reference as property.
+ */
+export const ParticipantTile = 
+/* @__PURE__ */ React.forwardRef(function ParticipantTile(_a, ref) {
+    var _b, _c;
+    var { trackRef, children, onParticipantClick, disableSpeakingIndicator, disableTileFocusToggle = false, disableTileActions = false } = _a, htmlProps = __rest(_a, ["trackRef", "children", "onParticipantClick", "disableSpeakingIndicator", "disableTileFocusToggle", "disableTileActions"]);
+    const scUserContext = useSCUser();
+    const trackReference = useEnsureTrackRef(trackRef);
+    const { elementProps } = useParticipantTile({
+        htmlProps,
+        disableSpeakingIndicator,
+        onParticipantClick,
+        trackRef: trackReference
+    });
+    const isEncrypted = useIsEncrypted(trackReference.participant);
+    const layoutContext = useMaybeLayoutContext();
+    const autoManageSubscription = (_b = useFeatureContext()) === null || _b === void 0 ? void 0 : _b.autoSubscription;
+    const handleSubscribe = React.useCallback((subscribed) => {
+        if (trackReference.source &&
+            !subscribed &&
+            layoutContext &&
+            layoutContext.pin.dispatch &&
+            isTrackReferencePinned(trackReference, layoutContext.pin.state)) {
+            layoutContext.pin.dispatch({ msg: 'clear_pin' });
+        }
+    }, [trackReference, layoutContext]);
+    return (_jsx("div", Object.assign({ ref: ref, style: { position: 'relative' } }, elementProps, { children: _jsx(TrackRefContextIfNeeded, Object.assign({ trackRef: trackReference }, { children: _jsxs(ParticipantContextIfNeeded, Object.assign({ participant: trackReference.participant }, { children: [children !== null && children !== void 0 ? children : (_jsxs(_Fragment, { children: [isTrackReference(trackReference) &&
+                                (((_c = trackReference.publication) === null || _c === void 0 ? void 0 : _c.kind) === 'video' ||
+                                    trackReference.source === Track.Source.Camera ||
+                                    trackReference.source === Track.Source.ScreenShare) ? (_jsx(_Fragment, { children: _jsx(VideoTrack, { trackRef: trackReference, onSubscriptionStatusChanged: handleSubscribe, manageSubscription: autoManageSubscription }) })) : (isTrackReference(trackReference) && (_jsx(_Fragment, { children: _jsx(AudioTrack, { trackRef: trackReference, onSubscriptionStatusChanged: handleSubscribe }) }))), _jsx("div", Object.assign({ className: "lk-participant-placeholder" }, { children: _jsx(ParticipantTileAvatar, { participant: trackReference.participant }) })), _jsxs("div", Object.assign({ className: "lk-participant-metadata" }, { children: [_jsx("div", Object.assign({ className: "lk-participant-metadata-item" }, { children: trackReference.source === Track.Source.Camera ? (_jsxs(_Fragment, { children: [isEncrypted && _jsx(LockLockedIcon, { style: { marginRight: '0.25rem' } }), _jsx(TrackMutedIndicator, { trackRef: {
+                                                        participant: trackReference.participant,
+                                                        source: Track.Source.Microphone
+                                                    }, show: 'muted' }), _jsx(ParticipantName, { children: !disableTileActions && _jsx(ParticipantTileActions, {}) })] })) : (_jsxs(_Fragment, { children: [_jsx(ScreenShareIcon, { style: { marginRight: '0.25rem' } }), _jsx(ParticipantName, { children: "'s screen" })] })) })), _jsx(ConnectionQualityIndicator, { className: "lk-participant-metadata-item" })] }))] })), !disableTileFocusToggle && _jsx(FocusToggle, { trackRef: trackReference })] })) })) })));
+});

package/lib/esm/components/LiveStreamRoom/LiveStreamVideoConference/ParticipantTileActions.d.ts

@@ -0,0 +1,30 @@
+export interface ParticipantTileActionsMenuProps {
+    /**
+     * Overrides or extends the styles applied to the component.
+     * @default null
+     */
+    className?: string;
+    /**
+     * User Object
+     * @default null
+     */
+    participant?: any;
+    /**
+     * Handle remove user
+     */
+    onRemoveParticipant?: (p: any) => void;
+    /**
+     * Handle ban user
+     */
+    onBanParticipant?: (p: any) => void;
+    /**
+     * Props to spread to popper
+     * @default empty object
+     */
+    PopperProps?: any;
+    /**
+     * Any other properties
+     */
+    [p: string]: any;
+}
+export default function ContributionActionsMenu(props: ParticipantTileActionsMenuProps): JSX.Element;

package/lib/esm/components/LiveStreamRoom/LiveStreamVideoConference/ParticipantTileActions.js

@@ -0,0 +1,212 @@
+import { __awaiter, __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useContext, useMemo, useRef, useState } from 'react';
+import { styled } from '@mui/material/styles';
+import { FormattedMessage } from 'react-intl';
+import Popper from '@mui/material/Popper';
+import Icon from '@mui/material/Icon';
+import { useSnackbar } from 'notistack';
+import classNames from 'classnames';
+import { Box, ClickAwayListener, Grow, IconButton, ListItemIcon, ListItemText, MenuItem, MenuList, Paper, SwipeableDrawer, useMediaQuery, useTheme } from '@mui/material';
+import { LiveStreamApiClient } from '@selfcommunity/api-services';
+import { SCContext, SCUserContext } from '@selfcommunity/react-core';
+import { BAN_ROOM_USER, REMOVE_ROOM_USER } from './constants';
+import ConfirmDialog from '../../../shared/ConfirmDialog/ConfirmDialog';
+import { useEnsureParticipant } from '@livekit/components-react';
+import { useLiveStream } from './LiveStreamProvider';
+import { Logger } from '@selfcommunity/utils';
+import { SCOPE_SC_UI } from '../../../constants/Errors';
+const PREFIX = 'SCParticipantTileActionsMenu';
+const classes = {
+    root: `${PREFIX}-root`,
+    button: `${PREFIX}-button`,
+    popperRoot: `${PREFIX}-popper-root`,
+    paper: `${PREFIX}-paper`,
+    item: `${PREFIX}-item`,
+    itemText: `${PREFIX}-item-text`,
+    subItem: `${PREFIX}-sub-item`,
+    subItemText: `${PREFIX}-sub-item-text`,
+    footerSubItems: `${PREFIX}-footer-sub-items`,
+    selectedIcon: `${PREFIX}-selected-icon`,
+    sectionBadge: `${PREFIX}-section-badge`,
+    sectionWithSelectionIcon: `${PREFIX}-section-with-selection-icon`,
+    visibilityIcons: `${PREFIX}-visibility-icons`
+};
+const PopperRoot = styled(Popper, {
+    name: PREFIX,
+    slot: 'Root',
+    overridesResolver: (props, styles) => styles.popperRoot
+})(() => ({
+    '& .SCParticipantTileActionsMenu-paper': {
+        borderRadius: 5
+    }
+}));
+const Root = styled(Box, {
+    name: PREFIX,
+    slot: 'Root',
+    overridesResolver: (props, styles) => styles.root
+})(({ theme }) => ({
+    display: 'inline-block',
+    '& button': {
+        color: theme.palette.common.white
+    }
+}));
+export default function ContributionActionsMenu(props) {
+    // PROPS
+    const { className, participant, onRemoveParticipant, onBanParticipant, PopperProps = {} } = props, rest = __rest(props, ["className", "participant", "onRemoveParticipant", "onBanParticipant", "PopperProps"]);
+    // CONTEXT
+    const theme = useTheme();
+    const isMobile = useMediaQuery(theme.breakpoints.down('md'));
+    const scContext = useContext(SCContext);
+    const scUserContext = useContext(SCUserContext);
+    const { enqueueSnackbar } = useSnackbar();
+    const p = useEnsureParticipant(participant);
+    const { liveStream } = useLiveStream();
+    // GENERAL POPPER STATE
+    const [open, setOpen] = useState(false);
+    const [isLoading, setIsLoading] = useState(false);
+    // CONFIRM ACTION DIALOG STATE
+    const [openConfirmDialog, setOpenConfirmDialog] = useState(false);
+    const [currentAction, setCurrentAction] = useState(null);
+    const [currentActionLoading, setCurrentActionLoading] = useState(null);
+    // CONST
+    let popperRef = useRef(null);
+    /**
+     * Handles open popup
+     */
+    function handleOpen() {
+        if (scUserContext.user) {
+            setOpen(true);
+        }
+        else {
+            scContext.settings.handleAnonymousAction();
+        }
+    }
+    /**
+     * Closes popup
+     */
+    function handleClose() {
+        if (popperRef.current && popperRef.current.contains(event.target)) {
+            return;
+        }
+        setOpen(false);
+        if (rest.onClose) {
+            rest.onClose();
+        }
+    }
+    /**
+     * Perform ban participant
+     */
+    const performRemoveOrBanParticipant = useMemo(() => (ban = false) => __awaiter(this, void 0, void 0, function* () {
+        const res = yield LiveStreamApiClient.removeParticipant(liveStream.id, { participant_id: p.identity, ban });
+        if (res.status >= 300) {
+            return Promise.reject(res);
+        }
+        return yield Promise.resolve(res.data);
+    }), [p]);
+    /**
+     * Handle action
+     */
+    function handleAction(action) {
+        if ([REMOVE_ROOM_USER, BAN_ROOM_USER].indexOf(action) > -1) {
+            setCurrentAction(action);
+            setOpenConfirmDialog(true);
+            handleClose();
+        }
+    }
+    /**
+     * Perform additional operations at the end of single action
+     */
+    function performPostConfirmAction(success) {
+        if (success) {
+            setCurrentActionLoading(null);
+            setCurrentAction(null);
+            setOpenConfirmDialog(false);
+            enqueueSnackbar(_jsx(FormattedMessage, { id: "ui.contributionActionMenu.actionSuccess", defaultMessage: "ui.contributionActionMenu.actionSuccess" }), {
+                variant: 'success',
+                autoHideDuration: 3000
+            });
+        }
+        else {
+            setCurrentActionLoading(null);
+            enqueueSnackbar(_jsx(FormattedMessage, { id: "ui.contributionActionMenu.actionError", defaultMessage: "ui.contributionActionMenu.actionError" }), {
+                variant: 'error',
+                autoHideDuration: 3000
+            });
+        }
+    }
+    /**
+     * Delete a contribution
+     */
+    function handleConfirmedAction() {
+        if (p && !isLoading && !currentActionLoading) {
+            if (currentAction === REMOVE_ROOM_USER) {
+                setCurrentActionLoading(REMOVE_ROOM_USER);
+                performRemoveOrBanParticipant()
+                    .then(() => {
+                    onRemoveParticipant && onRemoveParticipant(p);
+                    performPostConfirmAction(true);
+                })
+                    .catch((error) => {
+                    Logger.error(SCOPE_SC_UI, error);
+                    performPostConfirmAction(false);
+                });
+            }
+            else if (currentAction === BAN_ROOM_USER) {
+                setCurrentActionLoading(BAN_ROOM_USER);
+                performRemoveOrBanParticipant(true)
+                    .then(() => {
+                    onBanParticipant && onBanParticipant(p);
+                    performPostConfirmAction(true);
+                })
+                    .catch((error) => {
+                    Logger.error(SCOPE_SC_UI, error);
+                    performPostConfirmAction(false);
+                });
+            }
+        }
+    }
+    /**
+     * Can authenticated ban a user in a room
+     */
+    const canRemoveOrBanUser = useMemo(() => () => {
+        return (scUserContext.user &&
+            liveStream &&
+            p &&
+            p.identity &&
+            liveStream.host.id === scUserContext.user.id &&
+            scUserContext.user.id.toString() !== p.identity);
+    }, [scUserContext, liveStream, p]);
+    /**
+     * Renders section general
+     */
+    function renderGeneralSection() {
+        return (_jsx(Box, { children: canRemoveOrBanUser() && (_jsxs(_Fragment, { children: [_jsxs(MenuItem, Object.assign({ className: classes.subItem, disabled: currentActionLoading === REMOVE_ROOM_USER, onClick: () => handleAction(REMOVE_ROOM_USER) }, { children: [_jsx(ListItemIcon, { children: _jsx(Icon, { children: "person" }) }), _jsx(ListItemText, { primary: _jsx(FormattedMessage, { id: "ui.liveStreamRoom.participantTileActions.removeRoomUser", defaultMessage: "ui.liveStreamRoom.participantTileActions.removeRoomUser" }), classes: { root: classes.itemText } })] })), _jsxs(MenuItem, Object.assign({ className: classes.subItem, disabled: currentActionLoading === BAN_ROOM_USER, onClick: () => handleAction(BAN_ROOM_USER) }, { children: [_jsx(ListItemIcon, { children: _jsx(Icon, { children: "error" }) }), _jsx(ListItemText, { primary: _jsx(FormattedMessage, { id: "ui.liveStreamRoom.participantTileActions.banRoomUser", defaultMessage: "ui.liveStreamRoom.participantTileActions.banRoomUser" }), classes: { root: classes.itemText } })] }))] })) }));
+    }
+    /**
+     * Renders contribution menu content
+     */
+    function renderContent() {
+        return (_jsx(Box, { children: _jsx(MenuList, { children: renderGeneralSection() }) }));
+    }
+    /**
+     * Renders component only if the logged user has actions available
+     */
+    if (!canRemoveOrBanUser()) {
+        return null;
+    }
+    /**
+     * Renders component
+     */
+    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, { children: [_jsx(IconButton, Object.assign({ ref: (ref) => {
+                    popperRef.current = ref;
+                }, "aria-haspopup": "true", onClick: handleOpen, className: classes.button, size: "small" }, { children: _jsx(Icon, { children: "expand_more" }) })), open && (_jsx(_Fragment, { children: isMobile ? (_jsx(SwipeableDrawer, Object.assign({ open: true, onClose: handleClose, onOpen: handleOpen, anchor: "bottom", disableSwipeToOpen: true }, { children: renderContent() }))) : (_jsx(PopperRoot, Object.assign({ open: true, anchorEl: popperRef.current, role: undefined, transition: true, className: classes.popperRoot }, PopperProps, { placement: "right" }, { children: ({ TransitionProps, placement }) => (_jsx(Grow, Object.assign({}, TransitionProps, { style: { transformOrigin: placement === 'bottom' ? 'center top' : 'center bottom' } }, { children: _jsx(Paper, Object.assign({ variant: 'outlined', className: classes.paper }, { children: _jsx(ClickAwayListener, Object.assign({ onClickAway: handleClose }, { children: renderContent() })) })) }))) }))) })), openConfirmDialog && (_jsx(ConfirmDialog, Object.assign({ open: openConfirmDialog }, (currentAction === REMOVE_ROOM_USER
+                ? {
+                    content: (_jsx(FormattedMessage, { id: "ui.liveStreamRoom.participantTileActions.removeRoomUser", defaultMessage: "ui.liveStreamRoom.participantTileActions.removeRoomUser" }))
+                }
+                : currentAction === BAN_ROOM_USER
+                    ? {
+                        content: (_jsx(FormattedMessage, { id: "ui.liveStreamRoom.participantTileActions.banRoomUser", defaultMessage: "ui.liveStreamRoom.participantTileActions.banRoomUser" }))
+                    }
+                    : {}), { onConfirm: handleConfirmedAction, isUpdating: Boolean(currentActionLoading), onClose: () => setOpenConfirmDialog(false) })))] })));
+}

package/lib/esm/components/LiveStreamRoom/LiveStreamVideoConference/ParticipantTileAvatar.d.ts

@@ -0,0 +1,15 @@
+import { SCUserType } from '@selfcommunity/types';
+export interface ParticipantTileAvatarProps {
+    className?: string;
+    /**
+     * User Object
+     * @default null
+     */
+    user?: SCUserType;
+    /**
+     * User Object
+     * @default null
+     */
+    participant?: any;
+}
+export default function ParticipantTileAvatar(inProps: ParticipantTileAvatarProps): JSX.Element;

package/lib/esm/components/LiveStreamRoom/LiveStreamVideoConference/ParticipantTileAvatar.js

@@ -0,0 +1,36 @@
+import { __rest } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { styled } from '@mui/material/styles';
+import { useThemeProps } from '@mui/system';
+import { Box } from '@mui/material';
+import classNames from 'classnames';
+import ParticipantPlaceholder from './ParticipantPlaceholder';
+import { useSCContext } from '@selfcommunity/react-core';
+const PREFIX = 'SCParticipantTileAvatar';
+const classes = {
+    root: `${PREFIX}-root`
+};
+const Root = styled(Box, {
+    name: PREFIX,
+    slot: 'Root',
+    overridesResolver: (props, styles) => styles.root
+})(({ theme }) => ({
+    height: 'auto !important',
+    '& img': {
+        borderRadius: '50%',
+        width: 100,
+        height: 100
+    }
+}));
+export default function ParticipantTileAvatar(inProps) {
+    // PROPS
+    const props = useThemeProps({
+        props: inProps,
+        name: PREFIX
+    });
+    const { className, user, participant } = props, rest = __rest(props, ["className", "user", "participant"]);
+    // CONTEXT
+    const scContext = useSCContext();
+    // RENDER
+    return (_jsx(Root, Object.assign({ className: classNames(className, classes.root) }, rest, { children: user ? (_jsx("img", { src: `${user.avatar}` })) : participant && participant.identity ? (_jsx("img", { src: `${scContext.settings.portal}/api/v2/avatar/${participant.identity}` })) : (_jsx(ParticipantPlaceholder, {})) })));
+}