@100mslive/roomkit-react 0.3.3-alpha.0 → 0.3.3-alpha.10

package/package.json

@@ -10,7 +10,7 @@
     "prebuilt",
     "roomkit"
   ],
-  "version": "0.3.3-alpha.0",
+  "version": "0.3.3-alpha.10",
   "author": "100ms",
   "license": "MIT",
   "repository": {
@@ -82,11 +82,11 @@
     "react": ">=17.0.2 <19.0.0"
   },
   "dependencies": {
-    "@100mslive/hls-player": "0.3.3-alpha.0",
-    "@100mslive/hms-noise-cancellation": "0.0.0-alpha.1",
-    "@100mslive/hms-virtual-background": "1.13.3-alpha.0",
-    "@100mslive/react-icons": "0.10.3-alpha.0",
-    "@100mslive/react-sdk": "0.10.3-alpha.0",
+    "@100mslive/hls-player": "0.3.3-alpha.10",
+    "@100mslive/hms-noise-cancellation": "0.0.0-alpha.5",
+    "@100mslive/hms-virtual-background": "1.13.3-alpha.10",
+    "@100mslive/react-icons": "0.10.3-alpha.10",
+    "@100mslive/react-sdk": "0.10.3-alpha.10",
     "@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": "23e3bf90410ae16869b67438ac403cba6027db98"
+  "gitHead": "5164a4d05ffa194988cb560db7db95405fa39052"
 }

package/src/Accordion/Accordion.tsx

@@ -64,15 +64,15 @@ export const AccordionRoot = StyledAccordion;
 export const AccordionItem = StyledItem;
 
 export const AccordionHeader: React.FC<
-  PropsWithChildren<BaseAccordion.AccordionTriggerProps & { iconStyles?: CSS; css?: CSS }>
+  PropsWithChildren<BaseAccordion.AccordionTriggerProps & { iconStyles?: CSS; css?: CSS; chevronID?: string }>
 > = React.forwardRef<
   HTMLButtonElement,
