@selfcommunity/react-ui 0.8.0-live.41 → 0.8.0-live.42

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/CreateLiveStreamDialog/CreateLiveStreamDialog.js +1 -4
  2. package/lib/cjs/components/CreateLiveStreamDialog/LiveStreamSelector/LiveStreamSelector.js +14 -11
  3. package/lib/cjs/components/LiveStreamForm/LiveStreamForm.js +32 -10
  4. package/lib/cjs/components/LiveStreamForm/types.d.ts +3 -2
  5. package/lib/cjs/components/LiveStreamRoom/LiveStreamRoom.d.ts +7 -6
  6. package/lib/cjs/components/LiveStreamRoom/LiveStreamRoom.js +13 -8
  7. package/lib/cjs/components/NavigationMenuIconButton/NavigationMenuDrawer.js +19 -1
  8. package/lib/esm/components/CreateLiveStreamDialog/CreateLiveStreamDialog.js +1 -4
  9. package/lib/esm/components/CreateLiveStreamDialog/LiveStreamSelector/LiveStreamSelector.js +14 -11
  10. package/lib/esm/components/LiveStreamForm/LiveStreamForm.js +33 -11
  11. package/lib/esm/components/LiveStreamForm/types.d.ts +3 -2
  12. package/lib/esm/components/LiveStreamRoom/LiveStreamRoom.d.ts +7 -6
  13. package/lib/esm/components/LiveStreamRoom/LiveStreamRoom.js +13 -8
  14. package/lib/esm/components/NavigationMenuIconButton/NavigationMenuDrawer.js +19 -1
  15. package/lib/umd/react-ui.js +1 -1
  16. package/package.json +7 -7
package/lib/cjs/components/CreateLiveStreamDialog/CreateLiveStreamDialog.js CHANGED
@@ -78,7 +78,6 @@ function CreateLiveStreamDialog(inProps) {
78
78
  preferences[SCPreferences.CONFIGURATIONS_LIVE_STREAM_ENABLED].value*/ [preferences, features]);
79
79
  const onlyStaffLiveStreamEnabled = (0, react_1.useMemo)(() => true /* preferences[SCPreferences.CONFIGURATIONS_LIVESTREAM_ONLY_STAFF_ENABLED].value */, [preferences]);
80
80
  const canCreateLiveStream = (0, react_1.useMemo)(() => true /* liveStreamEnabled && (scUserContext?.user?.permission?.create_livestream || (onlyStaffLiveStreamEnabled && UserUtils.isStaff(scUserContext.user)))*/, [scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user, onlyStaffLiveStreamEnabled]);
81
- console.log(canCreateLiveStream);
82
81
  const eventsEnabled = (0, react_1.useMemo)(() => preferences &&
83
82
  features &&
84
83
  features.includes(types_1.SCFeatureName.TAGGING) &&
@@ -86,9 +85,7 @@ function CreateLiveStreamDialog(inProps) {
86
85
  preferences[react_core_1.SCPreferences.CONFIGURATIONS_EVENTS_ENABLED].value, [preferences, features]);
87
86
  const onlyStaffEventEnabled = (0, react_1.useMemo)(() => preferences[react_core_1.SCPreferences.CONFIGURATIONS_EVENTS_ONLY_STAFF_ENABLED].value, [preferences]);
88
87
  const canCreateEvent = (0, react_1.useMemo)(() => { var _a, _b; return eventsEnabled && (((_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_event) || true || (onlyStaffEventEnabled && react_core_1.UserUtils.isStaff(scUserContext.user))); }, [scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user, eventsEnabled, onlyStaffEventEnabled]);
89
- console.log(canCreateEvent);
90
88
  const canCreateLiveStreamEvent = (0, react_1.useMemo)(() => Boolean(canCreateLiveStream && canCreateEvent), [canCreateEvent, canCreateLiveStream]);
91
- console.log(canCreateLiveStreamEvent);
92
89
  // STATE
93
90
  const [step, setStep] = (0, react_1.useState)(canCreateLiveStreamEvent ? types_2.CreateLiveStreamStep.SELECT_TYPE : types_2.CreateLiveStreamStep.CREATE_LIVE);
94
91
  const [liveType, setLiveType] = (0, react_1.useState)(canCreateLiveStreamEvent ? null : types_2.LiveStreamType.DIRECT_LIVE);
@@ -118,6 +115,6 @@ function CreateLiveStreamDialog(inProps) {
118
115
  /**
119
116
  * Renders root object
120
117
  */
121
- return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ DialogContentProps: { dividers: false }, maxWidth: 'md', title: (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.title, component: 'span' }, { children: [step === types_2.CreateLiveStreamStep.CREATE_LIVE && ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "text", onClick: handleBack, startIcon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "arrow_back" }) }, { children: "Back" }))), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ component: 'span' }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.createLivestreamDialog.title", defaultMessage: "ui.createLivestreamDialog.title" }) }))] })), fullWidth: true, open: open, onClose: onClose, className: (0, classnames_1.default)(classes.root, className), TransitionComponent: Transition, PaperProps: { elevation: 0 } }, rest, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.content }, { children: [step === types_2.CreateLiveStreamStep.SELECT_TYPE && ((0, jsx_runtime_1.jsx)(LiveStreamSelector_1.default, { liveSelected: liveType, onLiveSelected: handleLiveTypeSelected, onNext: handleLiveTypeSelectedNext })), step === types_2.CreateLiveStreamStep.CREATE_LIVE && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: liveType === types_2.LiveStreamType.EVENT_LIVE ? (0, jsx_runtime_1.jsx)(EventForm_1.default, { onSuccess: handleSubmit }) : (0, jsx_runtime_1.jsx)(LiveStreamForm_1.default, { onSuccess: handleSubmit }) }))] })) })));
118
+ return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ DialogContentProps: { dividers: false }, maxWidth: 'md', title: (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.title, component: 'span' }, { children: [Boolean(step === types_2.CreateLiveStreamStep.CREATE_LIVE && canCreateLiveStreamEvent) && ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "text", onClick: handleBack, startIcon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "arrow_back" }) }, { children: "Back" }))), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ component: 'span' }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.createLivestreamDialog.title", defaultMessage: "ui.createLivestreamDialog.title" }) }))] })), fullWidth: true, open: open, onClose: onClose, className: (0, classnames_1.default)(classes.root, className), TransitionComponent: Transition, PaperProps: { elevation: 0 } }, rest, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.content }, { children: [step === types_2.CreateLiveStreamStep.SELECT_TYPE && ((0, jsx_runtime_1.jsx)(LiveStreamSelector_1.default, { liveSelected: liveType, onLiveSelected: handleLiveTypeSelected, onNext: handleLiveTypeSelectedNext })), step === types_2.CreateLiveStreamStep.CREATE_LIVE && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: liveType === types_2.LiveStreamType.EVENT_LIVE ? (0, jsx_runtime_1.jsx)(EventForm_1.default, { onSuccess: handleSubmit }) : (0, jsx_runtime_1.jsx)(LiveStreamForm_1.default, { onSuccess: handleSubmit }) }))] })) })));
122
119
  }
123
120
  exports.default = CreateLiveStreamDialog;
