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

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 (13) hide show
  1. package/lib/cjs/components/LiveStreamForm/LiveStreamForm.js +22 -16
  2. package/lib/cjs/components/LiveStreamRoom/LiveStreamRoom.d.ts +17 -0
  3. package/lib/cjs/components/LiveStreamRoom/LiveStreamRoom.js +5 -3
  4. package/lib/cjs/components/LiveStreamRoom/LiveStreamVideoConference/LiveStreamVideoConference.js +68 -75
  5. package/lib/cjs/components/NavigationMenuIconButton/NavigationMenuDrawer.js +1 -0
  6. package/lib/esm/components/LiveStreamForm/LiveStreamForm.js +21 -15
  7. package/lib/esm/components/LiveStreamRoom/LiveStreamRoom.d.ts +17 -0
  8. package/lib/esm/components/LiveStreamRoom/LiveStreamRoom.js +6 -4
  9. package/lib/esm/components/LiveStreamRoom/LiveStreamVideoConference/LiveStreamVideoConference.js +69 -76
  10. package/lib/esm/components/NavigationMenuIconButton/NavigationMenuDrawer.js +2 -1
  11. package/lib/umd/react-ui.js +1 -1
  12. package/package.json +7 -7
  13. package/lib/umd/245.js +0 -1
package/lib/cjs/components/LiveStreamForm/LiveStreamForm.js CHANGED
@@ -8,11 +8,9 @@ const styles_1 = require("@mui/material/styles");
8
8
  const system_1 = require("@mui/system");
9
9
  const api_services_1 = require("@selfcommunity/api-services");
10
10
  const react_core_1 = require("@selfcommunity/react-core");
11
- const utils_1 = require("@selfcommunity/utils");
12
11
  const classnames_1 = tslib_1.__importDefault(require("classnames"));
13
12
  const react_1 = require("react");
14
13
  const react_intl_1 = require("react-intl");
15
- const Errors_1 = require("../../constants/Errors");
16
14
  const LiveStream_1 = require("../../constants/LiveStream");
17
15
  const constants_1 = require("./constants");
18
16
  const UploadEventCover_1 = tslib_1.__importDefault(require("../EventForm/UploadEventCover"));
