@selfcommunity/react-ui 0.8.0-live.58 → 0.8.0-live.59

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

@@ -7,6 +7,7 @@ const React = tslib_1.__importStar(require("react"));
 const components_core_1 = require("@livekit/components-core");
 const livekit_client_1 = require("livekit-client");
 const components_react_1 = require("@livekit/components-react");
+const ParticipantTile_1 = require("./ParticipantTile");
 /**
  * The `VideoConference` ready-made component is your drop-in solution for a classic video conferencing application.
  * It provides functionality such as focusing on one participant, grid view with pagination to handle large numbers
@@ -27,7 +28,7 @@ const components_react_1 = require("@livekit/components-react");
  */
 function VideoConference(_a) {
     var _b, _c;
-    var { chatMessageFormatter, chatMessageDecoder, chatMessageEncoder, SettingsComponent, speakerFocused, disableChat = false, disableMicrophone = false, disableCamera = false, disableScreenShare = false, hideParticipantList = false, showSettings } = _a, props = tslib_1.__rest(_a, ["chatMessageFormatter", "chatMessageDecoder", "chatMessageEncoder", "SettingsComponent", "speakerFocused", "disableChat", "disableMicrophone", "disableCamera", "disableScreenShare", "hideParticipantList", "showSettings"]);
+    var { chatMessageFormatter, chatMessageDecoder, chatMessageEncoder, SettingsComponent, speakerFocused, disableChat = false, disableMicrophone = false, disableCamera = false, disableShareScreen = false, hideParticipantList = false, showSettings } = _a, props = tslib_1.__rest(_a, ["chatMessageFormatter", "chatMessageDecoder", "chatMessageEncoder", "SettingsComponent", "speakerFocused", "disableChat", "disableMicrophone", "disableCamera", "disableShareScreen", "hideParticipantList", "showSettings"]);
     const [widgetState, setWidgetState] = React.useState({
         showChat: false,
         unreadMessages: 0,
@@ -80,7 +81,7 @@ function VideoConference(_a) {
         }
         else if (speakerFocused) {
             const speaker = participants.find((pt) => {
-                return pt.name === speakerFocused;
+                return pt.name === speakerFocused.username;
             });
             if (speaker) {
                 const updatedFocusTrack = tracks.find((tr) => {
@@ -99,12 +100,12 @@ function VideoConference(_a) {
         participants,
         speakerFocused
     ]);
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "lk-video-conference" }, props, { children: [(0, components_core_1.isWeb)() && ((0, jsx_runtime_1.jsxs)(components_react_1.LayoutContextProvider, Object.assign({ value: layoutContext, onPinChange: handleFocusStateChange, onWidgetChange: widgetUpdate }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "lk-video-conference-inner" }, { children: [!focusTrack ? ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "lk-grid-layout-wrapper" }, { children: (0, jsx_runtime_1.jsx)(components_react_1.GridLayout, Object.assign({ tracks: tracks }, { children: (0, jsx_runtime_1.jsx)(components_react_1.ParticipantTile, {}) })) }))) : ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "lk-focus-layout-wrapper" }, { children: (0, jsx_runtime_1.jsxs)(components_react_1.FocusLayoutContainer, { children: [!hideParticipantList && ((0, jsx_runtime_1.jsx)(components_react_1.CarouselLayout, Object.assign({ tracks: carouselTracks }, { children: (0, jsx_runtime_1.jsx)(components_react_1.ParticipantTile, {}) }))), focusTrack && (0, jsx_runtime_1.jsx)(components_react_1.FocusLayout, { trackRef: focusTrack })] }) }))), (0, jsx_runtime_1.jsx)(components_react_1.ControlBar, { controls: Object.assign(Object.assign({}, (localParticipant.name !== speakerFocused
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "lk-video-conference" }, props, { children: [(0, components_core_1.isWeb)() && ((0, jsx_runtime_1.jsxs)(components_react_1.LayoutContextProvider, Object.assign({ value: layoutContext, onPinChange: handleFocusStateChange, onWidgetChange: widgetUpdate }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "lk-video-conference-inner" }, { children: [!focusTrack ? ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "lk-grid-layout-wrapper" }, { children: (0, jsx_runtime_1.jsx)(components_react_1.GridLayout, Object.assign({ tracks: tracks }, { children: (0, jsx_runtime_1.jsx)(ParticipantTile_1.ParticipantTile, {}) })) }))) : ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "lk-focus-layout-wrapper" }, { children: (0, jsx_runtime_1.jsxs)(components_react_1.FocusLayoutContainer, { children: [!hideParticipantList && ((0, jsx_runtime_1.jsx)(components_react_1.CarouselLayout, Object.assign({ tracks: carouselTracks }, { children: (0, jsx_runtime_1.jsx)(ParticipantTile_1.ParticipantTile, {}) }))), focusTrack && (0, jsx_runtime_1.jsx)(components_react_1.FocusLayout, { trackRef: focusTrack })] }) }))), (0, jsx_runtime_1.jsx)(components_react_1.ControlBar, { controls: Object.assign(Object.assign({}, (localParticipant.name !== speakerFocused.username
                                     ? {
                                         chat: !disableChat,
                                         microphone: !disableMicrophone,
                                         camera: !disableCamera,
-                                        screenShare: !disableScreenShare
+                                        screenShare: !disableShareScreen
                                     }
                                     : {})), { settings: !!SettingsComponent }) })] })), !disableChat && ((0, jsx_runtime_1.jsx)(components_react_1.Chat, { style: { display: widgetState.showChat ? 'grid' : 'none' }, messageFormatter: chatMessageFormatter, messageEncoder: chatMessageEncoder, messageDecoder: chatMessageDecoder })), SettingsComponent && ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "lk-settings-menu-modal", style: { display: widgetState.showSettings ? 'block' : 'none' } }, { children: (0, jsx_runtime_1.jsx)(SettingsComponent, {}) })))] }))), (0, jsx_runtime_1.jsx)(components_react_1.RoomAudioRenderer, {}), (0, jsx_runtime_1.jsx)(components_react_1.ConnectionStateToast, {})] })));
 }

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

@@ -1 +1,2 @@
 export declare const PREFIX = "SCLiveStreamVideoConference";
+export declare const BAN_ROOM_USER = "_ban_room_user";

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

@@ -1,4 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.PREFIX = void 0;
+exports.BAN_ROOM_USER = exports.PREFIX = void 0;
 exports.PREFIX = 'SCLiveStreamVideoConference';
+exports.BAN_ROOM_USER = '_ban_room_user';

package/lib/esm/components/CreateLiveStreamDialog/CreateLiveStreamDialog.js

@@ -4,6 +4,7 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { styled } from '@mui/material/styles';
 import { useThemeProps } from '@mui/system';
 import { useSCUser } from '@selfcommunity/react-core';
+import { SCEventLocationType } from '@selfcommunity/types';
 import classNames from 'classnames';
 import { FormattedMessage } from 'react-intl';
 import BaseDialog from '../../shared/BaseDialog';
