@selfcommunity/react-ui 0.10.5-alpha.2 → 0.10.5-alpha.4

package/lib/cjs/components/LiveStreamRoom/LiveStreamVideoConference/FocusLayout.d.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import type { TrackReferenceOrPlaceholder } from '@livekit/components-core';
+import type { ParticipantClickEvent } from '@livekit/components-core';
+export type FocusLayoutContainerProps = React.HTMLAttributes<HTMLDivElement>;
+/**
+ * The `FocusLayoutContainer` is a layout component that expects two children:
+ * A small side component: In a video conference, this is usually a carousel of participants
+ * who are not in focus. And a larger main component to display the focused participant.
+ * For example, with the `FocusLayout` component.
+ */
+export declare function FocusLayoutContainer(props: FocusLayoutContainerProps): JSX.Element;
+export declare function FocusLayoutContainerNoParticipants(props: FocusLayoutContainerProps): JSX.Element;
+export interface FocusLayoutProps extends React.HTMLAttributes<HTMLElement> {
+    /** The track to display in the focus layout. */
+    trackRef?: TrackReferenceOrPlaceholder;
+    onParticipantClick?: (evt: ParticipantClickEvent) => void;
+}
+/**
+ * The `FocusLayout` component is just a light wrapper around the `ParticipantTile` to display a single participant.
+ */
+export declare function FocusLayout({ trackRef, ...htmlProps }: FocusLayoutProps): JSX.Element;

package/lib/cjs/components/LiveStreamRoom/LiveStreamVideoConference/FocusLayout.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FocusLayout = exports.FocusLayoutContainerNoParticipants = exports.FocusLayoutContainer = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ParticipantTile_1 = require("./ParticipantTile");
+const utils_1 = require("./utils");
+/**
+ * The `FocusLayoutContainer` is a layout component that expects two children:
+ * A small side component: In a video conference, this is usually a carousel of participants
+ * who are not in focus. And a larger main component to display the focused participant.
+ * For example, with the `FocusLayout` component.
+ */
+function FocusLayoutContainer(props) {
+    const elementProps = (0, utils_1.mergeProps)(props, { className: 'lk-focus-layout' });
+    return (0, jsx_runtime_1.jsx)("div", Object.assign({}, elementProps, { children: props.children }));
+}
+exports.FocusLayoutContainer = FocusLayoutContainer;
+function FocusLayoutContainerNoParticipants(props) {
+    const elementProps = (0, utils_1.mergeProps)(props, { className: 'lk-focus-layout' });
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({}, elementProps, { style: { gridTemplateColumns: 'none' } }, { children: props.children })));
+}
+exports.FocusLayoutContainerNoParticipants = FocusLayoutContainerNoParticipants;
+/**
+ * The `FocusLayout` component is just a light wrapper around the `ParticipantTile` to display a single participant.
+ */
+function FocusLayout(_a) {
+    var { trackRef } = _a, htmlProps = tslib_1.__rest(_a, ["trackRef"]);
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    return (0, jsx_runtime_1.jsx)(ParticipantTile_1.ParticipantTile, Object.assign({ trackRef: trackRef }, htmlProps));
+}
+exports.FocusLayout = FocusLayout;

package/lib/cjs/components/LiveStreamRoom/LiveStreamVideoConference/LiveStreamProvider.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import { SCLiveStreamType } from '@selfcommunity/types';
+/**
+ * Interface LiveStreamContextType
+ */
+export interface LiveStreamContextType {
+    /**
+     * Options
+     */
+    liveStream: SCLiveStreamType;
+}
+export declare const LiveStreamContext: import("react").Context<LiveStreamContextType>;
+/**
+ * Let's only export the `useLiveStream` hook instead of the context.
+ * We only want to use the hook directly and never the context component.
+ */
+export declare function useLiveStream(): LiveStreamContextType;

package/lib/cjs/components/LiveStreamRoom/LiveStreamVideoConference/LiveStreamProvider.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useLiveStream = exports.LiveStreamContext = void 0;
+const react_1 = require("react");
+exports.LiveStreamContext = (0, react_1.createContext)({});
+/**
+ * Let's only export the `useLiveStream` hook instead of the context.
+ * We only want to use the hook directly and never the context component.
+ */
+function useLiveStream() {
+    return (0, react_1.useContext)(exports.LiveStreamContext);
+}
+exports.useLiveStream = useLiveStream;

