@selfcommunity/react-ui 0.10.5-alpha.8 → 0.11.0-alpha.0

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 (42) hide show
  1. package/lib/cjs/components/ChangeCover/ChangeCover.js +1 -1
  2. package/lib/cjs/components/Composer/Composer.js +2 -2
  3. package/lib/cjs/components/ComposerIconButton/ComposerIconButton.d.ts +25 -2
  4. package/lib/cjs/components/ComposerIconButton/ComposerIconButton.js +116 -20
  5. package/lib/cjs/components/CreateEventWidget/CreateEventWidget.js +2 -2
  6. package/lib/cjs/components/CreateLiveStreamButton/CreateLiveStreamButton.js +1 -1
  7. package/lib/cjs/components/EventForm/EventForm.js +4 -4
  8. package/lib/cjs/components/EventSubscribeButton/EventSubscribeButton.js +1 -1
  9. package/lib/cjs/components/GroupActionsMenu/index.js +1 -1
  10. package/lib/cjs/components/GroupSettingsIconButton/GroupSettingsIconButton.js +1 -1
  11. package/lib/cjs/components/LiveStreamRoom/LiveStreamRoom.js +19 -5
  12. package/lib/cjs/components/LiveStreamRoom/LiveStreamVideoConference/LiveStreamVideoConference.js +20 -2
  13. package/lib/cjs/components/LiveStreamRoom/LiveStreamVideoConference/ParticipantTileActions.js +1 -1
  14. package/lib/cjs/components/LiveStreamRoom/LiveStreamVideoConference/PreJoin.d.ts +4 -1
  15. package/lib/cjs/components/LiveStreamRoom/LiveStreamVideoConference/PreJoin.js +10 -4
  16. package/lib/cjs/components/NavigationMenuIconButton/NavigationMenuDrawer.js +3 -3
  17. package/lib/cjs/components/OnBoardingWidget/ActionsButton.js +1 -1
  18. package/lib/cjs/components/PrivateMessageSettingsIconButton/PrivateMessageSettingsIconButton.js +1 -1
  19. package/lib/cjs/components/UserActionIconButton/UserActionIconButton.js +1 -1
  20. package/lib/cjs/components/UserProfileHeader/UserProfileHeader.js +1 -1
  21. package/lib/esm/components/ChangeCover/ChangeCover.js +1 -1
  22. package/lib/esm/components/Composer/Composer.js +2 -2
  23. package/lib/esm/components/ComposerIconButton/ComposerIconButton.d.ts +25 -2
  24. package/lib/esm/components/ComposerIconButton/ComposerIconButton.js +117 -21
  25. package/lib/esm/components/CreateEventWidget/CreateEventWidget.js +2 -2
  26. package/lib/esm/components/CreateLiveStreamButton/CreateLiveStreamButton.js +1 -1
  27. package/lib/esm/components/EventForm/EventForm.js +4 -4
  28. package/lib/esm/components/EventSubscribeButton/EventSubscribeButton.js +1 -1
  29. package/lib/esm/components/GroupActionsMenu/index.js +1 -1
  30. package/lib/esm/components/GroupSettingsIconButton/GroupSettingsIconButton.js +1 -1
  31. package/lib/esm/components/LiveStreamRoom/LiveStreamRoom.js +19 -5
  32. package/lib/esm/components/LiveStreamRoom/LiveStreamVideoConference/LiveStreamVideoConference.js +21 -3
  33. package/lib/esm/components/LiveStreamRoom/LiveStreamVideoConference/ParticipantTileActions.js +1 -1
  34. package/lib/esm/components/LiveStreamRoom/LiveStreamVideoConference/PreJoin.d.ts +4 -1
  35. package/lib/esm/components/LiveStreamRoom/LiveStreamVideoConference/PreJoin.js +10 -4
  36. package/lib/esm/components/NavigationMenuIconButton/NavigationMenuDrawer.js +3 -3
  37. package/lib/esm/components/OnBoardingWidget/ActionsButton.js +1 -1
  38. package/lib/esm/components/PrivateMessageSettingsIconButton/PrivateMessageSettingsIconButton.js +1 -1
  39. package/lib/esm/components/UserActionIconButton/UserActionIconButton.js +1 -1
  40. package/lib/esm/components/UserProfileHeader/UserProfileHeader.js +1 -1
  41. package/lib/umd/react-ui.js +1 -1
  42. package/package.json +6 -6