package/lib/cjs/components/CreateLiveStreamDialog/LiveStreamSelector/LiveStreamSelector.js CHANGED
@@ -24,7 +24,10 @@ const Root = (0, styles_1.styled)(material_1.Container, {
24
24
  [`& .${classes.options}`]: {
25
25
  display: 'flex',
26
26
  justifyContent: 'center',
27
- alignItems: 'center'
27
+ alignItems: 'center',
28
+ '& > div': {
29
+ width: '310px'
30
+ }
28
31
  },
29
32
  [`& .${classes.actions}`]: {
30
33
  display: 'flex',
@@ -64,16 +67,16 @@ const OptionCard = (0, styles_1.styled)(material_1.Paper, {
64
67
  }
65
68
  }));
66
69
  const RadioIndicator = (0, styles_1.styled)(material_1.Radio, {
67
- shouldForwardProp: (prop) => prop !== 'selected'
70
+ // shouldForwardProp: (prop) => prop !== 'selected'
68
71
  })(({ theme, selected }) => ({
69
- width: 16,
70
- height: 16,
71
- borderRadius: '50%',
72
- border: `2px solid ${selected ? theme.palette.secondary.main : theme.palette.grey[300]}`,
73
- backgroundColor: selected ? theme.palette.secondary.main : 'transparent',
74
- transition: theme.transitions.create(['border-color', 'background-color'], {
75
- duration: theme.transitions.duration.shortest
76
- })
72
+ /* width: 16,
73
+ height: 16,
74
+ borderRadius: '50%',
75
+ border: `2px solid ${selected ? theme.palette.secondary.main : theme.palette.grey[300]}`,
76
+ backgroundColor: selected ? theme.palette.secondary.main : 'transparent',
77
+ transition: theme.transitions.create(['border-color', 'background-color'], {
78
+ duration: theme.transitions.duration.shortest
79
+ }) */
77
80
  }));
78
81
  const FeatureItem = (0, styles_1.styled)(material_1.Box)(({ theme }) => ({
79
82
  display: 'flex',
@@ -158,7 +161,7 @@ function LiveStreamSelector(inProps) {
158
161
  handleOptionSelect(index);
159
162
  e.preventDefault();
160
163
  }
161
- }, theme: undefined }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h6", component: "h2", sx: { fontWeight: 500 } }, { children: option.title })), (0, jsx_runtime_1.jsx)(RadioIndicator, { selected: selectedOption === option.type, theme: undefined })] }), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ component: "ul" }, { children: option.features.map((feature, featureIndex) => {
164
+ }, theme: undefined }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h6", component: "h2", sx: { fontWeight: 500 } }, { children: option.title })), (0, jsx_runtime_1.jsx)(material_1.Radio, { checked: selectedOption === option.type })] }), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ component: "ul" }, { children: option.features.map((feature, featureIndex) => {
162
165
  const _Icon = option.icons[featureIndex];
163
166
  return ((0, jsx_runtime_1.jsxs)(FeatureItem, Object.assign({ component: "li" }, { children: [_Icon, (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2", color: "text.secondary", sx: { flex: 1 } }, { children: feature }))] }), featureIndex));
164
167
  }) }))] }), index))) })), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.actions }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ disabled: !selectedOption, variant: "contained", onClick: handleNext, color: "secondary" }, { children: "Next" })) }))] })));
package/lib/cjs/components/LiveStreamForm/LiveStreamForm.js CHANGED
@@ -15,10 +15,12 @@ const react_intl_1 = require("react-intl");
15
15
  const Errors_1 = require("../../constants/Errors");
16
16
  const LiveStream_1 = require("../../constants/LiveStream");
17
17
  const constants_1 = require("./constants");
