@selfcommunity/react-ui
Version:
React UI Components to integrate a Community created with SelfCommunity Platform.
74 lines (73 loc) • 3.79 kB
JavaScript
import { __awaiter, __rest } from "tslib";
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from 'react';
import { useDisconnectButton } from '@livekit/components-react';
import { useCallback, useMemo, useState } from 'react';
import { LiveStreamApiClient } from '@selfcommunity/api-services';
import { useLiveStream } from './LiveStreamProvider';
import { FormattedMessage } from 'react-intl';
import { Checkbox, FormControlLabel, FormGroup } from '@mui/material';
import { useSCUser } from '@selfcommunity/react-core';
import ConfirmDialog from '../../../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.
*/
export const DisconnectButton =
/* @__PURE__ */ React.forwardRef(function DisconnectButton(props, ref) {
// CONTEXT
const { liveStream } = useLiveStream();
const scUserContext = useSCUser();
// STATE
const [closeLive, setCloseLive] = useState(false);
const [openConfirmDialog, setOpenConfirmDialog] = useState(false);
const [isUpdating, setIsUpdating] = useState(false);
const { buttonProps } = useDisconnectButton(props);
const { onClick } = buttonProps, rest = __rest(buttonProps, ["onClick"]);
/**
* Intercept fist leave action
*/
const handleOnLeave = 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 = useCallback((event) => {
setCloseLive(event.target.checked);
}, [closeLive]);
/**
* Perform set liveStream as closed
*/
const performCloseLiveStream = useMemo(() => () => __awaiter(this, void 0, void 0, function* () {
const res = yield 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 (_jsxs(_Fragment, { children: [_jsx("button", Object.assign({ ref: ref }, rest, { onClick: handleOnLeave }, { children: props.children })), openConfirmDialog && (_jsx(ConfirmDialog, { open: openConfirmDialog, title: _jsx(_Fragment, {}), content: _jsxs(_Fragment, { children: [_jsx(FormattedMessage, { id: "ui.liveStreamRoom.live.terminate", defaultMessage: "ui.liveStreamRoom.live.terminate" }), _jsx(FormGroup, { children: _jsx(FormControlLabel, { control: _jsx(Checkbox, { checked: closeLive, onChange: handleChangeCloseLive, inputProps: { 'aria-label': 'controlled' } }), label: _jsx(FormattedMessage, { id: "ui.liveStreamRoom.live.terminatePermanently", defaultMessage: "ui.liveStreamRoom.live.terminatePermanently" }) }) })] }), onConfirm: handleLeaveAction, isUpdating: isUpdating, onClose: () => setOpenConfirmDialog(false) }))] }));
});