@selfcommunity/react-ui
Version:
React UI Components to integrate a Community created with SelfCommunity Platform.
66 lines (65 loc) • 6.65 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ParticipantTile = exports.TrackRefContextIfNeeded = exports.ParticipantContextIfNeeded = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const React = tslib_1.__importStar(require("react"));
const livekit_client_1 = require("livekit-client");
const components_core_1 = require("@livekit/components-core");
const components_react_1 = require("@livekit/components-react");
const ParticipantTileAvatar_1 = tslib_1.__importDefault(require("./ParticipantTileAvatar"));
const ParticipantTileActions_1 = tslib_1.__importDefault(require("./ParticipantTileActions"));
const react_core_1 = require("@selfcommunity/react-core");
/**
* The `ParticipantContextIfNeeded` component only creates a `ParticipantContext`
* if there is no `ParticipantContext` already.
*/
function ParticipantContextIfNeeded(props) {
const hasContext = !!(0, components_react_1.useMaybeParticipantContext)();
return props.participant && !hasContext ? ((0, jsx_runtime_1.jsx)(components_react_1.ParticipantContext.Provider, Object.assign({ value: props.participant }, { children: props.children }))) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: props.children }));
}
exports.ParticipantContextIfNeeded = ParticipantContextIfNeeded;
/**
* Only create a `TrackRefContext` if there is no `TrackRefContext` already.
*/
function TrackRefContextIfNeeded(props) {
const hasContext = !!(0, components_react_1.useMaybeTrackRefContext)();
return props.trackRef && !hasContext ? ((0, jsx_runtime_1.jsx)(components_react_1.TrackRefContext.Provider, Object.assign({ value: props.trackRef }, { children: props.children }))) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: props.children }));
}
exports.TrackRefContextIfNeeded = TrackRefContextIfNeeded;
/**
* The `ParticipantTile` component is the base utility wrapper for displaying a visual representation of a participant.
* This component can be used as a child of the `TrackLoop` component or by passing a track reference as property.
*/
exports.ParticipantTile =
/* @__PURE__ */ React.forwardRef(function ParticipantTile(_a, ref) {
var _b, _c;
var { trackRef, children, onParticipantClick, disableSpeakingIndicator, disableTileFocusToggle = false, disableTileActions = false } = _a, htmlProps = tslib_1.__rest(_a, ["trackRef", "children", "onParticipantClick", "disableSpeakingIndicator", "disableTileFocusToggle", "disableTileActions"]);
const scUserContext = (0, react_core_1.useSCUser)();
const trackReference = (0, components_react_1.useEnsureTrackRef)(trackRef);
const { elementProps } = (0, components_react_1.useParticipantTile)({
htmlProps,
disableSpeakingIndicator,
onParticipantClick,
trackRef: trackReference
});
const isEncrypted = (0, components_react_1.useIsEncrypted)(trackReference.participant);
const layoutContext = (0, components_react_1.useMaybeLayoutContext)();
const autoManageSubscription = (_b = (0, components_react_1.useFeatureContext)()) === null || _b === void 0 ? void 0 : _b.autoSubscription;
const handleSubscribe = React.useCallback((subscribed) => {
if (trackReference.source &&
!subscribed &&
layoutContext &&
layoutContext.pin.dispatch &&
(0, components_core_1.isTrackReferencePinned)(trackReference, layoutContext.pin.state)) {
layoutContext.pin.dispatch({ msg: 'clear_pin' });
}
}, [trackReference, layoutContext]);
return ((0, jsx_runtime_1.jsx)("div", Object.assign({ ref: ref, style: { position: 'relative' } }, elementProps, { children: (0, jsx_runtime_1.jsx)(TrackRefContextIfNeeded, Object.assign({ trackRef: trackReference }, { children: (0, jsx_runtime_1.jsxs)(ParticipantContextIfNeeded, Object.assign({ participant: trackReference.participant }, { children: [children !== null && children !== void 0 ? children : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, components_core_1.isTrackReference)(trackReference) &&
(((_c = trackReference.publication) === null || _c === void 0 ? void 0 : _c.kind) === 'video' ||
trackReference.source === livekit_client_1.Track.Source.Camera ||
trackReference.source === livekit_client_1.Track.Source.ScreenShare) ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(components_react_1.VideoTrack, { trackRef: trackReference, onSubscriptionStatusChanged: handleSubscribe, manageSubscription: autoManageSubscription }) })) : ((0, components_core_1.isTrackReference)(trackReference) && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(components_react_1.AudioTrack, { trackRef: trackReference, onSubscriptionStatusChanged: handleSubscribe }) }))), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "lk-participant-placeholder" }, { children: (0, jsx_runtime_1.jsx)(ParticipantTileAvatar_1.default, { participant: trackReference.participant }) })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "lk-participant-metadata" }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: "lk-participant-metadata-item" }, { children: trackReference.source === livekit_client_1.Track.Source.Camera ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isEncrypted && (0, jsx_runtime_1.jsx)(components_react_1.LockLockedIcon, { style: { marginRight: '0.25rem' } }), (0, jsx_runtime_1.jsx)(components_react_1.TrackMutedIndicator, { trackRef: {
participant: trackReference.participant,
source: livekit_client_1.Track.Source.Microphone
}, show: 'muted' }), (0, jsx_runtime_1.jsx)(components_react_1.ParticipantName, { children: !disableTileActions && (0, jsx_runtime_1.jsx)(ParticipantTileActions_1.default, {}) })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_react_1.ScreenShareIcon, { style: { marginRight: '0.25rem' } }), (0, jsx_runtime_1.jsx)(components_react_1.ParticipantName, { children: "'s screen" })] })) })), (0, jsx_runtime_1.jsx)(components_react_1.ConnectionQualityIndicator, { className: "lk-participant-metadata-item" })] }))] })), !disableTileFocusToggle && (0, jsx_runtime_1.jsx)(components_react_1.FocusToggle, { trackRef: trackReference })] })) })) })));
});