@@ -133,25 +131,33 @@ function LiveStreamForm(inProps) {
133
131
  else {
134
132
  eventService = api_services_1.EventService.createEvent(formData, { headers: { 'Content-Type': 'multipart/form-data' } });
135
133
  }
136
- eventService
137
- .then((data) => {
134
+ setTimeout(() => {
135
+ onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess({});
138
136
  setField((prev) => (Object.assign(Object.assign({}, prev), { ['isSubmitting']: false })));
137
+ }, 1000);
138
+ /* eventService
139
+ .then((data) => {
140
+ setField((prev) => ({...prev, ['isSubmitting']: false}));
139
141
  // onSuccess?.(data);
140
- })
141
- .catch((e) => {
142
- const _error = (0, api_services_1.formatHttpErrorCode)(e);
142
+ })
143
+ .catch((e) => {
144
+ const _error = formatHttpErrorCode(e);
145
+
143
146
  // eslint-disable-next-line @typescript-eslint/ban-ts-ignore,@typescript-eslint/ban-ts-comment
144
147
  // @ts-ignore
145
148
  if (Object.values(_error)[0].error === 'unique') {
146
- setError(Object.assign(Object.assign({}, error), { ['titleError']: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamForm.title.error.unique", defaultMessage: "ui.liveStreamForm.title.error.unique" }) }));
149
+ setError({
150
+ ...error,
151
+ ['titleError']: <FormattedMessage id="ui.liveStreamForm.title.error.unique" defaultMessage="ui.liveStreamForm.title.error.unique" />
152
+ });
153
+ } else {
154
+ setError({...error, ..._error});
147
155
  }
148
- else {
149
- setError(Object.assign(Object.assign({}, error), _error));
150
- }
151
- setField((prev) => (Object.assign(Object.assign({}, prev), { ['isSubmitting']: false })));
152
- utils_1.Logger.error(Errors_1.SCOPE_SC_UI, e);
153
- onError === null || onError === void 0 ? void 0 : onError(e);
154
- });
156
+
157
+ setField((prev) => ({...prev, ['isSubmitting']: false}));
158
+ Logger.error(SCOPE_SC_UI, e);
159
+ onError?.(e);
160
+ }); */
155
161
  }, [field, privateEnabled, visibilityEnabled, onSuccess, onError]);
156
162
  const handleChange = (0, react_1.useCallback)((event) => {
157
163
  const { name, value } = event.target;
@@ -168,7 +174,7 @@ function LiveStreamForm(inProps) {
168
174
  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
175
  }, 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
176
  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: {
177
+ }, 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: {
172
178
  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
179
  }, 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
180
  Object.keys(error).length !== 0 ||
package/lib/cjs/components/LiveStreamRoom/LiveStreamRoom.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  import { BoxProps } from '@mui/material';
2
2
  import { SCLiveStreamType } from '@selfcommunity/types';
3
+ import React from 'react';
3
4
  import '@livekit/components-styles';
4
5
  export interface LiveStreamRoomProps extends BoxProps {
5
6
  /**
@@ -16,6 +17,22 @@ export interface LiveStreamRoomProps extends BoxProps {
16
17
  * Endpoint livestream access
17
18
  */
18
19
  connectionDetailsEndpoint?: string;
20
+ /**
21
+ * Element to be inserted before title
22
+ */
23
+ startPrejoinContent?: React.ReactNode | null;
24
+ /**
25
+ * Element to be inserted after title
26
+ */
27
+ endPrejoinContent?: React.ReactNode | null;
28
+ /**
29
+ * Show title of livestream in prejoin
30
+ */
31
+ showPrejoinTitle?: boolean;
32
+ /**
33
+ * Show description of livestream in prejoin
34
+ */
35
+ showPrejoinDescription?: boolean;
19
36
  /**
20
37
  * Any other properties
21
38
  */
package/lib/cjs/components/LiveStreamRoom/LiveStreamRoom.js CHANGED
@@ -19,8 +19,10 @@ const classes = {
19
19
  content: `${constants_1.PREFIX}-content`,
20
20
  title: `${constants_1.PREFIX}-title`,
21
21
  description: `${constants_1.PREFIX}-description`,
22
+ startPrejoinContent: `${constants_1.PREFIX}-start-prejoin-content`,
22
23
  preJoin: `${constants_1.PREFIX}-prejoin`,
23
- conference: `${constants_1.PREFIX}-prejoin`,
24
+ endPrejoinContent: `${constants_1.PREFIX}-end-prejoin-content`,
25
+ conference: `${constants_1.PREFIX}-conference`,
24
26
  error: `${constants_1.PREFIX}-error`
25
27
  };
26
28
  const Root = (0, styles_1.styled)(material_1.Box, {
@@ -59,7 +61,7 @@ function LiveStreamRoom(inProps) {
59
61
  props: inProps,
60
62
  name: constants_1.PREFIX
61
63
  });
62
- const { className, liveStream = null, connectionDetailsEndpoint } = props, rest = tslib_1.__rest(props, ["className", "liveStream", "connectionDetailsEndpoint"]);
64
+ const { className, liveStream = null, showPrejoinTitle = true, showPrejoinDescription = false, startPrejoinContent, endPrejoinContent, connectionDetailsEndpoint } = props, rest = tslib_1.__rest(props, ["className", "liveStream", "showPrejoinTitle", "showPrejoinDescription", "startPrejoinContent", "endPrejoinContent", "connectionDetailsEndpoint"]);
63
65
  // CONTEXT
64
66
  const scUserContext = (0, react_core_1.useSCUser)();
65
67
  const { preferences, features } = (0, react_core_1.useSCPreferences)();
@@ -123,6 +125,6 @@ function LiveStreamRoom(inProps) {
123
125
  /**
124
126
  * Renders root object
125
127
  */
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 } }) })))] })) })));
128
+ return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.content, "data-lk-theme": "default" }, { children: connectionDetails === undefined || preJoinChoices === undefined ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [startPrejoinContent && (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.startPrejoinContent }, { children: startPrejoinContent })), (liveStream === null || liveStream === void 0 ? void 0 : liveStream.title) && (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.title }, { children: liveStream === null || liveStream === void 0 ? void 0 : liveStream.title })), (liveStream === null || liveStream === void 0 ? void 0 : liveStream.description) && (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.description }, { children: liveStream === null || liveStream === void 0 ? void 0 : liveStream.description })), (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.endPrejoinContent }, { children: startPrejoinContent }))] })) : ((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 } }) }))) })) })));
127
129
  }