@@ -13,6 +13,7 @@ import { useLiveStream } from './LiveStreamProvider';
13
13
  /** @alpha */
14
14
  export function usePreviewTracks(options, onError) {
15
15
  const [tracks, setTracks] = React.useState();
16
+ const [error, setError] = React.useState(false);
16
17
  const trackLock = React.useMemo(() => new Mutex(), []);
17
18
  React.useEffect(() => {
18
19
  let needsCleanup = false;
@@ -27,6 +28,7 @@ export function usePreviewTracks(options, onError) {
27
28
  else {
28
29
  setTracks(localTracks);
29
30
  }
31
+ setError(false);
30
32
  }
31
33
  }
32
34
  catch (e) {
@@ -36,6 +38,7 @@ export function usePreviewTracks(options, onError) {
36
38
  else {
37
39
  log.error(e);
38
40
  }
41
+ setError(true);
39
42
  }
40
43
  finally {
41
44
  unlock();
@@ -46,9 +49,10 @@ export function usePreviewTracks(options, onError) {
46
49
  localTracks.forEach((track) => {
47
50
  track.stop();
48
51
  });
52
+ setError(false);
49
53
  };
50
54
  }, [JSON.stringify(options), onError, trackLock]);
51
- return tracks;
55
+ return { tracks, error };
52
56
  }
53
57
  /** @public */
54
58
  export function usePreviewDevice(enabled, deviceId, kind) {
@@ -185,7 +189,7 @@ export function PreJoin(_a) {
185
189
  saveUsername(scUserContext.user.username);
186
190
  }
187
191
  }, [username, saveUsername, scUserContext.user]);
188
- const tracks = usePreviewTracks({
192
+ const { tracks, error } = usePreviewTracks({
189
193
  audio: audioEnabled ? { deviceId: initialUserChoices.audioDeviceId } : false,
190
194
  video: videoEnabled ? { deviceId: initialUserChoices.videoDeviceId } : false
191
195
  }, onError);
@@ -216,7 +220,9 @@ export function PreJoin(_a) {
216
220
  return onValidate(values);
217
221
  }
218
222
  else {
219
- return values.username !== '';
223
+ return Boolean(values.username !== '' &&
224
+ ((values.audioEnabled && values.audioDeviceId) || !values.audioEnabled) &&
225
+ ((values.videoEnabled && values.videoDeviceId) || !values.videoEnabled));
220
226
  }
221
227
  }, [onValidate]);
