Full screen mode (#104)

Add a full screen button

Signed-off-by: ChamseddineBhd <[email protected]>

Author: ChamseddineBhd

package-lock.json

@@ -24,6 +24,7 @@
     "react-intl": "^3.11.0",
     "react-map-gl": "^5.2.3",
     "react-redux": "^7.1.3",
+    "react-request-fullscreen": "^1.1.2",
     "react-router": "^5.1.2",
     "react-router-dom": "^5.1.2",
     "react-scripts": "3.3.0",

package.json

@@ -86,7 +86,6 @@ const App = () => {
 
     const signInCallbackError = useSelector(state => state.signInCallbackError);
 
-
     const [userManager, setUserManager] = useState(noUserManager);
 
     const [showParameters, setShowParameters] = useState(false);

src/components/app.js

@@ -5,7 +5,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-import React from "react";
+import React, {useRef, useState} from "react";
 
 import {FormattedMessage} from "react-intl";
 import {useHistory} from 'react-router-dom';
@@ -26,10 +26,13 @@ import { withStyles } from '@material-ui/core/styles';
 import ListItemIcon from '@material-ui/core/ListItemIcon';
 import ListItemText from '@material-ui/core/ListItemText';
 import AppsIcon from '@material-ui/icons/Apps';
+import FullscreenExitIcon from '@material-ui/icons/FullscreenExit';
 
 import {ReactComponent as PowsyblLogo} from "../images/powsybl_logo.svg";
 import PropTypes from "prop-types";
 import {useSelector} from "react-redux";
+import FullscreenIcon from '@material-ui/icons/Fullscreen';
+import FullScreen, {fullScreenSupported} from "react-request-fullscreen";
 
 const useStyles = makeStyles(() => ({
     grow: {
@@ -90,6 +93,12 @@ const TopBar = (props) => {
 
     const [anchorElAppsMenu, setAnchorElAppsMenu] = React.useState(null);
 
+    const fullScreenRef = useRef(null);
+
+    const [isFullScreen, setIsFullScreen] = useState(false);
+
+    const history = useHistory();
+
     const handleClickGeneralMenu = event => {
         setAnchorElGeneralMenu(event.currentTarget);
     };
@@ -105,8 +114,6 @@ const TopBar = (props) => {
         setAnchorElAppsMenu(null);
     };
 
-    const history = useHistory();
-
     const onParametersClick = () => {
         handleCloseGeneralMenu();
       if (props.onParametersClick) {
@@ -119,8 +126,18 @@ const TopBar = (props) => {
         history.replace("/");
     };
 
+    function onFullScreenChange (isFullScreen) {
+        setIsFullScreen(isFullScreen);
+    }
+
+    function requestOrExitFullScreen () {
+        fullScreenRef.current.fullScreen();
+    }
+
     return (
         <AppBar position="static" color="default" className={classes.appBar}>
+            <FullScreen ref={fullScreenRef} onFullScreenChange={onFullScreenChange} onFullScreenError={(e) => console.debug("full screen error : " + e.message)}>
+            </FullScreen>
             <Toolbar>
                 <PowsyblLogo className={classes.logo} onClick={onLogoClick}/>
                 <Typography variant="h6" className={classes.title} onClick={onLogoClick}>
@@ -184,6 +201,26 @@ const TopBar = (props) => {
                                 <FormattedMessage id="settings"/>
                             </ListItemText>
                         </StyledMenuItem>
+                        {
+                            fullScreenSupported() ?  (
+                                <StyledMenuItem onClick={requestOrExitFullScreen}>
+                                {
+                                    isFullScreen ? (<>
+                                    <ListItemIcon>
+                                        <FullscreenExitIcon fontSize="small" />
+                                    </ListItemIcon>
+                                    <ListItemText>
+                                        <FormattedMessage id="exitFullScreen"/>
+                                    </ListItemText> </>) : (<>
+                                    <ListItemIcon>
+                                        <FullscreenIcon fontSize="small" />
+                                    </ListItemIcon>
+                                    <ListItemText>
+                                        <FormattedMessage id="goFullScreen"/>
+                                    </ListItemText></>)
+                                }
+                                </StyledMenuItem>) : <></>
+                        }
                         <StyledMenuItem onClick={props.onLogoutClick}>
                             <ListItemIcon>
                                 <ExitToAppIcon fontSize="small" />

src/components/top-bar.js

@@ -44,7 +44,8 @@
   "parameters": "Parameters",
   "theme": "Theme",
   "close": "Close",
-
+  "goFullScreen" : "Full screen",
+  "exitFullScreen" : "Exit full screen mode",
   "centerOnMap": "Center on the map",
   "openVoltageLevel": "Open the voltage level",
   "CBAll" : "All",

src/translations/en.json

@@ -43,10 +43,11 @@
   "parameters": "Paramètres",
   "theme": "Thème",
   "close": "Fermer",
+  "goFullScreen" : "Plein écran",
+  "exitFullScreen" : "Quitter mode plein écran",
 
   "centerOnMap": "Centrer sur la carte",
   "openVoltageLevel": "Ouvrir le poste",
   "CBAll" : "Tous",
   "CBNone" : "Aucun"
-
 }