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

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

@@ -0,0 +1,27 @@
+import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { Track } from 'livekit-client';
+import { useTrackToggle, CameraIcon, CameraDisabledIcon, MicDisabledIcon, MicIcon, ScreenShareIcon, ScreenShareStopIcon } from '@livekit/components-react';
+export function getSourceIcon(source, enabled) {
+    switch (source) {
+        case Track.Source.Microphone:
+            return enabled ? _jsx(MicIcon, {}) : _jsx(MicDisabledIcon, {});
+        case Track.Source.Camera:
+            return enabled ? _jsx(CameraIcon, {}) : _jsx(CameraDisabledIcon, {});
+        case Track.Source.ScreenShare:
+            return enabled ? _jsx(ScreenShareStopIcon, {}) : _jsx(ScreenShareIcon, {});
+        default:
+            return undefined;
+    }
+}
+/**
+ * With the `TrackToggle` component it is possible to mute and unmute your camera and microphone.
+ * The component uses an html button element under the hood so you can treat it like a button.
+ */
+export const TrackToggle = 
+/* @__PURE__ */ React.forwardRef(function TrackToggle(_a, ref) {
+    var { showIcon, disabled } = _a, props = __rest(_a, ["showIcon", "disabled"]);
+    const { buttonProps, enabled } = useTrackToggle(props);
+    return (_jsxs("button", Object.assign({ ref: ref }, buttonProps, { disabled: disabled }, { children: [(showIcon !== null && showIcon !== void 0 ? showIcon : true) && getSourceIcon(props.source, enabled && !disabled), props.children] })));
+});

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

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import type { MessageDecoder, MessageEncoder } from '@livekit/components-core';
 import { MessageFormatter } from '@livekit/components-react';
+import { SCUserType } from '@selfcommunity/types';
 /**
  * @public
  */
@@ -10,11 +11,11 @@ export interface VideoConferenceProps extends React.HTMLAttributes<HTMLDivElemen
     chatMessageDecoder?: MessageDecoder;
     /** @alpha */
     SettingsComponent?: React.ComponentType;
-    speakerFocused?: string;
+    speakerFocused?: SCUserType;
     disableChat?: boolean;
     disableMicrophone?: boolean;
     disableCamera?: boolean;
-    disableScreenShare?: boolean;
+    disableShareScreen?: boolean;
     hideParticipantList?: boolean;
     showSettings?: boolean;
 }
