Novo Layout: Morpheus

.gitignore

@@ -69,3 +69,6 @@ dist
 
 # Generated random room config
 file/matrix.room.web.json
+
+# VSCode user settings
+.vscode/

.mocharc.js

@@ -0,0 +1,3 @@
+module.exports = {
+  require: ["@babel/register", "jsdom-global/register", "./test/setup.js"]
+};

backend/app.routes.js

@@ -14,7 +14,9 @@ router.get("/new", (req, res) => {
     temporary: true,
   };
 
-  const found = req.app.locals.roomsDetail.find(element => element.id == req.query.roomId);
+  const found = req.app.locals.roomsDetail.find(
+    element => element.id == req.query.roomId,
+  );
 
   if (!found) {
     req.app.locals.roomsDetail.splice(1, 0, newRoom);
@@ -35,4 +37,12 @@ router.get("/office", (req, res) => {
   res.render("office");
 });
 
+router.get("/rooms", (req, res) => {
+  res.json(req.app.locals.roomsDetail);
+});
+
+router.get("/morpheus*", (req, res) => {
+  res.render("morpheus");
+});
+
 module.exports = router;

frontend/.eslintrc.js

@@ -9,9 +9,10 @@ module.exports = {
   },
   rules: {
     quotes: ["error", "double"],
-    "react/jsx-filename-extension": [1, { "extensions": [".js"] }],
+    "react/jsx-filename-extension": [1, { extensions: [".js"] }],
     "import/prefer-default-export": "off",
     "react-hooks/rules-of-hooks": "error",
-    "react-hooks/exhaustive-deps": "warn"
+    "react-hooks/exhaustive-deps": "warn",
+    "no-new": "off"
   }
 };

frontend/components/AppBar.js

@@ -0,0 +1,85 @@
+import React from "react";
+import PropTypes from "prop-types";
+import clsx from "clsx";
+import { makeStyles } from "@material-ui/core/styles";
+import UIAppBar from "@material-ui/core/AppBar";
+import Toolbar from "@material-ui/core/Toolbar";
+import IconButton from "@material-ui/core/IconButton";
+import MenuIcon from "@material-ui/icons/Menu";
+
+import { drawerWidth } from "./Drawer";
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    transition: theme.transitions.create(["margin", "width"], {
+      easing: theme.transitions.easing.sharp,
+      duration: theme.transitions.duration.leavingScreen
+    })
+  },
+  colorDefault: {
+    backgroundColor: "#fff"
+  },
+  appBarShift: {
+    width: `calc(100% - ${drawerWidth}px)`,
+    marginLeft: drawerWidth,
+    transition: theme.transitions.create(["margin", "width"], {
+      easing: theme.transitions.easing.easeOut,
+      duration: theme.transitions.duration.enteringScreen
+    })
+  },
+  menuButton: {
+    marginRight: theme.spacing(2)
+  },
+  title: {
+    flexGrow: 1
+  },
+  hide: {
+    display: "none"
+  }
+}));
+
+const AppBar = ({ isDrawerOpen, openDrawer, children }) => {
+  const classes = useStyles();
+
+  return (
+    <div className={classes.root}>
+      <UIAppBar
+        position="fixed"
+        className={clsx(classes.appBar, {
+          [classes.appBarShift]: isDrawerOpen
+        })}
+        classes={{
+          colorDefault: classes.colorDefault
+        }}
+        color="default"
+      >
+        <Toolbar>
+          <IconButton
+            edge="start"
+            className={clsx(classes.menuButton, isDrawerOpen && classes.hide)}
+            color="inherit"
+            aria-label="Menu"
+            onClick={openDrawer}
+          >
+            <MenuIcon />
+          </IconButton>
+          {children}
+        </Toolbar>
+      </UIAppBar>
+    </div>
+  );
+};
+
+AppBar.propTypes = {
+  isDrawerOpen: PropTypes.bool,
+  openDrawer: PropTypes.func,
+  children: PropTypes.node
+};
+
+AppBar.defaultProps = {
+  isDrawerOpen: false,
+  openDrawer: undefined,
+  children: undefined
+};
+
+export default AppBar;

frontend/components/AppBarTitle.js

@@ -0,0 +1,30 @@
+import React from "react";
+import PropTypes from "prop-types";
+import Typography from "@material-ui/core/Typography";
+import { makeStyles } from "@material-ui/core/styles";
+
+const useStyles = makeStyles(() => ({
+  title: {
+    flexGrow: 1
+  }
+}));
+
+const AppBarTitle = ({ children }) => {
+  const classes = useStyles();
+
+  return (
+    <Typography variant="h6" className={classes.title} color="secondary">
+      {children}
+    </Typography>
+  );
+};
+
+AppBarTitle.propTypes = {
+  children: PropTypes.node
+};
+
+AppBarTitle.defaultProps = {
+  children: undefined
+};
+
+export default AppBarTitle;

frontend/components/Drawer.js

