✨(front) add a badge on viewers list button

This badge indicates how many students are actually requesting to go on stage.

src/frontend/components/Button/ButtonLayout/index.spec.tsx

@@ -4,7 +4,7 @@ import { render, screen } from '@testing-library/react';
 import { ButtonLayout } from '.';
 
 const Icon = jest.fn(() => <span>icon</span>);
-const Badge = () => <span>badge</span>;
+const badge = 'badge';
 
 describe('<ButtonLayout />', () => {
   afterEach(() => {
@@ -29,7 +29,7 @@ describe('<ButtonLayout />', () => {
   it('does not render the badge if there is no Icon set', () => {
     render(
       <ButtonLayout
-        badge={<Badge />}
+        badge={badge}
         label="Button"
         reversedColor={'reversed-color'}
         tintColor={'int-color'}
@@ -61,7 +61,7 @@ describe('<ButtonLayout />', () => {
   it('renders the icon and the badge and the title', () => {
     render(
       <ButtonLayout
-        badge={<Badge />}
+        badge={badge}
         Icon={() => <span>icon</span>}
         label="Button"
         reversedColor={'reversed-color'}
@@ -78,7 +78,7 @@ describe('<ButtonLayout />', () => {
   it('renders the Button component with default style', () => {
     render(
       <ButtonLayout
-        badge={<Badge />}
+        badge={badge}
         Icon={Icon}
         label="Button"
         reversedColor={'#ffffff'}
@@ -96,7 +96,7 @@ describe('<ButtonLayout />', () => {
       {
         height: '100%',
         iconColor: '#0a67de',
-        focusColor: 'none',
+        focusColor: undefined,
       },
       {},
     );
@@ -107,7 +107,7 @@ describe('<ButtonLayout />', () => {
   it('renders the Button component with reversed style', () => {
     render(
       <ButtonLayout
-        badge={<Badge />}
+        badge={badge}
         Icon={Icon}
         label="Button"
         reversed

src/frontend/components/Button/ButtonLayout/index.tsx

@@ -22,7 +22,6 @@ const IconBox = styled(Box)`
 
 const TextBox = styled(Box)`
   display: flex;
-  margin-top: 6px;
   text-align: center;
 `;
 
@@ -34,11 +33,14 @@ const StyledText = styled(Text)`
     screenSize === 'small' ? '-0.3px' : '-0.13px'};
   line-height: ${({ screenSize }: ResponsiveProps) =>
     screenSize === 'small' ? '0.8rem' : '0.9rem'};
-  margin: auto;
+`;
+
+const StyledTextBadge = styled(Text)`
+  font-family: 'Roboto-Bold';
 `;
 
 export interface ButtonLayoutSubComponentProps {
-  badge?: JSX.Element;
+  badge?: string;
   Icon?: React.FC<SvgProps>;
   label?: string;
 }
@@ -61,29 +63,37 @@ export const ButtonLayout = ({
 }: ButtonLayoutProps) => {
   const size = useContext(ResponsiveContext);
 
-  let iconColor;
-  let rectColor;
-
-  if (!reversed) {
-    iconColor = tintColor;
-    rectColor = 'none';
-  } else {
-    iconColor = reversedColor;
-    rectColor = tintColor;
-  }
+  const iconColor = reversed ? reversedColor : tintColor;
+  const rectColor = reversed ? tintColor : undefined;
 
   return (
-    <Box align="center" fill>
+    <Box align="center" flex height="100%">
       {Icon && (
         <IconBox screenSize={size}>
           <Icon iconColor={iconColor} focusColor={rectColor} height="100%" />
-          {badge}
+          {badge && (
+            <Box
+              align="center"
+              background="white"
+              border={{
+                color: tintColor,
+                size: 'xsmall',
+              }}
+              pad={{ horizontal: '3px', vertical: '1px' }}
+              round="6px"
+              style={{ position: 'absolute', bottom: '0px', right: '0px' }}
+            >
+              <StyledTextBadge color={tintColor} size="0.688rem">
+                {badge}
+              </StyledTextBadge>
+            </Box>
+          )}
         </IconBox>
       )}
 
       {label && (
-        <TextBox>
-          <StyledText color={textColor} screenSize={size} size=".8rem">
+        <TextBox align="center" margin={{ top: '6px' }}>
+          <StyledText color={textColor} screenSize={size}>
             {label}
           </StyledText>
         </TextBox>

src/frontend/components/Button/index.spec.tsx

@@ -4,7 +4,7 @@ import React from 'react';
 import { Button } from '.';
 
 const Icon = jest.fn(() => <span>icon</span>);
-const Badge = () => <span>badge</span>;
+const badge = 'badge';
 
 describe('<Button />', () => {
   afterEach(() => {
@@ -28,14 +28,14 @@ describe('<Button />', () => {
   });
 
   it('does not render the badge if there is no Icon set', () => {
-    render(<Button label="Button" badge={<Badge />} />);
+    render(<Button label="Button" badge={badge} />);
 
     screen.getByRole('button', { name: /Button/i });
     expect(screen.queryByText('badge')).not.toBeInTheDocument();
   });
 
   it('renders the Button component with default style', () => {
-    render(<Button label="Button" Icon={Icon} badge={<Badge />} />);
+    render(<Button label="Button" Icon={Icon} badge={badge} />);
 
     screen.getByRole('button', { name: /Button/i });
 
@@ -45,7 +45,7 @@ describe('<Button />', () => {
       {
         height: '100%',
         iconColor: '#055fd2',
-        focusColor: 'none',
+        focusColor: undefined,
       },
       {},
     );
@@ -54,7 +54,7 @@ describe('<Button />', () => {
   });
 
   it('renders the Button component with default style disabled', () => {
-    render(<Button label="Button" Icon={Icon} badge={<Badge />} disabled />);
+    render(<Button label="Button" Icon={Icon} badge={badge} disabled />);
 
     screen.getByRole('button', { name: /Button/i });
 
@@ -64,7 +64,7 @@ describe('<Button />', () => {
       {
         height: '100%',
         iconColor: '#81ade6',
-        focusColor: 'none',
+        focusColor: undefined,
       },
       {},
     );
@@ -73,7 +73,7 @@ describe('<Button />', () => {
   });
 
   it('renders the Button component with default style hovered', () => {
-    render(<Button label="Button" Icon={Icon} badge={<Badge />} />);
+    render(<Button label="Button" Icon={Icon} badge={badge} />);
 
     fireEvent.mouseEnter(screen.getByRole('button', { name: /Button/i }));
 
@@ -84,7 +84,7 @@ describe('<Button />', () => {
       {
         height: '100%',
         iconColor: '#055fd2',
-        focusColor: 'none',
+        focusColor: undefined,
       },
       {},
     );
@@ -102,7 +102,7 @@ describe('<Button />', () => {
   });
 
   it('renders the Button component with reversed style', () => {
-    render(<Button label="Button" Icon={Icon} badge={<Badge />} reversed />);
+    render(<Button label="Button" Icon={Icon} badge={badge} reversed />);
 
     screen.getByRole('button', { name: /Button/i });
 
@@ -122,7 +122,7 @@ describe('<Button />', () => {
 
   it('renders the Button component with reversed style disabled', () => {
     render(
-      <Button label="Button" Icon={Icon} badge={<Badge />} disabled reversed />,
+      <Button label="Button" Icon={Icon} badge={badge} disabled reversed />,
     );
 
     screen.getByRole('button', { name: /Button/i });
@@ -142,7 +142,7 @@ describe('<Button />', () => {
   });
 
   it('renders the Button component with reversed style hovered', () => {
-    render(<Button label="Button" Icon={Icon} badge={<Badge />} reversed />);
+    render(<Button label="Button" Icon={Icon} badge={badge} reversed />);
 
     fireEvent.mouseEnter(screen.getByRole('button'));
 
@@ -164,7 +164,7 @@ describe('<Button />', () => {
       {
         height: '100%',
         iconColor: '#055fd2',
-        focusColor: 'none',
+        focusColor: undefined,
       },
       {},
     );

src/frontend/components/LiveControls/ViewersWrapper/StudentHideViewersButton/index.tsx

@@ -18,7 +18,13 @@ const messages = defineMessages({
   },
 });
 
-export const StudentHideViewersButton = () => {
+interface StudentHideViewersButtonProps {
+  nbrOfOnStageRequests?: number;
+}
+
+export const StudentHideViewersButton = ({
+  nbrOfOnStageRequests,
+}: StudentHideViewersButtonProps) => {
   const intl = useIntl();
   const { setPanelVisibility } = useLivePanelState((state) => ({
     setPanelVisibility: state.setPanelVisibility,
@@ -27,6 +33,11 @@ export const StudentHideViewersButton = () => {
   return (
     <Button
       label={intl.formatMessage(messages.viewers)}
+      badge={
+        nbrOfOnStageRequests !== 0
+          ? nbrOfOnStageRequests?.toString()
+          : undefined
+      }
       Icon={ViewersSVG}
       onClick={() => {
         setPanelVisibility(false);

src/frontend/components/LiveControls/ViewersWrapper/StudentShowViewersButton/index.tsx

@@ -21,14 +21,24 @@ const messages = defineMessages({
   },
 });
 
-export const StudentShowViewersButton = () => {
+interface StudentShowViewersButtonProps {
+  nbrOfOnStageRequests?: number;
+}
+export const StudentShowViewersButton = ({
+  nbrOfOnStageRequests,
+}: StudentShowViewersButtonProps) => {
   const intl = useIntl();
   const { setPanelVisibility } = useLivePanelState((state) => ({
     setPanelVisibility: state.setPanelVisibility,
   }));
 
   return (
     <Button
+      badge={
+        nbrOfOnStageRequests !== 0
+          ? nbrOfOnStageRequests?.toString()
+          : undefined
+      }
       label={intl.formatMessage(messages.viewers)}
       Icon={ViewersSVG}
       onClick={() => {

src/frontend/components/LiveControls/ViewersWrapper/index.tsx

@@ -4,19 +4,30 @@ import {
   LivePanelItem,
   useLivePanelState,
 } from 'data/stores/useLivePanelState';
-
+import { Video } from 'types/tracks';
 import { StudentHideViewersButton } from './StudentHideViewersButton';
 import { StudentShowViewersButton } from './StudentShowViewersButton';
 
-export const ViewersWrapper = () => {
+interface ViewersWrapperProps {
+  video?: Video;
+}
+
+export const ViewersWrapper = ({ video }: ViewersWrapperProps) => {
   const { currentItem, isPanelVisible } = useLivePanelState((state) => ({
     currentItem: state.currentItem,
     isPanelVisible: state.isPanelVisible,
   }));
 
+  const nbrOfOnStageRequests =
+    video && video.participants_asking_to_join.length;
+
   if (currentItem === LivePanelItem.VIEWERS_LIST && isPanelVisible) {
-    return <StudentHideViewersButton />;
+    return (
+      <StudentHideViewersButton nbrOfOnStageRequests={nbrOfOnStageRequests} />
+    );
   } else {
-    return <StudentShowViewersButton />;
+    return (
+      <StudentShowViewersButton nbrOfOnStageRequests={nbrOfOnStageRequests} />
+    );
   }
 };

src/frontend/components/TeacherLiveControlBar/index.tsx

@@ -65,7 +65,7 @@ export const TeacherLiveControlBar = ({
 
       {availableItems.includes(LivePanelItem.VIEWERS_LIST) && (
         <Box height="100%" style={{ minWidth: '60px' }}>
-          <ViewersWrapper />
+          <ViewersWrapper video={video} />
         </Box>
       )}