@@ -95,5 +96,5 @@ export default function CreateLiveStreamDialog(inProps) {
     /**
      * Renders root object
      */
-    return (_jsx(Root, Object.assign({ DialogContentProps: { dividers: false }, maxWidth: 'md', title: _jsxs(Box, Object.assign({ className: classes.title, component: 'span' }, { children: [Boolean(step === CreateLiveStreamStep.CREATE_LIVE && canCreateEvent) && (_jsx(Button, Object.assign({ variant: "text", onClick: handleBack, startIcon: _jsx(Icon, { children: "arrow_back" }) }, { children: "Back" }))), _jsx(Box, Object.assign({ component: 'span' }, { children: _jsx(FormattedMessage, { id: "ui.createLivestreamDialog.title", defaultMessage: "ui.createLivestreamDialog.title" }) }))] })), fullWidth: true, open: open, scroll: 'paper', onClose: onClose, className: classNames(classes.root, className), TransitionComponent: Transition, PaperProps: { elevation: 0 } }, rest, { children: _jsxs(Box, Object.assign({ className: classes.content }, { children: [step === CreateLiveStreamStep.SELECT_TYPE && (_jsx(LiveStreamSelector, { liveSelected: liveType, onLiveSelected: handleLiveTypeSelected, onNext: handleLiveTypeSelectedNext })), step === CreateLiveStreamStep.CREATE_LIVE && (_jsx(_Fragment, { children: liveType === LiveStreamType.EVENT_LIVE ? _jsx(EventForm, { onSuccess: handleSubmit }) : _jsx(LiveStreamForm, { onSuccess: handleSubmit }) }))] })) })));
+    return (_jsx(Root, Object.assign({ DialogContentProps: { dividers: false }, maxWidth: 'md', title: _jsxs(Box, Object.assign({ className: classes.title, component: 'span' }, { children: [Boolean(step === CreateLiveStreamStep.CREATE_LIVE && canCreateEvent) && (_jsx(Button, Object.assign({ variant: "text", onClick: handleBack, startIcon: _jsx(Icon, { children: "arrow_back" }) }, { children: "Back" }))), _jsx(Box, Object.assign({ component: 'span' }, { children: _jsx(FormattedMessage, { id: "ui.createLivestreamDialog.title", defaultMessage: "ui.createLivestreamDialog.title" }) }))] })), fullWidth: true, open: open, scroll: 'paper', onClose: onClose, className: classNames(classes.root, className), TransitionComponent: Transition, PaperProps: { elevation: 0 } }, rest, { children: _jsxs(Box, Object.assign({ className: classes.content }, { children: [step === CreateLiveStreamStep.SELECT_TYPE && (_jsx(LiveStreamSelector, { liveSelected: liveType, onLiveSelected: handleLiveTypeSelected, onNext: handleLiveTypeSelectedNext })), step === CreateLiveStreamStep.CREATE_LIVE && (_jsx(_Fragment, { children: liveType === LiveStreamType.EVENT_LIVE ? _jsx(EventForm, { presetLocation: SCEventLocationType.LIVESTREAM, onSuccess: handleSubmit }) : _jsx(LiveStreamForm, { onSuccess: handleSubmit }) }))] })) })));
 }

package/lib/esm/components/EventForm/EventAddress.js

