fix: add participants count badge in the lobby

GetStream · Dec 22, 2023 · ce6f4dc · ce6f4dc
1 parent 8ebc0c7
commit ce6f4dc
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 18 deletions.
diff --git a/packages/react-sdk/src/components/Button/CompositeButton.tsx b/packages/react-sdk/src/components/Button/CompositeButton.tsx
@@ -11,8 +11,10 @@ export type IconButtonWithMenuProps = PropsWithChildren<{
   active?: boolean;
   Menu?: ComponentType | JSX.Element;
   caption?: string;
+  className?: string;
   menuPlacement?: Placement;
   ToggleMenuButton?: any;
+  title?: string;
   variant?: 'primary' | 'secondary';
 }>;
 
@@ -24,19 +26,22 @@ export const CompositeButton = forwardRef<
     {
       caption,
       children,
+      className,
       active,
       Menu,
       menuPlacement,
+      title,
       ToggleMenuButton = DefaultToggleMenuButton,
       variant,
     },
     ref,
   ) => {
     return (
       <div
-        className={clsx('str-video__composite-button', {
+        className={clsx('str-video__composite-button', className, {
           'str-video__composite-button--caption': caption,
         })}
+        title={title}
         ref={ref}
       >
         <div

diff --git a/sample-apps/react/react-dogfood/components/Lobby.tsx b/sample-apps/react/react-dogfood/components/Lobby.tsx
@@ -18,7 +18,7 @@ import { MobileAppBanner } from './MobileAppBanner';
 import { ToggleSettingsTabModal } from './Settings/SettingsTabModal';
 import { ToggleMicButton } from './ToggleMicButton';
 import { ToggleCameraButton } from './ToggleCameraButton';
-import { ToggleParticipansPreviewButton } from './ToggleParticipantsPreview';
+import { ToggleParticipantsPreviewButton } from './ToggleParticipantsPreview';
 
 import { useEdges } from '../hooks/useEdges';
 import { DefaultAppHeader } from './DefaultAppHeader';
@@ -114,7 +114,7 @@ export const Lobby = ({ onJoin, callId, mode = 'regular' }: LobbyProps) => {
                     </div>
 
                     <div className="rd__lobby-settings">
-                      <ToggleParticipansPreviewButton onJoin={onJoin} />
+                      <ToggleParticipantsPreviewButton onJoin={onJoin} />
 
                       <ToggleSettingsTabModal
                         selectedLayout={layout}

diff --git a/sample-apps/react/react-dogfood/components/ToggleParticipantsPreview.tsx b/sample-apps/react/react-dogfood/components/ToggleParticipantsPreview.tsx
@@ -1,22 +1,22 @@
 import { forwardRef } from 'react';
 
 import {
-  Icon,
   CallPreview,
-  useCallStateHooks,
   CompositeButton,
+  Icon,
   IconButton,
   MenuToggle,
   MenuVisualType,
   ToggleMenuButtonProps,
+  useCallStateHooks,
   useI18n,
 } from '@stream-io/video-react-sdk';
 
 export type Props = {
   onJoin: () => void;
 };
 
-export const ParticipantsPreview = ({ onJoin }: Props) => {
+const ParticipantsPreview = ({ onJoin }: Props) => {
   const { useCallSession, useCallThumbnail } = useCallStateHooks();
   const session = useCallSession();
   const { t } = useI18n();
@@ -33,7 +33,7 @@ export const ParticipantsPreview = ({ onJoin }: Props) => {
       {thumbnail && <CallPreview style={{ width: '100%', height: '150px' }} />}
 
       <p className="rd__participants-preview__description">
-        {`${first.user.name} ${session.participants.length - 1} other${
+        {`${first.user.name} and ${session.participants.length - 1} other${
           session.participants.length - 1 > 1 ? 's' : ''
         } are in this call.`}
       </p>
@@ -50,18 +50,29 @@ export const ParticipantsPreview = ({ onJoin }: Props) => {
   );
 };
 
-export const ToggleMenuButton = forwardRef<
-  HTMLDivElement,
-  ToggleMenuButtonProps
->((props, ref) => {
-  return (
-    <CompositeButton ref={ref} active={props.menuShown} variant="primary">
-      <IconButton icon="participants" />
-    </CompositeButton>
-  );
-});
+const ToggleMenuButton = forwardRef<HTMLDivElement, ToggleMenuButtonProps>(
+  (props, ref) => {
+    const { useCallSession } = useCallStateHooks();
+    const session = useCallSession();
+    const total = session?.participants?.length || 0;
+    return (
+      <CompositeButton
+        ref={ref}
+        active={props.menuShown}
+        variant="primary"
+        className="rd__participants-preview__button"
+        title="Participants already in the call"
+      >
+        <IconButton icon="participants" />
+        {total > 0 && (
+          <span className="rd__participants-preview__count">{total}</span>
+        )}
+      </CompositeButton>
+    );
+  },
+);
 
-export const ToggleParticipansPreviewButton = ({ onJoin }: Props) => {
+export const ToggleParticipantsPreviewButton = ({ onJoin }: Props) => {
   const { useCallSession } = useCallStateHooks();
   const session = useCallSession();
 

diff --git a/...e-apps/react/react-dogfood/style/ToggleParticipantsPreview/ToggleParticipantsPreview.scss b/...e-apps/react/react-dogfood/style/ToggleParticipantsPreview/ToggleParticipantsPreview.scss
@@ -11,6 +11,27 @@
     box-shadow: 0px 14px 34px rgba(0, 0, 0, 0.75);
   }
 
+  &__participants-preview__button {
+    position: relative;
+  }
+
+  &__participants-preview__count {
+    font-size: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--str-video__border-radius-circle);
+    position: absolute;
+
+    top: 0;
+    background: var(--str-video__brand-color3);
+    color: var(--str-video__base-color4);
+    padding: 5px;
+    height: 16px;
+    width: 16px;
+    margin-left: 20px;
+  }
+
   &__participants-preview__heading {
     font-size: 20px;
     font-weight: 500;