@selfcommunity/react-ui 0.8.0-live.87 → 0.8.0-live.88

package/lib/cjs/components/LiveStream/LiveStream.js

@@ -129,7 +129,7 @@ function LiveStream(inProps) {
         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.EVENT_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, {
+        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'

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

@@ -10,7 +10,11 @@ export interface ParticipantTileActionsMenuProps {
      */
     participant?: any;
     /**
-     * Handle delete obj
+     * Handle remove user
+     */
+    onRemoveParticipant?: (p: any) => void;
+    /**
+     * Handle ban user
      */
     onBanParticipant?: (p: any) => void;
     /**

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

@@ -55,9 +55,7 @@ const Root = (0, styles_1.styled)(material_1.Box, {
 }));
 function ContributionActionsMenu(props) {
     // PROPS
-    const { className, participant, onBanParticipant, PopperProps = {} } = props, rest = tslib_1.__rest(props, ["className", "participant", "onBanParticipant", "PopperProps"]);
-    // INTL
-    const intl = (0, react_intl_1.useIntl)();
+    const { className, participant, onRemoveParticipant, onBanParticipant, PopperProps = {} } = props, rest = tslib_1.__rest(props, ["className", "participant", "onRemoveParticipant", "onBanParticipant", "PopperProps"]);
     // CONTEXT
     const theme = (0, material_1.useTheme)();
     const isMobile = (0, material_1.useMediaQuery)(theme.breakpoints.down('md'));
@@ -101,8 +99,8 @@ function ContributionActionsMenu(props) {
     /**
      * Perform ban participant
      */
-    const performBanParticipant = (0, react_1.useMemo)(() => () => tslib_1.__awaiter(this, void 0, void 0, function* () {
-        const res = yield api_services_1.LiveStreamApiClient.removeParticipant(liveStream.id, { participant_id: p.identity });
+    const performRemoveOrBanParticipant = (0, react_1.useMemo)(() => (ban = false) => tslib_1.__awaiter(this, void 0, void 0, function* () {
+        const res = yield api_services_1.LiveStreamApiClient.removeParticipant(liveStream.id, { participant_id: p.identity, ban });
         if (res.status >= 300) {
             return Promise.reject(res);
         }
@@ -112,8 +110,8 @@ function ContributionActionsMenu(props) {
      * Handle action
      */
     function handleAction(action) {
-        if (action === constants_1.BAN_ROOM_USER) {
-            setCurrentAction(constants_1.BAN_ROOM_USER);
+        if ([constants_1.REMOVE_ROOM_USER, constants_1.BAN_ROOM_USER].indexOf(action) > -1) {
+            setCurrentAction(action);
             setOpenConfirmDialog(true);
             handleClose();
         }
@@ -144,9 +142,21 @@ function ContributionActionsMenu(props) {
      */
     function handleConfirmedAction() {
         if (p && !isLoading && !currentActionLoading) {
-            if (currentAction === constants_1.BAN_ROOM_USER) {
+            if (currentAction === constants_1.REMOVE_ROOM_USER) {
+                setCurrentActionLoading(constants_1.REMOVE_ROOM_USER);
+                performRemoveOrBanParticipant()
+                    .then(() => {
+                    onRemoveParticipant && onRemoveParticipant(p);
+                    performPostConfirmAction(true);
+                })
+                    .catch((error) => {
+                    utils_1.Logger.error(Errors_1.SCOPE_SC_UI, error);
+                    performPostConfirmAction(false);
+                });
+            }
+            else if (currentAction === constants_1.BAN_ROOM_USER) {
                 setCurrentActionLoading(constants_1.BAN_ROOM_USER);
-                performBanParticipant()
+                performRemoveOrBanParticipant(true)
                     .then(() => {
                     onBanParticipant && onBanParticipant(p);
                     performPostConfirmAction(true);
@@ -161,7 +171,7 @@ function ContributionActionsMenu(props) {
     /**
      * Can authenticated ban a user in a room
      */
-    const canBanUser = (0, react_1.useMemo)(() => () => {
+    const canRemoveOrBanUser = (0, react_1.useMemo)(() => () => {
         return (scUserContext.user &&
             liveStream &&
             p &&
@@ -173,7 +183,7 @@ function ContributionActionsMenu(props) {
      * Renders section general
      */
     function renderGeneralSection() {
-        return ((0, jsx_runtime_1.jsx)(material_1.Box, { children: canBanUser() && ((0, jsx_runtime_1.jsxs)(material_1.MenuItem, Object.assign({ className: classes.subItem, disabled: currentActionLoading === constants_1.BAN_ROOM_USER }, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "person" }) }), (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamRoom.participantTileActions.banRoomUser", defaultMessage: "ui.liveStreamRoom.participantTileActions.banRoomUser" }), onClick: () => handleAction(constants_1.BAN_ROOM_USER), classes: { root: classes.itemText } })] }))) }));
+        return ((0, jsx_runtime_1.jsx)(material_1.Box, { children: canRemoveOrBanUser() && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(material_1.MenuItem, Object.assign({ className: classes.subItem, disabled: currentActionLoading === constants_1.REMOVE_ROOM_USER }, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "person" }) }), (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamRoom.participantTileActions.removeRoomUser", defaultMessage: "ui.liveStreamRoom.participantTileActions.removeRoomUser" }), onClick: () => handleAction(constants_1.REMOVE_ROOM_USER), classes: { root: classes.itemText } })] })), (0, jsx_runtime_1.jsxs)(material_1.MenuItem, Object.assign({ className: classes.subItem, disabled: currentActionLoading === constants_1.BAN_ROOM_USER }, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "person" }) }), (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamRoom.participantTileActions.banRoomUser", defaultMessage: "ui.liveStreamRoom.participantTileActions.banRoomUser" }), onClick: () => handleAction(constants_1.BAN_ROOM_USER), classes: { root: classes.itemText } })] }))] })) }));
     }
     /**
      * Renders contribution menu content
@@ -184,7 +194,7 @@ function ContributionActionsMenu(props) {
     /**
      * Renders component only if the logged user has actions available
      */
-    if (!canBanUser()) {
+    if (!canRemoveOrBanUser()) {
         return null;
     }
     /**
@@ -192,10 +202,14 @@ function ContributionActionsMenu(props) {
      */
     return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, { children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ ref: (ref) => {
                     popperRef.current = ref;
-                }, "aria-haspopup": "true", onClick: handleOpen, className: classes.button, size: "small" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "expand_more" }) })), isMobile ? ((0, jsx_runtime_1.jsx)(material_1.SwipeableDrawer, Object.assign({ open: open, onClose: handleClose, onOpen: handleOpen, anchor: "bottom", disableSwipeToOpen: true }, { children: renderContent() }))) : ((0, jsx_runtime_1.jsx)(PopperRoot, Object.assign({ open: open, anchorEl: popperRef.current, role: undefined, transition: true, className: classes.popperRoot }, PopperProps, { placement: "right" }, { children: ({ TransitionProps, placement }) => ((0, jsx_runtime_1.jsx)(material_1.Grow, Object.assign({}, TransitionProps, { style: { transformOrigin: placement === 'bottom' ? 'center top' : 'center bottom' } }, { children: (0, jsx_runtime_1.jsx)(material_1.Paper, Object.assign({ variant: 'outlined', className: classes.paper }, { children: (0, jsx_runtime_1.jsx)(material_1.ClickAwayListener, Object.assign({ onClickAway: handleClose }, { children: renderContent() })) })) }))) }))), openConfirmDialog && ((0, jsx_runtime_1.jsx)(ConfirmDialog_1.default, Object.assign({ open: openConfirmDialog }, (currentAction === constants_1.BAN_ROOM_USER
+                }, "aria-haspopup": "true", onClick: handleOpen, className: classes.button, size: "small" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "expand_more" }) })), isMobile ? ((0, jsx_runtime_1.jsx)(material_1.SwipeableDrawer, Object.assign({ open: open, onClose: handleClose, onOpen: handleOpen, anchor: "bottom", disableSwipeToOpen: true }, { children: renderContent() }))) : ((0, jsx_runtime_1.jsx)(PopperRoot, Object.assign({ open: open, anchorEl: popperRef.current, role: undefined, transition: true, className: classes.popperRoot }, PopperProps, { placement: "right" }, { children: ({ TransitionProps, placement }) => ((0, jsx_runtime_1.jsx)(material_1.Grow, Object.assign({}, TransitionProps, { style: { transformOrigin: placement === 'bottom' ? 'center top' : 'center bottom' } }, { children: (0, jsx_runtime_1.jsx)(material_1.Paper, Object.assign({ variant: 'outlined', className: classes.paper }, { children: (0, jsx_runtime_1.jsx)(material_1.ClickAwayListener, Object.assign({ onClickAway: handleClose }, { children: renderContent() })) })) }))) }))), openConfirmDialog && ((0, jsx_runtime_1.jsx)(ConfirmDialog_1.default, Object.assign({ open: openConfirmDialog }, (currentAction === constants_1.REMOVE_ROOM_USER
                 ? {
-                    content: ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamRoom.participantTileActions.banRoomUser", defaultMessage: "ui.liveStreamRoom.participantTileActions.banRoomUser" }))
+                    content: ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamRoom.participantTileActions.removeRoomUser", defaultMessage: "ui.liveStreamRoom.participantTileActions.removeRoomUser" }))
                 }
-                : {}), { onConfirm: handleConfirmedAction, isUpdating: Boolean(currentActionLoading), onClose: () => setOpenConfirmDialog(false) })))] })));
+                : currentAction === constants_1.BAN_ROOM_USER
+                    ? {
+                        content: ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamRoom.participantTileActions.banRoomUser", defaultMessage: "ui.liveStreamRoom.participantTileActions.banRoomUser" }))
+                    }
+                    : {}), { onConfirm: handleConfirmedAction, isUpdating: Boolean(currentActionLoading), onClose: () => setOpenConfirmDialog(false) })))] })));
 }
 exports.default = ContributionActionsMenu;

