@100mslive/roomkit-react 0.1.7 → 0.1.8

package/package.json

@@ -10,7 +10,7 @@
     "prebuilt",
     "roomkit"
   ],
-  "version": "0.1.7",
+  "version": "0.1.8",
   "author": "100ms",
   "license": "MIT",
   "files": [
@@ -76,10 +76,10 @@
     "react": ">=17.0.2 <19.0.0"
   },
   "dependencies": {
-    "@100mslive/hls-player": "0.1.16",
-    "@100mslive/hms-virtual-background": "1.11.16",
-    "@100mslive/react-icons": "0.8.16",
-    "@100mslive/react-sdk": "0.8.16",
+    "@100mslive/hls-player": "0.1.17",
+    "@100mslive/hms-virtual-background": "1.11.17",
+    "@100mslive/react-icons": "0.8.17",
+    "@100mslive/react-sdk": "0.8.17",
     "@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": "c06edac3e71481de08e948ffe0affaf705564ad1"
+  "gitHead": "966ed9ffac3d55586196ad0b738eb1977dfc2ff7"
 }

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.1em',
+  },
+});
+
+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/Prebuilt/App.tsx

@@ -24,6 +24,7 @@ import { Init } from './components/init/Init';
 import { KeyboardHandler } from './components/Input/KeyboardInputManager';
 // @ts-ignore: No implicit Any
 import { Notifications } from './components/Notifications';
+import { HeadlessEndRoomListener } from './components/Notifications/HeadlessEndRoomListener';
 // @ts-ignore: No implicit Any
 import PostLeave from './components/PostLeave';
 // @ts-ignore: No implicit Any