18
+ const UploadEventCover_1 = tslib_1.__importDefault(require("../EventForm/UploadEventCover"));
18
19
  const classes = {
19
20
  root: `${constants_1.PREFIX}-root`,
20
21
  form: `${constants_1.PREFIX}-form`,
21
22
  title: `${constants_1.PREFIX}-title`,
23
+ cover: `${constants_1.PREFIX}-cover`,
22
24
  slug: `${constants_1.PREFIX}-slug`,
23
25
  description: `${constants_1.PREFIX}-description`,
24
26
  content: `${constants_1.PREFIX}-content`,
@@ -87,7 +89,9 @@ function LiveStreamForm(inProps) {
87
89
  title: (liveStream === null || liveStream === void 0 ? void 0 : liveStream.title) || '',
88
90
  description: (liveStream === null || liveStream === void 0 ? void 0 : liveStream.description) || '',
89
91
  slug: (liveStream === null || liveStream === void 0 ? void 0 : liveStream.slug) || '',
92
+ settings: (liveStream === null || liveStream === void 0 ? void 0 : liveStream.settings) || {},
90
93
  cover: (liveStream === null || liveStream === void 0 ? void 0 : liveStream.cover) || '',
94
+ coverFile: (liveStream === null || liveStream === void 0 ? void 0 : liveStream.cover) || '',
91
95
  isSubmitting: false
92
96
  };
93
97
  // STATE
@@ -97,9 +101,27 @@ function LiveStreamForm(inProps) {
97
101
  const scPreferences = (0, react_core_1.useSCPreferences)();
98
102
  const privateEnabled = (0, react_1.useMemo)(() => scPreferences.preferences[react_core_1.SCPreferences.CONFIGURATIONS_EVENTS_PRIVATE_ENABLED].value, [scPreferences.preferences]);
99
103
  const visibilityEnabled = (0, react_1.useMemo)(() => scPreferences.preferences[react_core_1.SCPreferences.CONFIGURATIONS_EVENTS_VISIBILITY_ENABLED].value, [scPreferences.preferences]);
104
+ const _backgroundCover = Object.assign({}, (field.cover
105
+ ? { background: `url('${field.cover}') center / cover` }
106
+ : { background: `url('${scPreferences.preferences[react_core_1.SCPreferences.IMAGES_USER_DEFAULT_COVER].value}') center / cover` }));
107
+ const handleChangeCover = (0, react_1.useCallback)((cover) => {
108
+ setField((prev) => (Object.assign(Object.assign({}, prev), { ['coverFile']: cover })));
109
+ const reader = new FileReader();
110
+ reader.onloadend = () => {
111
+ setField((prev) => (Object.assign(Object.assign({}, prev), { ['cover']: reader.result })));
112
+ };
113
+ reader.readAsDataURL(cover);
114
+ if (error.coverError) {
115
+ delete error.coverError;
116
+ setError(error);
117
+ }
118
+ }, [error]);
100
119
  const handleSubmit = (0, react_1.useCallback)(() => {
101
120
  setField((prev) => (Object.assign(Object.assign({}, prev), { ['isSubmitting']: true })));
102
121
  const formData = new FormData();
122
+ if (field.coverFile) {
123
+ formData.append('cover', field.coverFile);
124
+ }
103
125
  if (visibilityEnabled) {
104
126
  formData.append('visible', 'true');
105
127
  }
@@ -142,15 +164,15 @@ function LiveStreamForm(inProps) {
142
164
  /**
143
165
  * Renders root object
144
166
  */
145
- return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: (0, jsx_runtime_1.jsxs)(material_1.FormGroup, Object.assign({ className: classes.form }, { children: [(0, jsx_runtime_1.jsx)(material_1.TextField, { required: true, className: classes.title, placeholder: `${intl.formatMessage(messages.title)}`, margin: "normal", value: field.title, name: "title", onChange: handleChange, InputProps: {
146
- endAdornment: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: LiveStream_1.LIVE_STREAM_TITLE_MAX_LENGTH - field.title.length }))
147
- }, error: Boolean(field.title.length > LiveStream_1.LIVE_STREAM_TITLE_MAX_LENGTH) || Boolean(error['titleError']), helperText: field.title.length > LiveStream_1.LIVE_STREAM_TITLE_MAX_LENGTH ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamForm.title.error.maxLength", defaultMessage: "ui.liveStreamForm.title.error.maxLength" })) : error['titleError'] ? (error['titleError']) : null }), (0, jsx_runtime_1.jsx)(material_1.TextField, { required: true, className: classes.slug, placeholder: `${intl.formatMessage(messages.slug)}`, margin: "normal", value: field.slug, name: "slug", onChange: handleChange, InputProps: {
148
- endAdornment: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: LiveStream_1.LIVE_STREAM_SLUG_MAX_LENGTH - field.title.length }))
149
- }, error: Boolean(field.slug.length > LiveStream_1.LIVE_STREAM_SLUG_MAX_LENGTH) || Boolean(error['nameError']), helperText: field.title.length > LiveStream_1.LIVE_STREAM_SLUG_MAX_LENGTH ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamForm.slug.error.maxLength", defaultMessage: "ui.liveStreamForm.slug.error.maxLength" })) : error['nameError'] ? (error['nameError']) : null }), (0, jsx_runtime_1.jsx)(material_1.TextField, { multiline: true, rows: 4, className: classes.description, placeholder: `${intl.formatMessage(messages.description)}`, margin: "normal", value: field.description, name: "description", onChange: handleChange, InputProps: {
150
- endAdornment: ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: ((_a = field.description) === null || _a === void 0 ? void 0 : _a.length) ? LiveStream_1.LIVE_STREAM_DESCRIPTION_MAX_LENGTH - field.description.length : LiveStream_1.LIVE_STREAM_DESCRIPTION_MAX_LENGTH })))
151
- }, error: Boolean(((_b = field.description) === null || _b === void 0 ? void 0 : _b.length) > LiveStream_1.LIVE_STREAM_DESCRIPTION_MAX_LENGTH), helperText: ((_c = field.description) === null || _c === void 0 ? void 0 : _c.length) > LiveStream_1.LIVE_STREAM_DESCRIPTION_MAX_LENGTH ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamForm.description.error.maxLength", defaultMessage: "ui.liveStreamForm.description.error.maxLength" })) : null }), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.actions }, { children: (0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ loading: field.isSubmitting, disabled: !field.title ||
152
- Object.keys(error).length !== 0 ||
153
- field.title.length > LiveStream_1.LIVE_STREAM_TITLE_MAX_LENGTH ||
154
- field.description.length > LiveStream_1.LIVE_STREAM_DESCRIPTION_MAX_LENGTH, variant: "contained", onClick: handleSubmit, color: "secondary" }, { children: liveStream ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamForm.button.edit", defaultMessage: "ui.liveStreamForm.button.edit" })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamForm.button.create", defaultMessage: "ui.liveStreamForm.button.create" })) })) }))] })) })));
167
+ return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: [(0, jsx_runtime_1.jsx)(material_1.Paper, Object.assign({ style: _backgroundCover, classes: { root: classes.cover } }, { children: (0, jsx_runtime_1.jsx)(UploadEventCover_1.default, { isCreationMode: true, onChange: handleChangeCover }) })), (0, jsx_runtime_1.jsxs)(material_1.FormGroup, Object.assign({ className: classes.form }, { children: [(0, jsx_runtime_1.jsx)(material_1.TextField, { required: true, className: classes.title, placeholder: `${intl.formatMessage(messages.title)}`, margin: "normal", value: field.title, name: "title", onChange: handleChange, InputProps: {
168
+ endAdornment: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: LiveStream_1.LIVE_STREAM_TITLE_MAX_LENGTH - field.title.length }))
169
+ }, error: Boolean(field.title.length > LiveStream_1.LIVE_STREAM_TITLE_MAX_LENGTH) || Boolean(error['titleError']), helperText: field.title.length > LiveStream_1.LIVE_STREAM_TITLE_MAX_LENGTH ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamForm.title.error.maxLength", defaultMessage: "ui.liveStreamForm.title.error.maxLength" })) : error['titleError'] ? (error['titleError']) : null }), (0, jsx_runtime_1.jsx)(material_1.TextField, { required: true, className: classes.slug, placeholder: `${intl.formatMessage(messages.slug)}`, margin: "normal", value: field.slug, name: "slug", onChange: handleChange, InputProps: {
170
+ endAdornment: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: LiveStream_1.LIVE_STREAM_SLUG_MAX_LENGTH - field.title.length }))
171
+ }, error: Boolean(field.slug.length > LiveStream_1.LIVE_STREAM_SLUG_MAX_LENGTH) || Boolean(error['nameError']), helperText: field.title.length > LiveStream_1.LIVE_STREAM_SLUG_MAX_LENGTH ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamForm.slug.error.maxLength", defaultMessage: "ui.liveStreamForm.slug.error.maxLength" })) : error['nameError'] ? (error['nameError']) : null }), (0, jsx_runtime_1.jsx)(material_1.TextField, { multiline: true, rows: 4, className: classes.description, placeholder: `${intl.formatMessage(messages.description)}`, margin: "normal", value: field.description, name: "description", onChange: handleChange, InputProps: {
172
+ endAdornment: ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: ((_a = field.description) === null || _a === void 0 ? void 0 : _a.length) ? LiveStream_1.LIVE_STREAM_DESCRIPTION_MAX_LENGTH - field.description.length : LiveStream_1.LIVE_STREAM_DESCRIPTION_MAX_LENGTH })))
173
+ }, error: Boolean(((_b = field.description) === null || _b === void 0 ? void 0 : _b.length) > LiveStream_1.LIVE_STREAM_DESCRIPTION_MAX_LENGTH), helperText: ((_c = field.description) === null || _c === void 0 ? void 0 : _c.length) > LiveStream_1.LIVE_STREAM_DESCRIPTION_MAX_LENGTH ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamForm.description.error.maxLength", defaultMessage: "ui.liveStreamForm.description.error.maxLength" })) : null }), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.actions }, { children: (0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ loading: field.isSubmitting, disabled: !field.title ||
174
+ Object.keys(error).length !== 0 ||
175
+ field.title.length > LiveStream_1.LIVE_STREAM_TITLE_MAX_LENGTH ||
176
+ field.description.length > LiveStream_1.LIVE_STREAM_DESCRIPTION_MAX_LENGTH, variant: "contained", onClick: handleSubmit, color: "secondary" }, { children: liveStream ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamForm.button.edit", defaultMessage: "ui.liveStreamForm.button.edit" })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamForm.button.create", defaultMessage: "ui.liveStreamForm.button.create" })) })) }))] }))] })));
155
177
  }
156
178
  exports.default = LiveStreamForm;