128
130
  exports.default = LiveStreamRoom;
package/lib/cjs/components/LiveStreamRoom/LiveStreamVideoConference/LiveStreamVideoConference.js CHANGED
@@ -2,8 +2,6 @@
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
- // eslint-disable-next-line @typescript-eslint/ban-ts-comment
6
- // @ts-nocheck
7
5
  const material_1 = require("@mui/material");
8
6
  const styles_1 = require("@mui/material/styles");
9
7
  const system_1 = require("@mui/system");
@@ -11,9 +9,7 @@ const react_core_1 = require("@selfcommunity/react-core");
11
9
  const classnames_1 = tslib_1.__importDefault(require("classnames"));
12
10
  const constants_1 = require("./constants");
13
11
  const components_react_1 = require("@livekit/components-react");
14
- const livekit_client_1 = require("livekit-client");
15
12
  const react_1 = require("react");
16
- const liveStream_1 = require("../../../utils/liveStream");
17
13
  const RecordingIndicator_1 = tslib_1.__importDefault(require("./RecordingIndicator"));
18
14
  const components_core_1 = require("@livekit/components-core");
19
15
  const constants_2 = require("../constants");
@@ -60,16 +56,15 @@ function LiveStreamVideoConference(inProps) {
60
56
  const scUserContext = (0, react_core_1.useSCUser)();
61
57
  const { preferences, features } = (0, react_core_1.useSCPreferences)();
62
58
  // Passphrase
63
- const e2eePassphrase = typeof window !== 'undefined' && (0, liveStream_1.decodePassphrase)(location.hash.substring(1));
59
+ // const e2eePassphrase = typeof window !== 'undefined' && decodePassphrase(location.hash.substring(1));
64
60
  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
65
61
  // @ts-ignore
66
- const worker = typeof window !== 'undefined' && e2eePassphrase && new Worker(new URL('livekit-client/e2ee-worker', import.meta.url));
67
- const e2eeEnabled = !!(e2eePassphrase && worker);
68
- const keyProvider = new livekit_client_1.ExternalE2EEKeyProvider();
69
- const [e2eeSetupComplete, setE2eeSetupComplete] = (0, react_1.useState)(false);
70
- const [liveActive, setLiveActive] = (0, react_1.useState)(false);
62
+ // const worker = typeof window !== 'undefined' && e2eePassphrase && new Worker(new URL('livekit-client/e2ee-worker', import.meta.url));
63
+ // const e2eeEnabled = !!(e2eePassphrase && worker);
64
+ // const keyProvider = new ExternalE2EEKeyProvider();
65
+ const [e2eeSetupComplete, setE2eeSetupComplete] = (0, react_1.useState)(true);
66
+ const [liveActive, setLiveActive] = (0, react_1.useState)(true);
71
67
  const [error, setError] = (0, react_1.useState)(null);
72
- const liveStreamRoomMaxParticipants = 25;
73
68
  /* const liveStreamRoomMaxParticipants = useMemo(
74
69
  () =>
75
70
  preferences &&
@@ -78,76 +73,74 @@ function LiveStreamVideoConference(inProps) {
78
73
  [preferences]
79
74
  ); */
80
75
  // Room options
81
- const roomOptions = (0, react_1.useMemo)(() => {
82
- var _a, _b;
83
- let videoCodec = options.codec ? options.codec : constants_2.defaultVideoOptions.codec;
84
- if (e2eeEnabled && (videoCodec === 'av1' || videoCodec === 'vp9')) {
85
- videoCodec = undefined;
86
- }
87
- return {
88
- // emptyTimeout: 3 * 60, // 3 minutes
89
- // maxParticipants: liveStreamRoomMaxParticipants,
90
- videoCaptureDefaults: {
91
- deviceId: (_a = userChoices.videoDeviceId) !== null && _a !== void 0 ? _a : undefined,
92
- resolution: options.hq ? livekit_client_1.VideoPresets.h2160 : livekit_client_1.VideoPresets.h720
93
- },
94
- publishDefaults: {
95
- dtx: false,
96
- videoSimulcastLayers: options.hq ? [livekit_client_1.VideoPresets.h1080, livekit_client_1.VideoPresets.h720] : [livekit_client_1.VideoPresets.h540, livekit_client_1.VideoPresets.h216],
97
- red: !e2eeEnabled,
98
- videoCodec
99
- },
100
- audioCaptureDefaults: {
101
- deviceId: (_b = userChoices.audioDeviceId) !== null && _b !== void 0 ? _b : undefined
102
- },
103
- adaptiveStream: { pixelDensity: 'screen' },
104
- dynacast: true,
105
- e2ee: e2eeEnabled
106
- ? {
107
- keyProvider,
108
- worker
109
- }
110
- : undefined
111
- };
112
- }, [liveStreamRoomMaxParticipants, userChoices, options.hq, options.codec]);
76
+ /* const roomOptions = useMemo((): RoomOptions => {
77
+ let videoCodec: VideoCodec | undefined = options.codec ? options.codec : defaultVideoOptions.codec;
78
+ if (e2eeEnabled && (videoCodec === 'av1' || videoCodec === 'vp9')) {
79
+ videoCodec = undefined;
80
+ }
81
+ return {
82
+ // emptyTimeout: 3 * 60, // 3 minutes
83
+ // maxParticipants: liveStreamRoomMaxParticipants,
84
+ videoCaptureDefaults: {
85
+ deviceId: userChoices.videoDeviceId ?? undefined,
86
+ resolution: options.hq ? VideoPresets.h2160 : VideoPresets.h720
87
+ },
88
+ publishDefaults: {
89
+ dtx: false,
90
+ videoSimulcastLayers: options.hq ? [VideoPresets.h1080, VideoPresets.h720] : [VideoPresets.h540, VideoPresets.h216],
91
+ red: !e2eeEnabled,
92
+ videoCodec
93
+ },
94
+ audioCaptureDefaults: {
95
+ deviceId: userChoices.audioDeviceId ?? undefined
96
+ },
97
+ adaptiveStream: {pixelDensity: 'screen'},
98
+ dynacast: true,
99
+ e2ee: e2eeEnabled
100
+ ? {
101
+ keyProvider,
102
+ worker
103
+ }
104
+ : undefined
105
+ };
106
+ }, [liveStreamRoomMaxParticipants, userChoices, options.hq, options.codec]); */
113
107
  // Create room - only initial
114
- const room = (0, react_1.useMemo)(() => {
115
- if (liveStreamRoomMaxParticipants) {
116
- return new livekit_client_1.Room(roomOptions);
117
- }
118
- }, [liveStreamRoomMaxParticipants]);
108
+ /* const room = useMemo(() => {
109
+ const room = new Room();
110
+ return new Room(roomOptions);
111
+ }, [liveStreamRoomMaxParticipants]); */
119
112
  const connectOptions = (0, react_1.useMemo)(() => {
120
113
  return {
121
114
  autoSubscribe: true
122
115
  };
123
116
  }, []);
124
- (0, react_1.useEffect)(() => {
125
- if (room) {
126
- if (e2eeEnabled) {
127
- keyProvider
128
- .setKey((0, liveStream_1.decodePassphrase)(e2eePassphrase))
129
- .then(() => {
130
- room.setE2EEEnabled(true).catch((e) => {
131
- if (e instanceof livekit_client_1.DeviceUnsupportedError) {
132
- alert(`You're trying to join an encrypted meeting, but your browser does not support it. Please update it to the latest version and try again.`);
133
- console.error(e);
134
- }
135
- else {
136
- throw e;
137
- }
138
- });
139
- })
140
- .then(() => {
141
- setE2eeSetupComplete(true);
142
- setLiveActive(true);
143
- });
144
- }
145
- else {
146
- setE2eeSetupComplete(true);
147
- setLiveActive(true);
148
- }
117
+ /* useEffect(() => {
118
+ if (room) {
119
+ if (e2eeEnabled) {
120
+ keyProvider
121
+ .setKey(decodePassphrase(e2eePassphrase))
122
+ .then(() => {
123
+ room.setE2EEEnabled(true).catch((e) => {
124
+ if (e instanceof DeviceUnsupportedError) {
125
+ alert(
126
+ `You're trying to join an encrypted meeting, but your browser does not support it. Please update it to the latest version and try again.`
127
+ );
128
+ console.error(e);
129
+ } else {
130
+ throw e;
131
+ }
132
+ });
133
+ })
134
+ .then(() => {
135
+ setE2eeSetupComplete(true);
136
+ setLiveActive(true);
137
+ });
138
+ } else {
139
+ setE2eeSetupComplete(true);
140
+ setLiveActive(true);
149
141
  }
150
- }, [e2eeEnabled, room, e2eePassphrase]);
142
+ }
143
+ }, [e2eeEnabled, room, e2eePassphrase]); */
151
144
  // HANDLERS
152
145
  /**
153
146
  * Handle on leave
@@ -181,6 +174,6 @@ function LiveStreamVideoConference(inProps) {
181
174
  /**
182
175
  * Renders root object
183
176
  */
184
- return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: room && liveActive && !error ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(components_react_1.LiveKitRoom, Object.assign({ connect: Boolean(e2eeSetupComplete && liveActive && room), room: room, token: connectionDetails['participantToken'], serverUrl: connectionDetails['serverUrl'], connectOptions: connectOptions, video: userChoices.videoEnabled, audio: userChoices.audioEnabled, onDisconnected: handleOnLeave, onEncryptionError: handleEncryptionError, onError: handleError }, LiveKitRoomComponentsProps, { children: [(0, jsx_runtime_1.jsx)(components_react_1.VideoConference, { chatMessageFormatter: components_react_1.formatChatMessageLinks }), (0, jsx_runtime_1.jsx)(RecordingIndicator_1.default, {}), (0, jsx_runtime_1.jsx)(components_react_1.ConnectionState, {})] })) })) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: error ? error : liveActive === false ? (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: "Grazie!" }) : (0, jsx_runtime_1.jsx)(material_1.CircularProgress, {}) })) })));
177
+ return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: liveActive && !error ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(components_react_1.LiveKitRoom, Object.assign({ connect: Boolean(e2eeSetupComplete && liveActive), token: connectionDetails['participantToken'], serverUrl: connectionDetails['serverUrl'], connectOptions: connectOptions, video: userChoices.videoEnabled, audio: userChoices.audioEnabled, onDisconnected: handleOnLeave, onEncryptionError: handleEncryptionError, onError: handleError }, LiveKitRoomComponentsProps, { children: [(0, jsx_runtime_1.jsx)(components_react_1.VideoConference, { chatMessageFormatter: components_react_1.formatChatMessageLinks }), (0, jsx_runtime_1.jsx)(RecordingIndicator_1.default, {}), (0, jsx_runtime_1.jsx)(components_react_1.ConnectionState, {})] })) })) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: error ? error : liveActive === false ? (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: "Grazie!" }) : (0, jsx_runtime_1.jsx)(material_1.CircularProgress, {}) })) })));
185
178
  }
