@selfcommunity/react-ui 0.11.0-alpha.22 → 0.11.0-alpha.24

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 (26) hide show
  1. package/lib/cjs/components/CreateLiveStreamDialog/CreateLiveStreamDialog.js +5 -5
  2. package/lib/cjs/components/EventForm/EventForm.js +7 -5
  3. package/lib/cjs/components/LiveStreamForm/LiveStreamForm.js +6 -4
  4. package/lib/cjs/components/LiveStreamRoom/LiveStreamVideoConference/ControlBar.js +3 -1
  5. package/lib/cjs/components/LiveStreamRoom/LiveStreamVideoConference/LiveStreamSettingsMenu.d.ts +8 -0
  6. package/lib/cjs/components/LiveStreamRoom/LiveStreamVideoConference/LiveStreamSettingsMenu.js +69 -0
  7. package/lib/cjs/components/LiveStreamRoom/LiveStreamVideoConference/PreJoin.d.ts +3 -2
  8. package/lib/cjs/components/LiveStreamRoom/LiveStreamVideoConference/PreJoin.js +31 -2
  9. package/lib/cjs/components/LiveStreamRoom/LiveStreamVideoConference/VideoConference.js +43 -4
  10. package/lib/cjs/constants/LiveStream.d.ts +1 -0
  11. package/lib/cjs/constants/LiveStream.js +2 -1
  12. package/lib/esm/components/CreateLiveStreamDialog/CreateLiveStreamDialog.js +5 -5
  13. package/lib/esm/components/EventForm/EventForm.js +8 -6
  14. package/lib/esm/components/LiveStreamForm/LiveStreamForm.js +6 -4
  15. package/lib/esm/components/LiveStreamRoom/LiveStreamVideoConference/ControlBar.js +3 -1
  16. package/lib/esm/components/LiveStreamRoom/LiveStreamVideoConference/LiveStreamSettingsMenu.d.ts +8 -0
  17. package/lib/esm/components/LiveStreamRoom/LiveStreamVideoConference/LiveStreamSettingsMenu.js +66 -0
  18. package/lib/esm/components/LiveStreamRoom/LiveStreamVideoConference/PreJoin.d.ts +3 -2
  19. package/lib/esm/components/LiveStreamRoom/LiveStreamVideoConference/PreJoin.js +31 -2
  20. package/lib/esm/components/LiveStreamRoom/LiveStreamVideoConference/VideoConference.js +45 -6
  21. package/lib/esm/constants/LiveStream.d.ts +1 -0
  22. package/lib/esm/constants/LiveStream.js +1 -0
  23. package/lib/umd/{653.js → 212.js} +2 -2
  24. package/lib/umd/react-ui.js +1 -1
  25. package/package.json +6 -5
  26. /package/lib/umd/{653.js.LICENSE.txt → 212.js.LICENSE.txt} +0 -0
package/lib/cjs/components/CreateLiveStreamDialog/CreateLiveStreamDialog.js CHANGED
@@ -59,7 +59,7 @@ const Transition = react_1.default.forwardRef(function Transition(props, ref) {
59
59
  * @param inProps
60
60
  */
61
61
  function CreateLiveStreamDialog(inProps) {
62
- var _a, _b;
62
+ var _a;
63
63
  //PROPS
64
64
  const props = (0, system_1.useThemeProps)({
65
65
  props: inProps,
@@ -68,8 +68,8 @@ function CreateLiveStreamDialog(inProps) {
68
68
  const { className, open = true, onClose, onSuccess } = props, rest = tslib_1.__rest(props, ["className", "open", "onClose", "onSuccess"]);
69
69
  // CONTEXT
70
70
  const scUserContext = (0, react_core_1.useSCUser)();
71
- const canCreateLiveStream = (0, react_1.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]);
72
- const canCreateEvent = (0, react_1.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_event; }, [(_b = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _b === void 0 ? void 0 : _b.permission]);
71
+ // PERMISSION
72
+ const canCreateEvent = (0, react_1.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_event; }, [(_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.permission]);
73
73
  // STATE
74
74
  const [step, setStep] = (0, react_1.useState)(canCreateEvent ? types_2.CreateLiveStreamStep.SELECT_TYPE : types_2.CreateLiveStreamStep.CREATE_LIVE);
75
75
  const [liveType, setLiveType] = (0, react_1.useState)(canCreateEvent ? null : types_2.LiveStreamType.DIRECT_LIVE);
@@ -87,14 +87,14 @@ function CreateLiveStreamDialog(inProps) {
87
87
  }, []);
88
88
  const handleSubmit = (0, react_1.useCallback)((e) => {
89
89
  onSuccess && onSuccess(e);
90
- }, []);
90
+ }, [onSuccess]);
91
91
  (0, react_1.useEffect)(() => {
92
92
  if (!canCreateEvent) {
93
93
  setLiveType(types_2.LiveStreamType.DIRECT_LIVE);
94
94
  }
95
95
  }, [canCreateEvent]);
96
96
  // user must be logged
97
- if (!scUserContext.user || !canCreateLiveStream) {
97
+ if (!scUserContext.user) {
98
98
  return null;
99
99
  }
100
100
  /**
package/lib/cjs/components/EventForm/EventForm.js CHANGED
@@ -121,7 +121,7 @@ const Root = (0, styles_1.styled)(material_1.Box, {
121
121
  * @param inProps
122
122
  */
123
123
  function EventForm(inProps) {
124
- var _a, _b, _c, _d, _e;
124
+ var _a, _b, _c, _d, _e, _f;
125
125
  //PROPS
126
126
  const props = (0, system_1.useThemeProps)({
127
127
  props: inProps,
@@ -130,6 +130,7 @@ function EventForm(inProps) {
130
130
  const { className, onSuccess, onError, event, presetLocation, EventAddressComponentProps = {} } = props, rest = tslib_1.__rest(props, ["className", "onSuccess", "onError", "event", "presetLocation", "EventAddressComponentProps"]);
131
131
  // CONTEXT
132
132
  const scContext = (0, react_core_1.useSCContext)();
133
+ const scUserContext = (0, react_core_1.useSCUser)();
133
134
  // INTL
134
135
  const intl = (0, react_intl_1.useIntl)();
135
136
  const startDateTime = (0, react_1.useMemo)(() => (0, utils_2.getNewDate)(event === null || event === void 0 ? void 0 : event.start_date), [event]);
@@ -172,6 +173,7 @@ function EventForm(inProps) {
172
173
  scPreferences.features.includes(types_1.SCFeatureName.LIVE_STREAM) &&
173
174
  react_core_1.SCPreferences.CONFIGURATIONS_LIVE_STREAM_ENABLED in scPreferences.preferences &&
174
175
  scPreferences.preferences[react_core_1.SCPreferences.CONFIGURATIONS_LIVE_STREAM_ENABLED].value, [scPreferences.preferences, scPreferences.features]);
176
+ const canCreateLiveStream = (0, react_1.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; }, [(_b = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _b === void 0 ? void 0 : _b.permission]);
175
177
  const privateEnabled = (0, react_1.useMemo)(() => scPreferences.preferences[react_core_1.SCPreferences.CONFIGURATIONS_EVENTS_PRIVATE_ENABLED].value, [scPreferences.preferences]);
176
178
  const visibilityEnabled = (0, react_1.useMemo)(() => scPreferences.preferences[react_core_1.SCPreferences.CONFIGURATIONS_EVENTS_VISIBILITY_ENABLED].value, [scPreferences.preferences]);
177
179
  const disablePastStartTime = (0, react_1.useMemo)(() => field.startDate.getDate() === (0, utils_2.getNewDate)().getDate(), [field]);
@@ -384,7 +386,7 @@ function EventForm(inProps) {
384
386
  start_date: field.startDate,
385
387
  location: field.location,
386
388
  geolocation: field.geolocation,
387
- live_stream: Object.assign(Object.assign({ title: field.name || `${intl.formatMessage(messages.name)}` }, (event && ((_b = event.live_stream) === null || _b === void 0 ? void 0 : _b.created_at) && { created_at: field.startDate })), { settings: field.liveStreamSettings })
389
+ live_stream: Object.assign(Object.assign({ title: field.name || `${intl.formatMessage(messages.name)}` }, (event && ((_c = event.live_stream) === null || _c === void 0 ? void 0 : _c.created_at) && { created_at: field.startDate })), { settings: field.liveStreamSettings })
388
390
  }) }, EventAddressComponentProps)), privateEnabled && ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.privacySection }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", spacing: 1, alignItems: "center", justifyContent: "center" }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ className: (0, classnames_1.default)(classes.switchLabel, { [classes.active]: !field.isPublic }) }, { children: [(0, jsx_runtime_1.jsx)(material_1.Icon, { children: "private" }), (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.privacy.private", defaultMessage: "ui.eventForm.privacy.private" })] })), (0, jsx_runtime_1.jsx)(material_1.Switch, { className: classes.switch, checked: field.isPublic, onChange: () => setField((prev) => (Object.assign(Object.assign({}, prev), { ['isPublic']: !field.isPublic }))), disabled: event && !field.isPublic }), (0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ className: (0, classnames_1.default)(classes.switchLabel, { [classes.active]: field.isPublic }) }, { children: [(0, jsx_runtime_1.jsx)(material_1.Icon, { children: "public" }), (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.privacy.public", defaultMessage: "ui.eventForm.privacy.public" })] }))] })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2", textAlign: "center", className: classes.privacySectionInfo }, { children: field.isPublic ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.privacy.public.info", defaultMessage: "ui.eventForm.privacy.public.info", values: {
389
391
  // eslint-disable-next-line @typescript-eslint/ban-ts-ignore,@typescript-eslint/ban-ts-comment
390
392
  // @ts-ignores
@@ -394,8 +396,8 @@ function EventForm(inProps) {
394
396
  // @ts-ignore
395
397
  b: (chunks) => (0, jsx_runtime_1.jsx)("strong", { children: chunks })
396
398
  } })) }))] }))), (0, jsx_runtime_1.jsx)(material_1.TextField, { multiline: true, className: classes.description, placeholder: `${intl.formatMessage(messages.description)}`, margin: "normal", value: field.description, name: "description", onChange: handleChange, InputProps: {
397
- endAdornment: ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: ((_c = field.description) === null || _c === void 0 ? void 0 : _c.length) ? Event_1.EVENT_DESCRIPTION_MAX_LENGTH - field.description.length : Event_1.EVENT_DESCRIPTION_MAX_LENGTH })))
398
- }, error: Boolean(((_d = field.description) === null || _d === void 0 ? void 0 : _d.length) > Event_1.EVENT_DESCRIPTION_MAX_LENGTH), helperText: ((_e = field.description) === null || _e === void 0 ? void 0 : _e.length) > Event_1.EVENT_DESCRIPTION_MAX_LENGTH ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.description.error.maxLength", defaultMessage: "ui.eventForm.description.error.maxLength" })) : null }), genericError && ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.genericError }, { children: (0, jsx_runtime_1.jsx)(material_1.Alert, Object.assign({ variant: "filled", severity: "error" }, { children: genericError })) }))), (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.name ||
399
+ endAdornment: ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: ((_d = field.description) === null || _d === void 0 ? void 0 : _d.length) ? Event_1.EVENT_DESCRIPTION_MAX_LENGTH - field.description.length : Event_1.EVENT_DESCRIPTION_MAX_LENGTH })))
400
+ }, error: Boolean(((_e = field.description) === null || _e === void 0 ? void 0 : _e.length) > Event_1.EVENT_DESCRIPTION_MAX_LENGTH), helperText: ((_f = field.description) === null || _f === void 0 ? void 0 : _f.length) > Event_1.EVENT_DESCRIPTION_MAX_LENGTH ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.description.error.maxLength", defaultMessage: "ui.eventForm.description.error.maxLength" })) : null }), genericError && ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.genericError }, { children: (0, jsx_runtime_1.jsx)(material_1.Alert, Object.assign({ variant: "filled", severity: "error" }, { children: genericError })) }))), (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.name ||
399
401
  !field.startDate ||
