Merge branch 'main' into dev

packages/roomkit-react/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,26 +318,21 @@ 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,
     role,
   });
   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>
       )}
     </>
   );

packages/roomkit-react/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>
           </>
         )}

packages/roomkit-react/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();

yarn.lock

@@ -15781,7 +15781,16 @@ string-natural-compare@^3.0.1:
   resolved "https://registry.yarnpkg.com/string-natural-compare/-/string-natural-compare-3.0.1.tgz#7a42d58474454963759e8e8b7ae63d71c1e7fdf4"
   integrity sha512-n3sPwynL1nwKi3WJ6AIsClwBMa0zTi54fn2oLU6ndfTSIO05xaznjSf15PcBZU6FNWbmN5Q6cxT4V5hGvB4taw==
 
-"string-width-cjs@npm:string-width@^4.2.0", "string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
+"string-width-cjs@npm:string-width@^4.2.0":
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
+  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
+  dependencies:
+    emoji-regex "^8.0.0"
+    is-fullwidth-code-point "^3.0.0"
+    strip-ansi "^6.0.1"
+
+"string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -15881,7 +15890,14 @@ string_decoder@~1.1.1:
   dependencies:
     safe-buffer "~5.1.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
+  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
+  dependencies:
+    ansi-regex "^5.0.1"
+
+strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -17178,7 +17194,7 @@ worker-timers@^7.0.40:
     worker-timers-broker "^6.0.95"
     worker-timers-worker "^7.0.59"
 
-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
@@ -17196,6 +17212,15 @@ wrap-ansi@^6.0.1, wrap-ansi@^6.2.0:
     string-width "^4.1.0"
     strip-ansi "^6.0.0"
 
+wrap-ansi@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
+  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
+  dependencies:
+    ansi-styles "^4.0.0"
+    string-width "^4.1.0"
+    strip-ansi "^6.0.0"
+
 wrap-ansi@^8.1.0:
   version "8.1.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214"