Fix video sizing on mobile landscape (#347)

twilio · Oct 27, 2020 · 679c5b8 · 679c5b8
1 parent aaa7cde
commit 679c5b8
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 16 deletions.
diff --git a/src/components/ParticipantInfo/ParticipantInfo.tsx b/src/components/ParticipantInfo/ParticipantInfo.tsx
@@ -15,8 +15,6 @@ import usePublications from '../../hooks/usePublications/usePublications';
 import useTrack from '../../hooks/useTrack/useTrack';
 import useParticipantIsReconnecting from '../../hooks/useParticipantIsReconnecting/useParticipantIsReconnecting';
 
-const BORDER_SIZE = 2;
-
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
     container: {
@@ -31,8 +29,8 @@ const useStyles = makeStyles((theme: Theme) =>
         objectFit: 'contain !important',
       },
       borderRadius: '4px',
-      border: `${BORDER_SIZE}px solid rgb(245, 248, 255)`,
-      paddingTop: `calc(${(9 / 16) * 100}% - ${BORDER_SIZE}px)`,
+      border: `${theme.participantBorderWidth}px solid rgb(245, 248, 255)`,
+      paddingTop: `calc(${(9 / 16) * 100}% - ${theme.participantBorderWidth}px)`,
       background: 'black',
       [theme.breakpoints.down('sm')]: {
         height: theme.sidebarMobileHeight,

diff --git a/src/components/ParticipantList/ParticipantList.tsx b/src/components/ParticipantList/ParticipantList.tsx
@@ -21,7 +21,7 @@ const useStyles = makeStyles((theme: Theme) =>
         overflowY: 'initial',
         overflowX: 'auto',
         display: 'flex',
-        padding: '8px',
+        padding: `${theme.sidebarMobilePadding}px`,
       },
     },
     transparentBackground: {

diff --git a/src/components/Room/Room.tsx b/src/components/Room/Room.tsx
@@ -3,17 +3,23 @@ import ParticipantList from '../ParticipantList/ParticipantList';
 import { styled } from '@material-ui/core/styles';
 import MainParticipant from '../MainParticipant/MainParticipant';
 
-const Container = styled('div')(({ theme }) => ({
-  position: 'relative',
-  height: '100%',
-  display: 'grid',
-  gridTemplateColumns: `1fr ${theme.sidebarWidth}px`,
-  gridTemplateRows: '100%',
-  [theme.breakpoints.down('sm')]: {
-    gridTemplateColumns: `100%`,
-    gridTemplateRows: `1fr ${theme.sidebarMobileHeight + 16}px`,
-  },
-}));
+const Container = styled('div')(({ theme }) => {
+  const totalMobileSidebarHeight = `${theme.sidebarMobileHeight +
+    theme.sidebarMobilePadding * 2 +
+    theme.participantBorderWidth}px`;
+
+  return {
+    position: 'relative',
+    height: '100%',
+    display: 'grid',
+    gridTemplateColumns: `1fr ${theme.sidebarWidth}px`,
+    gridTemplateRows: '100%',
+    [theme.breakpoints.down('sm')]: {
+      gridTemplateColumns: `100%`,
+      gridTemplateRows: `calc(100% - ${totalMobileSidebarHeight}) ${totalMobileSidebarHeight}`,
+    },
+  };
+});
 
 export default function Room() {
   return (

diff --git a/src/theme.ts b/src/theme.ts
@@ -8,6 +8,8 @@ declare module '@material-ui/core/styles/createMuiTheme' {
     footerHeight: number;
     mobileTopBarHeight: number;
     mobileFooterHeight: number;
+    sidebarMobilePadding: number;
+    participantBorderWidth: number;
   }
 
   // allow configuration using `createMuiTheme`
@@ -18,6 +20,8 @@ declare module '@material-ui/core/styles/createMuiTheme' {
     footerHeight: number;
     mobileTopBarHeight: number;
     mobileFooterHeight: number;
+    sidebarMobilePadding: number;
+    participantBorderWidth: number;
   }
 }
 
@@ -114,5 +118,7 @@ export default createMuiTheme({
   mobileFooterHeight: 56,
   sidebarWidth: 355,
   sidebarMobileHeight: 90,
+  sidebarMobilePadding: 8,
+  participantBorderWidth: 2,
   mobileTopBarHeight: 52,
 });