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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (16) hide show
  1. package/lib/cjs/components/LiveStream/LiveStream.js +1 -1
  2. package/lib/cjs/components/LiveStreamRoom/LiveStreamVideoConference/ParticipantTileActions.d.ts +5 -1
  3. package/lib/cjs/components/LiveStreamRoom/LiveStreamVideoConference/ParticipantTileActions.js +29 -15
  4. package/lib/cjs/components/LiveStreamRoom/LiveStreamVideoConference/constants.d.ts +1 -0
  5. package/lib/cjs/components/LiveStreamRoom/LiveStreamVideoConference/constants.js +2 -1
  6. package/lib/cjs/components/LiveStreamRoom/LiveStreamVideoConference/useLiveStreamCheck.js +2 -2
  7. package/lib/cjs/components/UserLiveStreamWidget/UserLiveStreamWidget.js +2 -1
  8. package/lib/esm/components/LiveStream/LiveStream.js +1 -1
  9. package/lib/esm/components/LiveStreamRoom/LiveStreamVideoConference/ParticipantTileActions.d.ts +5 -1
  10. package/lib/esm/components/LiveStreamRoom/LiveStreamVideoConference/ParticipantTileActions.js +32 -18
  11. package/lib/esm/components/LiveStreamRoom/LiveStreamVideoConference/constants.d.ts +1 -0
  12. package/lib/esm/components/LiveStreamRoom/LiveStreamVideoConference/constants.js +1 -0
  13. package/lib/esm/components/LiveStreamRoom/LiveStreamVideoConference/useLiveStreamCheck.js +2 -2
  14. package/lib/esm/components/UserLiveStreamWidget/UserLiveStreamWidget.js +2 -1
  15. package/lib/umd/react-ui.js +1 -1
  16. package/package.json +8 -8
package/lib/cjs/components/LiveStream/LiveStream.js CHANGED
@@ -129,7 +129,7 @@ function LiveStream(inProps) {
129
129
  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" }) })) })))] })));
130
130
  }
