test

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

@@ -20,6 +20,12 @@ const IconBox = styled(Box)`
   text-align: center;
 `;
 
+const BadgeBox = styled(Box)`
+  bottom: 15px;
+  left: 25px;
+  position: relative;
+`;
+
 const TextBox = styled(Box)`
   display: flex;
   margin-top: 6px;
@@ -77,7 +83,9 @@ export const ButtonLayout = ({
       {Icon && (
         <IconBox screenSize={size}>
           <Icon iconColor={iconColor} focusColor={rectColor} height="100%" />
-          {badge}
+          <BadgeBox direction="row" align="start">
+            {badge}
+          </BadgeBox>
         </IconBox>
       )}
 

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

@@ -0,0 +1,33 @@
+import { Box, Text } from 'grommet';
+import React from 'react';
+import styled from 'styled-components';
+
+const StyledText = styled(Text)`
+  font-family: 'Roboto-Bold';
+`;
+
+interface BadgeNotificationProps {
+  color: string;
+  nbrOfNotifications: number;
+}
+export const BadgeNotification = ({
+  color,
+  nbrOfNotifications,
+}: BadgeNotificationProps) => {
+  return (
+    <Box
+      align="center"
+      background="white"
+      border={{
+        color,
+        size: 'xsmall',
+      }}
+      pad={{ horizontal: '3px', vertical: '1px' }}
+      round="6px"
+    >
+      <StyledText color={color} size="0.688rem">
+        {nbrOfNotifications}
+      </StyledText>
+    </Box>
+  );
+};

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

@@ -2,6 +2,7 @@ import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
 import { Button } from 'components/Button';
+import { BadgeNotification } from 'components/LiveControls/BadgeNotification';
 import { ViewersSVG } from 'components/SVGIcons/ViewersSVG';
 import { useLivePanelState } from 'data/stores/useLivePanelState';
 
@@ -18,7 +19,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 +34,14 @@ export const StudentHideViewersButton = () => {
   return (
     <Button
       label={intl.formatMessage(messages.viewers)}
+      badge={
+        nbrOfOnStageRequests ? (
+          <BadgeNotification
+            color="blue-focus"
+            nbrOfNotifications={nbrOfOnStageRequests}
+          />
+        ) : undefined
+      }
       Icon={ViewersSVG}
       onClick={() => {
         setPanelVisibility(false);

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

@@ -2,6 +2,7 @@ import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
 import { Button } from 'components/Button';
+import { BadgeNotification } from 'components/LiveControls/BadgeNotification';
 import { ViewersSVG } from 'components/SVGIcons/ViewersSVG';
 import {
   LivePanelItem,
@@ -21,14 +22,27 @@ 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 ? (
+          <BadgeNotification
+            color="blue-active"
+            nbrOfNotifications={nbrOfOnStageRequests}
+          />
+        ) : 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>
       )}