package/lib/cjs/components/LiveStreamRoom/LiveStreamVideoConference/LiveStreamVideoConference.d.ts

@@ -0,0 +1,77 @@
+import { BoxProps } from '@mui/material';
+import { LiveKitRoomProps, LocalUserChoices, VideoConferenceProps } from '@livekit/components-react';
+import { VideoCodec } from 'livekit-client';
+import React from 'react';
+import { ConnectionDetails } from '../types';
+export interface LiveStreamVideoConferenceProps extends BoxProps {
+    /**
+     * Overrides or extends the styles applied to the component.
+     * @default null
+     */
+    className?: string;
+    /**
+     * User choices
+     */
+    userChoices?: LocalUserChoices;
+    /**
+     * Connection details, include
+     *       serverUrl: serverUrl,
+     *       roomName: roomName,
+     *       participantToken: participantToken,
+     *       participantName: participantName
+     */
+    connectionDetails?: ConnectionDetails;
+    /**
+     * Override video options
+     */
+    options?: {
+        hq: boolean;
+        codec: VideoCodec;
+    };
+    /**
+     * onLeave room callback
+     */
+    handleOnLeaveRoom?: () => void;
+    /**
+     * Props to spread to LiveKitRoomComponent
+     * @default {}
+     */
+    LiveKitRoomComponentProps?: LiveKitRoomProps;
+    /**
+     * Props to spread to VideoConferenceComponent
+     * @default {}
+     */
+    VideoConferenceComponentProps?: VideoConferenceProps;
+    /**
+     * Element to be inserted before end conference content
+     */
+    startConferenceEndContent?: React.ReactNode | null;
+    /**
+     * Element to be inserted after end conference content
+     */
+    endConferenceEndContent?: React.ReactNode | null;
+    /**
+     * Any other properties
+     */
+    [p: string]: any;
+}
+/**
+ *> API documentation for the Community-JS LiveStreamVideoConference component. Learn about the available props and the CSS API.
+ *
+ #### Import
+ ```jsx
+ import {LiveStreamVideoConference} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+ The name `LiveStreamVideoConference` can be used when providing style overrides in the theme.
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCLiveStreamForm-root|Styles applied to the root element.|
+
+ * @param inProps
+ */
+export default function LiveStreamVideoConference(inProps: LiveStreamVideoConferenceProps): JSX.Element;

package/lib/cjs/components/LiveStreamRoom/LiveStreamVideoConference/LiveStreamVideoConference.js

@@ -0,0 +1,137 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const styles_1 = require("@mui/material/styles");
+const system_1 = require("@mui/system");
+const react_core_1 = require("@selfcommunity/react-core");
+const types_1 = require("@selfcommunity/types");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const constants_1 = require("./constants");
+const components_react_1 = require("@livekit/components-react");
+const react_1 = require("react");
+const components_core_1 = require("@livekit/components-core");
+const constants_2 = require("../constants");
+const react_intl_1 = require("react-intl");
+const VideoConference_1 = require("./VideoConference");
+const LiveStreamProvider_1 = require("./LiveStreamProvider");
+const DialogContent_1 = tslib_1.__importDefault(require("@mui/material/DialogContent"));
+const BaseDialog_1 = tslib_1.__importDefault(require("../../../shared/BaseDialog"));
+const notistack_1 = require("notistack");
+const classes = {
+    root: `${constants_1.PREFIX}-root`,
+    logo: `${constants_1.PREFIX}-logo`,
+    title: `${constants_1.PREFIX}-title`,
+    content: `${constants_1.PREFIX}-content`,
+    endConferenceWrap: `${constants_1.PREFIX}-end-conference-wrap`,
+    btnBackHome: `${constants_1.PREFIX}-btn-back-home`,
+    actions: `${constants_1.PREFIX}-actions`,
+    error: `${constants_1.PREFIX}-error`
+};
+const Root = (0, styles_1.styled)(material_1.Box, {
+    name: constants_1.PREFIX,
+    slot: 'Root'
+})(({ theme }) => ({}));
+const DialogRoot = (0, styles_1.styled)(BaseDialog_1.default, {
+    name: constants_1.PREFIX,
+    slot: 'Root',
+    overridesResolver: (props, styles) => styles.dialogRoot
+})(({ theme }) => ({}));
+const PREFERENCES = [react_core_1.SCPreferences.LOGO_NAVBAR_LOGO];
+/**
+ *> API documentation for the Community-JS LiveStreamVideoConference component. Learn about the available props and the CSS API.
+ *
+ #### Import
+ ```jsx
+ import {LiveStreamVideoConference} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+ The name `LiveStreamVideoConference` can be used when providing style overrides in the theme.
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCLiveStreamForm-root|Styles applied to the root element.|
+
+ * @param inProps
+ */
+function LiveStreamVideoConference(inProps) {
+    //PROPS
+    const props = (0, system_1.useThemeProps)({
+        props: inProps,
+        name: constants_1.PREFIX
+    });
+    const { className, handleOnLeaveRoom, userChoices = components_core_1.defaultUserChoices, connectionDetails = {}, LiveKitRoomComponentProps = {
+    /* simulateParticipants: true */
+    }, VideoConferenceComponentProps = {}, startConferenceEndContent, endConferenceEndContent, options = constants_2.defaultVideoOptions } = props, rest = tslib_1.__rest(props, ["className", "handleOnLeaveRoom", "userChoices", "connectionDetails", "LiveKitRoomComponentProps", "VideoConferenceComponentProps", "startConferenceEndContent", "endConferenceEndContent", "options"]);
+    // CONTEXT
+    const scUserContext = (0, react_core_1.useSCUser)();
+    const scRoutingContext = (0, react_core_1.useSCRouting)();
+    const scPreferences = (0, react_core_1.useSCPreferences)();
+    const { liveStream } = (0, LiveStreamProvider_1.useLiveStream)();
+    // STATE
+    const [liveActive, setLiveActive] = (0, react_1.useState)(true);
+    const [error, setError] = (0, react_1.useState)(null);
+    // PREFERENCES
+    const preferences = (0, react_1.useMemo)(() => {
+        const _preferences = {};
+        PREFERENCES.map((p) => (_preferences[p] = p in scPreferences.preferences ? scPreferences.preferences[p].value : null));
+        return _preferences;
+    }, [scPreferences.preferences]);
+    // PERMISSIONS
+    const canUseAudio = (0, react_1.useMemo)(() => { var _a; return scUserContext.user && liveStream && (liveStream.host.id === scUserContext.user.id || (liveStream && !((_a = liveStream === null || liveStream === void 0 ? void 0 : liveStream.settings) === null || _a === void 0 ? void 0 : _a.muteParticipants))); }, [scUserContext, liveStream]);
+    const canUseVideo = (0, react_1.useMemo)(() => { var _a; return scUserContext.user && liveStream && (liveStream.host.id === scUserContext.user.id || (liveStream && !((_a = liveStream === null || liveStream === void 0 ? void 0 : liveStream.settings) === null || _a === void 0 ? void 0 : _a.disableVideo))); }, [scUserContext, liveStream]);
+    const canUseChat = (0, react_1.useMemo)(() => { var _a; return scUserContext.user && liveStream && liveStream && !((_a = liveStream === null || liveStream === void 0 ? void 0 : liveStream.settings) === null || _a === void 0 ? void 0 : _a.disableChat); }, [scUserContext, liveStream]);
+    const canUseShareScreen = (0, react_1.useMemo)(() => { var _a; return scUserContext.user && liveStream && (liveStream.host.id === scUserContext.user.id || (liveStream && !((_a = liveStream === null || liveStream === void 0 ? void 0 : liveStream.settings) === null || _a === void 0 ? void 0 : _a.disableShareScreen))); }, [scUserContext, liveStream]);
+    const speakerFocused = (0, react_1.useMemo)(() => (scUserContext.user && liveStream && liveStream.settings.view === types_1.SCLiveStreamViewType.SPEAKER ? liveStream.host : null), [scUserContext, liveStream]);
+    const hideParticipantsList = (0, react_1.useMemo)(() => { var _a; return scUserContext.user && liveStream && ((_a = liveStream === null || liveStream === void 0 ? void 0 : liveStream.settings) === null || _a === void 0 ? void 0 : _a.hideParticipantsList) && liveStream.host.id !== scUserContext.user.id; }, [scUserContext, liveStream]);
+    // CONNECT OPTIONS
+    const connectOptions = (0, react_1.useMemo)(() => {
+        return {
+            autoSubscribe: true
+        };
+    }, []);
+    // HANDLERS
+    /**
+     * Handle on leave
+     */
+    const handleOnLeave = (0, react_1.useCallback)(() => {
+        setLiveActive(false);
+        handleOnLeaveRoom === null || handleOnLeaveRoom === void 0 ? void 0 : handleOnLeaveRoom();
+    }, [handleOnLeaveRoom]);
+    /**
+     * Handle on error
+     */
+    const handleError = (0, react_1.useCallback)((error) => {
+        console.error(error);
+        if (error.message !== 'Client initiated disconnect') {
+            setError(`Encountered an unexpected error, check the console logs for details: ${error.message}`);
+        }
+        setLiveActive(false);
+    }, []);
+    /**
+     * Handle encryption error
+     */
+    const handleEncryptionError = (0, react_1.useCallback)((error) => {
+        console.error(error);
+        setError(`Encountered an unexpected encryption error, check the console logs for details: ${error.message}`);
+        setLiveActive(false);
+    }, []);
+    const handleBackHome = (0, react_1.useCallback)(() => {
+        (0, notistack_1.closeSnackbar)();
+    }, [notistack_1.closeSnackbar]);
+    /**
+     * User must be authenticated
+     */
+    if (!scUserContext.user || !connectionDetails) {
+        return (0, jsx_runtime_1.jsx)(material_1.CircularProgress, {});
+    }
+    /**
+     * Renders root object
+     */
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: liveActive && !error ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(components_react_1.LiveKitRoom, Object.assign({ connect: Boolean(liveActive), token: connectionDetails['participantToken'], serverUrl: connectionDetails['serverUrl'], connectOptions: connectOptions, video: userChoices.videoEnabled, audio: userChoices.audioEnabled, onDisconnected: handleOnLeave, onEncryptionError: handleEncryptionError, onError: handleError }, LiveKitRoomComponentProps, { children: (0, jsx_runtime_1.jsxs)(components_react_1.LayoutContextProvider, { children: [(0, jsx_runtime_1.jsx)(VideoConference_1.VideoConference, Object.assign({ chatMessageFormatter: components_react_1.formatChatMessageLinks }, (speakerFocused && { speakerFocused: liveStream.host }), VideoConferenceComponentProps, { disableMicrophone: !canUseAudio, disableCamera: !canUseVideo, disableChat: !canUseChat, disableShareScreen: !canUseShareScreen, hideParticipantsList: hideParticipantsList })), (0, jsx_runtime_1.jsx)(components_react_1.ConnectionState, {})] }) })) })) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: error ? ((0, jsx_runtime_1.jsx)(DialogRoot, Object.assign({ open: true, maxWidth: 'md', fullWidth: true }, { children: (0, jsx_runtime_1.jsx)(DialogContent_1.default, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.endConferenceWrap }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: scRoutingContext.url(react_core_1.SCRoutes.HOME_ROUTE_NAME, {}), className: classes.logo }, { children: (0, jsx_runtime_1.jsx)("img", { src: preferences[react_core_1.SCPreferences.LOGO_NAVBAR_LOGO], alt: "logo" }) })), startConferenceEndContent, error, (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "contained", color: "secondary", component: react_core_1.Link, to: '/', className: classes.btnBackHome }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamRoom.button.backHome", defaultMessage: "ui.liveStreamRoom.button.backHome" }) })), endConferenceEndContent] })) }) }))) : liveActive === false ? ((0, jsx_runtime_1.jsx)(DialogRoot, Object.assign({ open: true, maxWidth: 'md', fullWidth: true }, { children: (0, jsx_runtime_1.jsx)(DialogContent_1.default, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.endConferenceWrap }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: scRoutingContext.url(react_core_1.SCRoutes.HOME_ROUTE_NAME, {}), className: classes.logo }, { children: (0, jsx_runtime_1.jsx)("img", { src: preferences[react_core_1.SCPreferences.LOGO_NAVBAR_LOGO], alt: "logo" }) })), startConferenceEndContent, (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h5" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamRoom.conference.end", defaultMessage: "ui.liveStreamRoom.conference.end" }) })), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "contained", color: "secondary", component: react_core_1.Link, to: '/', onClick: handleBackHome, className: classes.btnBackHome }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamRoom.button.backHome", defaultMessage: "ui.liveStreamRoom.button.backHome" }) })), endConferenceEndContent] })) }) }))) : ((0, jsx_runtime_1.jsx)(material_1.CircularProgress, {})) })) })));
+}
+exports.default = LiveStreamVideoConference;