131
131
  else {
132
- 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, {
132
+ 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, {
133
133
  weekday: 'long',
134
134
  month: 'long',
135
135
  day: 'numeric'
package/lib/cjs/components/LiveStreamRoom/LiveStreamVideoConference/ParticipantTileActions.d.ts CHANGED
@@ -10,7 +10,11 @@ export interface ParticipantTileActionsMenuProps {
10
10
  */
11
11
  participant?: any;
12
12
  /**
13
- * Handle delete obj
13
+ * Handle remove user
14
+ */
15
+ onRemoveParticipant?: (p: any) => void;
16
+ /**
17
+ * Handle ban user
14
18
  */
15
19
  onBanParticipant?: (p: any) => void;
16
20
  /**
package/lib/cjs/components/LiveStreamRoom/LiveStreamVideoConference/ParticipantTileActions.js CHANGED
@@ -55,9 +55,7 @@ const Root = (0, styles_1.styled)(material_1.Box, {
55
55
  }));
56
56
  function ContributionActionsMenu(props) {
57
57
  // PROPS
58
- const { className, participant, onBanParticipant, PopperProps = {} } = props, rest = tslib_1.__rest(props, ["className", "participant", "onBanParticipant", "PopperProps"]);
59
- // INTL
60
- const intl = (0, react_intl_1.useIntl)();
58
+ const { className, participant, onRemoveParticipant, onBanParticipant, PopperProps = {} } = props, rest = tslib_1.__rest(props, ["className", "participant", "onRemoveParticipant", "onBanParticipant", "PopperProps"]);
61
59
  // CONTEXT
62
60
  const theme = (0, material_1.useTheme)();
63
61
  const isMobile = (0, material_1.useMediaQuery)(theme.breakpoints.down('md'));
@@ -101,8 +99,8 @@ function ContributionActionsMenu(props) {
101
99
  /**
102
100
  * Perform ban participant
103
101
  */
104
- const performBanParticipant = (0, react_1.useMemo)(() => () => tslib_1.__awaiter(this, void 0, void 0, function* () {
105
- const res = yield api_services_1.LiveStreamApiClient.removeParticipant(liveStream.id, { participant_id: p.identity });
102
+ const performRemoveOrBanParticipant = (0, react_1.useMemo)(() => (ban = false) => tslib_1.__awaiter(this, void 0, void 0, function* () {
103
+ const res = yield api_services_1.LiveStreamApiClient.removeParticipant(liveStream.id, { participant_id: p.identity, ban });
106
104
  if (res.status >= 300) {
107
105
  return Promise.reject(res);
108
106
  }
@@ -112,8 +110,8 @@ function ContributionActionsMenu(props) {
112
110
  * Handle action
113
111
  */
114
112
  function handleAction(action) {
115
- if (action === constants_1.BAN_ROOM_USER) {
116
- setCurrentAction(constants_1.BAN_ROOM_USER);
113
+ if ([constants_1.REMOVE_ROOM_USER, constants_1.BAN_ROOM_USER].indexOf(action) > -1) {
114
+ setCurrentAction(action);
117
115
  setOpenConfirmDialog(true);
118
116
  handleClose();
119
117
  }
@@ -144,9 +142,21 @@ function ContributionActionsMenu(props) {
144
142
  */
145
143
  function handleConfirmedAction() {
146
144
  if (p && !isLoading && !currentActionLoading) {
147
- if (currentAction === constants_1.BAN_ROOM_USER) {
145
+ if (currentAction === constants_1.REMOVE_ROOM_USER) {
146
+ setCurrentActionLoading(constants_1.REMOVE_ROOM_USER);
147
+ performRemoveOrBanParticipant()
148
+ .then(() => {
149
+ onRemoveParticipant && onRemoveParticipant(p);
150
+ performPostConfirmAction(true);
151
+ })
152
+ .catch((error) => {
153
+ utils_1.Logger.error(Errors_1.SCOPE_SC_UI, error);
154
+ performPostConfirmAction(false);
155
+ });
156
+ }
157
+ else if (currentAction === constants_1.BAN_ROOM_USER) {
148
158
  setCurrentActionLoading(constants_1.BAN_ROOM_USER);
149
- performBanParticipant()
159
+ performRemoveOrBanParticipant(true)
150
160
  .then(() => {
151
161
  onBanParticipant && onBanParticipant(p);
152
162
  performPostConfirmAction(true);
@@ -161,7 +171,7 @@ function ContributionActionsMenu(props) {
161
171
  /**
162
172
  * Can authenticated ban a user in a room
163
173
  */
164
- const canBanUser = (0, react_1.useMemo)(() => () => {
174
+ const canRemoveOrBanUser = (0, react_1.useMemo)(() => () => {
165
175
  return (scUserContext.user &&
166
176
  liveStream &&
167
177
  p &&
@@ -173,7 +183,7 @@ function ContributionActionsMenu(props) {
173
183
  * Renders section general
174
184
  */
175
185
  function renderGeneralSection() {
176
- 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 } })] }))) }));
186
+ 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 } })] }))] })) }));
177
187
  }
178
188
  /**
179
189
  * Renders contribution menu content
@@ -184,7 +194,7 @@ function ContributionActionsMenu(props) {
184
194
  /**
185
195
  * Renders component only if the logged user has actions available
186
196
  */
187
- if (!canBanUser()) {
197
+ if (!canRemoveOrBanUser()) {
188
198
  return null;
189
199
  }
190
200
  /**
@@ -192,10 +202,14 @@ function ContributionActionsMenu(props) {
192
202
  */
193
203
  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) => {
194
204
  popperRef.current = ref;
195
- }, "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
205
+ }, "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
196
206
  ? {
197
- content: ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamRoom.participantTileActions.banRoomUser", defaultMessage: "ui.liveStreamRoom.participantTileActions.banRoomUser" }))
207
+ content: ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamRoom.participantTileActions.removeRoomUser", defaultMessage: "ui.liveStreamRoom.participantTileActions.removeRoomUser" }))
198
208
  }
199
- : {}), { onConfirm: handleConfirmedAction, isUpdating: Boolean(currentActionLoading), onClose: () => setOpenConfirmDialog(false) })))] })));
209
+ : currentAction === constants_1.BAN_ROOM_USER
210
+ ? {
211
+ content: ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamRoom.participantTileActions.banRoomUser", defaultMessage: "ui.liveStreamRoom.participantTileActions.banRoomUser" }))
212
+ }
213
+ : {}), { onConfirm: handleConfirmedAction, isUpdating: Boolean(currentActionLoading), onClose: () => setOpenConfirmDialog(false) })))] })));
200
214
  }