@@ -68,6 +69,7 @@ export type HMSPrebuiltProps = {
   roomId?: string;
   role?: string;
   onLeave?: () => void;
+  onJoin?: () => void;
 };
 
 export type HMSPrebuiltRefType = {
@@ -90,6 +92,7 @@ export const HMSPrebuilt = React.forwardRef<HMSPrebuiltRefType, HMSPrebuiltProps
       options: { userName = '', userId = '', endpoints } = {},
       screens,
       onLeave,
+      onJoin,
     },
     ref,
   ) => {
@@ -172,6 +175,7 @@ export const HMSPrebuilt = React.forwardRef<HMSPrebuiltRefType, HMSPrebuiltProps
             roomId,
             role,
             onLeave,
+            onJoin,
             userName,
             userId,
             endpoints: {
@@ -218,6 +222,7 @@ export const HMSPrebuilt = React.forwardRef<HMSPrebuiltRefType, HMSPrebuiltProps
                       <AppData appDetails={metadata} tokenEndpoint={tokenByRoomIdRoleEndpoint} />
                       <Init />
                       <Box
+                        id="prebuilt-container"
                         css={{
                           bg: '$background_dim',
                           size: '100%',
@@ -348,6 +353,7 @@ function AppRoutes({
         <BackSwipe />
         {!isNotificationsDisabled && <FlyingEmoji />}
         <RemoteStopScreenshare />
+        <HeadlessEndRoomListener />
         <KeyboardHandler />
         <AuthToken authTokenByRoomCodeEndpoint={authTokenByRoomCodeEndpoint} defaultAuthToken={defaultAuthToken} />
         {roomLayout && (

package/src/Prebuilt/AppContext.tsx

@@ -8,6 +8,7 @@ type HMSPrebuiltContextType = {
   userId?: string;
   endpoints?: Record<string, string>;
   onLeave?: () => void;
+  onJoin?: () => void;
 };
 
 export const HMSPrebuiltContext = React.createContext<HMSPrebuiltContextType>({
@@ -16,6 +17,7 @@ export const HMSPrebuiltContext = React.createContext<HMSPrebuiltContextType>({
   userId: '',
   endpoints: {},
   onLeave: undefined,
+  onJoin: undefined,
 });
 
 HMSPrebuiltContext.displayName = 'HMSPrebuiltContext';

package/src/Prebuilt/common/constants.js

@@ -44,7 +44,7 @@ export const APP_DATA = {
   pdfConfig: 'pdfConfig',
   minimiseInset: 'minimiseInset',
   activeScreensharePeerId: 'activeScreensharePeerId',
-  disableNotificiations: 'disableNotificiations',
+  disableNotifications: 'disableNotifications',
 };
 export const UI_SETTINGS = {
   isAudioOnly: 'isAudioOnly',

package/src/Prebuilt/common/utils.js

@@ -88,10 +88,3 @@ export const formatTime = timeInSeconds => {
   const hour = hours !== 0 ? `${hours < 10 ? '0' : ''}${hours}:` : '';
   return `${hour}${minutes < 10 ? '0' : ''}${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
 };
-
-export const getAttributeBoxSize = (width, height) => {
-  if (!width || !height) {
-    return '';
-  }
-  return width < 180 || height < 180 ? 'small' : 'medium';
-};

package/src/Prebuilt/components/AppData/AppData.jsx

@@ -65,7 +65,7 @@ const initialAppData = {
   [APP_DATA.authToken]: '',
   [APP_DATA.minimiseInset]: false,
   [APP_DATA.activeScreensharePeerId]: '',
-  [APP_DATA.disableNotificiations]: false,
+  [APP_DATA.disableNotifications]: false,
 };
 
 export const AppData = React.memo(({ appDetails, tokenEndpoint }) => {

package/src/Prebuilt/components/AppData/useUISettings.js

@@ -86,7 +86,7 @@ export const useSubscribedNotifications = notificationKey => {
 };
 
 export const useIsNotificationDisabled = () => {
-  const notificationPreference = useHMSStore(selectAppDataByPath(APP_DATA.disableNotificiations));
+  const notificationPreference = useHMSStore(selectAppDataByPath(APP_DATA.disableNotifications));
   return notificationPreference;
 };
 

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,14 +9,28 @@ 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', gap: '$2', borderRadius: '$4', ...css }}
+      onClick={() => onClick?.()}
+    >
       {icon}
-      <Text variant="sm" css={{ fontWeight: '$semiBold', color: textColor, ml: '$2' }}>
+      <Text variant="sm" css={{ fontWeight: '$semiBold', color: textColor }}>
         {content}
       </Text>
     </Flex>

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

@@ -0,0 +1,94 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { useMeasure } from 'react-use';
+import { FixedSizeList } from 'react-window';
+import { selectIsConnectedToRoom, useHMSStore, usePaginatedParticipants } from '@100mslive/react-sdk';
+import { ChevronLeftIcon, CrossIcon } from '@100mslive/react-icons';
+import { Button } from '../../../Button';
+import { IconButton } from '../../../IconButton';
+import { Box, Flex } from '../../../Layout';
+import { Loading } from '../../../Loading';
+import { Text } from '../../../Text';
+// @ts-ignore: No implicit Any
+import { ParticipantSearch } from './ParticipantList';
+import { itemKey, ROW_HEIGHT, VirtualizedParticipantItem } from './RoleAccordion';
+// @ts-ignore: No implicit Any
+import { useSidepaneReset } from '../AppData/useSidepane';
+// @ts-ignore: No implicit Any
+import { getFormattedCount } from '../../common/utils';
+
+export const PaginatedParticipants = ({ roleName, onBack }: { roleName: string; onBack: () => void }) => {
+  const { peers, total, loadPeers, loadMorePeers } = usePaginatedParticipants({ role: roleName, limit: 20 });
+  const [search, setSearch] = useState<string>('');
+  const [isLoading, setIsLoading] = useState(false);
+  const filteredPeers = peers.filter(p => p.name?.toLowerCase().includes(search));
+  const isConnected = useHMSStore(selectIsConnectedToRoom);
+  const [ref, { width }] = useMeasure<HTMLDivElement>();
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  const height = ROW_HEIGHT * peers.length;
+  const resetSidePane = useSidepaneReset();
+  const hasNext = total > peers.length;
+
+  useEffect(() => {
+    loadPeers();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return (
+    <Flex ref={ref} direction="column" css={{ size: '100%', gap: '$4' }}>
+      <Flex align="center">
+        <Flex align="center" css={{ flex: '1 1 0', cursor: 'pointer' }} onClick={onBack}>
+          <ChevronLeftIcon />
+          <Text variant="lg" css={{ flex: '1 1 0' }}>
+            Participants
+          </Text>
+        </Flex>
+        <IconButton
+          onClick={e => {
+            e.stopPropagation();
+            resetSidePane();
+          }}
+          data-testid="close_sidepane"
+        >
+          <CrossIcon />
+        </IconButton>
+      </Flex>
+      <ParticipantSearch onSearch={(search: string) => setSearch(search)} placeholder={`Search for ${roleName}`} />
+      <Flex direction="column" css={{ border: '1px solid $border_default', borderRadius: '$1', flex: '1 1 0' }}>
+        <Flex align="center" css={{ height: ROW_HEIGHT, borderBottom: '1px solid $border_default', px: '$8' }}>
+          <Text css={{ fontSize: '$space$7' }}>
+            {roleName}({getFormattedCount(peers.length)}/{getFormattedCount(total)})
+          </Text>
+        </Flex>
+        <Box css={{ flex: '1 1 0', overflowY: 'auto', overflowX: 'hidden', mr: '-$10' }}>
+          <FixedSizeList
+            itemSize={ROW_HEIGHT}
+            itemData={{ peerList: filteredPeers, isConnected: isConnected === true }}
+            itemKey={itemKey}
+            itemCount={filteredPeers.length}
+            width={width}
+            height={height}
+            outerRef={containerRef}
+          >
+            {VirtualizedParticipantItem}
+          </FixedSizeList>
+          {hasNext ? (
+            <Flex justify="center" css={{ w: '100%' }}>
+              <Button
+                css={{ w: 'max-content', p: '$4' }}
+                onClick={() => {
+                  setIsLoading(true);
+                  loadMorePeers()
+                    .catch(console.error)
+                    .finally(() => setIsLoading(false));
+                }}
+                disabled={isLoading}
+              >
+                {isLoading ? <Loading size={16} /> : 'Load More'}
+              </Button>
+            </Flex>
+          ) : null}
+        </Box>
+      </Flex>
+    </Flex>
+  );
+};

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

@@ -3,6 +3,7 @@ import { useDebounce, useMedia } from 'react-use';
 import {
   selectHandRaisedPeers,
   selectHasPeerHandRaised,
+  selectIsLargeRoom,
   selectIsPeerAudioEnabled,
   selectLocalPeerID,
   selectPeerCount,
@@ -20,7 +21,7 @@ import {
   SearchIcon,
   VerticalMenuIcon,
 } from '@100mslive/react-icons';
-import { Box, config as cssConfig, Dropdown, Flex, Input, Text, textEllipsis } from '../../..';
+import { Accordion, Box, config as cssConfig, Dropdown, Flex, Input, Text, textEllipsis } from '../../..';
 import IconButton from '../../IconButton';
 import { ConnectionIndicator } from '../Connection/ConnectionIndicator';
 import { ToastManager } from '../Toast/ToastManager';
@@ -31,9 +32,10 @@ import { useParticipants } from '../../common/hooks';
 import { getFormattedCount } from '../../common/utils';
 import { SIDE_PANE_OPTIONS } from '../../common/constants';
 
-export const ParticipantList = () => {
+export const ParticipantList = ({ offStageRoles = [], onActive }) => {
   const [filter, setFilter] = useState();
   const { participants, isConnected, peerCount } = useParticipants(filter);
+  const isLargeRoom = useHMSStore(selectIsLargeRoom);
   const peersOrderedByRoles = {};
 
   const handRaisedPeers = useHMSStore(selectHandRaisedPeers);
@@ -45,6 +47,15 @@ export const ParticipantList = () => {
     peersOrderedByRoles[participant.roleName].push(participant);
   });
 
+  // prefill off_stage roles of large rooms to load more peers
+  if (isLargeRoom) {
+    offStageRoles.forEach(role => {
+      if (!peersOrderedByRoles[role]) {
+        peersOrderedByRoles[role] = [];
+      }
+    });
+  }
+
   const onSearch = useCallback(value => {
     setFilter(filterValue => {
       if (!filterValue) {
@@ -72,6 +83,9 @@ export const ParticipantList = () => {
           handRaisedList={handRaisedPeers}
           isConnected={isConnected}
           filter={filter}
+          offStageRoles={offStageRoles}
+          isLargeRoom={isLargeRoom}
+          onActive={onActive}
         />
       </Flex>
     </Fragment>
@@ -114,7 +128,15 @@ export const ParticipantCount = () => {
   );
 };
 
-const VirtualizedParticipants = ({ peersOrderedByRoles = {}, isConnected, filter, handRaisedList = [] }) => {
+const VirtualizedParticipants = ({
+  peersOrderedByRoles = {},
+  isConnected,
+  filter,
+  handRaisedList = [],
+  offStageRoles,
+  isLargeRoom,
+  onActive,
+}) => {
   return (
     <Flex
       direction="column"
@@ -127,22 +149,29 @@ const VirtualizedParticipants = ({ peersOrderedByRoles = {}, isConnected, filter
         flex: '1 1 0',
       }}
     >
-      <RoleAccordion
-        peerList={handRaisedList}
-        roleName="Hand Raised"
-        filter={filter}
-        isConnected={isConnected}
-        isHandRaisedAccordion
-      />
-      {Object.keys(peersOrderedByRoles).map(role => (
-        <RoleAccordion
-          key={role}
-          peerList={peersOrderedByRoles[role]}
-          roleName={role}
-          isConnected={isConnected}
-          filter={filter}
-        />
-      ))}
+      <Accordion.Root type={isLargeRoom ? 'single' : 'multiple'} collapsible>
+        {handRaisedList.length > 0 ? (
+          <RoleAccordion
+            peerList={handRaisedList}
+            roleName="Hand Raised"
+            filter={filter}
+            isConnected={isConnected}
+            isHandRaisedAccordion
+            offStageRoles={offStageRoles}
+          />
+        ) : null}
+        {Object.keys(peersOrderedByRoles).map(role => (
+          <RoleAccordion
+            key={role}
+            peerList={peersOrderedByRoles[role]}
+            roleName={role}
+            isConnected={isConnected}
+            filter={filter}
+            offStageRoles={offStageRoles}
+            onActive={onActive}
+          />
+        ))}
+      </Accordion.Root>
     </Flex>
   );
 };
@@ -163,7 +192,10 @@ export const Participant = ({ peer, isConnected }) => {
       justify="between"
       data-testid={'participant_' + peer.name}
     >
-      <Text variant="sm" css={{ ...textEllipsis(150), fontWeight: '$semiBold', color: '$on_surface_high' }}>
+      <Text
+        variant="sm"
+        css={{ ...textEllipsis('100%'), flex: '1 1 0', mr: '$8', fontWeight: '$semiBold', color: '$on_surface_high' }}
+      >
         {peer.name} {localPeerId === peer.id ? '(You)' : ''}
       </Text>
       {isConnected ? (
@@ -179,7 +211,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 +245,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 +368,7 @@ export const ParticipantSearch = ({ onSearch, placeholder, inSidePane = false })
       <Input
         type="text"
         placeholder={placeholder || 'Search for participants'}
-        css={{ w: '100%', p: '$6', pl: '$16', mr: '$4', bg: inSidePane ? '$surface_default' : '$surface_dim' }}
+        css={{ w: '100%', p: '$6', pl: '$14', bg: inSidePane ? '$surface_default' : '$surface_dim' }}
         value={value}
         onKeyDown={event => {
           event.stopPropagation();