222
228
  useEffect(() => {
@@ -241,5 +247,5 @@ export function PreJoin(_a) {
241
247
  log.warn('Validation failed with: ', userChoices);
242
248
  }
243
249
  }
244
- return (_jsxs("div", Object.assign({ className: "lk-prejoin" }, htmlProps, { children: [_jsxs("div", Object.assign({ className: "lk-video-container" }, { children: [videoTrack && _jsx("video", { ref: videoEl, width: "1280", height: "720", "data-lk-facing-mode": facingMode }), (!videoTrack || !videoEnabled) && (_jsx("div", Object.assign({ className: "lk-camera-off-note" }, { children: _jsx(ParticipantTileAvatar, { user: scUserContext.user }) })))] })), _jsxs("div", Object.assign({ className: "lk-button-group-container" }, { children: [_jsxs("div", Object.assign({ className: "lk-button-group audio" }, { children: [_jsx(TrackToggle, Object.assign({ disabled: !canUseAudio, initialState: audioEnabled, source: Track.Source.Microphone, onChange: (enabled) => setAudioEnabled(enabled) }, { children: micLabel })), _jsx("div", Object.assign({ className: "lk-button-group-menu" }, { children: _jsx(MediaDeviceMenu, { initialSelection: audioDeviceId, kind: "audioinput", disabled: !audioTrack || !canUseAudio, tracks: { audioinput: audioTrack }, onActiveDeviceChange: (_, id) => setAudioDeviceId(id) }) }))] })), _jsxs("div", Object.assign({ className: "lk-button-group video" }, { children: [_jsx(TrackToggle, Object.assign({ disabled: !canUseVideo, initialState: videoEnabled, source: Track.Source.Camera, onChange: (enabled) => setVideoEnabled(enabled) }, { children: camLabel })), _jsx("div", Object.assign({ className: "lk-button-group-menu" }, { children: _jsx(MediaDeviceMenu, { initialSelection: videoDeviceId, kind: "videoinput", disabled: !videoTrack || !canUseVideo, tracks: { videoinput: videoTrack }, onActiveDeviceChange: (_, id) => setVideoDeviceId(id) }) }))] }))] })), _jsx("form", Object.assign({ className: "lk-username-container" }, { children: _jsx("button", Object.assign({ className: "lk-button lk-join-button", type: "submit", onClick: handleSubmit, disabled: !isValid }, { children: joinLabel })) })), debug && (_jsxs(_Fragment, { children: [_jsx("strong", { children: "User Choices:" }), _jsxs("ul", Object.assign({ className: "lk-list", style: { overflow: 'hidden', maxWidth: '15rem' } }, { children: [_jsxs("li", { children: ["Username: ", `${userChoices.username}`] }), _jsxs("li", { children: ["Video Enabled: ", `${userChoices.videoEnabled}`] }), _jsxs("li", { children: ["Audio Enabled: ", `${userChoices.audioEnabled}`] }), _jsxs("li", { children: ["Video Device: ", `${userChoices.videoDeviceId}`] }), _jsxs("li", { children: ["Audio Device: ", `${userChoices.audioDeviceId}`] })] }))] }))] })));
250
+ return (_jsxs("div", Object.assign({ className: "lk-prejoin" }, htmlProps, { children: [_jsxs("div", Object.assign({ className: "lk-video-container" }, { children: [videoTrack && _jsx("video", { ref: videoEl, width: "1280", height: "720", "data-lk-facing-mode": facingMode }), (!videoTrack || !videoEnabled) && (_jsx("div", Object.assign({ className: "lk-camera-off-note" }, { children: _jsx(ParticipantTileAvatar, { user: scUserContext.user }) })))] })), _jsxs("div", Object.assign({ className: "lk-button-group-container" }, { children: [_jsxs("div", Object.assign({ className: "lk-button-group audio" }, { children: [_jsx(TrackToggle, Object.assign({ disabled: !canUseAudio, initialState: audioEnabled, source: Track.Source.Microphone, onChange: (enabled) => setAudioEnabled(enabled) }, { children: micLabel })), _jsx("div", Object.assign({ className: "lk-button-group-menu" }, { children: _jsx(MediaDeviceMenu, { initialSelection: audioDeviceId, kind: "audioinput", disabled: !audioTrack || !canUseAudio || !audioEnabled, tracks: { audioinput: audioTrack }, onActiveDeviceChange: (_, id) => setAudioDeviceId(id) }) }))] })), _jsxs("div", Object.assign({ className: "lk-button-group video" }, { children: [_jsx(TrackToggle, Object.assign({ disabled: !canUseVideo, initialState: videoEnabled, source: Track.Source.Camera, onChange: (enabled) => setVideoEnabled(enabled) }, { children: camLabel })), _jsx("div", Object.assign({ className: "lk-button-group-menu" }, { children: _jsx(MediaDeviceMenu, { initialSelection: videoDeviceId, kind: "videoinput", disabled: !videoTrack || !canUseVideo || !videoEnabled, tracks: { videoinput: videoTrack }, onActiveDeviceChange: (_, id) => setVideoDeviceId(id) }) }))] }))] })), _jsx("form", Object.assign({ className: "lk-username-container" }, { children: _jsx("button", Object.assign({ className: "lk-button lk-join-button", type: "submit", onClick: handleSubmit, disabled: !isValid || error }, { children: joinLabel })) })), debug && (_jsxs(_Fragment, { children: [_jsx("strong", { children: "User Choices:" }), _jsxs("ul", Object.assign({ className: "lk-list", style: { overflow: 'hidden', maxWidth: '15rem' } }, { children: [_jsxs("li", { children: ["Username: ", `${userChoices.username}`] }), _jsxs("li", { children: ["Video Enabled: ", `${userChoices.videoEnabled}`] }), _jsxs("li", { children: ["Audio Enabled: ", `${userChoices.audioEnabled}`] }), _jsxs("li", { children: ["Video Device: ", `${userChoices.videoDeviceId}`] }), _jsxs("li", { children: ["Audio Device: ", `${userChoices.audioDeviceId}`] })] }))] }))] })));
245
251
  }