400
402
  !field.startTime ||
401
403
  !field.endDate ||
@@ -407,6 +409,6 @@ function EventForm(inProps) {
407
409
  field.isSubmitting ||
408
410
  field.name.length > Event_1.EVENT_TITLE_MAX_LENGTH ||
409
411
  field.description.length > Event_1.EVENT_DESCRIPTION_MAX_LENGTH ||
410
- (field.location === types_1.SCEventLocationType.LIVESTREAM && !liveStreamEnabled), variant: "contained", onClick: handleSubmit, color: "secondary" }, { children: event ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.button.edit", defaultMessage: "ui.eventForm.button.edit" })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.button.create", defaultMessage: "ui.eventForm.button.create" })) })) }))] }))] })));
412
+ (field.location === types_1.SCEventLocationType.LIVESTREAM && (!liveStreamEnabled || !canCreateLiveStream)), variant: "contained", onClick: handleSubmit, color: "secondary" }, { children: event ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.button.edit", defaultMessage: "ui.eventForm.button.edit" })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.button.create", defaultMessage: "ui.eventForm.button.create" })) })) }))] }))] })));
411
413
  }
412
414
  exports.default = EventForm;
package/lib/cjs/components/LiveStreamForm/LiveStreamForm.js CHANGED
@@ -79,7 +79,7 @@ const messages = (0, react_intl_1.defineMessages)({
79
79
  * @param inProps
80
80
  */
81
81
  function LiveStreamForm(inProps) {
82
- var _a, _b, _c;
82
+ var _a, _b, _c, _d;
83
83
  //PROPS
84
84
  const props = (0, system_1.useThemeProps)({
85
85
  props: inProps,
@@ -102,6 +102,7 @@ function LiveStreamForm(inProps) {
102
102
  react_core_1.SCPreferences.STATIC_ENVIRONMENT in preferences &&
103
103
  preferences[react_core_1.SCPreferences.STATIC_ENVIRONMENT].value === types_1.SCCommunityEnvironment.STAGE, [preferences]);
104
104
  const communityStackId = (0, react_1.useMemo)(() => preferences && react_core_1.SCPreferences.STATIC_ENVIRONMENT in preferences && preferences[react_core_1.SCPreferences.STATIC_STACKID].value, [preferences]);
105
+ const canCreateLiveStream = (0, react_1.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]);
105
106
  const intl = (0, react_intl_1.useIntl)();
106
107
  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
107
108
  // @ts-ignore
@@ -238,12 +239,13 @@ function LiveStreamForm(inProps) {
238
239
  }, 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: {
239
240
  endAdornment: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: LiveStream_1.LIVE_STREAM_SLUG_MAX_LENGTH - field.slug.length }))
240
241
  }, error: Boolean(field.slug.length > LiveStream_1.LIVE_STREAM_SLUG_MAX_LENGTH) || Boolean(error['slugError']), 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['slugError'] ? (error['slugError']) : 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: {
241
- 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 })))
242
- }, 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)(LiveStreamFormSettings_1.default, { settings: field.settings, onChange: handleChangeSettings }), genericError && ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.genericError }, { children: (0, jsx_runtime_1.jsx)(material_1.Alert, Object.assign({ variant: "filled", severity: "error" }, { children: genericError })) }))), (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 ||
242
+ endAdornment: ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: ((_b = field.description) === null || _b === void 0 ? void 0 : _b.length) ? LiveStream_1.LIVE_STREAM_DESCRIPTION_MAX_LENGTH - field.description.length : LiveStream_1.LIVE_STREAM_DESCRIPTION_MAX_LENGTH })))
243
+ }, error: Boolean(((_c = field.description) === null || _c === void 0 ? void 0 : _c.length) > LiveStream_1.LIVE_STREAM_DESCRIPTION_MAX_LENGTH), helperText: ((_d = field.description) === null || _d === void 0 ? void 0 : _d.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)(LiveStreamFormSettings_1.default, { settings: field.settings, onChange: handleChangeSettings }), genericError && ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.genericError }, { children: (0, jsx_runtime_1.jsx)(material_1.Alert, Object.assign({ variant: "filled", severity: "error" }, { children: genericError })) }))), (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 ||
243
244
  field.isSubmitting ||
244
245
  field.title.length > LiveStream_1.LIVE_STREAM_TITLE_MAX_LENGTH ||
245
246
  field.description.length > LiveStream_1.LIVE_STREAM_DESCRIPTION_MAX_LENGTH ||
246
247
  isFreeTrialTier ||
247
- timeRemaining <= constants_3.WARNING_THRESHOLD_EXPIRING_SOON, 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" })) })) }))] }))] })));
248
+ timeRemaining <= constants_3.WARNING_THRESHOLD_EXPIRING_SOON ||
249
+ !canCreateLiveStream, 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" })) })) }))] }))] })));
248
250
  }
