@selfcommunity/react-ui 0.10.2-alpha.8 → 0.10.2-courses.100

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

@@ -0,0 +1,155 @@
+"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);
+    // INTL
+    const intl = (0, react_intl_1.useIntl)();
+    // 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 === 'Permission denied') {
+            setError(intl.formatMessage({
+                id: 'ui.liveStreamRoom.connect.error.device.permission',
+                defaultMessage: 'ui.liveStreamRoom.connect.error.device.permission'
+            }));
+        }
+        else if (error.message === 'Requested device not found') {
+            setError(intl.formatMessage({
+                id: 'ui.liveStreamRoom.connect.error.device.notFound',
+                defaultMessage: 'ui.liveStreamRoom.connect.error.device.notFound'
+            }));
+        }
+        else {
+            console.log(`Encountered an unexpected error, check the console logs for details: ${error.message}`);
+            setError(intl.formatMessage({
+                id: 'ui.liveStreamRoom.connect.error.clientInitiatedDisconnect',
+                defaultMessage: 'ui.liveStreamRoom.connect.error.clientInitiatedDisconnect'
+            }));
+        }
+        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/NoParticipants.d.ts

@@ -0,0 +1,4 @@
+export interface NoParticipantsProps {
+    className?: string;
+}
+export default function NoParticipants(inProps: NoParticipantsProps): JSX.Element;

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

@@ -0,0 +1,37 @@
+"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 react_intl_1 = require("react-intl");
+const PREFIX = 'SCNoParticipants';
+const classes = {
+    root: `${PREFIX}-root`
+};
+const Root = (0, styles_1.styled)(material_1.Box, {
+    name: PREFIX,
+    slot: 'Root',
+    overridesResolver: (props, styles) => styles.root
+})(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: '#1e1e1e',
+    transition: 'opacity .2sease-in-out',
+    pointerEvents: 'none',
+    borderRadius: 7
+}));
+function NoParticipants(inProps) {
+    // PROPS
+    const props = (0, system_1.useThemeProps)({
+        props: inProps,
+        name: PREFIX
+    });
+    const { className } = props, rest = tslib_1.__rest(props, ["className"]);
+    // RENDER
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(className, classes.root) }, rest, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamRoom.noParticipants", defaultMessage: "ui.liveStreamRoom.noParticipants" }) })));
+}
+exports.default = NoParticipants;

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,29 @@
+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;
+    disableTileFocusToggle?: 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, 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 })] })) })) })));
+});

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, onClick: () => handleAction(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" }), classes: { root: classes.itemText } })] })), (0, jsx_runtime_1.jsxs)(material_1.MenuItem, Object.assign({ className: classes.subItem, disabled: currentActionLoading === constants_1.BAN_ROOM_USER, onClick: () => handleAction(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" }), 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" }) })), open && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: isMobile ? ((0, jsx_runtime_1.jsx)(material_1.SwipeableDrawer, Object.assign({ open: true, onClose: handleClose, onOpen: handleOpen, anchor: "bottom", disableSwipeToOpen: true }, { children: renderContent() }))) : ((0, jsx_runtime_1.jsx)(PopperRoot, Object.assign({ open: true, 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;