@selfcommunity/react-ui
Version:
React UI Components to integrate a Community created with SelfCommunity Platform.
61 lines (60 loc) • 5.5 kB
JavaScript
import { __rest } from "tslib";
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from 'react';
import { Track } from 'livekit-client';
import { isTrackReference, isTrackReferencePinned } from '@livekit/components-core';
import { AudioTrack, ConnectionQualityIndicator, FocusToggle, LockLockedIcon, ParticipantContext, ParticipantName, ScreenShareIcon, TrackMutedIndicator, TrackRefContext, useEnsureTrackRef, useFeatureContext, useIsEncrypted, useMaybeLayoutContext, useMaybeParticipantContext, useMaybeTrackRefContext, useParticipantTile, VideoTrack } from '@livekit/components-react';
import ParticipantTileAvatar from './ParticipantTileAvatar';
import ParticipantTileActions from './ParticipantTileActions';
import { useSCUser } from '@selfcommunity/react-core';
/**
* The `ParticipantContextIfNeeded` component only creates a `ParticipantContext`
* if there is no `ParticipantContext` already.
*/
export function ParticipantContextIfNeeded(props) {
const hasContext = !!useMaybeParticipantContext();
return props.participant && !hasContext ? (_jsx(ParticipantContext.Provider, Object.assign({ value: props.participant }, { children: props.children }))) : (_jsx(_Fragment, { children: props.children }));
}
/**
* Only create a `TrackRefContext` if there is no `TrackRefContext` already.
*/
export function TrackRefContextIfNeeded(props) {
const hasContext = !!useMaybeTrackRefContext();
return props.trackRef && !hasContext ? (_jsx(TrackRefContext.Provider, Object.assign({ value: props.trackRef }, { children: props.children }))) : (_jsx(_Fragment, { children: props.children }));
}
/**
* 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.
*/
export const ParticipantTile =
/* @__PURE__ */ React.forwardRef(function ParticipantTile(_a, ref) {
var _b, _c;
var { trackRef, children, onParticipantClick, disableSpeakingIndicator, disableTileFocusToggle = false, disableTileActions = false } = _a, htmlProps = __rest(_a, ["trackRef", "children", "onParticipantClick", "disableSpeakingIndicator", "disableTileFocusToggle", "disableTileActions"]);
const scUserContext = useSCUser();
const trackReference = useEnsureTrackRef(trackRef);
const { elementProps } = useParticipantTile({
htmlProps,
disableSpeakingIndicator,
onParticipantClick,
trackRef: trackReference
});
const isEncrypted = useIsEncrypted(trackReference.participant);
const layoutContext = useMaybeLayoutContext();
const autoManageSubscription = (_b = useFeatureContext()) === null || _b === void 0 ? void 0 : _b.autoSubscription;
const handleSubscribe = React.useCallback((subscribed) => {
if (trackReference.source &&
!subscribed &&
layoutContext &&
layoutContext.pin.dispatch &&
isTrackReferencePinned(trackReference, layoutContext.pin.state)) {
layoutContext.pin.dispatch({ msg: 'clear_pin' });
}
}, [trackReference, layoutContext]);
return (_jsx("div", Object.assign({ ref: ref, style: { position: 'relative' } }, elementProps, { children: _jsx(TrackRefContextIfNeeded, Object.assign({ trackRef: trackReference }, { children: _jsxs(ParticipantContextIfNeeded, Object.assign({ participant: trackReference.participant }, { children: [children !== null && children !== void 0 ? children : (_jsxs(_Fragment, { children: [isTrackReference(trackReference) &&
(((_c = trackReference.publication) === null || _c === void 0 ? void 0 : _c.kind) === 'video' ||
trackReference.source === Track.Source.Camera ||
trackReference.source === Track.Source.ScreenShare) ? (_jsx(_Fragment, { children: _jsx(VideoTrack, { trackRef: trackReference, onSubscriptionStatusChanged: handleSubscribe, manageSubscription: autoManageSubscription }) })) : (isTrackReference(trackReference) && (_jsx(_Fragment, { children: _jsx(AudioTrack, { trackRef: trackReference, onSubscriptionStatusChanged: handleSubscribe }) }))), _jsx("div", Object.assign({ className: "lk-participant-placeholder" }, { children: _jsx(ParticipantTileAvatar, { participant: trackReference.participant }) })), _jsxs("div", Object.assign({ className: "lk-participant-metadata" }, { children: [_jsx("div", Object.assign({ className: "lk-participant-metadata-item" }, { children: trackReference.source === Track.Source.Camera ? (_jsxs(_Fragment, { children: [isEncrypted && _jsx(LockLockedIcon, { style: { marginRight: '0.25rem' } }), _jsx(TrackMutedIndicator, { trackRef: {
participant: trackReference.participant,
source: Track.Source.Microphone
}, show: 'muted' }), _jsx(ParticipantName, { children: !disableTileActions && _jsx(ParticipantTileActions, {}) })] })) : (_jsxs(_Fragment, { children: [_jsx(ScreenShareIcon, { style: { marginRight: '0.25rem' } }), _jsx(ParticipantName, { children: "'s screen" })] })) })), _jsx(ConnectionQualityIndicator, { className: "lk-participant-metadata-item" })] }))] })), !disableTileFocusToggle && _jsx(FocusToggle, { trackRef: trackReference })] })) })) })));
});