responsiveness

feedingwebapp/src/Pages/Footer/Footer.jsx

@@ -33,7 +33,7 @@ const Footer = (props) => {
   let pauseIcon = '/robot_state_imgs/pause_button_icon.svg'
   let backIcon = props.backMealState ? MOVING_STATE_ICON_DICT[props.backMealState] : ''
   let resumeIcon = MOVING_STATE_ICON_DICT[mealState]
-  let phantomButtonIcon = '/robot_state_imgs/phantom_view_image.svg'
+  let phantomIcon = '/robot_state_imgs/phantom_view_image.svg'
   // Flag to check if the current orientation is portrait
   const isPortrait = useMediaQuery({ query: '(orientation: portrait)' })
   // Margins around footer buttons
@@ -76,7 +76,7 @@ const Footer = (props) => {
     },
     phantom: {
       text: null,
-      icon: phantomButtonIcon,
+      icon: phantomIcon,
       disabled: true,
       variant: 'ghost',
       callback: null,
@@ -90,7 +90,7 @@ const Footer = (props) => {
   /**
    * Get the footer text and button to render in footer.
    *
-   * @param {number} config - a single nested object with properties of footer buttons
+   * @param {object} config - a single nested object with properties of footer buttons
    *
    * @returns {JSX.Element} the footer text and button
    */

feedingwebapp/src/Pages/Header/Header.jsx

@@ -14,7 +14,6 @@ import { ToastContainer, toast } from 'react-toastify'
 import 'react-toastify/dist/ReactToastify.css'
 // ROS imports
 import { useROS } from '../../ros/ros_helpers'
-
 // Local imports
 import { ROS_CHECK_INTERVAL_MS, NON_MOVING_STATES } from '../Constants'
 import { useGlobalState, APP_PAGE, MEAL_STATE } from '../GlobalState'

feedingwebapp/src/Pages/Header/LiveVideoModal.jsx

@@ -32,12 +32,22 @@ function LiveVideoModal(props) {
 
   // Get current window size
   let windowSize = useWindowSize()
-  // Define variables for width and height of video
-  const [width, setWidth] = useState(windowSize.width)
-  const [height, setHeight] = useState(windowSize.height)
+  // Define variables for width and height of image
+  const [imgWidth, setImgWidth] = useState(windowSize.width)
+  const [imgHeight, setImgHeight] = useState(windowSize.height)
   // Flag to check if the current orientation is portrait
   const isPortrait = useMediaQuery({ query: '(orientation: portrait)' })
 
+  /** Factors to modify video size in landscape to fit space
+   *
+   * TODO: Adjust it accordingly when flexbox with directional arrows implemented
+   */
+  let landscapeSizeFactor = 0.9
+
+  // Get final image size according to screen orientation
+  let finalImgWidth = isPortrait ? imgWidth : landscapeSizeFactor * imgWidth
+  let finalImgHeight = isPortrait ? imgHeight : landscapeSizeFactor * imgHeight
+
   // Update the image size when the screen changes size.
   useEffect(() => {
     // 640 x 480 is the standard dimension of images outputed by the RealSense
@@ -50,8 +60,8 @@ function LiveVideoModal(props) {
       marginLeft,
       marginRight
     )
-    setWidth(widthUpdate)
-    setHeight(heightUpdate)
+    setImgWidth(widthUpdate)
+    setImgHeight(heightUpdate)
   }, [windowSize, marginTop, marginBottom, marginLeft, marginRight])
 
   return (
@@ -73,7 +83,7 @@ function LiveVideoModal(props) {
         </Modal.Title>
       </Modal.Header>
       <Modal.Body style={{ overflow: 'hidden' }}>
-        <center>{showVideo(props.webVideoServerURL, width, height, null)}</center>
+        <center>{showVideo(props.webVideoServerURL, finalImgWidth, finalImgHeight, null)}</center>
       </Modal.Body>
     </Modal>
   )