@100mslive/roomkit-react 0.2.2 → 0.2.3-alpha.0

package/dist/meta.esbuild.json

@@ -2063,89 +2063,12 @@
       ],
       "format": "esm"
     },
-    "src/Prebuilt/primitives/DialogContent.jsx": {
-      "bytes": 8379,
-      "imports": [
-        {
-          "path": "react",
-          "kind": "import-statement",
-          "external": true
-        },
-        {
-          "path": "@100mslive/react-icons",
-          "kind": "import-statement",
-          "external": true
-        },
-        {
-          "path": "src/Button/index.tsx",
-          "kind": "import-statement",
-          "original": "../../Button"
-        },
-        {
-          "path": "src/Checkbox/index.tsx",
-          "kind": "import-statement",
-          "original": "../../Checkbox"
-        },
-        {
-          "path": "src/Divider/index.ts",
-          "kind": "import-statement",
-          "original": "../../Divider"
-        },
-        {
-          "path": "src/IconButton/index.tsx",
-          "kind": "import-statement",
-          "original": "../../IconButton"
-        },
-        {
-          "path": "src/Input/index.tsx",
-          "kind": "import-statement",
-          "original": "../../Input"
-        },
-        {
-          "path": "src/Label/index.ts",
-          "kind": "import-statement",
-          "original": "../../Label"
-        },
-        {
-          "path": "src/Layout/index.tsx",
-          "kind": "import-statement",
-          "original": "../../Layout"
-        },
-        {
-          "path": "src/Modal/index.ts",
-          "kind": "import-statement",
-          "original": "../../Modal"
-        },
-        {
-          "path": "src/Select/index.ts",
-          "kind": "import-statement",
-          "original": "../../Select"
-        },
-        {
-          "path": "src/Switch/index.ts",
-          "kind": "import-statement",
-          "original": "../../Switch"
-        },
-        {
-          "path": "src/Text/index.tsx",
-          "kind": "import-statement",
-          "original": "../../Text"
-        },
-        {
-          "path": "<define:process.env>",
-          "kind": "import-statement",
-          "external": true
-        },
-        {
-          "path": "<runtime>",
-          "kind": "import-statement",
-          "external": true
-        }
-      ],
-      "format": "esm"
+    "src/Prebuilt/images/transaction_error.svg": {
+      "bytes": 4603,
+      "imports": []
     },
     "src/Prebuilt/components/AuthToken.jsx": {
-      "bytes": 4205,
+      "bytes": 4368,
       "imports": [
         {
           "path": "react",
@@ -2168,9 +2091,14 @@
           "external": true
         },
         {
-          "path": "src/Theme/index.tsx",
+          "path": "src/Modal/index.ts",
           "kind": "import-statement",
-          "original": "../../Theme"
+          "original": "../../Modal"
+        },
+        {
+          "path": "src/Text/index.tsx",
+          "kind": "import-statement",
+          "original": "../../Text"
         },
         {
           "path": "src/Prebuilt/AppContext.tsx",
@@ -2178,9 +2106,9 @@
           "original": "../AppContext"
         },
         {
-          "path": "src/Prebuilt/primitives/DialogContent.jsx",
+          "path": "src/Prebuilt/images/transaction_error.svg",
           "kind": "import-statement",
-          "original": "../primitives/DialogContent"
+          "original": "../images/transaction_error.svg"
         },
         {
           "path": "src/Prebuilt/components/AppData/useUISettings.js",
@@ -3137,7 +3065,7 @@
       "format": "esm"
     },
     "src/Prebuilt/provider/roomLayoutProvider/hooks/useRoomLayoutScreen.ts": {
-      "bytes": 2131,
+      "bytes": 2273,
       "imports": [
         {
           "path": "@100mslive/types-prebuilt",
@@ -3621,6 +3549,87 @@
       ],
       "format": "esm"
     },
+    "src/Prebuilt/primitives/DialogContent.jsx": {
+      "bytes": 8379,
+      "imports": [
+        {
+          "path": "react",
+          "kind": "import-statement",
+          "external": true
+        },
+        {
+          "path": "@100mslive/react-icons",
+          "kind": "import-statement",
+          "external": true
+        },
+        {
+          "path": "src/Button/index.tsx",
+          "kind": "import-statement",
+          "original": "../../Button"
+        },
+        {
+          "path": "src/Checkbox/index.tsx",
+          "kind": "import-statement",
+          "original": "../../Checkbox"
+        },
+        {
+          "path": "src/Divider/index.ts",
+          "kind": "import-statement",
+          "original": "../../Divider"
+        },
+        {
+          "path": "src/IconButton/index.tsx",
+          "kind": "import-statement",
+          "original": "../../IconButton"
+        },
+        {
+          "path": "src/Input/index.tsx",
+          "kind": "import-statement",
+          "original": "../../Input"
+        },
+        {
+          "path": "src/Label/index.ts",
+          "kind": "import-statement",
+          "original": "../../Label"
+        },
+        {
+          "path": "src/Layout/index.tsx",
+          "kind": "import-statement",
+          "original": "../../Layout"
+        },
+        {
+          "path": "src/Modal/index.ts",
+          "kind": "import-statement",
+          "original": "../../Modal"
+        },
+        {
+          "path": "src/Select/index.ts",
+          "kind": "import-statement",
+          "original": "../../Select"
+        },
+        {
+          "path": "src/Switch/index.ts",
+          "kind": "import-statement",
+          "original": "../../Switch"
+        },
+        {
+          "path": "src/Text/index.tsx",
+          "kind": "import-statement",
+          "original": "../../Text"
+        },
+        {
+          "path": "<define:process.env>",
+          "kind": "import-statement",
+          "external": true
+        },
+        {
+          "path": "<runtime>",
+          "kind": "import-statement",
+          "external": true
+        }
+      ],
+      "format": "esm"
+    },
     "src/Prebuilt/components/Streaming/ResolutionInput.jsx": {
       "bytes": 2924,
       "imports": [
@@ -4478,7 +4487,7 @@
       "format": "cjs"
     },
     "../hms-video-store/dist/index.js": {
-      "bytes": 320781,
+      "bytes": 321476,
       "imports": [
         {
           "path": "../../node_modules/reselect/es/index.js",
@@ -8700,7 +8709,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/VirtualBackground/VBHandler.tsx": {
-      "bytes": 2475,
+      "bytes": 2675,
       "imports": [
         {
           "path": "@100mslive/hms-virtual-background",
@@ -8732,7 +8741,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/VirtualBackground/VBPicker.tsx": {
-      "bytes": 6047,
+      "bytes": 6884,
       "imports": [
         {
           "path": "react",
@@ -10920,7 +10929,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/ConferenceScreen.tsx": {
-      "bytes": 6700,
+      "bytes": 6739,
       "imports": [
         {
           "path": "react",
@@ -10932,6 +10941,11 @@
           "kind": "import-statement",
           "external": true
         },
+        {
+          "path": "uuid",
+          "kind": "import-statement",
+          "external": true
+        },
         {
           "path": "@100mslive/react-sdk",
           "kind": "import-statement",
@@ -11016,7 +11030,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/ErrorBoundary.jsx": {
-      "bytes": 3259,
+      "bytes": 3396,
       "imports": [
         {
           "path": "react",
@@ -11048,11 +11062,6 @@
           "kind": "import-statement",
           "original": "../../Tooltip"
         },
-        {
-          "path": "src/Prebuilt/components/AuthToken.jsx",
-          "kind": "import-statement",
-          "original": "./AuthToken"
-        },
         {
           "path": "<define:process.env>",
           "kind": "import-statement",
@@ -12603,7 +12612,7 @@
     "dist/index.js": {
       "imports": [
         {
-          "path": "dist/chunk-AMKCMJY4.js",
+          "path": "dist/chunk-5W4IGFZA.js",
           "kind": "import-statement"
         }
       ],
@@ -12676,16 +12685,16 @@
       "inputs": {},
       "bytes": 1822
     },
-    "dist/HLSView-LVQBZ4PX.js.map": {
+    "dist/HLSView-CVRPVOXD.js.map": {
       "imports": [],
       "exports": [],
       "inputs": {},
       "bytes": 58852
     },
-    "dist/HLSView-LVQBZ4PX.js": {
+    "dist/HLSView-CVRPVOXD.js": {
       "imports": [
         {
-          "path": "dist/chunk-AMKCMJY4.js",
+          "path": "dist/chunk-5W4IGFZA.js",
           "kind": "import-statement"
         },
         {
@@ -12849,13 +12858,13 @@
       },
       "bytes": 36970
     },
-    "dist/chunk-AMKCMJY4.js.map": {
+    "dist/chunk-5W4IGFZA.js.map": {
       "imports": [],
       "exports": [],
       "inputs": {},
-      "bytes": 3009138
+      "bytes": 3013053
     },
-    "dist/chunk-AMKCMJY4.js": {
+    "dist/chunk-5W4IGFZA.js": {
       "imports": [
         {
           "path": "react",
@@ -13213,12 +13222,7 @@
           "external": true
         },
         {
-          "path": "@100mslive/react-icons",
-          "kind": "import-statement",
-          "external": true
-        },
-        {
-          "path": "react",
+          "path": "uuid",
           "kind": "import-statement",
           "external": true
         },
@@ -13607,6 +13611,16 @@
           "kind": "import-statement",
           "external": true
         },
+        {
+          "path": "@100mslive/react-icons",
+          "kind": "import-statement",
+          "external": true
+        },
+        {
+          "path": "react",
+          "kind": "import-statement",
+          "external": true
+        },
         {
           "path": "@100mslive/react-sdk",
           "kind": "import-statement",
@@ -15078,7 +15092,7 @@
           "external": true
         },
         {
-          "path": "dist/HLSView-LVQBZ4PX.js",
+          "path": "dist/HLSView-CVRPVOXD.js",
           "kind": "dynamic-import"
         },
         {
@@ -15500,7 +15514,7 @@
       ],
       "inputs": {
         "<define:process.env>": {
-          "bytesInOutput": 18038
+          "bytesInOutput": 18076
         },
         "../../node_modules/lodash/lodash.js": {
           "bytesInOutput": 224265
@@ -15695,7 +15709,7 @@
           "bytesInOutput": 7824
         },
         "src/Stats/formatBytes.ts": {
-          "bytesInOutput": 473
+          "bytesInOutput": 471
         },
         "src/Stats/StyledStats.tsx": {
           "bytesInOutput": 708
@@ -15764,16 +15778,16 @@
           "bytesInOutput": 5393
         },
         "src/Prebuilt/components/AuthToken.jsx": {
-          "bytesInOutput": 3501
+          "bytesInOutput": 3632
         },
         "src/Prebuilt/AppContext.tsx": {
           "bytesInOutput": 577
         },
-        "src/Prebuilt/primitives/DialogContent.jsx": {
-          "bytesInOutput": 7656
+        "src/Prebuilt/images/transaction_error.svg": {
+          "bytesInOutput": 4698
         },
         "src/Prebuilt/components/ConferenceScreen.tsx": {
-          "bytesInOutput": 6030
+          "bytesInOutput": 6071
         },
         "src/Prebuilt/components/Footer/Footer.tsx": {
           "bytesInOutput": 3348
@@ -15848,7 +15862,7 @@
           "bytesInOutput": 2476
         },
         "src/Prebuilt/components/RoleChangeModal.jsx": {
-          "bytesInOutput": 6094
+          "bytesInOutput": 6079
         },
         "src/Prebuilt/components/hooks/useDropdownSelection.jsx": {
           "bytesInOutput": 93
@@ -15866,7 +15880,7 @@
           "bytesInOutput": 1486
         },
         "src/Prebuilt/provider/roomLayoutProvider/hooks/useRoomLayoutScreen.ts": {
-          "bytesInOutput": 1320
+          "bytesInOutput": 1436
         },
         "src/Prebuilt/components/Settings/SettingsModal.jsx": {
           "bytesInOutput": 8539
@@ -15895,8 +15909,11 @@
         "src/Prebuilt/components/Streaming/ResolutionInput.jsx": {
           "bytesInOutput": 2940
         },
+        "src/Prebuilt/primitives/DialogContent.jsx": {
+          "bytesInOutput": 7670
+        },
         "src/Prebuilt/components/StatsForNerds.jsx": {
-          "bytesInOutput": 9587
+          "bytesInOutput": 9585
         },
         "src/Prebuilt/components/MoreSettings/BulkRoleChangeModal.jsx": {
           "bytesInOutput": 5008
@@ -15923,7 +15940,7 @@
           "bytesInOutput": 10019
         },
         "../hms-video-store/dist/index.js": {
-          "bytesInOutput": 48225
+          "bytesInOutput": 48273
         },
         "../../node_modules/reselect/es/index.js": {
           "bytesInOutput": 2537
@@ -16214,7 +16231,7 @@
           "bytesInOutput": 1050
         },
         "src/Prebuilt/components/VirtualBackground/VBPicker.tsx": {
-          "bytesInOutput": 6018
+          "bytesInOutput": 6776
         },
         "src/Prebuilt/components/VirtualBackground/VBCollection.tsx": {
           "bytesInOutput": 1157
@@ -16223,7 +16240,7 @@
           "bytesInOutput": 1161
         },
         "src/Prebuilt/components/VirtualBackground/VBHandler.tsx": {
-          "bytesInOutput": 3124
+          "bytesInOutput": 3387
         },
         "src/Prebuilt/components/VirtualBackground/constants.ts": {
           "bytesInOutput": 714
@@ -16319,7 +16336,7 @@
           "bytesInOutput": 739
         },
         "src/Prebuilt/components/ErrorBoundary.jsx": {
-          "bytesInOutput": 3317
+          "bytesInOutput": 3509
         },
         "src/Prebuilt/components/init/Init.jsx": {
           "bytesInOutput": 666
@@ -16418,7 +16435,7 @@
           "bytesInOutput": 651
         }
       },
-      "bytes": 1223368
+      "bytes": 1229752
     }
   }
 }

package/package.json

@@ -10,7 +10,7 @@
     "prebuilt",
     "roomkit"
   ],
-  "version": "0.2.2",
+  "version": "0.2.3-alpha.0",
   "author": "100ms",
   "license": "MIT",
   "repository": {
@@ -82,11 +82,11 @@
     "react": ">=17.0.2 <19.0.0"
   },
   "dependencies": {
-    "@100mslive/hls-player": "0.2.2",
-    "@100mslive/hms-virtual-background": "1.12.2",
-    "@100mslive/react-icons": "0.9.2",
-    "@100mslive/react-sdk": "0.9.2",
-    "@100mslive/types-prebuilt": "0.12.5",
+    "@100mslive/hls-player": "0.2.3-alpha.0",
+    "@100mslive/hms-virtual-background": "1.12.3-alpha.0",
+    "@100mslive/react-icons": "0.9.3-alpha.0",
+    "@100mslive/react-sdk": "0.9.3-alpha.0",
+    "@100mslive/types-prebuilt": "0.12.6",
     "@emoji-mart/data": "^1.0.6",
     "@emoji-mart/react": "^1.0.1",
     "@radix-ui/react-accordion": "1.0.0",
@@ -120,5 +120,5 @@
     "uuid": "^8.3.2",
     "worker-timers": "^7.0.40"
   },
-  "gitHead": "e1fee68a01f0166cc2c5e19a39c7b0119e0a3bd8"
+  "gitHead": "d3d81cbff3a76e9db81ceb754ba3d0aa0a8ae3c0"
 }

package/src/Prebuilt/components/AuthToken.jsx

@@ -2,9 +2,10 @@ import React, { useEffect, useState } from 'react';
 import { useSessionStorage } from 'react-use';
 import { v4 as uuid } from 'uuid';
 import { useHMSActions } from '@100mslive/react-sdk';
-import { styled } from '../../Theme';
+import { Dialog } from '../../Modal';
+import { Text } from '../../Text';
 import { useHMSPrebuiltContext } from '../AppContext';
-import { ErrorDialog } from '../primitives/DialogContent';
+import errorImage from '../images/transaction_error.svg';
 import { useSetAppDataByKey } from './AppData/useUISettings';
 import { UserPreferencesKeys } from './hooks/useUserPreferences';
 import { APP_DATA } from '../common/constants';
@@ -57,65 +58,68 @@ const AuthToken = React.memo(({ authTokenByRoomCodeEndpoint, defaultAuthToken })
   ]);
 
   if (error.title) {
-    return <ErrorDialog title={error.title}>{error.body}</ErrorDialog>;
+    return (
+      <Dialog.Root open={true}>
+        <Dialog.Content
+          css={{
+            maxWidth: '$100',
+            boxSizing: 'border-box',
+            p: '$10 $12',
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+          }}
+        >
+          <img src={errorImage} height={80} width={80} />
+          <Text variant="h4" css={{ textAlign: 'center', mb: '$4', mt: '$10' }}>
+            {error.title}
+          </Text>
+          <Text css={{ c: '$on_surface_medium', textAlign: 'center' }}>{error.body}</Text>
+        </Dialog.Content>
+      </Dialog.Root>
+    );
   }
   return null;
 });
 
 const convertError = error => {
   console.error('[error]', { error });
+  console.warn(
+    'If you think this is a mistake on our side, please reach out to us over Discord:',
+    'https://discord.com/invite/kGdmszyzq2',
+  );
   if (error.action === 'GET_TOKEN' && error.code === 403) {
     return {
-      title: 'Room code is disabled',
-      body: ErrorWithSupportLink('Room code corresponding to this link is no more active.'),
+      title: 'Psst! This room is currently inactive.',
+      body: 'Please feel free to join another open room for more conversations. Thanks for stopping by!',
     };
   } else if (error.action === 'GET_TOKEN' && error.code === 404) {
     return {
       title: 'Room code does not exist',
-      body: ErrorWithSupportLink('We could not find a room code corresponding to this link.'),
+      body: 'We could not find a room code corresponding to this link.',
     };
   } else if (error.action === 'GET_TOKEN' && error.code === 2003) {
     return {
       title: 'Endpoint is not reachable',
-      body: ErrorWithSupportLink(`Endpoint is not reachable. ${error.description}.`),
+      body: `Endpoint is not reachable. ${error.description}.`,
     };
   } else if (error.response && error.response.status === 404) {
     return {
       title: 'Room does not exist',
-      body: ErrorWithSupportLink('We could not find a room corresponding to this link.'),
+      body: 'We could not find a room corresponding to this link.',
     };
   } else if (error.response && error.response.status === 403) {
     return {
       title: 'Accessing room using this link format is disabled',
-      body: ErrorWithSupportLink('You can re-enable this from the developer section in Dashboard.'),
+      body: 'You can re-enable this from the developer section in Dashboard.',
     };
   } else {
     console.error('Token API Error', error);
     return {
       title: 'Error fetching token',
-      body: ErrorWithSupportLink(
-        'An error occurred while fetching the app token. Please look into logs for more details.',
-      ),
+      body: 'An error occurred while fetching the app token. Please look into logs for more details.',
     };
   }
 };
 
-const Link = styled('a', {
-  color: '#2f80e1',
-});
-
-export const ErrorWithSupportLink = errorMessage => (
-  <div>
-    {errorMessage} If you think this is a mistake on our side, please create{' '}
-    <Link target="_blank" href="https://github.com/100mslive/100ms-web/issues" rel="noreferrer">
-      an issue
-    </Link>{' '}
-    or reach out over{' '}
-    <Link target="_blank" href="https://discord.com/invite/kGdmszyzq2" rel="noreferrer">
-      Discord
-    </Link>
-    .
-  </div>
-);
-
 export default AuthToken;

package/src/Prebuilt/components/ConferenceScreen.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { DefaultConferencingScreen_Elements } from '@100mslive/types-prebuilt';
+import { v4 as uuid } from 'uuid';
 import {
   HMSRoomState,
   selectAppData,
@@ -79,7 +80,7 @@ export const ConferenceScreen = () => {
     ) {
       hmsActions
         .join({
-          userName: userName || '',
+          userName: userName || uuid(),
           authToken: authTokenInAppData,
           initEndpoint: endpoints?.init,
           settings: {

package/src/Prebuilt/components/ErrorBoundary.jsx

@@ -4,7 +4,6 @@ import { Button } from '../../Button';
 import { Box, Flex } from '../../Layout';
 import { Text } from '../../Text';
 import { Tooltip } from '../../Tooltip';
-import { ErrorWithSupportLink } from './AuthToken';
 
 export class ErrorBoundary extends Component {
   constructor(props) {
@@ -49,7 +48,10 @@ export class ErrorBoundary extends Component {
                 <Text>Something went wrong</Text>
                 <Text>Message: ${this.state.error}</Text>
                 <br />
-                {ErrorWithSupportLink(`Please reload to see if it works.`)}
+                Please reload to see if it works. If you think this is a mistake on our side, please reach out to us on
+                <a href="https://discord.com/invite/kGdmszyzq2" target="_blank" rel="noreferrer">
+                  Discord
+                </a>
               </div>
               <Flex>
                 <Tooltip title="Reload page">

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

@@ -70,6 +70,16 @@ export class VBPlugin {
     }
   };
 
+  setPreset = (preset: string) => {
+    if (this.effectsPlugin) {
+      this.effectsPlugin.setPreset(preset);
+    }
+  };
+
+  getPreset = () => {
+    return this.effectsPlugin?.getPreset() || '';
+  };
+
   removeEffects = async () => {
     if (this.effectsPlugin) {
       this.effectsPlugin?.removeEffects();