@@ -0,0 +1,63 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { makeStyles } from "@material-ui/core/styles";
+import UIDrawer from "@material-ui/core/Drawer";
+import Divider from "@material-ui/core/Divider";
+import IconButton from "@material-ui/core/IconButton";
+import ChevronLeftIcon from "@material-ui/icons/ChevronLeft";
+
+export const drawerWidth = 260;
+
+export const drawerHeader = theme => ({
+  display: "flex",
+  alignItems: "center",
+  padding: "0 8px",
+  ...theme.mixins.toolbar,
+  justifyContent: "flex-end"
+});
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    width: drawerWidth,
+    flexShrink: 0
+  },
+  drawerPaper: {
+    width: drawerWidth
+  },
+  drawerHeader: drawerHeader(theme)
+}));
+
+const Drawer = ({ open, onClose, children }) => {
+  const classes = useStyles();
+  return (
+    <UIDrawer
+      className={classes.root}
+      variant="persistent"
+      anchor="left"
+      open={open}
+      classes={{
+        paper: classes.drawerPaper
+      }}
+    >
+      <div className={classes.drawerHeader}>
+        <IconButton onClick={onClose}>
+          <ChevronLeftIcon />
+        </IconButton>
+      </div>
+      <Divider />
+      {children}
+    </UIDrawer>
+  );
+};
+
+Drawer.propTypes = {
+  open: PropTypes.bool.isRequired,
+  onClose: PropTypes.func.isRequired,
+  children: PropTypes.node
+};
+
+Drawer.defaultProps = {
+  children: undefined
+};
+
+export default Drawer;

frontend/components/EnterMeetingDialog.js

@@ -0,0 +1,98 @@
+import React, { useState } from "react";
+import PropTypes from "prop-types";
+import { makeStyles } from "@material-ui/core/styles";
+import Button from "@material-ui/core/Button";
+import Dialog from "@material-ui/core/Dialog";
+import DialogActions from "@material-ui/core/DialogActions";
+import DialogContent from "@material-ui/core/DialogContent";
+import DialogContentText from "@material-ui/core/DialogContentText";
+import DialogTitle from "@material-ui/core/DialogTitle";
+import Checkbox from "@material-ui/core/Checkbox";
+import Mic from "@material-ui/icons/Mic";
+import MicOff from "@material-ui/icons/MicOff";
+import Videocam from "@material-ui/icons/Videocam";
+import VideocamOff from "@material-ui/icons/VideocamOff";
+import Tooltip from "@material-ui/core/Tooltip";
+
+const useStyles = makeStyles(() => ({
+  toolbar: {
+    textAlign: "center",
+    minWidth: 260
+  },
+  sideMargin: {
+    marginRight: 8
+  }
+}));
+
+const EnterMeetingDialog = ({ open, onClose, onConfirm, title }) => {
+  const [micEnabled, setMicEnabled] = useState(true);
+  const [videoEnabled, setVideoEnabled] = useState(true);
+  const classes = useStyles();
+
+  return (
+    <Dialog open={open} onClose={onClose}>
+      <DialogTitle id="alert-dialog-title">{title}</DialogTitle>
+      <DialogContent>
+        <DialogContentText id="alert-dialog-description">
+          Enter the Matrix with:
+        </DialogContentText>
+        <div className={classes.toolbar}>
+          <Tooltip title={`${micEnabled ? "Disable" : "Enable"} MIC`}>
+            <Checkbox
+              className={classes.sideMargin}
+              icon={<MicOff fontSize="large" />}
+              checkedIcon={<Mic fontSize="large" />}
+              checked={micEnabled}
+              onChange={event => {
+                setMicEnabled(event.target.checked);
+              }}
+            />
+          </Tooltip>
+          <Tooltip title={`${videoEnabled ? "Disable" : "Enable"} Video`}>
+            <Checkbox
+              icon={<VideocamOff fontSize="large" />}
+              checkedIcon={<Videocam fontSize="large" />}
+              checked={videoEnabled}
+              onChange={event => {
+                setVideoEnabled(event.target.checked);
+              }}
+            />
+          </Tooltip>
+        </div>
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={onClose} color="primary">
+          Cancel
+        </Button>
+        <Button
+          onClick={() => {
+            onConfirm({
+              startWithAudioMuted: !micEnabled,
+              startWithVideoMuted: !videoEnabled
+            });
+          }}
+          color="primary"
+          autoFocus
+        >
+          Enter
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+};
+
+EnterMeetingDialog.propTypes = {
+  title: PropTypes.string,
+  open: PropTypes.bool,
+  onClose: PropTypes.func,
+  onConfirm: PropTypes.func
+};
+
+EnterMeetingDialog.defaultProps = {
+  title: "",
+  open: false,
+  onClose: undefined,
+  onConfirm: undefined
+};
+
+export default EnterMeetingDialog;

frontend/components/Error500.js

@@ -0,0 +1,59 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { makeStyles } from "@material-ui/core/styles";
+import Fab from "@material-ui/core/Fab";
+
+const useStyles = makeStyles(() => ({
+  root: {
+    height: "100vh",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    background: "url('/images/matrix-code-animated.gif')",
+    backgroundSize: "cover",
+    backgroundRepeat: "no-repeat"
+  },
+  box: {
+    textAlign: "center"
+  },
+  imgTitle: {
+    width: 360,
+    marginBottom: 30
+  }
+}));
+
+const Error500 = ({ onReload }) => {
+  const classes = useStyles();
+
+  return (
+    <div className={classes.root}>
+      <div className={classes.box}>
+        <div>
+          <img
+            className={classes.imgTitle}
+            src="/images/systemfailure.jpeg"
+            alt="System Failure"
+          />
+        </div>
+        <Fab
+          variant="extended"
+          color="secondary"
+          aria-label="Reload"
+          onClick={onReload}
+        >
+          Reload the Matrix
+        </Fab>
+      </div>
+    </div>
+  );
+};
+
+Error500.propTypes = {
+  onReload: PropTypes.func
+};
+
+Error500.defaultProps = {
+  onReload: () => {}
+};
+
+export default Error500;