@100mslive/roomkit-react 0.1.7-alpha.0 → 0.1.8-alpha.0

package/package.json

@@ -10,7 +10,7 @@
     "prebuilt",
     "roomkit"
   ],
-  "version": "0.1.7-alpha.0",
+  "version": "0.1.8-alpha.0",
   "author": "100ms",
   "license": "MIT",
   "files": [
@@ -76,10 +76,10 @@
     "react": ">=17.0.2 <19.0.0"
   },
   "dependencies": {
-    "@100mslive/hls-player": "0.1.16-alpha.0",
-    "@100mslive/hms-virtual-background": "1.11.16-alpha.0",
-    "@100mslive/react-icons": "0.8.16-alpha.0",
-    "@100mslive/react-sdk": "0.8.16-alpha.0",
+    "@100mslive/hls-player": "0.1.17-alpha.0",
+    "@100mslive/hms-virtual-background": "1.11.17-alpha.0",
+    "@100mslive/react-icons": "0.8.17-alpha.0",
+    "@100mslive/react-sdk": "0.8.17-alpha.0",
     "@100mslive/types-prebuilt": "0.12.0",
     "@emoji-mart/data": "^1.0.6",
     "@emoji-mart/react": "^1.0.1",
@@ -115,5 +115,5 @@
     "uuid": "^8.3.2",
     "worker-timers": "^7.0.40"
   },
-  "gitHead": "02a796684045c2468c14db4cb894c56a17c6c2ba"
+  "gitHead": "d6e072de081b508a297ebc1684a33a8e9db048ef"
 }

package/src/AudioLevel/AudioLevel.tsx

@@ -1,34 +1,83 @@
-import { useCallback, useRef } from 'react';
-import { HMSTrackID } from '@100mslive/hms-video-store';
-import { useAudioLevelStyles } from '@100mslive/react-sdk';
-import { useTheme } from '../Theme';
+import React, { useEffect, useRef } from 'react';
+import { selectTrackAudioByID, useHMSVanillaStore } from '@100mslive/react-sdk';
+import { Box, Flex } from '../Layout';
+import { keyframes } from '../Theme';
+//@ts-ignore
+import bg from './audio-level.png';
 
