@selfcommunity/react-ui 0.8.0-live.58 → 0.8.0-live.60
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 +12 -8
- 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/LiveStreamForm.js +1 -3
- 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 +4 -1
- package/lib/cjs/components/LiveStreamForm/constants.js +7 -4
- package/lib/cjs/components/LiveStreamRoom/LiveStreamRoom.js +12 -7
- package/lib/cjs/components/LiveStreamRoom/LiveStreamVideoConference/LiveStreamProvider.d.ts +17 -0
- package/lib/cjs/components/LiveStreamRoom/LiveStreamVideoConference/LiveStreamProvider.js +13 -0
- package/lib/cjs/components/LiveStreamRoom/LiveStreamVideoConference/LiveStreamVideoConference.d.ts +0 -6
- package/lib/cjs/components/LiveStreamRoom/LiveStreamVideoConference/LiveStreamVideoConference.js +11 -3
- 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 +28 -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 +204 -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 +55 -0
- package/lib/cjs/components/LiveStreamRoom/LiveStreamVideoConference/PreJoin.js +249 -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/cjs/components/NavigationMenuIconButton/NavigationMenuDrawer.js +1 -1
- package/lib/esm/components/CreateLiveStreamDialog/CreateLiveStreamDialog.js +2 -1
- package/lib/esm/components/EventForm/EventAddress.js +13 -9
- 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/LiveStreamForm.js +2 -4
- 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 +4 -1
- package/lib/esm/components/LiveStreamForm/constants.js +7 -4
- package/lib/esm/components/LiveStreamRoom/LiveStreamRoom.js +13 -8
- package/lib/esm/components/LiveStreamRoom/LiveStreamVideoConference/LiveStreamProvider.d.ts +17 -0
- package/lib/esm/components/LiveStreamRoom/LiveStreamVideoConference/LiveStreamProvider.js +9 -0
- package/lib/esm/components/LiveStreamRoom/LiveStreamVideoConference/LiveStreamVideoConference.d.ts +0 -6
- package/lib/esm/components/LiveStreamRoom/LiveStreamVideoConference/LiveStreamVideoConference.js +11 -3
- 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 +28 -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 +201 -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 +55 -0
- package/lib/esm/components/LiveStreamRoom/LiveStreamVideoConference/PreJoin.js +243 -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/esm/components/NavigationMenuIconButton/NavigationMenuDrawer.js +1 -1
- 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;
|
|
@@ -42,6 +42,7 @@ const Root = (0, styles_1.styled)(material_1.Box, {
|
|
|
42
42
|
slot: 'EventAddressRoot'
|
|
43
43
|
})(() => ({}));
|
|
44
44
|
function EventAddress(inProps) {
|
|
45
|
+
var _a;
|
|
45
46
|
//PROPS
|
|
46
47
|
const props = (0, system_1.useThemeProps)({
|
|
47
48
|
props: inProps,
|
|
@@ -58,23 +59,26 @@ function EventAddress(inProps) {
|
|
|
58
59
|
const [suggestions, setSuggestions] = (0, react_1.useState)([]);
|
|
59
60
|
const [timeoutId, setTimeoutId] = (0, react_1.useState)(null);
|
|
60
61
|
const liveStream = (0, react_1.useMemo)(() => {
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
62
|
+
return (event.live_stream ||
|
|
63
|
+
{
|
|
64
|
+
title: (event === null || event === void 0 ? void 0 : event.name) || `${intl.formatMessage(messages.name)}`,
|
|
65
|
+
created_at: (event === null || event === void 0 ? void 0 : event.start_date) || (0, utils_1.getNewDate)(),
|
|
66
|
+
settings: constants_2.LIVESTREAM_DEFAULT_SETTINGS
|
|
67
|
+
});
|
|
67
68
|
}, [event]);
|
|
68
69
|
// CONTEXT
|
|
69
70
|
const scContext = (0, react_core_1.useSCContext)();
|
|
71
|
+
const scUserContext = (0, react_core_1.useSCUser)();
|
|
70
72
|
const geocodingApiKey = (0, react_1.useMemo)(() => scContext.settings.integrations && scContext.settings.integrations.geocoding.apiKey, [scContext.settings.integrations]);
|
|
71
73
|
const { isLoaded } = (0, api_1.useLoadScript)({
|
|
72
74
|
googleMapsApiKey: scContext.settings.integrations.geocoding.apiKey,
|
|
73
75
|
libraries: ['places', 'geocoding']
|
|
74
76
|
});
|
|
77
|
+
const canViewLiveTab = (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) || event.live_stream; }, [(_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.permission]);
|
|
75
78
|
// HANDLERS
|
|
76
79
|
const handleChange = (_event, newValue) => {
|
|
77
80
|
setLocation(newValue);
|
|
81
|
+
forwardGeolocationData({ location: newValue });
|
|
78
82
|
};
|
|
79
83
|
const handleSelection = (_event, newValue) => tslib_1.__awaiter(this, void 0, void 0, function* () {
|
|
80
84
|
if (newValue) {
|
|
@@ -134,8 +138,8 @@ function EventAddress(inProps) {
|
|
|
134
138
|
if (!geocodingApiKey && !isLoaded) {
|
|
135
139
|
return (0, jsx_runtime_1.jsx)(HiddenPlaceholder_1.default, {});
|
|
136
140
|
}
|
|
137
|
-
return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Tabs, Object.assign({ className: classes.tabs, value: location, onChange: handleChange, indicatorColor: "secondary", textColor: "secondary", variant: "fullWidth" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Tab, { value: types_1.SCEventLocationType.PERSON, classes: { root: classes.tab }, icon: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "add_location_alt" }), iconPosition: "start", label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.address.live.label", defaultMessage: "ui.eventForm.address.live.label" }) }), (0, jsx_runtime_1.jsx)(material_1.Tab, { value: types_1.SCEventLocationType.ONLINE, classes: { root: classes.tab }, icon: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "play_circle_outline" }), iconPosition: "start", label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.address.online.label", defaultMessage: "ui.eventForm.address.online.label" }) }), (0, jsx_runtime_1.jsx)(material_1.Tab, { value: types_1.SCEventLocationType.LIVESTREAM, classes: { root: classes.tab }, icon: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "photo_camera" }), iconPosition: "start", label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.address.liveStream.label", defaultMessage: "ui.eventForm.address.liveStream.label" }) })] })), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.tabContent }, { children: [location === types_1.SCEventLocationType.PERSON && ((0, jsx_runtime_1.jsx)(material_1.Autocomplete, { size: "small", value: geolocation, onChange: handleSelection, inputValue: inputValue, onInputChange: handleLocationChange, options: suggestions, getOptionLabel: (option) => option.description || geolocation.description, noOptionsText: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.address.live.noResults", defaultMessage: "ui.eventForm.address.live.noResults" }), isOptionEqualToValue: (option, value) => option.description === value.description, renderInput: (params) => ((0, jsx_runtime_1.jsx)(material_1.TextField, Object.assign({}, params, { label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.address.live.placeholder", defaultMessage: "ui.eventForm.address.live.placeholder" }), variant: "outlined", fullWidth: true, InputProps: Object.assign(Object.assign({}, params.InputProps), { endAdornment: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.InputAdornment, Object.assign({ position: "start" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "add_location_alt" }) })), params.InputProps.endAdornment] })) }) }))) })), location === types_1.SCEventLocationType.ONLINE && ((0, jsx_runtime_1.jsx)(UrlTextField_1.default, { size: "small", fullWidth: true, type: "url", placeholder: `${intl.formatMessage(messages.virtualPlaceholder)}`, helperText: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.address.online.help", defaultMessage: "ui.eventForm.address.online.help" }), InputProps: {
|
|
141
|
+
return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Tabs, Object.assign({ className: classes.tabs, value: location, onChange: handleChange, indicatorColor: "secondary", textColor: "secondary", variant: "fullWidth" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Tab, { value: types_1.SCEventLocationType.PERSON, classes: { root: classes.tab }, icon: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "add_location_alt" }), iconPosition: "start", label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.address.live.label", defaultMessage: "ui.eventForm.address.live.label" }) }), (0, jsx_runtime_1.jsx)(material_1.Tab, { value: types_1.SCEventLocationType.ONLINE, classes: { root: classes.tab }, icon: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "play_circle_outline" }), iconPosition: "start", label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.address.online.label", defaultMessage: "ui.eventForm.address.online.label" }) }), canViewLiveTab && ((0, jsx_runtime_1.jsx)(material_1.Tab, { value: types_1.SCEventLocationType.LIVESTREAM, classes: { root: classes.tab }, icon: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "photo_camera" }), iconPosition: "start", label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.address.liveStream.label", defaultMessage: "ui.eventForm.address.liveStream.label" }) }))] })), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.tabContent }, { children: [location === types_1.SCEventLocationType.PERSON && ((0, jsx_runtime_1.jsx)(material_1.Autocomplete, { size: "small", value: geolocation, onChange: handleSelection, inputValue: inputValue, onInputChange: handleLocationChange, options: suggestions, getOptionLabel: (option) => option.description || geolocation.description, noOptionsText: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.address.live.noResults", defaultMessage: "ui.eventForm.address.live.noResults" }), isOptionEqualToValue: (option, value) => option.description === value.description, renderInput: (params) => ((0, jsx_runtime_1.jsx)(material_1.TextField, Object.assign({}, params, { label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.address.live.placeholder", defaultMessage: "ui.eventForm.address.live.placeholder" }), variant: "outlined", fullWidth: true, InputProps: Object.assign(Object.assign({}, params.InputProps), { endAdornment: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.InputAdornment, Object.assign({ position: "start" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "add_location_alt" }) })), params.InputProps.endAdornment] })) }) }))) })), location === types_1.SCEventLocationType.ONLINE && ((0, jsx_runtime_1.jsx)(UrlTextField_1.default, { size: "small", fullWidth: true, type: "url", placeholder: `${intl.formatMessage(messages.virtualPlaceholder)}`, helperText: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.address.online.help", defaultMessage: "ui.eventForm.address.online.help" }), InputProps: {
|
|
138
142
|
endAdornment: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "play_circle_outline" })
|
|
139
|
-
}, onChange: handleLinkChange })), location === types_1.SCEventLocationType.LIVESTREAM && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(LiveStream_1.default, { template: liveStream_1.SCLiveStreamTemplateType.SNIPPET, liveStream: liveStream, actions: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}) }), (0, jsx_runtime_1.jsx)(LiveStreamFormSettings_1.default, { settings: liveStream.settings, onChange: handleLiveStreamSettingsChange })] }))] }))] })));
|
|
143
|
+
}, onChange: handleLinkChange })), canViewLiveTab && location === types_1.SCEventLocationType.LIVESTREAM && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(LiveStream_1.default, { template: liveStream_1.SCLiveStreamTemplateType.SNIPPET, liveStream: liveStream, actions: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}) }), (0, jsx_runtime_1.jsx)(LiveStreamFormSettings_1.default, { settings: liveStream.settings, onChange: handleLiveStreamSettingsChange })] }))] }))] })));
|
|
140
144
|
}
|
|
141
145
|
exports.default = EventAddress;
|
|
@@ -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;
|
|
@@ -98,8 +98,6 @@ function LiveStreamForm(inProps) {
|
|
|
98
98
|
const [error, setError] = (0, react_1.useState)({});
|
|
99
99
|
// PREFERENCES
|
|
100
100
|
const scPreferences = (0, react_core_1.useSCPreferences)();
|
|
101
|
-
const privateEnabled = (0, react_1.useMemo)(() => scPreferences.preferences[react_core_1.SCPreferences.CONFIGURATIONS_EVENTS_PRIVATE_ENABLED].value, [scPreferences.preferences]);
|
|
102
|
-
const visibilityEnabled = (0, react_1.useMemo)(() => scPreferences.preferences[react_core_1.SCPreferences.CONFIGURATIONS_EVENTS_VISIBILITY_ENABLED].value, [scPreferences.preferences]);
|
|
103
101
|
const _backgroundCover = Object.assign({}, (field.cover
|
|
104
102
|
? { background: `url('${field.cover}') center / cover` }
|
|
105
103
|
: { background: `url('${scPreferences.preferences[react_core_1.SCPreferences.IMAGES_USER_DEFAULT_COVER].value}') center / cover` }));
|
|
@@ -153,7 +151,7 @@ function LiveStreamForm(inProps) {
|
|
|
153
151
|
utils_1.Logger.error(Errors_1.SCOPE_SC_UI, e);
|
|
154
152
|
onError === null || onError === void 0 ? void 0 : onError(e);
|
|
155
153
|
});
|
|
156
|
-
}, [field,
|
|
154
|
+
}, [field, onSuccess, onError]);
|
|
157
155
|
const handleChange = (0, react_1.useCallback)((event) => {
|
|
158
156
|
const { name, value } = event.target;
|
|
159
157
|
setField((prev) => (Object.assign(Object.assign({}, prev), { [name]: value })));
|
|
@@ -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.
|
|
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.muteParticipants), onChange: () => onChange(Object.assign(Object.assign({}, settings), { ['muteParticipants']: !(settings === null || settings === void 0 ? void 0 : settings.muteParticipants) })) }), (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.muteParticipants", defaultMessage: "ui.liveStreamForm.muteParticipants" }) }))] })), (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,8 +1,11 @@
|
|
|
1
|
+
import { SCLiveStreamViewType } from '@selfcommunity/types';
|
|
1
2
|
export declare const PREFIX = "SCLiveStreamForm";
|
|
2
3
|
export declare const LIVESTREAM_DEFAULT_SETTINGS: {
|
|
3
|
-
|
|
4
|
+
muteParticipants: boolean;
|
|
4
5
|
hideParticipantList: boolean;
|
|
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
|
-
hideParticipantList:
|
|
8
|
-
automaticallyNotifyFollowers:
|
|
7
|
+
muteParticipants: true,
|
|
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,14 @@ 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
|
+
const LiveStreamProvider_1 = require("./LiveStreamVideoConference/LiveStreamProvider");
|
|
20
21
|
const classes = {
|
|
21
22
|
root: `${constants_1.PREFIX}-root`,
|
|
22
23
|
content: `${constants_1.PREFIX}-content`,
|
|
@@ -60,12 +61,13 @@ const Root = (0, styles_1.styled)(material_1.Box, {
|
|
|
60
61
|
* @param inProps
|
|
61
62
|
*/
|
|
62
63
|
function LiveStreamRoom(inProps) {
|
|
64
|
+
var _a, _b, _c, _d;
|
|
63
65
|
//PROPS
|
|
64
66
|
const props = (0, system_1.useThemeProps)({
|
|
65
67
|
props: inProps,
|
|
66
68
|
name: constants_1.PREFIX
|
|
67
69
|
});
|
|
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"]);
|
|
70
|
+
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
71
|
// CONTEXT
|
|
70
72
|
const scUserContext = (0, react_core_1.useSCUser)();
|
|
71
73
|
const { preferences, features } = (0, react_core_1.useSCPreferences)();
|
|
@@ -74,11 +76,11 @@ function LiveStreamRoom(inProps) {
|
|
|
74
76
|
const [preJoinChoices, setPreJoinChoices] = (0, react_1.useState)(presetPreJoinChoices);
|
|
75
77
|
const [loading, setLoading] = (0, react_1.useState)(false);
|
|
76
78
|
const preJoinDefaults = (0, react_1.useMemo)(() => {
|
|
77
|
-
var _a, _b, _c
|
|
79
|
+
var _a, _b, _c;
|
|
78
80
|
return {
|
|
79
81
|
username: ((_a = scUserContext.user) === null || _a === void 0 ? void 0 : _a.username) || '',
|
|
80
|
-
videoEnabled: (
|
|
81
|
-
audioEnabled: (
|
|
82
|
+
videoEnabled: ((_b = scLiveStream === null || scLiveStream === void 0 ? void 0 : scLiveStream.settings) === null || _b === void 0 ? void 0 : _b.disableVideo) === false,
|
|
83
|
+
audioEnabled: ((_c = scLiveStream === null || scLiveStream === void 0 ? void 0 : scLiveStream.settings) === null || _c === void 0 ? void 0 : _c.muteParticipants) === false
|
|
82
84
|
};
|
|
83
85
|
}, [scUserContext.user, scLiveStream]);
|
|
84
86
|
const [connectionDetails, setConnectionDetails] = (0, react_1.useState)(presetConnectionDetails);
|
|
@@ -125,12 +127,15 @@ function LiveStreamRoom(inProps) {
|
|
|
125
127
|
/**
|
|
126
128
|
* User must be authenticated
|
|
127
129
|
*/
|
|
128
|
-
if (
|
|
130
|
+
if (!scLiveStream || !scUserContext.user || !liveStreamEnabled) {
|
|
129
131
|
return (0, jsx_runtime_1.jsx)(material_1.CircularProgress, {});
|
|
130
132
|
}
|
|
131
133
|
/**
|
|
132
134
|
* Renders root object
|
|
133
135
|
*/
|
|
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)(
|
|
136
|
+
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)(LiveStreamProvider_1.LiveStreamContext.Provider, Object.assign({ value: { liveStream: scLiveStream } }, { children: (0, jsx_runtime_1.jsx)(PreJoin_1.PreJoin, { 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 &&
|
|
137
|
+
scUserContext.user.id !== scLiveStream.host.id &&
|
|
138
|
+
scLiveStream &&
|
|
139
|
+
(((_a = scLiveStream.settings) === null || _a === void 0 ? void 0 : _a.muteParticipants) || (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.muteParticipants) && ((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)(LiveStreamProvider_1.LiveStreamContext.Provider, Object.assign({ value: { liveStream: scLiveStream } }, { children: (0, jsx_runtime_1.jsx)(LiveStreamVideoConference_1.default, Object.assign({ connectionDetails: connectionDetails, userChoices: preJoinChoices }, LiveStreamVideoConferenceComponentProps)) })) }))) })) })));
|
|
135
140
|
}
|
|
136
141
|
exports.default = LiveStreamRoom;
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { SCLiveStreamType } from '@selfcommunity/types';
|
|
3
|
+
/**
|
|
4
|
+
* Interface LiveStreamContextType
|
|
5
|
+
*/
|
|
6
|
+
export interface LiveStreamContextType {
|
|
7
|
+
/**
|
|
8
|
+
* Options
|
|
9
|
+
*/
|
|
10
|
+
liveStream: SCLiveStreamType;
|
|
11
|
+
}
|
|
12
|
+
export declare const LiveStreamContext: import("react").Context<LiveStreamContextType>;
|
|
13
|
+
/**
|
|
14
|
+
* Let's only export the `useLiveStream` hook instead of the context.
|
|
15
|
+
* We only want to use the hook directly and never the context component.
|
|
16
|
+
*/
|
|
17
|
+
export declare function useLiveStream(): LiveStreamContextType;
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.useLiveStream = exports.LiveStreamContext = void 0;
|
|
4
|
+
const react_1 = require("react");
|
|
5
|
+
exports.LiveStreamContext = (0, react_1.createContext)({});
|
|
6
|
+
/**
|
|
7
|
+
* Let's only export the `useLiveStream` hook instead of the context.
|
|
8
|
+
* We only want to use the hook directly and never the context component.
|
|
9
|
+
*/
|
|
10
|
+
function useLiveStream() {
|
|
11
|
+
return (0, react_1.useContext)(exports.LiveStreamContext);
|
|
12
|
+
}
|
|
13
|
+
exports.useLiveStream = useLiveStream;
|
package/lib/cjs/components/LiveStreamRoom/LiveStreamVideoConference/LiveStreamVideoConference.d.ts
CHANGED
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import { BoxProps } from '@mui/material';
|
|
2
|
-
import { SCLiveStreamType } from '@selfcommunity/types/src/index';
|
|
3
2
|
import { LiveKitRoomProps, LocalUserChoices, VideoConferenceProps } from '@livekit/components-react';
|
|
4
3
|
import { VideoCodec } from 'livekit-client';
|
|
5
4
|
import React from 'react';
|
|
@@ -10,11 +9,6 @@ export interface LiveStreamVideoConferenceProps extends BoxProps {
|
|
|
10
9
|
* @default null
|
|
11
10
|
*/
|
|
12
11
|
className?: string;
|
|
13
|
-
/**
|
|
14
|
-
* Livestream Object
|
|
15
|
-
* @default null
|
|
16
|
-
*/
|
|
17
|
-
liveStream?: SCLiveStreamType;
|
|
18
12
|
/**
|
|
19
13
|
* User choices
|
|
20
14
|
*/
|
package/lib/cjs/components/LiveStreamRoom/LiveStreamVideoConference/LiveStreamVideoConference.js
CHANGED
|
@@ -6,6 +6,7 @@ const material_1 = require("@mui/material");
|
|
|
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 constants_1 = require("./constants");
|
|
11
12
|
const components_react_1 = require("@livekit/components-react");
|
|
@@ -14,6 +15,7 @@ const components_core_1 = require("@livekit/components-core");
|
|
|
14
15
|
const constants_2 = require("../constants");
|
|
15
16
|
const react_intl_1 = require("react-intl");
|
|
16
17
|
const VideoConference_1 = require("./VideoConference");
|
|
18
|
+
const LiveStreamProvider_1 = require("./LiveStreamProvider");
|
|
17
19
|
const classes = {
|
|
18
20
|
root: `${constants_1.PREFIX}-root`,
|
|
19
21
|
title: `${constants_1.PREFIX}-title`,
|
|
@@ -52,13 +54,14 @@ function LiveStreamVideoConference(inProps) {
|
|
|
52
54
|
props: inProps,
|
|
53
55
|
name: constants_1.PREFIX
|
|
54
56
|
});
|
|
55
|
-
const { className,
|
|
57
|
+
const { className, handleOnLeaveRoom, userChoices = components_core_1.defaultUserChoices, connectionDetails = {}, LiveKitRoomComponentProps = {
|
|
56
58
|
/* simulateParticipants: true */
|
|
57
|
-
}, VideoConferenceComponentProps = {}, startConferenceEndContent, endConferenceEndContent, options = constants_2.defaultVideoOptions } = props, rest = tslib_1.__rest(props, ["className", "
|
|
59
|
+
}, VideoConferenceComponentProps = {}, startConferenceEndContent, endConferenceEndContent, options = constants_2.defaultVideoOptions } = props, rest = tslib_1.__rest(props, ["className", "handleOnLeaveRoom", "userChoices", "connectionDetails", "LiveKitRoomComponentProps", "VideoConferenceComponentProps", "startConferenceEndContent", "endConferenceEndContent", "options"]);
|
|
58
60
|
// CONTEXT
|
|
59
61
|
const scUserContext = (0, react_core_1.useSCUser)();
|
|
60
62
|
const scRoutingContext = (0, react_core_1.useSCRouting)();
|
|
61
63
|
const { preferences, features } = (0, react_core_1.useSCPreferences)();
|
|
64
|
+
const { liveStream } = (0, LiveStreamProvider_1.useLiveStream)();
|
|
62
65
|
// Passphrase
|
|
63
66
|
// const e2eePassphrase = typeof window !== 'undefined' && decodePassphrase(location.hash.substring(1));
|
|
64
67
|
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
@@ -69,6 +72,11 @@ function LiveStreamVideoConference(inProps) {
|
|
|
69
72
|
const [e2eeSetupComplete, setE2eeSetupComplete] = (0, react_1.useState)(true);
|
|
70
73
|
const [liveActive, setLiveActive] = (0, react_1.useState)(true);
|
|
71
74
|
const [error, setError] = (0, react_1.useState)(null);
|
|
75
|
+
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.muteParticipants))); }, [scUserContext, liveStream]);
|
|
76
|
+
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]);
|
|
77
|
+
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]);
|
|
78
|
+
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]);
|
|
79
|
+
const speakerFocused = (0, react_1.useMemo)(() => (scUserContext.user && liveStream && liveStream.settings.view === types_1.SCLiveStreamViewType.SPEAKER ? liveStream.host : null), [scUserContext, liveStream]);
|
|
72
80
|
/* const liveStreamRoomMaxParticipants = useMemo(
|
|
73
81
|
() =>
|
|
74
82
|
preferences &&
|
|
@@ -178,6 +186,6 @@ function LiveStreamVideoConference(inProps) {
|
|
|
178
186
|
/**
|
|
179
187
|
* Renders root object
|
|
180
188
|
*/
|
|
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, {})) })) })));
|
|
189
|
+
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 && { 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
190
|
}
|
|
183
191
|
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,28 @@
|
|
|
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
|
+
disableTileActions?: boolean;
|
|
22
|
+
onParticipantClick?: (event: ParticipantClickEvent) => void;
|
|
23
|
+
}
|
|
24
|
+
/**
|
|
25
|
+
* The `ParticipantTile` component is the base utility wrapper for displaying a visual representation of a participant.
|
|
26
|
+
* This component can be used as a child of the `TrackLoop` component or by passing a track reference as property.
|
|
27
|
+
*/
|
|
28
|
+
export declare const ParticipantTile: (props: ParticipantTileProps & React.RefAttributes<HTMLDivElement>) => React.ReactNode;
|