@selfcommunity/react-ui 0.10.5-alpha.1 → 0.10.5-alpha.10

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;

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

@@ -0,0 +1,215 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const styles_1 = require("@mui/material/styles");
+const react_intl_1 = require("react-intl");
+const Popper_1 = tslib_1.__importDefault(require("@mui/material/Popper"));
+const Icon_1 = tslib_1.__importDefault(require("@mui/material/Icon"));
+const notistack_1 = require("notistack");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const material_1 = require("@mui/material");
+const api_services_1 = require("@selfcommunity/api-services");
+const react_core_1 = require("@selfcommunity/react-core");
+const constants_1 = require("./constants");
+const ConfirmDialog_1 = tslib_1.__importDefault(require("../../../shared/ConfirmDialog/ConfirmDialog"));
+const components_react_1 = require("@livekit/components-react");
+const LiveStreamProvider_1 = require("./LiveStreamProvider");
+const utils_1 = require("@selfcommunity/utils");
+const Errors_1 = require("../../../constants/Errors");
+const PREFIX = 'SCParticipantTileActionsMenu';
+const classes = {
+    root: `${PREFIX}-root`,
+    button: `${PREFIX}-button`,
+    popperRoot: `${PREFIX}-popper-root`,
+    paper: `${PREFIX}-paper`,
+    item: `${PREFIX}-item`,
+    itemText: `${PREFIX}-item-text`,
+    subItem: `${PREFIX}-sub-item`,
+    subItemText: `${PREFIX}-sub-item-text`,
+    footerSubItems: `${PREFIX}-footer-sub-items`,
+    selectedIcon: `${PREFIX}-selected-icon`,
+    sectionBadge: `${PREFIX}-section-badge`,
+    sectionWithSelectionIcon: `${PREFIX}-section-with-selection-icon`,
+    visibilityIcons: `${PREFIX}-visibility-icons`
+};
+const PopperRoot = (0, styles_1.styled)(Popper_1.default, {
+    name: PREFIX,
+    slot: 'Root',
+    overridesResolver: (props, styles) => styles.popperRoot
+})(() => ({
+    '& .SCParticipantTileActionsMenu-paper': {
+        borderRadius: 5
+    }
+}));
+const Root = (0, styles_1.styled)(material_1.Box, {
+    name: PREFIX,
+    slot: 'Root',
+    overridesResolver: (props, styles) => styles.root
+})(({ theme }) => ({
+    display: 'inline-block',
+    '& button': {
+        color: theme.palette.common.white
+    }
+}));
+function ContributionActionsMenu(props) {
+    // PROPS
+    const { className, participant, onRemoveParticipant, onBanParticipant, PopperProps = {} } = props, rest = tslib_1.__rest(props, ["className", "participant", "onRemoveParticipant", "onBanParticipant", "PopperProps"]);
+    // CONTEXT
+    const theme = (0, material_1.useTheme)();
+    const isMobile = (0, material_1.useMediaQuery)(theme.breakpoints.down('md'));
+    const scContext = (0, react_1.useContext)(react_core_1.SCContext);
+    const scUserContext = (0, react_1.useContext)(react_core_1.SCUserContext);
+    const { enqueueSnackbar } = (0, notistack_1.useSnackbar)();
+    const p = (0, components_react_1.useEnsureParticipant)(participant);
+    const { liveStream } = (0, LiveStreamProvider_1.useLiveStream)();
+    // GENERAL POPPER STATE
+    const [open, setOpen] = (0, react_1.useState)(false);
+    const [isLoading, setIsLoading] = (0, react_1.useState)(false);
+    // CONFIRM ACTION DIALOG STATE
+    const [openConfirmDialog, setOpenConfirmDialog] = (0, react_1.useState)(false);
+    const [currentAction, setCurrentAction] = (0, react_1.useState)(null);
+    const [currentActionLoading, setCurrentActionLoading] = (0, react_1.useState)(null);
+    // CONST
+    let popperRef = (0, react_1.useRef)(null);
+    /**
+     * Handles open popup
+     */
+    function handleOpen() {
+        if (scUserContext.user) {
+            setOpen(true);
+        }
+        else {
+            scContext.settings.handleAnonymousAction();
+        }
+    }
+    /**
+     * Closes popup
+     */
+    function handleClose() {
+        if (popperRef.current && popperRef.current.contains(event.target)) {
+            return;
+        }
+        setOpen(false);
+        if (rest.onClose) {
+            rest.onClose();
+        }
+    }
+    /**
+     * Perform ban participant
+     */
+    const performRemoveOrBanParticipant = (0, react_1.useMemo)(() => (ban = false) => tslib_1.__awaiter(this, void 0, void 0, function* () {
+        const res = yield api_services_1.LiveStreamApiClient.removeParticipant(liveStream.id, { participant_id: p.identity, ban });
+        if (res.status >= 300) {
+            return Promise.reject(res);
+        }
+        return yield Promise.resolve(res.data);
+    }), [p]);
+    /**
+     * Handle action
+     */
+    function handleAction(action) {
+        if ([constants_1.REMOVE_ROOM_USER, constants_1.BAN_ROOM_USER].indexOf(action) > -1) {
+            setCurrentAction(action);
+            setOpenConfirmDialog(true);
+            handleClose();
+        }
+    }
+    /**
+     * Perform additional operations at the end of single action
+     */
+    function performPostConfirmAction(success) {
+        if (success) {
+            setCurrentActionLoading(null);
+            setCurrentAction(null);
+            setOpenConfirmDialog(false);
+            enqueueSnackbar((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.contributionActionMenu.actionSuccess", defaultMessage: "ui.contributionActionMenu.actionSuccess" }), {
+                variant: 'success',
+                autoHideDuration: 3000
+            });
+        }
+        else {
+            setCurrentActionLoading(null);
+            enqueueSnackbar((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.contributionActionMenu.actionError", defaultMessage: "ui.contributionActionMenu.actionError" }), {
+                variant: 'error',
+                autoHideDuration: 3000
+            });
+        }
+    }
+    /**
+     * Delete a contribution
+     */
+    function handleConfirmedAction() {
+        if (p && !isLoading && !currentActionLoading) {
+            if (currentAction === constants_1.REMOVE_ROOM_USER) {
+                setCurrentActionLoading(constants_1.REMOVE_ROOM_USER);
+                performRemoveOrBanParticipant()
+                    .then(() => {
+                    onRemoveParticipant && onRemoveParticipant(p);
+                    performPostConfirmAction(true);
+                })
+                    .catch((error) => {
+                    utils_1.Logger.error(Errors_1.SCOPE_SC_UI, error);
+                    performPostConfirmAction(false);
+                });
+            }
+            else if (currentAction === constants_1.BAN_ROOM_USER) {
+                setCurrentActionLoading(constants_1.BAN_ROOM_USER);
+                performRemoveOrBanParticipant(true)
+                    .then(() => {
+                    onBanParticipant && onBanParticipant(p);
+                    performPostConfirmAction(true);
+                })
+                    .catch((error) => {
+                    utils_1.Logger.error(Errors_1.SCOPE_SC_UI, error);
+                    performPostConfirmAction(false);
+                });
+            }
+        }
+    }
+    /**
+     * Can authenticated ban a user in a room
+     */
+    const canRemoveOrBanUser = (0, react_1.useMemo)(() => () => {
+        return (scUserContext.user &&
+            liveStream &&
+            p &&
+            p.identity &&
+            liveStream.host.id === scUserContext.user.id &&
+            scUserContext.user.id.toString() !== p.identity);
+    }, [scUserContext, liveStream, p]);
+    /**
+     * Renders section general
+     */
+    function renderGeneralSection() {
+        return ((0, jsx_runtime_1.jsx)(material_1.Box, { children: canRemoveOrBanUser() && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(material_1.MenuItem, Object.assign({ className: classes.subItem, disabled: currentActionLoading === constants_1.REMOVE_ROOM_USER }, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "person" }) }), (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamRoom.participantTileActions.removeRoomUser", defaultMessage: "ui.liveStreamRoom.participantTileActions.removeRoomUser" }), onClick: () => handleAction(constants_1.REMOVE_ROOM_USER), classes: { root: classes.itemText } })] })), (0, jsx_runtime_1.jsxs)(material_1.MenuItem, Object.assign({ className: classes.subItem, disabled: currentActionLoading === constants_1.BAN_ROOM_USER }, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "error" }) }), (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamRoom.participantTileActions.banRoomUser", defaultMessage: "ui.liveStreamRoom.participantTileActions.banRoomUser" }), onClick: () => handleAction(constants_1.BAN_ROOM_USER), classes: { root: classes.itemText } })] }))] })) }));
+    }
+    /**
+     * Renders contribution menu content
+     */
+    function renderContent() {
+        return ((0, jsx_runtime_1.jsx)(material_1.Box, { children: (0, jsx_runtime_1.jsx)(material_1.MenuList, { children: renderGeneralSection() }) }));
+    }
+    /**
+     * Renders component only if the logged user has actions available
+     */
+    if (!canRemoveOrBanUser()) {
+        return null;
+    }
+    /**
+     * Renders component
+     */
+    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, { children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ ref: (ref) => {
+                    popperRef.current = ref;
+                }, "aria-haspopup": "true", onClick: handleOpen, className: classes.button, size: "small" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "expand_more" }) })), isMobile ? ((0, jsx_runtime_1.jsx)(material_1.SwipeableDrawer, Object.assign({ open: open, onClose: handleClose, onOpen: handleOpen, anchor: "bottom", disableSwipeToOpen: true }, { children: renderContent() }))) : ((0, jsx_runtime_1.jsx)(PopperRoot, Object.assign({ open: open, anchorEl: popperRef.current, role: undefined, transition: true, className: classes.popperRoot }, PopperProps, { placement: "right" }, { children: ({ TransitionProps, placement }) => ((0, jsx_runtime_1.jsx)(material_1.Grow, Object.assign({}, TransitionProps, { style: { transformOrigin: placement === 'bottom' ? 'center top' : 'center bottom' } }, { children: (0, jsx_runtime_1.jsx)(material_1.Paper, Object.assign({ variant: 'outlined', className: classes.paper }, { children: (0, jsx_runtime_1.jsx)(material_1.ClickAwayListener, Object.assign({ onClickAway: handleClose }, { children: renderContent() })) })) }))) }))), openConfirmDialog && ((0, jsx_runtime_1.jsx)(ConfirmDialog_1.default, Object.assign({ open: openConfirmDialog }, (currentAction === constants_1.REMOVE_ROOM_USER
+                ? {
+                    content: ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamRoom.participantTileActions.removeRoomUser", defaultMessage: "ui.liveStreamRoom.participantTileActions.removeRoomUser" }))
+                }
+                : currentAction === constants_1.BAN_ROOM_USER
+                    ? {
+                        content: ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamRoom.participantTileActions.banRoomUser", defaultMessage: "ui.liveStreamRoom.participantTileActions.banRoomUser" }))
+                    }
+                    : {}), { onConfirm: handleConfirmedAction, isUpdating: Boolean(currentActionLoading), onClose: () => setOpenConfirmDialog(false) })))] })));
+}
+exports.default = ContributionActionsMenu;

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