@@ -56,12 +56,12 @@ export default function EventAddress(inProps) {
     const [suggestions, setSuggestions] = useState([]);
     const [timeoutId, setTimeoutId] = useState(null);
     const liveStream = useMemo(() => {
-        console.log(event);
-        return {
-            title: (event === null || event === void 0 ? void 0 : event.name) || `${intl.formatMessage(messages.name)}`,
-            created_at: (event === null || event === void 0 ? void 0 : event.start_date) || getNewDate(),
-            settings: /* event?.livestream?.settings || */ LIVESTREAM_DEFAULT_SETTINGS
-        } /* || event.livestream? */;
+        return (event.live_stream ||
+            {
+                title: (event === null || event === void 0 ? void 0 : event.name) || `${intl.formatMessage(messages.name)}`,
+                created_at: (event === null || event === void 0 ? void 0 : event.start_date) || getNewDate(),
+                settings: LIVESTREAM_DEFAULT_SETTINGS
+            });
     }, [event]);
     // CONTEXT
     const scContext = useSCContext();
@@ -73,6 +73,7 @@ export default function EventAddress(inProps) {
     // HANDLERS
     const handleChange = (_event, newValue) => {
         setLocation(newValue);
+        forwardGeolocationData({ location: newValue });
     };
     const handleSelection = (_event, newValue) => __awaiter(this, void 0, void 0, function* () {
         if (newValue) {

package/lib/esm/components/EventForm/EventForm.d.ts

@@ -1,5 +1,5 @@
 import { BoxProps } from '@mui/material';
-import { SCEventType } from '@selfcommunity/types';
+import { SCEventLocationType, SCEventType } from '@selfcommunity/types';
 export interface EventFormProps extends BoxProps {
     /**
      * Overrides or extends the styles applied to the component.
@@ -11,6 +11,11 @@ export interface EventFormProps extends BoxProps {
      * @default null
      */
     event?: SCEventType;
+    /**
+     * Initial location
+     * @default SCEventLocationType.PERSON
+     */
+    presetLocation?: SCEventLocationType;
     /**
      * On success callback function
      * @default null

package/lib/esm/components/EventForm/EventForm.js

@@ -118,7 +118,7 @@ export default function EventForm(inProps) {
         props: inProps,
         name: PREFIX
     });
-    const { className, onSuccess, onError, event = null } = props, rest = __rest(props, ["className", "onSuccess", "onError", "event"]);
+    const { className, onSuccess, onError, event, presetLocation = SCEventLocationType.PERSON } = props, rest = __rest(props, ["className", "onSuccess", "onError", "event", "presetLocation"]);
     // CONTEXT
     const scContext = useSCContext();
     // INTL
@@ -126,20 +126,25 @@ export default function EventForm(inProps) {
     const startDateTime = useMemo(() => getNewDate(event === null || event === void 0 ? void 0 : event.start_date), [event]);
     const endDateTime = useMemo(() => getNewDate(event === null || event === void 0 ? void 0 : event.end_date), [event]);
     const initialFieldState = {
+        name: (event === null || event === void 0 ? void 0 : event.name) || '',
+        description: event ? event.description : '',
         imageOriginal: (event === null || event === void 0 ? void 0 : event.image_bigger) || '',
         imageOriginalFile: '',
         startDate: event ? startDateTime : getNewDate(),
         startTime: event ? startDateTime : getLaterHoursDate(1),
         endDate: (event === null || event === void 0 ? void 0 : event.end_date) ? endDateTime : getNewDate(),
         endTime: (event === null || event === void 0 ? void 0 : event.end_date) ? endDateTime : getLaterHoursDate(3),
-        location: (event === null || event === void 0 ? void 0 : event.location) || SCEventLocationType.PERSON,
+        location: (event === null || event === void 0 ? void 0 : event.location)
+            ? event.location === SCEventLocationType.ONLINE && event.live_stream
+                ? SCEventLocationType.LIVESTREAM
+                : SCEventLocationType.ONLINE
+            : presetLocation,
         geolocation: (event === null || event === void 0 ? void 0 : event.geolocation) || '',
         lat: (event === null || event === void 0 ? void 0 : event.geolocation_lat) || null,
         lng: (event === null || event === void 0 ? void 0 : event.geolocation_lng) || null,
         link: (event === null || event === void 0 ? void 0 : event.link) || '',
+        liveStreamSettings: (event === null || event === void 0 ? void 0 : event.live_stream) ? event === null || event === void 0 ? void 0 : event.live_stream.settings : null,
         recurring: (event === null || event === void 0 ? void 0 : event.recurring) || SCEventRecurrenceType.NEVER,
-        name: (event === null || event === void 0 ? void 0 : event.name) || '',
-        description: event ? event.description : '',
         isPublic: (_a = (event === null || event === void 0 ? void 0 : event.privacy) === SCEventPrivacyType.PUBLIC) !== null && _a !== void 0 ? _a : true,
         isSubmitting: false
     };
@@ -185,7 +190,7 @@ export default function EventForm(inProps) {
         setField((prev) => (Object.assign(Object.assign({}, prev), data)));
     }, []);
     const handleLiveStreamSettingsData = useCallback((data) => {
-        setField((prev) => (Object.assign(Object.assign({}, prev), data)));
+        setField((prev) => (Object.assign(Object.assign({}, prev), { liveStreamSettings: Object.assign(Object.assign({}, prev.liveStreamSettings), data) })));
     }, []);
     const handleSubmit = useCallback(() => {
         setField((prev) => (Object.assign(Object.assign({}, prev), { ['isSubmitting']: true })));
@@ -197,14 +202,21 @@ export default function EventForm(inProps) {
         formData.append('start_date', combineDateAndTime(field.startDate, field.startTime));
         formData.append('recurring', field.recurring);
         formData.append('end_date', combineDateAndTime(field.endDate, field.endTime));
-        formData.append('location', field.location);
+        formData.append('location', field.location === SCEventLocationType.PERSON ? SCEventLocationType.PERSON : SCEventLocationType.ONLINE);
         if (field.location === SCEventLocationType.ONLINE) {
             formData.append('link', field.link);
+            formData.append('live_stream_settings', '');
+        }
+        else if (field.location === SCEventLocationType.LIVESTREAM) {
+            formData.append('link', '');
+            formData.append('live_stream_settings', JSON.stringify(field.liveStreamSettings));
         }
         else if (field.location === SCEventLocationType.PERSON) {
             formData.append('geolocation', field.geolocation);
             formData.append('geolocation_lat', field.lat.toString());
             formData.append('geolocation_lng', field.lng.toString());
+            formData.append('link', '');
+            formData.append('live_stream_settings', '');
         }
         if (privateEnabled) {
             formData.append('privacy', field.isPublic ? SCEventPrivacyType.PUBLIC : SCEventPrivacyType.PRIVATE);
@@ -315,11 +327,17 @@ export default function EventForm(inProps) {
                                             var _a;
                                             return (_jsx(TextField, Object.assign({}, params, { InputProps: Object.assign(Object.assign({}, params.InputProps), { placeholder: `${intl.formatMessage(messages.endTime)}`, startAdornment: (_jsx(InputAdornment, Object.assign({ position: "start" }, { children: _jsx(IconButton, { children: _jsx(Icon, { children: "access_time" }) }) }))) }), error: Boolean(error['endDateError']), helperText: ((_a = error['endDateError']) === null || _a === void 0 ? void 0 : _a.error) ? (_jsx(FormattedMessage, { id: "ui.eventForm.time.end.error.invalid", defaultMessage: "ui.eventForm.time.end.error.invalid" })) : null })));
                                         }
-                                    }, onChange: (value) => handleChangeDateTime(value, 'endTime'), shouldDisableTime: shouldDisabledTime })] })) })), _jsx(EventAddress, { forwardGeolocationData: handleGeoData, forwardLivestreamSettingsData: handleLiveStreamSettingsData, event: event !== null && event !== void 0 ? event : {
+                                    }, onChange: (value) => handleChangeDateTime(value, 'endTime'), shouldDisableTime: shouldDisabledTime })] })) })), _jsx(EventAddress, { forwardGeolocationData: handleGeoData, forwardLivestreamSettingsData: handleLiveStreamSettingsData, event: Object.assign(Object.assign({}, event), {
                             name: field.name,
                             start_date: field.startDate,
-                            geolocation: field.geolocation
-                        } }), privateEnabled && (_jsxs(Box, Object.assign({ className: classes.privacySection }, { children: [_jsxs(Stack, Object.assign({ direction: "row", spacing: 1, alignItems: "center", justifyContent: "center" }, { children: [_jsxs(Typography, Object.assign({ className: classNames(classes.switchLabel, { [classes.active]: !field.isPublic }) }, { children: [_jsx(Icon, { children: "private" }), _jsx(FormattedMessage, { id: "ui.eventForm.privacy.private", defaultMessage: "ui.eventForm.privacy.private" })] })), _jsx(Switch, { className: classes.switch, checked: field.isPublic, onChange: () => setField((prev) => (Object.assign(Object.assign({}, prev), { ['isPublic']: !field.isPublic }))), disabled: event && !field.isPublic }), _jsxs(Typography, Object.assign({ className: classNames(classes.switchLabel, { [classes.active]: field.isPublic }) }, { children: [_jsx(Icon, { children: "public" }), _jsx(FormattedMessage, { id: "ui.eventForm.privacy.public", defaultMessage: "ui.eventForm.privacy.public" })] }))] })), _jsx(Typography, Object.assign({ variant: "body2", textAlign: "center", className: classes.privacySectionInfo }, { children: field.isPublic ? (_jsx(FormattedMessage, { id: "ui.eventForm.privacy.public.info", defaultMessage: "ui.eventForm.privacy.public.info", values: {
+                            location: field.location,
+                            geolocation: field.geolocation,
+                            live_stream: {
+                                title: field.name || `${intl.formatMessage(messages.name)}`,
+                                created_at: field.startDate,
+                                settings: field.liveStreamSettings
+                            }
+                        }) }), privateEnabled && (_jsxs(Box, Object.assign({ className: classes.privacySection }, { children: [_jsxs(Stack, Object.assign({ direction: "row", spacing: 1, alignItems: "center", justifyContent: "center" }, { children: [_jsxs(Typography, Object.assign({ className: classNames(classes.switchLabel, { [classes.active]: !field.isPublic }) }, { children: [_jsx(Icon, { children: "private" }), _jsx(FormattedMessage, { id: "ui.eventForm.privacy.private", defaultMessage: "ui.eventForm.privacy.private" })] })), _jsx(Switch, { className: classes.switch, checked: field.isPublic, onChange: () => setField((prev) => (Object.assign(Object.assign({}, prev), { ['isPublic']: !field.isPublic }))), disabled: event && !field.isPublic }), _jsxs(Typography, Object.assign({ className: classNames(classes.switchLabel, { [classes.active]: field.isPublic }) }, { children: [_jsx(Icon, { children: "public" }), _jsx(FormattedMessage, { id: "ui.eventForm.privacy.public", defaultMessage: "ui.eventForm.privacy.public" })] }))] })), _jsx(Typography, Object.assign({ variant: "body2", textAlign: "center", className: classes.privacySectionInfo }, { children: field.isPublic ? (_jsx(FormattedMessage, { id: "ui.eventForm.privacy.public.info", defaultMessage: "ui.eventForm.privacy.public.info", values: {
                                         // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
                                         // @ts-ignore
                                         b: (chunks) => _jsx("strong", { children: chunks })

package/lib/esm/components/EventForm/types.d.ts

@@ -1,4 +1,4 @@
-import { SCEventLocationType, SCEventRecurrenceType } from '@selfcommunity/types';
+import { SCEventLocationType, SCEventRecurrenceType, SCLiveStreamSettingsType } from '@selfcommunity/types';
 export type Place = {
     description: string;
     id?: string;
@@ -9,6 +9,7 @@ export type Geolocation = {
     lat?: number;
     lng?: number;
     link?: string;
+    liveStreamSettings?: SCLiveStreamSettingsType;
 };
 export type InitialFieldState = Geolocation & {
     imageOriginal: string | ArrayBuffer;

package/lib/esm/components/LiveStreamForm/LiveStreamFormSettings.d.ts

@@ -1,4 +1,5 @@
 import { BoxProps } from '@mui/material';
+import { SCLiveStreamSettingsType } from '@selfcommunity/types';
 export declare const PREFIX = "SCLiveStreamFormSettings";
 export interface LiveStreamFormSettingsProps extends BoxProps {
     /**
@@ -10,7 +11,7 @@ export interface LiveStreamFormSettingsProps extends BoxProps {
      * Event Object
      * @default null
      */
-    settings?: Record<string, any>;
+    settings?: SCLiveStreamSettingsType;
     /**
      * onChange callback
      * @param data

package/lib/esm/components/LiveStreamForm/LiveStreamFormSettings.js

@@ -51,7 +51,7 @@ export default function LiveStreamSettingsForm(inProps) {
     /**
      * Renders root object
      */
-    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: [_jsxs(Stack, Object.assign({ direction: "row", spacing: 1, alignItems: "center" }, { children: [_jsx(Switch, { className: classes.switch, checked: Boolean(settings === null || settings === void 0 ? void 0 : settings.muteParticipant), onChange: () => onChange(Object.assign(Object.assign({}, settings), { ['muteParticipant']: !(settings === null || settings === void 0 ? void 0 : settings.muteParticipant) })) }), _jsx(Typography, Object.assign({ className: classes.switchLabel }, { children: _jsx(FormattedMessage, { id: "ui.liveStreamForm.muteParticipant", defaultMessage: "ui.liveStreamForm.muteParticipant" }) }))] })), _jsxs(Stack, Object.assign({ direction: "row", spacing: 1, alignItems: "center" }, { children: [_jsx(Switch, { className: classes.switch, checked: Boolean(settings === null || settings === void 0 ? void 0 : settings.hideParticipantList), onChange: () => onChange(Object.assign(Object.assign({}, settings), { ['hideParticipantList']: !(settings === null || settings === void 0 ? void 0 : settings.hideParticipantList) })) }), _jsx(Typography, Object.assign({ className: classes.switchLabel }, { children: _jsx(FormattedMessage, { id: "ui.liveStreamForm.hideParticipantList", defaultMessage: "ui.liveStreamForm.hideParticipantList" }) }))] })), _jsxs(Stack, Object.assign({ direction: "row", spacing: 1, alignItems: "center" }, { children: [_jsx(Switch, { className: classes.switch, checked: Boolean(settings === null || settings === void 0 ? void 0 : settings.automaticallyNotifyFollowers), onChange: () => onChange(Object.assign(Object.assign({}, settings), { ['automaticallyNotifyFollowers']: !(settings === null || settings === void 0 ? void 0 : settings.automaticallyNotifyFollowers) })) }), _jsx(Typography, Object.assign({ className: classes.switchLabel }, { children: _jsx(FormattedMessage, { id: "ui.liveStreamForm.automaticallyNotifyFollowers", defaultMessage: "ui.liveStreamForm.automaticallyNotifyFollowers" }) }))] })), _jsxs(Stack, Object.assign({ direction: "row", spacing: 1, alignItems: "center" }, { children: [_jsx(Switch, { className: classes.switch, checked: Boolean(settings === null || settings === void 0 ? void 0 : settings.disableVideo), onChange: () => onChange(Object.assign(Object.assign({}, settings), { ['disableVideo']: !(settings === null || settings === void 0 ? void 0 : settings.disableVideo) })) }), _jsx(Typography, Object.assign({ className: classes.switchLabel }, { children: _jsx(FormattedMessage, { id: "ui.liveStreamForm.disableVideo", defaultMessage: "ui.liveStreamForm.disableVideo" }) }))] })), _jsxs(Stack, Object.assign({ direction: "row", spacing: 1, alignItems: "center" }, { children: [_jsx(Switch, { className: classes.switch, checked: Boolean(settings === null || settings === void 0 ? void 0 : settings.disableChat), onChange: () => onChange(Object.assign(Object.assign({}, settings), { ['disableChat']: !(settings === null || settings === void 0 ? void 0 : settings.disableChat) })) }), _jsx(Typography, Object.assign({ className: classes.switchLabel }, { children: _jsx(FormattedMessage, { id: "ui.liveStreamForm.disableChat", defaultMessage: "ui.liveStreamForm.disableChat" }) }))] })), _jsxs(FormControl, Object.assign({ className: classes.accessView }, { children: [_jsx(InputLabel, Object.assign({ id: "viewLabel" }, { children: _jsx(FormattedMessage, { id: "ui.liveStreamForm.view.label", defaultMessage: "ui.liveStreamForm.view.label" }) })), _jsx(Select, Object.assign({ name: "view", label: _jsx(FormattedMessage, { id: "ui.liveStreamForm.view.label", defaultMessage: "ui.liveStreamForm.view.label" }), labelId: "viewLabel", fullWidth: true, value: (_a = settings === null || settings === void 0 ? void 0 : settings.view) !== null && _a !== void 0 ? _a : SCLiveStreamViewType.SPEAKER, onChange: (e) => onChange(Object.assign(Object.assign({}, settings), { ['view']: e.target.value })), displayEmpty: true, renderValue: (selected) => {
+    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: [_jsxs(Stack, Object.assign({ direction: "row", spacing: 1, alignItems: "center" }, { children: [_jsx(Switch, { className: classes.switch, checked: Boolean(settings === null || settings === void 0 ? void 0 : settings.muteParticipant), onChange: () => onChange(Object.assign(Object.assign({}, settings), { ['muteParticipant']: !(settings === null || settings === void 0 ? void 0 : settings.muteParticipant) })) }), _jsx(Typography, Object.assign({ className: classes.switchLabel }, { children: _jsx(FormattedMessage, { id: "ui.liveStreamForm.muteParticipant", defaultMessage: "ui.liveStreamForm.muteParticipant" }) }))] })), _jsxs(Stack, Object.assign({ direction: "row", spacing: 1, alignItems: "center" }, { children: [_jsx(Switch, { className: classes.switch, checked: Boolean(settings === null || settings === void 0 ? void 0 : settings.disableVideo), onChange: () => onChange(Object.assign(Object.assign({}, settings), { ['disableVideo']: !(settings === null || settings === void 0 ? void 0 : settings.disableVideo) })) }), _jsx(Typography, Object.assign({ className: classes.switchLabel }, { children: _jsx(FormattedMessage, { id: "ui.liveStreamForm.disableVideo", defaultMessage: "ui.liveStreamForm.disableVideo" }) }))] })), _jsxs(Stack, Object.assign({ direction: "row", spacing: 1, alignItems: "center" }, { children: [_jsx(Switch, { className: classes.switch, checked: Boolean(settings === null || settings === void 0 ? void 0 : settings.disableChat), onChange: () => onChange(Object.assign(Object.assign({}, settings), { ['disableChat']: !(settings === null || settings === void 0 ? void 0 : settings.disableChat) })) }), _jsx(Typography, Object.assign({ className: classes.switchLabel }, { children: _jsx(FormattedMessage, { id: "ui.liveStreamForm.disableChat", defaultMessage: "ui.liveStreamForm.disableChat" }) }))] })), _jsxs(Stack, Object.assign({ direction: "row", spacing: 1, alignItems: "center" }, { children: [_jsx(Switch, { className: classes.switch, checked: Boolean(settings === null || settings === void 0 ? void 0 : settings.disableShareScreen), onChange: () => onChange(Object.assign(Object.assign({}, settings), { ['disableShareScreen']: !(settings === null || settings === void 0 ? void 0 : settings.disableShareScreen) })) }), _jsx(Typography, Object.assign({ className: classes.switchLabel }, { children: _jsx(FormattedMessage, { id: "ui.liveStreamForm.disableShareScreen", defaultMessage: "ui.liveStreamForm.disableShareScreen" }) }))] })), _jsxs(Stack, Object.assign({ direction: "row", spacing: 1, alignItems: "center" }, { children: [_jsx(Switch, { className: classes.switch, checked: Boolean(settings === null || settings === void 0 ? void 0 : settings.hideParticipantList), onChange: () => onChange(Object.assign(Object.assign({}, settings), { ['hideParticipantList']: !(settings === null || settings === void 0 ? void 0 : settings.hideParticipantList) })) }), _jsx(Typography, Object.assign({ className: classes.switchLabel }, { children: _jsx(FormattedMessage, { id: "ui.liveStreamForm.hideParticipantList", defaultMessage: "ui.liveStreamForm.hideParticipantList" }) }))] })), _jsxs(Stack, Object.assign({ direction: "row", spacing: 1, alignItems: "center" }, { children: [_jsx(Switch, { className: classes.switch, checked: Boolean(settings === null || settings === void 0 ? void 0 : settings.automaticallyNotifyFollowers), onChange: () => onChange(Object.assign(Object.assign({}, settings), { ['automaticallyNotifyFollowers']: !(settings === null || settings === void 0 ? void 0 : settings.automaticallyNotifyFollowers) })) }), _jsx(Typography, Object.assign({ className: classes.switchLabel }, { children: _jsx(FormattedMessage, { id: "ui.liveStreamForm.automaticallyNotifyFollowers", defaultMessage: "ui.liveStreamForm.automaticallyNotifyFollowers" }) }))] })), _jsxs(FormControl, Object.assign({ className: classes.accessView }, { children: [_jsx(InputLabel, Object.assign({ id: "viewLabel" }, { children: _jsx(FormattedMessage, { id: "ui.liveStreamForm.view.label", defaultMessage: "ui.liveStreamForm.view.label" }) })), _jsx(Select, Object.assign({ name: "view", label: _jsx(FormattedMessage, { id: "ui.liveStreamForm.view.label", defaultMessage: "ui.liveStreamForm.view.label" }), labelId: "viewLabel", fullWidth: true, value: (_a = settings === null || settings === void 0 ? void 0 : settings.view) !== null && _a !== void 0 ? _a : SCLiveStreamViewType.SPEAKER, onChange: (e) => onChange(Object.assign(Object.assign({}, settings), { ['view']: e.target.value })), displayEmpty: true, renderValue: (selected) => {
                             return (_jsxs(_Fragment, { children: [_jsx(Icon, Object.assign({ className: classes.accessViewIcon }, { children: selected === SCLiveStreamViewType.SPEAKER ? 'upload' : 'category' })), "\u00A0", _jsx(FormattedMessage, { id: `ui.liveStreamForm.view.${selected}`, defaultMessage: `ui.liveStreamForm.view.${selected}` })] }));
                         } }, { children: Object.values(SCLiveStreamViewType).map((f) => (_jsx(MenuItem, Object.assign({ value: f }, { children: _jsxs(Box, { children: [_jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsxs("b", { children: [_jsx(Icon, Object.assign({ className: classes.accessViewIcon }, { children: f === SCLiveStreamViewType.SPEAKER ? 'upload' : 'category' })), "\u00A0", _jsx(FormattedMessage, { id: `ui.liveStreamForm.view.${f}`, defaultMessage: `ui.liveStreamForm.view.${f}` })] }) })), _jsx(Typography, { children: _jsx(FormattedMessage, { id: `ui.liveStreamForm.view.${f}.description`, defaultMessage: `ui.liveStreamForm.view.${f}.description` }) })] }) }), f))) }))] }))] })));
 }

package/lib/esm/components/LiveStreamForm/constants.d.ts

@@ -1,3 +1,4 @@
+import { SCLiveStreamViewType } from '@selfcommunity/types';
 export declare const PREFIX = "SCLiveStreamForm";
 export declare const LIVESTREAM_DEFAULT_SETTINGS: {
     muteParticipant: boolean;
@@ -5,4 +6,6 @@ export declare const LIVESTREAM_DEFAULT_SETTINGS: {
     automaticallyNotifyFollowers: boolean;
     disableVideo: boolean;
     disableChat: boolean;
+    disableShareScreen: boolean;
+    view: SCLiveStreamViewType;
 };

package/lib/esm/components/LiveStreamForm/constants.js

@@ -1,8 +1,11 @@
+import { SCLiveStreamViewType } from '@selfcommunity/types';
 export const PREFIX = 'SCLiveStreamForm';
 export const LIVESTREAM_DEFAULT_SETTINGS = {
     muteParticipant: true,
-    hideParticipantList: true,
-    automaticallyNotifyFollowers: true,
+    hideParticipantList: false,
+    automaticallyNotifyFollowers: false,
     disableVideo: true,
-    disableChat: false
+    disableChat: false,
+    disableShareScreen: true,
+    view: SCLiveStreamViewType.SPEAKER
 };

package/lib/esm/components/LiveStreamRoom/LiveStreamRoom.js

@@ -1,6 +1,6 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Box, CircularProgress, Typography } from '@mui/material';
+import { Alert, Box, CircularProgress, Typography } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import { useThemeProps } from '@mui/system';
 import { SCPreferences, useSCFetchLiveStream, useSCPreferences, useSCUser } from '@selfcommunity/react-core';
@@ -8,13 +8,13 @@ import { SCFeatureName } from '@selfcommunity/types';
 import classNames from 'classnames';
 import { FormattedMessage } from 'react-intl';
 import { PREFIX } from './constants';
-import { PreJoin } from '@livekit/components-react';
 import { useCallback, useMemo, useState } from 'react';
 import LiveStreamVideoConference from './LiveStreamVideoConference';
 import '@livekit/components-styles';
 import { LiveStreamService } from '@selfcommunity/api-services';
 import { Logger } from '@selfcommunity/utils';
 import { SCOPE_SC_UI } from '../../constants/Errors';
+import { PreJoin } from './LiveStreamVideoConference/PreJoin';
 const classes = {
     root: `${PREFIX}-root`,
     content: `${PREFIX}-content`,
@@ -58,12 +58,13 @@ const Root = styled(Box, {
  * @param inProps
  */
 export default function LiveStreamRoom(inProps) {
+    var _a, _b, _c, _d;
     //PROPS
     const props = useThemeProps({
         props: inProps,
         name: PREFIX
     });
-    const { id = `live_stream_room_object_${props.liveStreamId ? props.liveStreamId : props.liveStream ? props.liveStream.id : ''}`, liveStreamId = null, liveStream = null, className, showPrejoinTitle = true, showPrejoinDescription = false, startPrejoinContent, endPrejoinContent, presetConnectionDetails, presetPreJoinChoices, LiveStreamVideoConferenceComponentProps = {} } = props, rest = __rest(props, ["id", "liveStreamId", "liveStream", "className", "showPrejoinTitle", "showPrejoinDescription", "startPrejoinContent", "endPrejoinContent", "presetConnectionDetails", "presetPreJoinChoices", "LiveStreamVideoConferenceComponentProps"]);
+    const { id = `live_stream_room_object_${props.liveStreamId ? props.liveStreamId : props.liveStream ? props.liveStream.id : ''}`, liveStreamId = null, liveStream = null, className, showPrejoinTitle = true, showPrejoinDescription = false, startPrejoinContent, endPrejoinContent, presetConnectionDetails, presetPreJoinChoices, LiveStreamVideoConferenceComponentProps = { options: { codec: 'vp8', hq: false } } } = props, rest = __rest(props, ["id", "liveStreamId", "liveStream", "className", "showPrejoinTitle", "showPrejoinDescription", "startPrejoinContent", "endPrejoinContent", "presetConnectionDetails", "presetPreJoinChoices", "LiveStreamVideoConferenceComponentProps"]);
     // CONTEXT
     const scUserContext = useSCUser();
     const { preferences, features } = useSCPreferences();
@@ -72,11 +73,11 @@ export default function LiveStreamRoom(inProps) {
     const [preJoinChoices, setPreJoinChoices] = useState(presetPreJoinChoices);
     const [loading, setLoading] = useState(false);
     const preJoinDefaults = useMemo(() => {
-        var _a, _b, _c, _d, _e;
+        var _a, _b, _c;
         return {
             username: ((_a = scUserContext.user) === null || _a === void 0 ? void 0 : _a.username) || '',
-            videoEnabled: (_c = (_b = scLiveStream === null || scLiveStream === void 0 ? void 0 : scLiveStream.settings) === null || _b === void 0 ? void 0 : _b.disableVideo) !== null && _c !== void 0 ? _c : true,
-            audioEnabled: (_e = (_d = scLiveStream === null || scLiveStream === void 0 ? void 0 : scLiveStream.settings) === null || _d === void 0 ? void 0 : _d.muteParticipant) !== null && _e !== void 0 ? _e : true
+            videoEnabled: ((_b = scLiveStream === null || scLiveStream === void 0 ? void 0 : scLiveStream.settings) === null || _b === void 0 ? void 0 : _b.disableVideo) === false,
+            audioEnabled: ((_c = scLiveStream === null || scLiveStream === void 0 ? void 0 : scLiveStream.settings) === null || _c === void 0 ? void 0 : _c.muteParticipant) === false
         };
     }, [scUserContext.user, scLiveStream]);
     const [connectionDetails, setConnectionDetails] = useState(presetConnectionDetails);
@@ -96,6 +97,8 @@ export default function LiveStreamRoom(inProps) {
             });
         }
     }, []);
+    const canUseAudio = 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.muteParticipant)); }, [scUserContext, liveStream]);
+    const canUseVideo = 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]);
     // HANDLERS
     /**
      * Handle PreJoin Submit
@@ -129,5 +132,8 @@ export default function LiveStreamRoom(inProps) {
     /**
      * Renders root object
      */
-    return (_jsx(Root, Object.assign({ id: id, className: classNames(classes.root, className) }, rest, { children: _jsx(Box, Object.assign({ className: classes.content, "data-lk-theme": "default" }, { children: connectionDetails === undefined || preJoinChoices === undefined ? (_jsxs(_Fragment, { children: [startPrejoinContent && _jsx(Box, Object.assign({ className: classes.startPrejoinContent }, { children: startPrejoinContent })), (scLiveStream === null || scLiveStream === void 0 ? void 0 : scLiveStream.title) && (_jsx(Typography, Object.assign({ component: 'div', variant: "h5", className: classes.title }, { children: scLiveStream === null || scLiveStream === void 0 ? void 0 : scLiveStream.title }))), (scLiveStream === null || scLiveStream === void 0 ? void 0 : scLiveStream.description) && (_jsx(Typography, Object.assign({ component: 'div', variant: "body1", className: classes.description }, { children: scLiveStream === null || scLiveStream === void 0 ? void 0 : scLiveStream.description }))), _jsxs(Box, Object.assign({ className: classNames(classes.preJoin, { [classes.preJoinLoading]: loading }) }, { children: [_jsx(PreJoin, { defaults: preJoinDefaults, onSubmit: handlePreJoinSubmit, onError: handlePreJoinError }), loading && (_jsxs(Box, Object.assign({ className: classes.prejoinLoader }, { children: [_jsx(CircularProgress, {}), _jsx(Typography, Object.assign({ component: 'div', variant: "body2" }, { children: _jsx(FormattedMessage, { id: "ui.liveStreamRoom.connecting", defaultMessage: "ui.liveStreamRoom.connecting" }) }))] })))] })), _jsx(Box, Object.assign({ className: classes.endPrejoinContent }, { children: endPrejoinContent }))] })) : (_jsx(Box, Object.assign({ className: classes.conference }, { children: _jsx(LiveStreamVideoConference, Object.assign({ connectionDetails: connectionDetails, userChoices: preJoinChoices, options: { codec: props.codec, hq: props.hq } }, LiveStreamVideoConferenceComponentProps)) }))) })) })));
+    return (_jsx(Root, Object.assign({ id: id, className: classNames(classes.root, className) }, rest, { children: _jsx(Box, Object.assign({ className: classes.content, "data-lk-theme": "default" }, { children: connectionDetails === undefined || preJoinChoices === undefined ? (_jsxs(_Fragment, { children: [startPrejoinContent && _jsx(Box, Object.assign({ className: classes.startPrejoinContent }, { children: startPrejoinContent })), (scLiveStream === null || scLiveStream === void 0 ? void 0 : scLiveStream.title) && (_jsx(Typography, Object.assign({ component: 'div', variant: "h5", className: classes.title }, { children: scLiveStream === null || scLiveStream === void 0 ? void 0 : scLiveStream.title }))), (scLiveStream === null || scLiveStream === void 0 ? void 0 : scLiveStream.description) && (_jsx(Typography, Object.assign({ component: 'div', variant: "body1", className: classes.description }, { children: scLiveStream === null || scLiveStream === void 0 ? void 0 : scLiveStream.description }))), _jsxs(Box, Object.assign({ className: classNames(classes.preJoin, { [classes.preJoinLoading]: loading }) }, { children: [_jsx(PreJoin, { liveStream: scLiveStream, defaults: preJoinDefaults, onSubmit: handlePreJoinSubmit, onError: handlePreJoinError }), loading && (_jsxs(Box, Object.assign({ className: classes.prejoinLoader }, { children: [_jsx(CircularProgress, {}), _jsx(Typography, Object.assign({ component: 'div', variant: "body2" }, { children: _jsx(FormattedMessage, { id: "ui.liveStreamRoom.connecting", defaultMessage: "ui.liveStreamRoom.connecting" }) }))] })))] })), _jsxs(Box, Object.assign({ className: classes.endPrejoinContent }, { children: [Boolean(scUserContext.user &&
+                                scUserContext.user.id !== scLiveStream.host.id &&
+                                scLiveStream &&
+                                (((_a = scLiveStream.settings) === null || _a === void 0 ? void 0 : _a.muteParticipant) || (scLiveStream && ((_b = scLiveStream.settings) === null || _b === void 0 ? void 0 : _b.disableVideo)))) && (_jsxs(Alert, Object.assign({ variant: "filled", severity: "error" }, { children: [scLiveStream && ((_c = scLiveStream.settings) === null || _c === void 0 ? void 0 : _c.muteParticipant) && (_jsxs(_Fragment, { children: ["The host of the live set your microphone as off", _jsx("br", {})] })), scLiveStream && ((_d = scLiveStream.settings) === null || _d === void 0 ? void 0 : _d.disableVideo) && _jsx(_Fragment, { children: "The host of the live set your camera as off" })] }))), endPrejoinContent] }))] })) : (_jsx(Box, Object.assign({ className: classes.conference }, { children: _jsx(LiveStreamVideoConference, Object.assign({ liveStream: scLiveStream, connectionDetails: connectionDetails, userChoices: preJoinChoices }, LiveStreamVideoConferenceComponentProps)) }))) })) })));
 }

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

@@ -67,6 +67,10 @@ export default function LiveStreamVideoConference(inProps) {
     const [e2eeSetupComplete, setE2eeSetupComplete] = useState(true);
     const [liveActive, setLiveActive] = useState(true);
     const [error, setError] = useState(null);
+    const canUseAudio = 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.muteParticipant)); }, [scUserContext, liveStream]);
+    const canUseVideo = 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 = 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.disableChat)); }, [scUserContext, liveStream]);
+    const canUseShareScreen = 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 liveStreamRoomMaxParticipants = useMemo(
           () =>
               preferences &&
@@ -176,5 +180,5 @@ export default function LiveStreamVideoConference(inProps) {
     /**
      * Renders root object
      */
-    return (_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: liveActive && !error ? (_jsx(_Fragment, { children: _jsx(LiveKitRoom, Object.assign({ connect: Boolean(e2eeSetupComplete && liveActive), token: connectionDetails['participantToken'], serverUrl: connectionDetails['serverUrl'], connectOptions: connectOptions, video: userChoices.videoEnabled, audio: userChoices.audioEnabled, onDisconnected: handleOnLeave, onEncryptionError: handleEncryptionError, onError: handleError }, LiveKitRoomComponentProps, { children: _jsxs(LayoutContextProvider, { children: [_jsx(VideoConference, Object.assign({ chatMessageFormatter: formatChatMessageLinks }, VideoConferenceComponentProps)), _jsx(ConnectionState, {})] }) })) })) : (_jsx(_Fragment, { children: error ? (_jsxs(Box, Object.assign({ className: classes.endConferenceWrap }, { children: [startConferenceEndContent, error, endConferenceEndContent] }))) : liveActive === false ? (_jsxs(Box, Object.assign({ className: classes.endConferenceWrap }, { children: [startConferenceEndContent, _jsx(Typography, Object.assign({ variant: "h5" }, { children: _jsx(FormattedMessage, { id: "ui.liveStreamRoom.conference.end", defaultMessage: "ui.liveStreamRoom.conference.end" }) })), _jsx(Button, Object.assign({ variant: "contained", color: "secondary", component: Link, to: '/', className: classes.btnBackHome }, { children: _jsx(FormattedMessage, { id: "ui.liveStreamRoom.button.backHome", defaultMessage: "ui.liveStreamRoom.button.backHome" }) })), endConferenceEndContent] }))) : (_jsx(CircularProgress, {})) })) })));
+    return (_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: liveActive && !error ? (_jsx(_Fragment, { children: _jsx(LiveKitRoom, Object.assign({ connect: Boolean(e2eeSetupComplete && liveActive), token: connectionDetails['participantToken'], serverUrl: connectionDetails['serverUrl'], connectOptions: connectOptions, video: userChoices.videoEnabled, audio: userChoices.audioEnabled, onDisconnected: handleOnLeave, onEncryptionError: handleEncryptionError, onError: handleError }, LiveKitRoomComponentProps, { children: _jsxs(LayoutContextProvider, { children: [_jsx(VideoConference, Object.assign({ chatMessageFormatter: formatChatMessageLinks, speakerFocused: liveStream.host }, VideoConferenceComponentProps, { disableMicrophone: !canUseAudio, disableCamera: !canUseVideo, disableChat: !canUseChat, disableShareScreen: !canUseShareScreen })), _jsx(ConnectionState, {})] }) })) })) : (_jsx(_Fragment, { children: error ? (_jsxs(Box, Object.assign({ className: classes.endConferenceWrap }, { children: [startConferenceEndContent, error, endConferenceEndContent] }))) : liveActive === false ? (_jsxs(Box, Object.assign({ className: classes.endConferenceWrap }, { children: [startConferenceEndContent, _jsx(Typography, Object.assign({ variant: "h5" }, { children: _jsx(FormattedMessage, { id: "ui.liveStreamRoom.conference.end", defaultMessage: "ui.liveStreamRoom.conference.end" }) })), _jsx(Button, Object.assign({ variant: "contained", color: "secondary", component: Link, to: '/', className: classes.btnBackHome }, { children: _jsx(FormattedMessage, { id: "ui.liveStreamRoom.button.backHome", defaultMessage: "ui.liveStreamRoom.button.backHome" }) })), endConferenceEndContent] }))) : (_jsx(CircularProgress, {})) })) })));
 }

