@selfcommunity/react-ui
Version:
React UI Components to integrate a Community created with SelfCommunity Platform.
65 lines (64 loc) • 8.62 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ControlBar = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const livekit_client_1 = require("livekit-client");
const React = tslib_1.__importStar(require("react"));
const components_core_1 = require("@livekit/components-core");
const components_react_1 = require("@livekit/components-react");
const TrackToggle_1 = require("./TrackToggle");
const material_1 = require("@mui/material");
const SettingsMenuToggle_1 = require("./SettingsMenuToggle");
const DisconnectButton_1 = require("./DisconnectButton");
const utils_1 = require("./utils");
const react_intl_1 = require("react-intl");
/**
* The `ControlBar` prefab gives the user the basic user interface to control their
* media devices (camera, microphone and screen share), open the `Chat` and leave the room.
*/
function ControlBar(_a) {
var _b, _c, _d, _e, _f;
var { variation, controls, saveUserChoices = true, onDeviceError } = _a, props = tslib_1.__rest(_a, ["variation", "controls", "saveUserChoices", "onDeviceError"]);
const [isChatOpen, setIsChatOpen] = React.useState(false);
const layoutContext = (0, components_react_1.useMaybeLayoutContext)();
React.useEffect(() => {
var _a, _b;
if (((_a = layoutContext === null || layoutContext === void 0 ? void 0 : layoutContext.widget.state) === null || _a === void 0 ? void 0 : _a.showChat) !== undefined) {
setIsChatOpen((_b = layoutContext === null || layoutContext === void 0 ? void 0 : layoutContext.widget.state) === null || _b === void 0 ? void 0 : _b.showChat);
}
}, [(_b = layoutContext === null || layoutContext === void 0 ? void 0 : layoutContext.widget.state) === null || _b === void 0 ? void 0 : _b.showChat]);
const isTooLittleSpace = (0, material_1.useMediaQuery)(`(max-width: ${isChatOpen ? 1000 : 760}px)`);
const defaultVariation = isTooLittleSpace ? 'minimal' : 'verbose';
variation !== null && variation !== void 0 ? variation : (variation = defaultVariation);
const visibleControls = Object.assign({ leave: true }, controls);
const localPermissions = (0, components_react_1.useLocalParticipantPermissions)();
if (!localPermissions) {
visibleControls.camera = false;
visibleControls.chat = false;
visibleControls.microphone = false;
visibleControls.screenShare = false;
}
else {
(_c = visibleControls.camera) !== null && _c !== void 0 ? _c : (visibleControls.camera = localPermissions.canPublish);
(_d = visibleControls.microphone) !== null && _d !== void 0 ? _d : (visibleControls.microphone = localPermissions.canPublish);
(_e = visibleControls.screenShare) !== null && _e !== void 0 ? _e : (visibleControls.screenShare = localPermissions.canPublish);
(_f = visibleControls.chat) !== null && _f !== void 0 ? _f : (visibleControls.chat = localPermissions.canPublishData && (controls === null || controls === void 0 ? void 0 : controls.chat));
}
const showIcon = React.useMemo(() => variation === 'minimal' || variation === 'verbose', [variation]);
const showText = React.useMemo(() => variation === 'textOnly' || variation === 'verbose', [variation]);
const browserSupportsScreenSharing = (0, components_core_1.supportsScreenSharing)();
const [isScreenShareEnabled, setIsScreenShareEnabled] = React.useState(false);
const onScreenShareChange = React.useCallback((enabled) => {
setIsScreenShareEnabled(enabled);
}, [setIsScreenShareEnabled]);
const htmlProps = (0, utils_1.mergeProps)({ className: 'lk-control-bar' }, props);
const { saveAudioInputEnabled, saveVideoInputEnabled, saveAudioInputDeviceId, saveVideoInputDeviceId } = (0, components_react_1.usePersistentUserChoices)({
preventSave: !saveUserChoices
});
const microphoneOnChange = React.useCallback((enabled, isUserInitiated) => (isUserInitiated ? saveAudioInputEnabled(enabled) : null), [saveAudioInputEnabled]);
const cameraOnChange = React.useCallback((enabled, isUserInitiated) => (isUserInitiated ? saveVideoInputEnabled(enabled) : null), [saveVideoInputEnabled]);
return ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, htmlProps, { children: [visibleControls.microphone && ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "lk-button-group" }, { children: [(0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(TrackToggle_1.TrackToggle, Object.assign({ source: livekit_client_1.Track.Source.Microphone, showIcon: showIcon, onChange: microphoneOnChange, onDeviceError: (error) => onDeviceError === null || onDeviceError === void 0 ? void 0 : onDeviceError({ source: livekit_client_1.Track.Source.Microphone, error }) }, { children: showText && (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamRoom.controlBar.microphone", defaultMessage: "ui.liveStreamRoom.controlBar.microphone" }) })) }), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "lk-button-group-menu" }, { children: (0, jsx_runtime_1.jsx)(components_react_1.MediaDeviceMenu, { kind: "audioinput", onActiveDeviceChange: (_kind, deviceId) => saveAudioInputDeviceId(deviceId !== null && deviceId !== void 0 ? deviceId : '') }) }))] }))), visibleControls.camera && ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "lk-button-group" }, { children: [(0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(TrackToggle_1.TrackToggle, Object.assign({ source: livekit_client_1.Track.Source.Camera, showIcon: showIcon, onChange: cameraOnChange, onDeviceError: (error) => onDeviceError === null || onDeviceError === void 0 ? void 0 : onDeviceError({ source: livekit_client_1.Track.Source.Camera, error }) }, { children: showText && (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamRoom.controlBar.camera", defaultMessage: "ui.liveStreamRoom.controlBar.camera" }) })) }), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "lk-button-group-menu" }, { children: (0, jsx_runtime_1.jsx)(components_react_1.MediaDeviceMenu, { kind: "videoinput", onActiveDeviceChange: (_kind, deviceId) => saveVideoInputDeviceId(deviceId !== null && deviceId !== void 0 ? deviceId : '') }) }))] }))), visibleControls.screenShare && browserSupportsScreenSharing && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(TrackToggle_1.TrackToggle, Object.assign({ source: livekit_client_1.Track.Source.ScreenShare, captureOptions: { audio: true, selfBrowserSurface: 'include', surfaceSwitching: 'exclude' }, showIcon: showIcon, onChange: onScreenShareChange, onDeviceError: (error) => onDeviceError === null || onDeviceError === void 0 ? void 0 : onDeviceError({ source: livekit_client_1.Track.Source.ScreenShare, error }) }, { children: showText &&
(isScreenShareEnabled ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamRoom.controlBar.stopShareScreen", defaultMessage: "ui.liveStreamRoom.controlBar.stopShareScreen" })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamRoom.controlBar.shareScreen", defaultMessage: "ui.liveStreamRoom.controlBar.shareScreen" }))) })) })), visibleControls.chat && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(components_react_1.ChatToggle, { children: [showIcon && (0, jsx_runtime_1.jsx)(components_react_1.ChatIcon, {}), showText && (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamRoom.controlBar.chat", defaultMessage: "ui.liveStreamRoom.controlBar.chat" })] }) })), visibleControls.settings && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(SettingsMenuToggle_1.SettingsMenuToggle, { children: [showIcon && (0, jsx_runtime_1.jsx)(components_react_1.GearIcon, {}), showText && (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamRoom.controlBar.settings", defaultMessage: "ui.liveStreamRoom.controlBar.settings" })] }) })), visibleControls.leave && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(DisconnectButton_1.DisconnectButton, { children: [showIcon && (0, jsx_runtime_1.jsx)(components_react_1.LeaveIcon, {}), showText && (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamRoom.controlBar.leave", defaultMessage: "ui.liveStreamRoom.controlBar.leave" })] }) })), (0, jsx_runtime_1.jsx)(components_react_1.StartMediaButton, {})] })));
}
exports.ControlBar = ControlBar;