201
215
  exports.default = ContributionActionsMenu;
package/lib/cjs/components/LiveStreamRoom/LiveStreamVideoConference/constants.d.ts CHANGED
@@ -1,2 +1,3 @@
1
1
  export declare const PREFIX = "SCLiveStreamVideoConference";
2
+ export declare const REMOVE_ROOM_USER = "_remove_room_user";
2
3
  export declare const BAN_ROOM_USER = "_ban_room_user";
package/lib/cjs/components/LiveStreamRoom/LiveStreamVideoConference/constants.js CHANGED
@@ -1,5 +1,6 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.BAN_ROOM_USER = exports.PREFIX = void 0;
3
+ exports.BAN_ROOM_USER = exports.REMOVE_ROOM_USER = exports.PREFIX = void 0;
4
4
  exports.PREFIX = 'SCLiveStreamVideoConference';
5
+ exports.REMOVE_ROOM_USER = '_remove_room_user';
5
6
  exports.BAN_ROOM_USER = '_ban_room_user';
package/lib/cjs/components/LiveStreamRoom/LiveStreamVideoConference/useLiveStreamCheck.js CHANGED
@@ -86,7 +86,7 @@ function useLivestreamCheck(warningThreshold = constants_1.WARNING_THRESHOLD_EXP
86
86
  if (participants.length <= 1) {
87
87
  isExpiringSoon ? setIsExpired(true) : setIsExpiringSoon(true);
88
88
  if (!isExpiringSoon && !isExpired && showWarnings) {
89
- enqueueSnackbar(intl.formatMessage({ id: 'ui.liveStreamRoom.check.youAreAloneInTheRoom', defaultMessage: 'ui.liveStreamRoom.check.youAreAloneInTheRoom' }), { variant: 'warning', autoHideDuration: 7000 });
89
+ enqueueSnackbar(intl.formatMessage({ id: 'ui.liveStreamRoom.check.youAreAloneInTheRoom', defaultMessage: 'ui.liveStreamRoom.check.youAreAloneInTheRoom' }), { variant: 'warning', autoHideDuration: 10000 });
90
90
  }
91
91
  else if (isExpired && performDisconnect) {
92
92
  // Leave the room
@@ -107,7 +107,7 @@ function useLivestreamCheck(warningThreshold = constants_1.WARNING_THRESHOLD_EXP
107
107
  if (!isExpiringSoon && !isExpired && liveStream.host.id !== scUserContext.user.id && showWarnings) {
108
108
  enqueueSnackbar(intl.formatMessage({ id: 'ui.liveStreamRoom.check.hostMissing', defaultMessage: 'ui.liveStreamRoom.check.hostMissing' }), {
109
109
  variant: 'warning',
110
- autoHideDuration: 7000
110
+ autoHideDuration: 10000
111
111
  });
112
112
  }
113
113
  else if (isExpired && performDisconnect) {
package/lib/cjs/components/UserLiveStreamWidget/UserLiveStreamWidget.js CHANGED
@@ -29,6 +29,7 @@ const messages = (0, react_intl_1.defineMessages)({
29
29
  });
30
30
  const classes = {
31
31
  root: `${constants_1.PREFIX}-root`,
32
+ title: `${constants_1.PREFIX}-title`,
32
33
  content: `${constants_1.PREFIX}-content`,
33
34
  header: `${constants_1.PREFIX}-header`,
34
35
  avatarWrapper: `${constants_1.PREFIX}-avatar-wrapper`,
@@ -127,6 +128,6 @@ function UserLiveStreamWidget(inProps) {
127
128
  if (!scUser || (state === null || state === void 0 ? void 0 : state.count) === 0 || !liveStreamEnabled || isFreeTrialTier) {
128
129
  return (0, jsx_runtime_1.jsx)(HiddenPlaceholder_1.default, {});
129
130
  }
130
- return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: classes.root }, rest, { children: [(0, jsx_runtime_1.jsxs)(material_1.CardContent, Object.assign({ className: classes.content }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h4" }, { children: (0, jsx_runtime_1.jsx)("b", { children: intl.formatMessage(messages.title, { user: scUser.username }) }) })), (0, jsx_runtime_1.jsx)(material_1.Stack, Object.assign({ className: classes.liveWrapper }, { children: state === null || state === void 0 ? void 0 : state.results.map((_live, i, array) => ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(LiveStream_1.default, Object.assign({ liveStream: _live }, liveStreamComponentProps, { className: classes.live })), i < array.length - 1 && (0, jsx_runtime_1.jsx)(material_1.Divider, {})] }, i))) }))] })), state.count > state.visibleItems && ((0, jsx_runtime_1.jsx)(material_1.CardActions, Object.assign({ className: classes.actions }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ onClick: handleToggleDialogOpen, className: classes.actionButton }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "caption" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userLiveStreamWidget.showAll", defaultMessage: "ui.userLiveStreamWidget.showAll" }) })) })) }))), openDialog && ((0, jsx_runtime_1.jsx)(DialogRoot, Object.assign({ className: classes.dialogRoot, title: intl.formatMessage(messages.title, { user: scUser.username }), onClose: handleToggleDialogOpen, open: openDialog }, dialogProps, { children: (0, jsx_runtime_1.jsx)(InfiniteScroll_1.default, Object.assign({ dataLength: state.results.length, next: handleNext, hasMoreNext: Boolean(state.next), loaderNext: (0, jsx_runtime_1.jsx)(LiveStream_1.LiveStreamSkeleton, Object.assign({ elevation: 0 }, liveStreamComponentProps)), className: classes.infiniteScroll, endMessage: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.endMessage }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userLiveStreamWidget.noMoreResults", defaultMessage: "ui.userLiveStreamWidget.noMoreResults" }) })) }, { children: (0, jsx_runtime_1.jsx)(material_1.List, { children: state.results.map((live) => ((0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(LiveStream_1.default, Object.assign({ elevation: 0, liveStream: live }, liveStreamComponentProps)) }, live.id))) }) })) })))] })));
131
+ return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: classes.root }, rest, { children: [(0, jsx_runtime_1.jsxs)(material_1.CardContent, Object.assign({ className: classes.content }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.title, variant: "h5" }, { children: intl.formatMessage(messages.title, { user: scUser.username }) })), (0, jsx_runtime_1.jsx)(material_1.Stack, Object.assign({ className: classes.liveWrapper }, { children: state === null || state === void 0 ? void 0 : state.results.map((_live, i, array) => ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(LiveStream_1.default, Object.assign({ liveStream: _live }, liveStreamComponentProps, { className: classes.live })), i < array.length - 1 && (0, jsx_runtime_1.jsx)(material_1.Divider, {})] }, i))) }))] })), state.count > state.visibleItems && ((0, jsx_runtime_1.jsx)(material_1.CardActions, Object.assign({ className: classes.actions }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ onClick: handleToggleDialogOpen, className: classes.actionButton }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "caption" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userLiveStreamWidget.showAll", defaultMessage: "ui.userLiveStreamWidget.showAll" }) })) })) }))), openDialog && ((0, jsx_runtime_1.jsx)(DialogRoot, Object.assign({ className: classes.dialogRoot, title: intl.formatMessage(messages.title, { user: scUser.username }), onClose: handleToggleDialogOpen, open: openDialog }, dialogProps, { children: (0, jsx_runtime_1.jsx)(InfiniteScroll_1.default, Object.assign({ dataLength: state.results.length, next: handleNext, hasMoreNext: Boolean(state.next), loaderNext: (0, jsx_runtime_1.jsx)(LiveStream_1.LiveStreamSkeleton, Object.assign({ elevation: 0 }, liveStreamComponentProps)), className: classes.infiniteScroll, endMessage: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.endMessage }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userLiveStreamWidget.noMoreResults", defaultMessage: "ui.userLiveStreamWidget.noMoreResults" }) })) }, { children: (0, jsx_runtime_1.jsx)(material_1.List, { children: state.results.map((live) => ((0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(LiveStream_1.default, Object.assign({ elevation: 0, liveStream: live }, liveStreamComponentProps)) }, live.id))) }) })) })))] })));
131
132
  }
