@100mslive/roomkit-react 0.3.22-alpha.0 → 0.3.22-alpha.1

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

@@ -1,17 +1,39 @@
 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) {
-      console.debug(`[${notification.type}]`, 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;
+      }
     }
   }, [notification]);
 

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

@@ -8,20 +8,28 @@ 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([
-    HMSNotificationTypes.CHANGE_TRACK_STATE_REQUEST,
-    HMSNotificationTypes.ROOM_ENDED,
-    HMSNotificationTypes.REMOVED_FROM_ROOM,
-  ]);
+  const notification = useHMSNotifications(notificationTypes);
   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,9 +5,11 @@ 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';
@@ -27,6 +29,8 @@ 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);
@@ -46,7 +50,7 @@ export const StatsForNerds = ({ onOpenChange }) => {
         <Dialog.Content
           css={{
             width: 'min(500px, 95%)',
-            maxHeight: '100%',
+            height: 'min(656px, 90%)',
             overflowY: 'auto',
           }}
         >
@@ -70,6 +74,7 @@ export const StatsForNerds = ({ onOpenChange }) => {
             </Text>
           </Flex>
           {/* Select */}
+
           <Flex
             direction="column"
             css={{
@@ -119,6 +124,9 @@ 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>
@@ -229,8 +237,29 @@ const TrackStats = ({ trackID, layer, local }) => {
   );
 };
 
-const StatsRow = React.memo(({ label, value }) => (
-  <Box css={{ bg: '$surface_bright', w: 'calc(50% - $6)', p: '$8', r: '$3' }}>
+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 }}>
     <Text
       variant="overline"
       css={{

package/src/Prebuilt/components/VideoLayouts/ProminenceLayout.tsx

@@ -70,9 +70,9 @@ const SecondarySection = ({
             rootCSS={{
               padding: 0,
               maxWidth: 240,
-              aspectRatio: 16 / 9,
+              aspectRatio: '16 / 9',
               ...(hasSidebar ? { w: '100%' } : { h: '100%' }),
-              '@md': { aspectRatio: 1 },
+              '@md': { aspectRatio: '1' },
             }}
             objectFit="contain"
             {...tileLayoutProps}

package/src/Prebuilt/components/VirtualBackground/VBOption.tsx

@@ -25,7 +25,9 @@ const Root = ({
       bg: '$surface_bright',
       border: `4px solid ${isActive ? '$primary_default' : '$surface_dim'}`,
       cursor: 'pointer',
-      '&:hover': { border: '4px solid $primary_dim' },
+      '@media (hover:hover)': {
+        '&:hover': { border: '4px solid $primary_dim' },
+      },
       ...(mediaURL ? { height: '$20', backgroundImage: `url("${mediaURL}")`, backgroundSize: 'cover' } : {}),
     }}
     onClick={async () => {

package/src/Prebuilt/components/VirtualBackground/VBPicker.tsx

@@ -180,6 +180,9 @@ export const VBPicker = ({ backgroundMedia = [] }: { backgroundMedia: VirtualBac
               onClick: async () => {
                 await VBHandler.removeEffects();
                 hmsActions.setAppData(APP_DATA.background, HMSVirtualBackgroundTypes.NONE);
+                if (isMobile) {
+                  toggleVB();
+                }
               },
               supported: true,
             },
@@ -235,6 +238,9 @@ export const VBPicker = ({ backgroundMedia = [] }: { backgroundMedia: VirtualBac
             onClick: async () => {
               await VBHandler?.setBackground(mediaURL);
               hmsActions.setAppData(APP_DATA.background, mediaURL);
+              if (isMobile) {
+                toggleVB();
+              }
             },
             supported: true,
           }))}