@@ -34,8 +34,8 @@ export default function NavigationMenuDrawer(inProps) {
34
34
  props: inProps,
35
35
  name: PREFIX
36
36
  });
37
- const { className = null, showDrawerHeader = true, drawerHeaderContent = _jsx(DefaultHeaderContent, {}), drawerContent = _jsx(DefaultDrawerContent, {}), showDrawerFooterContent = true, drawerFooterContent = null, ScrollContainerProps = {}, CreateLiveStreamButtonComponentProps = {}, open, onClose } = props, rest = __rest(props, ["className", "showDrawerHeader", "drawerHeaderContent", "drawerContent", "showDrawerFooterContent", "drawerFooterContent", "ScrollContainerProps", "CreateLiveStreamButtonComponentProps", "open", "onClose"]);
37
+ const { className = null, showDrawerHeader = true, drawerHeaderContent = _jsx(DefaultHeaderContent, {}), drawerContent = _jsx(DefaultDrawerContent, {}), showDrawerFooterContent = true, drawerFooterContent = null, ScrollContainerProps = { hideTracksWhenNotNeeded: true }, CreateLiveStreamButtonComponentProps = {}, open, onClose } = props, rest = __rest(props, ["className", "showDrawerHeader", "drawerHeaderContent", "drawerContent", "showDrawerFooterContent", "drawerFooterContent", "ScrollContainerProps", "CreateLiveStreamButtonComponentProps", "open", "onClose"]);
38
38
  const scUserContext = useSCUser();