132
133
  exports.default = UserLiveStreamWidget;
package/lib/esm/components/LiveStream/LiveStream.js CHANGED
@@ -127,7 +127,7 @@ export default function LiveStream(inProps) {
127
127
  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" }) })) })))] })));
128
128
  }
129
129
  else {
130
- 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, {
130
+ 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, {
131
131
  weekday: 'long',
132
132
  month: 'long',
133
133
  day: 'numeric'
package/lib/esm/components/LiveStreamRoom/LiveStreamVideoConference/ParticipantTileActions.d.ts CHANGED
@@ -10,7 +10,11 @@ export interface ParticipantTileActionsMenuProps {
10
10
  */
11
11
  participant?: any;
12
12
  /**
13
- * Handle delete obj
13
+ * Handle remove user
14
+ */
15
+ onRemoveParticipant?: (p: any) => void;
16
+ /**
17
+ * Handle ban user
14
18
  */
15
19
  onBanParticipant?: (p: any) => void;
16
20
  /**
package/lib/esm/components/LiveStreamRoom/LiveStreamVideoConference/ParticipantTileActions.js CHANGED
@@ -1,8 +1,8 @@
1
1
  import { __awaiter, __rest } from "tslib";
2
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
3
3
  import { useContext, useMemo, useRef, useState } from 'react';
4
4
  import { styled } from '@mui/material/styles';
5
- import { FormattedMessage, useIntl } from 'react-intl';
5
+ import { FormattedMessage } from 'react-intl';
6
6
  import Popper from '@mui/material/Popper';
7
7
  import Icon from '@mui/material/Icon';
8
8
  import { useSnackbar } from 'notistack';
@@ -10,7 +10,7 @@ import classNames from 'classnames';
10
10
  import { Box, ClickAwayListener, Grow, IconButton, ListItemIcon, ListItemText, MenuItem, MenuList, Paper, SwipeableDrawer, useMediaQuery, useTheme } from '@mui/material';
11
11
  import { LiveStreamApiClient } from '@selfcommunity/api-services';
12
12
  import { SCContext, SCUserContext } from '@selfcommunity/react-core';
13
- import { BAN_ROOM_USER } from './constants';
13
+ import { BAN_ROOM_USER, REMOVE_ROOM_USER } from './constants';
14
14
  import ConfirmDialog from '../../../shared/ConfirmDialog/ConfirmDialog';
15
15
  import { useEnsureParticipant } from '@livekit/components-react';
16
16
  import { useLiveStream } from './LiveStreamProvider';
@@ -53,9 +53,7 @@ const Root = styled(Box, {
53
53
  }));
54
54
  export default function ContributionActionsMenu(props) {
55
55
  // PROPS
56
- const { className, participant, onBanParticipant, PopperProps = {} } = props, rest = __rest(props, ["className", "participant", "onBanParticipant", "PopperProps"]);
57
- // INTL
58
- const intl = useIntl();
56
+ const { className, participant, onRemoveParticipant, onBanParticipant, PopperProps = {} } = props, rest = __rest(props, ["className", "participant", "onRemoveParticipant", "onBanParticipant", "PopperProps"]);
59
57
  // CONTEXT
60
58
  const theme = useTheme();
61
59
  const isMobile = useMediaQuery(theme.breakpoints.down('md'));
@@ -99,8 +97,8 @@ export default function ContributionActionsMenu(props) {
99
97
  /**
100
98
  * Perform ban participant
101
99
  */
102
- const performBanParticipant = useMemo(() => () => __awaiter(this, void 0, void 0, function* () {
103
- const res = yield LiveStreamApiClient.removeParticipant(liveStream.id, { participant_id: p.identity });
100
+ const performRemoveOrBanParticipant = useMemo(() => (ban = false) => __awaiter(this, void 0, void 0, function* () {
101
+ const res = yield LiveStreamApiClient.removeParticipant(liveStream.id, { participant_id: p.identity, ban });
104
102
  if (res.status >= 300) {
105
103
  return Promise.reject(res);
106
104
  }
@@ -110,8 +108,8 @@ export default function ContributionActionsMenu(props) {
110
108
  * Handle action
111
109
  */
112
110
  function handleAction(action) {
113
- if (action === BAN_ROOM_USER) {
114
- setCurrentAction(BAN_ROOM_USER);
111
+ if ([REMOVE_ROOM_USER, BAN_ROOM_USER].indexOf(action) > -1) {
112
+ setCurrentAction(action);
115
113
  setOpenConfirmDialog(true);
116
114
  handleClose();
117
115
  }
@@ -142,9 +140,21 @@ export default function ContributionActionsMenu(props) {
142
140
  */
143
141
  function handleConfirmedAction() {
144
142
  if (p && !isLoading && !currentActionLoading) {
145
- if (currentAction === BAN_ROOM_USER) {
143
+ if (currentAction === REMOVE_ROOM_USER) {
144
+ setCurrentActionLoading(REMOVE_ROOM_USER);
145
+ performRemoveOrBanParticipant()
146
+ .then(() => {
147
+ onRemoveParticipant && onRemoveParticipant(p);
148
+ performPostConfirmAction(true);
149
+ })
150
+ .catch((error) => {
151
+ Logger.error(SCOPE_SC_UI, error);
152
+ performPostConfirmAction(false);
153
+ });
154
+ }
155
+ else if (currentAction === BAN_ROOM_USER) {
146
156
  setCurrentActionLoading(BAN_ROOM_USER);
147
- performBanParticipant()
157
+ performRemoveOrBanParticipant(true)
148
158
  .then(() => {
149
159
  onBanParticipant && onBanParticipant(p);
150
160
  performPostConfirmAction(true);
@@ -159,7 +169,7 @@ export default function ContributionActionsMenu(props) {
159
169
  /**
160
170
  * Can authenticated ban a user in a room
161
171
  */
162
- const canBanUser = useMemo(() => () => {
172
+ const canRemoveOrBanUser = useMemo(() => () => {
163
173
  return (scUserContext.user &&
164
174
  liveStream &&
165
175
  p &&
@@ -171,7 +181,7 @@ export default function ContributionActionsMenu(props) {
171
181
  * Renders section general
172
182
  */
173
183
  function renderGeneralSection() {
174
- 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 } })] }))) }));
184
+ 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 } })] }))] })) }));
175
185
  }
176
186
  /**
177
187
  * Renders contribution menu content
@@ -182,7 +192,7 @@ export default function ContributionActionsMenu(props) {
182
192
  /**
183
193
  * Renders component only if the logged user has actions available
184
194
  */
185
- if (!canBanUser()) {
195
+ if (!canRemoveOrBanUser()) {
186
196
  return null;
187
197
  }
188
198
  /**
@@ -190,9 +200,13 @@ export default function ContributionActionsMenu(props) {
190
200
  */
191
201
  return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, { children: [_jsx(IconButton, Object.assign({ ref: (ref) => {
192
202
  popperRef.current = ref;
193
- }, "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
203
+ }, "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
194
204
  ? {
195
- content: (_jsx(FormattedMessage, { id: "ui.liveStreamRoom.participantTileActions.banRoomUser", defaultMessage: "ui.liveStreamRoom.participantTileActions.banRoomUser" }))
205
+ content: (_jsx(FormattedMessage, { id: "ui.liveStreamRoom.participantTileActions.removeRoomUser", defaultMessage: "ui.liveStreamRoom.participantTileActions.removeRoomUser" }))
196
206
  }
197
- : {}), { onConfirm: handleConfirmedAction, isUpdating: Boolean(currentActionLoading), onClose: () => setOpenConfirmDialog(false) })))] })));
207
+ : currentAction === BAN_ROOM_USER
208
+ ? {
209
+ content: (_jsx(FormattedMessage, { id: "ui.liveStreamRoom.participantTileActions.banRoomUser", defaultMessage: "ui.liveStreamRoom.participantTileActions.banRoomUser" }))
210
+ }
211
+ : {}), { onConfirm: handleConfirmedAction, isUpdating: Boolean(currentActionLoading), onClose: () => setOpenConfirmDialog(false) })))] })));
198
212
  }