package/lib/cjs/components/LiveStreamRoom/LiveStreamVideoConference/constants.d.ts

@@ -1,2 +1,3 @@
 export declare const PREFIX = "SCLiveStreamVideoConference";
+export declare const REMOVE_ROOM_USER = "_remove_room_user";
 export declare const BAN_ROOM_USER = "_ban_room_user";

package/lib/cjs/components/LiveStreamRoom/LiveStreamVideoConference/constants.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.BAN_ROOM_USER = exports.PREFIX = void 0;
+exports.BAN_ROOM_USER = exports.REMOVE_ROOM_USER = exports.PREFIX = void 0;
 exports.PREFIX = 'SCLiveStreamVideoConference';
+exports.REMOVE_ROOM_USER = '_remove_room_user';
 exports.BAN_ROOM_USER = '_ban_room_user';

package/lib/cjs/components/LiveStreamRoom/LiveStreamVideoConference/useLiveStreamCheck.js

@@ -86,7 +86,7 @@ function useLivestreamCheck(warningThreshold = constants_1.WARNING_THRESHOLD_EXP
         if (participants.length <= 1) {
             isExpiringSoon ? setIsExpired(true) : setIsExpiringSoon(true);
             if (!isExpiringSoon && !isExpired && showWarnings) {
-                enqueueSnackbar(intl.formatMessage({ id: 'ui.liveStreamRoom.check.youAreAloneInTheRoom', defaultMessage: 'ui.liveStreamRoom.check.youAreAloneInTheRoom' }), { variant: 'warning', autoHideDuration: 7000 });
+                enqueueSnackbar(intl.formatMessage({ id: 'ui.liveStreamRoom.check.youAreAloneInTheRoom', defaultMessage: 'ui.liveStreamRoom.check.youAreAloneInTheRoom' }), { variant: 'warning', autoHideDuration: 10000 });
             }
             else if (isExpired && performDisconnect) {
                 // Leave the room
@@ -107,7 +107,7 @@ function useLivestreamCheck(warningThreshold = constants_1.WARNING_THRESHOLD_EXP
             if (!isExpiringSoon && !isExpired && liveStream.host.id !== scUserContext.user.id && showWarnings) {
                 enqueueSnackbar(intl.formatMessage({ id: 'ui.liveStreamRoom.check.hostMissing', defaultMessage: 'ui.liveStreamRoom.check.hostMissing' }), {
                     variant: 'warning',
-                    autoHideDuration: 7000
+                    autoHideDuration: 10000
                 });
             }
             else if (isExpired && performDisconnect) {

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

@@ -127,7 +127,7 @@ export default function LiveStream(inProps) {
         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.EVENT_ROUTE_NAME, scLiveStream) }), { className: classes.snippetPrimary }, { children: [_jsx(Typography, Object.assign({ component: "span" }, { children: `${intl.formatDate(scLiveStream.created_at, {
+        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'

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

@@ -10,7 +10,11 @@ export interface ParticipantTileActionsMenuProps {
      */
     participant?: any;
     /**
-     * Handle delete obj
+     * Handle remove user
+     */
+    onRemoveParticipant?: (p: any) => void;
+    /**
+     * Handle ban user
      */
     onBanParticipant?: (p: any) => void;
     /**

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

@@ -1,8 +1,8 @@
 import { __awaiter, __rest } from "tslib";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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, useIntl } from 'react-intl';
+import { FormattedMessage } from 'react-intl';
 import Popper from '@mui/material/Popper';
 import Icon from '@mui/material/Icon';
 import { useSnackbar } from 'notistack';
@@ -10,7 +10,7 @@ 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 } from './constants';
+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';
@@ -53,9 +53,7 @@ const Root = styled(Box, {
 }));
 export default function ContributionActionsMenu(props) {
     // PROPS
-    const { className, participant, onBanParticipant, PopperProps = {} } = props, rest = __rest(props, ["className", "participant", "onBanParticipant", "PopperProps"]);
-    // INTL
-    const intl = useIntl();
+    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'));
@@ -99,8 +97,8 @@ export default function ContributionActionsMenu(props) {
     /**
      * Perform ban participant
      */
-    const performBanParticipant = useMemo(() => () => __awaiter(this, void 0, void 0, function* () {
-        const res = yield LiveStreamApiClient.removeParticipant(liveStream.id, { participant_id: p.identity });
+    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);
         }
@@ -110,8 +108,8 @@ export default function ContributionActionsMenu(props) {
      * Handle action
      */
     function handleAction(action) {
-        if (action === BAN_ROOM_USER) {
-            setCurrentAction(BAN_ROOM_USER);
+        if ([REMOVE_ROOM_USER, BAN_ROOM_USER].indexOf(action) > -1) {
+            setCurrentAction(action);
             setOpenConfirmDialog(true);
             handleClose();
         }
@@ -142,9 +140,21 @@ export default function ContributionActionsMenu(props) {
      */
     function handleConfirmedAction() {
         if (p && !isLoading && !currentActionLoading) {
-            if (currentAction === BAN_ROOM_USER) {
+            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);
-                performBanParticipant()
+                performRemoveOrBanParticipant(true)
                     .then(() => {
                     onBanParticipant && onBanParticipant(p);
                     performPostConfirmAction(true);
@@ -159,7 +169,7 @@ export default function ContributionActionsMenu(props) {
     /**
      * Can authenticated ban a user in a room
      */
-    const canBanUser = useMemo(() => () => {
+    const canRemoveOrBanUser = useMemo(() => () => {
         return (scUserContext.user &&
             liveStream &&
             p &&
@@ -171,7 +181,7 @@ export default function ContributionActionsMenu(props) {
      * Renders section general
      */
     function renderGeneralSection() {
-        return (_jsx(Box, { children: canBanUser() && (_jsxs(MenuItem, Object.assign({ className: classes.subItem, disabled: currentActionLoading === BAN_ROOM_USER }, { children: [_jsx(ListItemIcon, { children: _jsx(Icon, { children: "person" }) }), _jsx(ListItemText, { primary: _jsx(FormattedMessage, { id: "ui.liveStreamRoom.participantTileActions.banRoomUser", defaultMessage: "ui.liveStreamRoom.participantTileActions.banRoomUser" }), onClick: () => handleAction(BAN_ROOM_USER), classes: { root: classes.itemText } })] }))) }));
+        return (_jsx(Box, { children: canRemoveOrBanUser() && (_jsxs(_Fragment, { children: [_jsxs(MenuItem, Object.assign({ className: classes.subItem, disabled: currentActionLoading === 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" }), onClick: () => handleAction(REMOVE_ROOM_USER), classes: { root: classes.itemText } })] })), _jsxs(MenuItem, Object.assign({ className: classes.subItem, disabled: currentActionLoading === BAN_ROOM_USER }, { children: [_jsx(ListItemIcon, { children: _jsx(Icon, { children: "person" }) }), _jsx(ListItemText, { primary: _jsx(FormattedMessage, { id: "ui.liveStreamRoom.participantTileActions.banRoomUser", defaultMessage: "ui.liveStreamRoom.participantTileActions.banRoomUser" }), onClick: () => handleAction(BAN_ROOM_USER), classes: { root: classes.itemText } })] }))] })) }));
     }
     /**
      * Renders contribution menu content
@@ -182,7 +192,7 @@ export default function ContributionActionsMenu(props) {
     /**
      * Renders component only if the logged user has actions available
      */
-    if (!canBanUser()) {
+    if (!canRemoveOrBanUser()) {
         return null;
     }
     /**
@@ -190,9 +200,13 @@ export default function ContributionActionsMenu(props) {
      */
     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" }) })), isMobile ? (_jsx(SwipeableDrawer, Object.assign({ open: open, onClose: handleClose, onOpen: handleOpen, anchor: "bottom", disableSwipeToOpen: true }, { children: renderContent() }))) : (_jsx(PopperRoot, Object.assign({ open: open, 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 === BAN_ROOM_USER
+                }, "aria-haspopup": "true", onClick: handleOpen, className: classes.button, size: "small" }, { children: _jsx(Icon, { children: "expand_more" }) })), isMobile ? (_jsx(SwipeableDrawer, Object.assign({ open: open, onClose: handleClose, onOpen: handleOpen, anchor: "bottom", disableSwipeToOpen: true }, { children: renderContent() }))) : (_jsx(PopperRoot, Object.assign({ open: open, 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.banRoomUser", defaultMessage: "ui.liveStreamRoom.participantTileActions.banRoomUser" }))
+                    content: (_jsx(FormattedMessage, { id: "ui.liveStreamRoom.participantTileActions.removeRoomUser", defaultMessage: "ui.liveStreamRoom.participantTileActions.removeRoomUser" }))
                 }
-                : {}), { onConfirm: handleConfirmedAction, isUpdating: Boolean(currentActionLoading), onClose: () => setOpenConfirmDialog(false) })))] })));
+                : 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/constants.d.ts

@@ -1,2 +1,3 @@
 export declare const PREFIX = "SCLiveStreamVideoConference";
+export declare const REMOVE_ROOM_USER = "_remove_room_user";
 export declare const BAN_ROOM_USER = "_ban_room_user";

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

@@ -1,2 +1,3 @@
 export const PREFIX = 'SCLiveStreamVideoConference';
+export const REMOVE_ROOM_USER = '_remove_room_user';
 export const BAN_ROOM_USER = '_ban_room_user';

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

@@ -83,7 +83,7 @@ export function useLivestreamCheck(warningThreshold = WARNING_THRESHOLD_EXPIRING
         if (participants.length <= 1) {
             isExpiringSoon ? setIsExpired(true) : setIsExpiringSoon(true);
             if (!isExpiringSoon && !isExpired && showWarnings) {
-                enqueueSnackbar(intl.formatMessage({ id: 'ui.liveStreamRoom.check.youAreAloneInTheRoom', defaultMessage: 'ui.liveStreamRoom.check.youAreAloneInTheRoom' }), { variant: 'warning', autoHideDuration: 7000 });
+                enqueueSnackbar(intl.formatMessage({ id: 'ui.liveStreamRoom.check.youAreAloneInTheRoom', defaultMessage: 'ui.liveStreamRoom.check.youAreAloneInTheRoom' }), { variant: 'warning', autoHideDuration: 10000 });
             }
             else if (isExpired && performDisconnect) {
                 // Leave the room
@@ -104,7 +104,7 @@ export function useLivestreamCheck(warningThreshold = WARNING_THRESHOLD_EXPIRING
             if (!isExpiringSoon && !isExpired && liveStream.host.id !== scUserContext.user.id && showWarnings) {
                 enqueueSnackbar(intl.formatMessage({ id: 'ui.liveStreamRoom.check.hostMissing', defaultMessage: 'ui.liveStreamRoom.check.hostMissing' }), {
                     variant: 'warning',
-                    autoHideDuration: 7000
+                    autoHideDuration: 10000
                 });
             }
             else if (isExpired && performDisconnect) {