@selfcommunity/react-ui 0.11.0-alpha.3 → 0.11.0-alpha.31

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

@@ -1,19 +1,27 @@
 import { __rest } from "tslib";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } 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, GridLayout, LayoutContextProvider, RoomAudioRenderer, useCreateLayoutContext, useParticipants, usePinnedTracks, useTracks } from '@livekit/components-react';
+import { CarouselLayout, Chat, ConnectionStateToast, GridLayout, LayoutContextProvider, RoomAudioRenderer, useCreateLayoutContext, useLocalParticipant, useParticipants, usePinnedTracks, useTracks } from '@livekit/components-react';
 import { ParticipantTile } from './ParticipantTile';
 import { ControlBar } from './ControlBar';
-import { useEffect } from 'react';
+import { useEffect, useMemo } from 'react';
 import { useLivestreamCheck } from './useLiveStreamCheck';
 import { FocusLayout, FocusLayoutContainer, FocusLayoutContainerNoParticipants } from './FocusLayout';
 import { useSCUser } from '@selfcommunity/react-core';
 import classNames from 'classnames';
 import { styled } from '@mui/material/styles';
-import { Box } from '@mui/material';
+import { Box, IconButton } from '@mui/material';
 import { useThemeProps } from '@mui/system';
+import NoParticipants from './NoParticipants';
+import LiveStreamSettingsMenu from './LiveStreamSettingsMenu';
+import { BackgroundBlur } from '@livekit/track-processors';
+import { isClientSideRendering } from '@selfcommunity/utils';
+import { CHOICE_VIDEO_BLUR_EFFECT } from '../../../constants/LiveStream';
+import Icon from '@mui/material/Icon';
+import { useSnackbar } from 'notistack';
+import { FormattedMessage } from 'react-intl';
 const PREFIX = 'SCVideoConference';
 const classes = {
     root: `${PREFIX}-root`
@@ -34,7 +42,7 @@ const Root = styled(Box, {
  *
  */
 export function VideoConference(inProps) {
-    var _a, _b;
+    var _a, _b, _c;
     // PROPS
     const props = useThemeProps({
         props: inProps,
@@ -51,15 +59,35 @@ export function VideoConference(inProps) {
     const lastAutoFocusedScreenShareTrack = React.useRef(null);
     // HOOKS
     const scUserContext = useSCUser();
+    const [blurEnabled, setBlurEnabled] = React.useState(isClientSideRendering() ? ((_a = window === null || window === void 0 ? void 0 : window.localStorage) === null || _a === void 0 ? void 0 : _a.getItem(CHOICE_VIDEO_BLUR_EFFECT)) === 'true' : false);
+    const [processorPending, setProcessorPending] = React.useState(false);
     const tracks = useTracks([
         { source: Track.Source.Camera, withPlaceholder: true },
         { source: Track.Source.ScreenShare, withPlaceholder: false }
     ], { updateOnlyOn: [RoomEvent.ActiveSpeakersChanged], onlySubscribed: false });
+    const tracksNoParticipants = useMemo(() => tracks.filter((t) => t.participant.name === scUserContext.user.username || t.participant.name === speakerFocused.username || t.source === 'screen_share'), [tracks, scUserContext.user]);
+    const handleBlur = React.useCallback((event) => {
+        var _a, _b;
+        if (event.target) {
+            if ('checked' in event.target) {
+                setBlurEnabled((_a = event.target) === null || _a === void 0 ? void 0 : _a.checked);
+            }
+            else {
+                setBlurEnabled((enabled) => !enabled);
+            }
+        }
+        else {
+            setBlurEnabled((enabled) => !enabled);
+        }
+        (_b = window === null || window === void 0 ? void 0 : window.localStorage) === null || _b === void 0 ? void 0 : _b.setItem(CHOICE_VIDEO_BLUR_EFFECT, (!blurEnabled).toString());
+    }, [setBlurEnabled, blurEnabled]);
     const participants = useParticipants();
     const layoutContext = useCreateLayoutContext();
     const screenShareTracks = tracks.filter(isTrackReference).filter((track) => track.publication.source === Track.Source.ScreenShare);
-    const focusTrack = (_a = usePinnedTracks(layoutContext)) === null || _a === void 0 ? void 0 : _a[0];
+    const focusTrack = (_b = usePinnedTracks(layoutContext)) === null || _b === void 0 ? void 0 : _b[0];
     const carouselTracks = tracks.filter((track) => !isEqualTrackRef(track, focusTrack));
+    const { cameraTrack } = useLocalParticipant();
+    const { enqueueSnackbar } = useSnackbar();
     useLivestreamCheck();
     /**
      * widgetUpdate
@@ -115,7 +143,7 @@ export function VideoConference(inProps) {
         }
     }, [
         screenShareTracks.map((ref) => `${ref.publication.trackSid}_${ref.publication.isSubscribed}`).join(),
-        (_b = focusTrack === null || focusTrack === void 0 ? void 0 : focusTrack.publication) === null || _b === void 0 ? void 0 : _b.trackSid,
+        (_c = focusTrack === null || focusTrack === void 0 ? void 0 : focusTrack.publication) === null || _c === void 0 ? void 0 : _c.trackSid,
         tracks,
         participants,
         speakerFocused
@@ -138,10 +166,37 @@ export function VideoConference(inProps) {
             }
         }
     }, [tracks, participants, speakerFocused]);
-    return (_jsxs(Root, Object.assign({ className: classNames(className, classes.root, 'lk-video-conference') }, rest, { 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: hideParticipantsList ? (_jsx(FocusLayoutContainerNoParticipants, { children: focusTrack && _jsx(FocusLayout, { trackRef: focusTrack }) })) : (_jsxs(FocusLayoutContainer, { children: [_jsx(CarouselLayout, Object.assign({ tracks: carouselTracks }, { children: _jsx(ParticipantTile, {}) })), focusTrack && _jsx(FocusLayout, { trackRef: focusTrack })] })) }))), _jsx(ControlBar, { controls: Object.assign({
+    useEffect(() => {
+        var _a;
+        const localCamTrack = cameraTrack === null || cameraTrack === void 0 ? void 0 : cameraTrack.track;
+        if (localCamTrack) {
+            setProcessorPending(true);
+            try {
+                if (blurEnabled && !localCamTrack.getProcessor()) {
+                    localCamTrack.setProcessor(BackgroundBlur(20));
+                }
+                else if (!blurEnabled) {
+                    localCamTrack.stopProcessor();
+                }
+            }
+            catch (e) {
+                console.log(e);
+                setBlurEnabled(false);
+                (_a = window === null || window === void 0 ? void 0 : window.localStorage) === null || _a === void 0 ? void 0 : _a.setItem(CHOICE_VIDEO_BLUR_EFFECT, false.toString());
+                enqueueSnackbar(_jsx(FormattedMessage, { id: "ui.liveStreamRoom.errorApplyVideoEffect", defaultMessage: "ui.contributionActionMenu.errorApplyVideoEffect" }), {
+                    variant: 'warning',
+                    autoHideDuration: 3000
+                });
+            }
+            finally {
+                setProcessorPending(false);
+            }
+        }
+    }, [blurEnabled, cameraTrack]);
+    return (_jsxs(Root, Object.assign({ className: classNames(className, classes.root, 'lk-video-conference') }, rest, { 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: hideParticipantsList ? tracksNoParticipants : tracks }, { children: _jsx(ParticipantTile, {}) })) }))) : (_jsx("div", Object.assign({ className: "lk-focus-layout-wrapper" }, { children: hideParticipantsList ? (_jsx(FocusLayoutContainerNoParticipants, { children: focusTrack && _jsx(FocusLayout, { trackRef: focusTrack }) })) : (_jsxs(FocusLayoutContainer, { children: [carouselTracks.length ? (_jsx(CarouselLayout, Object.assign({ tracks: carouselTracks }, { children: _jsx(ParticipantTile, {}) }))) : (_jsx(NoParticipants, {})), focusTrack && _jsx(FocusLayout, { trackRef: focusTrack })] })) }))), _jsx(ControlBar, { controls: Object.assign({
                                     chat: !disableChat,
                                     microphone: !disableMicrophone,
                                     camera: !disableCamera,
                                     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, {})] })));
+                                }, { settings: true }) })] })), !disableChat && (_jsx(Chat, { style: { display: widgetState.showChat ? 'grid' : 'none' }, messageFormatter: chatMessageFormatter, messageEncoder: chatMessageEncoder, messageDecoder: chatMessageDecoder })), _jsxs("div", Object.assign({ className: "lk-settings-menu-modal", style: { display: widgetState.showSettings ? 'block' : 'none' } }, { children: [_jsx(IconButton, Object.assign({ className: "lk-settings-menu-modal-icon-close", onClick: () => { var _a, _b; return (_b = layoutContext === null || layoutContext === void 0 ? void 0 : (_a = layoutContext.widget).dispatch) === null || _b === void 0 ? void 0 : _b.call(_a, { msg: 'toggle_settings' }); } }, { children: _jsx(Icon, { children: "close" }) })), SettingsComponent ? (_jsx(SettingsComponent, {})) : (_jsx(_Fragment, { children: _jsx(LiveStreamSettingsMenu, { onlyContentMenu: true, actionBlurDisabled: !cameraTrack && !disableCamera, blurEnabled: blurEnabled, handleBlur: handleBlur }) }))] }))] }))), _jsx(RoomAudioRenderer, {}), _jsx(ConnectionStateToast, {})] })));
 }

package/lib/esm/constants/LiveStream.d.ts

@@ -1,3 +1,4 @@
 export declare const LIVE_STREAM_TITLE_MAX_LENGTH = 100;
 export declare const LIVE_STREAM_SLUG_MAX_LENGTH = 50;
 export declare const LIVE_STREAM_DESCRIPTION_MAX_LENGTH = 500;
+export declare const CHOICE_VIDEO_BLUR_EFFECT = "lk-video-blur";

package/lib/esm/constants/LiveStream.js

@@ -1,3 +1,4 @@
 export const LIVE_STREAM_TITLE_MAX_LENGTH = 100;
 export const LIVE_STREAM_SLUG_MAX_LENGTH = 50;
 export const LIVE_STREAM_DESCRIPTION_MAX_LENGTH = 500;
+export const CHOICE_VIDEO_BLUR_EFFECT = 'lk-video-blur';

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

@@ -20,7 +20,7 @@ export default function AutoPlayer(props) {
     const [played, setPlayed] = useState(0);
     useEffect(() => {
         if (played >= 10 && played <= 11) {
-            onVideoWatch();
+            onVideoWatch === null || onVideoWatch === void 0 ? void 0 : onVideoWatch();
         }
     }, [played]);
     /**

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

@@ -3,6 +3,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { styled } from '@mui/material/styles';
 import { useThemeProps } from '@mui/system';
 import { FormattedMessage } from 'react-intl';
+import { SCPreferences, useSCPreferences } from '@selfcommunity/react-core';
 import { Chip, Tooltip } from '@mui/material';
 import { useMemo } from 'react';
 import { SCCommunitySubscriptionTier } from '@selfcommunity/types';
@@ -28,6 +29,11 @@ export default function UpScalingTierBadge(inProps) {
         name: PREFIX
     });
     const { className, desiredTier = SCCommunitySubscriptionTier.GO } = props, rest = __rest(props, ["className", "desiredTier"]);
+    const { preferences } = useSCPreferences();
+    const isEnterpriseTier = useMemo(() => preferences &&
+        SCPreferences.CONFIGURATIONS_SUBSCRIPTION_TIER in preferences &&
+        preferences[SCPreferences.CONFIGURATIONS_SUBSCRIPTION_TIER].value &&
+        preferences[SCPreferences.CONFIGURATIONS_SUBSCRIPTION_TIER].value === SCCommunitySubscriptionTier.ENTERPRISE, [preferences]);
     const tooltipMsg = useMemo(() => {
         let _msg = _jsx(FormattedMessage, { id: "ui.upScalingTierBadge.goFeature", defaultMessage: "ui.upScalingTierBadge.goFeature" });
         switch (desiredTier) {
@@ -56,5 +62,8 @@ export default function UpScalingTierBadge(inProps) {
         }
         return _label;
     }, [desiredTier]);
+    if (desiredTier === SCCommunitySubscriptionTier.ENTERPRISE && isEnterpriseTier) {
+        return null;
+    }
     return (_jsx(Root, Object.assign({ classes: { root: classNames(className, classes.root) }, title: tooltipMsg, placement: "top" }, rest, { children: _jsx(Badge, { color: "secondary", size: "small", label: badgeLabel, className: classes.badge }) })));
 }

package/lib/esm/utils/contribution.js

@@ -51,8 +51,7 @@ export function getContributionSnippet(obj) {
  * @param handleUrl Func that handle urls
  */
 export function getContributionHtml(html, handleUrl) {
-    const _html = html.replace(/<p\b[^>]*>(.*?)<\/p>/g, (match, content) => content);
-    return _html.replace(/<mention.*? id="([0-9]+)"{1}.*?>@([a-z\d_-]+)<\/mention>/gi, (match, id, username) => {
+    return html.replace(/<mention.*? id="([0-9]+)"{1}.*?>@([a-z\d_-]+)<\/mention>/gi, (match, id, username) => {
         return `<a href='${handleUrl(SCRoutes.USER_PROFILE_ROUTE_NAME, { id, username })}'>@${username}</a>`;
     });
 }