@100mslive/roomkit-react 0.2.7 → 0.2.8-alpha.1

package/dist/meta.esbuild.json

@@ -2814,7 +2814,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/AudioVideoToggle.tsx": {
-      "bytes": 9962,
+      "bytes": 9985,
       "imports": [
         {
           "path": "react",
@@ -3662,7 +3662,7 @@
       "format": "esm"
     },
     "src/Prebuilt/primitives/DialogContent.jsx": {
-      "bytes": 8379,
+      "bytes": 8438,
       "imports": [
         {
           "path": "react",
@@ -3729,6 +3729,11 @@
           "kind": "import-statement",
           "original": "../../Text"
         },
+        {
+          "path": "src/utils/index.ts",
+          "kind": "import-statement",
+          "original": "../../utils"
+        },
         {
           "path": "<define:process.env>",
           "kind": "import-statement",
@@ -3961,8 +3966,8 @@
       ],
       "format": "esm"
     },
-    "src/Prebuilt/components/hooks/useFullscreen.js": {
-      "bytes": 1246,
+    "src/Prebuilt/components/hooks/useFullscreen.ts": {
+      "bytes": 1338,
       "imports": [
         {
           "path": "react",
@@ -3997,8 +4002,8 @@
       ],
       "format": "esm"
     },
-    "src/Prebuilt/components/MoreSettings/FullScreenItem.jsx": {
-      "bytes": 623,
+    "src/Prebuilt/components/MoreSettings/FullScreenItem.tsx": {
+      "bytes": 622,
       "imports": [
         {
           "path": "react",
@@ -4013,10 +4018,10 @@
         {
           "path": "src/index.ts",
           "kind": "import-statement",
-          "original": "../../../"
+          "original": "../../.."
         },
         {
-          "path": "src/Prebuilt/components/hooks/useFullscreen.js",
+          "path": "src/Prebuilt/components/hooks/useFullscreen.ts",
           "kind": "import-statement",
           "original": "../hooks/useFullscreen"
         },
@@ -4028,14 +4033,30 @@
       ],
       "format": "esm"
     },
-    "src/Prebuilt/components/MoreSettings/MuteAllContent.jsx": {
-      "bytes": 2118,
+    "src/Prebuilt/components/MoreSettings/constants.ts": {
+      "bytes": 430,
+      "imports": [
+        {
+          "path": "<define:process.env>",
+          "kind": "import-statement",
+          "external": true
+        }
+      ],
+      "format": "esm"
+    },
+    "src/Prebuilt/components/MoreSettings/MuteAllContent.tsx": {
+      "bytes": 2900,
       "imports": [
         {
           "path": "react",
           "kind": "import-statement",
           "external": true
         },
+        {
+          "path": "@100mslive/react-sdk",
+          "kind": "import-statement",
+          "external": true
+        },
         {
           "path": "src/Button/index.tsx",
           "kind": "import-statement",
@@ -4066,6 +4087,11 @@
           "kind": "import-statement",
           "original": "../../primitives/DialogContent"
         },
+        {
+          "path": "src/Prebuilt/components/MoreSettings/constants.ts",
+          "kind": "import-statement",
+          "original": "./constants"
+        },
         {
           "path": "<define:process.env>",
           "kind": "import-statement",
@@ -4074,8 +4100,8 @@
       ],
       "format": "esm"
     },
-    "src/Prebuilt/components/MoreSettings/MuteAllModal.jsx": {
-      "bytes": 2201,
+    "src/Prebuilt/components/MoreSettings/MuteAllModal.tsx": {
+      "bytes": 1945,
       "imports": [
         {
           "path": "react",
@@ -4095,7 +4121,7 @@
         {
           "path": "src/index.ts",
           "kind": "import-statement",
-          "original": "../../../"
+          "original": "../../.."
         },
         {
           "path": "src/Sheet/index.ts",
@@ -4108,15 +4134,10 @@
           "original": "../../primitives/DialogContent"
         },
         {
-          "path": "src/Prebuilt/components/MoreSettings/MuteAllContent.jsx",
+          "path": "src/Prebuilt/components/MoreSettings/MuteAllContent.tsx",
           "kind": "import-statement",
           "original": "./MuteAllContent"
         },
-        {
-          "path": "src/Prebuilt/common/hooks.ts",
-          "kind": "import-statement",
-          "original": "../../common/hooks"
-        },
         {
           "path": "<define:process.env>",
           "kind": "import-statement",
@@ -4157,7 +4178,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/MoreSettings/SplitComponents/DesktopOptions.tsx": {
-      "bytes": 7916,
+      "bytes": 7854,
       "imports": [
         {
           "path": "react",
@@ -4230,12 +4251,12 @@
           "original": "../BulkRoleChangeModal"
         },
         {
-          "path": "src/Prebuilt/components/MoreSettings/FullScreenItem.jsx",
+          "path": "src/Prebuilt/components/MoreSettings/FullScreenItem.tsx",
           "kind": "import-statement",
           "original": "../FullScreenItem"
         },
         {
-          "path": "src/Prebuilt/components/MoreSettings/MuteAllModal.jsx",
+          "path": "src/Prebuilt/components/MoreSettings/MuteAllModal.tsx",
           "kind": "import-statement",
           "original": "../MuteAllModal"
         },
@@ -4615,7 +4636,7 @@
       "format": "cjs"
     },
     "../hms-video-store/dist/index.js": {
-      "bytes": 323159,
+      "bytes": 326043,
       "imports": [
         {
           "path": "../../node_modules/reselect/es/index.js",
@@ -5198,7 +5219,7 @@
           "original": "../ChangeNameModal"
         },
         {
-          "path": "src/Prebuilt/components/MoreSettings/MuteAllModal.jsx",
+          "path": "src/Prebuilt/components/MoreSettings/MuteAllModal.tsx",
           "kind": "import-statement",
           "original": "../MuteAllModal"
         },
@@ -5849,7 +5870,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/Footer/RoleOptions.tsx": {
-      "bytes": 5474,
+      "bytes": 6635,
       "imports": [
         {
           "path": "react",
@@ -8598,7 +8619,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/Connection/TileConnection.tsx": {
-      "bytes": 2166,
+      "bytes": 2273,
       "imports": [
         {
           "path": "react",
@@ -9394,7 +9415,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/Preview/PreviewJoin.tsx": {
-      "bytes": 9985,
+      "bytes": 9982,
       "imports": [
         {
           "path": "react",
@@ -9878,7 +9899,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/VideoLayouts/ProminenceLayout.tsx": {
-      "bytes": 2449,
+      "bytes": 2474,
       "imports": [
         {
           "path": "react",
@@ -9980,7 +10001,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/hooks/useRoleProminencePeers.tsx": {
-      "bytes": 1092,
+      "bytes": 1143,
       "imports": [
         {
           "path": "react",
@@ -10006,18 +10027,28 @@
       "format": "esm"
     },
     "src/Prebuilt/components/VideoLayouts/RoleProminence.tsx": {
-      "bytes": 2339,
+      "bytes": 2591,
       "imports": [
         {
           "path": "react",
           "kind": "import-statement",
           "external": true
         },
+        {
+          "path": "react-use",
+          "kind": "import-statement",
+          "external": true
+        },
         {
           "path": "@100mslive/react-sdk",
           "kind": "import-statement",
           "external": true
         },
+        {
+          "path": "src/Theme/index.tsx",
+          "kind": "import-statement",
+          "original": "../../../Theme"
+        },
         {
           "path": "src/Prebuilt/components/InsetTile.tsx",
           "kind": "import-statement",
@@ -12184,7 +12215,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/Notifications/TrackBulkUnmuteModal.tsx": {
-      "bytes": 1699,
+      "bytes": 1775,
       "imports": [
         {
           "path": "react",
@@ -12236,7 +12267,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/Notifications/TrackUnmuteModal.tsx": {
-      "bytes": 1649,
+      "bytes": 1639,
       "imports": [
         {
           "path": "react",
@@ -13198,7 +13229,7 @@
     "dist/index.js": {
       "imports": [
         {
-          "path": "dist/chunk-Q6VWGYM4.js",
+          "path": "dist/chunk-ERIM35YN.js",
           "kind": "import-statement"
         }
       ],
@@ -13271,16 +13302,16 @@
       "inputs": {},
       "bytes": 1822
     },
-    "dist/HLSView-KPCDHIH2.js.map": {
+    "dist/HLSView-SJCF34GE.js.map": {
       "imports": [],
       "exports": [],
       "inputs": {},
       "bytes": 58854
     },
-    "dist/HLSView-KPCDHIH2.js": {
+    "dist/HLSView-SJCF34GE.js": {
       "imports": [
         {
-          "path": "dist/chunk-Q6VWGYM4.js",
+          "path": "dist/chunk-ERIM35YN.js",
           "kind": "import-statement"
         },
         {
@@ -13444,13 +13475,13 @@
       },
       "bytes": 36972
     },
-    "dist/chunk-Q6VWGYM4.js.map": {
+    "dist/chunk-ERIM35YN.js.map": {
       "imports": [],
       "exports": [],
       "inputs": {},
-      "bytes": 3134230
+      "bytes": 3143729
     },
-    "dist/chunk-Q6VWGYM4.js": {
+    "dist/chunk-ERIM35YN.js": {
       "imports": [
         {
           "path": "react",
@@ -14292,6 +14323,11 @@
           "kind": "import-statement",
           "external": true
         },
+        {
+          "path": "@100mslive/react-sdk",
+          "kind": "import-statement",
+          "external": true
+        },
         {
           "path": "react",
           "kind": "import-statement",
@@ -15592,6 +15628,11 @@
           "kind": "import-statement",
           "external": true
         },
+        {
+          "path": "react-use",
+          "kind": "import-statement",
+          "external": true
+        },
         {
           "path": "@100mslive/react-sdk",
           "kind": "import-statement",
@@ -15753,7 +15794,7 @@
           "external": true
         },
         {
-          "path": "dist/HLSView-KPCDHIH2.js",
+          "path": "dist/HLSView-SJCF34GE.js",
           "kind": "dynamic-import"
         },
         {
@@ -16210,25 +16251,25 @@
       ],
       "inputs": {
         "<define:process.env>": {
-          "bytesInOutput": 18186
+          "bytesInOutput": 18235
         },
         "../../node_modules/lodash/lodash.js": {
-          "bytesInOutput": 224267
+          "bytesInOutput": 224269
         },
         "../../node_modules/ua-parser-js/src/ua-parser.js": {
-          "bytesInOutput": 42466
+          "bytesInOutput": 42460
         },
         "../../node_modules/lodash.isequal/index.js": {
           "bytesInOutput": 26591
         },
         "../../node_modules/sdp/sdp.js": {
-          "bytesInOutput": 22279
+          "bytesInOutput": 22288
         },
         "../../node_modules/sdp-transform/lib/grammar.js": {
           "bytesInOutput": 16120
         },
         "../../node_modules/sdp-transform/lib/parser.js": {
-          "bytesInOutput": 3489
+          "bytesInOutput": 3485
         },
         "../../node_modules/sdp-transform/lib/writer.js": {
           "bytesInOutput": 3068
@@ -16408,7 +16449,7 @@
           "bytesInOutput": 7824
         },
         "src/Stats/formatBytes.ts": {
-          "bytesInOutput": 468
+          "bytesInOutput": 473
         },
         "src/Stats/StyledStats.tsx": {
           "bytesInOutput": 708
@@ -16516,7 +16557,7 @@
           "bytesInOutput": 3350
         },
         "src/Prebuilt/components/AudioVideoToggle.tsx": {
-          "bytesInOutput": 10265
+          "bytesInOutput": 10284
         },
         "src/Prebuilt/components/IconButtonWithOptions/IconButtonWithOptions.tsx": {
           "bytesInOutput": 3065
@@ -16615,25 +16656,28 @@
           "bytesInOutput": 2940
         },
         "src/Prebuilt/primitives/DialogContent.jsx": {
-          "bytesInOutput": 7672
+          "bytesInOutput": 7701
         },
         "src/Prebuilt/components/StatsForNerds.jsx": {
-          "bytesInOutput": 9582
+          "bytesInOutput": 9587
         },
         "src/Prebuilt/components/MoreSettings/BulkRoleChangeModal.jsx": {
           "bytesInOutput": 5008
         },
-        "src/Prebuilt/components/MoreSettings/FullScreenItem.jsx": {
+        "src/Prebuilt/components/MoreSettings/FullScreenItem.tsx": {
           "bytesInOutput": 628
         },
-        "src/Prebuilt/components/hooks/useFullscreen.js": {
-          "bytesInOutput": 1220
+        "src/Prebuilt/components/hooks/useFullscreen.ts": {
+          "bytesInOutput": 1270
+        },
+        "src/Prebuilt/components/MoreSettings/MuteAllModal.tsx": {
+          "bytesInOutput": 1834
         },
-        "src/Prebuilt/components/MoreSettings/MuteAllModal.jsx": {
-          "bytesInOutput": 2173
+        "src/Prebuilt/components/MoreSettings/MuteAllContent.tsx": {
+          "bytesInOutput": 2579
         },
-        "src/Prebuilt/components/MoreSettings/MuteAllContent.jsx": {
-          "bytesInOutput": 2275
+        "src/Prebuilt/components/MoreSettings/constants.ts": {
+          "bytesInOutput": 437
         },
         "src/Prebuilt/components/hooks/useMetadata.jsx": {
           "bytesInOutput": 1948
@@ -16645,7 +16689,7 @@
           "bytesInOutput": 10019
         },
         "../hms-video-store/dist/index.js": {
-          "bytesInOutput": 48455
+          "bytesInOutput": 48495
         },
         "../../node_modules/reselect/es/index.js": {
           "bytesInOutput": 2539
@@ -16762,7 +16806,7 @@
           "bytesInOutput": 4229
         },
         "src/Prebuilt/components/Footer/RoleOptions.tsx": {
-          "bytesInOutput": 5920
+          "bytesInOutput": 7185
         },
         "src/Prebuilt/components/Footer/PollsToggle.tsx": {
           "bytesInOutput": 1073
@@ -16777,7 +16821,7 @@
           "bytesInOutput": 3077
         },
         "src/Prebuilt/components/Preview/PreviewJoin.tsx": {
-          "bytesInOutput": 9632
+          "bytesInOutput": 9637
         },
         "src/Prebuilt/layouts/SidePane.tsx": {
           "bytesInOutput": 4719
@@ -16930,7 +16974,7 @@
           "bytesInOutput": 6608
         },
         "src/Prebuilt/components/Connection/TileConnection.tsx": {
-          "bytesInOutput": 2035
+          "bytesInOutput": 2062
         },
         "src/Prebuilt/components/TileMenu/TileMenu.tsx": {
           "bytesInOutput": 4507
@@ -16996,19 +17040,19 @@
           "bytesInOutput": 1204
         },
         "src/Prebuilt/components/hooks/useTileLayout.tsx": {
-          "bytesInOutput": 3841
+          "bytesInOutput": 3838
         },
         "src/Prebuilt/components/VideoLayouts/RoleProminence.tsx": {
-          "bytesInOutput": 1972
+          "bytesInOutput": 2183
         },
         "src/Prebuilt/components/SecondaryTiles.tsx": {
           "bytesInOutput": 2494
         },
         "src/Prebuilt/components/VideoLayouts/ProminenceLayout.tsx": {
-          "bytesInOutput": 2280
+          "bytesInOutput": 2301
         },
         "src/Prebuilt/components/hooks/useRoleProminencePeers.tsx": {
-          "bytesInOutput": 961
+          "bytesInOutput": 1046
         },
         "src/Prebuilt/components/VideoLayouts/ScreenshareLayout.tsx": {
           "bytesInOutput": 2664
@@ -17083,7 +17127,7 @@
           "bytesInOutput": 27
         },
         "src/Prebuilt/components/Notifications/Notifications.tsx": {
-          "bytesInOutput": 7971
+          "bytesInOutput": 7965
         },
         "src/Prebuilt/components/Notifications/AutoplayBlockedModal.tsx": {
           "bytesInOutput": 1053
@@ -17119,13 +17163,13 @@
           "bytesInOutput": 2284
         },
         "src/Prebuilt/components/Notifications/TrackBulkUnmuteModal.tsx": {
-          "bytesInOutput": 1790
+          "bytesInOutput": 1867
         },
         "src/Prebuilt/components/Notifications/TrackNotifications.tsx": {
           "bytesInOutput": 640
         },
         "src/Prebuilt/components/Notifications/TrackUnmuteModal.tsx": {
-          "bytesInOutput": 1796
+          "bytesInOutput": 1760
         },
         "src/Prebuilt/components/Preview/PreviewScreen.tsx": {
           "bytesInOutput": 1335
@@ -17161,7 +17205,7 @@
           "bytesInOutput": 651
         }
       },
-      "bytes": 1282796
+      "bytes": 1285152
     }
   }
 }

package/package.json

@@ -10,7 +10,7 @@
     "prebuilt",
     "roomkit"
   ],
-  "version": "0.2.7",
+  "version": "0.2.8-alpha.1",
   "author": "100ms",
   "license": "MIT",
   "repository": {
@@ -82,11 +82,11 @@
     "react": ">=17.0.2 <19.0.0"
   },
   "dependencies": {
-    "@100mslive/hls-player": "0.2.7",
+    "@100mslive/hls-player": "0.2.8-alpha.1",
     "@100mslive/hms-noise-cancellation": "0.0.0-alpha.1",
-    "@100mslive/hms-virtual-background": "1.12.7",
-    "@100mslive/react-icons": "0.9.7",
-    "@100mslive/react-sdk": "0.9.7",
+    "@100mslive/hms-virtual-background": "1.12.8-alpha.1",
+    "@100mslive/react-icons": "0.9.8-alpha.1",
+    "@100mslive/react-sdk": "0.9.8-alpha.1",
     "@100mslive/types-prebuilt": "0.12.7",
     "@emoji-mart/data": "^1.0.6",
     "@emoji-mart/react": "^1.0.1",
@@ -121,5 +121,5 @@
     "uuid": "^8.3.2",
     "worker-timers": "^7.0.40"
   },
-  "gitHead": "34ebd883853e8aefe7054badd305f7bdf813df58"
+  "gitHead": "44ec4f466226ce1135b5b72556b212b9b10dae07"
 }

package/src/Prebuilt/components/AudioVideoToggle.tsx

@@ -57,11 +57,12 @@ export const Options = ({
         <Dropdown.Item
           key={option.label}
           css={{
-            backgroundColor: selectedDeviceId === option.deviceId ? '$surface_bright' : '$surface_dim',
+            backgroundColor: '$surface_dim',
             p: '$4 $8',
             h: '$15',
             fontSize: '$xs',
             justifyContent: 'space-between',
+            color: selectedDeviceId === option.deviceId ? '$primary_bright' : '',
           }}
           onClick={() => {
             onClick(option.deviceId);

package/src/Prebuilt/components/Connection/TileConnection.tsx

@@ -24,33 +24,35 @@ const TileConnection = ({
     <Wrapper>
       {!hideLabel ? (
         <>
-          <Flex align="center">
-            {isPeerScreenSharing && (
-              <IconWrapper>
-                <ShareScreenIcon width="15" height="15" />
-              </IconWrapper>
-            )}
-            {pinned && (
-              <IconWrapper>
-                <PinIcon width="15" height="15" />
-              </IconWrapper>
-            )}
-            {spotlighted && (
-              <IconWrapper>
-                <SpotlightIcon width="15" height="15" />
-              </IconWrapper>
-            )}
-            <Text
-              css={{
-                c: '$on_surface_high',
-                verticalAlign: 'baseline',
-                ...(width ? textEllipsis((width as number) - 60) : {}),
-              }}
-              variant="xs"
-            >
-              {name}
-            </Text>
-          </Flex>
+          {name ? (
+            <Flex align="center">
+              {isPeerScreenSharing && (
+                <IconWrapper>
+                  <ShareScreenIcon width="15" height="15" />
+                </IconWrapper>
+              )}
+              {pinned && (
+                <IconWrapper>
+                  <PinIcon width="15" height="15" />
+                </IconWrapper>
+              )}
+              {spotlighted && (
+                <IconWrapper>
+                  <SpotlightIcon width="15" height="15" />
+                </IconWrapper>
+              )}
+              <Text
+                css={{
+                  c: '$on_surface_high',
+                  verticalAlign: 'baseline',
+                  ...(width ? textEllipsis((width as number) - 60) : {}),
+                }}
+                variant="xs"
+              >
+                {name}
+              </Text>
+            </Flex>
+          ) : null}
           <ConnectionIndicator isTile peerId={peerId} hideBg />
         </>
       ) : null}
@@ -70,6 +72,7 @@ const Wrapper = styled('div', {
   backgroundColor: '$background_dim',
   borderRadius: '$1',
   maxWidth: '85%',
+  zIndex: 1,
   '& p,span': {
     p: '$2 $3',
   },