package/lib/cjs/components/LiveStreamRoom/LiveStreamVideoConference/ParticipantPlaceholder.d.ts

@@ -0,0 +1,6 @@
+import type { SVGProps } from 'react';
+/**
+ * @internal
+ */
+declare const SvgParticipantPlaceholder: (props: SVGProps<SVGSVGElement>) => JSX.Element;
+export default SvgParticipantPlaceholder;

package/lib/cjs/components/LiveStreamRoom/LiveStreamVideoConference/ParticipantPlaceholder.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * @internal
+ */
+const SvgParticipantPlaceholder = (props) => ((0, jsx_runtime_1.jsxs)("svg", Object.assign({ width: 90, height: 90, viewBox: "0 0 320 320", preserveAspectRatio: "xMidYMid meet", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: [(0, jsx_runtime_1.jsx)("path", { d: "M160 180C204.182 180 240 144.183 240 100C240 55.8172 204.182 20 160 20C115.817 20 79.9997 55.8172 79.9997 100C79.9997 144.183 115.817 180 160 180Z", fill: "white", fillOpacity: 0.25 }), (0, jsx_runtime_1.jsx)("path", { d: "M97.6542 194.614C103.267 191.818 109.841 192.481 115.519 195.141C129.025 201.466 144.1 205 159.999 205C175.899 205 190.973 201.466 204.48 195.141C210.158 192.481 216.732 191.818 222.345 194.614C262.703 214.719 291.985 253.736 298.591 300.062C300.15 310.997 291.045 320 280 320H39.9997C28.954 320 19.8495 310.997 21.4087 300.062C28.014 253.736 57.2966 214.72 97.6542 194.614Z", fill: "white", fillOpacity: 0.25 })] })));
+exports.default = SvgParticipantPlaceholder;