@@ -36,4 +37,4 @@ export interface VideoConferenceProps extends React.HTMLAttributes<HTMLDivElemen
  * ```
  * @public
  */
-export declare function VideoConference({ chatMessageFormatter, chatMessageDecoder, chatMessageEncoder, SettingsComponent, speakerFocused, disableChat, disableMicrophone, disableCamera, disableScreenShare, hideParticipantList, showSettings, ...props }: VideoConferenceProps): JSX.Element;
+export declare function VideoConference({ chatMessageFormatter, chatMessageDecoder, chatMessageEncoder, SettingsComponent, speakerFocused, disableChat, disableMicrophone, disableCamera, disableShareScreen, hideParticipantList, showSettings, ...props }: VideoConferenceProps): JSX.Element;

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

@@ -3,7 +3,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import { isEqualTrackRef, isTrackReference, isWeb, log } from '@livekit/components-core';
 import { RoomEvent, Track } from 'livekit-client';
-import { CarouselLayout, Chat, ConnectionStateToast, ControlBar, FocusLayout, FocusLayoutContainer, GridLayout, LayoutContextProvider, ParticipantTile, RoomAudioRenderer, useCreateLayoutContext, useLocalParticipant, useParticipants, usePinnedTracks, useTracks } from '@livekit/components-react';
+import { CarouselLayout, Chat, ConnectionStateToast, ControlBar, FocusLayout, FocusLayoutContainer, GridLayout, LayoutContextProvider, RoomAudioRenderer, useCreateLayoutContext, useLocalParticipant, useParticipants, usePinnedTracks, useTracks } from '@livekit/components-react';
+import { ParticipantTile } from './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
@@ -24,7 +25,7 @@ import { CarouselLayout, Chat, ConnectionStateToast, ControlBar, FocusLayout, Fo
  */
 export function VideoConference(_a) {
     var _b, _c;
-    var { chatMessageFormatter, chatMessageDecoder, chatMessageEncoder, SettingsComponent, speakerFocused, disableChat = false, disableMicrophone = false, disableCamera = false, disableScreenShare = true, hideParticipantList = false, showSettings } = _a, props = __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 = __rest(_a, ["chatMessageFormatter", "chatMessageDecoder", "chatMessageEncoder", "SettingsComponent", "speakerFocused", "disableChat", "disableMicrophone", "disableCamera", "disableShareScreen", "hideParticipantList", "showSettings"]);
     const [widgetState, setWidgetState] = React.useState({
         showChat: false,
         unreadMessages: 0,
@@ -70,7 +71,6 @@ export function VideoConference(_a) {
             lastAutoFocusedScreenShareTrack.current = null;
         }
         if (focusTrack && !isTrackReference(focusTrack)) {
-            console.log('asdadsa');
             const updatedFocusTrack = tracks.find((tr) => tr.participant.identity === focusTrack.participant.identity && tr.source === focusTrack.source);
             if (updatedFocusTrack !== focusTrack && isTrackReference(updatedFocusTrack)) {
                 (_f = (_e = layoutContext.pin).dispatch) === null || _f === void 0 ? void 0 : _f.call(_e, { msg: 'set_pin', trackReference: updatedFocusTrack });
@@ -78,7 +78,7 @@ export 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) => {
@@ -97,12 +97,12 @@ export function VideoConference(_a) {
         participants,
         speakerFocused
     ]);
-    return (_jsxs("div", Object.assign({ className: "lk-video-conference" }, props, { children: [isWeb() && (_jsxs(LayoutContextProvider, Object.assign({ value: layoutContext, onPinChange: handleFocusStateChange, onWidgetChange: widgetUpdate }, { children: [_jsxs("div", Object.assign({ className: "lk-video-conference-inner" }, { children: [!focusTrack ? (_jsx("div", Object.assign({ className: "lk-grid-layout-wrapper" }, { children: _jsx(GridLayout, Object.assign({ tracks: tracks }, { children: _jsx(ParticipantTile, {}) })) }))) : (_jsx("div", Object.assign({ className: "lk-focus-layout-wrapper" }, { children: _jsxs(FocusLayoutContainer, { children: [!hideParticipantList && (_jsx(CarouselLayout, Object.assign({ tracks: carouselTracks }, { children: _jsx(ParticipantTile, {}) }))), focusTrack && _jsx(FocusLayout, { trackRef: focusTrack })] }) }))), _jsx(ControlBar, { controls: Object.assign(Object.assign({}, (localParticipant.name !== speakerFocused
+    return (_jsxs("div", Object.assign({ className: "lk-video-conference" }, props, { children: [isWeb() && (_jsxs(LayoutContextProvider, Object.assign({ value: layoutContext, onPinChange: handleFocusStateChange, onWidgetChange: widgetUpdate }, { children: [_jsxs("div", Object.assign({ className: "lk-video-conference-inner" }, { children: [!focusTrack ? (_jsx("div", Object.assign({ className: "lk-grid-layout-wrapper" }, { children: _jsx(GridLayout, Object.assign({ tracks: tracks }, { children: _jsx(ParticipantTile, {}) })) }))) : (_jsx("div", Object.assign({ className: "lk-focus-layout-wrapper" }, { children: _jsxs(FocusLayoutContainer, { children: [!hideParticipantList && (_jsx(CarouselLayout, Object.assign({ tracks: carouselTracks }, { children: _jsx(ParticipantTile, {}) }))), focusTrack && _jsx(FocusLayout, { trackRef: focusTrack })] }) }))), _jsx(ControlBar, { controls: Object.assign(Object.assign({}, (localParticipant.name !== speakerFocused.username
                                     ? {
                                         chat: !disableChat,
                                         microphone: !disableMicrophone,
                                         camera: !disableCamera,
-                                        screenShare: !disableScreenShare
+                                        screenShare: !disableShareScreen
                                     }
                                     : {})), { settings: !!SettingsComponent }) })] })), !disableChat && (_jsx(Chat, { style: { display: widgetState.showChat ? 'grid' : 'none' }, messageFormatter: chatMessageFormatter, messageEncoder: chatMessageEncoder, messageDecoder: chatMessageDecoder })), SettingsComponent && (_jsx("div", Object.assign({ className: "lk-settings-menu-modal", style: { display: widgetState.showSettings ? 'block' : 'none' } }, { children: _jsx(SettingsComponent, {}) })))] }))), _jsx(RoomAudioRenderer, {}), _jsx(ConnectionStateToast, {})] })));
 }

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

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

package/lib/esm/shared/LiveStreamInfoDetails/index.js

@@ -31,7 +31,15 @@ export default function LiveStreamInfoDetails(inProps) {
     if (!scLiveStream) {
         return null;
     }
-    return (_jsxs(Root, Object.assign({ className: classes.root }, { children: [beforeDateInfo, hasDateInfo && (_jsxs(Stack, Object.assign({ className: classes.iconTextWrapper }, { children: [!hideDateIcon && _jsx(Icon, Object.assign({ fontSize: "small" }, { children: scLiveStream.closed_at ? 'calendar_off' : 'CalendarIcon' })), hasInProgress && scLiveStream.running && (_jsx(Tooltip, Object.assign({ title: _jsx(FormattedMessage, { id: "ui.eventInfoDetails.inProgress", defaultMessage: "ui.eventInfoDetails.inProgress" }) }, { children: _jsx(Box, { className: classes.inProgress }) })))] }))), beforeLocationInfo, hasLocationInfo && (_jsxs(Stack, Object.assign({ className: classes.iconTextWrapper }, { children: [!hideLocationIcon && _jsx(Icon, Object.assign({ fontSize: "small" }, { children: "play_circle_outline" })), _jsx(Link, Object.assign({ to: scRoutingContext.url(SCRoutes.LIVESTREAM_ROUTE_NAME, scLiveStream), target: "_blank", className: classes.link }, { children: _jsx(Typography, Object.assign({ variant: "body1", className: classes.url }, { children: scRoutingContext.url(SCRoutes.LIVESTREAM_ROUTE_NAME, scLiveStream) })) }))] }))), beforeCreatedInfo, hasCreatedInfo && (_jsxs(Stack, Object.assign({ className: classes.creationWrapper }, { children: [!hideCreatedIcon && _jsx(Icon, Object.assign({ fontSize: "small" }, { children: "create" })), _jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.eventInfoDetails.date.create", defaultMessage: "ui.eventInfoDetails.date.create", values: {
+    return (_jsxs(Root, Object.assign({ className: classes.root }, { children: [beforeDateInfo, hasDateInfo && (_jsxs(Stack, Object.assign({ className: classes.iconTextWrapper }, { children: [!hideDateIcon && _jsx(Icon, Object.assign({ fontSize: "small" }, { children: scLiveStream.closed_at ? 'calendar_off' : 'CalendarIcon' })), _jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.eventInfoDetails.date.startEndTime", defaultMessage: "ui.eventInfoDetails.date.startEndTime", values: {
+                                date: intl.formatDate(scLiveStream.created_at, {
+                                    weekday: 'long',
+                                    day: 'numeric',
+                                    year: 'numeric',
+                                    month: 'long'
+                                }),
+                                start: intl.formatDate(scLiveStream.created_at, { hour: 'numeric', minute: 'numeric' })
+                            } }) })), hasInProgress && scLiveStream.running && (_jsx(Tooltip, Object.assign({ title: _jsx(FormattedMessage, { id: "ui.eventInfoDetails.inProgress", defaultMessage: "ui.eventInfoDetails.inProgress" }) }, { children: _jsx(Box, { className: classes.inProgress }) })))] }))), beforeLocationInfo, hasLocationInfo && (_jsxs(Stack, Object.assign({ className: classes.iconTextWrapper }, { children: [!hideLocationIcon && _jsx(Icon, Object.assign({ fontSize: "small" }, { children: "play_circle_outline" })), _jsx(Link, Object.assign({ to: scRoutingContext.url(SCRoutes.LIVESTREAM_ROUTE_NAME, scLiveStream), target: "_blank", className: classes.link }, { children: _jsx(Typography, Object.assign({ variant: "body1", className: classes.url }, { children: scRoutingContext.url(SCRoutes.LIVESTREAM_ROUTE_NAME, scLiveStream) })) }))] }))), beforeCreatedInfo, hasCreatedInfo && (_jsxs(Stack, Object.assign({ className: classes.creationWrapper }, { children: [!hideCreatedIcon && _jsx(Icon, Object.assign({ fontSize: "small" }, { children: "create" })), _jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.eventInfoDetails.date.create", defaultMessage: "ui.eventInfoDetails.date.create", values: {
                                 date: intl.formatDate(scLiveStream.created_at, {
                                     weekday: 'long',
                                     day: 'numeric',