-  PropsWithChildren<BaseAccordion.AccordionTriggerProps & { iconStyles?: CSS; css?: CSS }>
->(({ children, iconStyles, css, ...props }, forwardedRef) => (
+  PropsWithChildren<BaseAccordion.AccordionTriggerProps & { iconStyles?: CSS; css?: CSS; chevronID?: string }>
+>(({ children, iconStyles, css, chevronID, ...props }, forwardedRef) => (
   <StyledHeader css={css}>
     <StyledTrigger {...props} ref={forwardedRef}>
       {children}
-      <StyledChevron aria-hidden css={iconStyles} />
+      <StyledChevron data-testid={chevronID} aria-hidden css={iconStyles} />
     </StyledTrigger>
   </StyledHeader>
 ));

package/src/IconButton/IconButton.tsx

@@ -25,19 +25,14 @@ export const IconButton = styled('button', {
   '&[disabled]': {
     opacity: 0.5,
     cursor: 'not-allowed',
+    backgroundColor: '$secondary_dim',
+    color: '$on_primary_high',
   },
   '&:focus': {
     outline: 'none',
   },
   variants: {
     active: {
-      false: {
-        backgroundColor: '$secondary_dim',
-        color: '$on_primary_high',
-        '&:not([disabled]):hover': {
-          backgroundColor: '$secondary_default',
-        },
-      },
       true: {
         '&:not([disabled]):hover': {
           backgroundColor: '$on_surface_low',

package/src/Prebuilt/IconButton.tsx

@@ -7,22 +7,18 @@ const IconButton = styled(BaseIconButton, {
   border: '1px solid $border_bright',
   bg: '$background_dim',
   r: '$1',
+  '&[disabled]': {
+    opacity: 0.5,
+    cursor: 'not-allowed',
+    backgroundColor: '$secondary_dim',
+    color: '$on_primary_high',
+  },
   variants: {
     active: {
       true: {
         color: '$on_surface_high',
         backgroundColor: 'transparent',
       },
-      false: {
-        border: '1px solid transparent',
-        color: '$on_primary_high',
-      },
-    },
-    disabled: {
-      true: {
-        backgroundColor: '$surface_brighter',
-        color: '$on_surface_low',
-      },
     },
   },
 });

package/src/Prebuilt/components/Chat/ChatBody.tsx

@@ -410,6 +410,7 @@ export const ChatBody = React.forwardRef<VariableSizeList, { scrollToBottom: (co
     }, [blacklistedMessageIDs, messages]);
 
     const vanillaStore = useHMSVanillaStore();
+    const rerenderOnFirstMount = useRef(false);
 
     useEffect(() => {
       const unsubscribe = vanillaStore.subscribe(() => {
@@ -426,6 +427,15 @@ export const ChatBody = React.forwardRef<VariableSizeList, { scrollToBottom: (co
       return unsubscribe;
     }, [vanillaStore, listRef, scrollToBottom]);
 
+    useEffect(() => {
+      // @ts-ignore
+      if (filteredMessages.length > 0 && listRef?.current && !rerenderOnFirstMount.current) {
+        rerenderOnFirstMount.current = true;
+        // @ts-ignore
+        listRef.current.resetAfterIndex(0);
+      }
+    }, [listRef, filteredMessages]);
+
     return filteredMessages.length === 0 ? (
       <EmptyChat />
     ) : (

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

@@ -9,7 +9,7 @@ import { useIsSidepaneTypeOpen, useSidepaneToggle } from '../AppData/useSidepane
 // @ts-ignore: No implicit Any
 import { SIDE_PANE_OPTIONS } from '../../common/constants';
 
-export const ChatToggle = () => {
+export const ChatToggle = ({ onClick }: { onClick?: () => void }) => {
   const countUnreadMessages = useHMSStore(selectUnreadHMSMessagesCount);
   const isChatOpen = useIsSidepaneTypeOpen(SIDE_PANE_OPTIONS.CHAT);
   const toggleChat = useSidepaneToggle(SIDE_PANE_OPTIONS.CHAT);
@@ -21,7 +21,7 @@ export const ChatToggle = () => {
       }}
     >
       <Tooltip key="chat" title={`${isChatOpen ? 'Close' : 'Open'} chat`}>
-        <IconButton onClick={toggleChat} active={!isChatOpen} data-testid="chat_btn">
+        <IconButton onClick={() => (onClick ? onClick() : toggleChat())} active={!isChatOpen} data-testid="chat_btn">
           <ChatIcon />
         </IconButton>
       </Tooltip>

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

@@ -324,12 +324,15 @@ const HandRaisedAccordionParticipantActions = ({ peerId, role }: { peerId: strin
     peerId,
     role,
   });
+  if (!shouldShowStageRoleChange) {
+    return null;
+  }
   return (
     <>
       <Button variant="standard" css={quickActionStyle} onClick={lowerPeerHand}>
         <CrossIcon height={18} width={18} />
       </Button>
-      {shouldShowStageRoleChange && !isInStage && (
+      {!isInStage && (
         <Button variant="primary" onClick={handleStageAction} css={quickActionStyle}>
           <AddIcon height={18} width={18} />
         </Button>

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

@@ -93,6 +93,7 @@ export const RoleAccordion = ({
   return (
     <Accordion.Item value={roleName} css={{ '&:hover .role_actions': { visibility: 'visible' }, mb: '$8' }} ref={ref}>
       <Accordion.Header
+        chevronID={`role_accordion_btn_${roleName}`}
         iconStyles={{ c: '$on_surface_high' }}
         css={{
           textTransform: 'capitalize',
@@ -148,18 +149,17 @@ export const RoleAccordion = ({
             <ChevronRightIcon />
           </Flex>
         ) : null}
-        {isHandRaisedAccordion && (
+        {isHandRaisedAccordion && canBringToStage && (
           <>
             <HorizontalDivider />
             <Flex css={{ w: '100%', p: '$6', gap: '$4' }} justify="center">
               <Button variant="standard" onClick={lowerAllHands} icon css={{ pl: '$2' }}>
                 <CrossIcon /> Lower all hands
               </Button>
-              {canBringToStage && (
-                <Button onClick={bringAllToStage} icon css={{ pl: '$2' }}>
-                  <AddIcon /> {bring_to_stage_label}
-                </Button>
-              )}
+
+              <Button onClick={bringAllToStage} icon css={{ pl: '$2' }}>
+                <AddIcon /> {bring_to_stage_label}
+              </Button>
             </Flex>
           </>
         )}

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { useWhiteboard } from '@100mslive/react-sdk';
+import { useScreenShare, useWhiteboard } from '@100mslive/react-sdk';
 import { PencilDrawIcon } from '@100mslive/react-icons';
 import { Tooltip } from '../../..';
 // @ts-ignore: No implicit Any
@@ -9,14 +9,28 @@ import { ToastManager } from '../Toast/ToastManager';
 
 export const WhiteboardToggle = () => {
   const { toggle, open, isOwner } = useWhiteboard();
+  const { screenSharingPeerId, amIScreenSharing } = useScreenShare();
+  const remoteScreenShare = screenSharingPeerId && !amIScreenSharing;
+  const disabled = remoteScreenShare || (open && !isOwner);
+
   if (!toggle) {
     return null;
   }
 
   return (
-    <Tooltip key="whiteboard" title={`${open ? 'Close' : 'Open'} Whiteboard`}>
+    <Tooltip
+      key="whiteboard"
+      title={
+        remoteScreenShare
+          ? 'Cannot open whiteboard when viewing a shared screen'
+          : `${open ? 'Close' : 'Open'} Whiteboard`
+      }
+    >
       <IconButton
         onClick={async () => {
+          if (disabled) {
+            return;
+          }
           try {
             await toggle();
           } catch (error) {
@@ -24,7 +38,7 @@ export const WhiteboardToggle = () => {
           }
         }}
         active={!open}
-        disabled={open && !isOwner}
+        disabled={disabled}
         data-testid="whiteboard_btn"
       >
         <PencilDrawIcon />

package/src/Prebuilt/components/HMSVideo/HMSVideo.jsx

@@ -9,6 +9,7 @@ export const HMSVideo = forwardRef(({ children, ...props }, videoRef) => {
         size: '100%',
         position: 'relative',
         justifyContent: 'center',
+        transition: 'all 0.3s ease-in-out',
         '@md': {
           height: 'auto',
           '& video': {

package/src/Prebuilt/components/HMSVideo/PlayPauseButton.tsx

@@ -9,8 +9,8 @@ export const PlayPauseButton = ({
   height = 20,
 }: {
   isPaused: boolean;
-  width: number;
-  height: number;
+  width?: number;
+  height?: number;
 }) => {
   const { hlsPlayer } = useHMSPlayerContext();
   const onClick = async (event: MouseEvent) => {

package/src/Prebuilt/components/HMSVideo/PlayPauseSeekControls.tsx

@@ -0,0 +1,158 @@
+import React from 'react';
+import { useMedia } from 'react-use';
+import { BackwardArrowIcon, ForwardArrowIcon } from '@100mslive/react-icons';
+import { Box, Flex } from '../../../Layout';
+import { Text } from '../../../Text';
+import { config } from '../../../Theme';
+import { PlayPauseButton } from './PlayPauseButton';
+import { SeekControl } from './SeekControl';
+import { useIsLandscape } from '../../common/hooks';
+
+// desktop buttons
+export const PlayPauseSeekControls = ({
+  isPaused,
+  onSeekTo,
+}: {
+  isPaused: boolean;
+  onSeekTo: (value: number) => void;
+}) => {
+  return (
+    <>
+      <SeekControl
+        onClick={e => {
+          e.stopPropagation();
+          onSeekTo(-10);
+        }}
+        title="backward"
+      >
+        <BackwardArrowIcon width={20} height={20} />
+      </SeekControl>
+      <PlayPauseButton isPaused={isPaused} />
+      <SeekControl
+        onClick={e => {
+          e.stopPropagation();
+          onSeekTo(10);
+        }}
+        title="forward"
+      >
+        <ForwardArrowIcon width={20} height={20} />
+      </SeekControl>
+    </>
+  );
+};
+
+// overlay handlers
+export const PlayPauseSeekOverlayControls = ({
+  isPaused,
+  showControls,
+  hoverControlsVisible,
+}: {
+  isPaused: boolean;
+  showControls: boolean;
+  hoverControlsVisible: {
+    seekBackward: boolean;
+    seekForward: boolean;
+    pausePlay: boolean;
+  };
+}) => {
+  const isMobile = useMedia(config.media.md);
+  const isLandscape = useIsLandscape();
+
+  if (!isMobile && !isLandscape) {
+    // show desktopOverflow icons
+    return (
+      <>
+        <Flex
+          css={{
+            bg: 'rgba(0, 0, 0, 0.6)',
+            r: '$round',
+            size: '$24',
+            visibility: hoverControlsVisible.seekBackward ? `` : `hidden`,
+            opacity: hoverControlsVisible.seekBackward ? `1` : '0',
+          }}
+          direction="column"
+          align="center"
+        >
+          <SeekControl title="backward">
+            <BackwardArrowIcon width={52} height={52} />
+          </SeekControl>
+          <Text variant="body2" css={{ fontWeight: '$regular' }}>
+            10 secs
+          </Text>
+        </Flex>
+        <Box
+          css={{
+            bg: 'rgba(0, 0, 0, 0.6)',
+            r: '$round',
+            visibility: hoverControlsVisible.pausePlay ? `` : `hidden`,
+            opacity: hoverControlsVisible.pausePlay ? `1` : '0',
+          }}
+        >
+          <PlayPauseButton isPaused={isPaused} width={48} height={48} />
+        </Box>
+        <Flex
+          css={{
+            bg: 'rgba(0, 0, 0, 0.6)',
+            r: '$round',
+            size: '$24',
+            visibility: hoverControlsVisible.seekForward ? `` : `hidden`,
+            opacity: hoverControlsVisible.seekForward ? `1` : '0',
+          }}
+          direction="column"
+          align="center"
+        >
+          <SeekControl title="forward">
+            <ForwardArrowIcon width={52} height={52} />
+          </SeekControl>
+          <Text variant="body2" css={{ fontWeight: '$regular' }}>
+            10 secs
+          </Text>
+        </Flex>
+      </>
+    );
+  }
+
+  return (
+    <Flex
+      align="center"
+      justify="center"
+      css={{
+        position: 'absolute',
+        bg: '#00000066',
+        display: 'inline-flex',
+        gap: '$2',
+        zIndex: 1,
+        size: '100%',
+        visibility: showControls ? `` : `hidden`,
+        opacity: showControls ? `1` : '0',
+      }}
+    >
+      <SeekControl
+        title="backward"
+        css={{
+          visibility: hoverControlsVisible.seekBackward ? `` : `hidden`,
+          opacity: hoverControlsVisible.seekBackward ? `1` : '0',
+        }}
+      >
+        <BackwardArrowIcon width={32} height={32} />
+      </SeekControl>
+      <Box
+        css={{
+          bg: 'rgba(0, 0, 0, 0.6)',
+          r: '$round',
+        }}
+      >
+        <PlayPauseButton isPaused={isPaused} width={48} height={48} />
+      </Box>
+      <SeekControl
+        title="forward"
+        css={{
+          visibility: hoverControlsVisible.seekForward ? `` : `hidden`,
+          opacity: hoverControlsVisible.seekForward ? `1` : '0',
+        }}
+      >
+        <ForwardArrowIcon width={32} height={32} />
+      </SeekControl>
+    </Flex>
+  );
+};

package/src/Prebuilt/components/HMSVideo/{SeekControls.tsx → SeekControl.tsx}

@@ -1,7 +1,7 @@
 import React, { MouseEventHandler } from 'react';
 import { IconButton, Tooltip } from '../../..';
 
-export const SeekControls = ({
+export const SeekControl = ({
   title,
   onClick,
   children,
@@ -9,7 +9,7 @@ export const SeekControls = ({
 }: {
   title: string;
   onClick?: MouseEventHandler<HTMLButtonElement>;
-  css: any;
+  css?: any;
   children: React.ReactNode;
 }) => {
   return (

package/src/Prebuilt/components/HMSVideo/VideoProgress.tsx

@@ -25,8 +25,12 @@ export const VideoProgress = ({
     if (videoEl.buffered.length > 0) {
       bufferProgress = Math.floor(getPercentage(videoEl.buffered?.end(0), duration));
     }
-    setVideoProgress(isNaN(videoProgress) ? 0 : videoProgress);
-    setBufferProgress(isNaN(bufferProgress) ? 0 : bufferProgress);
+    if (!isNaN(videoProgress)) {
+      setVideoProgress(videoProgress);
+    }
+    if (!isNaN(bufferProgress)) {
+      setBufferProgress(bufferProgress);
+    }
   }, [videoEl]);
   const timeupdateHandler = useCallback(() => {
     if (!videoEl || seekProgress) {
@@ -42,7 +46,7 @@ export const VideoProgress = ({
     return function cleanup() {
       videoEl?.removeEventListener('timeupdate', timeupdateHandler);
     };
-  }, [timeupdateHandler, videoEl]);
+  }, [setProgress, timeupdateHandler, videoEl]);
 
   const onProgress = (progress: number[]) => {
     const progress1 = Math.floor(getPercentage(progress[0], 100));

package/src/Prebuilt/components/HMSVideo/index.ts

@@ -2,15 +2,13 @@
 import { LeftControls, RightControls, VideoControls } from './Controls';
 // @ts-ignore
 import { HMSVideo } from './HMSVideo';
-import { PlayPauseButton } from './PlayPauseButton';
-import { SeekControls } from './SeekControls';
+import { PlayPauseSeekControls, PlayPauseSeekOverlayControls } from './PlayPauseSeekControls';
 import { VideoProgress } from './VideoProgress';
 import { VideoTime } from './VideoTime';
 import { VolumeControl } from './VolumeControl';
 
 export const HMSVideoPlayer = {
   Root: HMSVideo,
-  PlayPauseButton: PlayPauseButton,
   Progress: VideoProgress,
   Duration: VideoTime,
   Volume: VolumeControl,
@@ -19,5 +17,8 @@ export const HMSVideoPlayer = {
     Left: LeftControls,
     Right: RightControls,
   },
-  Seeker: SeekControls,
+  PlayPauseSeekControls: {
+    Overlay: PlayPauseSeekOverlayControls,
+    Button: PlayPauseSeekControls,
+  },
 };

package/src/Prebuilt/components/IconButtonWithOptions/IconButtonWithOptions.tsx

@@ -25,24 +25,24 @@ const IconSection = styled(IconButton, {
   p: '$4',
   r: '$1',
   bg: 'transparent',
-  borderTopRightRadius: 0,
+  borderTopRightRadius: '0 !important',
   borderColor: '$border_bright',
-  borderBottomRightRadius: 0,
+  borderBottomRightRadius: '0 !important',
   position: 'relative',
   '&:not([disabled]):focus-visible': {
     zIndex: 1,
   },
   '@md': {
     mx: 0,
-    borderTopRightRadius: '$1',
-    borderBottomRightRadius: '$1',
+    borderTopRightRadius: '$1 !important',
+    borderBottomRightRadius: '$1 !important',
   },
   variants: {
     ...variants,
     hideOptions: {
       true: {
-        borderTopRightRadius: '$1',
-        borderBottomRightRadius: '$1',
+        borderTopRightRadius: '$1 !important',
+        borderBottomRightRadius: '$1 !important',
       },
     },
   },
@@ -53,10 +53,10 @@ const OptionsSection = styled(IconButton, {
   h: '$14',
   p: '$4 $2',
   r: '$1',
-  borderTopLeftRadius: 0,
+  borderTopLeftRadius: '0 !important',
   borderColor: '$border_bright',
-  borderBottomLeftRadius: 0,
-  borderLeftWidth: 0,
+  borderBottomLeftRadius: '0 !important',
+  borderLeftWidth: '0 !important',
   position: 'relative',
   '&:not([disabled]):focus-visible': {
     zIndex: 1,

package/src/Prebuilt/components/VideoLayouts/GridLayout.tsx

@@ -5,12 +5,14 @@ import {
   selectLocalPeerRoleName,
   selectPeers,
   selectPeerScreenSharing,
+  selectWhiteboard,
   useHMSStore,
   useHMSVanillaStore,
 } from '@100mslive/react-sdk';
 import { EqualProminence } from './EqualProminence';
 import { RoleProminence } from './RoleProminence';
 import { ScreenshareLayout } from './ScreenshareLayout';
+import { WhiteboardLayout } from './WhiteboardLayout';
 // @ts-ignore: No implicit Any
 import { usePinnedTrack, useSetAppDataByKey } from '../AppData/useUISettings';
 import { VideoTileContext } from '../hooks/useVideoTileLayout';
@@ -40,6 +42,7 @@ export const GridLayout = ({
   hide_metadata_on_tile = false,
 }: GridLayoutProps) => {
   const peerSharing = useHMSStore(selectPeerScreenSharing);
+  const whiteboard = useHMSStore(selectWhiteboard);
   const pinnedTrack = usePinnedTrack();
   const peers = useHMSStore(selectPeers);
   const localPeerRole = useHMSStore(selectLocalPeerRoleName);
@@ -53,9 +56,9 @@ export const GridLayout = ({
       )) ||
     pinnedTrack;
   const updatedPeers = useMemo(() => {
-    // remove screenshare peer from active speaker sorting
-    if (activeScreensharePeerId) {
-      return peers.filter(peer => peer.id !== activeScreensharePeerId);
+    // remove screenshare/whiteboard peer from active speaker sorting
+    if (activeScreensharePeerId || whiteboard?.open) {
+      return peers.filter(peer => peer.id !== activeScreensharePeerId || peer.customerUserId !== whiteboard?.owner);
     }
     if (isInsetEnabled) {
       const isLocalPeerPinned = localPeerID === pinnedTrack?.peerId;
@@ -67,7 +70,16 @@ export const GridLayout = ({
       }
     }
     return peers;
-  }, [isInsetEnabled, activeScreensharePeerId, localPeerRole, localPeerID, prominentRoles, peers, pinnedTrack]);
+  }, [
+    isInsetEnabled,
+    whiteboard,
+    activeScreensharePeerId,
+    localPeerRole,
+    localPeerID,
+    prominentRoles,
+    peers,
+    pinnedTrack,
+  ]);
   const vanillaStore = useHMSVanillaStore();
   const [sortedPeers, setSortedPeers] = useState(updatedPeers);
   const peersSorter = useMemo(() => new PeersSorter(vanillaStore), [vanillaStore]);
@@ -104,6 +116,17 @@ export const GridLayout = ({
         />
       </VideoTileContext.Provider>
     );
+  } else if (whiteboard?.open) {
+    return (
+      <VideoTileContext.Provider value={tileLayout}>
+        <WhiteboardLayout
+          peers={sortedPeers}
+          onPageSize={setPageSize}
+          onPageChange={setMainPage}
+          edgeToEdge={edge_to_edge}
+        />
+      </VideoTileContext.Provider>
+    );
   } else if (isRoleProminence) {
     return (
       <VideoTileContext.Provider value={tileLayout}>