@100mslive/roomkit-react 0.3.2-alpha.4 → 0.3.2

package/dist/index.js

@@ -62,7 +62,7 @@ import {
   theme,
   useBorderAudioLevel,
   useTheme
-} from "./chunk-ZSDUMADN.js";
+} from "./chunk-ORCLDJ5D.js";
 export {
   Accordion,
   AudioLevel,

package/dist/meta.cjs.json

@@ -4691,7 +4691,7 @@
       "format": "cjs"
     },
     "../hms-video-store/dist/index.js": {
-      "bytes": 326171,
+      "bytes": 326163,
       "imports": [
         {
           "path": "../../node_modules/reselect/es/index.js",
@@ -6042,7 +6042,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/Footer/RoleAccordion.tsx": {
-      "bytes": 5566,
+      "bytes": 5714,
       "imports": [
         {
           "path": "react",
@@ -6154,7 +6154,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/Footer/ParticipantList.tsx": {
-      "bytes": 12623,
+      "bytes": 12431,
       "imports": [
         {
           "path": "react",
@@ -6181,11 +6181,6 @@
           "kind": "import-statement",
           "original": "../../.."
         },
-        {
-          "path": "src/IconButton/index.tsx",
-          "kind": "import-statement",
-          "original": "../../../IconButton"
-        },
         {
           "path": "src/Prebuilt/IconButton.tsx",
           "kind": "import-statement",
@@ -11417,7 +11412,7 @@
       "format": "esm"
     },
     "src/Prebuilt/layouts/HLSView.jsx": {
-      "bytes": 27068,
+      "bytes": 27530,
       "imports": [
         {
           "path": "react",
@@ -13709,7 +13704,7 @@
       "imports": [],
       "exports": [],
       "inputs": {},
-      "bytes": 3273712
+      "bytes": 3274467
     },
     "dist/index.cjs.js": {
       "imports": [
@@ -16638,7 +16633,7 @@
       "entryPoint": "src/index.ts",
       "inputs": {
         "<define:process.env>": {
-          "bytesInOutput": 18235
+          "bytesInOutput": 18169
         },
         "src/Theme/base.config.ts": {
           "bytesInOutput": 6104
@@ -17127,7 +17122,7 @@
           "bytesInOutput": 615
         },
         "../hms-video-store/dist/index.js": {
-          "bytesInOutput": 53135
+          "bytesInOutput": 53127
         },
         "src/Prebuilt/components/hooks/usePlaylistMusic.js": {
           "bytesInOutput": 1384
@@ -17217,13 +17212,13 @@
           "bytesInOutput": 2258
         },
         "src/Prebuilt/components/Footer/RoleAccordion.tsx": {
-          "bytesInOutput": 6255
+          "bytesInOutput": 6489
         },
         "src/Prebuilt/components/hooks/usePeerOnStageActions.tsx": {
           "bytesInOutput": 2181
         },
         "src/Prebuilt/components/Footer/ParticipantList.tsx": {
-          "bytesInOutput": 14527
+          "bytesInOutput": 14347
         },
         "src/Prebuilt/components/Footer/PollsToggle.tsx": {
           "bytesInOutput": 1521
@@ -17550,7 +17545,7 @@
           "bytesInOutput": 2886
         },
         "src/Prebuilt/layouts/HLSView.jsx": {
-          "bytesInOutput": 31666
+          "bytesInOutput": 32398
         },
         "src/Prebuilt/layouts/VideoStreamingSection.tsx": {
           "bytesInOutput": 5017
@@ -17688,7 +17683,7 @@
           "bytesInOutput": 2980
         }
       },
-      "bytes": 1557904
+      "bytes": 1558616
     }
   }
 }

package/dist/meta.esbuild.json

@@ -4691,7 +4691,7 @@
       "format": "cjs"
     },
     "../hms-video-store/dist/index.js": {
-      "bytes": 326171,
+      "bytes": 326163,
       "imports": [
         {
           "path": "../../node_modules/reselect/es/index.js",
@@ -6042,7 +6042,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/Footer/RoleAccordion.tsx": {
-      "bytes": 5566,
+      "bytes": 5714,
       "imports": [
         {
           "path": "react",
@@ -6154,7 +6154,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/Footer/ParticipantList.tsx": {
-      "bytes": 12623,
+      "bytes": 12431,
       "imports": [
         {
           "path": "react",
@@ -6181,11 +6181,6 @@
           "kind": "import-statement",
           "original": "../../.."
         },
-        {
-          "path": "src/IconButton/index.tsx",
-          "kind": "import-statement",
-          "original": "../../../IconButton"
-        },
         {
           "path": "src/Prebuilt/IconButton.tsx",
           "kind": "import-statement",
@@ -11417,7 +11412,7 @@
       "format": "esm"
     },
     "src/Prebuilt/layouts/HLSView.jsx": {
-      "bytes": 27068,
+      "bytes": 27530,
       "imports": [
         {
           "path": "react",
@@ -13714,7 +13709,7 @@
     "dist/index.js": {
       "imports": [
         {
-          "path": "dist/chunk-ZSDUMADN.js",
+          "path": "dist/chunk-ORCLDJ5D.js",
           "kind": "import-statement"
         }
       ],
@@ -13787,16 +13782,16 @@
       "inputs": {},
       "bytes": 1822
     },
-    "dist/HLSView-NWO5Z7HM.js.map": {
+    "dist/HLSView-IN3HFCHT.js.map": {
       "imports": [],
       "exports": [],
       "inputs": {},
-      "bytes": 89757
+      "bytes": 90585
     },
-    "dist/HLSView-NWO5Z7HM.js": {
+    "dist/HLSView-IN3HFCHT.js": {
       "imports": [
         {
-          "path": "dist/chunk-ZSDUMADN.js",
+          "path": "dist/chunk-ORCLDJ5D.js",
           "kind": "import-statement"
         },
         {
@@ -13961,7 +13956,7 @@
       "entryPoint": "src/Prebuilt/layouts/HLSView.jsx",
       "inputs": {
         "src/Prebuilt/layouts/HLSView.jsx": {
-          "bytesInOutput": 25976
+          "bytesInOutput": 26628
         },
         "src/Prebuilt/components/HlsStatsOverlay.jsx": {
           "bytesInOutput": 3521
@@ -14012,15 +14007,15 @@
           "bytesInOutput": 2101
         }
       },
-      "bytes": 55042
+      "bytes": 55694
     },
-    "dist/chunk-ZSDUMADN.js.map": {
+    "dist/chunk-ORCLDJ5D.js.map": {
       "imports": [],
       "exports": [],
       "inputs": {},
-      "bytes": 3179390
+      "bytes": 3179402
     },
-    "dist/chunk-ZSDUMADN.js": {
+    "dist/chunk-ORCLDJ5D.js": {
       "imports": [
         {
           "path": "react",
@@ -16408,7 +16403,7 @@
           "external": true
         },
         {
-          "path": "dist/HLSView-NWO5Z7HM.js",
+          "path": "dist/HLSView-IN3HFCHT.js",
           "kind": "dynamic-import"
         },
         {
@@ -16883,7 +16878,7 @@
       ],
       "inputs": {
         "<define:process.env>": {
-          "bytesInOutput": 18235
+          "bytesInOutput": 18169
         },
         "../../node_modules/lodash/lodash.js": {
           "bytesInOutput": 224291
@@ -17321,7 +17316,7 @@
           "bytesInOutput": 10031
         },
         "../hms-video-store/dist/index.js": {
-          "bytesInOutput": 48564
+          "bytesInOutput": 48556
         },
         "../../node_modules/reselect/es/index.js": {
           "bytesInOutput": 2539
@@ -17423,7 +17418,7 @@
           "bytesInOutput": 1404
         },
         "src/Prebuilt/components/Footer/ParticipantList.tsx": {
-          "bytesInOutput": 11800
+          "bytesInOutput": 11695
         },
         "src/Prebuilt/components/Connection/ConnectionIndicator.tsx": {
           "bytesInOutput": 3749
@@ -17435,7 +17430,7 @@
           "bytesInOutput": 1290
         },
         "src/Prebuilt/components/Footer/RoleAccordion.tsx": {
-          "bytesInOutput": 4964
+          "bytesInOutput": 5163
         },
         "src/Prebuilt/components/Footer/RoleOptions.tsx": {
           "bytesInOutput": 7326
@@ -17843,7 +17838,7 @@
           "bytesInOutput": 651
         }
       },
-      "bytes": 1304752
+      "bytes": 1304772
     }
   }
 }

package/package.json

@@ -10,7 +10,7 @@
     "prebuilt",
     "roomkit"
   ],
-  "version": "0.3.2-alpha.4",
+  "version": "0.3.2",
   "author": "100ms",
   "license": "MIT",
   "repository": {
@@ -82,11 +82,11 @@
     "react": ">=17.0.2 <19.0.0"
   },
   "dependencies": {
-    "@100mslive/hls-player": "0.3.2-alpha.4",
+    "@100mslive/hls-player": "0.3.2",
     "@100mslive/hms-noise-cancellation": "0.0.0-alpha.1",
-    "@100mslive/hms-virtual-background": "1.13.2-alpha.4",
-    "@100mslive/react-icons": "0.10.2-alpha.4",
-    "@100mslive/react-sdk": "0.10.2-alpha.4",
+    "@100mslive/hms-virtual-background": "1.13.2",
+    "@100mslive/react-icons": "0.10.2",
+    "@100mslive/react-sdk": "0.10.2",
     "@100mslive/types-prebuilt": "0.12.7",
     "@emoji-mart/data": "^1.0.6",
     "@emoji-mart/react": "^1.0.1",
@@ -122,5 +122,5 @@
     "uuid": "^8.3.2",
     "worker-timers": "^7.0.40"
   },
-  "gitHead": "efc9d442af3de7959dc50cfe30a542e29f6f245d"
+  "gitHead": "8aafe5f7eea1ac66fb48451a5948cdfd4cf2cc1a"
 }

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

@@ -22,8 +22,7 @@ import {
   SearchIcon,
   VerticalMenuIcon,
 } from '@100mslive/react-icons';
-import { Accordion, Box, config as cssConfig, Dropdown, Flex, Input, Text, textEllipsis } from '../../..';
-import { IconButton as BaseIconButton } from '../../../IconButton';
+import { Accordion, Box, Button, config as cssConfig, Dropdown, Flex, Input, Text, textEllipsis } from '../../..';
 // @ts-ignore: No implicit Any
 import IconButton from '../../IconButton';
 import { ConnectionIndicator } from '../Connection/ConnectionIndicator';
@@ -319,6 +318,7 @@ const ParticipantActions = React.memo(
   },
 );
 
+const quickActionStyle = { p: '$1', borderRadius: '$round' };
 const HandRaisedAccordionParticipantActions = ({ peerId, role }: { peerId: string; role: string }) => {
   const { handleStageAction, lowerPeerHand, shouldShowStageRoleChange, isInStage } = usePeerOnStageActions({
     peerId,
@@ -326,19 +326,13 @@ const HandRaisedAccordionParticipantActions = ({ peerId, role }: { peerId: strin
   });
   return (
     <>
-      <BaseIconButton
-        css={{ p: '$1', c: '$on_surface_high', bg: '$surface_bright', borderRadius: '$round' }}
-        onClick={() => lowerPeerHand()}
-      >
-        <CrossIcon height={19} width={19} />
-      </BaseIconButton>
+      <Button variant="standard" css={quickActionStyle} onClick={lowerPeerHand}>
+        <CrossIcon height={18} width={18} />
+      </Button>
       {shouldShowStageRoleChange && !isInStage && (
-        <BaseIconButton
-          css={{ p: '$1', c: '$on_surface_high', bg: '$primary_default', borderRadius: '$round' }}
-          onClick={() => handleStageAction()}
-        >
-          <AddIcon height={19} width={19} />
-        </BaseIconButton>
+        <Button variant="primary" onClick={handleStageAction} css={quickActionStyle}>
+          <AddIcon height={18} width={18} />
+        </Button>
       )}
     </>
   );

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

@@ -2,7 +2,7 @@ import React, { useEffect } from 'react';
 import { useMeasure } from 'react-use';
 import { FixedSizeList } from 'react-window';
 import { HMSPeer, selectIsLargeRoom, useHMSStore, usePaginatedParticipants } from '@100mslive/react-sdk';
-import { ChevronRightIcon } from '@100mslive/react-icons';
+import { AddIcon, ChevronRightIcon, CrossIcon } from '@100mslive/react-icons';
 import { Accordion } from '../../../Accordion';
 import { Button } from '../../../Button';
 import { HorizontalDivider } from '../../../Divider';
@@ -152,10 +152,14 @@ export const RoleAccordion = ({
           <>
             <HorizontalDivider />
             <Flex css={{ w: '100%', p: '$6', gap: '$4' }} justify="center">
-              <Button variant="standard" onClick={() => lowerAllHands()}>
-                Lower All Hands
+              <Button variant="standard" onClick={lowerAllHands} icon css={{ pl: '$2' }}>
+                <CrossIcon /> Lower All Hands
               </Button>
-              {canBringToStage && <Button onClick={() => bringAllToStage()}>{bring_to_stage_label}</Button>}
+              {canBringToStage && (
+                <Button onClick={bringAllToStage} icon css={{ pl: '$2' }}>
+                  <AddIcon /> {bring_to_stage_label}
+                </Button>
+              )}
             </Flex>
           </>
         )}

package/src/Prebuilt/layouts/HLSView.jsx

@@ -336,15 +336,26 @@ const HLSView = () => {
     },
     [hlsState?.variants, isLandscape, isMobile, onSeekTo],
   );
-  const onClickHandler = useCallback(() => {
-    if (!(isMobile || isLandscape)) {
-      return;
-    }
-    setControlsVisible(value => !value);
-    if (controlsTimerRef.current) {
-      clearTimeout(controlsTimerRef.current);
-    }
-  }, [isLandscape, isMobile]);
+  const onClickHandler = useCallback(async () => {
+    match({ isMobile, isLandscape, playlist_type: hlsState?.variants[0]?.playlist_type })
+      .with({ playlist_type: HLSPlaylistType.DVR, isMobile: false, isLandscape: false }, async () => {
+        if (isPaused) {
+          await hlsPlayer?.play();
+        } else {
+          hlsPlayer?.pause();
+        }
+      })
+      .when(
+        ({ isMobile, isLandscape }) => isMobile || isLandscape,
+        () => {
+          setControlsVisible(value => !value);
+          if (controlsTimerRef.current) {
+            clearTimeout(controlsTimerRef.current);
+          }
+        },
+      )
+      .otherwise(() => null);
+  }, [hlsState?.variants, isLandscape, isMobile, isPaused]);
   const onHoverHandler = useCallback(
     event => {
       event.preventDefault();