@100mslive/roomkit-react 0.3.22-alpha.3 → 0.3.22-alpha.4

package/package.json

@@ -10,7 +10,7 @@
     "prebuilt",
     "roomkit"
   ],
-  "version": "0.3.22-alpha.3",
+  "version": "0.3.22-alpha.4",
   "author": "100ms",
   "license": "MIT",
   "repository": {
@@ -75,12 +75,12 @@
     "react": ">=17.0.2 <19.0.0"
   },
   "dependencies": {
-    "@100mslive/hls-player": "0.3.22-alpha.3",
+    "@100mslive/hls-player": "0.3.22-alpha.4",
     "@100mslive/hms-noise-cancellation": "0.0.1",
-    "@100mslive/hms-virtual-background": "1.13.22-alpha.3",
-    "@100mslive/hms-whiteboard": "0.0.12-alpha.3",
-    "@100mslive/react-icons": "0.10.22-alpha.3",
-    "@100mslive/react-sdk": "0.10.22-alpha.3",
+    "@100mslive/hms-virtual-background": "1.13.22-alpha.4",
+    "@100mslive/hms-whiteboard": "0.0.12-alpha.4",
+    "@100mslive/react-icons": "0.10.22-alpha.4",
+    "@100mslive/react-sdk": "0.10.22-alpha.4",
     "@100mslive/types-prebuilt": "0.12.12",
     "@emoji-mart/data": "^1.0.6",
     "@emoji-mart/react": "^1.0.1",
@@ -99,7 +99,7 @@
     "@radix-ui/react-tabs": "1.0.0",
     "@radix-ui/react-toast": "1.0.0",
     "@radix-ui/react-tooltip": "1.0.6",
-    "@stitches/react": "1.3.1-1",
+    "@stitches/react": "^1.2.8",
     "emoji-mart": "^5.2.2",
     "eventemitter2": "^6.4.9",
     "lodash.merge": "^4.6.2",
@@ -117,5 +117,5 @@
     "uuid": "^8.3.2",
     "worker-timers": "^7.0.40"
   },
-  "gitHead": "a8567a9c3235539b3b59e687337b344f22b5375c"
+  "gitHead": "1a7a504437501f10505fd18c1a06a0cc8c037fd9"
 }

package/src/Avatar/Avatar.tsx

@@ -13,7 +13,7 @@ export const StyledAvatar = styled('div', {
   ...flexCenter,
   color: '$colors$on_primary_high',
   fontFamily: '$sans',
-  aspectRatio: '1',
+  aspectRatio: 1,
   fontWeight: 600,
   fontSize: '$space$9',
   variants: {

package/src/Popover/Popover.stories.tsx

@@ -32,7 +32,7 @@ const Template: ComponentStory<typeof Popover.Root> = () => (
         <Button
           variant="standard"
           css={{
-            aspectRatio: '1',
+            aspectRatio: 1,
             r: '$round',
             p: '$2 $2',
             bg: '$background_default',

package/src/Prebuilt/App.tsx

@@ -13,12 +13,14 @@ import {
 import { AppData } from './components/AppData/AppData';
 // @ts-ignore: No implicit Any
 import AuthToken from './components/AuthToken';
+import { ConferenceScreen } from './components/ConferenceScreen';
 // @ts-ignore: No implicit Any
 import { ErrorBoundary } from './components/ErrorBoundary';
 // @ts-ignore: No implicit Any
 import { Init } from './components/init/Init';
 // @ts-ignore: No implicit Any
 import { KeyboardHandler } from './components/Input/KeyboardInputManager';
+import { LeaveScreen } from './components/LeaveScreen';
 import { MwebLandscapePrompt } from './components/MwebLandscapePrompt';
 import { Notifications } from './components/Notifications';
 import { PIPProvider } from './components/PIP/PIPProvider';
@@ -48,12 +50,6 @@ import {
 import { FeatureFlags } from './services/FeatureFlags';
 // @ts-ignore: No implicit Any
 import { DEFAULT_PORTAL_CONTAINER } from './common/constants';
-const LeaveScreen = React.lazy(() =>
-  import('./components/LeaveScreen').then(module => ({ default: module.LeaveScreen })),
-);
-const ConferenceScreen = React.lazy(() =>
-  import('./components/ConferenceScreen').then(module => ({ default: module.ConferenceScreen })),
-);
 
 export type HMSPrebuiltOptions = {
   userName?: string;

package/src/Prebuilt/components/Chat/Chat.tsx

@@ -1,4 +1,4 @@
-import React, { MutableRefObject, Suspense, useCallback, useRef } from 'react';
+import React, { MutableRefObject, useCallback, useRef } from 'react';
 import { useMedia } from 'react-use';
 import { VariableSizeList } from 'react-window';
 import { selectSessionStore, selectUnreadHMSMessagesCount } from '@100mslive/hms-video-store';
@@ -8,6 +8,10 @@ import { ChevronDownIcon } from '@100mslive/react-icons';
 import { Button } from '../../../Button';
 import { Box, Flex } from '../../../Layout';
 import { config as cssConfig } from '../../../Theme';
+// @ts-ignore: No implicit any
+import { EmojiReaction } from '../EmojiReaction';
+import { MoreSettings } from '../MoreSettings/MoreSettings';
+import { RaiseHand } from '../RaiseHand';
 import { ChatBody } from './ChatBody';
 import { ChatFooter } from './ChatFooter';
 import { ChatBlocked, ChatPaused } from './ChatStates';
@@ -17,12 +21,6 @@ import { useSidepaneResetOnLayoutUpdate } from '../AppData/useSidepaneResetOnLay
 import { useIsPeerBlacklisted } from '../hooks/useChatBlacklist';
 import { useLandscapeHLSStream, useMobileHLSStream } from '../../common/hooks';
 import { SESSION_STORE_KEY, SIDE_PANE_OPTIONS } from '../../common/constants';
-const MoreSettings = React.lazy(() =>
-  import('../MoreSettings/MoreSettings').then(module => ({ default: module.MoreSettings })),
-);
-const RaiseHand = React.lazy(() => import('../RaiseHand').then(module => ({ default: module.RaiseHand })));
-// @ts-ignore: No implicit any
-const EmojiReaction = React.lazy(() => import('../EmojiReaction').then(module => ({ default: module.EmojiReaction })));
 
 export const Chat = () => {
   const { elements, screenType } = useRoomLayoutConferencingScreen();
@@ -67,10 +65,10 @@ export const Chat = () => {
         <ChatPaused />
         <ChatBlocked />
         {streaming && (!isChatEnabled || isLocalPeerBlacklisted) && (
-          <Suspense fallback={<></>}>
+          <>
             <RaiseHand css={{ bg: '$surface_default' }} />
             <MoreSettings elements={elements} screenType={screenType} />
-          </Suspense>
+          </>
         )}
       </Flex>
       {isMobile && elements?.chat?.is_overlay && !streaming ? <PinnedMessage /> : null}
@@ -131,9 +129,7 @@ export const Chat = () => {
               .otherwise(() => ({})),
           }}
         >
-          <Suspense fallback={<></>}>
-            <EmojiReaction />
-          </Suspense>
+          <EmojiReaction />
         </Box>
       )}
     </Flex>

package/src/Prebuilt/components/Chat/ChatFooter.tsx

@@ -1,6 +1,6 @@
 import React, { ReactNode, useCallback, useEffect, useRef, useState } from 'react';
 import { useMedia } from 'react-use';
-import data from '@emoji-mart/data/sets/14/apple.json';
+import data from '@emoji-mart/data';
 import Picker from '@emoji-mart/react';
 import { HMSException, selectLocalPeer, useHMSActions, useHMSStore } from '@100mslive/react-sdk';
 import { EmojiIcon, PauseCircleIcon, SendIcon, VerticalMenuIcon } from '@100mslive/react-icons';

package/src/Prebuilt/components/Notifications/Notifications.tsx

@@ -1,32 +1,60 @@
 /* eslint-disable no-case-declarations */
-import React, { useCallback } from 'react';
-import { HMSRoleChangeRequest, HMSRoomState, selectRoomState, useCustomEvent, useHMSStore } from '@100mslive/react-sdk';
+import React, { useCallback, useEffect } from 'react';
+import {
+  HMSNotificationTypes,
+  HMSRoleChangeRequest,
+  HMSRoomState,
+  selectIsLocalScreenShared,
+  selectLocalPeerID,
+  selectPeerNameByID,
+  selectRoomState,
+  useAwayNotifications,
+  useCustomEvent,
+  useHMSNotifications,
+  useHMSStore,
+  useHMSVanillaStore,
+} from '@100mslive/react-sdk';
+import { GroupIcon } from '@100mslive/react-icons';
+import { Box, Button } from '../../..';
+import { useRoomLayout, useUpdateRoomLayout } from '../../provider/roomLayoutProvider';
 // @ts-ignore: No implicit Any
 import { ToastManager } from '../Toast/ToastManager';
 import { AutoplayBlockedModal } from './AutoplayBlockedModal';
 import { ChatNotifications } from './ChatNotifications';
-import { DeviceChangeNotifications } from './DeviceChangeNotifications';
 import { DeviceInUseError } from './DeviceInUseError';
-import { ErrorNotifications } from './ErrorNotifications';
 import { HandRaisedNotifications } from './HandRaisedNotifications';
 import { InitErrorModal } from './InitErrorModal';
-import { MessageNotifications } from './MessageNotifications';
 import { PeerNotifications } from './PeerNotifications';
 import { PermissionErrorNotificationModal } from './PermissionErrorModal';
-import { PollNotificationModal } from './PollNotificationModal';
 import { ReconnectNotifications } from './ReconnectNotifications';
-import { RoleChangeNotification } from './RoleChangeNotification';
 import { TrackBulkUnmuteModal } from './TrackBulkUnmuteModal';
 import { TrackNotifications } from './TrackNotifications';
 import { TrackUnmuteModal } from './TrackUnmuteModal';
 import { TranscriptionNotifications } from './TranscriptionNotifications';
+import { useRoomLayoutConferencingScreen } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
 // @ts-ignore: No implicit Any
-import { useIsNotificationDisabled } from '../AppData/useUISettings';
+import { usePollViewToggle } from '../AppData/useSidepane';
+// @ts-ignore: No implicit Any
+import { useIsNotificationDisabled, useSubscribedNotifications } from '../AppData/useUISettings';
+import { usePIPWindow } from '../PIP/usePIPWindow';
 import { ROLE_CHANGE_DECLINED } from '../../common/constants';
 
+const pollToastKey: Record<string, string> = {};
+
 export function Notifications() {
+  const localPeerID = useHMSStore(selectLocalPeerID);
+  const notification = useHMSNotifications();
+  const subscribedNotifications = useSubscribedNotifications() || {};
   const roomState = useHMSStore(selectRoomState);
+  const updateRoomLayoutForRole = useUpdateRoomLayout();
   const isNotificationDisabled = useIsNotificationDisabled();
+  const screenProps = useRoomLayoutConferencingScreen();
+  const vanillaStore = useHMSVanillaStore();
+  const togglePollView = usePollViewToggle();
+  const { showNotification } = useAwayNotifications();
+  const amIScreenSharing = useHMSStore(selectIsLocalScreenShared);
+  const logoURL = useRoomLayout()?.logo?.url;
+  const { pipWindow } = usePIPWindow();
 
   const handleRoleChangeDenied = useCallback((request: HMSRoleChangeRequest & { peerName: string }) => {
     ToastManager.addToast({
@@ -37,6 +65,129 @@ export function Notifications() {
 
   useCustomEvent({ type: ROLE_CHANGE_DECLINED, onEvent: handleRoleChangeDenied });
 
+  useEffect(() => {
+    if (!notification || isNotificationDisabled) {
+      return;
+    }
+    switch (notification.type) {
+      case HMSNotificationTypes.NAME_UPDATED:
+        console.log(notification.data.id + ' changed their name to ' + notification.data.name);
+        break;
+      case HMSNotificationTypes.ERROR:
+        if (notification.data?.isTerminal && notification.data?.action !== 'INIT') {
+          if ([500, 6008].includes(notification.data?.code)) {
+            ToastManager.addToast({
+              title: `Error: ${notification.data?.message}`,
+            });
+          } else if (notification.data?.message === 'role limit reached') {
+            ToastManager.addToast({
+              title: 'The room is currently full, try joining later',
+              close: true,
+              icon: (
+                <Box css={{ color: '$alert_error_default' }}>
+                  <GroupIcon />
+                </Box>
+              ),
+            });
+          } else {
+            ToastManager.addToast({
+              title:
+                notification.data?.message ||
+                'We couldn’t reconnect you. When you’re back online, try joining the room.',
+              close: false,
+            });
+          }
+          return;
+        }
+        // Autoplay error or user denied screen share (cancelled browser pop-up)
+        if (notification.data?.code === 3008 || notification.data?.code === 3001 || notification.data?.code === 3011) {
+          return;
+        }
+        if (notification.data?.action === 'INIT') {
+          return;
+        }
+        if (!subscribedNotifications.ERROR) return;
+        ToastManager.addToast({
+          title: `Error: ${notification.data?.message} - ${notification.data?.description}`,
+        });
+        break;
+      case HMSNotificationTypes.ROLE_UPDATED: {
+        if (notification.data?.isLocal && notification.data?.roleName) {
+          ToastManager.addToast({
+            title: `You are now a ${notification.data.roleName}`,
+          });
+          updateRoomLayoutForRole?.(notification.data.roleName);
+        }
+        break;
+      }
+      case HMSNotificationTypes.CHANGE_TRACK_STATE_REQUEST:
+        const track = notification.data?.track;
+        if (!notification.data.enabled) {
+          ToastManager.addToast({
+            title: `Your ${track.source} ${track.type} was muted by
+                ${notification.data.requestedBy?.name}.`,
+          });
+        }
+        break;
+      case HMSNotificationTypes.REMOVED_FROM_ROOM:
+      case HMSNotificationTypes.ROOM_ENDED:
+        ToastManager.addToast({
+          title: `${notification.message}. 
+              ${notification.data.reason && `Reason: ${notification.data.reason}`}`,
+        });
+        break;
+      case HMSNotificationTypes.DEVICE_CHANGE_UPDATE:
+        ToastManager.addToast({
+          title: notification.message,
+        });
+        break;
+
+      case HMSNotificationTypes.POLL_STARTED:
+        if (notification.data.startedBy !== localPeerID && screenProps.screenType !== 'hls_live_streaming') {
+          const pollStartedBy = vanillaStore.getState(selectPeerNameByID(notification.data.startedBy)) || 'Participant';
+
+          const pollToastID = ToastManager.addToast({
+            title: `${pollStartedBy} started a ${notification.data.type}: ${notification.data.title}`,
+            action: (
+              <Button
+                onClick={() => togglePollView(notification.data.id)}
+                variant="standard"
+                css={{
+                  backgroundColor: '$surface_bright',
+                  fontWeight: '$semiBold',
+                  color: '$on_surface_high',
+                  p: '$xs $md',
+                }}
+              >
+                {notification.data.type === 'quiz' ? 'Answer' : 'Vote'}
+              </Button>
+            ),
+            duration: Infinity,
+          });
+          pollToastKey[notification.data.id] = pollToastID;
+        }
+        break;
+      case HMSNotificationTypes.POLL_STOPPED:
+        const pollID = notification?.data.id;
+        if (pollID && pollToastKey?.[pollID]) {
+          ToastManager.removeToast(pollToastKey?.[notification.data.id]);
+          delete pollToastKey[notification?.data.id];
+        }
+        break;
+      case HMSNotificationTypes.NEW_MESSAGE:
+        if (amIScreenSharing && !notification.data?.ignored && !pipWindow) {
+          showNotification(`New message from ${notification.data.senderName}`, {
+            body: notification.data.message,
+            icon: logoURL,
+          });
+        }
+        break;
+      default:
+        break;
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [notification, subscribedNotifications.ERROR, subscribedNotifications.METADATA_UPDATED]);
+
   if (isNotificationDisabled) {
     return null;
   }
@@ -47,12 +198,7 @@ export function Notifications() {
       <TrackBulkUnmuteModal />
       <TrackNotifications />
       {roomState === HMSRoomState.Connected ? <PeerNotifications /> : null}
-      <RoleChangeNotification />
-      <PollNotificationModal />
-      <MessageNotifications />
-      <DeviceChangeNotifications />
       <ReconnectNotifications />
-      <ErrorNotifications />
       <AutoplayBlockedModal />
       <PermissionErrorNotificationModal />
       <InitErrorModal />

package/src/Prebuilt/components/Notifications/PeerNotifications.tsx

@@ -7,11 +7,7 @@ import { useSetSubscribedChatSelector, useSubscribedNotifications } from '../App
 // @ts-ignore: No implicit Any
 import { CHAT_SELECTOR, SUBSCRIBED_NOTIFICATIONS } from '../../common/constants';
 
-const notificationTypes = [
-  HMSNotificationTypes.PEER_JOINED,
-  HMSNotificationTypes.PEER_LEFT,
-  HMSNotificationTypes.NAME_UPDATED,
-];
+const notificationTypes = [HMSNotificationTypes.PEER_JOINED, HMSNotificationTypes.PEER_LEFT];
 
 export const PeerNotifications = () => {
   const notification = useHMSNotifications(notificationTypes);
@@ -39,14 +35,11 @@ export const PeerNotifications = () => {
           return;
         }
         break;
-      case HMSNotificationTypes.NAME_UPDATED:
-        console.log(notification.data.id + ' changed their name to ' + notification.data.name);
-        return;
       default:
         return;
     }
     ToastBatcher.showToast({ notification });
-  }, [notification]);
+  }, [notification, isPeerJoinSubscribed, isPeerLeftSubscribed, selectedPeer.id, setPeerSelector]);
 
   return null;
 };

package/src/Prebuilt/components/Notifications/ReconnectNotifications.tsx

@@ -5,7 +5,11 @@ import { ToastConfig } from '../Toast/ToastConfig';
 // @ts-ignore: No implicit Any
 import { ToastManager } from '../Toast/ToastManager';
 
-const notificationTypes = [HMSNotificationTypes.RECONNECTED, HMSNotificationTypes.RECONNECTING];
+const notificationTypes = [
+  HMSNotificationTypes.RECONNECTED,
+  HMSNotificationTypes.RECONNECTING,
+  HMSNotificationTypes.ERROR,
+];
 let notificationId: string | null = null;
 
 export const ReconnectNotifications = () => {

package/src/Prebuilt/components/Notifications/TrackBulkUnmuteModal.tsx

@@ -9,16 +9,14 @@ import { MicOnIcon } from '@100mslive/react-icons';
 // @ts-ignore: No implicit Any
 import { RequestDialog } from '../../primitives/DialogContent';
 
-const notificationTypes = [
-  HMSNotificationTypes.CHANGE_MULTI_TRACK_STATE_REQUEST,
-  HMSNotificationTypes.ROOM_ENDED,
-  HMSNotificationTypes.REMOVED_FROM_ROOM,
-];
-
 export const TrackBulkUnmuteModal = () => {
   const hmsActions = useHMSActions();
   const [muteNotification, setMuteNotification] = useState<HMSChangeMultiTrackStateRequest | null>(null);
-  const notification = useHMSNotifications(notificationTypes);
+  const notification = useHMSNotifications([
+    HMSNotificationTypes.CHANGE_MULTI_TRACK_STATE_REQUEST,
+    HMSNotificationTypes.ROOM_ENDED,
+    HMSNotificationTypes.REMOVED_FROM_ROOM,
+  ]);
 
   useEffect(() => {
     switch (notification?.type) {

package/src/Prebuilt/components/Notifications/TrackNotifications.tsx

@@ -1,39 +1,17 @@
 import { useEffect } from 'react';
 import { HMSNotificationTypes, useHMSNotifications } from '@100mslive/react-sdk';
-// @ts-ignore: No implicit Any
-import { ToastManager } from '../Toast/ToastManager';
 
 const notificationTypes = [
   HMSNotificationTypes.TRACK_ADDED,
   HMSNotificationTypes.TRACK_REMOVED,
   HMSNotificationTypes.TRACK_MUTED,
   HMSNotificationTypes.TRACK_UNMUTED,
-  HMSNotificationTypes.CHANGE_TRACK_STATE_REQUEST,
 ];
-
 export const TrackNotifications = () => {
   const notification = useHMSNotifications(notificationTypes);
   useEffect(() => {
     if (notification) {
-      switch (notification.type) {
-        case HMSNotificationTypes.TRACK_ADDED:
-        case HMSNotificationTypes.TRACK_REMOVED:
-        case HMSNotificationTypes.TRACK_MUTED:
-        case HMSNotificationTypes.TRACK_UNMUTED:
-          console.debug(`[${notification.type}]`, notification);
-          break;
-        case HMSNotificationTypes.CHANGE_TRACK_STATE_REQUEST:
-          {
-            const track = notification.data?.track;
-            if (!notification.data.enabled) {
-              ToastManager.addToast({
-                title: `Your ${track.source} ${track.type} was muted by
-                  ${notification.data.requestedBy?.name}.`,
-              });
-            }
-          }
-          break;
-      }
+      console.debug(`[${notification.type}]`, notification);
     }
   }, [notification]);
 

package/src/Prebuilt/components/Notifications/TrackUnmuteModal.tsx

@@ -8,28 +8,20 @@ import {
 import { MicOnIcon } from '@100mslive/react-icons';
 // @ts-ignore: No implicit Any
 import { RequestDialog } from '../../primitives/DialogContent';
-// @ts-ignore: No implicit Any
-import { ToastManager } from '../Toast/ToastManager';
-
-const notificationTypes = [
-  HMSNotificationTypes.CHANGE_TRACK_STATE_REQUEST,
-  HMSNotificationTypes.ROOM_ENDED,
-  HMSNotificationTypes.REMOVED_FROM_ROOM,
-];
 
 export const TrackUnmuteModal = () => {
   const hmsActions = useHMSActions();
-  const notification = useHMSNotifications(notificationTypes);
+  const notification = useHMSNotifications([
+    HMSNotificationTypes.CHANGE_TRACK_STATE_REQUEST,
+    HMSNotificationTypes.ROOM_ENDED,
+    HMSNotificationTypes.REMOVED_FROM_ROOM,
+  ]);
   const [muteNotification, setMuteNotification] = useState<HMSChangeTrackStateRequest | null>(null);
 
   useEffect(() => {
     switch (notification?.type) {
       case HMSNotificationTypes.REMOVED_FROM_ROOM:
       case HMSNotificationTypes.ROOM_ENDED:
-        ToastManager.addToast({
-          title: `${notification.message}. 
-              ${notification.data.reason && `Reason: ${notification.data.reason}`}`,
-        });
         setMuteNotification(null);
         break;
       case HMSNotificationTypes.CHANGE_TRACK_STATE_REQUEST:

package/src/Prebuilt/components/StatsForNerds.jsx

@@ -5,11 +5,9 @@ import {
   selectLocalPeerID,
   selectPeersMap,
   selectTracksMap,
-  useHMSActions,
   useHMSStatsStore,
   useHMSStore,
 } from '@100mslive/react-sdk';
-import { Accordion } from '../../Accordion';
 import { HorizontalDivider } from '../../Divider';
 import { Dropdown } from '../../Dropdown';
 import { Label } from '../../Label';
@@ -29,8 +27,6 @@ export const StatsForNerds = ({ onOpenChange }) => {
     () => [{ id: 'local-peer', label: 'Local Peer Stats' }, ...tracksWithLabels],
     [tracksWithLabels],
   );
-  const hmsActions = useHMSActions();
-  const details = hmsActions.getDebugInfo();
   const [selectedStat, setSelectedStat] = useState(statsOptions[0]);
   const [showStatsOnTiles, setShowStatsOnTiles] = useSetUiSettings(UI_SETTINGS.showStatsOnTiles);
   const [open, setOpen] = useState(false);
@@ -50,7 +46,7 @@ export const StatsForNerds = ({ onOpenChange }) => {
         <Dialog.Content
           css={{
             width: 'min(500px, 95%)',
-            height: 'min(656px, 90%)',
+            maxHeight: '100%',
             overflowY: 'auto',
           }}
         >
@@ -74,7 +70,6 @@ export const StatsForNerds = ({ onOpenChange }) => {
             </Text>
           </Flex>
           {/* Select */}
-
           <Flex
             direction="column"
             css={{
@@ -124,9 +119,6 @@ export const StatsForNerds = ({ onOpenChange }) => {
           ) : (
             <TrackStats trackID={selectedStat.id} layer={selectedStat.layer} local={selectedStat.local} />
           )}
-          <Flex justify="start" gap={4} css={{ m: '$10 0', w: '100%' }}>
-            <DebugInfo details={details} />
-          </Flex>
         </Dialog.Content>
       </Dialog.Portal>
     </Dialog.Root>
@@ -237,29 +229,8 @@ const TrackStats = ({ trackID, layer, local }) => {
   );
 };
 
-const DebugInfo = ({ details }) => {
-  return (
-    <Accordion.Root type="single" collapsible css={{ w: '100%' }}>
-      <Accordion.Item value="Debug Info">
-        <Accordion.Header>
-          <Label variant="body2" css={{ c: '$on_surface_high' }}>
-            Debug Info
-          </Label>
-        </Accordion.Header>
-        <Accordion.Content>
-          <Flex css={{ flexWrap: 'wrap', mt: '$10', gap: '$10' }}>
-            <StatsRow css={{ w: '100%' }} label="Websocket URL" value={details?.websocketURL} />
-            <StatsRow css={{ w: '100%' }} label="Init Endpoint" value={details?.initEndpoint} />
-            <StatsRow css={{ w: '100%' }} label="Enabled flags" value={details?.enabledFlags?.join(', ')} />
-          </Flex>
-        </Accordion.Content>
-      </Accordion.Item>
-    </Accordion.Root>
-  );
-};
-
-const StatsRow = React.memo(({ label, value, css }) => (
-  <Box css={{ bg: '$surface_bright', w: 'calc(50% - $6)', p: '$8', r: '$3', ...css }}>
+const StatsRow = React.memo(({ label, value }) => (
+  <Box css={{ bg: '$surface_bright', w: 'calc(50% - $6)', p: '$8', r: '$3' }}>
     <Text
       variant="overline"
       css={{