package/lib/cjs/components/LiveStreamForm/types.d.ts CHANGED
@@ -1,9 +1,10 @@
1
- export type InitialFieldState = Geolocation & {
1
+ export type InitialFieldState = {
2
2
  title: string;
3
3
  description: string;
4
4
  slug?: string;
5
5
  settings?: Record<string, any>;
6
- cover?: string;
6
+ cover?: string | ArrayBuffer;
7
+ coverFile?: string | Blob;
7
8
  isSubmitting: boolean;
8
9
  };
9
10
  export type FieldStateKeys = keyof InitialFieldState;
package/lib/cjs/components/LiveStreamRoom/LiveStreamRoom.d.ts CHANGED
@@ -36,12 +36,13 @@ export interface LiveStreamRoomProps extends BoxProps {
36
36
 
37
37
  |Rule Name|Global class|Description|
38
38
  |---|---|---|
39
- |root|.SCLiveStreamForm-root|Styles applied to the root element.|
40
- |title|.SCLiveStreamForm-title|Styles applied to the title element.|
41
- |description|.SCLiveStreamForm-description|Styles applied to the description element.|
42
- |content|.SCLiveStreamForm-content|Styles applied to the content.|
43
- |prejoin|.SCLiveStreamForm-prejoin|Styles applied to the prejoin.|
44
- |error|.SCLiveStreamForm-error|Styles applied to the error elements.|
39
+ |root|.SCLiveStreamRoom-root|Styles applied to the root element.|
40
+ |title|.SCLiveStreamRoom-title|Styles applied to the title element.|
41
+ |description|.SCLiveStreamRoom-description|Styles applied to the description element.|
42
+ |content|.SCLiveStreamRoom-content|Styles applied to the content.|
43
+ |prejoin|.SCLiveStreamRoom-prejoin|Styles applied to the prejoin.|
44
+ |conference|.SCLiveStreamRoom-conference|Styles applied to the conference.|
45
+ |error|.SCLiveStreamRoom-error|Styles applied to the error elements.|
45
46
 
46
47
  * @param inProps
47
48
  */
package/lib/cjs/components/LiveStreamRoom/LiveStreamRoom.js CHANGED
@@ -20,6 +20,7 @@ const classes = {
20
20
  title: `${constants_1.PREFIX}-title`,
21
21
  description: `${constants_1.PREFIX}-description`,
22
22
  preJoin: `${constants_1.PREFIX}-prejoin`,
23
+ conference: `${constants_1.PREFIX}-prejoin`,
23
24
  error: `${constants_1.PREFIX}-error`
24
25
  };
25
26
  const Root = (0, styles_1.styled)(material_1.Box, {
@@ -41,12 +42,13 @@ const Root = (0, styles_1.styled)(material_1.Box, {
41
42
 
42
43
  |Rule Name|Global class|Description|
43
44
  |---|---|---|
44
- |root|.SCLiveStreamForm-root|Styles applied to the root element.|
45
- |title|.SCLiveStreamForm-title|Styles applied to the title element.|
46
- |description|.SCLiveStreamForm-description|Styles applied to the description element.|
47
- |content|.SCLiveStreamForm-content|Styles applied to the content.|
48
- |prejoin|.SCLiveStreamForm-prejoin|Styles applied to the prejoin.|
49
- |error|.SCLiveStreamForm-error|Styles applied to the error elements.|
45
+ |root|.SCLiveStreamRoom-root|Styles applied to the root element.|
46
+ |title|.SCLiveStreamRoom-title|Styles applied to the title element.|
47
+ |description|.SCLiveStreamRoom-description|Styles applied to the description element.|
48
+ |content|.SCLiveStreamRoom-content|Styles applied to the content.|
49
+ |prejoin|.SCLiveStreamRoom-prejoin|Styles applied to the prejoin.|
50
+ |conference|.SCLiveStreamRoom-conference|Styles applied to the conference.|
51
+ |error|.SCLiveStreamRoom-error|Styles applied to the error elements.|
50
52
 
51
53
  * @param inProps
52
54
  */
@@ -65,6 +67,7 @@ function LiveStreamRoom(inProps) {
65
67
  const intl = (0, react_intl_1.useIntl)();
66
68
  // STATE
67
69
  const [preJoinChoices, setPreJoinChoices] = (0, react_1.useState)(undefined);
70
+ const [loading, setLoading] = (0, react_1.useState)(false);
68
71
  const preJoinDefaults = (0, react_1.useMemo)(() => {
69
72
  var _a;
70
73
  return {
@@ -93,6 +96,7 @@ function LiveStreamRoom(inProps) {
93
96
  var _b;
94
97
  // eslint-disable-next-line no-constant-condition
95
98
  if ((liveStream || true) && connectionDetailsEndpoint) {
99
+ setLoading(true);
96
100
  setPreJoinChoices(values);
97
101
  const url = new URL(connectionDetailsEndpoint, window.location.origin);
98
102
  url.searchParams.append('roomName', (0, liveStream_1.generateRoomId)());
@@ -103,8 +107,9 @@ function LiveStreamRoom(inProps) {
103
107
  const connectionDetailsResp = yield fetch(url.toString());
104
108
  const connectionDetailsData = yield connectionDetailsResp.json();
105
109
  setConnectionDetails(connectionDetailsData);
110
+ setLoading(false);
106
111
  }
107
- }), []);
112
+ }), [scUserContext.user, connectionDetailsEndpoint, setPreJoinChoices, setConnectionDetails]);
108
113
  /**
109
114
  * Handle PreJoin Error
110
115
  */
@@ -118,6 +123,6 @@ function LiveStreamRoom(inProps) {
118
123
  /**
119
124
  * Renders root object
120
125
  */
121
- return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.content, "data-lk-theme": "default" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.title }, { children: liveStream === null || liveStream === void 0 ? void 0 : liveStream.title })), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.description }, { children: liveStream === null || liveStream === void 0 ? void 0 : liveStream.description })), connectionDetails === undefined || preJoinChoices === undefined ? ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.preJoin }, { children: (0, jsx_runtime_1.jsx)(components_react_1.PreJoin, { persistUserChoices: true, defaults: preJoinDefaults, onSubmit: handlePreJoinSubmit, onError: handlePreJoinError }) }))) : ((0, jsx_runtime_1.jsx)(LiveStreamVideoConference_1.default, { connectionDetails: connectionDetails, userChoices: preJoinChoices, options: { codec: props.codec, hq: props.hq } }))] })) })));
126
+ return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.content, "data-lk-theme": "default" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.title }, { children: liveStream === null || liveStream === void 0 ? void 0 : liveStream.title })), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.description }, { children: liveStream === null || liveStream === void 0 ? void 0 : liveStream.description })), connectionDetails === undefined || preJoinChoices === undefined ? ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.preJoin }, { children: (0, jsx_runtime_1.jsx)(components_react_1.PreJoin, { persistUserChoices: true, defaults: preJoinDefaults, onSubmit: handlePreJoinSubmit, onError: handlePreJoinError }) }))) : ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.conference }, { children: (0, jsx_runtime_1.jsx)(LiveStreamVideoConference_1.default, { connectionDetails: connectionDetails, userChoices: preJoinChoices, options: { codec: props.codec, hq: props.hq } }) })))] })) })));
122
127
  }
123
128
  exports.default = LiveStreamRoom;
package/lib/cjs/components/NavigationMenuIconButton/NavigationMenuDrawer.js CHANGED
@@ -2,6 +2,7 @@
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  const tslib_1 = require("tslib");
4
4
  const jsx_runtime_1 = require("react/jsx-runtime");
5
+ const react_1 = require("react");
5
6
  const styles_1 = require("@mui/material/styles");
6
7
  const material_1 = require("@mui/material");
7
8
  const classnames_1 = tslib_1.__importDefault(require("classnames"));
