📱(frontend) make the box title of the video info bar responsive

The box title had responsive problems on smaller screens. This commit fixes this issue by making the box title more responsive.
openfun · Mar 17, 2023 · 03bae59 · 03bae59
1 parent 1e96ea6
commit 03bae59
Show file tree

Hide file tree

Showing 7 changed files with 64 additions and 35 deletions.
diff --git a/src/frontend/packages/lib_video/src/components/common/TeacherVideoInfoBar/index.tsx b/src/frontend/packages/lib_video/src/components/common/TeacherVideoInfoBar/index.tsx
@@ -16,7 +16,7 @@ export const TeacherVideoInfoBar = ({
     <Box
       direction="column"
       justify="center"
-      style={{ flexBasis: '0%', minWidth: '0' }}
+      style={{ flex: 'auto' }}
       {...props}
     >
       <VideoInfoBar isTeacher startDate={startDate} />

diff --git a/src/frontend/packages/lib_video/src/components/common/VideoInfoBar/index.tsx b/src/frontend/packages/lib_video/src/components/common/VideoInfoBar/index.tsx
@@ -18,6 +18,17 @@ import { useUpdateVideo } from 'api/useUpdateVideo';
 import { useCurrentVideo } from 'hooks/useCurrentVideo';
 import { useParticipantsStore } from 'hooks/useParticipantsStore';
 
+const StyledBoxTextInput = styled(Box)`
+  & > div:first-child {
+    display: flex;
+    flex-direction: row-reverse;
+    width: 100%;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.5rem;
+  }
+`;
+
 const StyledTitleTextInput = styled(TextInput)`
   border: 1px solid ${normalizeColor('blue-active', theme)};
   border-radius: 4px;
@@ -134,19 +145,14 @@ export const VideoInfoBar = ({ isTeacher, startDate }: VideoInfoBarProps) => {
   return (
     <Fragment>
       {isTeacher ? (
-        <Box
-          margin={{ right: 'small' }}
-          gap="small"
-          alignContent="center"
-          direction="row"
-        >
+        <StyledBoxTextInput alignContent="center" direction="row">
           <StyledTitleTextInput
             icon={
               <EditionSVG
                 iconColor={normalizeColor('blue-chat', theme)}
                 width="25px"
                 height="25px"
-                containerStyle={{ margin: 'auto', marginRight: '8px' }}
+                containerStyle={{ margin: 'auto' }}
               />
             }
             onBlur={(event) => handleChange(event.target.value)}
@@ -156,8 +162,12 @@ export const VideoInfoBar = ({ isTeacher, startDate }: VideoInfoBarProps) => {
             value={title}
             plain
             reverse
+            width={{
+              min: '270px',
+              width: `100%`,
+            }}
           />
-        </Box>
+        </StyledBoxTextInput>
       ) : (
         <Heading
           a11yTitle={title}
@@ -172,28 +182,30 @@ export const VideoInfoBar = ({ isTeacher, startDate }: VideoInfoBarProps) => {
           {title}
         </Heading>
       )}
-      <Box direction="row">
-        {numberOfStudents > 0 && (
-          <Paragraph
-            color="blue-active"
-            margin={{ left: 'small', right: 'large', bottom: 'small' }}
-            size="small"
-          >
-            {intl.formatMessage(messages.nbViewers, {
-              numberOfStudents,
-            })}
-          </Paragraph>
-        )}
-        {localStartDate && (
-          <Paragraph
-            color="blue-active"
-            margin={{ right: 'large', bottom: 'small' }}
-            size="small"
-          >
-            {localStartDate}
-          </Paragraph>
-        )}
-      </Box>
+      {numberOfStudents > 0 || localStartDate ? (
+        <Box direction="row">
+          {numberOfStudents > 0 && (
+            <Paragraph
+              color="blue-active"
+              margin={{ left: 'small', right: 'large', bottom: 'small' }}
+              size="small"
+            >
+              {intl.formatMessage(messages.nbViewers, {
+                numberOfStudents,
+              })}
+            </Paragraph>
+          )}
+          {localStartDate && (
+            <Paragraph
+              color="blue-active"
+              margin={{ right: 'large', bottom: 'small' }}
+              size="small"
+            >
+              {localStartDate}
+            </Paragraph>
+          )}
+        </Box>
+      ) : null}
     </Fragment>
   );
 };
diff --git a/src/frontend/packages/lib_video/src/components/common/VideoLayout/index.tsx b/src/frontend/packages/lib_video/src/components/common/VideoLayout/index.tsx
@@ -23,6 +23,10 @@ import { DisplayNameForm } from './DisplayNameForm';
 const StyledLiveVideoInformationBarWrapper = styled(Box)`
   -webkit-box-shadow: 0px 0px 7px 5px ${normalizeColor('shadow-1', theme)};
   box-shadow: 0px 0px 7px 5px ${normalizeColor('shadow-1', theme)};
+  flex-wrap: wrap;
+  gap: 1rem;
+  height: auto;
+  justify-content: space-evenly;
 `;
 
 interface LiveStudentLayoutProps {

diff --git a/...es/lib_video/src/components/live/Teacher/Wrapper/Controls/TeacherLiveControlBar/index.tsx b/...es/lib_video/src/components/live/Teacher/Wrapper/Controls/TeacherLiveControlBar/index.tsx
@@ -49,7 +49,12 @@ export const TeacherLiveControlBar = () => {
     };
   }, [video, isStarted, setIsStarted]);
 
-  return (
+  const isBoxToDisplay =
+    (isMobileView && availableItems.includes(LivePanelItem.CHAT)) ||
+    (isMobileView && availableItems.includes(LivePanelItem.VIEWERS_LIST)) ||
+    (video.live_type === LiveModeType.RAW && isStarted);
+
+  return isBoxToDisplay ? (
     <Box direction="row" height="100%">
       {isMobileView && availableItems.includes(LivePanelItem.CHAT) && (
         <Box height="100%" style={{ minWidth: '60px' }}>
@@ -69,5 +74,5 @@ export const TeacherLiveControlBar = () => {
         </Box>
       )}
     </Box>
-  );
+  ) : null;
 };
diff --git a/...video/src/components/live/Teacher/Wrapper/Controls/TeacherLiveLifecycleControls/index.tsx b/...video/src/components/live/Teacher/Wrapper/Controls/TeacherLiveLifecycleControls/index.tsx
@@ -118,7 +118,6 @@ export const TeacherLiveLifecycleControls = ({
   return (
     <Box
       direction="row"
-      style={{ flexBasis: '0%', whiteSpace: 'nowrap' }}
       margin={{ right: 'none', vertical: 'auto' }}
       {...props}
     >

diff --git a/src/frontend/packages/lib_video/src/components/live/Teacher/Wrapper/Controls/index.tsx b/src/frontend/packages/lib_video/src/components/live/Teacher/Wrapper/Controls/index.tsx
@@ -19,7 +19,15 @@ export const Controls = ({
   return (
     <Fragment>
       {isLiveStarted && <TeacherLiveControlBar />}
-      <Box flex={isLiveStarted} direction="row" justify="end">
+      <Box
+        flex={isLiveStarted}
+        direction="row"
+        style={{ flex: '0' }}
+        justify="evenly"
+        width={{
+          min: 'auto',
+        }}
+      >
         <TeacherLiveRecordingActions isJitsiAdministrator={canStartLive} />
         <TeacherLiveLifecycleControls
           canStartStreaming={canShowStartButton}

diff --git a/src/frontend/packages/lib_video/src/components/vod/Teacher/Dashboard.tsx b/src/frontend/packages/lib_video/src/components/vod/Teacher/Dashboard.tsx
@@ -34,6 +34,7 @@ const messages = defineMessages({
 const StyledLiveVideoInformationBarWrapper = styled(Box)`
   -webkit-box-shadow: 0px 0px 7px 5px ${normalizeColor('shadow-1', theme)};
   box-shadow: 0px 0px 7px 5px ${normalizeColor('shadow-1', theme)};
+  flex-wrap: wrap;
 `;
 
 interface DashboardProps {