Fix Video Scaling Responsiveness (#69)

fixed video scaling responsiveness

feedingwebapp/src/Pages/Header/LiveVideoModal.jsx

@@ -1,5 +1,5 @@
 // React imports
-import React, { useEffect, useRef, useState } from 'react'
+import React, { useRef } from 'react'
 import { useMediaQuery } from 'react-responsive'
 // The Modal is a screen that appears on top of the main app, and can be toggled
 // on and off.
@@ -9,61 +9,22 @@ import Modal from 'react-bootstrap/Modal'
 import PropTypes from 'prop-types'
 
 // Local imports
-import { REALSENSE_WIDTH, REALSENSE_HEIGHT } from '../Constants'
-import { useWindowSize, convertRemToPixels, scaleWidthHeightToWindow, showVideo } from '../../helpers'
+import { convertRemToPixels } from '../../helpers'
+import VideoFeed from '../Home/VideoFeed'
 
 /**
  * The LiveVideoModal displays to the user the live video feed from the robot.
  *
  * TODO: Consider what will happen if the connection to ROS isn't working.
  */
 function LiveVideoModal(props) {
-  const ref = useRef(null)
-  // Use the default CSS properties of Modals to determine the margin around
-  // the image. This is necessary so the image is scaled to fit the window.
-  //
-  // NOTE: This must change if the CSS properties of the Modal change.
-  //
-  // marginTop: bs-modal-header-padding, h4 font size & line height, bs-modal-header-padding, bs-modal-padding
-  const marginTop = convertRemToPixels(1 + 1.5 * 1.5 + 1 + 1)
-  const marginBottom = convertRemToPixels(1)
-  const marginLeft = convertRemToPixels(1)
-  const marginRight = convertRemToPixels(1)
+  // Variables to render the VideoFeed
+  const modalBodyRef = useRef(null)
+  const margin = convertRemToPixels(1)
 
-  // Get current window size
-  let windowSize = useWindowSize()
-  // 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
-    let { width: widthUpdate, height: heightUpdate } = scaleWidthHeightToWindow(
-      windowSize,
-      REALSENSE_WIDTH,
-      REALSENSE_HEIGHT,
-      marginTop,
-      marginBottom,
-      marginLeft,
-      marginRight
-    )
-    setImgWidth(widthUpdate)
-    setImgHeight(heightUpdate)
-  }, [windowSize, marginTop, marginBottom, marginLeft, marginRight])
-
   return (
     <Modal
       show={props.show}
@@ -74,16 +35,24 @@ function LiveVideoModal(props) {
       keyboard={false}
       centered
       id='liveVideoModal'
-      ref={ref}
       fullscreen={true}
     >
       <Modal.Header closeButton>
         <Modal.Title id='contained-modal-title-vcenter' style={{ fontSize: isPortrait ? '3vh' : '3vw' }}>
           Live Video
         </Modal.Title>
       </Modal.Header>
-      <Modal.Body style={{ overflow: 'hidden' }}>
-        <center>{showVideo(props.webVideoServerURL, finalImgWidth, finalImgHeight, null)}</center>
+      <Modal.Body ref={modalBodyRef} style={{ overflow: 'hidden' }}>
+        <center>
+          <VideoFeed
+            webVideoServerURL={props.webVideoServerURL}
+            parent={modalBodyRef}
+            marginTop={margin}
+            marginBottom={margin}
+            marginLeft={margin}
+            marginRight={margin}
+          />
+        </center>
       </Modal.Body>
     </Modal>
   )

feedingwebapp/src/Pages/Home/BiteSelectionUIStates/ImageWithButtonName.jsx

@@ -3,7 +3,6 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import Button from 'react-bootstrap/Button'
 import Row from 'react-bootstrap/Row'
-import { scaleWidthHeightToWindow } from '../../../helpers'
 
 import '../Button.css'
 
@@ -20,8 +19,11 @@ import '../Button.css'
  *        image
  */
 const ImageWithButtonName = (props) => {
-  const width = scaleWidthHeightToWindow(props.imgWidth, props.imgHeight, 0, 0, 0, 0).width
-  const height = scaleWidthHeightToWindow(props.imgWidth, props.imgHeight, 0, 0, 0, 0).height
+  // NOTE: The width and height here may be broken, due to changes in and
+  // then deprecation of the `scaleWidthHeightToWindow` function. Changes were
+  // made (resulting in the below code) but not tested.
+  const width = props.imgWidth
+  const height = props.imgWidth
 
   return (
     <>

feedingwebapp/src/Pages/Home/BiteSelectionUIStates/ImageWithButtonOverlay.jsx

@@ -1,8 +1,8 @@
 // React Imports
 import React from 'react'
 import Button from 'react-bootstrap/Button'
-import { scaleWidthHeightToWindow } from '../../../helpers'
 import PropTypes from 'prop-types'
+import { REALSENSE_WIDTH, REALSENSE_HEIGHT } from '../../Constants'
 
 import '../Button.css'
 
@@ -23,9 +23,14 @@ import '../Button.css'
  */
 
 const ImageWithButtonOverlay = (props) => {
-  const width = scaleWidthHeightToWindow(props.imgWidth, props.imgHeight, 0, 0, 0, 0).width
-  const height = scaleWidthHeightToWindow(props.imgWidth, props.imgHeight, 0, 0, 0, 0).height
-  const scaleFactor = scaleWidthHeightToWindow(props.imgWidth, props.imgHeight, 0, 0, 0, 0).scaleFactor
+  // NOTE: The width and height here may be broken, due to changes in and
+  // then deprecation of the `scaleWidthHeightToWindow` function. Changes were
+  // made (resulting in the below code) but not tested.
+  const width = props.imgWidth
+  const height = props.imgHeight
+  let scaleFactorWidth = width / REALSENSE_WIDTH
+  let scaleFactorHeight = height / REALSENSE_HEIGHT
+  let scaleFactor = (scaleFactorWidth + scaleFactorHeight) / 2
 
   return (
     <>

feedingwebapp/src/Pages/Home/BiteSelectionUIStates/ImageWithPointMask.jsx

@@ -2,7 +2,6 @@
 import React, { useState } from 'react'
 import Button from 'react-bootstrap/Button'
 import Row from 'react-bootstrap/Row'
-import { scaleWidthHeightToWindow } from '../../../helpers'
 import PropTypes from 'prop-types'
 
 import '../Button.css'
@@ -18,8 +17,11 @@ import '../Button.css'
  *        the realsense camera
  */
 const ImageWithPointMask = (props) => {
-  const width = scaleWidthHeightToWindow(props.imgWidth, props.imgHeight, 0, 0, 0, 0).width
-  const height = scaleWidthHeightToWindow(props.imgWidth, props.imgHeight, 0, 0, 0, 0).height
+  // NOTE: The width and height here may be broken, due to changes in and
+  // then deprecation of the `scaleWidthHeightToWindow` function. Changes were
+  // made (resulting in the below code) but not tested.
+  const width = props.imgWidth
+  const height = props.imgHeight
   const [foodMasksToDisplay, setFoodMasksToDisplay] = useState([])
 
   const imageClicked = (event) => {