-/**
- * pass in a track id and get a ref. That ref can be attached to an element which will have border
- * as per audio level post that.
- */
-export function useBorderAudioLevel(audioTrackId?: HMSTrackID) {
-  const { theme } = useTheme();
-  const color = theme.colors.primary_default.value;
-  const getStyle = useCallback(
-    (level: number) => {
-      const style: Record<string, string> = {
-        transition: 'outline 0.4s ease-in-out',
-      };
-      style['outline'] = level ? `${sigmoid(level) * 4}px solid ${color}` : '0px solid transparent';
-      return style;
-    },
-    [color],
+// keep the calculated values before hand to avoid recalcuation everytime
+const positionValues = new Array(101).fill(0).reduce((acc, _, index) => {
+  acc[index] = Math.round((index / 100) * 4) / 4; // convert to 0.25 multiples
+  return acc;
+}, {});
+
+const barAnimation = keyframes({
+  from: {
+    maskSize: '4em .8em',
+    '-webkit-mask-position-y': '.1em',
+    maskPosition: 'initial .1em',
+  },
+
+  '50%': {
+    maskSize: '4em 1em',
+    '-webkit-mask-position-y': 0,
+    maskPosition: 'initial 0',
+  },
+
+  to: {
+    maskSize: '4em .8em',
+    '-webkit-mask-position-y': '.1em',
+    maskPosition: 'initial 0',
+  },
+});
+
+const AudioBar = () => {
+  return (
+    <Box
+      css={{
+        width: '.25em',
+        height: '1em',
+        maskImage: `url(${bg})`,
+        '-webkit-mask-repeat': 'no-repeat',
+        backgroundColor: '$on_primary_high',
+        maskSize: '4em 1em',
+      }}
+    />
   );
-  const ref = useRef(null);
-  useAudioLevelStyles({
-    trackId: audioTrackId,
-    getStyle,
-    ref,
-  });
-  return ref;
-}
+};
+
+export const AudioLevel = ({ trackId, size }: { trackId?: string; size?: 'small' | 'medium' }) => {
+  const ref = useRef<HTMLDivElement | null>(null);
+  const vanillaStore = useHMSVanillaStore();
 
-export const sigmoid = (z: number) => {
-  return 1 / (1 + Math.exp(-z));
+  useEffect(() => {
+    const unsubscribe = vanillaStore.subscribe(audioLevel => {
+      if (ref.current) {
+        let index = 0;
+        //@ts-ignore
+        for (const child of ref.current.children) {
+          const positionX = `-${positionValues[audioLevel] * (index === 1 ? 2.5 : 1.25)}em`;
+          child.style['-webkit-mask-position-x'] = positionX;
+          child.style['mask-position'] = `${positionX} 0`;
+          child.style['animation'] =
+            positionValues[audioLevel] > 0 ? `${barAnimation} 0.6s steps(3,jump-none) 0s infinite` : 'none';
+          index++;
+        }
+      }
+    }, selectTrackAudioByID(trackId));
+    return unsubscribe;
+  }, [vanillaStore, trackId]);
+  return (
+    <Flex
+      ref={ref}
+      css={{
+        fontSize: size === 'small' ? '0.75rem' : '1rem',
+        gap: size === 'small' ? '$1' : '$2',
+      }}
+    >
+      <AudioBar />
+      <AudioBar />
+      <AudioBar />
+    </Flex>
+  );
 };

package/src/AudioLevel/index.ts

@@ -1 +1,2 @@
-export { useBorderAudioLevel } from './AudioLevel';
+export { useBorderAudioLevel } from './useBorderAudioLevel';
+export { AudioLevel } from './AudioLevel';

package/src/AudioLevel/useBorderAudioLevel.tsx

@@ -0,0 +1,34 @@
+import { useCallback, useRef } from 'react';
+import { HMSTrackID } from '@100mslive/hms-video-store';
+import { useAudioLevelStyles } from '@100mslive/react-sdk';
+import { useTheme } from '../Theme';
+
+/**
+ * pass in a track id and get a ref. That ref can be attached to an element which will have border
+ * as per audio level post that.
+ */
+export function useBorderAudioLevel(audioTrackId?: HMSTrackID) {
+  const { theme } = useTheme();
+  const color = theme.colors.primary_default.value;
+  const getStyle = useCallback(
+    (level: number) => {
+      const style: Record<string, string> = {
+        transition: 'outline 0.4s ease-in-out',
+      };
+      style['outline'] = level ? `${sigmoid(level) * 4}px solid ${color}` : '0px solid transparent';
+      return style;
+    },
+    [color],
+  );
+  const ref = useRef(null);
+  useAudioLevelStyles({
+    trackId: audioTrackId,
+    getStyle,
+    ref,
+  });
+  return ref;
+}
+
+export const sigmoid = (z: number) => {
+  return 1 / (1 + Math.exp(-z));
+};

package/src/Input/Input.tsx

@@ -20,7 +20,7 @@ export const Input = styled('input', {
     border: '1px solid transparent',
   },
   '&::placeholder': {
-    color: '$on_surface_low',
+    color: '$on_surface_medium',
   },
   variants: {
     alert_error_default: {

package/src/Prebuilt/App.tsx

@@ -218,6 +218,7 @@ export const HMSPrebuilt = React.forwardRef<HMSPrebuiltRefType, HMSPrebuiltProps
                       <AppData appDetails={metadata} tokenEndpoint={tokenByRoomIdRoleEndpoint} />
                       <Init />
                       <Box
+                        id="prebuilt-container"
                         css={{
                           bg: '$background_dim',
                           size: '100%',

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

@@ -24,6 +24,7 @@ import { Tooltip } from '../../../Tooltip';
 import emptyChat from '../../images/empty-chat.svg';
 import { useRoomLayoutConferencingScreen } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
 import { useSetPinnedMessage } from '../hooks/useSetPinnedMessage';
+import { useUnreadCount } from './useUnreadCount';
 
 const formatTime = date => {
   if (!(date instanceof Date)) {
@@ -192,119 +193,127 @@ const SenderName = styled(Text, {
   fontWeight: '$semiBold',
 });
 
-const ChatMessage = React.memo(({ index, style = {}, message, setRowHeight, onPin }) => {
-  const { ref, inView } = useInView({ threshold: 0.5, triggerOnce: true });
-  const rowRef = useRef(null);
-  useEffect(() => {
-    if (rowRef.current) {
-      setRowHeight(index, rowRef.current.clientHeight);
-    }
-  }, [index, setRowHeight]);
-  const isMobile = useMedia(cssConfig.media.md);
-  const { elements } = useRoomLayoutConferencingScreen();
-  const isOverlay = elements?.chat?.is_overlay && isMobile;
-  const hmsActions = useHMSActions();
-  const localPeerId = useHMSStore(selectLocalPeerID);
-  const permissions = useHMSStore(selectPermissions);
-  const messageType = getMessageType({
-    roles: message.recipientRoles,
-    receiver: message.recipientPeer,
-  });
-  // show pin action only if peer has remove others permission and the message is of broadcast type
-  const showPinAction = permissions.removeOthers && !messageType && elements?.chat?.allow_pinning_messages;
+const ChatMessage = React.memo(
+  ({ index, style = {}, message, setRowHeight, isLast = false, unreadCount = 0, scrollToBottom, onPin }) => {
+    const { ref, inView } = useInView({ threshold: 0.5, triggerOnce: true });
+    const rowRef = useRef(null);
+    useEffect(() => {
+      if (rowRef.current) {
+        setRowHeight(index, rowRef.current.clientHeight);
+      }
+    }, [index, setRowHeight]);
+    const isMobile = useMedia(cssConfig.media.md);
+    const { elements } = useRoomLayoutConferencingScreen();
+    const isOverlay = elements?.chat?.is_overlay && isMobile;
+    const hmsActions = useHMSActions();
+    const localPeerId = useHMSStore(selectLocalPeerID);
+    const permissions = useHMSStore(selectPermissions);
+    const messageType = getMessageType({
+      roles: message.recipientRoles,
+      receiver: message.recipientPeer,
+    });
+    // show pin action only if peer has remove others permission and the message is of broadcast type
+    const showPinAction = permissions.removeOthers && !messageType && elements?.chat?.allow_pinning_messages;
 
-  useEffect(() => {
-    if (message.id && !message.read && inView) {
-      hmsActions.setMessageRead(true, message.id);
-    }
-  }, [message.read, hmsActions, inView, message.id]);
+    useEffect(() => {
+      if (message.id && !message.read && inView) {
+        hmsActions.setMessageRead(true, message.id);
+      }
+    }, [message.read, hmsActions, inView, message.id]);
 
-  return (
-    <Box
-      ref={ref}
-      as="div"
-      css={{ mb: '$10', pr: '$10', mt: '$8', '&:hover .chat_actions': { opacity: 1 } }}
-      style={style}
-    >
-      <Flex
-        ref={rowRef}
-        align="center"
-        css={{
-          flexWrap: 'wrap',
-          // Theme independent color, token should not be used for transparent chat
-          bg: messageType ? (isOverlay ? 'rgba(0, 0, 0, 0.64)' : '$surface_default') : undefined,
-          r: messageType ? '$1' : undefined,
-          px: messageType ? '$4' : '$2',
-          py: messageType ? '$4' : 0,
-          userSelect: 'none',
-        }}
-        key={message.time}
-        data-testid="chat_msg"
+    useEffect(() => {
+      if (isLast && inView && unreadCount >= 1) {
+        scrollToBottom(1);
+      }
+    }, [inView, isLast, scrollToBottom, unreadCount]);
+
+    return (
+      <Box
+        ref={ref}
+        as="div"
+        css={{ mb: '$10', pr: '$10', mt: '$8', '&:hover .chat_actions': { opacity: 1 } }}
+        style={style}
       >
-        <Text
+        <Flex
+          ref={rowRef}
+          align="center"
           css={{
-            color: isOverlay ? '#FFF' : '$on_surface_high',
-            fontWeight: '$semiBold',
-            display: 'inline-flex',
-            alignItems: 'center',
-            justifyContent: 'space-between',
-            width: '100%',
+            flexWrap: 'wrap',
+            // Theme independent color, token should not be used for transparent chat
+            bg: messageType ? (isOverlay ? 'rgba(0, 0, 0, 0.64)' : '$surface_default') : undefined,
+            r: messageType ? '$1' : undefined,
+            px: messageType ? '$4' : '$2',
+            py: messageType ? '$4' : 0,
+            userSelect: 'none',
           }}
-          as="div"
+          key={message.time}
+          data-testid="chat_msg"
         >
-          <Flex align="baseline">
-            {message.senderName === 'You' || !message.senderName ? (
-              <SenderName as="span" variant="sm" css={{ color: isOverlay ? '#FFF' : '$on_surface_high' }}>
-                {message.senderName || 'Anonymous'}
-              </SenderName>
-            ) : (
-              <Tooltip title={message.senderName} side="top" align="start">
+          <Text
+            css={{
+              color: isOverlay ? '#FFF' : '$on_surface_high',
+              fontWeight: '$semiBold',
+              display: 'inline-flex',
+              alignItems: 'center',
+              justifyContent: 'space-between',
+              width: '100%',
+            }}
+            as="div"
+          >
+            <Flex align="baseline">
+              {message.senderName === 'You' || !message.senderName ? (
                 <SenderName as="span" variant="sm" css={{ color: isOverlay ? '#FFF' : '$on_surface_high' }}>
-                  {message.senderName}
+                  {message.senderName || 'Anonymous'}
                 </SenderName>
-              </Tooltip>
-            )}
-            {!isOverlay ? (
-              <Text
-                as="span"
-                variant="xs"
-                css={{
-                  ml: '$4',
-                  color: '$on_surface_medium',
-                  flexShrink: 0,
-                }}
-              >
-                {formatTime(message.time)}
-              </Text>
-            ) : null}
-          </Flex>
-          <MessageType
-            hasCurrentUserSent={message.sender === localPeerId}
-            receiver={message.recipientPeer}
-            roles={message.recipientRoles}
-          />
-          {!isOverlay ? <ChatActions onPin={onPin} showPinAction={showPinAction} /> : null}
-        </Text>
-        <Text
-          variant="sm"
-          css={{
-            w: '100%',
-            mt: '$2',
-            wordBreak: 'break-word',
-            whiteSpace: 'pre-wrap',
-            userSelect: 'all',
-            color: isOverlay ? '#FFF' : '$on_surface_high',
-          }}
-          onClick={e => e.stopPropagation()}
-        >
-          <AnnotisedMessage message={message.message} />
-        </Text>
-      </Flex>
-    </Box>
-  );
-});
+              ) : (
+                <Tooltip title={message.senderName} side="top" align="start">
+                  <SenderName as="span" variant="sm" css={{ color: isOverlay ? '#FFF' : '$on_surface_high' }}>
+                    {message.senderName}
+                  </SenderName>
+                </Tooltip>
+              )}
+              {!isOverlay ? (
+                <Text
+                  as="span"
+                  variant="xs"
+                  css={{
+                    ml: '$4',
+                    color: '$on_surface_medium',
+                    flexShrink: 0,
+                  }}
+                >
+                  {formatTime(message.time)}
+                </Text>
+              ) : null}
+            </Flex>
+            <MessageType
+              hasCurrentUserSent={message.sender === localPeerId}
+              receiver={message.recipientPeer}
+              roles={message.recipientRoles}
+            />
+            {!isOverlay ? <ChatActions onPin={onPin} showPinAction={showPinAction} /> : null}
+          </Text>
+          <Text
+            variant="sm"
+            css={{
+              w: '100%',
+              mt: '$2',
+              wordBreak: 'break-word',
+              whiteSpace: 'pre-wrap',
+              userSelect: 'all',
+              color: isOverlay ? '#FFF' : '$on_surface_high',
+            }}
+            onClick={e => e.stopPropagation()}
+          >
+            <AnnotisedMessage message={message.message} />
+          </Text>
+        </Flex>
+      </Box>
+    );
+  },
+);
 const ChatList = React.forwardRef(
-  ({ width, height, setRowHeight, getRowHeight, messages, scrollToBottom }, listRef) => {
+  ({ width, height, setRowHeight, getRowHeight, messages, unreadCount = 0, scrollToBottom }, listRef) => {
     const { setPinnedMessage } = useSetPinnedMessage();
     useLayoutEffect(() => {
       if (listRef.current && listRef.current.scrollToItem) {
@@ -331,6 +340,9 @@ const ChatList = React.forwardRef(
             key={messages[index].id}
             message={messages[index]}
             setRowHeight={setRowHeight}
+            unreadCount={unreadCount}
+            isLast={index >= messages.length - 2}
+            scrollToBottom={scrollToBottom}
             onPin={() => setPinnedMessage(messages[index])}
           />
         )}
@@ -338,7 +350,7 @@ const ChatList = React.forwardRef(
     );
   },
 );
-const VirtualizedChatMessages = React.forwardRef(({ messages, scrollToBottom }, listRef) => {
+const VirtualizedChatMessages = React.forwardRef(({ messages, unreadCount = 0, scrollToBottom }, listRef) => {
   const rowHeights = useRef({});
 
   function getRowHeight(index) {
@@ -377,6 +389,7 @@ const VirtualizedChatMessages = React.forwardRef(({ messages, scrollToBottom },
             getRowHeight={getRowHeight}
             scrollToBottom={scrollToBottom}
             ref={listRef}
+            unreadCount={unreadCount}
           />
         )}
       </AutoSizer>
@@ -394,6 +407,7 @@ export const ChatBody = React.forwardRef(({ role, peerId, scrollToBottom }, list
   messages = useMemo(() => messages?.filter(message => message.type === 'chat') || [], [messages]);
   const isMobile = useMedia(cssConfig.media.md);
   const { elements } = useRoomLayoutConferencingScreen();
+  const unreadCount = useUnreadCount({ role, peerId });
 
   if (messages.length === 0 && !(isMobile && elements?.chat?.is_overlay)) {
     return (
@@ -425,7 +439,12 @@ export const ChatBody = React.forwardRef(({ role, peerId, scrollToBottom }, list
 
   return (
     <Fragment>
-      <VirtualizedChatMessages messages={messages} scrollToBottom={scrollToBottom} ref={listRef} />
+      <VirtualizedChatMessages
+        messages={messages}
+        scrollToBottom={scrollToBottom}
+        unreadCount={unreadCount}
+        ref={listRef}
+      />
     </Fragment>
   );
 });

package/src/Prebuilt/components/{Chip.jsx → Chip.tsx}

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Flex } from '../../Layout';
 import { Text } from '../../Text';
+import { CSS } from '../../Theme';
 
 const Chip = ({
   icon = <></>,
@@ -8,12 +9,22 @@ const Chip = ({
   backgroundColor = '$surface_default',
   textColor = '$on_surface_high',
   hideIfNoContent = false,
+  onClick,
+  css = {},
+}: {
+  icon?: React.JSX.Element;
+  content: string;
+  backgroundColor?: string;
+  textColor?: string;
+  hideIfNoContent?: boolean;
+  onClick?: () => void | Promise<void>;
+  css?: CSS;
 }) => {
   if (hideIfNoContent && !content) {
-    return;
+    return null;
   }
   return (
-    <Flex align="center" css={{ backgroundColor, p: '$4 $6', borderRadius: '$4' }}>
+    <Flex align="center" css={{ backgroundColor, p: '$4 $6', borderRadius: '$4', ...css }} onClick={() => onClick?.()}>
       {icon}
       <Text variant="sm" css={{ fontWeight: '$semiBold', color: textColor, ml: '$2' }}>
         {content}

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

@@ -127,13 +127,15 @@ const VirtualizedParticipants = ({ peersOrderedByRoles = {}, isConnected, filter
         flex: '1 1 0',
       }}
     >
-      <RoleAccordion
-        peerList={handRaisedList}
-        roleName="Hand Raised"
-        filter={filter}
-        isConnected={isConnected}
-        isHandRaisedAccordion
-      />
+      {handRaisedList.length > 0 ? (
+        <RoleAccordion
+          peerList={handRaisedList}
+          roleName="Hand Raised"
+          filter={filter}
+          isConnected={isConnected}
+          isHandRaisedAccordion
+        />
+      ) : null}
       {Object.keys(peersOrderedByRoles).map(role => (
         <RoleAccordion
           key={role}
@@ -179,7 +181,10 @@ export const Participant = ({ peer, isConnected }) => {
 const ParticipantActions = React.memo(({ peerId, role, isLocal }) => {
   const isHandRaised = useHMSStore(selectHasPeerHandRaised(peerId));
   const canChangeRole = useHMSStore(selectPermissions)?.changeRole;
-  const shouldShowMoreActions = canChangeRole;
+  const canRemoveOthers = useHMSStore(selectPermissions)?.removeOthers;
+  const { elements } = useRoomLayoutConferencingScreen();
+  const { on_stage_exp } = elements || {};
+  const shouldShowMoreActions = (on_stage_exp && canChangeRole) || canRemoveOthers;
   const isAudioMuted = !useHMSStore(selectIsPeerAudioEnabled(peerId));
 
   return (
@@ -210,15 +215,21 @@ const ParticipantActions = React.memo(({ peerId, role, isLocal }) => {
         </Flex>
       ) : null}
 
-      {shouldShowMoreActions && !isLocal ? <ParticipantMoreActions peerId={peerId} role={role} /> : null}
+      {shouldShowMoreActions && !isLocal ? (
+        <ParticipantMoreActions
+          peerId={peerId}
+          role={role}
+          elements={elements}
+          canChangeRole={canChangeRole}
+          canRemoveOthers={canRemoveOthers}
+        />
+      ) : null}
     </Flex>
   );
 });
 
-const ParticipantMoreActions = ({ peerId, role }) => {
+const ParticipantMoreActions = ({ peerId, role, elements, canChangeRole, canRemoveOthers }) => {
   const hmsActions = useHMSActions();
-  const { changeRole: canChangeRole, removeOthers: canRemoveOthers } = useHMSStore(selectPermissions);
-  const { elements } = useRoomLayoutConferencingScreen();
   const {
     bring_to_stage_label,
     remove_from_stage_label,
@@ -327,7 +338,7 @@ export const ParticipantSearch = ({ onSearch, placeholder, inSidePane = false })
       <Input
         type="text"
         placeholder={placeholder || 'Search for participants'}
-        css={{ w: '100%', p: '$6', pl: '$14', mr: '$4', bg: inSidePane ? '$surface_default' : '$surface_dim' }}
+        css={{ w: '100%', p: '$6', pl: '$16', mr: '$4', bg: inSidePane ? '$surface_default' : '$surface_dim' }}
         value={value}
         onKeyDown={event => {
           event.stopPropagation();