@selfcommunity/react-ui 0.8.0-live.42 → 0.8.0-live.44

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

@@ -1,7 +1,5 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-nocheck
 import { Box, CircularProgress } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import { useThemeProps } from '@mui/system';
@@ -9,9 +7,7 @@ import { useSCPreferences, useSCUser } from '@selfcommunity/react-core';
 import classNames from 'classnames';
 import { PREFIX } from './constants';
 import { ConnectionState, formatChatMessageLinks, LiveKitRoom, VideoConference } from '@livekit/components-react';
-import { ExternalE2EEKeyProvider, VideoPresets, Room, DeviceUnsupportedError } from 'livekit-client';
-import { useCallback, useEffect, useMemo, useState } from 'react';
-import { decodePassphrase } from '../../../utils/liveStream';
+import { useCallback, useMemo, useState } from 'react';
 import RecordingIndicator from './RecordingIndicator';
 import { defaultUserChoices } from '@livekit/components-core';
 import { defaultVideoOptions } from '../constants';
@@ -58,16 +54,15 @@ export default function LiveStreamVideoConference(inProps) {
     const scUserContext = useSCUser();
     const { preferences, features } = useSCPreferences();
     // Passphrase
-    const e2eePassphrase = typeof window !== 'undefined' && decodePassphrase(location.hash.substring(1));
+    // const e2eePassphrase = typeof window !== 'undefined' && decodePassphrase(location.hash.substring(1));
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore
-    const worker = typeof window !== 'undefined' && e2eePassphrase && new Worker(new URL('livekit-client/e2ee-worker', import.meta.url));
-    const e2eeEnabled = !!(e2eePassphrase && worker);
-    const keyProvider = new ExternalE2EEKeyProvider();
-    const [e2eeSetupComplete, setE2eeSetupComplete] = useState(false);
-    const [liveActive, setLiveActive] = useState(false);
+    // const worker = typeof window !== 'undefined' && e2eePassphrase && new Worker(new URL('livekit-client/e2ee-worker', import.meta.url));
+    // const e2eeEnabled = !!(e2eePassphrase && worker);
+    // const keyProvider = new ExternalE2EEKeyProvider();
+    const [e2eeSetupComplete, setE2eeSetupComplete] = useState(true);
+    const [liveActive, setLiveActive] = useState(true);
     const [error, setError] = useState(null);
-    const liveStreamRoomMaxParticipants = 25;
     /* const liveStreamRoomMaxParticipants = useMemo(
           () =>
               preferences &&
@@ -76,76 +71,74 @@ export default function LiveStreamVideoConference(inProps) {
           [preferences]
       ); */
     // Room options
-    const roomOptions = useMemo(() => {
-        var _a, _b;
-        let videoCodec = options.codec ? options.codec : defaultVideoOptions.codec;
-        if (e2eeEnabled && (videoCodec === 'av1' || videoCodec === 'vp9')) {
-            videoCodec = undefined;
-        }
-        return {
-            // emptyTimeout: 3 * 60, // 3 minutes
-            // maxParticipants: liveStreamRoomMaxParticipants,
-            videoCaptureDefaults: {
-                deviceId: (_a = userChoices.videoDeviceId) !== null && _a !== void 0 ? _a : undefined,
-                resolution: options.hq ? VideoPresets.h2160 : VideoPresets.h720
-            },
-            publishDefaults: {
-                dtx: false,
-                videoSimulcastLayers: options.hq ? [VideoPresets.h1080, VideoPresets.h720] : [VideoPresets.h540, VideoPresets.h216],
-                red: !e2eeEnabled,
-                videoCodec
-            },
-            audioCaptureDefaults: {
-                deviceId: (_b = userChoices.audioDeviceId) !== null && _b !== void 0 ? _b : undefined
-            },
-            adaptiveStream: { pixelDensity: 'screen' },
-            dynacast: true,
-            e2ee: e2eeEnabled
-                ? {
-                    keyProvider,
-                    worker
-                }
-                : undefined
-        };
-    }, [liveStreamRoomMaxParticipants, userChoices, options.hq, options.codec]);
+    /* const roomOptions = useMemo((): RoomOptions => {
+      let videoCodec: VideoCodec | undefined = options.codec ? options.codec : defaultVideoOptions.codec;
+      if (e2eeEnabled && (videoCodec === 'av1' || videoCodec === 'vp9')) {
+        videoCodec = undefined;
+      }
+      return {
+        // emptyTimeout: 3 * 60, // 3 minutes
+        // maxParticipants: liveStreamRoomMaxParticipants,
+        videoCaptureDefaults: {
+          deviceId: userChoices.videoDeviceId ?? undefined,
+          resolution: options.hq ? VideoPresets.h2160 : VideoPresets.h720
+        },
+        publishDefaults: {
+          dtx: false,
+          videoSimulcastLayers: options.hq ? [VideoPresets.h1080, VideoPresets.h720] : [VideoPresets.h540, VideoPresets.h216],
+          red: !e2eeEnabled,
+          videoCodec
+        },
+        audioCaptureDefaults: {
+          deviceId: userChoices.audioDeviceId ?? undefined
+        },
+        adaptiveStream: {pixelDensity: 'screen'},
+        dynacast: true,
+        e2ee: e2eeEnabled
+          ? {
+              keyProvider,
+              worker
+            }
+          : undefined
+      };
+    }, [liveStreamRoomMaxParticipants, userChoices, options.hq, options.codec]); */
     // Create room - only initial
-    const room = useMemo(() => {
-        if (liveStreamRoomMaxParticipants) {
-            return new Room(roomOptions);
-        }
-    }, [liveStreamRoomMaxParticipants]);
+    /* const room = useMemo(() => {
+      const room = new Room();
+      return new Room(roomOptions);
+    }, [liveStreamRoomMaxParticipants]); */
     const connectOptions = useMemo(() => {
         return {
             autoSubscribe: true
         };
     }, []);
-    useEffect(() => {
-        if (room) {
-            if (e2eeEnabled) {
-                keyProvider
-                    .setKey(decodePassphrase(e2eePassphrase))
-                    .then(() => {
-                    room.setE2EEEnabled(true).catch((e) => {
-                        if (e instanceof DeviceUnsupportedError) {
-                            alert(`You're trying to join an encrypted meeting, but your browser does not support it. Please update it to the latest version and try again.`);
-                            console.error(e);
-                        }
-                        else {
-                            throw e;
-                        }
-                    });
-                })
-                    .then(() => {
-                    setE2eeSetupComplete(true);
-                    setLiveActive(true);
-                });
-            }
-            else {
-                setE2eeSetupComplete(true);
-                setLiveActive(true);
-            }
+    /* useEffect(() => {
+      if (room) {
+        if (e2eeEnabled) {
+          keyProvider
+            .setKey(decodePassphrase(e2eePassphrase))
+            .then(() => {
+              room.setE2EEEnabled(true).catch((e) => {
+                if (e instanceof DeviceUnsupportedError) {
+                  alert(
+                    `You're trying to join an encrypted meeting, but your browser does not support it. Please update it to the latest version and try again.`
+                  );
+                  console.error(e);
+                } else {
+                  throw e;
+                }
+              });
+            })
+            .then(() => {
+              setE2eeSetupComplete(true);
+              setLiveActive(true);
+            });
+        } else {
+          setE2eeSetupComplete(true);
+          setLiveActive(true);
         }
-    }, [e2eeEnabled, room, e2eePassphrase]);
+      }
+    }, [e2eeEnabled, room, e2eePassphrase]); */
     // HANDLERS
     /**
      * Handle on leave
@@ -179,5 +172,5 @@ export default function LiveStreamVideoConference(inProps) {
     /**
      * Renders root object
      */
-    return (_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: room && liveActive && !error ? (_jsx(_Fragment, { children: _jsxs(LiveKitRoom, Object.assign({ connect: Boolean(e2eeSetupComplete && liveActive && room), room: room, token: connectionDetails['participantToken'], serverUrl: connectionDetails['serverUrl'], connectOptions: connectOptions, video: userChoices.videoEnabled, audio: userChoices.audioEnabled, onDisconnected: handleOnLeave, onEncryptionError: handleEncryptionError, onError: handleError }, LiveKitRoomComponentsProps, { children: [_jsx(VideoConference, { chatMessageFormatter: formatChatMessageLinks }), _jsx(RecordingIndicator, {}), _jsx(ConnectionState, {})] })) })) : (_jsx(_Fragment, { children: error ? error : liveActive === false ? _jsx(_Fragment, { children: "Grazie!" }) : _jsx(CircularProgress, {}) })) })));
+    return (_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: liveActive && !error ? (_jsx(_Fragment, { children: _jsxs(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 }, LiveKitRoomComponentsProps, { children: [_jsx(VideoConference, { chatMessageFormatter: formatChatMessageLinks }), _jsx(RecordingIndicator, {}), _jsx(ConnectionState, {})] })) })) : (_jsx(_Fragment, { children: error ? error : liveActive === false ? _jsx(_Fragment, { children: "Grazie!" }) : _jsx(CircularProgress, {}) })) })));
 }

