@selfcommunity/react-ui
Version:
React UI Components to integrate a Community created with SelfCommunity Platform.
61 lines (60 loc) • 7.47 kB
JavaScript
import { __rest } from "tslib";
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { Track } from 'livekit-client';
import * as React from 'react';
import { supportsScreenSharing } from '@livekit/components-core';
import { ChatIcon, ChatToggle, GearIcon, LeaveIcon, MediaDeviceMenu, StartMediaButton, useLocalParticipantPermissions, useMaybeLayoutContext, usePersistentUserChoices } from '@livekit/components-react';
import { TrackToggle } from './TrackToggle';
import { useMediaQuery } from '@mui/material';
import { SettingsMenuToggle } from './SettingsMenuToggle';
import { DisconnectButton } from './DisconnectButton';
import { mergeProps } from './utils';
import { FormattedMessage } from '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.
*/
export function ControlBar(_a) {
var _b, _c, _d, _e, _f;
var { variation, controls, saveUserChoices = true, onDeviceError } = _a, props = __rest(_a, ["variation", "controls", "saveUserChoices", "onDeviceError"]);
const [isChatOpen, setIsChatOpen] = React.useState(false);
const layoutContext = 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 = 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 = 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 = supportsScreenSharing();
const [isScreenShareEnabled, setIsScreenShareEnabled] = React.useState(false);
const onScreenShareChange = React.useCallback((enabled) => {
setIsScreenShareEnabled(enabled);
}, [setIsScreenShareEnabled]);
const htmlProps = mergeProps({ className: 'lk-control-bar' }, props);
const { saveAudioInputEnabled, saveVideoInputEnabled, saveAudioInputDeviceId, saveVideoInputDeviceId } = 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 (_jsxs("div", Object.assign({}, htmlProps, { children: [visibleControls.microphone && (_jsxs("div", Object.assign({ className: "lk-button-group" }, { children: [_jsx(_Fragment, { children: _jsx(TrackToggle, Object.assign({ source: Track.Source.Microphone, showIcon: showIcon, onChange: microphoneOnChange, onDeviceError: (error) => onDeviceError === null || onDeviceError === void 0 ? void 0 : onDeviceError({ source: Track.Source.Microphone, error }) }, { children: showText && _jsx(FormattedMessage, { id: "ui.liveStreamRoom.controlBar.microphone", defaultMessage: "ui.liveStreamRoom.controlBar.microphone" }) })) }), _jsx("div", Object.assign({ className: "lk-button-group-menu" }, { children: _jsx(MediaDeviceMenu, { kind: "audioinput", onActiveDeviceChange: (_kind, deviceId) => saveAudioInputDeviceId(deviceId !== null && deviceId !== void 0 ? deviceId : '') }) }))] }))), visibleControls.camera && (_jsxs("div", Object.assign({ className: "lk-button-group" }, { children: [_jsx(_Fragment, { children: _jsx(TrackToggle, Object.assign({ source: Track.Source.Camera, showIcon: showIcon, onChange: cameraOnChange, onDeviceError: (error) => onDeviceError === null || onDeviceError === void 0 ? void 0 : onDeviceError({ source: Track.Source.Camera, error }) }, { children: showText && _jsx(FormattedMessage, { id: "ui.liveStreamRoom.controlBar.camera", defaultMessage: "ui.liveStreamRoom.controlBar.camera" }) })) }), _jsx("div", Object.assign({ className: "lk-button-group-menu" }, { children: _jsx(MediaDeviceMenu, { kind: "videoinput", onActiveDeviceChange: (_kind, deviceId) => saveVideoInputDeviceId(deviceId !== null && deviceId !== void 0 ? deviceId : '') }) }))] }))), visibleControls.screenShare && browserSupportsScreenSharing && (_jsx(_Fragment, { children: _jsx(TrackToggle, Object.assign({ source: 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: Track.Source.ScreenShare, error }) }, { children: showText &&
(isScreenShareEnabled ? (_jsx(FormattedMessage, { id: "ui.liveStreamRoom.controlBar.stopShareScreen", defaultMessage: "ui.liveStreamRoom.controlBar.stopShareScreen" })) : (_jsx(FormattedMessage, { id: "ui.liveStreamRoom.controlBar.shareScreen", defaultMessage: "ui.liveStreamRoom.controlBar.shareScreen" }))) })) })), visibleControls.chat && (_jsx(_Fragment, { children: _jsxs(ChatToggle, { children: [showIcon && _jsx(ChatIcon, {}), showText && _jsx(FormattedMessage, { id: "ui.liveStreamRoom.controlBar.chat", defaultMessage: "ui.liveStreamRoom.controlBar.chat" })] }) })), visibleControls.settings && (_jsx(_Fragment, { children: _jsxs(SettingsMenuToggle, { children: [showIcon && _jsx(GearIcon, {}), showText && _jsx(FormattedMessage, { id: "ui.liveStreamRoom.controlBar.settings", defaultMessage: "ui.liveStreamRoom.controlBar.settings" })] }) })), visibleControls.leave && (_jsx(_Fragment, { children: _jsxs(DisconnectButton, { children: [showIcon && _jsx(LeaveIcon, {}), showText && _jsx(FormattedMessage, { id: "ui.liveStreamRoom.controlBar.leave", defaultMessage: "ui.liveStreamRoom.controlBar.leave" })] }) })), _jsx(StartMediaButton, {})] })));
}