Merge branch 'staging_environment' into 3d_bin

src/bin/BinVisualizerV2.tsx

@@ -36,7 +36,6 @@ import { pond } from "protobuf-ts/pond";
 import { quack } from "protobuf-ts/quack";
 import { useGlobalState, useSnackbar } from "providers";
 import React, { useCallback, useEffect, useState } from "react";
-import { FullScreen, useFullScreenHandle } from "react-full-screen";
 import moment, { Moment } from "moment";
 import ResponsiveDialog from "common/ResponsiveDialog";
 import { getThemeType } from "theme";
@@ -72,6 +71,7 @@ import ButtonGroup from "common/ButtonGroup";
 import ModeChangeDialog from "./conditioning/modeChangeDialog";
 import CustomGrainSelector from "grain/CustomGrainSelector";
 import BinControllerDisplay from "./BinControllerDisplay";
+import { useFullScreen } from "hooks/FullScreenHandle";
 
 const useStyles = makeStyles((theme: Theme) => {
   return ({
@@ -217,7 +217,7 @@ export default function BinVisualizer(props: Props) {
   const isMobile = useMobile();
   const classes = useStyles();
   const theme = useTheme();
-  const fullScreenHandler = useFullScreenHandle();
+  const {fullScreenHandler, FullScreenWrapper} = useFullScreen()
   const viewport = useViewport();
   const { openSnack } = useSnackbar();
   const [fillPercentage, setFillPercentage] = useState<number | null>(0);
@@ -1344,7 +1344,7 @@ export default function BinVisualizer(props: Props) {
 
     return (
       <Box display="flex" width={1} justifyContent="flex-end">
-        <FullScreen handle={fullScreenHandler}>
+        <FullScreenWrapper>
           <Box
             position="relative"
             height={1}
@@ -1441,7 +1441,7 @@ export default function BinVisualizer(props: Props) {
               />
             </Box>
           </Box>
-        </FullScreen>
+        </FullScreenWrapper>
       </Box>
     );
   };