@@ -10,6 +11,7 @@ const ScrollContainer_1 = tslib_1.__importDefault(require("../../shared/ScrollCo
10
11
  const DefaultDrawerContent_1 = tslib_1.__importDefault(require("./DefaultDrawerContent"));
11
12
  const DefaultHeaderContent_1 = tslib_1.__importDefault(require("./DefaultHeaderContent"));
12
13
  const CreateLiveStreamButton_1 = tslib_1.__importDefault(require("../CreateLiveStreamButton"));
14
+ const react_core_1 = require("@selfcommunity/react-core");
13
15
  const PREFIX = 'SCNavigationMenuDrawer';
14
16
  const classes = {
15
17
  root: `${PREFIX}-root`,
@@ -28,12 +30,28 @@ const Root = (0, styles_1.styled)(material_1.Drawer, {
28
30
  overridesResolver: (props, styles) => styles.root
29
31
  })(({ theme }) => ({}));
30
32
  function NavigationMenuDrawer(inProps) {
33
+ var _a;
31
34
  // PROPS
32
35
  const props = (0, system_1.useThemeProps)({
33
36
  props: inProps,
34
37
  name: PREFIX
35
38
  });
36
39
  const { className = null, showDrawerHeader = true, drawerHeaderContent = (0, jsx_runtime_1.jsx)(DefaultHeaderContent_1.default, {}), drawerContent = (0, jsx_runtime_1.jsx)(DefaultDrawerContent_1.default, {}), showDrawerFooterContent = true, drawerFooterContent = null, ScrollContainerProps = {}, CreateLiveStreamButtonComponentProps = {}, open, onClose } = props, rest = tslib_1.__rest(props, ["className", "showDrawerHeader", "drawerHeaderContent", "drawerContent", "showDrawerFooterContent", "drawerFooterContent", "ScrollContainerProps", "CreateLiveStreamButtonComponentProps", "open", "onClose"]);
37
- return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ anchor: "left", className: (0, classnames_1.default)(classes.root, className), open: open, onClose: onClose }, rest, { children: [showDrawerHeader && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.drawerHeader }, { children: [drawerHeaderContent, (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ className: classes.drawerHeaderAction, onClick: onClose }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "close" }) }))] })), (0, jsx_runtime_1.jsx)(material_1.Divider, {})] })), (0, jsx_runtime_1.jsx)(ScrollContainer_1.default, Object.assign({}, ScrollContainerProps, { children: (0, jsx_runtime_1.jsx)(material_1.List, Object.assign({ className: classes.drawerContent, onClick: onClose }, { children: drawerContent })) })), showDrawerFooterContent && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Divider, {}), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.drawerFooter }, { children: drawerFooterContent ? (drawerFooterContent) : ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.drawerFooterLiveStream }, { children: (0, jsx_runtime_1.jsx)(CreateLiveStreamButton_1.default, Object.assign({ color: "primary", className: classes.drawerFooterLiveStreamButton, fullWidth: true }, CreateLiveStreamButtonComponentProps)) }))) }))] }))] })));
40
+ const { preferences, features } = (0, react_core_1.useSCPreferences)();
41
+ // TODO
42
+ const liveStreamEnabled = true;
43
+ /* const liveStreamEnabled = useMemo(
44
+ () =>
45
+ preferences &&
46
+ features &&
47
+ features.includes(SCFeatureName.LIVE_STREAM) &&
48
+ SCPreferences.CONFIGURATIONS_LIVE_STREAM_ENABLED in preferences &&
49
+ preferences[SCPreferences.CONFIGURATIONS_LIVE_STREAM_ENABLED].value,
50
+ [preferences, features]
51
+ ); */
52
+ // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
53
+ // @ts-ignore
54
+ const canCreateLiveStream = (0, react_1.useMemo)(() => true /* scUserContext?.user?.permission?.create_livestream */, [(_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.permission]);
55
+ return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ anchor: "left", className: (0, classnames_1.default)(classes.root, className), open: open, onClose: onClose }, rest, { children: [showDrawerHeader && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.drawerHeader }, { children: [drawerHeaderContent, (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ className: classes.drawerHeaderAction, onClick: onClose }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "close" }) }))] })), (0, jsx_runtime_1.jsx)(material_1.Divider, {})] })), (0, jsx_runtime_1.jsx)(ScrollContainer_1.default, Object.assign({}, ScrollContainerProps, { children: (0, jsx_runtime_1.jsx)(material_1.List, Object.assign({ className: classes.drawerContent, onClick: onClose }, { children: drawerContent })) })), showDrawerFooterContent && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [Boolean(drawerContent || (liveStreamEnabled && canCreateLiveStream)) && (0, jsx_runtime_1.jsx)(material_1.Divider, {}), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.drawerFooter }, { children: drawerFooterContent ? (drawerFooterContent) : ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.drawerFooterLiveStream }, { children: (0, jsx_runtime_1.jsx)(CreateLiveStreamButton_1.default, Object.assign({ color: "primary", className: classes.drawerFooterLiveStreamButton, fullWidth: true }, CreateLiveStreamButtonComponentProps)) }))) }))] }))] })));
38
56
  }
39
57
  exports.default = NavigationMenuDrawer;
package/lib/esm/components/CreateLiveStreamDialog/CreateLiveStreamDialog.js CHANGED
@@ -76,7 +76,6 @@ export default function CreateLiveStreamDialog(inProps) {
76
76
  preferences[SCPreferences.CONFIGURATIONS_LIVE_STREAM_ENABLED].value*/ [preferences, features]);
77
77
  const onlyStaffLiveStreamEnabled = useMemo(() => true /* preferences[SCPreferences.CONFIGURATIONS_LIVESTREAM_ONLY_STAFF_ENABLED].value */, [preferences]);
78
78
  const canCreateLiveStream = useMemo(() => true /* liveStreamEnabled && (scUserContext?.user?.permission?.create_livestream || (onlyStaffLiveStreamEnabled && UserUtils.isStaff(scUserContext.user)))*/, [scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user, onlyStaffLiveStreamEnabled]);