186
179
  exports.default = LiveStreamVideoConference;
package/lib/cjs/components/NavigationMenuIconButton/NavigationMenuDrawer.js CHANGED
@@ -38,6 +38,7 @@ function NavigationMenuDrawer(inProps) {
38
38
  });
39
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"]);
40
40
  const { preferences, features } = (0, react_core_1.useSCPreferences)();
41
+ const scUserContext = (0, react_core_1.useSCUser)();
41
42
  // TODO
42
43
  const liveStreamEnabled = true;
43
44
  /* const liveStreamEnabled = useMemo(
package/lib/esm/components/LiveStreamForm/LiveStreamForm.js CHANGED
@@ -4,13 +4,11 @@ import { LoadingButton } from '@mui/lab';
4
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
- import { EventService, formatHttpErrorCode } from '@selfcommunity/api-services';
7
+ import { EventService } from '@selfcommunity/api-services';
8
8
  import { SCPreferences, useSCContext, useSCPreferences } from '@selfcommunity/react-core';
9
- import { Logger } from '@selfcommunity/utils';
10
9
  import classNames from 'classnames';
11
10
  import { useCallback, useMemo, useState } from 'react';
12
11
  import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
13
- import { SCOPE_SC_UI } from '../../constants/Errors';
14
12
  import { LIVE_STREAM_DESCRIPTION_MAX_LENGTH, LIVE_STREAM_TITLE_MAX_LENGTH, LIVE_STREAM_SLUG_MAX_LENGTH } from '../../constants/LiveStream';
15
13
  import { PREFIX } from './constants';
16
14
  import UploadEventCover from '../EventForm/UploadEventCover';
@@ -131,25 +129,33 @@ export default function LiveStreamForm(inProps) {
131
129
  else {
132
130
  eventService = EventService.createEvent(formData, { headers: { 'Content-Type': 'multipart/form-data' } });
133
131
  }
134
- eventService
135
- .then((data) => {
132
+ setTimeout(() => {
133
+ onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess({});
136
134
  setField((prev) => (Object.assign(Object.assign({}, prev), { ['isSubmitting']: false })));
135
+ }, 1000);
136
+ /* eventService
137
+ .then((data) => {
138
+ setField((prev) => ({...prev, ['isSubmitting']: false}));
137
139
  // onSuccess?.(data);
138
- })
139
- .catch((e) => {
140
+ })
141
+ .catch((e) => {
140
142
  const _error = formatHttpErrorCode(e);
143
+
141
144
  // eslint-disable-next-line @typescript-eslint/ban-ts-ignore,@typescript-eslint/ban-ts-comment
142
145
  // @ts-ignore
143
146
  if (Object.values(_error)[0].error === 'unique') {
144
- setError(Object.assign(Object.assign({}, error), { ['titleError']: _jsx(FormattedMessage, { id: "ui.liveStreamForm.title.error.unique", defaultMessage: "ui.liveStreamForm.title.error.unique" }) }));
147
+ setError({
148
+ ...error,
149
+ ['titleError']: <FormattedMessage id="ui.liveStreamForm.title.error.unique" defaultMessage="ui.liveStreamForm.title.error.unique" />
150
+ });
151
+ } else {
152
+ setError({...error, ..._error});
145
153
  }
146
- else {
147
- setError(Object.assign(Object.assign({}, error), _error));
148
- }
149
- setField((prev) => (Object.assign(Object.assign({}, prev), { ['isSubmitting']: false })));
154
+
155
+ setField((prev) => ({...prev, ['isSubmitting']: false}));
150
156
  Logger.error(SCOPE_SC_UI, e);
151
- onError === null || onError === void 0 ? void 0 : onError(e);
152
- });
157
+ onError?.(e);
158
+ }); */
153
159
  }, [field, privateEnabled, visibilityEnabled, onSuccess, onError]);
