@100mslive/roomkit-react 0.1.6-alpha.2 → 0.1.6

package/dist/meta.esbuild.json

@@ -221,7 +221,7 @@
       "format": "esm"
     },
     "src/Button/Button.tsx": {
-      "bytes": 4742,
+      "bytes": 4730,
       "imports": [
         {
           "path": "react",
@@ -2817,7 +2817,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/Notifications/Notifications.jsx": {
-      "bytes": 6613,
+      "bytes": 6348,
       "imports": [
         {
           "path": "react",
@@ -2939,18 +2939,13 @@
       "format": "esm"
     },
     "src/Prebuilt/components/Header/HeaderComponents.jsx": {
-      "bytes": 1830,
+      "bytes": 1583,
       "imports": [
         {
           "path": "react",
           "kind": "import-statement",
           "external": true
         },
-        {
-          "path": "react-use",
-          "kind": "import-statement",
-          "external": true
-        },
         {
           "path": "@100mslive/react-sdk",
           "kind": "import-statement",
@@ -5358,7 +5353,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/Leave/MwebLeaveRoom.tsx": {
-      "bytes": 4841,
+      "bytes": 4929,
       "imports": [
         {
           "path": "react",
@@ -5429,7 +5424,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/Leave/LeaveRoom.tsx": {
-      "bytes": 2282,
+      "bytes": 2415,
       "imports": [
         {
           "path": "react",
@@ -6881,7 +6876,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/Footer/RoleAccordion.tsx": {
-      "bytes": 3113,
+      "bytes": 3100,
       "imports": [
         {
           "path": "react",
@@ -6942,7 +6937,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/Footer/ParticipantList.jsx": {
-      "bytes": 10439,
+      "bytes": 10452,
       "imports": [
         {
           "path": "react",
@@ -7028,7 +7023,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/Footer/Footer.tsx": {
-      "bytes": 3706,
+      "bytes": 3720,
       "imports": [
         {
           "path": "react",
@@ -7671,7 +7666,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/ScreenshareTile.jsx": {
-      "bytes": 3494,
+      "bytes": 3596,
       "imports": [
         {
           "path": "react",
@@ -8139,7 +8134,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/Chat/useEmojiPickerStyles.js": {
-      "bytes": 1022,
+      "bytes": 1048,
       "imports": [
         {
           "path": "react",
@@ -8242,7 +8237,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/Chat/Chat.jsx": {
-      "bytes": 6444,
+      "bytes": 6298,
       "imports": [
         {
           "path": "react",
@@ -8328,13 +8323,18 @@
       "format": "esm"
     },
     "src/Prebuilt/components/SidePaneTabs.tsx": {
-      "bytes": 4312,
+      "bytes": 5166,
       "imports": [
         {
           "path": "react",
           "kind": "import-statement",
           "external": true
         },
+        {
+          "path": "react-use",
+          "kind": "import-statement",
+          "external": true
+        },
         {
           "path": "@100mslive/types-prebuilt",
           "kind": "import-statement",
@@ -9136,7 +9136,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/RoleChangeRequestModal.tsx": {
-      "bytes": 3702,
+      "bytes": 3670,
       "imports": [
         {
           "path": "react",
@@ -9182,7 +9182,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/conference.jsx": {
-      "bytes": 6434,
+      "bytes": 6591,
       "imports": [
         {
           "path": "react",
@@ -9672,11 +9672,11 @@
     "dist/index.js": {
       "imports": [
         {
-          "path": "dist/chunk-WVGGQZK4.js",
+          "path": "dist/chunk-Q6U22HIE.js",
           "kind": "import-statement"
         },
         {
-          "path": "dist/chunk-KBVIZGYW.js",
+          "path": "dist/chunk-NMOZ33TX.js",
           "kind": "import-statement"
         }
       ],
@@ -9745,20 +9745,20 @@
       "inputs": {},
       "bytes": 1702
     },
-    "dist/VirtualBackground-37FXUPYO.js.map": {
+    "dist/VirtualBackground-A5UM363O.js.map": {
       "imports": [],
       "exports": [],
       "inputs": {},
       "bytes": 9170
     },
-    "dist/VirtualBackground-37FXUPYO.js": {
+    "dist/VirtualBackground-A5UM363O.js": {
       "imports": [
         {
-          "path": "dist/chunk-ZKE2N5LH.js",
+          "path": "dist/chunk-BUWIMYLW.js",
           "kind": "import-statement"
         },
         {
-          "path": "dist/chunk-KBVIZGYW.js",
+          "path": "dist/chunk-NMOZ33TX.js",
           "kind": "import-statement"
         },
         {
@@ -9807,20 +9807,20 @@
       },
       "bytes": 6113
     },
-    "dist/HLSView-QMU5JK7U.js.map": {
+    "dist/HLSView-4NSE37G7.js.map": {
       "imports": [],
       "exports": [],
       "inputs": {},
       "bytes": 51606
     },
-    "dist/HLSView-QMU5JK7U.js": {
+    "dist/HLSView-4NSE37G7.js": {
       "imports": [
         {
-          "path": "dist/chunk-WVGGQZK4.js",
+          "path": "dist/chunk-Q6U22HIE.js",
           "kind": "import-statement"
         },
         {
-          "path": "dist/chunk-KBVIZGYW.js",
+          "path": "dist/chunk-NMOZ33TX.js",
           "kind": "import-statement"
         },
         {
@@ -9971,24 +9971,24 @@
       },
       "bytes": 31959
     },
-    "dist/conference-FJJQ4TXX.js.map": {
+    "dist/conference-S7R3O4OC.js.map": {
       "imports": [],
       "exports": [],
       "inputs": {},
-      "bytes": 398636
+      "bytes": 400433
     },
-    "dist/conference-FJJQ4TXX.js": {
+    "dist/conference-S7R3O4OC.js": {
       "imports": [
         {
-          "path": "dist/chunk-ZKE2N5LH.js",
+          "path": "dist/chunk-BUWIMYLW.js",
           "kind": "import-statement"
         },
         {
-          "path": "dist/chunk-WVGGQZK4.js",
+          "path": "dist/chunk-Q6U22HIE.js",
           "kind": "import-statement"
         },
         {
-          "path": "dist/chunk-KBVIZGYW.js",
+          "path": "dist/chunk-NMOZ33TX.js",
           "kind": "import-statement"
         },
         {
@@ -10487,7 +10487,7 @@
           "external": true
         },
         {
-          "path": "dist/VirtualBackground-37FXUPYO.js",
+          "path": "dist/VirtualBackground-A5UM363O.js",
           "kind": "dynamic-import"
         },
         {
@@ -10725,6 +10725,11 @@
           "kind": "import-statement",
           "external": true
         },
+        {
+          "path": "react-use",
+          "kind": "import-statement",
+          "external": true
+        },
         {
           "path": "@100mslive/react-sdk",
           "kind": "import-statement",
@@ -10891,7 +10896,7 @@
           "external": true
         },
         {
-          "path": "dist/HLSView-QMU5JK7U.js",
+          "path": "dist/HLSView-4NSE37G7.js",
           "kind": "dynamic-import"
         },
         {
@@ -10911,10 +10916,10 @@
       "entryPoint": "src/Prebuilt/components/conference.jsx",
       "inputs": {
         "src/Prebuilt/components/conference.jsx": {
-          "bytesInOutput": 6205
+          "bytesInOutput": 6328
         },
         "src/Prebuilt/components/Footer/Footer.tsx": {
-          "bytesInOutput": 3165
+          "bytesInOutput": 3179
         },
         "src/Prebuilt/components/EmojiReaction.jsx": {
           "bytesInOutput": 1987
@@ -10923,10 +10928,10 @@
           "bytesInOutput": 937
         },
         "src/Prebuilt/components/Leave/LeaveRoom.tsx": {
-          "bytesInOutput": 1922
+          "bytesInOutput": 2037
         },
         "src/Prebuilt/components/Leave/DesktopLeaveRoom.tsx": {
-          "bytesInOutput": 5635
+          "bytesInOutput": 5711
         },
         "src/Prebuilt/components/Leave/EndSessionContent.tsx": {
           "bytesInOutput": 1894
@@ -10941,7 +10946,7 @@
           "bytesInOutput": 1704
         },
         "src/Prebuilt/components/Leave/MwebLeaveRoom.tsx": {
-          "bytesInOutput": 4341
+          "bytesInOutput": 4384
         },
         "src/Prebuilt/components/MoreSettings/MoreSettings.tsx": {
           "bytesInOutput": 365
@@ -11031,10 +11036,10 @@
           "bytesInOutput": 861
         },
         "src/Prebuilt/components/Footer/ParticipantList.jsx": {
-          "bytesInOutput": 10934
+          "bytesInOutput": 10947
         },
         "src/Prebuilt/components/Footer/RoleAccordion.tsx": {
-          "bytesInOutput": 2623
+          "bytesInOutput": 2610
         },
         "src/Prebuilt/components/Footer/RoleOptions.tsx": {
           "bytesInOutput": 5744
@@ -11082,7 +11087,7 @@
           "bytesInOutput": 1827
         },
         "src/Prebuilt/components/ScreenshareTile.jsx": {
-          "bytesInOutput": 3527
+          "bytesInOutput": 3596
         },
         "src/Prebuilt/components/ScreenshareDisplay.jsx": {
           "bytesInOutput": 1191
@@ -11100,10 +11105,10 @@
           "bytesInOutput": 3238
         },
         "src/Prebuilt/components/SidePaneTabs.tsx": {
-          "bytesInOutput": 4069
+          "bytesInOutput": 4756
         },
         "src/Prebuilt/components/Chat/Chat.jsx": {
-          "bytesInOutput": 6792
+          "bytesInOutput": 6585
         },
         "src/Prebuilt/components/Chat/ChatBody.jsx": {
           "bytesInOutput": 12384
@@ -11121,7 +11126,7 @@
           "bytesInOutput": 639
         },
         "src/Prebuilt/components/Chat/useEmojiPickerStyles.js": {
-          "bytesInOutput": 1143
+          "bytesInOutput": 1169
         },
         "src/Prebuilt/components/Chat/useUnreadCount.js": {
           "bytesInOutput": 497
@@ -11139,21 +11144,21 @@
           "bytesInOutput": 1380
         },
         "src/Prebuilt/components/RoleChangeRequestModal.tsx": {
-          "bytesInOutput": 3918
+          "bytesInOutput": 3886
         }
       },
-      "bytes": 301115
+      "bytes": 302029
     },
-    "dist/chunk-ZKE2N5LH.js.map": {
+    "dist/chunk-BUWIMYLW.js.map": {
       "imports": [],
       "exports": [],
       "inputs": {},
       "bytes": 2406
     },
-    "dist/chunk-ZKE2N5LH.js": {
+    "dist/chunk-BUWIMYLW.js": {
       "imports": [
         {
-          "path": "dist/chunk-KBVIZGYW.js",
+          "path": "dist/chunk-NMOZ33TX.js",
           "kind": "import-statement"
         },
         {
@@ -11172,16 +11177,16 @@
       },
       "bytes": 1591
     },
-    "dist/chunk-WVGGQZK4.js.map": {
+    "dist/chunk-Q6U22HIE.js.map": {
       "imports": [],
       "exports": [],
       "inputs": {},
-      "bytes": 494844
+      "bytes": 493815
     },
-    "dist/chunk-WVGGQZK4.js": {
+    "dist/chunk-Q6U22HIE.js": {
       "imports": [
         {
-          "path": "dist/chunk-KBVIZGYW.js",
+          "path": "dist/chunk-NMOZ33TX.js",
           "kind": "import-statement"
         },
         {
@@ -11719,11 +11724,6 @@
           "kind": "import-statement",
           "external": true
         },
-        {
-          "path": "react-use",
-          "kind": "import-statement",
-          "external": true
-        },
         {
           "path": "@100mslive/react-sdk",
           "kind": "import-statement",
@@ -12105,7 +12105,7 @@
           "external": true
         },
         {
-          "path": "dist/VirtualBackground-37FXUPYO.js",
+          "path": "dist/VirtualBackground-A5UM363O.js",
           "kind": "dynamic-import"
         },
         {
@@ -12174,7 +12174,7 @@
           "external": true
         },
         {
-          "path": "dist/conference-FJJQ4TXX.js",
+          "path": "dist/conference-S7R3O4OC.js",
           "kind": "dynamic-import"
         },
         {
@@ -12290,7 +12290,7 @@
       ],
       "inputs": {
         "src/Button/Button.tsx": {
-          "bytesInOutput": 4316
+          "bytesInOutput": 4304
         },
         "src/Theme/ThemeProvider.tsx": {
           "bytesInOutput": 1899
@@ -12500,7 +12500,7 @@
           "bytesInOutput": 4346
         },
         "src/Prebuilt/components/Notifications/Notifications.jsx": {
-          "bytesInOutput": 6254
+          "bytesInOutput": 5868
         },
         "src/Prebuilt/provider/roomLayoutProvider/index.tsx": {
           "bytesInOutput": 867
@@ -12575,7 +12575,7 @@
           "bytesInOutput": 1512
         },
         "src/Prebuilt/components/Header/HeaderComponents.jsx": {
-          "bytesInOutput": 1858
+          "bytesInOutput": 1591
         },
         "src/Prebuilt/components/Header/StreamActions.tsx": {
           "bytesInOutput": 8958
@@ -12593,7 +12593,7 @@
           "bytesInOutput": 1733
         },
         "src/Prebuilt/components/hooks/useMetadata.jsx": {
-          "bytesInOutput": 1734
+          "bytesInOutput": 1709
         },
         "src/Prebuilt/components/hooks/usePlaylistMusic.js": {
           "bytesInOutput": 1044
@@ -12611,7 +12611,7 @@
           "bytesInOutput": 1769
         },
         "src/Prebuilt/components/Preview/PreviewJoin.tsx": {
-          "bytesInOutput": 8863
+          "bytesInOutput": 8860
         },
         "src/Prebuilt/components/AudioVideoToggle.jsx": {
           "bytesInOutput": 5583
@@ -12701,15 +12701,15 @@
           "bytesInOutput": 391
         }
       },
-      "bytes": 309555
+      "bytes": 308862
     },
-    "dist/chunk-KBVIZGYW.js.map": {
+    "dist/chunk-NMOZ33TX.js.map": {
       "imports": [],
       "exports": [],
       "inputs": {},
-      "bytes": 39330
+      "bytes": 39320
     },
-    "dist/chunk-KBVIZGYW.js": {
+    "dist/chunk-NMOZ33TX.js": {
       "imports": [
         {
           "path": "@stitches/react",
@@ -12786,7 +12786,7 @@
       ],
       "inputs": {
         "<define:process.env>": {
-          "bytesInOutput": 18415
+          "bytesInOutput": 18373
         },
         "src/Theme/stitches.config.ts": {
           "bytesInOutput": 1652
@@ -12837,7 +12837,7 @@
           "bytesInOutput": 546
         }
       },
-      "bytes": 40028
+      "bytes": 39986
     }
   }
 }

package/package.json

@@ -10,7 +10,7 @@
     "prebuilt",
     "roomkit"
   ],
-  "version": "0.1.6-alpha.2",
+  "version": "0.1.6",
   "author": "100ms",
   "license": "MIT",
   "files": [
@@ -76,10 +76,10 @@
     "react": ">=17.0.2 <19.0.0"
   },
   "dependencies": {
-    "@100mslive/hls-player": "0.1.15-alpha.2",
-    "@100mslive/hms-virtual-background": "1.11.15-alpha.2",
-    "@100mslive/react-icons": "0.8.15-alpha.2",
-    "@100mslive/react-sdk": "0.8.15-alpha.2",
+    "@100mslive/hls-player": "0.1.15",
+    "@100mslive/hms-virtual-background": "1.11.15",
+    "@100mslive/react-icons": "0.8.15",
+    "@100mslive/react-sdk": "0.8.15",
     "@100mslive/types-prebuilt": "0.12.0",
     "@emoji-mart/data": "^1.0.6",
     "@emoji-mart/react": "^1.0.1",
@@ -115,5 +115,5 @@
     "uuid": "^8.3.2",
     "worker-timers": "^7.0.40"
   },
-  "gitHead": "e9017621fb9f9594f985d47483ccab4bed324a35"
+  "gitHead": "0578f113babef7488a788837c63f7f8a7aa246e3"
 }

package/src/Button/Button.tsx

@@ -139,12 +139,12 @@ const StyledButton = styled('button', {
   variants: {
     variant: {
       standard: getButtonVariants(
-        '$secondary_default',
-        '$secondary_bright',
-        '$secondary_dim',
-        '$secondary_disabled',
-        '$on_secondary_high',
-        '$on_secondary_low',
+        '$surface_brighter',
+        '$surface_bright',
+        '$surface_default',
+        '$surface_dim',
+        '$on_surface_high',
+        '$on_surface_low',
       ),
       danger: getButtonVariants(
         '$alert_error_default',

package/src/Prebuilt/components/Chat/Chat.jsx

@@ -66,7 +66,7 @@ const PinnedMessage = ({ clearPinnedMessage }) => {
   ) : null;
 };
 
-export const Chat = ({ screenType, hideControls = false }) => {
+export const Chat = ({ screenType }) => {
   const notification = useHMSNotifications(HMSNotificationTypes.PEER_LEFT);
   const [peerSelector, setPeerSelector] = useSetSubscribedChatSelector(CHAT_SELECTOR.PEER_ID);
   const [roleSelector, setRoleSelector] = useSetSubscribedChatSelector(CHAT_SELECTOR.ROLE);
@@ -122,8 +122,6 @@ export const Chat = ({ screenType, hideControls = false }) => {
       css={{
         size: '100%',
         gap: '$4',
-        marginTop: hideControls && elements?.chat?.is_overlay ? '$17' : '0',
-        transition: 'margin 0.3s ease-in-out',
       }}
     >
       {isMobile && elements?.chat?.is_overlay ? null : (

package/src/Prebuilt/components/Chat/useEmojiPickerStyles.js

@@ -18,6 +18,7 @@ export const useEmojiPickerStyles = showing => {
             font-family: var(--hms-ui-fonts-sans);
           }
           .sticky {
+            top: 0.25rem;
             background-color: var(--hms-ui-colors-surface_bright);
             margin-top: 0.5rem;
           }

package/src/Prebuilt/components/Footer/Footer.tsx

@@ -60,7 +60,7 @@ export const Footer = ({
           gap: '$10',
           position: 'relative',
           // To prevent it from showing over the sidepane if chat type is not overlay
-          zIndex: isOverlayChat ? 20 : 1,
+          zIndex: isOverlayChat && isChatOpen ? 20 : 1,
         },
       }}
     >

package/src/Prebuilt/components/Footer/ParticipantList.jsx

@@ -119,10 +119,11 @@ const VirtualizedParticipants = ({ peersOrderedByRoles = {}, isConnected, filter
       direction="column"
       css={{
         gap: '$8',
-        maxHeight: '100%',
         overflowY: 'auto',
         overflowX: 'hidden',
-        pr: '$3',
+        pr: '$10',
+        mr: '-$10',
+        flex: '1 1 0',
       }}
     >
       <RoleAccordion
@@ -316,7 +317,7 @@ export const ParticipantSearch = ({ onSearch, placeholder, inSidePane = false })
     <Flex
       align="center"
       css={{
-        p: isMobile ? '$0 $6' : '$2 0',
+        p: isMobile ? '0' : '$2 0',
         mb: '$2',
         position: 'relative',
         color: '$on_surface_medium',

package/src/Prebuilt/components/Footer/RoleAccordion.tsx

@@ -46,7 +46,7 @@ export const RoleAccordion = ({
   const height = ROW_HEIGHT * peerList.length;
 
   return (
-    <Flex direction="column" css={{ flexGrow: 1, '&:hover .role_actions': { visibility: 'visible' } }} ref={ref}>
+    <Flex direction="column" css={{ '&:hover .role_actions': { visibility: 'visible' } }} ref={ref}>
       <Accordion.Root
         type="single"
         collapsible

package/src/Prebuilt/components/Header/HeaderComponents.jsx

@@ -1,8 +1,7 @@
 import React, { useEffect, useState } from 'react';
-import { useMedia } from 'react-use';
-import { selectDominantSpeaker, selectIsConnectedToRoom, useHMSStore } from '@100mslive/react-sdk';
+import { selectDominantSpeaker, useHMSStore } from '@100mslive/react-sdk';
 import { VolumeOneIcon } from '@100mslive/react-icons';
-import { config as cssConfig, Flex, styled, Text, textEllipsis, VerticalDivider } from '../../../';
+import { Flex, styled, Text, textEllipsis, VerticalDivider } from '../../../';
 import { useRoomLayout } from '../../provider/roomLayoutProvider';
 
 export const SpeakerTag = () => {
@@ -37,8 +36,6 @@ const LogoImg = styled('img', {
 export const Logo = () => {
   const roomLayout = useRoomLayout();
   const logo = roomLayout?.logo?.url;
-  const isMobile = useMedia(cssConfig.media.md);
-  const isConnected = useHMSStore(selectIsConnectedToRoom);
   const [hideImage, setHideImage] = useState(false);
   // Hide logo for now as there is not enough space
   useEffect(() => {
@@ -48,9 +45,6 @@ export const Logo = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [logo]);
 
-  if (isConnected && isMobile) {
-    return null;
-  }
   return logo && !hideImage ? (
     <LogoImg
       src={logo}