79
- console.log(canCreateLiveStream);
80
79
  const eventsEnabled = useMemo(() => preferences &&
81
80
  features &&
82
81
  features.includes(SCFeatureName.TAGGING) &&
@@ -84,9 +83,7 @@ export default function CreateLiveStreamDialog(inProps) {
84
83
  preferences[SCPreferences.CONFIGURATIONS_EVENTS_ENABLED].value, [preferences, features]);
85
84
  const onlyStaffEventEnabled = useMemo(() => preferences[SCPreferences.CONFIGURATIONS_EVENTS_ONLY_STAFF_ENABLED].value, [preferences]);
86
85
  const canCreateEvent = useMemo(() => { var _a, _b; return eventsEnabled && (((_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_event) || true || (onlyStaffEventEnabled && UserUtils.isStaff(scUserContext.user))); }, [scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user, eventsEnabled, onlyStaffEventEnabled]);
87
- console.log(canCreateEvent);
88
86
  const canCreateLiveStreamEvent = useMemo(() => Boolean(canCreateLiveStream && canCreateEvent), [canCreateEvent, canCreateLiveStream]);
89
- console.log(canCreateLiveStreamEvent);
90
87
  // STATE
91
88
  const [step, setStep] = useState(canCreateLiveStreamEvent ? CreateLiveStreamStep.SELECT_TYPE : CreateLiveStreamStep.CREATE_LIVE);
92
89
  const [liveType, setLiveType] = useState(canCreateLiveStreamEvent ? null : LiveStreamType.DIRECT_LIVE);
@@ -116,5 +113,5 @@ export default function CreateLiveStreamDialog(inProps) {
116
113
  /**
117
114
  * Renders root object
118
115
  */
119
- return (_jsx(Root, Object.assign({ DialogContentProps: { dividers: false }, maxWidth: 'md', title: _jsxs(Box, Object.assign({ className: classes.title, component: 'span' }, { children: [step === CreateLiveStreamStep.CREATE_LIVE && (_jsx(Button, Object.assign({ variant: "text", onClick: handleBack, startIcon: _jsx(Icon, { children: "arrow_back" }) }, { children: "Back" }))), _jsx(Box, Object.assign({ component: 'span' }, { children: _jsx(FormattedMessage, { id: "ui.createLivestreamDialog.title", defaultMessage: "ui.createLivestreamDialog.title" }) }))] })), fullWidth: true, open: open, onClose: onClose, className: classNames(classes.root, className), TransitionComponent: Transition, PaperProps: { elevation: 0 } }, rest, { children: _jsxs(Box, Object.assign({ className: classes.content }, { children: [step === CreateLiveStreamStep.SELECT_TYPE && (_jsx(LiveStreamSelector, { liveSelected: liveType, onLiveSelected: handleLiveTypeSelected, onNext: handleLiveTypeSelectedNext })), step === CreateLiveStreamStep.CREATE_LIVE && (_jsx(_Fragment, { children: liveType === LiveStreamType.EVENT_LIVE ? _jsx(EventForm, { onSuccess: handleSubmit }) : _jsx(LiveStreamForm, { onSuccess: handleSubmit }) }))] })) })));
116
+ return (_jsx(Root, Object.assign({ DialogContentProps: { dividers: false }, maxWidth: 'md', title: _jsxs(Box, Object.assign({ className: classes.title, component: 'span' }, { children: [Boolean(step === CreateLiveStreamStep.CREATE_LIVE && canCreateLiveStreamEvent) && (_jsx(Button, Object.assign({ variant: "text", onClick: handleBack, startIcon: _jsx(Icon, { children: "arrow_back" }) }, { children: "Back" }))), _jsx(Box, Object.assign({ component: 'span' }, { children: _jsx(FormattedMessage, { id: "ui.createLivestreamDialog.title", defaultMessage: "ui.createLivestreamDialog.title" }) }))] })), fullWidth: true, open: open, onClose: onClose, className: classNames(classes.root, className), TransitionComponent: Transition, PaperProps: { elevation: 0 } }, rest, { children: _jsxs(Box, Object.assign({ className: classes.content }, { children: [step === CreateLiveStreamStep.SELECT_TYPE && (_jsx(LiveStreamSelector, { liveSelected: liveType, onLiveSelected: handleLiveTypeSelected, onNext: handleLiveTypeSelectedNext })), step === CreateLiveStreamStep.CREATE_LIVE && (_jsx(_Fragment, { children: liveType === LiveStreamType.EVENT_LIVE ? _jsx(EventForm, { onSuccess: handleSubmit }) : _jsx(LiveStreamForm, { onSuccess: handleSubmit }) }))] })) })));
120
117
  }
package/lib/esm/components/CreateLiveStreamDialog/LiveStreamSelector/LiveStreamSelector.js CHANGED
@@ -22,7 +22,10 @@ const Root = styled(Container, {
22
22
  [`& .${classes.options}`]: {
23
23
  display: 'flex',
24
24
  justifyContent: 'center',
25
- alignItems: 'center'
25
+ alignItems: 'center',
26
+ '& > div': {
27
+ width: '310px'
28
+ }
26
29
  },
27
30
  [`& .${classes.actions}`]: {
28
31
  display: 'flex',
@@ -62,16 +65,16 @@ const OptionCard = styled(Paper, {
62
65
  }
63
66
  }));
64
67
  const RadioIndicator = styled(Radio, {
65
- shouldForwardProp: (prop) => prop !== 'selected'
68
+ // shouldForwardProp: (prop) => prop !== 'selected'
66
69
  })(({ theme, selected }) => ({
67
- width: 16,
68
- height: 16,
69
- borderRadius: '50%',
70
- border: `2px solid ${selected ? theme.palette.secondary.main : theme.palette.grey[300]}`,
71
- backgroundColor: selected ? theme.palette.secondary.main : 'transparent',
72
- transition: theme.transitions.create(['border-color', 'background-color'], {
73
- duration: theme.transitions.duration.shortest
74
- })
70
+ /* width: 16,
71
+ height: 16,
72
+ borderRadius: '50%',
73
+ border: `2px solid ${selected ? theme.palette.secondary.main : theme.palette.grey[300]}`,
74
+ backgroundColor: selected ? theme.palette.secondary.main : 'transparent',
75
+ transition: theme.transitions.create(['border-color', 'background-color'], {
76
+ duration: theme.transitions.duration.shortest
77
+ }) */
75
78
  }));
76
79
  const FeatureItem = styled(Box)(({ theme }) => ({
77
80
  display: 'flex',
@@ -156,7 +159,7 @@ export default function LiveStreamSelector(inProps) {
156
159
  handleOptionSelect(index);
157
160
  e.preventDefault();
158
161
  }
159
- }, theme: undefined }, { children: [_jsxs(Box, { children: [_jsx(Typography, Object.assign({ variant: "h6", component: "h2", sx: { fontWeight: 500 } }, { children: option.title })), _jsx(RadioIndicator, { selected: selectedOption === option.type, theme: undefined })] }), _jsx(Box, Object.assign({ component: "ul" }, { children: option.features.map((feature, featureIndex) => {
162
+ }, theme: undefined }, { children: [_jsxs(Box, { children: [_jsx(Typography, Object.assign({ variant: "h6", component: "h2", sx: { fontWeight: 500 } }, { children: option.title })), _jsx(Radio, { checked: selectedOption === option.type })] }), _jsx(Box, Object.assign({ component: "ul" }, { children: option.features.map((feature, featureIndex) => {
160
163
  const _Icon = option.icons[featureIndex];
161
164
  return (_jsxs(FeatureItem, Object.assign({ component: "li" }, { children: [_Icon, _jsx(Typography, Object.assign({ variant: "body2", color: "text.secondary", sx: { flex: 1 } }, { children: feature }))] }), featureIndex));
162
165
  }) }))] }), index))) })), _jsx(Box, Object.assign({ className: classes.actions }, { children: _jsx(Button, Object.assign({ disabled: !selectedOption, variant: "contained", onClick: handleNext, color: "secondary" }, { children: "Next" })) }))] })));
package/lib/esm/components/LiveStreamForm/LiveStreamForm.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import { __rest } from "tslib";
2
2
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
3
3
  import { LoadingButton } from '@mui/lab';
4
- import { Box, FormGroup, TextField, Typography } from '@mui/material';
4
+ import { Box, FormGroup, Paper, TextField, Typography } from '@mui/material';
5
5
  import { styled } from '@mui/material/styles';
6
6
  import { useThemeProps } from '@mui/system';
7
7
  import { EventService, formatHttpErrorCode } from '@selfcommunity/api-services';
@@ -13,10 +13,12 @@ import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
13
13
  import { SCOPE_SC_UI } from '../../constants/Errors';
14
14
  import { LIVE_STREAM_DESCRIPTION_MAX_LENGTH, LIVE_STREAM_TITLE_MAX_LENGTH, LIVE_STREAM_SLUG_MAX_LENGTH } from '../../constants/LiveStream';
15
15
  import { PREFIX } from './constants';