package/lib/cjs/components/LiveStreamRoom/LiveStreamVideoConference/ParticipantTile.d.ts

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import type { Participant } from 'livekit-client';
+import type { ParticipantClickEvent, TrackReferenceOrPlaceholder } from '@livekit/components-core';
+/**
+ * The `ParticipantContextIfNeeded` component only creates a `ParticipantContext`
+ * if there is no `ParticipantContext` already.
+ */
+export declare function ParticipantContextIfNeeded(props: React.PropsWithChildren<{
+    participant?: Participant;
+}>): JSX.Element;
+/**
+ * Only create a `TrackRefContext` if there is no `TrackRefContext` already.
+ */
+export declare function TrackRefContextIfNeeded(props: React.PropsWithChildren<{
+    trackRef?: TrackReferenceOrPlaceholder;
+}>): JSX.Element;
+export interface ParticipantTileProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** The track reference to display. */
+    trackRef?: TrackReferenceOrPlaceholder;
+    disableSpeakingIndicator?: boolean;
+    disableTileActions?: boolean;
+    onParticipantClick?: (event: ParticipantClickEvent) => void;
+}
+/**
+ * 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 declare const ParticipantTile: (props: ParticipantTileProps & React.RefAttributes<HTMLDivElement>) => React.ReactNode;

package/lib/cjs/components/LiveStreamRoom/LiveStreamVideoConference/ParticipantTile.js

@@ -0,0 +1,65 @@
+"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, disableTileActions = false } = _a, htmlProps = tslib_1.__rest(_a, ["trackRef", "children", "onParticipantClick", "disableSpeakingIndicator", "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" })] }))] })), (0, jsx_runtime_1.jsx)(components_react_1.FocusToggle, { trackRef: trackReference })] })) })) })));
+});

package/lib/cjs/components/LiveStreamRoom/LiveStreamVideoConference/ParticipantTileActions.d.ts

@@ -0,0 +1,30 @@
+export interface ParticipantTileActionsMenuProps {
+    /**
+     * Overrides or extends the styles applied to the component.
+     * @default null
+     */
+    className?: string;
+    /**
+     * User Object
+     * @default null
+     */
+    participant?: any;
+    /**
+     * Handle remove user
+     */
+    onRemoveParticipant?: (p: any) => void;
+    /**
+     * Handle ban user
+     */
+    onBanParticipant?: (p: any) => void;
+    /**
+     * Props to spread to popper
+     * @default empty object
+     */
+    PopperProps?: any;
+    /**
+     * Any other properties
+     */
+    [p: string]: any;
+}
+export default function ContributionActionsMenu(props: ParticipantTileActionsMenuProps): JSX.Element;