package/lib/esm/components/LiveStreamRoom/LiveStreamVideoConference/constants.d.ts CHANGED
@@ -1,2 +1,3 @@
1
1
  export declare const PREFIX = "SCLiveStreamVideoConference";
2
+ export declare const REMOVE_ROOM_USER = "_remove_room_user";
2
3
  export declare const BAN_ROOM_USER = "_ban_room_user";
package/lib/esm/components/LiveStreamRoom/LiveStreamVideoConference/constants.js CHANGED
@@ -1,2 +1,3 @@
1
1
  export const PREFIX = 'SCLiveStreamVideoConference';
2
+ export const REMOVE_ROOM_USER = '_remove_room_user';
2
3
  export const BAN_ROOM_USER = '_ban_room_user';
package/lib/esm/components/LiveStreamRoom/LiveStreamVideoConference/useLiveStreamCheck.js CHANGED
@@ -83,7 +83,7 @@ export function useLivestreamCheck(warningThreshold = WARNING_THRESHOLD_EXPIRING
83
83
  if (participants.length <= 1) {
84
84
  isExpiringSoon ? setIsExpired(true) : setIsExpiringSoon(true);
85
85
  if (!isExpiringSoon && !isExpired && showWarnings) {
86
- enqueueSnackbar(intl.formatMessage({ id: 'ui.liveStreamRoom.check.youAreAloneInTheRoom', defaultMessage: 'ui.liveStreamRoom.check.youAreAloneInTheRoom' }), { variant: 'warning', autoHideDuration: 7000 });
86
+ enqueueSnackbar(intl.formatMessage({ id: 'ui.liveStreamRoom.check.youAreAloneInTheRoom', defaultMessage: 'ui.liveStreamRoom.check.youAreAloneInTheRoom' }), { variant: 'warning', autoHideDuration: 10000 });
87
87
  }
88
88
  else if (isExpired && performDisconnect) {
89
89
  // Leave the room
@@ -104,7 +104,7 @@ export function useLivestreamCheck(warningThreshold = WARNING_THRESHOLD_EXPIRING
104
104
  if (!isExpiringSoon && !isExpired && liveStream.host.id !== scUserContext.user.id && showWarnings) {
105
105
  enqueueSnackbar(intl.formatMessage({ id: 'ui.liveStreamRoom.check.hostMissing', defaultMessage: 'ui.liveStreamRoom.check.hostMissing' }), {
106
106
  variant: 'warning',
107
- autoHideDuration: 7000
107
+ autoHideDuration: 10000
108
108
  });
109
109
  }
110
110
  else if (isExpired && performDisconnect) {
package/lib/esm/components/UserLiveStreamWidget/UserLiveStreamWidget.js CHANGED
@@ -27,6 +27,7 @@ const messages = defineMessages({
27
27
  });
28
28
  const classes = {
29
29
  root: `${PREFIX}-root`,
30
+ title: `${PREFIX}-title`,
30
31
  content: `${PREFIX}-content`,
31
32
  header: `${PREFIX}-header`,
32
33
  avatarWrapper: `${PREFIX}-avatar-wrapper`,
@@ -125,5 +126,5 @@ export default function UserLiveStreamWidget(inProps) {
125
126
  if (!scUser || (state === null || state === void 0 ? void 0 : state.count) === 0 || !liveStreamEnabled || isFreeTrialTier) {
126
127
  return _jsx(HiddenPlaceholder, {});
127
128
  }
128
- return (_jsxs(Root, Object.assign({ className: classes.root }, rest, { children: [_jsxs(CardContent, Object.assign({ className: classes.content }, { children: [_jsx(Typography, Object.assign({ variant: "h4" }, { children: _jsx("b", { children: intl.formatMessage(messages.title, { user: scUser.username }) }) })), _jsx(Stack, Object.assign({ className: classes.liveWrapper }, { children: state === null || state === void 0 ? void 0 : state.results.map((_live, i, array) => (_jsxs(Fragment, { children: [_jsx(LiveStream, Object.assign({ liveStream: _live }, liveStreamComponentProps, { className: classes.live })), i < array.length - 1 && _jsx(Divider, {})] }, i))) }))] })), state.count > state.visibleItems && (_jsx(CardActions, Object.assign({ className: classes.actions }, { children: _jsx(Button, Object.assign({ onClick: handleToggleDialogOpen, className: classes.actionButton }, { children: _jsx(Typography, Object.assign({ variant: "caption" }, { children: _jsx(FormattedMessage, { id: "ui.userLiveStreamWidget.showAll", defaultMessage: "ui.userLiveStreamWidget.showAll" }) })) })) }))), openDialog && (_jsx(DialogRoot, Object.assign({ className: classes.dialogRoot, title: intl.formatMessage(messages.title, { user: scUser.username }), onClose: handleToggleDialogOpen, open: openDialog }, dialogProps, { children: _jsx(InfiniteScroll, Object.assign({ dataLength: state.results.length, next: handleNext, hasMoreNext: Boolean(state.next), loaderNext: _jsx(LiveStreamSkeleton, Object.assign({ elevation: 0 }, liveStreamComponentProps)), className: classes.infiniteScroll, endMessage: _jsx(Typography, Object.assign({ className: classes.endMessage }, { children: _jsx(FormattedMessage, { id: "ui.userLiveStreamWidget.noMoreResults", defaultMessage: "ui.userLiveStreamWidget.noMoreResults" }) })) }, { children: _jsx(List, { children: state.results.map((live) => (_jsx(ListItem, { children: _jsx(LiveStream, Object.assign({ elevation: 0, liveStream: live }, liveStreamComponentProps)) }, live.id))) }) })) })))] })));
129
+ return (_jsxs(Root, Object.assign({ className: classes.root }, rest, { children: [_jsxs(CardContent, Object.assign({ className: classes.content }, { children: [_jsx(Typography, Object.assign({ className: classes.title, variant: "h5" }, { children: intl.formatMessage(messages.title, { user: scUser.username }) })), _jsx(Stack, Object.assign({ className: classes.liveWrapper }, { children: state === null || state === void 0 ? void 0 : state.results.map((_live, i, array) => (_jsxs(Fragment, { children: [_jsx(LiveStream, Object.assign({ liveStream: _live }, liveStreamComponentProps, { className: classes.live })), i < array.length - 1 && _jsx(Divider, {})] }, i))) }))] })), state.count > state.visibleItems && (_jsx(CardActions, Object.assign({ className: classes.actions }, { children: _jsx(Button, Object.assign({ onClick: handleToggleDialogOpen, className: classes.actionButton }, { children: _jsx(Typography, Object.assign({ variant: "caption" }, { children: _jsx(FormattedMessage, { id: "ui.userLiveStreamWidget.showAll", defaultMessage: "ui.userLiveStreamWidget.showAll" }) })) })) }))), openDialog && (_jsx(DialogRoot, Object.assign({ className: classes.dialogRoot, title: intl.formatMessage(messages.title, { user: scUser.username }), onClose: handleToggleDialogOpen, open: openDialog }, dialogProps, { children: _jsx(InfiniteScroll, Object.assign({ dataLength: state.results.length, next: handleNext, hasMoreNext: Boolean(state.next), loaderNext: _jsx(LiveStreamSkeleton, Object.assign({ elevation: 0 }, liveStreamComponentProps)), className: classes.infiniteScroll, endMessage: _jsx(Typography, Object.assign({ className: classes.endMessage }, { children: _jsx(FormattedMessage, { id: "ui.userLiveStreamWidget.noMoreResults", defaultMessage: "ui.userLiveStreamWidget.noMoreResults" }) })) }, { children: _jsx(List, { children: state.results.map((live) => (_jsx(ListItem, { children: _jsx(LiveStream, Object.assign({ elevation: 0, liveStream: live }, liveStreamComponentProps)) }, live.id))) }) })) })))] })));
129
130
  }