39
- const canCreateLiveStream = useMemo(() => { var _a, _b; return (_b = (_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.permission) === null || _b === void 0 ? void 0 : _b.create_livestream; }, [(_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.permission]);
40
- return (_jsxs(Root, Object.assign({ anchor: "left", className: classNames(classes.root, className), open: open, onClose: onClose }, rest, { children: [showDrawerHeader && (_jsxs(_Fragment, { children: [_jsxs(Box, Object.assign({ className: classes.drawerHeader }, { children: [drawerHeaderContent, _jsx(IconButton, Object.assign({ className: classes.drawerHeaderAction, onClick: onClose }, { children: _jsx(Icon, { children: "close" }) }))] })), _jsx(Divider, {})] })), _jsx(ScrollContainer, Object.assign({}, ScrollContainerProps, { children: _jsx(List, Object.assign({ className: classes.drawerContent, onClick: onClose }, { children: drawerContent })) })), showDrawerFooterContent && (_jsx(_Fragment, { children: _jsx(Box, Object.assign({ className: classes.drawerFooter }, { children: drawerFooterContent ? (drawerFooterContent) : (_jsxs(_Fragment, { children: [canCreateLiveStream && _jsx(Divider, {}), _jsx(Box, Object.assign({ className: classes.drawerFooterLiveStream }, { children: _jsx(CreateLiveStreamButton, Object.assign({ color: "primary", className: classes.drawerFooterLiveStreamButton, fullWidth: true }, CreateLiveStreamButtonComponentProps)) }))] })) })) }))] })));
39
+ const canCreateLiveStream = useMemo(() => { var _a, _b; return (_b = (_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.permission) === null || _b === void 0 ? void 0 : _b.create_live_stream; }, [(_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.permission]);
40
+ return (_jsxs(Root, Object.assign({ anchor: "left", className: classNames(classes.root, className), open: open, onClose: onClose }, rest, { children: [showDrawerHeader && (_jsxs(_Fragment, { children: [_jsxs(Box, Object.assign({ className: classes.drawerHeader }, { children: [drawerHeaderContent, _jsx(IconButton, Object.assign({ className: classes.drawerHeaderAction, onClick: onClose }, { children: _jsx(Icon, { children: "close" }) }))] })), _jsx(Divider, {})] })), _jsx(ScrollContainer, Object.assign({}, ScrollContainerProps, { children: _jsx(List, Object.assign({ className: classes.drawerContent, onClick: onClose }, { children: drawerContent })) })), showDrawerFooterContent && (_jsx(_Fragment, { children: _jsx(Box, Object.assign({ className: classes.drawerFooter }, { children: drawerFooterContent ? (drawerFooterContent) : (_jsx(Box, Object.assign({ className: classes.drawerFooterLiveStream }, { children: _jsx(CreateLiveStreamButton, Object.assign({ color: "primary", className: classes.drawerFooterLiveStreamButton, fullWidth: true }, CreateLiveStreamButtonComponentProps)) }))) })) }))] })));
41
41
  }
@@ -77,5 +77,5 @@ export default function OnBoardingActionsButton(inProps) {
77
77
  ];
78
78
  }
79
79
  };
80
- return (_jsxs(_Fragment, { children: [_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { onClick: handleOpen }, { children: _jsx(Icon, { children: "more_vert" }) })), isMobile ? (_jsx(SwipeableDrawerRoot, Object.assign({ onClick: () => setAnchorEl(null), className: classes.drawerRoot, anchor: "bottom", open: Boolean(anchorEl), onClose: handleClose, onOpen: handleOpen, PaperProps: { className: classes.paper }, disableSwipeToOpen: true }, { children: _jsx(List, { children: renderList() }) }))) : (_jsx(MenuRoot, Object.assign({ onClick: () => setAnchorEl(null), className: classes.menuRoot, anchorEl: anchorEl, open: Boolean(anchorEl), onClose: handleClose, PaperProps: { className: classes.paper } }, { children: renderList() })))] }));
80
+ return (_jsxs(_Fragment, { children: [_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { onClick: handleOpen }, { children: _jsx(Icon, { children: "more_vert" }) })), Boolean(anchorEl) && (_jsx(_Fragment, { children: isMobile ? (_jsx(SwipeableDrawerRoot, Object.assign({ onClick: () => setAnchorEl(null), className: classes.drawerRoot, anchor: "bottom", open: true, onClose: handleClose, onOpen: handleOpen, PaperProps: { className: classes.paper }, disableSwipeToOpen: true }, { children: _jsx(List, { children: renderList() }) }))) : (_jsx(MenuRoot, Object.assign({ onClick: () => setAnchorEl(null), className: classes.menuRoot, anchorEl: anchorEl, open: true, onClose: handleClose, PaperProps: { className: classes.paper } }, { children: renderList() }))) }))] }));
81
81
  }
@@ -122,5 +122,5 @@ export default function PrivateMessageSettingsIconButton(inProps) {
122
122
  ];
123
123
  }
124
124
  };
125
- return (_jsxs(_Fragment, { children: [_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { onClick: handleOpen }, { children: _jsx(Icon, { children: "more_vert" }) })), isMobile ? (_jsx(SwipeableDrawerRoot, Object.assign({ className: classes.drawerRoot, anchor: "bottom", open: Boolean(anchorEl), onClose: handleClose, onOpen: handleOpen, PaperProps: { className: classes.paper }, disableSwipeToOpen: true }, { children: _jsx(List, { children: renderList() }) }))) : (_jsx(MenuRoot, Object.assign({ className: classes.menuRoot, anchorEl: anchorEl, open: Boolean(anchorEl), onClose: handleClose, PaperProps: { className: classes.paper } }, { children: renderList() }))), openConfirmDialog && (_jsx(ConfirmDialog, { open: openConfirmDialog, title: _jsx(FormattedMessage, { id: "ui.privateMessageSettingsIconButton.dialog.msg", defaultMessage: "ui.privateMessageSettingsIconButton.dialog.msg" }), btnConfirm: _jsx(FormattedMessage, { id: "ui.privateMessageSettingsIconButton.dialog.confirm", defaultMessage: "ui.privateMessageSettingsIconButton.dialog.confirm" }), onConfirm: handleDeleteThread, onClose: handleCloseDialog }))] }));
125
+ return (_jsxs(_Fragment, { children: [_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { onClick: handleOpen }, { children: _jsx(Icon, { children: "more_vert" }) })), Boolean(anchorEl) && (_jsx(_Fragment, { children: isMobile ? (_jsx(SwipeableDrawerRoot, Object.assign({ className: classes.drawerRoot, anchor: "bottom", open: true, onClose: handleClose, onOpen: handleOpen, PaperProps: { className: classes.paper }, disableSwipeToOpen: true }, { children: _jsx(List, { children: renderList() }) }))) : (_jsx(MenuRoot, Object.assign({ className: classes.menuRoot, anchorEl: anchorEl, open: true, onClose: handleClose, PaperProps: { className: classes.paper } }, { children: renderList() }))) })), openConfirmDialog && (_jsx(ConfirmDialog, { open: openConfirmDialog, title: _jsx(FormattedMessage, { id: "ui.privateMessageSettingsIconButton.dialog.msg", defaultMessage: "ui.privateMessageSettingsIconButton.dialog.msg" }), btnConfirm: _jsx(FormattedMessage, { id: "ui.privateMessageSettingsIconButton.dialog.confirm", defaultMessage: "ui.privateMessageSettingsIconButton.dialog.confirm" }), onConfirm: handleDeleteThread, onClose: handleCloseDialog }))] }));
126
126
  }
