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

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": [
@@ -4158,6 +4167,17 @@
       ],
       "format": "cjs"
     },
+    "../../node_modules/lodash.isequal/index.js": {
+      "bytes": 49598,
+      "imports": [
+        {
+          "path": "<define:process.env>",
+          "kind": "import-statement",
+          "external": true
+        }
+      ],
+      "format": "cjs"
+    },
     "../../node_modules/webrtc-adapter/src/js/utils.js": {
       "bytes": 7988,
       "imports": [
@@ -4478,7 +4498,7 @@
       "format": "cjs"
     },
     "../hms-video-store/dist/index.js": {
-      "bytes": 320781,
+      "bytes": 321585,
       "imports": [
         {
           "path": "../../node_modules/reselect/es/index.js",
@@ -4500,6 +4520,11 @@
           "kind": "import-statement",
           "original": "ua-parser-js"
         },
+        {
+          "path": "../../node_modules/lodash.isequal/index.js",
+          "kind": "import-statement",
+          "original": "lodash.isequal"
+        },
         {
           "path": "uuid",
           "kind": "import-statement",
@@ -4515,6 +4540,11 @@
           "kind": "import-statement",
           "original": "webrtc-adapter"
         },
+        {
+          "path": "../../node_modules/lodash.isequal/index.js",
+          "kind": "import-statement",
+          "original": "lodash.isequal"
+        },
         {
           "path": "uuid",
           "kind": "import-statement",
@@ -8700,7 +8730,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/VirtualBackground/VBHandler.tsx": {
-      "bytes": 2475,
+      "bytes": 2675,
       "imports": [
         {
           "path": "@100mslive/hms-virtual-background",
@@ -8732,7 +8762,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/VirtualBackground/VBPicker.tsx": {
-      "bytes": 6047,
+      "bytes": 6884,
       "imports": [
         {
           "path": "react",
@@ -10920,7 +10950,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/ConferenceScreen.tsx": {
-      "bytes": 6700,
+      "bytes": 6739,
       "imports": [
         {
           "path": "react",
@@ -10932,6 +10962,11 @@
           "kind": "import-statement",
           "external": true
         },
+        {
+          "path": "uuid",
+          "kind": "import-statement",
+          "external": true
+        },
         {
           "path": "@100mslive/react-sdk",
           "kind": "import-statement",
@@ -11016,7 +11051,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/ErrorBoundary.jsx": {
-      "bytes": 3259,
+      "bytes": 3396,
       "imports": [
         {
           "path": "react",
@@ -11048,11 +11083,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 +12633,7 @@
     "dist/index.js": {
       "imports": [
         {
-          "path": "dist/chunk-AMKCMJY4.js",
+          "path": "dist/chunk-USVBISD5.js",
           "kind": "import-statement"
         }
       ],
@@ -12676,16 +12706,16 @@
       "inputs": {},
       "bytes": 1822
     },
-    "dist/HLSView-LVQBZ4PX.js.map": {
+    "dist/HLSView-XUM6YSBP.js.map": {
       "imports": [],
       "exports": [],
       "inputs": {},
       "bytes": 58852
     },
-    "dist/HLSView-LVQBZ4PX.js": {
+    "dist/HLSView-XUM6YSBP.js": {
       "imports": [
         {
-          "path": "dist/chunk-AMKCMJY4.js",
+          "path": "dist/chunk-USVBISD5.js",
           "kind": "import-statement"
         },
         {
@@ -12849,13 +12879,13 @@
       },
       "bytes": 36970
     },
-    "dist/chunk-AMKCMJY4.js.map": {
+    "dist/chunk-USVBISD5.js.map": {
       "imports": [],
       "exports": [],
       "inputs": {},
-      "bytes": 3009138
+      "bytes": 3082138
     },
-    "dist/chunk-AMKCMJY4.js": {
+    "dist/chunk-USVBISD5.js": {
       "imports": [
         {
           "path": "react",
@@ -13213,12 +13243,7 @@
           "external": true
         },
         {
-          "path": "@100mslive/react-icons",
-          "kind": "import-statement",
-          "external": true
-        },
-        {
-          "path": "react",
+          "path": "uuid",
           "kind": "import-statement",
           "external": true
         },
@@ -13607,6 +13632,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 +15113,7 @@
           "external": true
         },
         {
-          "path": "dist/HLSView-LVQBZ4PX.js",
+          "path": "dist/HLSView-XUM6YSBP.js",
           "kind": "dynamic-import"
         },
         {
@@ -15500,7 +15535,7 @@
       ],
       "inputs": {
         "<define:process.env>": {
-          "bytesInOutput": 18038
+          "bytesInOutput": 18105
         },
         "../../node_modules/lodash/lodash.js": {
           "bytesInOutput": 224265
@@ -15508,6 +15543,9 @@
         "../../node_modules/ua-parser-js/src/ua-parser.js": {
           "bytesInOutput": 42469
         },
+        "../../node_modules/lodash.isequal/index.js": {
+          "bytesInOutput": 26591
+        },
         "../../node_modules/sdp/sdp.js": {
           "bytesInOutput": 22279
         },
@@ -15764,16 +15802,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 +15886,7 @@
           "bytesInOutput": 2476
         },
         "src/Prebuilt/components/RoleChangeModal.jsx": {
-          "bytesInOutput": 6094
+          "bytesInOutput": 6079
         },
         "src/Prebuilt/components/hooks/useDropdownSelection.jsx": {
           "bytesInOutput": 93
@@ -15866,7 +15904,7 @@
           "bytesInOutput": 1486
         },
         "src/Prebuilt/provider/roomLayoutProvider/hooks/useRoomLayoutScreen.ts": {
-          "bytesInOutput": 1320
+          "bytesInOutput": 1436
         },
         "src/Prebuilt/components/Settings/SettingsModal.jsx": {
           "bytesInOutput": 8539
@@ -15895,6 +15933,9 @@
         "src/Prebuilt/components/Streaming/ResolutionInput.jsx": {
           "bytesInOutput": 2940
         },
+        "src/Prebuilt/primitives/DialogContent.jsx": {
+          "bytesInOutput": 7670
+        },
         "src/Prebuilt/components/StatsForNerds.jsx": {
           "bytesInOutput": 9587
         },
@@ -15923,7 +15964,7 @@
           "bytesInOutput": 10019
         },
         "../hms-video-store/dist/index.js": {
-          "bytesInOutput": 48225
+          "bytesInOutput": 48434
         },
         "../../node_modules/reselect/es/index.js": {
           "bytesInOutput": 2537
@@ -15959,7 +16000,7 @@
           "bytesInOutput": 11866
         },
         "../../node_modules/webrtc-adapter/src/js/common_shim.js": {
-          "bytesInOutput": 12451
+          "bytesInOutput": 12446
         },
         "src/Prebuilt/components/Header/AdditionalRoomState.jsx": {
           "bytesInOutput": 6823
@@ -16214,7 +16255,7 @@
           "bytesInOutput": 1050
         },
         "src/Prebuilt/components/VirtualBackground/VBPicker.tsx": {
-          "bytesInOutput": 6018
+          "bytesInOutput": 6776
         },
         "src/Prebuilt/components/VirtualBackground/VBCollection.tsx": {
           "bytesInOutput": 1157
@@ -16223,7 +16264,7 @@
           "bytesInOutput": 1161
         },
         "src/Prebuilt/components/VirtualBackground/VBHandler.tsx": {
-          "bytesInOutput": 3124
+          "bytesInOutput": 3387
         },
         "src/Prebuilt/components/VirtualBackground/constants.ts": {
           "bytesInOutput": 714
@@ -16319,7 +16360,7 @@
           "bytesInOutput": 739
         },
         "src/Prebuilt/components/ErrorBoundary.jsx": {
-          "bytesInOutput": 3317
+          "bytesInOutput": 3509
         },
         "src/Prebuilt/components/init/Init.jsx": {
           "bytesInOutput": 666
@@ -16346,7 +16387,7 @@
           "bytesInOutput": 27
         },
         "src/Prebuilt/components/Notifications/Notifications.tsx": {
-          "bytesInOutput": 7908
+          "bytesInOutput": 7914
         },
         "src/Prebuilt/components/Toast/ToastBatcher.js": {
           "bytesInOutput": 1768
@@ -16418,7 +16459,7 @@
           "bytesInOutput": 651
         }
       },
-      "bytes": 1223368
+      "bytes": 1256589
     }
   }
 }

package/package.json

@@ -10,7 +10,7 @@
     "prebuilt",
     "roomkit"
   ],
-  "version": "0.2.2",
+  "version": "0.2.3-alpha.1",
   "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.1",
+    "@100mslive/hms-virtual-background": "1.12.3-alpha.1",
+    "@100mslive/react-icons": "0.9.3-alpha.1",
+    "@100mslive/react-sdk": "0.9.3-alpha.1",
+    "@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": "186da3cb403754304f9e22daa325d046c0d4b2a4"
 }

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;