@selfcommunity/react-ui
Version:
React UI Components to integrate a Community created with SelfCommunity Platform.
77 lines (76 loc) • 4.33 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.DisconnectButton = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const React = tslib_1.__importStar(require("react"));
const components_react_1 = require("@livekit/components-react");
const react_1 = require("react");
const api_services_1 = require("@selfcommunity/api-services");
const LiveStreamProvider_1 = require("./LiveStreamProvider");
const react_intl_1 = require("react-intl");
const material_1 = require("@mui/material");
const react_core_1 = require("@selfcommunity/react-core");
const ConfirmDialog_1 = tslib_1.__importDefault(require("../../../shared/ConfirmDialog/ConfirmDialog"));
/**
* The `DisconnectButton` is a basic html button with the added ability to disconnect from a LiveKit room.
* Normally this is the big red button that allows end users to leave the video or audio call.
*/
exports.DisconnectButton =
/* @__PURE__ */ React.forwardRef(function DisconnectButton(props, ref) {
// CONTEXT
const { liveStream } = (0, LiveStreamProvider_1.useLiveStream)();
const scUserContext = (0, react_core_1.useSCUser)();
// STATE
const [closeLive, setCloseLive] = (0, react_1.useState)(false);
const [openConfirmDialog, setOpenConfirmDialog] = (0, react_1.useState)(false);
const [isUpdating, setIsUpdating] = (0, react_1.useState)(false);
const { buttonProps } = (0, components_react_1.useDisconnectButton)(props);
const { onClick } = buttonProps, rest = tslib_1.__rest(buttonProps, ["onClick"]);
/**
* Intercept fist leave action
*/
const handleOnLeave = (0, react_1.useCallback)(() => {
if (liveStream && scUserContext.user.id === liveStream.host.id) {
setOpenConfirmDialog(true);
}
else {
onClick === null || onClick === void 0 ? void 0 : onClick();
}
}, [setOpenConfirmDialog, liveStream, scUserContext.user]);
/**
* Control close live
*/
const handleChangeCloseLive = (0, react_1.useCallback)((event) => {
setCloseLive(event.target.checked);
}, [closeLive]);
/**
* Perform set liveStream as closed
*/
const performCloseLiveStream = (0, react_1.useMemo)(() => () => tslib_1.__awaiter(this, void 0, void 0, function* () {
const res = yield api_services_1.LiveStreamApiClient.close(liveStream.id);
if (res.status >= 300) {
return Promise.reject(res);
}
return yield Promise.resolve(res.data);
}), [liveStream]);
/**
* Perform patch liveStream before leave the live
*/
const handleLeaveAction = () => {
if (!isUpdating && liveStream && scUserContext.user.id === liveStream.host.id && closeLive) {
setIsUpdating(true);
performCloseLiveStream()
.then(() => {
onClick === null || onClick === void 0 ? void 0 : onClick();
})
.catch((error) => {
console.error(error);
});
}
else {
onClick === null || onClick === void 0 ? void 0 : onClick();
}
};
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("button", Object.assign({ ref: ref }, rest, { onClick: handleOnLeave }, { children: props.children })), openConfirmDialog && ((0, jsx_runtime_1.jsx)(ConfirmDialog_1.default, { open: openConfirmDialog, title: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}), content: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamRoom.live.terminate", defaultMessage: "ui.liveStreamRoom.live.terminate" }), (0, jsx_runtime_1.jsx)(material_1.FormGroup, { children: (0, jsx_runtime_1.jsx)(material_1.FormControlLabel, { control: (0, jsx_runtime_1.jsx)(material_1.Checkbox, { checked: closeLive, onChange: handleChangeCloseLive, inputProps: { 'aria-label': 'controlled' } }), label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamRoom.live.terminatePermanently", defaultMessage: "ui.liveStreamRoom.live.terminatePermanently" }) }) })] }), onConfirm: handleLeaveAction, isUpdating: isUpdating, onClose: () => setOpenConfirmDialog(false) }))] }));
});