16
+ import UploadEventCover from '../EventForm/UploadEventCover';
16
17
  const classes = {
17
18
  root: `${PREFIX}-root`,
18
19
  form: `${PREFIX}-form`,
19
20
  title: `${PREFIX}-title`,
21
+ cover: `${PREFIX}-cover`,
20
22
  slug: `${PREFIX}-slug`,
21
23
  description: `${PREFIX}-description`,
22
24
  content: `${PREFIX}-content`,
@@ -85,7 +87,9 @@ export default function LiveStreamForm(inProps) {
85
87
  title: (liveStream === null || liveStream === void 0 ? void 0 : liveStream.title) || '',
86
88
  description: (liveStream === null || liveStream === void 0 ? void 0 : liveStream.description) || '',
87
89
  slug: (liveStream === null || liveStream === void 0 ? void 0 : liveStream.slug) || '',
90
+ settings: (liveStream === null || liveStream === void 0 ? void 0 : liveStream.settings) || {},
88
91
  cover: (liveStream === null || liveStream === void 0 ? void 0 : liveStream.cover) || '',
92
+ coverFile: (liveStream === null || liveStream === void 0 ? void 0 : liveStream.cover) || '',
89
93
  isSubmitting: false
90
94
  };
91
95
  // STATE
@@ -95,9 +99,27 @@ export default function LiveStreamForm(inProps) {
95
99
  const scPreferences = useSCPreferences();
96
100
  const privateEnabled = useMemo(() => scPreferences.preferences[SCPreferences.CONFIGURATIONS_EVENTS_PRIVATE_ENABLED].value, [scPreferences.preferences]);
97
101
  const visibilityEnabled = useMemo(() => scPreferences.preferences[SCPreferences.CONFIGURATIONS_EVENTS_VISIBILITY_ENABLED].value, [scPreferences.preferences]);
102
+ const _backgroundCover = Object.assign({}, (field.cover
103
+ ? { background: `url('${field.cover}') center / cover` }
104
+ : { background: `url('${scPreferences.preferences[SCPreferences.IMAGES_USER_DEFAULT_COVER].value}') center / cover` }));
105
+ const handleChangeCover = useCallback((cover) => {
106
+ setField((prev) => (Object.assign(Object.assign({}, prev), { ['coverFile']: cover })));
107
+ const reader = new FileReader();
108
+ reader.onloadend = () => {
109
+ setField((prev) => (Object.assign(Object.assign({}, prev), { ['cover']: reader.result })));
110
+ };
111
+ reader.readAsDataURL(cover);
112
+ if (error.coverError) {
113
+ delete error.coverError;
114
+ setError(error);
115
+ }
116
+ }, [error]);
98
117
  const handleSubmit = useCallback(() => {
99
118
  setField((prev) => (Object.assign(Object.assign({}, prev), { ['isSubmitting']: true })));
100
119
  const formData = new FormData();
120
+ if (field.coverFile) {
121
+ formData.append('cover', field.coverFile);
122
+ }
101
123
  if (visibilityEnabled) {
102
124
  formData.append('visible', 'true');
103
125
  }
@@ -140,14 +162,14 @@ export default function LiveStreamForm(inProps) {
140
162
  /**
141
163
  * Renders root object
142
164
  */
143
- return (_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: _jsxs(FormGroup, Object.assign({ className: classes.form }, { children: [_jsx(TextField, { required: true, className: classes.title, placeholder: `${intl.formatMessage(messages.title)}`, margin: "normal", value: field.title, name: "title", onChange: handleChange, InputProps: {
144
- endAdornment: _jsx(Typography, Object.assign({ variant: "body2" }, { children: LIVE_STREAM_TITLE_MAX_LENGTH - field.title.length }))
145
- }, error: Boolean(field.title.length > LIVE_STREAM_TITLE_MAX_LENGTH) || Boolean(error['titleError']), helperText: field.title.length > LIVE_STREAM_TITLE_MAX_LENGTH ? (_jsx(FormattedMessage, { id: "ui.liveStreamForm.title.error.maxLength", defaultMessage: "ui.liveStreamForm.title.error.maxLength" })) : error['titleError'] ? (error['titleError']) : null }), _jsx(TextField, { required: true, className: classes.slug, placeholder: `${intl.formatMessage(messages.slug)}`, margin: "normal", value: field.slug, name: "slug", onChange: handleChange, InputProps: {
146
- endAdornment: _jsx(Typography, Object.assign({ variant: "body2" }, { children: LIVE_STREAM_SLUG_MAX_LENGTH - field.title.length }))
147
- }, error: Boolean(field.slug.length > LIVE_STREAM_SLUG_MAX_LENGTH) || Boolean(error['nameError']), helperText: field.title.length > LIVE_STREAM_SLUG_MAX_LENGTH ? (_jsx(FormattedMessage, { id: "ui.liveStreamForm.slug.error.maxLength", defaultMessage: "ui.liveStreamForm.slug.error.maxLength" })) : error['nameError'] ? (error['nameError']) : null }), _jsx(TextField, { multiline: true, rows: 4, className: classes.description, placeholder: `${intl.formatMessage(messages.description)}`, margin: "normal", value: field.description, name: "description", onChange: handleChange, InputProps: {
148
- endAdornment: (_jsx(Typography, Object.assign({ variant: "body2" }, { children: ((_a = field.description) === null || _a === void 0 ? void 0 : _a.length) ? LIVE_STREAM_DESCRIPTION_MAX_LENGTH - field.description.length : LIVE_STREAM_DESCRIPTION_MAX_LENGTH })))
149
- }, error: Boolean(((_b = field.description) === null || _b === void 0 ? void 0 : _b.length) > LIVE_STREAM_DESCRIPTION_MAX_LENGTH), helperText: ((_c = field.description) === null || _c === void 0 ? void 0 : _c.length) > LIVE_STREAM_DESCRIPTION_MAX_LENGTH ? (_jsx(FormattedMessage, { id: "ui.liveStreamForm.description.error.maxLength", defaultMessage: "ui.liveStreamForm.description.error.maxLength" })) : null }), _jsx(Box, Object.assign({ className: classes.actions }, { children: _jsx(LoadingButton, Object.assign({ loading: field.isSubmitting, disabled: !field.title ||
150
- Object.keys(error).length !== 0 ||
151
- field.title.length > LIVE_STREAM_TITLE_MAX_LENGTH ||
152
- field.description.length > LIVE_STREAM_DESCRIPTION_MAX_LENGTH, variant: "contained", onClick: handleSubmit, color: "secondary" }, { children: liveStream ? (_jsx(FormattedMessage, { id: "ui.liveStreamForm.button.edit", defaultMessage: "ui.liveStreamForm.button.edit" })) : (_jsx(FormattedMessage, { id: "ui.liveStreamForm.button.create", defaultMessage: "ui.liveStreamForm.button.create" })) })) }))] })) })));
165
+ return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: [_jsx(Paper, Object.assign({ style: _backgroundCover, classes: { root: classes.cover } }, { children: _jsx(UploadEventCover, { isCreationMode: true, onChange: handleChangeCover }) })), _jsxs(FormGroup, Object.assign({ className: classes.form }, { children: [_jsx(TextField, { required: true, className: classes.title, placeholder: `${intl.formatMessage(messages.title)}`, margin: "normal", value: field.title, name: "title", onChange: handleChange, InputProps: {
166
+ endAdornment: _jsx(Typography, Object.assign({ variant: "body2" }, { children: LIVE_STREAM_TITLE_MAX_LENGTH - field.title.length }))
167
+ }, error: Boolean(field.title.length > LIVE_STREAM_TITLE_MAX_LENGTH) || Boolean(error['titleError']), helperText: field.title.length > LIVE_STREAM_TITLE_MAX_LENGTH ? (_jsx(FormattedMessage, { id: "ui.liveStreamForm.title.error.maxLength", defaultMessage: "ui.liveStreamForm.title.error.maxLength" })) : error['titleError'] ? (error['titleError']) : null }), _jsx(TextField, { required: true, className: classes.slug, placeholder: `${intl.formatMessage(messages.slug)}`, margin: "normal", value: field.slug, name: "slug", onChange: handleChange, InputProps: {
168
+ endAdornment: _jsx(Typography, Object.assign({ variant: "body2" }, { children: LIVE_STREAM_SLUG_MAX_LENGTH - field.title.length }))
169
+ }, error: Boolean(field.slug.length > LIVE_STREAM_SLUG_MAX_LENGTH) || Boolean(error['nameError']), helperText: field.title.length > LIVE_STREAM_SLUG_MAX_LENGTH ? (_jsx(FormattedMessage, { id: "ui.liveStreamForm.slug.error.maxLength", defaultMessage: "ui.liveStreamForm.slug.error.maxLength" })) : error['nameError'] ? (error['nameError']) : null }), _jsx(TextField, { multiline: true, rows: 4, className: classes.description, placeholder: `${intl.formatMessage(messages.description)}`, margin: "normal", value: field.description, name: "description", onChange: handleChange, InputProps: {
170
+ endAdornment: (_jsx(Typography, Object.assign({ variant: "body2" }, { children: ((_a = field.description) === null || _a === void 0 ? void 0 : _a.length) ? LIVE_STREAM_DESCRIPTION_MAX_LENGTH - field.description.length : LIVE_STREAM_DESCRIPTION_MAX_LENGTH })))
171
+ }, error: Boolean(((_b = field.description) === null || _b === void 0 ? void 0 : _b.length) > LIVE_STREAM_DESCRIPTION_MAX_LENGTH), helperText: ((_c = field.description) === null || _c === void 0 ? void 0 : _c.length) > LIVE_STREAM_DESCRIPTION_MAX_LENGTH ? (_jsx(FormattedMessage, { id: "ui.liveStreamForm.description.error.maxLength", defaultMessage: "ui.liveStreamForm.description.error.maxLength" })) : null }), _jsx(Box, Object.assign({ className: classes.actions }, { children: _jsx(LoadingButton, Object.assign({ loading: field.isSubmitting, disabled: !field.title ||
172
+ Object.keys(error).length !== 0 ||
173
+ field.title.length > LIVE_STREAM_TITLE_MAX_LENGTH ||
174
+ field.description.length > LIVE_STREAM_DESCRIPTION_MAX_LENGTH, variant: "contained", onClick: handleSubmit, color: "secondary" }, { children: liveStream ? (_jsx(FormattedMessage, { id: "ui.liveStreamForm.button.edit", defaultMessage: "ui.liveStreamForm.button.edit" })) : (_jsx(FormattedMessage, { id: "ui.liveStreamForm.button.create", defaultMessage: "ui.liveStreamForm.button.create" })) })) }))] }))] })));
153
175
  }
