✨(front) add a badge on viewers list button

This badge indicates how many students are actually requesting to go on stage.
openfun · Mar 30, 2022 · 13147ed · 13147ed
1 parent 108ab95
commit 13147ed
Show file tree

Hide file tree

Showing 11 changed files with 126 additions and 47 deletions.
diff --git a/src/frontend/components/Button/ButtonLayout/index.tsx b/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>
       )}
 

diff --git a/src/frontend/components/LiveControls/BadgeNotification/index.tsx b/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>
+  );
+};
diff --git a/...student-hide-viewers-button-closes-the-panel-and-select-viewers-item-1-snap.png b/...student-hide-viewers-button-closes-the-panel-and-select-viewers-item-1-snap.png
diff --git a/src/frontend/components/LiveControls/ViewersWrapper/StudentHideViewersButton/index.tsx b/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);

diff --git a/src/frontend/components/LiveControls/ViewersWrapper/StudentShowViewersButton/index.tsx b/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={() => {

diff --git a/src/frontend/components/LiveControls/ViewersWrapper/index.tsx b/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} />
+    );
   }
 };
diff --git a/...n-svg-spec-tsx-join-discussion-svg-renders-join-discussion-svg-focus-2-snap.png b/...n-svg-spec-tsx-join-discussion-svg-renders-join-discussion-svg-focus-2-snap.png
diff --git a/...apshots__/viewers-svg-spec-tsx-viewers-svg-renders-viewers-svg-focus-2-snap.png b/...apshots__/viewers-svg-spec-tsx-viewers-svg-renders-viewers-svg-focus-2-snap.png
diff --git a/...aiting-join-discussion-svg-renders-waiting-join-discussion-svg-focus-2-snap.png b/...aiting-join-discussion-svg-renders-waiting-join-discussion-svg-focus-2-snap.png
diff --git a/src/frontend/components/TeacherLiveControlBar/index.tsx b/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>
       )}
 

diff --git a/src/frontend/components/ViewersList/InstructorViewersList/index.tsx b/src/frontend/components/ViewersList/InstructorViewersList/index.tsx
@@ -80,46 +80,44 @@ export const InstructorViewersList = ({
       pad={{ bottom: '20px', top: '30px' }}
     >
       {video.participants_asking_to_join.length !== 0 && (
-          <React.Fragment>
-            <ViewersListHeader
-              margin={{ left: '20px', bottom: '6px' }}
-              text={intl.formatMessage(messages.demands)}
-            />
-            <List
-              border={false}
-              data={video.participants_asking_to_join.sort(
-                (participantA, participantB) =>
-                  participantA.name.localeCompare(participantB.name),
-              )}
-              pad="none"
-            >
-              {(item: ParticipantType, index: number) => (
-                <ViewersListItemContainer key={index}>
-                  <ViewersListItem
-                    isInstructor={item.isInstructor}
-                    name={item.name}
+        <React.Fragment>
+          <ViewersListHeader
+            margin={{ left: '20px', bottom: '6px' }}
+            text={intl.formatMessage(messages.demands)}
+          />
+          <List
+            border={false}
+            data={video.participants_asking_to_join.sort(
+              (participantA, participantB) =>
+                participantA.name.localeCompare(participantB.name),
+            )}
+            pad="none"
+          >
+            {(item: ParticipantType, index: number) => (
+              <ViewersListItemContainer key={index}>
+                <ViewersListItem
+                  isInstructor={item.isInstructor}
+                  name={item.name}
+                />
+                <Box direction="row" align="center" gap="10px">
+                  <Button
+                    icon={<AddCircle color="red-active" size="20px" />}
+                    onClick={() => converse.rejectParticipantToJoin(item)}
+                    plain
+                    style={{ padding: '0px', transform: 'rotate(45deg)' }}
+                  />
+                  <ViewersListTextButton
+                    onClick={() =>
+                      converse.acceptParticipantToJoin(item, video)
+                    }
+                    text={intl.formatMessage(messages.acceptButton)}
                   />
-                  <Box direction="row" align="center" gap="10px">
-                    <Button
-                      icon={<AddCircle color="red-active" size="20px" />}
-                      onClick={() =>
-                        converse.rejectParticipantToJoin(item)
-                      }
-                      plain
-                      style={{ padding: '0px', transform: 'rotate(45deg)' }}
-                    />
-                    <ViewersListTextButton
-                      onClick={() =>
-                        converse.acceptParticipantToJoin(item, video)
-                      }
-                      text={intl.formatMessage(messages.acceptButton)}
-                    />
-                  </Box>
-                </ViewersListItemContainer>
-              )}
-            </List>
-          </React.Fragment>
-        )}
+                </Box>
+              </ViewersListItemContainer>
+            )}
+          </List>
+        </React.Fragment>
+      )}
 
       {participantsOnStage.length !== 0 && (
         <React.Fragment>