@@ -0,0 +1,15 @@
+import { SCUserType } from '@selfcommunity/types';
+export interface ParticipantTileAvatarProps {
+    className?: string;
+    /**
+     * User Object
+     * @default null
+     */
+    user?: SCUserType;
+    /**
+     * User Object
+     * @default null
+     */
+    participant?: any;
+}
+export default function ParticipantTileAvatar(inProps: ParticipantTileAvatarProps): JSX.Element;

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

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const styles_1 = require("@mui/material/styles");
+const system_1 = require("@mui/system");
+const material_1 = require("@mui/material");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const ParticipantPlaceholder_1 = tslib_1.__importDefault(require("./ParticipantPlaceholder"));
+const react_core_1 = require("@selfcommunity/react-core");
+const PREFIX = 'SCParticipantTileAvatar';
+const classes = {
+    root: `${PREFIX}-root`
+};
+const Root = (0, styles_1.styled)(material_1.Box, {
+    name: PREFIX,
+    slot: 'Root',
+    overridesResolver: (props, styles) => styles.root
+})(({ theme }) => ({
+    height: 'auto !important',
+    '& img': {
+        borderRadius: '50%',
+        width: 100,
+        height: 100
+    }
+}));
+function ParticipantTileAvatar(inProps) {
+    // PROPS
+    const props = (0, system_1.useThemeProps)({
+        props: inProps,
+        name: PREFIX
+    });
+    const { className, user, participant } = props, rest = tslib_1.__rest(props, ["className", "user", "participant"]);
+    // CONTEXT
+    const scContext = (0, react_core_1.useSCContext)();
+    // RENDER
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(className, classes.root) }, rest, { children: user ? ((0, jsx_runtime_1.jsx)("img", { src: `${user.avatar}` })) : participant && participant.identity ? ((0, jsx_runtime_1.jsx)("img", { src: `${scContext.settings.portal}/api/v2/avatar/${participant.identity}` })) : ((0, jsx_runtime_1.jsx)(ParticipantPlaceholder_1.default, {})) })));
+}
+exports.default = ParticipantTileAvatar;

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