249
251
  exports.default = LiveStreamForm;
package/lib/cjs/components/LiveStreamRoom/LiveStreamVideoConference/ControlBar.js CHANGED
@@ -12,6 +12,7 @@ const material_1 = require("@mui/material");
12
12
  const SettingsMenuToggle_1 = require("./SettingsMenuToggle");
13
13
  const DisconnectButton_1 = require("./DisconnectButton");
14
14
  const utils_1 = require("./utils");
15
+ const react_intl_1 = require("react-intl");
15
16
  /**
16
17
  * The `ControlBar` prefab gives the user the basic user interface to control their
17
18
  * media devices (camera, microphone and screen share), open the `Chat` and leave the room.
@@ -57,6 +58,7 @@ function ControlBar(_a) {
57
58
  });
58
59
  const microphoneOnChange = React.useCallback((enabled, isUserInitiated) => (isUserInitiated ? saveAudioInputEnabled(enabled) : null), [saveAudioInputEnabled]);
59
60
  const cameraOnChange = React.useCallback((enabled, isUserInitiated) => (isUserInitiated ? saveVideoInputEnabled(enabled) : null), [saveVideoInputEnabled]);
60
- return ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, htmlProps, { children: [visibleControls.microphone && ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "lk-button-group" }, { children: [(0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(TrackToggle_1.TrackToggle, Object.assign({ source: livekit_client_1.Track.Source.Microphone, showIcon: showIcon, onChange: microphoneOnChange, onDeviceError: (error) => onDeviceError === null || onDeviceError === void 0 ? void 0 : onDeviceError({ source: livekit_client_1.Track.Source.Microphone, error }) }, { children: showText && 'Microphone' })) }), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "lk-button-group-menu" }, { children: (0, jsx_runtime_1.jsx)(components_react_1.MediaDeviceMenu, { kind: "audioinput", onActiveDeviceChange: (_kind, deviceId) => saveAudioInputDeviceId(deviceId !== null && deviceId !== void 0 ? deviceId : '') }) }))] }))), visibleControls.camera && ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "lk-button-group" }, { children: [(0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(TrackToggle_1.TrackToggle, Object.assign({ source: livekit_client_1.Track.Source.Camera, showIcon: showIcon, onChange: cameraOnChange, onDeviceError: (error) => onDeviceError === null || onDeviceError === void 0 ? void 0 : onDeviceError({ source: livekit_client_1.Track.Source.Camera, error }) }, { children: showText && 'Camera' })) }), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "lk-button-group-menu" }, { children: (0, jsx_runtime_1.jsx)(components_react_1.MediaDeviceMenu, { kind: "videoinput", onActiveDeviceChange: (_kind, deviceId) => saveVideoInputDeviceId(deviceId !== null && deviceId !== void 0 ? deviceId : '') }) }))] }))), visibleControls.screenShare && browserSupportsScreenSharing && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(TrackToggle_1.TrackToggle, Object.assign({ source: livekit_client_1.Track.Source.ScreenShare, captureOptions: { audio: true, selfBrowserSurface: 'include', surfaceSwitching: 'exclude' }, showIcon: showIcon, onChange: onScreenShareChange, onDeviceError: (error) => onDeviceError === null || onDeviceError === void 0 ? void 0 : onDeviceError({ source: livekit_client_1.Track.Source.ScreenShare, error }) }, { children: showText && (isScreenShareEnabled ? 'Stop screen share' : 'Share screen') })) })), visibleControls.chat && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(components_react_1.ChatToggle, { children: [showIcon && (0, jsx_runtime_1.jsx)(components_react_1.ChatIcon, {}), showText && 'Chat'] }) })), visibleControls.settings && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(SettingsMenuToggle_1.SettingsMenuToggle, { children: [showIcon && (0, jsx_runtime_1.jsx)(components_react_1.GearIcon, {}), showText && 'Settings'] }) })), visibleControls.leave && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(DisconnectButton_1.DisconnectButton, { children: [showIcon && (0, jsx_runtime_1.jsx)(components_react_1.LeaveIcon, {}), showText && 'Leave'] }) })), (0, jsx_runtime_1.jsx)(components_react_1.StartMediaButton, {})] })));
61
+ return ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, htmlProps, { children: [visibleControls.microphone && ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "lk-button-group" }, { children: [(0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(TrackToggle_1.TrackToggle, Object.assign({ source: livekit_client_1.Track.Source.Microphone, showIcon: showIcon, onChange: microphoneOnChange, onDeviceError: (error) => onDeviceError === null || onDeviceError === void 0 ? void 0 : onDeviceError({ source: livekit_client_1.Track.Source.Microphone, error }) }, { children: showText && (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamRoom.controlBar.microphone", defaultMessage: "ui.liveStreamRoom.controlBar.microphone" }) })) }), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "lk-button-group-menu" }, { children: (0, jsx_runtime_1.jsx)(components_react_1.MediaDeviceMenu, { kind: "audioinput", onActiveDeviceChange: (_kind, deviceId) => saveAudioInputDeviceId(deviceId !== null && deviceId !== void 0 ? deviceId : '') }) }))] }))), visibleControls.camera && ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "lk-button-group" }, { children: [(0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(TrackToggle_1.TrackToggle, Object.assign({ source: livekit_client_1.Track.Source.Camera, showIcon: showIcon, onChange: cameraOnChange, onDeviceError: (error) => onDeviceError === null || onDeviceError === void 0 ? void 0 : onDeviceError({ source: livekit_client_1.Track.Source.Camera, error }) }, { children: showText && (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamRoom.controlBar.camera", defaultMessage: "ui.liveStreamRoom.controlBar.camera" }) })) }), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "lk-button-group-menu" }, { children: (0, jsx_runtime_1.jsx)(components_react_1.MediaDeviceMenu, { kind: "videoinput", onActiveDeviceChange: (_kind, deviceId) => saveVideoInputDeviceId(deviceId !== null && deviceId !== void 0 ? deviceId : '') }) }))] }))), visibleControls.screenShare && browserSupportsScreenSharing && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(TrackToggle_1.TrackToggle, Object.assign({ source: livekit_client_1.Track.Source.ScreenShare, captureOptions: { audio: true, selfBrowserSurface: 'include', surfaceSwitching: 'exclude' }, showIcon: showIcon, onChange: onScreenShareChange, onDeviceError: (error) => onDeviceError === null || onDeviceError === void 0 ? void 0 : onDeviceError({ source: livekit_client_1.Track.Source.ScreenShare, error }) }, { children: showText &&
62
+ (isScreenShareEnabled ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamRoom.controlBar.stopShareScreen", defaultMessage: "ui.liveStreamRoom.controlBar.stopShareScreen" })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamRoom.controlBar.shareScreen", defaultMessage: "ui.liveStreamRoom.controlBar.shareScreen" }))) })) })), visibleControls.chat && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(components_react_1.ChatToggle, { children: [showIcon && (0, jsx_runtime_1.jsx)(components_react_1.ChatIcon, {}), showText && (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamRoom.controlBar.chat", defaultMessage: "ui.liveStreamRoom.controlBar.chat" })] }) })), visibleControls.settings && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(SettingsMenuToggle_1.SettingsMenuToggle, { children: [showIcon && (0, jsx_runtime_1.jsx)(components_react_1.GearIcon, {}), showText && (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamRoom.controlBar.settings", defaultMessage: "ui.liveStreamRoom.controlBar.settings" })] }) })), visibleControls.leave && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(DisconnectButton_1.DisconnectButton, { children: [showIcon && (0, jsx_runtime_1.jsx)(components_react_1.LeaveIcon, {}), showText && (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamRoom.controlBar.leave", defaultMessage: "ui.liveStreamRoom.controlBar.leave" })] }) })), (0, jsx_runtime_1.jsx)(components_react_1.StartMediaButton, {})] })));
61
63
  }
62
64
  exports.ControlBar = ControlBar;
package/lib/cjs/components/LiveStreamRoom/LiveStreamVideoConference/LiveStreamSettingsMenu.d.ts ADDED
@@ -0,0 +1,8 @@
1
+ export interface LiveStreamSettingsMenuProps {
2
+ className?: string;
3
+ blurEnabled?: boolean;
4
+ handleBlur?: (event: any) => void;
5
+ actionBlurDisabled?: boolean;
6
+ onlyContentMenu?: boolean;
7
+ }
8
+ export default function LiveStreamSettingsMenu(inProps: LiveStreamSettingsMenuProps): JSX.Element;
package/lib/cjs/components/LiveStreamRoom/LiveStreamVideoConference/LiveStreamSettingsMenu.js ADDED
@@ -0,0 +1,69 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ const tslib_1 = require("tslib");
4
+ const jsx_runtime_1 = require("react/jsx-runtime");
5
+ const React = tslib_1.__importStar(require("react"));
6
+ const Button_1 = tslib_1.__importDefault(require("@mui/material/Button"));
7
+ const Menu_1 = tslib_1.__importDefault(require("@mui/material/Menu"));
8
+ const material_1 = require("@mui/material");
9
+ const styles_1 = require("@mui/material/styles");
10
+ const system_1 = require("@mui/system");
11
+ const classnames_1 = tslib_1.__importDefault(require("classnames"));
12
+ const react_1 = require("react");
13
+ const react_intl_1 = require("react-intl");
14
+ const PREFIX = 'SCLiveStreamSettingsMenu';
15
+ const classes = {
16
+ root: `${PREFIX}-root`,
17
+ menuRoot: `${PREFIX}-menu-root`
18
+ };
19
+ const Root = (0, styles_1.styled)(Button_1.default, {
20
+ name: PREFIX,
21
+ slot: 'Root',
22
+ overridesResolver: (props, styles) => styles.root
23
+ })(({ theme }) => ({
24
+ borderRadius: 7,
25
+ color: theme.palette.common.white,
26
+ paddingLeft: theme.spacing(),
27
+ paddingRight: theme.spacing(),
28
+ minWidth: 45
29
+ }));
30
+ const MenuRoot = (0, styles_1.styled)(Menu_1.default, {
31
+ name: PREFIX,
32
+ slot: 'Root',
33
+ overridesResolver: (props, styles) => styles.menuRoot
34
+ })(({ theme }) => ({
35
+ '& .MuiPaper-root': {
36
+ minWidth: 120,
37
+ paddingRight: theme.spacing(2),
38
+ '& div.MuiTypography-body1': {
39
+ paddingLeft: theme.spacing(2)
40
+ },
41
+ '& .MuiFormControlLabel-label.Mui-disabled': {
42
+ color: theme.palette.text.primary
43
+ }
44
+ }
45
+ }));
46
+ function LiveStreamSettingsMenu(inProps) {
47
+ // PROPS
48
+ const props = (0, system_1.useThemeProps)({
49
+ props: inProps,
50
+ name: PREFIX
51
+ });
52
+ const { className, actionBlurDisabled = false, blurEnabled = false, handleBlur, onlyContentMenu = false } = props, rest = tslib_1.__rest(props, ["className", "actionBlurDisabled", "blurEnabled", "handleBlur", "onlyContentMenu"]);
53
+ const [anchorEl, setAnchorEl] = React.useState(null);
54
+ const open = Boolean(anchorEl);
55
+ const handleClick = (event) => {
56
+ setAnchorEl(event.currentTarget);
57
+ };
58
+ const handleClose = () => {
59
+ setAnchorEl(null);
60
+ };
61
+ const MenuContent = (0, react_1.useMemo)(() => ((0, jsx_runtime_1.jsxs)(material_1.Box, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1", component: "div" }, { children: (0, jsx_runtime_1.jsx)("b", { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamRoom.settingsMenu.visualEffect", defaultMessage: "ui.liveStreamRoom.settingsMenu.visualEffect" }) }) })), (0, jsx_runtime_1.jsx)(material_1.FormControlLabel, { labelPlacement: "start", control: (0, jsx_runtime_1.jsx)(material_1.Switch, { checked: blurEnabled, disabled: actionBlurDisabled, onChange: handleBlur, inputProps: { 'aria-label': 'controlled' } }), label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamRoom.settingsMenu.visualEffect.blurEffect", defaultMessage: "ui.liveStreamRoom.settingsMenu.visualEffect.blurEffect" }) })] })), [blurEnabled, actionBlurDisabled, handleBlur]);
62
+ if (onlyContentMenu) {
63
+ return MenuContent;
64
+ }
65
+ return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(className, classes.root, 'lk-button'), "aria-controls": open ? 'live-stream-settings-menu' : undefined, "aria-haspopup": "true", "aria-expanded": open ? 'true' : undefined, onClick: handleClick }, rest, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "more_vert" }) })), (0, jsx_runtime_1.jsx)(MenuRoot, Object.assign({ id: "live-stream-settings-menu", anchorEl: anchorEl, open: open, onClose: handleClose, MenuListProps: {
66
+ 'aria-labelledby': 'basic-button'
67
+ } }, { children: MenuContent }))] }));
68
+ }
69
+ exports.default = LiveStreamSettingsMenu;
package/lib/cjs/components/LiveStreamRoom/LiveStreamVideoConference/PreJoin.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import type { CreateLocalTracksOptions, LocalAudioTrack, LocalTrack, LocalVideoTrack } from 'livekit-client';
2
- import { Track } from 'livekit-client';
2
+ import { Track, TrackProcessor } from 'livekit-client';
3
3
  import * as React from 'react';
4
4
  import type { LocalUserChoices } from '@livekit/components-core';
5
5
  /**
@@ -28,6 +28,7 @@ export interface PreJoinProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
28
28
  * @alpha
29
29
  */