@@ -186,5 +186,5 @@ export default function UserActionIconButton(inProps) {
186
186
  ];
187
187
  }
188
188
  };
189
- return (_jsxs(_Fragment, { children: [_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { onClick: handleOpen }, { children: _jsx(Icon, { children: "more_vert" }) })), isMobile ? (_jsx(SwipeableDrawerRoot, Object.assign({ className: classes.drawerRoot, anchor: "bottom", open: Boolean(anchorEl), onClose: handleClose, onOpen: handleOpen, disableSwipeToOpen: true }, { children: _jsx(List, { children: renderList() }) }))) : (_jsx(MenuRoot, Object.assign({ className: classes.menuRoot, anchorEl: anchorEl, open: Boolean(anchorEl), onClose: handleClose }, { children: renderList() }))), _jsx(UserInfoDialog, { userId: userId, user: scUser, open: infoOpen, onClose: handleInfoClose }), openHideDialog && (_jsx(ConfirmDialog, { open: openHideDialog, isUpdating: isHiddenLoading, TransitionComponent: Transition, keepMounted: true, title: hidden ? (_jsx(FormattedMessage, { defaultMessage: "ui.userActionIconButton.show", id: "ui.userActionIconButton.show" })) : (_jsx(FormattedMessage, { defaultMessage: "ui.userActionIconButton.hide", id: "ui.userActionIconButton.hide" })), content: hidden ? (_jsx(FormattedMessage, { defaultMessage: "ui.userActionIconButton.dialogShowAction", id: "ui.userActionIconButton.dialogShowAction" })) : (_jsx(FormattedMessage, { defaultMessage: "ui.userActionIconButton.dialogHideAction", id: "ui.userActionIconButton.dialogHideAction" })), onConfirm: handleHideToggle, onClose: () => setOpenHideDialog(false) }))] }));
189
+ return (_jsxs(_Fragment, { children: [_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { onClick: handleOpen }, { children: _jsx(Icon, { children: "more_vert" }) })), Boolean(anchorEl) && (_jsx(_Fragment, { children: isMobile ? (_jsx(SwipeableDrawerRoot, Object.assign({ className: classes.drawerRoot, anchor: "bottom", open: true, onClose: handleClose, onOpen: handleOpen, disableSwipeToOpen: true }, { children: _jsx(List, { children: renderList() }) }))) : (_jsx(MenuRoot, Object.assign({ className: classes.menuRoot, anchorEl: anchorEl, open: true, onClose: handleClose }, { children: renderList() }))) })), _jsx(UserInfoDialog, { userId: userId, user: scUser, open: infoOpen, onClose: handleInfoClose }), openHideDialog && (_jsx(ConfirmDialog, { open: openHideDialog, isUpdating: isHiddenLoading, TransitionComponent: Transition, keepMounted: true, title: hidden ? (_jsx(FormattedMessage, { defaultMessage: "ui.userActionIconButton.show", id: "ui.userActionIconButton.show" })) : (_jsx(FormattedMessage, { defaultMessage: "ui.userActionIconButton.hide", id: "ui.userActionIconButton.hide" })), content: hidden ? (_jsx(FormattedMessage, { defaultMessage: "ui.userActionIconButton.dialogShowAction", id: "ui.userActionIconButton.dialogShowAction" })) : (_jsx(FormattedMessage, { defaultMessage: "ui.userActionIconButton.dialogHideAction", id: "ui.userActionIconButton.dialogHideAction" })), onConfirm: handleHideToggle, onClose: () => setOpenHideDialog(false) }))] }));
190
190
  }