154
160
  const handleChange = useCallback((event) => {
155
161
  const { name, value } = event.target;
@@ -166,7 +172,7 @@ export default function LiveStreamForm(inProps) {
166
172
  endAdornment: _jsx(Typography, Object.assign({ variant: "body2" }, { children: LIVE_STREAM_TITLE_MAX_LENGTH - field.title.length }))
167
173
  }, 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
174
  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: {
175
+ }, error: Boolean(field.slug.length > LIVE_STREAM_SLUG_MAX_LENGTH) || Boolean(error['slugError']), helperText: field.title.length > LIVE_STREAM_SLUG_MAX_LENGTH ? (_jsx(FormattedMessage, { id: "ui.liveStreamForm.slug.error.maxLength", defaultMessage: "ui.liveStreamForm.slug.error.maxLength" })) : error['slugError'] ? (error['slugError']) : 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
176
  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
177
  }, 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
178
  Object.keys(error).length !== 0 ||
package/lib/esm/components/LiveStreamRoom/LiveStreamRoom.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  import { BoxProps } from '@mui/material';
2
2
  import { SCLiveStreamType } from '@selfcommunity/types';
3
+ import React from 'react';
3
4
  import '@livekit/components-styles';
4
5
  export interface LiveStreamRoomProps extends BoxProps {
5
6
  /**
@@ -16,6 +17,22 @@ export interface LiveStreamRoomProps extends BoxProps {
16
17
  * Endpoint livestream access
17
18
  */
18
19
  connectionDetailsEndpoint?: string;
20
+ /**
21
+ * Element to be inserted before title
22
+ */
23
+ startPrejoinContent?: React.ReactNode | null;
24
+ /**
25
+ * Element to be inserted after title
26
+ */
27
+ endPrejoinContent?: React.ReactNode | null;
28
+ /**
29
+ * Show title of livestream in prejoin
30
+ */
31
+ showPrejoinTitle?: boolean;
32
+ /**
33
+ * Show description of livestream in prejoin
34
+ */
35
+ showPrejoinDescription?: boolean;
19
36
  /**
20
37
  * Any other properties
21
38
  */
package/lib/esm/components/LiveStreamRoom/LiveStreamRoom.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { __awaiter, __rest } from "tslib";
2
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
3
3
  import { Box, CircularProgress } from '@mui/material';
4
4
  import { styled } from '@mui/material/styles';
5
5
  import { useThemeProps } from '@mui/system';
@@ -17,8 +17,10 @@ const classes = {
17
17
  content: `${PREFIX}-content`,
18
18
  title: `${PREFIX}-title`,
19
19
  description: `${PREFIX}-description`,
20
+ startPrejoinContent: `${PREFIX}-start-prejoin-content`,
20
21
  preJoin: `${PREFIX}-prejoin`,
21
- conference: `${PREFIX}-prejoin`,
22
+ endPrejoinContent: `${PREFIX}-end-prejoin-content`,
23
+ conference: `${PREFIX}-conference`,
22
24
  error: `${PREFIX}-error`
23
25
  };
24
26
  const Root = styled(Box, {
@@ -57,7 +59,7 @@ export default function LiveStreamRoom(inProps) {
57
59
  props: inProps,
58
60
  name: PREFIX
59
61
  });
60
- const { className, liveStream = null, connectionDetailsEndpoint } = props, rest = __rest(props, ["className", "liveStream", "connectionDetailsEndpoint"]);
62
+ const { className, liveStream = null, showPrejoinTitle = true, showPrejoinDescription = false, startPrejoinContent, endPrejoinContent, connectionDetailsEndpoint } = props, rest = __rest(props, ["className", "liveStream", "showPrejoinTitle", "showPrejoinDescription", "startPrejoinContent", "endPrejoinContent", "connectionDetailsEndpoint"]);
61
63
  // CONTEXT
62
64
  const scUserContext = useSCUser();
63
65
  const { preferences, features } = useSCPreferences();
@@ -121,5 +123,5 @@ export default function LiveStreamRoom(inProps) {
121
123
  /**
122
124
  * Renders root object
123
125
  */
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 } }) })))] })) })));
126
+ return (_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: _jsx(Box, Object.assign({ className: classes.content, "data-lk-theme": "default" }, { children: connectionDetails === undefined || preJoinChoices === undefined ? (_jsxs(_Fragment, { children: [startPrejoinContent && _jsx(Box, Object.assign({ className: classes.startPrejoinContent }, { children: startPrejoinContent })), (liveStream === null || liveStream === void 0 ? void 0 : liveStream.title) && _jsx(Box, Object.assign({ className: classes.title }, { children: liveStream === null || liveStream === void 0 ? void 0 : liveStream.title })), (liveStream === null || liveStream === void 0 ? void 0 : liveStream.description) && _jsx(Box, Object.assign({ className: classes.description }, { children: liveStream === null || liveStream === void 0 ? void 0 : liveStream.description })), _jsx(Box, Object.assign({ className: classes.preJoin }, { children: _jsx(PreJoin, { persistUserChoices: true, defaults: preJoinDefaults, onSubmit: handlePreJoinSubmit, onError: handlePreJoinError }) })), _jsx(Box, Object.assign({ className: classes.endPrejoinContent }, { children: startPrejoinContent }))] })) : (_jsx(Box, Object.assign({ className: classes.conference }, { children: _jsx(LiveStreamVideoConference, { connectionDetails: connectionDetails, userChoices: preJoinChoices, options: { codec: props.codec, hq: props.hq } }) }))) })) })));
125
127
  }