package/lib/esm/components/LiveStreamForm/types.d.ts CHANGED
@@ -1,9 +1,10 @@
1
- export type InitialFieldState = Geolocation & {
1
+ export type InitialFieldState = {
2
2
  title: string;
3
3
  description: string;
4
4
  slug?: string;
5
5
  settings?: Record<string, any>;
6
- cover?: string;
6
+ cover?: string | ArrayBuffer;
7
+ coverFile?: string | Blob;
7
8
  isSubmitting: boolean;
8
9
  };
9
10
  export type FieldStateKeys = keyof InitialFieldState;
package/lib/esm/components/LiveStreamRoom/LiveStreamRoom.d.ts CHANGED
@@ -36,12 +36,13 @@ export interface LiveStreamRoomProps extends BoxProps {
36
36
 
37
37
  |Rule Name|Global class|Description|
38
38
  |---|---|---|
39
- |root|.SCLiveStreamForm-root|Styles applied to the root element.|
40
- |title|.SCLiveStreamForm-title|Styles applied to the title element.|
41
- |description|.SCLiveStreamForm-description|Styles applied to the description element.|
42
- |content|.SCLiveStreamForm-content|Styles applied to the content.|
43
- |prejoin|.SCLiveStreamForm-prejoin|Styles applied to the prejoin.|
44
- |error|.SCLiveStreamForm-error|Styles applied to the error elements.|
39
+ |root|.SCLiveStreamRoom-root|Styles applied to the root element.|
40
+ |title|.SCLiveStreamRoom-title|Styles applied to the title element.|
41
+ |description|.SCLiveStreamRoom-description|Styles applied to the description element.|
42
+ |content|.SCLiveStreamRoom-content|Styles applied to the content.|
43
+ |prejoin|.SCLiveStreamRoom-prejoin|Styles applied to the prejoin.|
44
+ |conference|.SCLiveStreamRoom-conference|Styles applied to the conference.|
45
+ |error|.SCLiveStreamRoom-error|Styles applied to the error elements.|
45
46
 
46
47
  * @param inProps
47
48
  */
package/lib/esm/components/LiveStreamRoom/LiveStreamRoom.js CHANGED
@@ -18,6 +18,7 @@ const classes = {
18
18
  title: `${PREFIX}-title`,
19
19
  description: `${PREFIX}-description`,
20
20
  preJoin: `${PREFIX}-prejoin`,
21
+ conference: `${PREFIX}-prejoin`,
21
22
  error: `${PREFIX}-error`
22
23
  };
23
24
  const Root = styled(Box, {
@@ -39,12 +40,13 @@ const Root = styled(Box, {
39
40
 
40
41
  |Rule Name|Global class|Description|
41
42
  |---|---|---|
42
- |root|.SCLiveStreamForm-root|Styles applied to the root element.|
43
- |title|.SCLiveStreamForm-title|Styles applied to the title element.|
44
- |description|.SCLiveStreamForm-description|Styles applied to the description element.|
45
- |content|.SCLiveStreamForm-content|Styles applied to the content.|
46
- |prejoin|.SCLiveStreamForm-prejoin|Styles applied to the prejoin.|
47
- |error|.SCLiveStreamForm-error|Styles applied to the error elements.|
43
+ |root|.SCLiveStreamRoom-root|Styles applied to the root element.|
44
+ |title|.SCLiveStreamRoom-title|Styles applied to the title element.|
45
+ |description|.SCLiveStreamRoom-description|Styles applied to the description element.|
46
+ |content|.SCLiveStreamRoom-content|Styles applied to the content.|
47
+ |prejoin|.SCLiveStreamRoom-prejoin|Styles applied to the prejoin.|
48
+ |conference|.SCLiveStreamRoom-conference|Styles applied to the conference.|
49
+ |error|.SCLiveStreamRoom-error|Styles applied to the error elements.|
48
50
 
49
51
  * @param inProps
50
52
  */
@@ -63,6 +65,7 @@ export default function LiveStreamRoom(inProps) {
63
65
  const intl = useIntl();
64
66
  // STATE
65
67
  const [preJoinChoices, setPreJoinChoices] = useState(undefined);
68
+ const [loading, setLoading] = useState(false);
66
69
  const preJoinDefaults = useMemo(() => {
67
70
  var _a;
68
71
  return {
@@ -91,6 +94,7 @@ export default function LiveStreamRoom(inProps) {
91
94
  var _b;
92
95
  // eslint-disable-next-line no-constant-condition
93
96
  if ((liveStream || true) && connectionDetailsEndpoint) {
97
+ setLoading(true);
94
98
  setPreJoinChoices(values);
95
99
  const url = new URL(connectionDetailsEndpoint, window.location.origin);
96
100
  url.searchParams.append('roomName', generateRoomId());
@@ -101,8 +105,9 @@ export default function LiveStreamRoom(inProps) {
101
105
  const connectionDetailsResp = yield fetch(url.toString());
102
106
  const connectionDetailsData = yield connectionDetailsResp.json();
103
107
  setConnectionDetails(connectionDetailsData);
108
+ setLoading(false);
104
109
  }
105
- }), []);
110
+ }), [scUserContext.user, connectionDetailsEndpoint, setPreJoinChoices, setConnectionDetails]);
106
111
  /**
107
112
  * Handle PreJoin Error
108
113
  */
@@ -116,5 +121,5 @@ export default function LiveStreamRoom(inProps) {
116
121
  /**
117
122
  * Renders root object
118
123
  */
119
- return (_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: _jsxs(Box, Object.assign({ className: classes.content, "data-lk-theme": "default" }, { children: [_jsx(Box, Object.assign({ className: classes.title }, { children: liveStream === null || liveStream === void 0 ? void 0 : liveStream.title })), _jsx(Box, Object.assign({ className: classes.description }, { children: liveStream === null || liveStream === void 0 ? void 0 : liveStream.description })), connectionDetails === undefined || preJoinChoices === undefined ? (_jsx(Box, Object.assign({ className: classes.preJoin }, { children: _jsx(PreJoin, { persistUserChoices: true, defaults: preJoinDefaults, onSubmit: handlePreJoinSubmit, onError: handlePreJoinError }) }))) : (_jsx(LiveStreamVideoConference, { connectionDetails: connectionDetails, userChoices: preJoinChoices, options: { codec: props.codec, hq: props.hq } }))] })) })));
124
+ return (_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: _jsxs(Box, Object.assign({ className: classes.content, "data-lk-theme": "default" }, { children: [_jsx(Box, Object.assign({ className: classes.title }, { children: liveStream === null || liveStream === void 0 ? void 0 : liveStream.title })), _jsx(Box, Object.assign({ className: classes.description }, { children: liveStream === null || liveStream === void 0 ? void 0 : liveStream.description })), connectionDetails === undefined || preJoinChoices === undefined ? (_jsx(Box, Object.assign({ className: classes.preJoin }, { children: _jsx(PreJoin, { persistUserChoices: true, defaults: preJoinDefaults, onSubmit: handlePreJoinSubmit, onError: handlePreJoinError }) }))) : (_jsx(Box, Object.assign({ className: classes.conference }, { children: _jsx(LiveStreamVideoConference, { connectionDetails: connectionDetails, userChoices: preJoinChoices, options: { codec: props.codec, hq: props.hq } }) })))] })) })));
120
125
  }