@@ -111,5 +111,5 @@ export default function UserProfileHeader(inProps) {
111
111
  : { background: `url('${scPreferences.preferences[SCPreferences.IMAGES_USER_DEFAULT_COVER].value}') center / cover` }));
112
112
  const realName = (isMe && scUserContext.user.real_name) || scUser.real_name;
113
113
  const hasBadge = scUser && scUser.community_badge;
114
- return (_jsxs(Root, Object.assign({ id: id, className: classNames(classes.root, className) }, rest, { children: [_jsxs(Paper, Object.assign({ style: _backgroundCover, classes: { root: classes.cover } }, { children: [_jsx(Box, Object.assign({ className: classes.avatar }, { children: _jsx(UserAvatar, Object.assign({ hide: !hasBadge }, { children: _jsx("img", { src: scUser.avatar ? scUser.avatar : '' }) })) })), isMe && (_jsxs(_Fragment, { children: [_jsx(ChangePicture, Object.assign({ iconButton: true, onChange: handleChangeAvatar, className: classes.changePicture }, ChangePictureProps)), _jsx("div", Object.assign({ className: classes.changeCover }, { children: _jsx(ChangeCover, Object.assign({ onChange: handleChangeCover }, ChangeCoverProps)) }))] }))] })), _jsxs(Box, Object.assign({ className: classes.infOpsSection }, { children: [_jsxs(Box, Object.assign({ className: classes.info }, { children: [_jsxs(Typography, Object.assign({ variant: "h5", className: classes.username }, { children: ["@", isMe ? scUserContext.user.username : scUser.username] })), realName && (_jsx(Typography, Object.assign({ variant: "subtitle1", className: classes.realname }, { children: realName }))), scUser.bio && (_jsx(Typography, Object.assign({ variant: "subtitle2", className: classes.bio }, { children: scUser.bio }))), scUser.website && (_jsx(Link, Object.assign({ className: classes.website, target: "blank", to: scUser.website }, { children: _jsx(Typography, Object.assign({ variant: "body2" }, { children: scUser.website })) })))] })), actions && actions] }))] })));
114
+ return (_jsxs(Root, Object.assign({ id: id, className: classNames(classes.root, className) }, rest, { children: [_jsxs(Paper, Object.assign({ style: _backgroundCover, classes: { root: classes.cover } }, { children: [_jsx(Box, Object.assign({ className: classes.avatar }, { children: _jsx(UserAvatar, Object.assign({ hide: !hasBadge }, { children: _jsx("img", { src: scUser.avatar ? scUser.avatar : '' }) })) })), isMe && (_jsxs(_Fragment, { children: [_jsx(ChangePicture, Object.assign({ iconButton: true, onChange: handleChangeAvatar, className: classes.changePicture }, ChangePictureProps)), _jsx("div", Object.assign({ className: classes.changeCover }, { children: _jsx(ChangeCover, Object.assign({ onChange: handleChangeCover }, ChangeCoverProps)) }))] }))] })), _jsxs(Box, Object.assign({ className: classes.infOpsSection }, { children: [_jsxs(Box, Object.assign({ className: classes.info }, { children: [_jsxs(Typography, Object.assign({ variant: "h5", className: classes.username }, { children: ["@", isMe ? scUserContext.user.username : scUser.username] })), realName && (_jsx(Typography, Object.assign({ variant: "subtitle1", className: classes.realname }, { children: realName }))), scUser.bio && (_jsx(Typography, Object.assign({ variant: "subtitle2", className: classes.bio }, { children: scUser.bio }))), scUser.website && (_jsx(Link, Object.assign({ className: classes.website, target: "_blank", to: scUser.website }, { children: _jsx(Typography, Object.assign({ variant: "body2" }, { children: scUser.website })) })))] })), actions && actions] }))] })));
115
115
  }