package/lib/esm/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/esm/components/LiveStreamRoom/LiveStreamVideoConference/ParticipantPlaceholder.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * @internal
+ */
+const SvgParticipantPlaceholder = (props) => (_jsxs("svg", Object.assign({ width: 320, height: 320, viewBox: "0 0 320 320", preserveAspectRatio: "xMidYMid meet", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: [_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 }), _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 })] })));
+export default SvgParticipantPlaceholder;

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

@@ -0,0 +1,27 @@
+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;
+    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/esm/components/LiveStreamRoom/LiveStreamVideoConference/ParticipantTile.js

@@ -0,0 +1,60 @@
+import { __rest } from "tslib";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { Track } from 'livekit-client';
+import { isTrackReference, isTrackReferencePinned } from '@livekit/components-core';
+import { AudioTrack, ConnectionQualityIndicator, FocusToggle, LockLockedIcon, ParticipantContext, ParticipantName, ScreenShareIcon, TrackMutedIndicator, TrackRefContext, useEnsureTrackRef, useFeatureContext, useIsEncrypted, useMaybeLayoutContext, useMaybeParticipantContext, useMaybeTrackRefContext, useParticipantTile, VideoTrack } from '@livekit/components-react';
+import ParticipantTileAvatar from './ParticipantTileAvatar';
+import ParticipantTileActions from './ParticipantTileActions';
+import { useSCUser } from '@selfcommunity/react-core';
+/**
+ * The `ParticipantContextIfNeeded` component only creates a `ParticipantContext`
+ * if there is no `ParticipantContext` already.
+ */
+export function ParticipantContextIfNeeded(props) {
+    const hasContext = !!useMaybeParticipantContext();
+    return props.participant && !hasContext ? (_jsx(ParticipantContext.Provider, Object.assign({ value: props.participant }, { children: props.children }))) : (_jsx(_Fragment, { children: props.children }));
+}
+/**
+ * Only create a `TrackRefContext` if there is no `TrackRefContext` already.
+ */
+export function TrackRefContextIfNeeded(props) {
+    const hasContext = !!useMaybeTrackRefContext();
+    return props.trackRef && !hasContext ? (_jsx(TrackRefContext.Provider, Object.assign({ value: props.trackRef }, { children: props.children }))) : (_jsx(_Fragment, { children: props.children }));
+}
+/**
+ * The `ParticipantTile` component is the base utility wrapper for displaying a visual representation of a participant.
+ * This component can be used as a child of the `TrackLoop` component or by passing a track reference as property.
+ */
+export const ParticipantTile = 
+/* @__PURE__ */ React.forwardRef(function ParticipantTile(_a, ref) {
+    var _b, _c;
+    var { trackRef, children, onParticipantClick, disableSpeakingIndicator } = _a, htmlProps = __rest(_a, ["trackRef", "children", "onParticipantClick", "disableSpeakingIndicator"]);
+    const scUserContext = useSCUser();
+    const trackReference = useEnsureTrackRef(trackRef);
+    const { elementProps } = useParticipantTile({
+        htmlProps,
+        disableSpeakingIndicator,
+        onParticipantClick,
+        trackRef: trackReference
+    });
+    const isEncrypted = useIsEncrypted(trackReference.participant);
+    const layoutContext = useMaybeLayoutContext();
+    const autoManageSubscription = (_b = useFeatureContext()) === null || _b === void 0 ? void 0 : _b.autoSubscription;
+    const handleSubscribe = React.useCallback((subscribed) => {
+        if (trackReference.source &&
+            !subscribed &&
+            layoutContext &&
+            layoutContext.pin.dispatch &&
+            isTrackReferencePinned(trackReference, layoutContext.pin.state)) {
+            layoutContext.pin.dispatch({ msg: 'clear_pin' });
+        }
+    }, [trackReference, layoutContext]);
+    return (_jsx("div", Object.assign({ ref: ref, style: { position: 'relative' } }, elementProps, { children: _jsx(TrackRefContextIfNeeded, Object.assign({ trackRef: trackReference }, { children: _jsxs(ParticipantContextIfNeeded, Object.assign({ participant: trackReference.participant }, { children: [children !== null && children !== void 0 ? children : (_jsxs(_Fragment, { children: [isTrackReference(trackReference) &&
+                                (((_c = trackReference.publication) === null || _c === void 0 ? void 0 : _c.kind) === 'video' ||
+                                    trackReference.source === Track.Source.Camera ||
+                                    trackReference.source === Track.Source.ScreenShare) ? (_jsx(_Fragment, { children: _jsx(VideoTrack, { trackRef: trackReference, onSubscriptionStatusChanged: handleSubscribe, manageSubscription: autoManageSubscription }) })) : (isTrackReference(trackReference) && (_jsx(_Fragment, { children: _jsx(AudioTrack, { trackRef: trackReference, onSubscriptionStatusChanged: handleSubscribe }) }))), _jsx("div", Object.assign({ className: "lk-participant-placeholder" }, { children: _jsx(ParticipantTileAvatar, { participant: trackReference.participant }) })), _jsxs("div", Object.assign({ className: "lk-participant-metadata" }, { children: [_jsx("div", Object.assign({ className: "lk-participant-metadata-item" }, { children: trackReference.source === Track.Source.Camera ? (_jsxs(_Fragment, { children: [isEncrypted && _jsx(LockLockedIcon, { style: { marginRight: '0.25rem' } }), _jsx(TrackMutedIndicator, { trackRef: {
+                                                        participant: trackReference.participant,
+                                                        source: Track.Source.Microphone
+                                                    }, show: 'muted' }), _jsx(ParticipantName, { children: _jsx(ParticipantTileActions, {}) })] })) : (_jsxs(_Fragment, { children: [_jsx(ScreenShareIcon, { style: { marginRight: '0.25rem' } }), _jsx(ParticipantName, { children: "'s screen" })] })) })), _jsx(ConnectionQualityIndicator, { className: "lk-participant-metadata-item" })] }))] })), _jsx(FocusToggle, { trackRef: trackReference })] })) })) })));
+});

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

@@ -0,0 +1,26 @@
+export interface ParticipantTileActionsMenuProps {
+    /**
+     * Overrides or extends the styles applied to the component.
+     * @default null
+     */
+    className?: string;
+    /**
+     * User Object
+     * @default null
+     */
+    participant?: any;
+    /**
+     * Handle delete obj
+     */
+    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;