package/lib/esm/components/NavigationMenuIconButton/NavigationMenuDrawer.js

@@ -9,7 +9,7 @@ import ScrollContainer from '../../shared/ScrollContainer';
 import DefaultDrawerContent from './DefaultDrawerContent';
 import DefaultHeaderContent from './DefaultHeaderContent';
 import CreateLiveStreamButton from '../CreateLiveStreamButton';
-import { useSCPreferences } from '@selfcommunity/react-core';
+import { useSCPreferences, useSCUser } from '@selfcommunity/react-core';
 const PREFIX = 'SCNavigationMenuDrawer';
 const classes = {
     root: `${PREFIX}-root`,
@@ -36,6 +36,7 @@ export default function NavigationMenuDrawer(inProps) {
     });
     const { className = null, showDrawerHeader = true, drawerHeaderContent = _jsx(DefaultHeaderContent, {}), drawerContent = _jsx(DefaultDrawerContent, {}), showDrawerFooterContent = true, drawerFooterContent = null, ScrollContainerProps = {}, CreateLiveStreamButtonComponentProps = {}, open, onClose } = props, rest = __rest(props, ["className", "showDrawerHeader", "drawerHeaderContent", "drawerContent", "showDrawerFooterContent", "drawerFooterContent", "ScrollContainerProps", "CreateLiveStreamButtonComponentProps", "open", "onClose"]);
     const { preferences, features } = useSCPreferences();
+    const scUserContext = useSCUser();
     // TODO
     const liveStreamEnabled = true;
     /* const liveStreamEnabled = useMemo(