30
30
  persistUserChoices?: boolean;
31
+ videoProcessor?: TrackProcessor<Track.Kind.Video>;
31
32
  }
32
33
  /** @alpha */
33
34
  export declare function usePreviewTracks(options: CreateLocalTracksOptions, onError?: (err: Error) => void): {
@@ -55,4 +56,4 @@ export declare function usePreviewDevice<T extends LocalVideoTrack | LocalAudioT
55
56
  * ```
56
57
  * @public
57
58
  */
58
- export declare function PreJoin({ defaults, onValidate, onSubmit, onError, debug, joinLabel, micLabel, camLabel, userLabel, persistUserChoices, ...htmlProps }: PreJoinProps): JSX.Element;
59
+ export declare function PreJoin({ defaults, onValidate, onSubmit, onError, debug, joinLabel, micLabel, camLabel, userLabel, persistUserChoices, videoProcessor, ...htmlProps }: PreJoinProps): JSX.Element;
package/lib/cjs/components/LiveStreamRoom/LiveStreamVideoConference/PreJoin.js CHANGED
@@ -13,6 +13,10 @@ const ParticipantTileAvatar_1 = tslib_1.__importDefault(require("./ParticipantTi
13
13
  const react_1 = require("react");
14
14
  const TrackToggle_1 = require("./TrackToggle");
15
15
  const LiveStreamProvider_1 = require("./LiveStreamProvider");
16
+ const track_processors_1 = require("@livekit/track-processors");
17
+ const LiveStreamSettingsMenu_1 = tslib_1.__importDefault(require("./LiveStreamSettingsMenu"));
18
+ const utils_1 = require("@selfcommunity/utils");
19
+ const LiveStream_1 = require("../../../constants/LiveStream");
16
20
  /** @alpha */
17
21
  function usePreviewTracks(options, onError) {
18
22
  const [tracks, setTracks] = React.useState();
@@ -157,7 +161,8 @@ exports.usePreviewDevice = usePreviewDevice;
157
161
  * @public
158
162
  */
159
163
  function PreJoin(_a) {
160
- var { defaults = {}, onValidate, onSubmit, onError, debug, joinLabel = 'Join Room', micLabel = 'Microphone', camLabel = 'Camera', userLabel = 'Username', persistUserChoices = true } = _a, htmlProps = tslib_1.__rest(_a, ["defaults", "onValidate", "onSubmit", "onError", "debug", "joinLabel", "micLabel", "camLabel", "userLabel", "persistUserChoices"]);
164
+ var _b;
165
+ var { defaults = {}, onValidate, onSubmit, onError, debug, joinLabel = 'Join Room', micLabel = 'Microphone', camLabel = 'Camera', userLabel = 'Username', persistUserChoices = true, videoProcessor } = _a, htmlProps = tslib_1.__rest(_a, ["defaults", "onValidate", "onSubmit", "onError", "debug", "joinLabel", "micLabel", "camLabel", "userLabel", "persistUserChoices", "videoProcessor"]);
161
166
  const { liveStream } = (0, LiveStreamProvider_1.useLiveStream)();
162
167
  const scUserContext = (0, react_core_1.useSCUser)();
163
168
  const [userChoices, setUserChoices] = React.useState(components_core_2.defaultUserChoices);
@@ -176,6 +181,9 @@ function PreJoin(_a) {
176
181
  const [audioDeviceId, setAudioDeviceId] = React.useState(initialUserChoices.audioDeviceId);
177
182
  const [videoDeviceId, setVideoDeviceId] = React.useState(initialUserChoices.videoDeviceId);
178
183
  const [username, setUsername] = React.useState(initialUserChoices.username);
184
+ // Processors
185
+ const [blurEnabled, setBlurEnabled] = React.useState((0, utils_1.isClientSideRendering)() ? Boolean((_b = window === null || window === void 0 ? void 0 : window.localStorage) === null || _b === void 0 ? void 0 : _b.getItem(LiveStream_1.CHOICE_VIDEO_BLUR_EFFECT)) || false : false);
186
+ const [processorPending, setProcessorPending] = React.useState(false);
179
187
  // Save user choices to persistent storage.
180
188
  React.useEffect(() => {
181
189
  saveAudioInputEnabled(audioEnabled && canUseAudio);
@@ -230,6 +238,11 @@ function PreJoin(_a) {
230
238
  ((values.videoEnabled && values.videoDeviceId) || !values.videoEnabled));
231
239
  }
232
240
  }, [onValidate]);
241
+ const handleBlur = React.useCallback(() => {
242
+ var _a;
243
+ setBlurEnabled((enabled) => !enabled);
244
+ (_a = window === null || window === void 0 ? void 0 : window.localStorage) === null || _a === void 0 ? void 0 : _a.setItem(LiveStream_1.CHOICE_VIDEO_BLUR_EFFECT, (!blurEnabled).toString());
245
+ }, [setBlurEnabled, blurEnabled]);
233
246
  (0, react_1.useEffect)(() => {
234
247
  const newUserChoices = {
235
248
  username,
@@ -241,6 +254,22 @@ function PreJoin(_a) {
241
254
  setUserChoices(newUserChoices);
242
255
  setIsValid(handleValidation(newUserChoices));
243
256
  }, [username, scUserContext.user, videoEnabled, handleValidation, audioEnabled, audioDeviceId, videoDeviceId]);
257
+ (0, react_1.useEffect)(() => {
258
+ if (videoTrack && videoEnabled) {
259
+ setProcessorPending(true);
260
+ try {
261
+ if (blurEnabled && !videoTrack.getProcessor()) {
262
+ videoTrack.setProcessor((0, track_processors_1.BackgroundBlur)(20));
263
+ }
264
+ else if (!blurEnabled) {
265
+ videoTrack.stopProcessor();
266
+ }
267
+ }
268
+ finally {
269
+ setProcessorPending(false);
270
+ }
271
+ }
272
+ }, [blurEnabled, videoTrack, videoEnabled]);
244
273
  function handleSubmit(event) {
245
274
  event.preventDefault();
246
275
  if (handleValidation(userChoices)) {
@@ -252,6 +281,6 @@ function PreJoin(_a) {
252
281
  components_core_1.log.warn('Validation failed with: ', userChoices);
253
282
  }
254
283
  }
255
- return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "lk-prejoin" }, htmlProps, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "lk-video-container" }, { children: [videoTrack && (0, jsx_runtime_1.jsx)("video", { ref: videoEl, width: "1280", height: "720", "data-lk-facing-mode": facingMode }), (!videoTrack || !videoEnabled) && ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "lk-camera-off-note" }, { children: (0, jsx_runtime_1.jsx)(ParticipantTileAvatar_1.default, { user: scUserContext.user }) })))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "lk-button-group-container" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "lk-button-group audio" }, { children: [(0, jsx_runtime_1.jsx)(TrackToggle_1.TrackToggle, Object.assign({ disabled: !canUseAudio, initialState: audioEnabled, source: livekit_client_1.Track.Source.Microphone, onChange: (enabled) => setAudioEnabled(enabled) }, { children: micLabel })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "lk-button-group-menu" }, { children: (0, jsx_runtime_1.jsx)(components_react_1.MediaDeviceMenu, { initialSelection: audioDeviceId, kind: "audioinput", disabled: !audioTrack || !canUseAudio || !audioEnabled, tracks: { audioinput: audioTrack }, onActiveDeviceChange: (_, id) => setAudioDeviceId(id) }) }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "lk-button-group video" }, { children: [(0, jsx_runtime_1.jsx)(TrackToggle_1.TrackToggle, Object.assign({ disabled: !canUseVideo, initialState: videoEnabled, source: livekit_client_1.Track.Source.Camera, onChange: (enabled) => setVideoEnabled(enabled) }, { children: camLabel })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "lk-button-group-menu" }, { children: (0, jsx_runtime_1.jsx)(components_react_1.MediaDeviceMenu, { initialSelection: videoDeviceId, kind: "videoinput", disabled: !videoTrack || !canUseVideo || !videoEnabled, tracks: { videoinput: videoTrack }, onActiveDeviceChange: (_, id) => setVideoDeviceId(id) }) }))] }))] })), (0, jsx_runtime_1.jsx)("form", Object.assign({ className: "lk-username-container" }, { children: (0, jsx_runtime_1.jsx)("button", Object.assign({ className: "lk-button lk-join-button", type: "submit", onClick: handleSubmit, disabled: !isValid || error }, { children: joinLabel })) })), debug && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("strong", { children: "User Choices:" }), (0, jsx_runtime_1.jsxs)("ul", Object.assign({ className: "lk-list", style: { overflow: 'hidden', maxWidth: '15rem' } }, { children: [(0, jsx_runtime_1.jsxs)("li", { children: ["Username: ", `${userChoices.username}`] }), (0, jsx_runtime_1.jsxs)("li", { children: ["Video Enabled: ", `${userChoices.videoEnabled}`] }), (0, jsx_runtime_1.jsxs)("li", { children: ["Audio Enabled: ", `${userChoices.audioEnabled}`] }), (0, jsx_runtime_1.jsxs)("li", { children: ["Video Device: ", `${userChoices.videoDeviceId}`] }), (0, jsx_runtime_1.jsxs)("li", { children: ["Audio Device: ", `${userChoices.audioDeviceId}`] })] }))] }))] })));
284
+ return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "lk-prejoin" }, htmlProps, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "lk-video-container" }, { children: [videoTrack && (0, jsx_runtime_1.jsx)("video", { ref: videoEl, width: "1280", height: "720", "data-lk-facing-mode": facingMode }), (!videoTrack || !videoEnabled) && ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "lk-camera-off-note" }, { children: (0, jsx_runtime_1.jsx)(ParticipantTileAvatar_1.default, { user: scUserContext.user }) })))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "lk-button-group-container" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "lk-button-group audio" }, { children: [(0, jsx_runtime_1.jsx)(TrackToggle_1.TrackToggle, Object.assign({ disabled: !canUseAudio, initialState: audioEnabled, source: livekit_client_1.Track.Source.Microphone, onChange: (enabled) => setAudioEnabled(enabled) }, { children: micLabel })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "lk-button-group-menu" }, { children: (0, jsx_runtime_1.jsx)(components_react_1.MediaDeviceMenu, { initialSelection: audioDeviceId, kind: "audioinput", disabled: !audioTrack || !canUseAudio || !audioEnabled, tracks: { audioinput: audioTrack }, onActiveDeviceChange: (_, id) => setAudioDeviceId(id) }) }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "lk-button-group video" }, { children: [(0, jsx_runtime_1.jsx)(TrackToggle_1.TrackToggle, Object.assign({ disabled: !canUseVideo, initialState: videoEnabled, source: livekit_client_1.Track.Source.Camera, onChange: (enabled) => setVideoEnabled(enabled) }, { children: camLabel })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "lk-button-group-menu" }, { children: (0, jsx_runtime_1.jsx)(components_react_1.MediaDeviceMenu, { initialSelection: videoDeviceId, kind: "videoinput", disabled: !videoTrack || !canUseVideo || !videoEnabled, tracks: { videoinput: videoTrack }, onActiveDeviceChange: (_, id) => setVideoDeviceId(id) }) }))] })), (0, jsx_runtime_1.jsx)(LiveStreamSettingsMenu_1.default, { actionBlurDisabled: !canUseVideo || !videoEnabled, blurEnabled: blurEnabled, handleBlur: handleBlur })] })), (0, jsx_runtime_1.jsx)("form", Object.assign({ className: "lk-username-container" }, { children: (0, jsx_runtime_1.jsx)("button", Object.assign({ className: "lk-button lk-join-button", type: "submit", onClick: handleSubmit, disabled: !isValid || error }, { children: joinLabel })) })), debug && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("strong", { children: "User Choices:" }), (0, jsx_runtime_1.jsxs)("ul", Object.assign({ className: "lk-list", style: { overflow: 'hidden', maxWidth: '15rem' } }, { children: [(0, jsx_runtime_1.jsxs)("li", { children: ["Username: ", `${userChoices.username}`] }), (0, jsx_runtime_1.jsxs)("li", { children: ["Video Enabled: ", `${userChoices.videoEnabled}`] }), (0, jsx_runtime_1.jsxs)("li", { children: ["Audio Enabled: ", `${userChoices.audioEnabled}`] }), (0, jsx_runtime_1.jsxs)("li", { children: ["Video Device: ", `${userChoices.videoDeviceId}`] }), (0, jsx_runtime_1.jsxs)("li", { children: ["Audio Device: ", `${userChoices.audioDeviceId}`] })] }))] }))] })));
256
285
  }
257
286
  exports.PreJoin = PreJoin;
package/lib/cjs/components/LiveStreamRoom/LiveStreamVideoConference/VideoConference.js CHANGED
@@ -18,6 +18,10 @@ const styles_1 = require("@mui/material/styles");
18
18
  const material_1 = require("@mui/material");
19
19
  const system_1 = require("@mui/system");
20
20
  const NoParticipants_1 = tslib_1.__importDefault(require("./NoParticipants"));
21
+ const LiveStreamSettingsMenu_1 = tslib_1.__importDefault(require("./LiveStreamSettingsMenu"));
22
+ const track_processors_1 = require("@livekit/track-processors");
23
+ const utils_1 = require("@selfcommunity/utils");
24
+ const LiveStream_1 = require("../../../constants/LiveStream");
21
25
  const PREFIX = 'SCVideoConference';
22
26
  const classes = {
23
27
  root: `${PREFIX}-root`
@@ -38,7 +42,7 @@ const Root = (0, styles_1.styled)(material_1.Box, {
38
42
  *
39
43
  */
40
44
  function VideoConference(inProps) {
41
- var _a, _b;
45
+ var _a, _b, _c;
42
46
  // PROPS
43
47
  const props = (0, system_1.useThemeProps)({
44
48
  props: inProps,
@@ -55,16 +59,34 @@ function VideoConference(inProps) {
55
59
  const lastAutoFocusedScreenShareTrack = React.useRef(null);
56
60
  // HOOKS
57
61
  const scUserContext = (0, react_core_1.useSCUser)();
62
+ const [blurEnabled, setBlurEnabled] = React.useState((0, utils_1.isClientSideRendering)() ? Boolean((_a = window === null || window === void 0 ? void 0 : window.localStorage) === null || _a === void 0 ? void 0 : _a.getItem(LiveStream_1.CHOICE_VIDEO_BLUR_EFFECT)) || false : false);
63
+ const [processorPending, setProcessorPending] = React.useState(false);
58
64
  const tracks = (0, components_react_1.useTracks)([
59
65
  { source: livekit_client_1.Track.Source.Camera, withPlaceholder: true },
60
66
  { source: livekit_client_1.Track.Source.ScreenShare, withPlaceholder: false }
61
67
  ], { updateOnlyOn: [livekit_client_1.RoomEvent.ActiveSpeakersChanged], onlySubscribed: false });
62
68
  const tracksNoParticipants = (0, react_1.useMemo)(() => tracks.filter((t) => t.participant.name === scUserContext.user.username || t.participant.name === speakerFocused.username || t.source === 'screen_share'), [tracks, scUserContext.user]);
69
+ const handleBlur = React.useCallback((event) => {
70
+ var _a, _b;
71
+ if (event.target) {
72
+ if ('checked' in event.target) {
73
+ setBlurEnabled((_a = event.target) === null || _a === void 0 ? void 0 : _a.checked);
74
+ }
75
+ else {
76
+ setBlurEnabled((enabled) => !enabled);
77
+ }
78
+ }
79
+ else {
80
+ setBlurEnabled((enabled) => !enabled);
81
+ }
82
+ (_b = window === null || window === void 0 ? void 0 : window.localStorage) === null || _b === void 0 ? void 0 : _b.setItem(LiveStream_1.CHOICE_VIDEO_BLUR_EFFECT, (!blurEnabled).toString());
83
+ }, [setBlurEnabled, blurEnabled]);
63
84
  const participants = (0, components_react_1.useParticipants)();
64
85
  const layoutContext = (0, components_react_1.useCreateLayoutContext)();
65
86
  const screenShareTracks = tracks.filter(components_core_1.isTrackReference).filter((track) => track.publication.source === livekit_client_1.Track.Source.ScreenShare);
66
- const focusTrack = (_a = (0, components_react_1.usePinnedTracks)(layoutContext)) === null || _a === void 0 ? void 0 : _a[0];
87
+ const focusTrack = (_b = (0, components_react_1.usePinnedTracks)(layoutContext)) === null || _b === void 0 ? void 0 : _b[0];
67
88
  const carouselTracks = tracks.filter((track) => !(0, components_core_1.isEqualTrackRef)(track, focusTrack));
89
+ const { cameraTrack } = (0, components_react_1.useLocalParticipant)();
68
90
  (0, useLiveStreamCheck_1.useLivestreamCheck)();
69
91
  /**
70
92
  * widgetUpdate
@@ -120,7 +142,7 @@ function VideoConference(inProps) {
120
142
  }
121
143
  }, [
122
144
  screenShareTracks.map((ref) => `${ref.publication.trackSid}_${ref.publication.isSubscribed}`).join(),
123
- (_b = focusTrack === null || focusTrack === void 0 ? void 0 : focusTrack.publication) === null || _b === void 0 ? void 0 : _b.trackSid,
145
+ (_c = focusTrack === null || focusTrack === void 0 ? void 0 : focusTrack.publication) === null || _c === void 0 ? void 0 : _c.trackSid,
124
146
  tracks,
125
147
  participants,
126
148
  speakerFocused
@@ -143,11 +165,28 @@ function VideoConference(inProps) {
143
165
  }
144
166
  }
145
167
  }, [tracks, participants, speakerFocused]);
168
+ (0, react_1.useEffect)(() => {
169
+ const localCamTrack = cameraTrack === null || cameraTrack === void 0 ? void 0 : cameraTrack.track;
170
+ if (localCamTrack) {
171
+ setProcessorPending(true);
172
+ try {
173
+ if (blurEnabled && !localCamTrack.getProcessor()) {
174
+ localCamTrack.setProcessor((0, track_processors_1.BackgroundBlur)(20));
175
+ }
176
+ else if (!blurEnabled) {
177
+ localCamTrack.stopProcessor();
178
+ }
179
+ }
180
+ finally {
181
+ setProcessorPending(false);
182
+ }
183
+ }
184
+ }, [blurEnabled, cameraTrack]);
146
185
  return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(className, classes.root, 'lk-video-conference') }, rest, { children: [(0, components_core_1.isWeb)() && ((0, jsx_runtime_1.jsxs)(components_react_1.LayoutContextProvider, Object.assign({ value: layoutContext, onPinChange: handleFocusStateChange, onWidgetChange: widgetUpdate }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "lk-video-conference-inner" }, { children: [!focusTrack ? ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "lk-grid-layout-wrapper" }, { children: (0, jsx_runtime_1.jsx)(components_react_1.GridLayout, Object.assign({ tracks: hideParticipantsList ? tracksNoParticipants : tracks }, { children: (0, jsx_runtime_1.jsx)(ParticipantTile_1.ParticipantTile, {}) })) }))) : ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "lk-focus-layout-wrapper" }, { children: hideParticipantsList ? ((0, jsx_runtime_1.jsx)(FocusLayout_1.FocusLayoutContainerNoParticipants, { children: focusTrack && (0, jsx_runtime_1.jsx)(FocusLayout_1.FocusLayout, { trackRef: focusTrack }) })) : ((0, jsx_runtime_1.jsxs)(FocusLayout_1.FocusLayoutContainer, { children: [carouselTracks.length ? ((0, jsx_runtime_1.jsx)(components_react_1.CarouselLayout, Object.assign({ tracks: carouselTracks }, { children: (0, jsx_runtime_1.jsx)(ParticipantTile_1.ParticipantTile, {}) }))) : ((0, jsx_runtime_1.jsx)(NoParticipants_1.default, {})), focusTrack && (0, jsx_runtime_1.jsx)(FocusLayout_1.FocusLayout, { trackRef: focusTrack })] })) }))), (0, jsx_runtime_1.jsx)(ControlBar_1.ControlBar, { controls: Object.assign({
147
186
  chat: !disableChat,
148
187
  microphone: !disableMicrophone,
149
188
  camera: !disableCamera,
150
189
  screenShare: !disableShareScreen
151
- }, { settings: !!SettingsComponent }) })] })), !disableChat && ((0, jsx_runtime_1.jsx)(components_react_1.Chat, { style: { display: widgetState.showChat ? 'grid' : 'none' }, messageFormatter: chatMessageFormatter, messageEncoder: chatMessageEncoder, messageDecoder: chatMessageDecoder })), SettingsComponent && ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "lk-settings-menu-modal", style: { display: widgetState.showSettings ? 'block' : 'none' } }, { children: (0, jsx_runtime_1.jsx)(SettingsComponent, {}) })))] }))), (0, jsx_runtime_1.jsx)(components_react_1.RoomAudioRenderer, {}), (0, jsx_runtime_1.jsx)(components_react_1.ConnectionStateToast, {})] })));
190
+ }, { settings: true }) })] })), !disableChat && ((0, jsx_runtime_1.jsx)(components_react_1.Chat, { style: { display: widgetState.showChat ? 'grid' : 'none' }, messageFormatter: chatMessageFormatter, messageEncoder: chatMessageEncoder, messageDecoder: chatMessageDecoder })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "lk-settings-menu-modal", style: { display: widgetState.showSettings ? 'block' : 'none' } }, { children: SettingsComponent ? ((0, jsx_runtime_1.jsx)(SettingsComponent, {})) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(LiveStreamSettingsMenu_1.default, { onlyContentMenu: true, actionBlurDisabled: !cameraTrack && !disableCamera, blurEnabled: blurEnabled, handleBlur: handleBlur }) })) }))] }))), (0, jsx_runtime_1.jsx)(components_react_1.RoomAudioRenderer, {}), (0, jsx_runtime_1.jsx)(components_react_1.ConnectionStateToast, {})] })));
152
191
  }
153
192
  exports.VideoConference = VideoConference;
package/lib/cjs/constants/LiveStream.d.ts CHANGED
@@ -1,3 +1,4 @@
1
1
  export declare const LIVE_STREAM_TITLE_MAX_LENGTH = 100;
2
2
  export declare const LIVE_STREAM_SLUG_MAX_LENGTH = 50;
3
3
  export declare const LIVE_STREAM_DESCRIPTION_MAX_LENGTH = 500;
4
+ export declare const CHOICE_VIDEO_BLUR_EFFECT = "lk-video-blur";
package/lib/cjs/constants/LiveStream.js CHANGED
@@ -1,6 +1,7 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.LIVE_STREAM_DESCRIPTION_MAX_LENGTH = exports.LIVE_STREAM_SLUG_MAX_LENGTH = exports.LIVE_STREAM_TITLE_MAX_LENGTH = void 0;
3
+ exports.CHOICE_VIDEO_BLUR_EFFECT = exports.LIVE_STREAM_DESCRIPTION_MAX_LENGTH = exports.LIVE_STREAM_SLUG_MAX_LENGTH = exports.LIVE_STREAM_TITLE_MAX_LENGTH = void 0;
4
4
  exports.LIVE_STREAM_TITLE_MAX_LENGTH = 100;
5
5
  exports.LIVE_STREAM_SLUG_MAX_LENGTH = 50;
6
6
  exports.LIVE_STREAM_DESCRIPTION_MAX_LENGTH = 500;
7
+ exports.CHOICE_VIDEO_BLUR_EFFECT = 'lk-video-blur';
package/lib/esm/components/CreateLiveStreamDialog/CreateLiveStreamDialog.js CHANGED
@@ -57,7 +57,7 @@ const Transition = React.forwardRef(function Transition(props, ref) {
57
57
  * @param inProps
58
58
  */
59
59
  export default function CreateLiveStreamDialog(inProps) {
60
- var _a, _b;
60
+ var _a;
61
61
  //PROPS
62
62
  const props = useThemeProps({
63
63
  props: inProps,
@@ -66,8 +66,8 @@ export default function CreateLiveStreamDialog(inProps) {
66
66
  const { className, open = true, onClose, onSuccess } = props, rest = __rest(props, ["className", "open", "onClose", "onSuccess"]);
67
67
  // CONTEXT
68
68
  const scUserContext = useSCUser();
69
- 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]);
70
- const canCreateEvent = 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_event; }, [(_b = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _b === void 0 ? void 0 : _b.permission]);
69
+ // PERMISSION
70
+ const canCreateEvent = 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_event; }, [(_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.permission]);
71
71
  // STATE
72
72
  const [step, setStep] = useState(canCreateEvent ? CreateLiveStreamStep.SELECT_TYPE : CreateLiveStreamStep.CREATE_LIVE);
73
73
  const [liveType, setLiveType] = useState(canCreateEvent ? null : LiveStreamType.DIRECT_LIVE);
@@ -85,14 +85,14 @@ export default function CreateLiveStreamDialog(inProps) {
85
85
  }, []);
86
86
  const handleSubmit = useCallback((e) => {
87
87
  onSuccess && onSuccess(e);
88
- }, []);
88
+ }, [onSuccess]);
89
89
  useEffect(() => {
90
90
  if (!canCreateEvent) {
91
91
  setLiveType(LiveStreamType.DIRECT_LIVE);
92
92
  }
93
93
  }, [canCreateEvent]);
94
94
  // user must be logged
95
- if (!scUserContext.user || !canCreateLiveStream) {
95
+ if (!scUserContext.user) {
96
96
  return null;
97
97
  }
98
98
  /**
package/lib/esm/components/EventForm/EventForm.js CHANGED
@@ -7,7 +7,7 @@ import { useThemeProps } from '@mui/system';
7
7
  import { LocalizationProvider, MobileDatePicker, MobileTimePicker } from '@mui/x-date-pickers';
8
8
  import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
9
9
  import { EventService, formatHttpErrorCode } from '@selfcommunity/api-services';
10
- import { SCPreferences, useSCContext, useSCPreferences } from '@selfcommunity/react-core';
10
+ import { SCPreferences, useSCContext, useSCPreferences, useSCUser } from '@selfcommunity/react-core';
11
11
  import { SCEventLocationType, SCEventPrivacyType, SCEventRecurrenceType, SCFeatureName } from '@selfcommunity/types';
12
12
  import { Logger } from '@selfcommunity/utils';
13
13
  import classNames from 'classnames';
@@ -119,7 +119,7 @@ const Root = styled(Box, {
119
119
  * @param inProps
120
120
  */
121
121
  export default function EventForm(inProps) {
122
- var _a, _b, _c, _d, _e;
122
+ var _a, _b, _c, _d, _e, _f;
123
123
  //PROPS
124
124
  const props = useThemeProps({
125
125
  props: inProps,
@@ -128,6 +128,7 @@ export default function EventForm(inProps) {
128
128
  const { className, onSuccess, onError, event, presetLocation, EventAddressComponentProps = {} } = props, rest = __rest(props, ["className", "onSuccess", "onError", "event", "presetLocation", "EventAddressComponentProps"]);
129
129
  // CONTEXT
130
130
  const scContext = useSCContext();
131
+ const scUserContext = useSCUser();
131
132
  // INTL
132
133
  const intl = useIntl();
133
134
  const startDateTime = useMemo(() => getNewDate(event === null || event === void 0 ? void 0 : event.start_date), [event]);
@@ -170,6 +171,7 @@ export default function EventForm(inProps) {
170
171
  scPreferences.features.includes(SCFeatureName.LIVE_STREAM) &&
171
172
  SCPreferences.CONFIGURATIONS_LIVE_STREAM_ENABLED in scPreferences.preferences &&
172
173
  scPreferences.preferences[SCPreferences.CONFIGURATIONS_LIVE_STREAM_ENABLED].value, [scPreferences.preferences, scPreferences.features]);
174
+ 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; }, [(_b = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _b === void 0 ? void 0 : _b.permission]);
173
175
  const privateEnabled = useMemo(() => scPreferences.preferences[SCPreferences.CONFIGURATIONS_EVENTS_PRIVATE_ENABLED].value, [scPreferences.preferences]);
174
176
  const visibilityEnabled = useMemo(() => scPreferences.preferences[SCPreferences.CONFIGURATIONS_EVENTS_VISIBILITY_ENABLED].value, [scPreferences.preferences]);
175
177
  const disablePastStartTime = useMemo(() => field.startDate.getDate() === getNewDate().getDate(), [field]);
@@ -382,7 +384,7 @@ export default function EventForm(inProps) {
382
384
  start_date: field.startDate,
383
385
  location: field.location,
384
386
  geolocation: field.geolocation,
385
- live_stream: Object.assign(Object.assign({ title: field.name || `${intl.formatMessage(messages.name)}` }, (event && ((_b = event.live_stream) === null || _b === void 0 ? void 0 : _b.created_at) && { created_at: field.startDate })), { settings: field.liveStreamSettings })
387
+ live_stream: Object.assign(Object.assign({ title: field.name || `${intl.formatMessage(messages.name)}` }, (event && ((_c = event.live_stream) === null || _c === void 0 ? void 0 : _c.created_at) && { created_at: field.startDate })), { settings: field.liveStreamSettings })
386
388
  }) }, EventAddressComponentProps)), privateEnabled && (_jsxs(Box, Object.assign({ className: classes.privacySection }, { children: [_jsxs(Stack, Object.assign({ direction: "row", spacing: 1, alignItems: "center", justifyContent: "center" }, { children: [_jsxs(Typography, Object.assign({ className: classNames(classes.switchLabel, { [classes.active]: !field.isPublic }) }, { children: [_jsx(Icon, { children: "private" }), _jsx(FormattedMessage, { id: "ui.eventForm.privacy.private", defaultMessage: "ui.eventForm.privacy.private" })] })), _jsx(Switch, { className: classes.switch, checked: field.isPublic, onChange: () => setField((prev) => (Object.assign(Object.assign({}, prev), { ['isPublic']: !field.isPublic }))), disabled: event && !field.isPublic }), _jsxs(Typography, Object.assign({ className: classNames(classes.switchLabel, { [classes.active]: field.isPublic }) }, { children: [_jsx(Icon, { children: "public" }), _jsx(FormattedMessage, { id: "ui.eventForm.privacy.public", defaultMessage: "ui.eventForm.privacy.public" })] }))] })), _jsx(Typography, Object.assign({ variant: "body2", textAlign: "center", className: classes.privacySectionInfo }, { children: field.isPublic ? (_jsx(FormattedMessage, { id: "ui.eventForm.privacy.public.info", defaultMessage: "ui.eventForm.privacy.public.info", values: {
387
389
  // eslint-disable-next-line @typescript-eslint/ban-ts-ignore,@typescript-eslint/ban-ts-comment
388
390
  // @ts-ignores
@@ -392,8 +394,8 @@ export default function EventForm(inProps) {
392
394
  // @ts-ignore
393
395
  b: (chunks) => _jsx("strong", { children: chunks })
394
396
  } })) }))] }))), _jsx(TextField, { multiline: true, className: classes.description, placeholder: `${intl.formatMessage(messages.description)}`, margin: "normal", value: field.description, name: "description", onChange: handleChange, InputProps: {
395
- endAdornment: (_jsx(Typography, Object.assign({ variant: "body2" }, { children: ((_c = field.description) === null || _c === void 0 ? void 0 : _c.length) ? EVENT_DESCRIPTION_MAX_LENGTH - field.description.length : EVENT_DESCRIPTION_MAX_LENGTH })))
396
- }, error: Boolean(((_d = field.description) === null || _d === void 0 ? void 0 : _d.length) > EVENT_DESCRIPTION_MAX_LENGTH), helperText: ((_e = field.description) === null || _e === void 0 ? void 0 : _e.length) > EVENT_DESCRIPTION_MAX_LENGTH ? (_jsx(FormattedMessage, { id: "ui.eventForm.description.error.maxLength", defaultMessage: "ui.eventForm.description.error.maxLength" })) : null }), genericError && (_jsx(Box, Object.assign({ className: classes.genericError }, { children: _jsx(Alert, Object.assign({ variant: "filled", severity: "error" }, { children: genericError })) }))), _jsx(Box, Object.assign({ className: classes.actions }, { children: _jsx(LoadingButton, Object.assign({ loading: field.isSubmitting, disabled: !field.name ||
397
+ endAdornment: (_jsx(Typography, Object.assign({ variant: "body2" }, { children: ((_d = field.description) === null || _d === void 0 ? void 0 : _d.length) ? EVENT_DESCRIPTION_MAX_LENGTH - field.description.length : EVENT_DESCRIPTION_MAX_LENGTH })))
398
+ }, error: Boolean(((_e = field.description) === null || _e === void 0 ? void 0 : _e.length) > EVENT_DESCRIPTION_MAX_LENGTH), helperText: ((_f = field.description) === null || _f === void 0 ? void 0 : _f.length) > EVENT_DESCRIPTION_MAX_LENGTH ? (_jsx(FormattedMessage, { id: "ui.eventForm.description.error.maxLength", defaultMessage: "ui.eventForm.description.error.maxLength" })) : null }), genericError && (_jsx(Box, Object.assign({ className: classes.genericError }, { children: _jsx(Alert, Object.assign({ variant: "filled", severity: "error" }, { children: genericError })) }))), _jsx(Box, Object.assign({ className: classes.actions }, { children: _jsx(LoadingButton, Object.assign({ loading: field.isSubmitting, disabled: !field.name ||
397
399
  !field.startDate ||
398
400
  !field.startTime ||
399
401
  !field.endDate ||
@@ -405,5 +407,5 @@ export default function EventForm(inProps) {
405
407
  field.isSubmitting ||
406
408
  field.name.length > EVENT_TITLE_MAX_LENGTH ||
407
409
  field.description.length > EVENT_DESCRIPTION_MAX_LENGTH ||
408
- (field.location === SCEventLocationType.LIVESTREAM && !liveStreamEnabled), variant: "contained", onClick: handleSubmit, color: "secondary" }, { children: event ? (_jsx(FormattedMessage, { id: "ui.eventForm.button.edit", defaultMessage: "ui.eventForm.button.edit" })) : (_jsx(FormattedMessage, { id: "ui.eventForm.button.create", defaultMessage: "ui.eventForm.button.create" })) })) }))] }))] })));
410
+ (field.location === SCEventLocationType.LIVESTREAM && (!liveStreamEnabled || !canCreateLiveStream)), variant: "contained", onClick: handleSubmit, color: "secondary" }, { children: event ? (_jsx(FormattedMessage, { id: "ui.eventForm.button.edit", defaultMessage: "ui.eventForm.button.edit" })) : (_jsx(FormattedMessage, { id: "ui.eventForm.button.create", defaultMessage: "ui.eventForm.button.create" })) })) }))] }))] })));
409
411
  }