@selfcommunity/react-ui 0.8.0-live.58 → 0.8.0-live.59
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.
- package/lib/cjs/components/CreateLiveStreamDialog/CreateLiveStreamDialog.js +8 -7
- package/lib/cjs/components/EventForm/EventAddress.js +7 -6
- package/lib/cjs/components/EventForm/EventForm.d.ts +6 -1
- package/lib/cjs/components/EventForm/EventForm.js +27 -9
- package/lib/cjs/components/EventForm/types.d.ts +2 -1
- package/lib/cjs/components/LiveStreamForm/LiveStreamFormSettings.d.ts +2 -1
- package/lib/cjs/components/LiveStreamForm/LiveStreamFormSettings.js +1 -1
- package/lib/cjs/components/LiveStreamForm/constants.d.ts +3 -0
- package/lib/cjs/components/LiveStreamForm/constants.js +6 -3
- package/lib/cjs/components/LiveStreamRoom/LiveStreamRoom.js +12 -6
- package/lib/cjs/components/LiveStreamRoom/LiveStreamVideoConference/LiveStreamVideoConference.js +5 -1
- package/lib/cjs/components/LiveStreamRoom/LiveStreamVideoConference/ParticipantPlaceholder.d.ts +6 -0
- package/lib/cjs/components/LiveStreamRoom/LiveStreamVideoConference/ParticipantPlaceholder.js +8 -0
- package/lib/cjs/components/LiveStreamRoom/LiveStreamVideoConference/ParticipantTile.d.ts +27 -0
- package/lib/cjs/components/LiveStreamRoom/LiveStreamVideoConference/ParticipantTile.js +65 -0
- package/lib/cjs/components/LiveStreamRoom/LiveStreamVideoConference/ParticipantTileActions.d.ts +26 -0
- package/lib/cjs/components/LiveStreamRoom/LiveStreamVideoConference/ParticipantTileActions.js +194 -0
- package/lib/cjs/components/LiveStreamRoom/LiveStreamVideoConference/ParticipantTileAvatar.d.ts +15 -0
- package/lib/cjs/components/LiveStreamRoom/LiveStreamVideoConference/ParticipantTileAvatar.js +38 -0
- package/lib/cjs/components/LiveStreamRoom/LiveStreamVideoConference/PreJoin.d.ts +61 -0
- package/lib/cjs/components/LiveStreamRoom/LiveStreamVideoConference/PreJoin.js +247 -0
- package/lib/cjs/components/LiveStreamRoom/LiveStreamVideoConference/TrackToggle.d.ts +23 -0
- package/lib/cjs/components/LiveStreamRoom/LiveStreamVideoConference/TrackToggle.js +31 -0
- package/lib/cjs/components/LiveStreamRoom/LiveStreamVideoConference/VideoConference.d.ts +4 -3
- package/lib/cjs/components/LiveStreamRoom/LiveStreamVideoConference/VideoConference.js +5 -4
- package/lib/cjs/components/LiveStreamRoom/LiveStreamVideoConference/constants.d.ts +1 -0
- package/lib/cjs/components/LiveStreamRoom/LiveStreamVideoConference/constants.js +2 -1
- package/lib/esm/components/CreateLiveStreamDialog/CreateLiveStreamDialog.js +2 -1
- package/lib/esm/components/EventForm/EventAddress.js +7 -6
- package/lib/esm/components/EventForm/EventForm.d.ts +6 -1
- package/lib/esm/components/EventForm/EventForm.js +27 -9
- package/lib/esm/components/EventForm/types.d.ts +2 -1
- package/lib/esm/components/LiveStreamForm/LiveStreamFormSettings.d.ts +2 -1
- package/lib/esm/components/LiveStreamForm/LiveStreamFormSettings.js +1 -1
- package/lib/esm/components/LiveStreamForm/constants.d.ts +3 -0
- package/lib/esm/components/LiveStreamForm/constants.js +6 -3
- package/lib/esm/components/LiveStreamRoom/LiveStreamRoom.js +13 -7
- package/lib/esm/components/LiveStreamRoom/LiveStreamVideoConference/LiveStreamVideoConference.js +5 -1
- package/lib/esm/components/LiveStreamRoom/LiveStreamVideoConference/ParticipantPlaceholder.d.ts +6 -0
- package/lib/esm/components/LiveStreamRoom/LiveStreamVideoConference/ParticipantPlaceholder.js +6 -0
- package/lib/esm/components/LiveStreamRoom/LiveStreamVideoConference/ParticipantTile.d.ts +27 -0
- package/lib/esm/components/LiveStreamRoom/LiveStreamVideoConference/ParticipantTile.js +60 -0
- package/lib/esm/components/LiveStreamRoom/LiveStreamVideoConference/ParticipantTileActions.d.ts +26 -0
- package/lib/esm/components/LiveStreamRoom/LiveStreamVideoConference/ParticipantTileActions.js +191 -0
- package/lib/esm/components/LiveStreamRoom/LiveStreamVideoConference/ParticipantTileAvatar.d.ts +15 -0
- package/lib/esm/components/LiveStreamRoom/LiveStreamVideoConference/ParticipantTileAvatar.js +35 -0
- package/lib/esm/components/LiveStreamRoom/LiveStreamVideoConference/PreJoin.d.ts +61 -0
- package/lib/esm/components/LiveStreamRoom/LiveStreamVideoConference/PreJoin.js +241 -0
- package/lib/esm/components/LiveStreamRoom/LiveStreamVideoConference/TrackToggle.d.ts +23 -0
- package/lib/esm/components/LiveStreamRoom/LiveStreamVideoConference/TrackToggle.js +27 -0
- package/lib/esm/components/LiveStreamRoom/LiveStreamVideoConference/VideoConference.d.ts +4 -3
- package/lib/esm/components/LiveStreamRoom/LiveStreamVideoConference/VideoConference.js +6 -5
- package/lib/esm/components/LiveStreamRoom/LiveStreamVideoConference/constants.d.ts +1 -0
- package/lib/esm/components/LiveStreamRoom/LiveStreamVideoConference/constants.js +1 -0
- package/lib/umd/react-ui.js +1 -1
- package/package.json +7 -7
|
@@ -6,13 +6,14 @@ const react_1 = tslib_1.__importStar(require("react"));
|
|
|
6
6
|
const styles_1 = require("@mui/material/styles");
|
|
7
7
|
const system_1 = require("@mui/system");
|
|
8
8
|
const react_core_1 = require("@selfcommunity/react-core");
|
|
9
|
+
const types_1 = require("@selfcommunity/types");
|
|
9
10
|
const classnames_1 = tslib_1.__importDefault(require("classnames"));
|
|
10
11
|
const react_intl_1 = require("react-intl");
|
|
11
12
|
const BaseDialog_1 = tslib_1.__importDefault(require("../../shared/BaseDialog"));
|
|
12
13
|
const constants_1 = require("./constants");
|
|
13
14
|
const EventForm_1 = tslib_1.__importDefault(require("../EventForm"));
|
|
14
15
|
const LiveStreamSelector_1 = tslib_1.__importDefault(require("./LiveStreamSelector/LiveStreamSelector"));
|
|
15
|
-
const
|
|
16
|
+
const types_2 = require("./types");
|
|
16
17
|
const LiveStreamForm_1 = tslib_1.__importDefault(require("../LiveStreamForm"));
|
|
17
18
|
const Slide_1 = tslib_1.__importDefault(require("@mui/material/Slide"));
|
|
18
19
|
const material_1 = require("@mui/material");
|
|
@@ -69,25 +70,25 @@ function CreateLiveStreamDialog(inProps) {
|
|
|
69
70
|
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]);
|
|
70
71
|
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
72
|
// STATE
|
|
72
|
-
const [step, setStep] = (0, react_1.useState)(canCreateEvent ?
|
|
73
|
-
const [liveType, setLiveType] = (0, react_1.useState)(canCreateEvent ? null :
|
|
73
|
+
const [step, setStep] = (0, react_1.useState)(canCreateEvent ? types_2.CreateLiveStreamStep.SELECT_TYPE : types_2.CreateLiveStreamStep.CREATE_LIVE);
|
|
74
|
+
const [liveType, setLiveType] = (0, react_1.useState)(canCreateEvent ? null : types_2.LiveStreamType.DIRECT_LIVE);
|
|
74
75
|
// HANDLER
|
|
75
76
|
const handleLiveTypeSelected = (0, react_1.useCallback)((l) => {
|
|
76
77
|
setLiveType(l);
|
|
77
78
|
}, []);
|
|
78
79
|
const handleLiveTypeSelectedNext = (0, react_1.useCallback)((l) => {
|
|
79
80
|
setLiveType(l);
|
|
80
|
-
setStep(
|
|
81
|
+
setStep(types_2.CreateLiveStreamStep.CREATE_LIVE);
|
|
81
82
|
}, []);
|
|
82
83
|
const handleBack = (0, react_1.useCallback)((l) => {
|
|
83
|
-
setStep(
|
|
84
|
+
setStep(types_2.CreateLiveStreamStep.SELECT_TYPE);
|
|
84
85
|
}, []);
|
|
85
86
|
const handleSubmit = (0, react_1.useCallback)((e) => {
|
|
86
87
|
onSuccess && onSuccess(e);
|
|
87
88
|
}, []);
|
|
88
89
|
(0, react_1.useEffect)(() => {
|
|
89
90
|
if (!canCreateEvent) {
|
|
90
|
-
setLiveType(
|
|
91
|
+
setLiveType(types_2.LiveStreamType.DIRECT_LIVE);
|
|
91
92
|
}
|
|
92
93
|
}, [canCreateEvent]);
|
|
93
94
|
// user must be logged
|
|
@@ -97,6 +98,6 @@ function CreateLiveStreamDialog(inProps) {
|
|
|
97
98
|
/**
|
|
98
99
|
* Renders root object
|
|
99
100
|
*/
|
|
100
|
-
return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ DialogContentProps: { dividers: false }, maxWidth: 'md', title: (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.title, component: 'span' }, { children: [Boolean(step ===
|
|
101
|
+
return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ DialogContentProps: { dividers: false }, maxWidth: 'md', title: (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.title, component: 'span' }, { children: [Boolean(step === types_2.CreateLiveStreamStep.CREATE_LIVE && canCreateEvent) && ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "text", onClick: handleBack, startIcon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "arrow_back" }) }, { children: "Back" }))), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ component: 'span' }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.createLivestreamDialog.title", defaultMessage: "ui.createLivestreamDialog.title" }) }))] })), fullWidth: true, open: open, scroll: 'paper', onClose: onClose, className: (0, classnames_1.default)(classes.root, className), TransitionComponent: Transition, PaperProps: { elevation: 0 } }, rest, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.content }, { children: [step === types_2.CreateLiveStreamStep.SELECT_TYPE && ((0, jsx_runtime_1.jsx)(LiveStreamSelector_1.default, { liveSelected: liveType, onLiveSelected: handleLiveTypeSelected, onNext: handleLiveTypeSelectedNext })), step === types_2.CreateLiveStreamStep.CREATE_LIVE && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: liveType === types_2.LiveStreamType.EVENT_LIVE ? (0, jsx_runtime_1.jsx)(EventForm_1.default, { presetLocation: types_1.SCEventLocationType.LIVESTREAM, onSuccess: handleSubmit }) : (0, jsx_runtime_1.jsx)(LiveStreamForm_1.default, { onSuccess: handleSubmit }) }))] })) })));
|
|
101
102
|
}
|
|
102
103
|
exports.default = CreateLiveStreamDialog;
|
|
@@ -58,12 +58,12 @@ function EventAddress(inProps) {
|
|
|
58
58
|
const [suggestions, setSuggestions] = (0, react_1.useState)([]);
|
|
59
59
|
const [timeoutId, setTimeoutId] = (0, react_1.useState)(null);
|
|
60
60
|
const liveStream = (0, react_1.useMemo)(() => {
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
61
|
+
return (event.live_stream ||
|
|
62
|
+
{
|
|
63
|
+
title: (event === null || event === void 0 ? void 0 : event.name) || `${intl.formatMessage(messages.name)}`,
|
|
64
|
+
created_at: (event === null || event === void 0 ? void 0 : event.start_date) || (0, utils_1.getNewDate)(),
|
|
65
|
+
settings: constants_2.LIVESTREAM_DEFAULT_SETTINGS
|
|
66
|
+
});
|
|
67
67
|
}, [event]);
|
|
68
68
|
// CONTEXT
|
|
69
69
|
const scContext = (0, react_core_1.useSCContext)();
|
|
@@ -75,6 +75,7 @@ function EventAddress(inProps) {
|
|
|
75
75
|
// HANDLERS
|
|
76
76
|
const handleChange = (_event, newValue) => {
|
|
77
77
|
setLocation(newValue);
|
|
78
|
+
forwardGeolocationData({ location: newValue });
|
|
78
79
|
};
|
|
79
80
|
const handleSelection = (_event, newValue) => tslib_1.__awaiter(this, void 0, void 0, function* () {
|
|
80
81
|
if (newValue) {
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { BoxProps } from '@mui/material';
|
|
2
|
-
import { SCEventType } from '@selfcommunity/types';
|
|
2
|
+
import { SCEventLocationType, SCEventType } from '@selfcommunity/types';
|
|
3
3
|
export interface EventFormProps extends BoxProps {
|
|
4
4
|
/**
|
|
5
5
|
* Overrides or extends the styles applied to the component.
|
|
@@ -11,6 +11,11 @@ export interface EventFormProps extends BoxProps {
|
|
|
11
11
|
* @default null
|
|
12
12
|
*/
|
|
13
13
|
event?: SCEventType;
|
|
14
|
+
/**
|
|
15
|
+
* Initial location
|
|
16
|
+
* @default SCEventLocationType.PERSON
|
|
17
|
+
*/
|
|
18
|
+
presetLocation?: SCEventLocationType;
|
|
14
19
|
/**
|
|
15
20
|
* On success callback function
|
|
16
21
|
* @default null
|
|
@@ -120,7 +120,7 @@ function EventForm(inProps) {
|
|
|
120
120
|
props: inProps,
|
|
121
121
|
name: constants_1.PREFIX
|
|
122
122
|
});
|
|
123
|
-
const { className, onSuccess, onError, event =
|
|
123
|
+
const { className, onSuccess, onError, event, presetLocation = types_1.SCEventLocationType.PERSON } = props, rest = tslib_1.__rest(props, ["className", "onSuccess", "onError", "event", "presetLocation"]);
|
|
124
124
|
// CONTEXT
|
|
125
125
|
const scContext = (0, react_core_1.useSCContext)();
|
|
126
126
|
// INTL
|
|
@@ -128,20 +128,25 @@ function EventForm(inProps) {
|
|
|
128
128
|
const startDateTime = (0, react_1.useMemo)(() => (0, utils_2.getNewDate)(event === null || event === void 0 ? void 0 : event.start_date), [event]);
|
|
129
129
|
const endDateTime = (0, react_1.useMemo)(() => (0, utils_2.getNewDate)(event === null || event === void 0 ? void 0 : event.end_date), [event]);
|
|
130
130
|
const initialFieldState = {
|
|
131
|
+
name: (event === null || event === void 0 ? void 0 : event.name) || '',
|
|
132
|
+
description: event ? event.description : '',
|
|
131
133
|
imageOriginal: (event === null || event === void 0 ? void 0 : event.image_bigger) || '',
|
|
132
134
|
imageOriginalFile: '',
|
|
133
135
|
startDate: event ? startDateTime : (0, utils_2.getNewDate)(),
|
|
134
136
|
startTime: event ? startDateTime : (0, utils_2.getLaterHoursDate)(1),
|
|
135
137
|
endDate: (event === null || event === void 0 ? void 0 : event.end_date) ? endDateTime : (0, utils_2.getNewDate)(),
|
|
136
138
|
endTime: (event === null || event === void 0 ? void 0 : event.end_date) ? endDateTime : (0, utils_2.getLaterHoursDate)(3),
|
|
137
|
-
location: (event === null || event === void 0 ? void 0 : event.location)
|
|
139
|
+
location: (event === null || event === void 0 ? void 0 : event.location)
|
|
140
|
+
? event.location === types_1.SCEventLocationType.ONLINE && event.live_stream
|
|
141
|
+
? types_1.SCEventLocationType.LIVESTREAM
|
|
142
|
+
: types_1.SCEventLocationType.ONLINE
|
|
143
|
+
: presetLocation,
|
|
138
144
|
geolocation: (event === null || event === void 0 ? void 0 : event.geolocation) || '',
|
|
139
145
|
lat: (event === null || event === void 0 ? void 0 : event.geolocation_lat) || null,
|
|
140
146
|
lng: (event === null || event === void 0 ? void 0 : event.geolocation_lng) || null,
|
|
141
147
|
link: (event === null || event === void 0 ? void 0 : event.link) || '',
|
|
148
|
+
liveStreamSettings: (event === null || event === void 0 ? void 0 : event.live_stream) ? event === null || event === void 0 ? void 0 : event.live_stream.settings : null,
|
|
142
149
|
recurring: (event === null || event === void 0 ? void 0 : event.recurring) || types_1.SCEventRecurrenceType.NEVER,
|
|
143
|
-
name: (event === null || event === void 0 ? void 0 : event.name) || '',
|
|
144
|
-
description: event ? event.description : '',
|
|
145
150
|
isPublic: (_a = (event === null || event === void 0 ? void 0 : event.privacy) === types_1.SCEventPrivacyType.PUBLIC) !== null && _a !== void 0 ? _a : true,
|
|
146
151
|
isSubmitting: false
|
|
147
152
|
};
|
|
@@ -187,7 +192,7 @@ function EventForm(inProps) {
|
|
|
187
192
|
setField((prev) => (Object.assign(Object.assign({}, prev), data)));
|
|
188
193
|
}, []);
|
|
189
194
|
const handleLiveStreamSettingsData = (0, react_1.useCallback)((data) => {
|
|
190
|
-
setField((prev) => (Object.assign(Object.assign({}, prev), data)));
|
|
195
|
+
setField((prev) => (Object.assign(Object.assign({}, prev), { liveStreamSettings: Object.assign(Object.assign({}, prev.liveStreamSettings), data) })));
|
|
191
196
|
}, []);
|
|
192
197
|
const handleSubmit = (0, react_1.useCallback)(() => {
|
|
193
198
|
setField((prev) => (Object.assign(Object.assign({}, prev), { ['isSubmitting']: true })));
|
|
@@ -199,14 +204,21 @@ function EventForm(inProps) {
|
|
|
199
204
|
formData.append('start_date', (0, utils_2.combineDateAndTime)(field.startDate, field.startTime));
|
|
200
205
|
formData.append('recurring', field.recurring);
|
|
201
206
|
formData.append('end_date', (0, utils_2.combineDateAndTime)(field.endDate, field.endTime));
|
|
202
|
-
formData.append('location', field.location);
|
|
207
|
+
formData.append('location', field.location === types_1.SCEventLocationType.PERSON ? types_1.SCEventLocationType.PERSON : types_1.SCEventLocationType.ONLINE);
|
|
203
208
|
if (field.location === types_1.SCEventLocationType.ONLINE) {
|
|
204
209
|
formData.append('link', field.link);
|
|
210
|
+
formData.append('live_stream_settings', '');
|
|
211
|
+
}
|
|
212
|
+
else if (field.location === types_1.SCEventLocationType.LIVESTREAM) {
|
|
213
|
+
formData.append('link', '');
|
|
214
|
+
formData.append('live_stream_settings', JSON.stringify(field.liveStreamSettings));
|
|
205
215
|
}
|
|
206
216
|
else if (field.location === types_1.SCEventLocationType.PERSON) {
|
|
207
217
|
formData.append('geolocation', field.geolocation);
|
|
208
218
|
formData.append('geolocation_lat', field.lat.toString());
|
|
209
219
|
formData.append('geolocation_lng', field.lng.toString());
|
|
220
|
+
formData.append('link', '');
|
|
221
|
+
formData.append('live_stream_settings', '');
|
|
210
222
|
}
|
|
211
223
|
if (privateEnabled) {
|
|
212
224
|
formData.append('privacy', field.isPublic ? types_1.SCEventPrivacyType.PUBLIC : types_1.SCEventPrivacyType.PRIVATE);
|
|
@@ -317,11 +329,17 @@ function EventForm(inProps) {
|
|
|
317
329
|
var _a;
|
|
318
330
|
return ((0, jsx_runtime_1.jsx)(material_1.TextField, Object.assign({}, params, { InputProps: Object.assign(Object.assign({}, params.InputProps), { placeholder: `${intl.formatMessage(messages.endTime)}`, startAdornment: ((0, jsx_runtime_1.jsx)(material_1.InputAdornment, Object.assign({ position: "start" }, { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "access_time" }) }) }))) }), error: Boolean(error['endDateError']), helperText: ((_a = error['endDateError']) === null || _a === void 0 ? void 0 : _a.error) ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.time.end.error.invalid", defaultMessage: "ui.eventForm.time.end.error.invalid" })) : null })));
|
|
319
331
|
}
|
|
320
|
-
}, onChange: (value) => handleChangeDateTime(value, 'endTime'), shouldDisableTime: shouldDisabledTime })] })) })), (0, jsx_runtime_1.jsx)(EventAddress_1.default, { forwardGeolocationData: handleGeoData, forwardLivestreamSettingsData: handleLiveStreamSettingsData, event:
|
|
332
|
+
}, onChange: (value) => handleChangeDateTime(value, 'endTime'), shouldDisableTime: shouldDisabledTime })] })) })), (0, jsx_runtime_1.jsx)(EventAddress_1.default, { forwardGeolocationData: handleGeoData, forwardLivestreamSettingsData: handleLiveStreamSettingsData, event: Object.assign(Object.assign({}, event), {
|
|
321
333
|
name: field.name,
|
|
322
334
|
start_date: field.startDate,
|
|
323
|
-
|
|
324
|
-
|
|
335
|
+
location: field.location,
|
|
336
|
+
geolocation: field.geolocation,
|
|
337
|
+
live_stream: {
|
|
338
|
+
title: field.name || `${intl.formatMessage(messages.name)}`,
|
|
339
|
+
created_at: field.startDate,
|
|
340
|
+
settings: field.liveStreamSettings
|
|
341
|
+
}
|
|
342
|
+
}) }), 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: {
|
|
325
343
|
// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
|
|
326
344
|
// @ts-ignore
|
|
327
345
|
b: (chunks) => (0, jsx_runtime_1.jsx)("strong", { children: chunks })
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { SCEventLocationType, SCEventRecurrenceType } from '@selfcommunity/types';
|
|
1
|
+
import { SCEventLocationType, SCEventRecurrenceType, SCLiveStreamSettingsType } from '@selfcommunity/types';
|
|
2
2
|
export type Place = {
|
|
3
3
|
description: string;
|
|
4
4
|
id?: string;
|
|
@@ -9,6 +9,7 @@ export type Geolocation = {
|
|
|
9
9
|
lat?: number;
|
|
10
10
|
lng?: number;
|
|
11
11
|
link?: string;
|
|
12
|
+
liveStreamSettings?: SCLiveStreamSettingsType;
|
|
12
13
|
};
|
|
13
14
|
export type InitialFieldState = Geolocation & {
|
|
14
15
|
imageOriginal: string | ArrayBuffer;
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { BoxProps } from '@mui/material';
|
|
2
|
+
import { SCLiveStreamSettingsType } from '@selfcommunity/types';
|
|
2
3
|
export declare const PREFIX = "SCLiveStreamFormSettings";
|
|
3
4
|
export interface LiveStreamFormSettingsProps extends BoxProps {
|
|
4
5
|
/**
|
|
@@ -10,7 +11,7 @@ export interface LiveStreamFormSettingsProps extends BoxProps {
|
|
|
10
11
|
* Event Object
|
|
11
12
|
* @default null
|
|
12
13
|
*/
|
|
13
|
-
settings?:
|
|
14
|
+
settings?: SCLiveStreamSettingsType;
|
|
14
15
|
/**
|
|
15
16
|
* onChange callback
|
|
16
17
|
* @param data
|
|
@@ -54,7 +54,7 @@ function LiveStreamSettingsForm(inProps) {
|
|
|
54
54
|
/**
|
|
55
55
|
* Renders root object
|
|
56
56
|
*/
|
|
57
|
-
return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", spacing: 1, alignItems: "center" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Switch, { className: classes.switch, checked: Boolean(settings === null || settings === void 0 ? void 0 : settings.muteParticipant), onChange: () => onChange(Object.assign(Object.assign({}, settings), { ['muteParticipant']: !(settings === null || settings === void 0 ? void 0 : settings.muteParticipant) })) }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.switchLabel }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamForm.muteParticipant", defaultMessage: "ui.liveStreamForm.muteParticipant" }) }))] })), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", spacing: 1, alignItems: "center" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Switch, { className: classes.switch, checked: Boolean(settings === null || settings === void 0 ? void 0 : settings.
|
|
57
|
+
return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", spacing: 1, alignItems: "center" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Switch, { className: classes.switch, checked: Boolean(settings === null || settings === void 0 ? void 0 : settings.muteParticipant), onChange: () => onChange(Object.assign(Object.assign({}, settings), { ['muteParticipant']: !(settings === null || settings === void 0 ? void 0 : settings.muteParticipant) })) }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.switchLabel }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamForm.muteParticipant", defaultMessage: "ui.liveStreamForm.muteParticipant" }) }))] })), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", spacing: 1, alignItems: "center" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Switch, { className: classes.switch, checked: Boolean(settings === null || settings === void 0 ? void 0 : settings.disableVideo), onChange: () => onChange(Object.assign(Object.assign({}, settings), { ['disableVideo']: !(settings === null || settings === void 0 ? void 0 : settings.disableVideo) })) }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.switchLabel }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamForm.disableVideo", defaultMessage: "ui.liveStreamForm.disableVideo" }) }))] })), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", spacing: 1, alignItems: "center" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Switch, { className: classes.switch, checked: Boolean(settings === null || settings === void 0 ? void 0 : settings.disableChat), onChange: () => onChange(Object.assign(Object.assign({}, settings), { ['disableChat']: !(settings === null || settings === void 0 ? void 0 : settings.disableChat) })) }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.switchLabel }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamForm.disableChat", defaultMessage: "ui.liveStreamForm.disableChat" }) }))] })), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", spacing: 1, alignItems: "center" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Switch, { className: classes.switch, checked: Boolean(settings === null || settings === void 0 ? void 0 : settings.disableShareScreen), onChange: () => onChange(Object.assign(Object.assign({}, settings), { ['disableShareScreen']: !(settings === null || settings === void 0 ? void 0 : settings.disableShareScreen) })) }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.switchLabel }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamForm.disableShareScreen", defaultMessage: "ui.liveStreamForm.disableShareScreen" }) }))] })), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", spacing: 1, alignItems: "center" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Switch, { className: classes.switch, checked: Boolean(settings === null || settings === void 0 ? void 0 : settings.hideParticipantList), onChange: () => onChange(Object.assign(Object.assign({}, settings), { ['hideParticipantList']: !(settings === null || settings === void 0 ? void 0 : settings.hideParticipantList) })) }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.switchLabel }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamForm.hideParticipantList", defaultMessage: "ui.liveStreamForm.hideParticipantList" }) }))] })), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", spacing: 1, alignItems: "center" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Switch, { className: classes.switch, checked: Boolean(settings === null || settings === void 0 ? void 0 : settings.automaticallyNotifyFollowers), onChange: () => onChange(Object.assign(Object.assign({}, settings), { ['automaticallyNotifyFollowers']: !(settings === null || settings === void 0 ? void 0 : settings.automaticallyNotifyFollowers) })) }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.switchLabel }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamForm.automaticallyNotifyFollowers", defaultMessage: "ui.liveStreamForm.automaticallyNotifyFollowers" }) }))] })), (0, jsx_runtime_1.jsxs)(material_1.FormControl, Object.assign({ className: classes.accessView }, { children: [(0, jsx_runtime_1.jsx)(material_1.InputLabel, Object.assign({ id: "viewLabel" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamForm.view.label", defaultMessage: "ui.liveStreamForm.view.label" }) })), (0, jsx_runtime_1.jsx)(material_1.Select, Object.assign({ name: "view", label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamForm.view.label", defaultMessage: "ui.liveStreamForm.view.label" }), labelId: "viewLabel", fullWidth: true, value: (_a = settings === null || settings === void 0 ? void 0 : settings.view) !== null && _a !== void 0 ? _a : types_1.SCLiveStreamViewType.SPEAKER, onChange: (e) => onChange(Object.assign(Object.assign({}, settings), { ['view']: e.target.value })), displayEmpty: true, renderValue: (selected) => {
|
|
58
58
|
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ className: classes.accessViewIcon }, { children: selected === types_1.SCLiveStreamViewType.SPEAKER ? 'upload' : 'category' })), "\u00A0", (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.liveStreamForm.view.${selected}`, defaultMessage: `ui.liveStreamForm.view.${selected}` })] }));
|
|
59
59
|
} }, { children: Object.values(types_1.SCLiveStreamViewType).map((f) => ((0, jsx_runtime_1.jsx)(material_1.MenuItem, Object.assign({ value: f }, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: (0, jsx_runtime_1.jsxs)("b", { children: [(0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ className: classes.accessViewIcon }, { children: f === types_1.SCLiveStreamViewType.SPEAKER ? 'upload' : 'category' })), "\u00A0", (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.liveStreamForm.view.${f}`, defaultMessage: `ui.liveStreamForm.view.${f}` })] }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.liveStreamForm.view.${f}.description`, defaultMessage: `ui.liveStreamForm.view.${f}.description` }) })] }) }), f))) }))] }))] })));
|
|
60
60
|
}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { SCLiveStreamViewType } from '@selfcommunity/types';
|
|
1
2
|
export declare const PREFIX = "SCLiveStreamForm";
|
|
2
3
|
export declare const LIVESTREAM_DEFAULT_SETTINGS: {
|
|
3
4
|
muteParticipant: boolean;
|
|
@@ -5,4 +6,6 @@ export declare const LIVESTREAM_DEFAULT_SETTINGS: {
|
|
|
5
6
|
automaticallyNotifyFollowers: boolean;
|
|
6
7
|
disableVideo: boolean;
|
|
7
8
|
disableChat: boolean;
|
|
9
|
+
disableShareScreen: boolean;
|
|
10
|
+
view: SCLiveStreamViewType;
|
|
8
11
|
};
|
|
@@ -1,11 +1,14 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.LIVESTREAM_DEFAULT_SETTINGS = exports.PREFIX = void 0;
|
|
4
|
+
const types_1 = require("@selfcommunity/types");
|
|
4
5
|
exports.PREFIX = 'SCLiveStreamForm';
|
|
5
6
|
exports.LIVESTREAM_DEFAULT_SETTINGS = {
|
|
6
7
|
muteParticipant: true,
|
|
7
|
-
hideParticipantList:
|
|
8
|
-
automaticallyNotifyFollowers:
|
|
8
|
+
hideParticipantList: false,
|
|
9
|
+
automaticallyNotifyFollowers: false,
|
|
9
10
|
disableVideo: true,
|
|
10
|
-
disableChat: false
|
|
11
|
+
disableChat: false,
|
|
12
|
+
disableShareScreen: true,
|
|
13
|
+
view: types_1.SCLiveStreamViewType.SPEAKER
|
|
11
14
|
};
|
|
@@ -10,13 +10,13 @@ const types_1 = require("@selfcommunity/types");
|
|
|
10
10
|
const classnames_1 = tslib_1.__importDefault(require("classnames"));
|
|
11
11
|
const react_intl_1 = require("react-intl");
|
|
12
12
|
const constants_1 = require("./constants");
|
|
13
|
-
const components_react_1 = require("@livekit/components-react");
|
|
14
13
|
const react_1 = require("react");
|
|
15
14
|
const LiveStreamVideoConference_1 = tslib_1.__importDefault(require("./LiveStreamVideoConference"));
|
|
16
15
|
require("@livekit/components-styles");
|
|
17
16
|
const api_services_1 = require("@selfcommunity/api-services");
|
|
18
17
|
const utils_1 = require("@selfcommunity/utils");
|
|
19
18
|
const Errors_1 = require("../../constants/Errors");
|
|
19
|
+
const PreJoin_1 = require("./LiveStreamVideoConference/PreJoin");
|
|
20
20
|
const classes = {
|
|
21
21
|
root: `${constants_1.PREFIX}-root`,
|
|
22
22
|
content: `${constants_1.PREFIX}-content`,
|
|
@@ -60,12 +60,13 @@ const Root = (0, styles_1.styled)(material_1.Box, {
|
|
|
60
60
|
* @param inProps
|
|
61
61
|
*/
|
|
62
62
|
function LiveStreamRoom(inProps) {
|
|
63
|
+
var _a, _b, _c, _d;
|
|
63
64
|
//PROPS
|
|
64
65
|
const props = (0, system_1.useThemeProps)({
|
|
65
66
|
props: inProps,
|
|
66
67
|
name: constants_1.PREFIX
|
|
67
68
|
});
|
|
68
|
-
const { id = `live_stream_room_object_${props.liveStreamId ? props.liveStreamId : props.liveStream ? props.liveStream.id : ''}`, liveStreamId = null, liveStream = null, className, showPrejoinTitle = true, showPrejoinDescription = false, startPrejoinContent, endPrejoinContent, presetConnectionDetails, presetPreJoinChoices, LiveStreamVideoConferenceComponentProps = {} } = props, rest = tslib_1.__rest(props, ["id", "liveStreamId", "liveStream", "className", "showPrejoinTitle", "showPrejoinDescription", "startPrejoinContent", "endPrejoinContent", "presetConnectionDetails", "presetPreJoinChoices", "LiveStreamVideoConferenceComponentProps"]);
|
|
69
|
+
const { id = `live_stream_room_object_${props.liveStreamId ? props.liveStreamId : props.liveStream ? props.liveStream.id : ''}`, liveStreamId = null, liveStream = null, className, showPrejoinTitle = true, showPrejoinDescription = false, startPrejoinContent, endPrejoinContent, presetConnectionDetails, presetPreJoinChoices, LiveStreamVideoConferenceComponentProps = { options: { codec: 'vp8', hq: false } } } = props, rest = tslib_1.__rest(props, ["id", "liveStreamId", "liveStream", "className", "showPrejoinTitle", "showPrejoinDescription", "startPrejoinContent", "endPrejoinContent", "presetConnectionDetails", "presetPreJoinChoices", "LiveStreamVideoConferenceComponentProps"]);
|
|
69
70
|
// CONTEXT
|
|
70
71
|
const scUserContext = (0, react_core_1.useSCUser)();
|
|
71
72
|
const { preferences, features } = (0, react_core_1.useSCPreferences)();
|
|
@@ -74,11 +75,11 @@ function LiveStreamRoom(inProps) {
|
|
|
74
75
|
const [preJoinChoices, setPreJoinChoices] = (0, react_1.useState)(presetPreJoinChoices);
|
|
75
76
|
const [loading, setLoading] = (0, react_1.useState)(false);
|
|
76
77
|
const preJoinDefaults = (0, react_1.useMemo)(() => {
|
|
77
|
-
var _a, _b, _c
|
|
78
|
+
var _a, _b, _c;
|
|
78
79
|
return {
|
|
79
80
|
username: ((_a = scUserContext.user) === null || _a === void 0 ? void 0 : _a.username) || '',
|
|
80
|
-
videoEnabled: (
|
|
81
|
-
audioEnabled: (
|
|
81
|
+
videoEnabled: ((_b = scLiveStream === null || scLiveStream === void 0 ? void 0 : scLiveStream.settings) === null || _b === void 0 ? void 0 : _b.disableVideo) === false,
|
|
82
|
+
audioEnabled: ((_c = scLiveStream === null || scLiveStream === void 0 ? void 0 : scLiveStream.settings) === null || _c === void 0 ? void 0 : _c.muteParticipant) === false
|
|
82
83
|
};
|
|
83
84
|
}, [scUserContext.user, scLiveStream]);
|
|
84
85
|
const [connectionDetails, setConnectionDetails] = (0, react_1.useState)(presetConnectionDetails);
|
|
@@ -98,6 +99,8 @@ function LiveStreamRoom(inProps) {
|
|
|
98
99
|
});
|
|
99
100
|
}
|
|
100
101
|
}, []);
|
|
102
|
+
const canUseAudio = (0, react_1.useMemo)(() => { var _a; return (scUserContext.user && liveStream && liveStream.host.id === scUserContext.user.id) || (liveStream && !((_a = liveStream === null || liveStream === void 0 ? void 0 : liveStream.settings) === null || _a === void 0 ? void 0 : _a.muteParticipant)); }, [scUserContext, liveStream]);
|
|
103
|
+
const canUseVideo = (0, react_1.useMemo)(() => { var _a; return (scUserContext.user && liveStream && liveStream.host.id === scUserContext.user.id) || (liveStream && !((_a = liveStream === null || liveStream === void 0 ? void 0 : liveStream.settings) === null || _a === void 0 ? void 0 : _a.disableVideo)); }, [scUserContext, liveStream]);
|
|
101
104
|
// HANDLERS
|
|
102
105
|
/**
|
|
103
106
|
* Handle PreJoin Submit
|
|
@@ -131,6 +134,9 @@ function LiveStreamRoom(inProps) {
|
|
|
131
134
|
/**
|
|
132
135
|
* Renders root object
|
|
133
136
|
*/
|
|
134
|
-
return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ id: id, 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 })), (scLiveStream === null || scLiveStream === void 0 ? void 0 : scLiveStream.title) && ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: 'div', variant: "h5", className: classes.title }, { children: scLiveStream === null || scLiveStream === void 0 ? void 0 : scLiveStream.title }))), (scLiveStream === null || scLiveStream === void 0 ? void 0 : scLiveStream.description) && ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: 'div', variant: "body1", className: classes.description }, { children: scLiveStream === null || scLiveStream === void 0 ? void 0 : scLiveStream.description }))), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: (0, classnames_1.default)(classes.preJoin, { [classes.preJoinLoading]: loading }) }, { children: [(0, jsx_runtime_1.jsx)(
|
|
137
|
+
return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ id: id, 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 })), (scLiveStream === null || scLiveStream === void 0 ? void 0 : scLiveStream.title) && ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: 'div', variant: "h5", className: classes.title }, { children: scLiveStream === null || scLiveStream === void 0 ? void 0 : scLiveStream.title }))), (scLiveStream === null || scLiveStream === void 0 ? void 0 : scLiveStream.description) && ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: 'div', variant: "body1", className: classes.description }, { children: scLiveStream === null || scLiveStream === void 0 ? void 0 : scLiveStream.description }))), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: (0, classnames_1.default)(classes.preJoin, { [classes.preJoinLoading]: loading }) }, { children: [(0, jsx_runtime_1.jsx)(PreJoin_1.PreJoin, { liveStream: scLiveStream, defaults: preJoinDefaults, onSubmit: handlePreJoinSubmit, onError: handlePreJoinError }), loading && ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.prejoinLoader }, { children: [(0, jsx_runtime_1.jsx)(material_1.CircularProgress, {}), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: 'div', variant: "body2" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamRoom.connecting", defaultMessage: "ui.liveStreamRoom.connecting" }) }))] })))] })), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.endPrejoinContent }, { children: [Boolean(scUserContext.user &&
|
|
138
|
+
scUserContext.user.id !== scLiveStream.host.id &&
|
|
139
|
+
scLiveStream &&
|
|
140
|
+
(((_a = scLiveStream.settings) === null || _a === void 0 ? void 0 : _a.muteParticipant) || (scLiveStream && ((_b = scLiveStream.settings) === null || _b === void 0 ? void 0 : _b.disableVideo)))) && ((0, jsx_runtime_1.jsxs)(material_1.Alert, Object.assign({ variant: "filled", severity: "error" }, { children: [scLiveStream && ((_c = scLiveStream.settings) === null || _c === void 0 ? void 0 : _c.muteParticipant) && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["The host of the live set your microphone as off", (0, jsx_runtime_1.jsx)("br", {})] })), scLiveStream && ((_d = scLiveStream.settings) === null || _d === void 0 ? void 0 : _d.disableVideo) && (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: "The host of the live set your camera as off" })] }))), endPrejoinContent] }))] })) : ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.conference }, { children: (0, jsx_runtime_1.jsx)(LiveStreamVideoConference_1.default, Object.assign({ liveStream: scLiveStream, connectionDetails: connectionDetails, userChoices: preJoinChoices }, LiveStreamVideoConferenceComponentProps)) }))) })) })));
|
|
135
141
|
}
|
|
136
142
|
exports.default = LiveStreamRoom;
|
package/lib/cjs/components/LiveStreamRoom/LiveStreamVideoConference/LiveStreamVideoConference.js
CHANGED
|
@@ -69,6 +69,10 @@ function LiveStreamVideoConference(inProps) {
|
|
|
69
69
|
const [e2eeSetupComplete, setE2eeSetupComplete] = (0, react_1.useState)(true);
|
|
70
70
|
const [liveActive, setLiveActive] = (0, react_1.useState)(true);
|
|
71
71
|
const [error, setError] = (0, react_1.useState)(null);
|
|
72
|
+
const canUseAudio = (0, react_1.useMemo)(() => { var _a; return (scUserContext.user && liveStream && liveStream.host.id === scUserContext.user.id) || (liveStream && !((_a = liveStream === null || liveStream === void 0 ? void 0 : liveStream.settings) === null || _a === void 0 ? void 0 : _a.muteParticipant)); }, [scUserContext, liveStream]);
|
|
73
|
+
const canUseVideo = (0, react_1.useMemo)(() => { var _a; return (scUserContext.user && liveStream && liveStream.host.id === scUserContext.user.id) || (liveStream && !((_a = liveStream === null || liveStream === void 0 ? void 0 : liveStream.settings) === null || _a === void 0 ? void 0 : _a.disableVideo)); }, [scUserContext, liveStream]);
|
|
74
|
+
const canUseChat = (0, react_1.useMemo)(() => { var _a; return (scUserContext.user && liveStream && liveStream.host.id === scUserContext.user.id) || (liveStream && !((_a = liveStream === null || liveStream === void 0 ? void 0 : liveStream.settings) === null || _a === void 0 ? void 0 : _a.disableChat)); }, [scUserContext, liveStream]);
|
|
75
|
+
const canUseShareScreen = (0, react_1.useMemo)(() => { var _a; return (scUserContext.user && liveStream && liveStream.host.id === scUserContext.user.id) || (liveStream && !((_a = liveStream === null || liveStream === void 0 ? void 0 : liveStream.settings) === null || _a === void 0 ? void 0 : _a.disableShareScreen)); }, [scUserContext, liveStream]);
|
|
72
76
|
/* const liveStreamRoomMaxParticipants = useMemo(
|
|
73
77
|
() =>
|
|
74
78
|
preferences &&
|
|
@@ -178,6 +182,6 @@ function LiveStreamVideoConference(inProps) {
|
|
|
178
182
|
/**
|
|
179
183
|
* Renders root object
|
|
180
184
|
*/
|
|
181
|
-
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.jsx)(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 }, LiveKitRoomComponentProps, { children: (0, jsx_runtime_1.jsxs)(components_react_1.LayoutContextProvider, { children: [(0, jsx_runtime_1.jsx)(VideoConference_1.VideoConference, Object.assign({ chatMessageFormatter: components_react_1.formatChatMessageLinks }, VideoConferenceComponentProps)), (0, jsx_runtime_1.jsx)(components_react_1.ConnectionState, {})] }) })) })) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: error ? ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.endConferenceWrap }, { children: [startConferenceEndContent, error, endConferenceEndContent] }))) : liveActive === false ? ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.endConferenceWrap }, { children: [startConferenceEndContent, (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h5" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamRoom.conference.end", defaultMessage: "ui.liveStreamRoom.conference.end" }) })), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "contained", color: "secondary", component: react_core_1.Link, to: '/', className: classes.btnBackHome }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamRoom.button.backHome", defaultMessage: "ui.liveStreamRoom.button.backHome" }) })), endConferenceEndContent] }))) : ((0, jsx_runtime_1.jsx)(material_1.CircularProgress, {})) })) })));
|
|
185
|
+
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.jsx)(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 }, LiveKitRoomComponentProps, { children: (0, jsx_runtime_1.jsxs)(components_react_1.LayoutContextProvider, { children: [(0, jsx_runtime_1.jsx)(VideoConference_1.VideoConference, Object.assign({ chatMessageFormatter: components_react_1.formatChatMessageLinks, speakerFocused: liveStream.host }, VideoConferenceComponentProps, { disableMicrophone: !canUseAudio, disableCamera: !canUseVideo, disableChat: !canUseChat, disableShareScreen: !canUseShareScreen })), (0, jsx_runtime_1.jsx)(components_react_1.ConnectionState, {})] }) })) })) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: error ? ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.endConferenceWrap }, { children: [startConferenceEndContent, error, endConferenceEndContent] }))) : liveActive === false ? ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.endConferenceWrap }, { children: [startConferenceEndContent, (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h5" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamRoom.conference.end", defaultMessage: "ui.liveStreamRoom.conference.end" }) })), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "contained", color: "secondary", component: react_core_1.Link, to: '/', className: classes.btnBackHome }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamRoom.button.backHome", defaultMessage: "ui.liveStreamRoom.button.backHome" }) })), endConferenceEndContent] }))) : ((0, jsx_runtime_1.jsx)(material_1.CircularProgress, {})) })) })));
|
|
182
186
|
}
|
|
183
187
|
exports.default = LiveStreamVideoConference;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
4
|
+
/**
|
|
5
|
+
* @internal
|
|
6
|
+
*/
|
|
7
|
+
const SvgParticipantPlaceholder = (props) => ((0, jsx_runtime_1.jsxs)("svg", Object.assign({ width: 320, height: 320, viewBox: "0 0 320 320", preserveAspectRatio: "xMidYMid meet", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: [(0, jsx_runtime_1.jsx)("path", { d: "M160 180C204.182 180 240 144.183 240 100C240 55.8172 204.182 20 160 20C115.817 20 79.9997 55.8172 79.9997 100C79.9997 144.183 115.817 180 160 180Z", fill: "white", fillOpacity: 0.25 }), (0, jsx_runtime_1.jsx)("path", { d: "M97.6542 194.614C103.267 191.818 109.841 192.481 115.519 195.141C129.025 201.466 144.1 205 159.999 205C175.899 205 190.973 201.466 204.48 195.141C210.158 192.481 216.732 191.818 222.345 194.614C262.703 214.719 291.985 253.736 298.591 300.062C300.15 310.997 291.045 320 280 320H39.9997C28.954 320 19.8495 310.997 21.4087 300.062C28.014 253.736 57.2966 214.72 97.6542 194.614Z", fill: "white", fillOpacity: 0.25 })] })));
|
|
8
|
+
exports.default = SvgParticipantPlaceholder;
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import type { Participant } from 'livekit-client';
|
|
3
|
+
import type { ParticipantClickEvent, TrackReferenceOrPlaceholder } from '@livekit/components-core';
|
|
4
|
+
/**
|
|
5
|
+
* The `ParticipantContextIfNeeded` component only creates a `ParticipantContext`
|
|
6
|
+
* if there is no `ParticipantContext` already.
|
|
7
|
+
*/
|
|
8
|
+
export declare function ParticipantContextIfNeeded(props: React.PropsWithChildren<{
|
|
9
|
+
participant?: Participant;
|
|
10
|
+
}>): JSX.Element;
|
|
11
|
+
/**
|
|
12
|
+
* Only create a `TrackRefContext` if there is no `TrackRefContext` already.
|
|
13
|
+
*/
|
|
14
|
+
export declare function TrackRefContextIfNeeded(props: React.PropsWithChildren<{
|
|
15
|
+
trackRef?: TrackReferenceOrPlaceholder;
|
|
16
|
+
}>): JSX.Element;
|
|
17
|
+
export interface ParticipantTileProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
18
|
+
/** The track reference to display. */
|
|
19
|
+
trackRef?: TrackReferenceOrPlaceholder;
|
|
20
|
+
disableSpeakingIndicator?: boolean;
|
|
21
|
+
onParticipantClick?: (event: ParticipantClickEvent) => void;
|
|
22
|
+
}
|
|
23
|
+
/**
|
|
24
|
+
* The `ParticipantTile` component is the base utility wrapper for displaying a visual representation of a participant.
|
|
25
|
+
* This component can be used as a child of the `TrackLoop` component or by passing a track reference as property.
|
|
26
|
+
*/
|
|
27
|
+
export declare const ParticipantTile: (props: ParticipantTileProps & React.RefAttributes<HTMLDivElement>) => React.ReactNode;
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.ParticipantTile = exports.TrackRefContextIfNeeded = exports.ParticipantContextIfNeeded = void 0;
|
|
4
|
+
const tslib_1 = require("tslib");
|
|
5
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
6
|
+
const React = tslib_1.__importStar(require("react"));
|
|
7
|
+
const livekit_client_1 = require("livekit-client");
|
|
8
|
+
const components_core_1 = require("@livekit/components-core");
|
|
9
|
+
const components_react_1 = require("@livekit/components-react");
|
|
10
|
+
const ParticipantTileAvatar_1 = tslib_1.__importDefault(require("./ParticipantTileAvatar"));
|
|
11
|
+
const ParticipantTileActions_1 = tslib_1.__importDefault(require("./ParticipantTileActions"));
|
|
12
|
+
const react_core_1 = require("@selfcommunity/react-core");
|
|
13
|
+
/**
|
|
14
|
+
* The `ParticipantContextIfNeeded` component only creates a `ParticipantContext`
|
|
15
|
+
* if there is no `ParticipantContext` already.
|
|
16
|
+
*/
|
|
17
|
+
function ParticipantContextIfNeeded(props) {
|
|
18
|
+
const hasContext = !!(0, components_react_1.useMaybeParticipantContext)();
|
|
19
|
+
return props.participant && !hasContext ? ((0, jsx_runtime_1.jsx)(components_react_1.ParticipantContext.Provider, Object.assign({ value: props.participant }, { children: props.children }))) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: props.children }));
|
|
20
|
+
}
|
|
21
|
+
exports.ParticipantContextIfNeeded = ParticipantContextIfNeeded;
|
|
22
|
+
/**
|
|
23
|
+
* Only create a `TrackRefContext` if there is no `TrackRefContext` already.
|
|
24
|
+
*/
|
|
25
|
+
function TrackRefContextIfNeeded(props) {
|
|
26
|
+
const hasContext = !!(0, components_react_1.useMaybeTrackRefContext)();
|
|
27
|
+
return props.trackRef && !hasContext ? ((0, jsx_runtime_1.jsx)(components_react_1.TrackRefContext.Provider, Object.assign({ value: props.trackRef }, { children: props.children }))) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: props.children }));
|
|
28
|
+
}
|
|
29
|
+
exports.TrackRefContextIfNeeded = TrackRefContextIfNeeded;
|
|
30
|
+
/**
|
|
31
|
+
* The `ParticipantTile` component is the base utility wrapper for displaying a visual representation of a participant.
|
|
32
|
+
* This component can be used as a child of the `TrackLoop` component or by passing a track reference as property.
|
|
33
|
+
*/
|
|
34
|
+
exports.ParticipantTile =
|
|
35
|
+
/* @__PURE__ */ React.forwardRef(function ParticipantTile(_a, ref) {
|
|
36
|
+
var _b, _c;
|
|
37
|
+
var { trackRef, children, onParticipantClick, disableSpeakingIndicator } = _a, htmlProps = tslib_1.__rest(_a, ["trackRef", "children", "onParticipantClick", "disableSpeakingIndicator"]);
|
|
38
|
+
const scUserContext = (0, react_core_1.useSCUser)();
|
|
39
|
+
const trackReference = (0, components_react_1.useEnsureTrackRef)(trackRef);
|
|
40
|
+
const { elementProps } = (0, components_react_1.useParticipantTile)({
|
|
41
|
+
htmlProps,
|
|
42
|
+
disableSpeakingIndicator,
|
|
43
|
+
onParticipantClick,
|
|
44
|
+
trackRef: trackReference
|
|
45
|
+
});
|
|
46
|
+
const isEncrypted = (0, components_react_1.useIsEncrypted)(trackReference.participant);
|
|
47
|
+
const layoutContext = (0, components_react_1.useMaybeLayoutContext)();
|
|
48
|
+
const autoManageSubscription = (_b = (0, components_react_1.useFeatureContext)()) === null || _b === void 0 ? void 0 : _b.autoSubscription;
|
|
49
|
+
const handleSubscribe = React.useCallback((subscribed) => {
|
|
50
|
+
if (trackReference.source &&
|
|
51
|
+
!subscribed &&
|
|
52
|
+
layoutContext &&
|
|
53
|
+
layoutContext.pin.dispatch &&
|
|
54
|
+
(0, components_core_1.isTrackReferencePinned)(trackReference, layoutContext.pin.state)) {
|
|
55
|
+
layoutContext.pin.dispatch({ msg: 'clear_pin' });
|
|
56
|
+
}
|
|
57
|
+
}, [trackReference, layoutContext]);
|
|
58
|
+
return ((0, jsx_runtime_1.jsx)("div", Object.assign({ ref: ref, style: { position: 'relative' } }, elementProps, { children: (0, jsx_runtime_1.jsx)(TrackRefContextIfNeeded, Object.assign({ trackRef: trackReference }, { children: (0, jsx_runtime_1.jsxs)(ParticipantContextIfNeeded, Object.assign({ participant: trackReference.participant }, { children: [children !== null && children !== void 0 ? children : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, components_core_1.isTrackReference)(trackReference) &&
|
|
59
|
+
(((_c = trackReference.publication) === null || _c === void 0 ? void 0 : _c.kind) === 'video' ||
|
|
60
|
+
trackReference.source === livekit_client_1.Track.Source.Camera ||
|
|
61
|
+
trackReference.source === livekit_client_1.Track.Source.ScreenShare) ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(components_react_1.VideoTrack, { trackRef: trackReference, onSubscriptionStatusChanged: handleSubscribe, manageSubscription: autoManageSubscription }) })) : ((0, components_core_1.isTrackReference)(trackReference) && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(components_react_1.AudioTrack, { trackRef: trackReference, onSubscriptionStatusChanged: handleSubscribe }) }))), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "lk-participant-placeholder" }, { children: (0, jsx_runtime_1.jsx)(ParticipantTileAvatar_1.default, { participant: trackReference.participant }) })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "lk-participant-metadata" }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: "lk-participant-metadata-item" }, { children: trackReference.source === livekit_client_1.Track.Source.Camera ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isEncrypted && (0, jsx_runtime_1.jsx)(components_react_1.LockLockedIcon, { style: { marginRight: '0.25rem' } }), (0, jsx_runtime_1.jsx)(components_react_1.TrackMutedIndicator, { trackRef: {
|
|
62
|
+
participant: trackReference.participant,
|
|
63
|
+
source: livekit_client_1.Track.Source.Microphone
|
|
64
|
+
}, show: 'muted' }), (0, jsx_runtime_1.jsx)(components_react_1.ParticipantName, { children: (0, jsx_runtime_1.jsx)(ParticipantTileActions_1.default, {}) })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_react_1.ScreenShareIcon, { style: { marginRight: '0.25rem' } }), (0, jsx_runtime_1.jsx)(components_react_1.ParticipantName, { children: "'s screen" })] })) })), (0, jsx_runtime_1.jsx)(components_react_1.ConnectionQualityIndicator, { className: "lk-participant-metadata-item" })] }))] })), (0, jsx_runtime_1.jsx)(components_react_1.FocusToggle, { trackRef: trackReference })] })) })) })));
|
|
65
|
+
});
|
package/lib/cjs/components/LiveStreamRoom/LiveStreamVideoConference/ParticipantTileActions.d.ts
ADDED
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
export interface ParticipantTileActionsMenuProps {
|
|
2
|
+
/**
|
|
3
|
+
* Overrides or extends the styles applied to the component.
|
|
4
|
+
* @default null
|
|
5
|
+
*/
|
|
6
|
+
className?: string;
|
|
7
|
+
/**
|
|
8
|
+
* User Object
|
|
9
|
+
* @default null
|
|
10
|
+
*/
|
|
11
|
+
participant?: any;
|
|
12
|
+
/**
|
|
13
|
+
* Handle delete obj
|
|
14
|
+
*/
|
|
15
|
+
onBanParticipant?: (p: any) => void;
|
|
16
|
+
/**
|
|
17
|
+
* Props to spread to popper
|
|
18
|
+
* @default empty object
|
|
19
|
+
*/
|
|
20
|
+
PopperProps?: any;
|
|
21
|
+
/**
|
|
22
|
+
* Any other properties
|
|
23
|
+
*/
|
|
24
|
+
[p: string]: any;
|
|
25
|
+
}
|
|
26
|
+
export default function ContributionActionsMenu(props: ParticipantTileActionsMenuProps): JSX.Element;
|