@@ -0,0 +1,55 @@
+import type { CreateLocalTracksOptions, LocalAudioTrack, LocalTrack, LocalVideoTrack } from 'livekit-client';
+import { Track } from 'livekit-client';
+import * as React from 'react';
+import type { LocalUserChoices } from '@livekit/components-core';
+/**
+ * Props for the PreJoin component.
+ * @public
+ */
+export interface PreJoinProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSubmit' | 'onError'> {
+    /** This function is called with the `LocalUserChoices` if validation is passed. */
+    onSubmit?: (values: LocalUserChoices) => void;
+    /**
+     * Provide your custom validation function. Only if validation is successful the user choices are past to the onSubmit callback.
+     */
+    onValidate?: (values: LocalUserChoices) => boolean;
+    onError?: (error: Error) => void;
+    /** Prefill the input form with initial values. */
+    defaults?: Partial<LocalUserChoices>;
+    /** Display a debug window for your convenience. */
+    debug?: boolean;
+    joinLabel?: string;
+    micLabel?: string;
+    camLabel?: string;
+    userLabel?: string;
+    /**
+     * If true, user choices are persisted across sessions.
+     * @defaultValue true
+     * @alpha
+     */
+    persistUserChoices?: boolean;
+}
+/** @alpha */
+export declare function usePreviewTracks(options: CreateLocalTracksOptions, onError?: (err: Error) => void): LocalTrack<Track.Kind>[];
+/** @public */
+export declare function usePreviewDevice<T extends LocalVideoTrack | LocalAudioTrack>(enabled: boolean, deviceId: string, kind: 'videoinput' | 'audioinput'): {
+    selectedDevice: MediaDeviceInfo;
+    localTrack: T;
+    deviceError: Error;
+};
+/**
+ * The `PreJoin` prefab component is normally presented to the user before he enters a room.
+ * This component allows the user to check and select the preferred media device (camera und microphone).
+ * On submit the user decisions are returned, which can then be passed on to the `LiveKitRoom` so that the user enters the room with the correct media devices.
+ *
+ * @remarks
+ * This component is independent of the `LiveKitRoom` component and should not be nested within it.
+ * Because it only accesses the local media tracks this component is self-contained and works without connection to the LiveKit server.
+ *
+ * @example
+ * ```tsx
+ * <PreJoin />
+ * ```
+ * @public
+ */
+export declare function PreJoin({ defaults, onValidate, onSubmit, onError, debug, joinLabel, micLabel, camLabel, userLabel, persistUserChoices, ...htmlProps }: PreJoinProps): JSX.Element;