@100mslive/roomkit-react 0.2.1-alpha.0 → 0.2.1-alpha.2

package/dist/meta.esbuild.json

@@ -1486,7 +1486,7 @@
       "format": "esm"
     },
     "src/Toast/Toast.tsx": {
-      "bytes": 4279,
+      "bytes": 4297,
       "imports": [
         {
           "path": "react",
@@ -2227,7 +2227,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/IconButtonWithOptions/IconButtonWithOptions.jsx": {
-      "bytes": 3097,
+      "bytes": 3098,
       "imports": [
         {
           "path": "react",
@@ -4478,7 +4478,7 @@
       "format": "cjs"
     },
     "../hms-video-store/dist/index.js": {
-      "bytes": 320473,
+      "bytes": 320301,
       "imports": [
         {
           "path": "../../node_modules/reselect/es/index.js",
@@ -6211,7 +6211,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/Polls/CreatePollQuiz/PollsQuizMenu.jsx": {
-      "bytes": 7706,
+      "bytes": 7668,
       "imports": [
         {
           "path": "react",
@@ -6504,7 +6504,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/Polls/CreateQuestions/QuestionForm.tsx": {
-      "bytes": 9971,
+      "bytes": 10090,
       "imports": [
         {
           "path": "react",
@@ -6728,7 +6728,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/Polls/Voting/StatisticBox.tsx": {
-      "bytes": 540,
+      "bytes": 624,
       "imports": [
         {
           "path": "react",
@@ -6753,8 +6753,8 @@
       ],
       "format": "esm"
     },
-    "src/Prebuilt/components/Polls/Voting/LeaderboardSummary.tsx": {
-      "bytes": 5842,
+    "src/Prebuilt/components/Polls/Voting/useQuizSummary.tsx": {
+      "bytes": 1684,
       "imports": [
         {
           "path": "react",
@@ -6767,70 +6767,61 @@
           "external": true
         },
         {
-          "path": "@100mslive/react-icons",
+          "path": "<define:process.env>",
           "kind": "import-statement",
           "external": true
         },
         {
-          "path": "src/Layout/index.tsx",
-          "kind": "import-statement",
-          "original": "../../../../Layout"
-        },
-        {
-          "path": "src/Loading/index.ts",
-          "kind": "import-statement",
-          "original": "../../../../Loading"
-        },
-        {
-          "path": "src/Text/index.tsx",
+          "path": "<runtime>",
           "kind": "import-statement",
-          "original": "../../../../Text"
-        },
+          "external": true
+        }
+      ],
+      "format": "esm"
+    },
+    "src/Prebuilt/components/Polls/Voting/PeerParticipationSummary.tsx": {
+      "bytes": 2194,
+      "imports": [
         {
-          "path": "src/Prebuilt/components/Polls/Voting/LeaderboardEntry.tsx",
+          "path": "react",
           "kind": "import-statement",
-          "original": "./LeaderboardEntry"
+          "external": true
         },
         {
-          "path": "src/Prebuilt/components/Polls/Voting/StatisticBox.tsx",
+          "path": "@100mslive/react-sdk",
           "kind": "import-statement",
-          "original": "./StatisticBox"
+          "external": true
         },
         {
-          "path": "src/Prebuilt/components/AppData/useSidepane.js",
+          "path": "src/Layout/index.tsx",
           "kind": "import-statement",
-          "original": "../../AppData/useSidepane"
+          "original": "../../../../Layout"
         },
         {
-          "path": "src/Prebuilt/components/AppData/useUISettings.js",
+          "path": "src/Text/index.tsx",
           "kind": "import-statement",
-          "original": "../../AppData/useUISettings"
+          "original": "../../../../Text"
         },
         {
-          "path": "src/Prebuilt/components/Polls/common/StatusIndicator.tsx",
+          "path": "src/Prebuilt/components/Polls/Voting/StatisticBox.tsx",
           "kind": "import-statement",
-          "original": "../common/StatusIndicator"
+          "original": "./StatisticBox"
         },
         {
-          "path": "src/Prebuilt/common/constants.ts",
+          "path": "src/Prebuilt/components/Polls/Voting/useQuizSummary.tsx",
           "kind": "import-statement",
-          "original": "../../../common/constants"
+          "original": "./useQuizSummary"
         },
         {
           "path": "<define:process.env>",
           "kind": "import-statement",
           "external": true
-        },
-        {
-          "path": "<runtime>",
-          "kind": "import-statement",
-          "external": true
         }
       ],
       "format": "esm"
     },
-    "src/Prebuilt/components/Polls/Voting/PeerParticipationSummary.tsx": {
-      "bytes": 1075,
+    "src/Prebuilt/components/Polls/Voting/LeaderboardSummary.tsx": {
+      "bytes": 4039,
       "imports": [
         {
           "path": "react",
@@ -6842,25 +6833,60 @@
           "kind": "import-statement",
           "external": true
         },
+        {
+          "path": "@100mslive/react-icons",
+          "kind": "import-statement",
+          "external": true
+        },
         {
           "path": "src/Layout/index.tsx",
           "kind": "import-statement",
           "original": "../../../../Layout"
         },
+        {
+          "path": "src/Loading/index.ts",
+          "kind": "import-statement",
+          "original": "../../../../Loading"
+        },
         {
           "path": "src/Text/index.tsx",
           "kind": "import-statement",
           "original": "../../../../Text"
         },
         {
-          "path": "src/Prebuilt/components/Polls/Voting/StatisticBox.tsx",
+          "path": "src/Prebuilt/components/Polls/Voting/LeaderboardEntry.tsx",
           "kind": "import-statement",
-          "original": "./StatisticBox"
+          "original": "./LeaderboardEntry"
         },
         {
-          "path": "src/Prebuilt/common/utils.js",
+          "path": "src/Prebuilt/components/Polls/Voting/PeerParticipationSummary.tsx",
           "kind": "import-statement",
-          "original": "../../../common/utils"
+          "original": "./PeerParticipationSummary"
+        },
+        {
+          "path": "src/Prebuilt/components/AppData/useSidepane.js",
+          "kind": "import-statement",
+          "original": "../../AppData/useSidepane"
+        },
+        {
+          "path": "src/Prebuilt/components/AppData/useUISettings.js",
+          "kind": "import-statement",
+          "original": "../../AppData/useUISettings"
+        },
+        {
+          "path": "src/Prebuilt/components/Polls/Voting/useQuizSummary.tsx",
+          "kind": "import-statement",
+          "original": "./useQuizSummary"
+        },
+        {
+          "path": "src/Prebuilt/components/Polls/common/StatusIndicator.tsx",
+          "kind": "import-statement",
+          "original": "../common/StatusIndicator"
+        },
+        {
+          "path": "src/Prebuilt/common/constants.ts",
+          "kind": "import-statement",
+          "original": "../../../common/constants"
         },
         {
           "path": "<define:process.env>",
@@ -6984,7 +7010,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/Polls/Voting/Voting.tsx": {
-      "bytes": 3244,
+      "bytes": 3192,
       "imports": [
         {
           "path": "react",
@@ -10077,13 +10103,18 @@
       "format": "esm"
     },
     "src/Prebuilt/layouts/WhiteboardView.tsx": {
-      "bytes": 1906,
+      "bytes": 2047,
       "imports": [
         {
           "path": "react",
           "kind": "import-statement",
           "external": true
         },
+        {
+          "path": "react-use",
+          "kind": "import-statement",
+          "external": true
+        },
         {
           "path": "@100mslive/react-sdk",
           "kind": "import-statement",
@@ -10099,6 +10130,11 @@
           "kind": "import-statement",
           "original": "../components/VideoLayouts/ProminenceLayout"
         },
+        {
+          "path": "src/index.ts",
+          "kind": "import-statement",
+          "original": "../../"
+        },
         {
           "path": "src/Layout/index.tsx",
           "kind": "import-statement",
@@ -11702,7 +11738,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/Notifications/Notifications.tsx": {
-      "bytes": 7752,
+      "bytes": 8209,
       "imports": [
         {
           "path": "react",
@@ -12541,7 +12577,7 @@
     "dist/index.js": {
       "imports": [
         {
-          "path": "dist/chunk-FTOP3RHP.js",
+          "path": "dist/chunk-AWWYBQSE.js",
           "kind": "import-statement"
         }
       ],
@@ -12614,16 +12650,16 @@
       "inputs": {},
       "bytes": 1822
     },
-    "dist/HLSView-GKCGIZ5F.js.map": {
+    "dist/HLSView-S5JHEMWJ.js.map": {
       "imports": [],
       "exports": [],
       "inputs": {},
       "bytes": 58021
     },
-    "dist/HLSView-GKCGIZ5F.js": {
+    "dist/HLSView-S5JHEMWJ.js": {
       "imports": [
         {
-          "path": "dist/chunk-FTOP3RHP.js",
+          "path": "dist/chunk-AWWYBQSE.js",
           "kind": "import-statement"
         },
         {
@@ -12787,13 +12823,13 @@
       },
       "bytes": 36449
     },
-    "dist/chunk-FTOP3RHP.js.map": {
+    "dist/chunk-AWWYBQSE.js.map": {
       "imports": [],
       "exports": [],
       "inputs": {},
-      "bytes": 3003490
+      "bytes": 3004013
     },
-    "dist/chunk-FTOP3RHP.js": {
+    "dist/chunk-AWWYBQSE.js": {
       "imports": [
         {
           "path": "react",
@@ -14231,22 +14267,22 @@
           "external": true
         },
         {
-          "path": "react",
+          "path": "@100mslive/react-sdk",
           "kind": "import-statement",
           "external": true
         },
         {
-          "path": "@100mslive/react-sdk",
+          "path": "react",
           "kind": "import-statement",
           "external": true
         },
         {
-          "path": "@100mslive/react-icons",
+          "path": "react",
           "kind": "import-statement",
           "external": true
         },
         {
-          "path": "react",
+          "path": "@100mslive/react-sdk",
           "kind": "import-statement",
           "external": true
         },
@@ -14260,6 +14296,16 @@
           "kind": "import-statement",
           "external": true
         },
+        {
+          "path": "@100mslive/react-icons",
+          "kind": "import-statement",
+          "external": true
+        },
+        {
+          "path": "react",
+          "kind": "import-statement",
+          "external": true
+        },
         {
           "path": "react",
           "kind": "import-statement",
@@ -14975,6 +15021,11 @@
           "kind": "import-statement",
           "external": true
         },
+        {
+          "path": "react-use",
+          "kind": "import-statement",
+          "external": true
+        },
         {
           "path": "@100mslive/react-sdk",
           "kind": "import-statement",
@@ -14996,7 +15047,7 @@
           "external": true
         },
         {
-          "path": "dist/HLSView-GKCGIZ5F.js",
+          "path": "dist/HLSView-S5JHEMWJ.js",
           "kind": "dynamic-import"
         },
         {
@@ -15418,7 +15469,7 @@
       ],
       "inputs": {
         "<define:process.env>": {
-          "bytesInOutput": 18388
+          "bytesInOutput": 17187
         },
         "../../node_modules/lodash/lodash.js": {
           "bytesInOutput": 224265
@@ -15613,7 +15664,7 @@
           "bytesInOutput": 7824
         },
         "src/Stats/formatBytes.ts": {
-          "bytesInOutput": 471
+          "bytesInOutput": 473
         },
         "src/Stats/StyledStats.tsx": {
           "bytesInOutput": 708
@@ -15628,7 +15679,7 @@
           "bytesInOutput": 738
         },
         "src/Toast/Toast.tsx": {
-          "bytesInOutput": 4076
+          "bytesInOutput": 4094
         },
         "src/Accordion/index.ts": {
           "bytesInOutput": 149
@@ -15700,7 +15751,7 @@
           "bytesInOutput": 5480
         },
         "src/Prebuilt/components/IconButtonWithOptions/IconButtonWithOptions.jsx": {
-          "bytesInOutput": 2865
+          "bytesInOutput": 2866
         },
         "src/Prebuilt/IconButton.jsx": {
           "bytesInOutput": 573
@@ -15814,7 +15865,7 @@
           "bytesInOutput": 2940
         },
         "src/Prebuilt/components/StatsForNerds.jsx": {
-          "bytesInOutput": 9585
+          "bytesInOutput": 9587
         },
         "src/Prebuilt/components/MoreSettings/BulkRoleChangeModal.jsx": {
           "bytesInOutput": 5008
@@ -15841,7 +15892,7 @@
           "bytesInOutput": 10019
         },
         "../hms-video-store/dist/index.js": {
-          "bytesInOutput": 48115
+          "bytesInOutput": 48233
         },
         "../../node_modules/reselect/es/index.js": {
           "bytesInOutput": 2537
@@ -15889,7 +15940,7 @@
           "bytesInOutput": 907
         },
         "src/Prebuilt/common/utils.js": {
-          "bytesInOutput": 3731
+          "bytesInOutput": 2426
         },
         "src/Prebuilt/components/MoreSettings/ActionTile.jsx": {
           "bytesInOutput": 1390
@@ -15982,7 +16033,7 @@
           "bytesInOutput": 735
         },
         "src/Prebuilt/components/Polls/CreatePollQuiz/PollsQuizMenu.jsx": {
-          "bytesInOutput": 7927
+          "bytesInOutput": 7547
         },
         "src/Prebuilt/components/Streaming/Common.jsx": {
           "bytesInOutput": 2247
@@ -15994,7 +16045,7 @@
           "bytesInOutput": 4875
         },
         "src/Prebuilt/components/Polls/CreateQuestions/QuestionForm.tsx": {
-          "bytesInOutput": 8578
+          "bytesInOutput": 8169
         },
         "src/Prebuilt/components/Polls/CreateQuestions/DeleteQuestionModal.tsx": {
           "bytesInOutput": 2083
@@ -16021,25 +16072,28 @@
           "bytesInOutput": 2116
         },
         "src/Prebuilt/components/Polls/Voting/LeaderboardSummary.tsx": {
-          "bytesInOutput": 6216
+          "bytesInOutput": 3973
         },
         "src/Prebuilt/components/Polls/Voting/LeaderboardEntry.tsx": {
           "bytesInOutput": 1683
         },
+        "src/Prebuilt/components/Polls/Voting/PeerParticipationSummary.tsx": {
+          "bytesInOutput": 2277
+        },
         "src/Prebuilt/components/Polls/Voting/StatisticBox.tsx": {
-          "bytesInOutput": 512
+          "bytesInOutput": 634
+        },
+        "src/Prebuilt/components/Polls/Voting/useQuizSummary.tsx": {
+          "bytesInOutput": 1874
         },
         "src/Prebuilt/components/Polls/Voting/Voting.tsx": {
-          "bytesInOutput": 3216
+          "bytesInOutput": 3113
         },
         "src/Prebuilt/components/Polls/Voting/StandardVoting.tsx": {
-          "bytesInOutput": 1254
-        },
-        "src/Prebuilt/components/Polls/Voting/PeerParticipationSummary.tsx": {
-          "bytesInOutput": 1013
+          "bytesInOutput": 1260
         },
         "src/Prebuilt/components/Polls/Voting/QuestionCard.jsx": {
-          "bytesInOutput": 8548
+          "bytesInOutput": 8527
         },
         "src/Prebuilt/components/Polls/Voting/TimedVoting.tsx": {
           "bytesInOutput": 1101
@@ -16051,7 +16105,7 @@
           "bytesInOutput": 3444
         },
         "src/Prebuilt/components/Chat/ChatBody.tsx": {
-          "bytesInOutput": 14276
+          "bytesInOutput": 14278
         },
         "src/Prebuilt/components/Chat/ChatActions.tsx": {
           "bytesInOutput": 9777
@@ -16162,7 +16216,7 @@
           "bytesInOutput": 3871
         },
         "src/Prebuilt/components/VideoLayouts/EqualProminence.tsx": {
-          "bytesInOutput": 2021
+          "bytesInOutput": 2019
         },
         "src/Prebuilt/components/InsetTile.tsx": {
           "bytesInOutput": 4035
@@ -16177,7 +16231,7 @@
           "bytesInOutput": 1204
         },
         "src/Prebuilt/components/hooks/useTileLayout.tsx": {
-          "bytesInOutput": 3837
+          "bytesInOutput": 3841
         },
         "src/Prebuilt/components/VideoLayouts/RoleProminence.tsx": {
           "bytesInOutput": 1737
@@ -16213,7 +16267,7 @@
           "bytesInOutput": 1415
         },
         "src/Prebuilt/layouts/WhiteboardView.tsx": {
-          "bytesInOutput": 1967
+          "bytesInOutput": 2075
         },
         "src/Prebuilt/components/hooks/useCloseScreenshareWhiteboard.tsx": {
           "bytesInOutput": 997
@@ -16258,7 +16312,7 @@
           "bytesInOutput": 27
         },
         "src/Prebuilt/components/Notifications/Notifications.tsx": {
-          "bytesInOutput": 7354
+          "bytesInOutput": 7908
         },
         "src/Prebuilt/components/Toast/ToastBatcher.js": {
           "bytesInOutput": 1768
@@ -16330,7 +16384,7 @@
           "bytesInOutput": 651
         }
       },
-      "bytes": 1221347
+      "bytes": 1219888
     }
   }
 }

package/package.json

@@ -10,9 +10,14 @@
     "prebuilt",
     "roomkit"
   ],
-  "version": "0.2.1-alpha.0",
+  "version": "0.2.1-alpha.2",
   "author": "100ms",
   "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/100mslive/web-sdks.git",
+    "directory": "packages/roomkit-react"
+  },
   "files": [
     "dist",
     "src"
@@ -65,6 +70,7 @@
     "@types/react-window": "^1.8.5",
     "babel-loader": "^8.2.5",
     "babel-plugin-react-require": "3.1.3",
+    "esbuild-loader": "^4.0.2",
     "react": "^18.1.0",
     "rollup": "^2.70.1",
     "rollup-plugin-esbuild": "^5.0.0",
@@ -76,10 +82,10 @@
     "react": ">=17.0.2 <19.0.0"
   },
   "dependencies": {
-    "@100mslive/hls-player": "0.2.1-alpha.0",
-    "@100mslive/hms-virtual-background": "1.12.1-alpha.0",
-    "@100mslive/react-icons": "0.9.1-alpha.0",
-    "@100mslive/react-sdk": "0.9.1-alpha.0",
+    "@100mslive/hls-player": "0.2.1-alpha.2",
+    "@100mslive/hms-virtual-background": "1.12.1-alpha.2",
+    "@100mslive/react-icons": "0.9.1-alpha.2",
+    "@100mslive/react-sdk": "0.9.1-alpha.2",
     "@100mslive/types-prebuilt": "0.12.5",
     "@emoji-mart/data": "^1.0.6",
     "@emoji-mart/react": "^1.0.1",
@@ -114,5 +120,5 @@
     "uuid": "^8.3.2",
     "worker-timers": "^7.0.40"
   },
-  "gitHead": "37788eb004f63672aae22043c6ad6b2debaff74c"
+  "gitHead": "28ace828c5944beff16c169195c807e4750e817e"
 }

package/src/Introduction/Integrating.stories.mdx

@@ -8,7 +8,7 @@ You can use either npm or yarn to install the dependencies. Please install the r
 you're planning to use with react or other framework/plain JavaScript.
 
 ```bash
-npm install --save @100mslive/hms-video @100mslive/hms-video-store
+npm install --save @100mslive/hms-video-store
 ```
 
 ```bash

package/src/Prebuilt/components/IconButtonWithOptions/IconButtonWithOptions.jsx

@@ -12,7 +12,7 @@ const IconSection = styled(IconButton, {
   p: '$4',
   r: '$1',
   borderTopRightRadius: 0,
-  borderColor: '$border_default',
+  borderColor: '$border_bright',
   borderBottomRightRadius: 0,
   position: 'relative',
   '&:not([disabled]):focus-visible': {
@@ -28,10 +28,10 @@ const IconSection = styled(IconButton, {
 const OptionsSection = styled(IconButton, {
   w: 'unset',
   h: '$14',
-  p: '$4',
+  p: '$4 $2',
   r: '$1',
   borderTopLeftRadius: 0,
-  borderColor: '$border_default',
+  borderColor: '$border_bright',
   borderBottomLeftRadius: 0,
   borderLeftWidth: 0,
   position: 'relative',

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

@@ -38,6 +38,9 @@ import { useIsNotificationDisabled, useSubscribedNotifications } from '../AppDat
 import { getMetadata } from '../../common/utils';
 // @ts-ignore: No implicit Any
 import { ROLE_CHANGE_DECLINED } from '../../common/constants';
+
+const pollToastKey: Record<string, string> = {};
+
 export function Notifications() {
   const localPeerID = useHMSStore(selectLocalPeerID);
   const notification = useHMSNotifications();
@@ -151,7 +154,8 @@ export function Notifications() {
       case HMSNotificationTypes.POLL_STARTED:
         if (notification.data.startedBy !== localPeerID && screenProps.screenType !== 'hls_live_streaming') {
           const pollStartedBy = vanillaStore.getState(selectPeerNameByID(notification.data.startedBy)) || 'Participant';
-          ToastManager.addToast({
+
+          const pollToastID = ToastManager.addToast({
             title: `${pollStartedBy} started a ${notification.data.type}: ${notification.data.title}`,
             action: (
               <Button
@@ -167,7 +171,16 @@ export function Notifications() {
                 {notification.data.type === 'quiz' ? 'Answer' : 'Vote'}
               </Button>
             ),
+            duration: Infinity,
           });
+          pollToastKey[notification.data.id] = pollToastID;
+        }
+        break;
+      case HMSNotificationTypes.POLL_STOPPED:
+        const pollID = notification?.data.id;
+        if (pollID && pollToastKey?.[pollID]) {
+          ToastManager.removeToast(pollToastKey?.[notification.data.id]);
+          delete pollToastKey[notification?.data.id];
         }
         break;
       default: