Add settings modal (#8)

* feat: mirror webcam image by default

* feat: add configuration modal

package.json

@@ -33,9 +33,14 @@
     "format": "eslint . --fix"
   },
   "dependencies": {
+    "@emotion/react": "^11.8.1",
+    "@emotion/styled": "^11.8.1",
+    "@mui/icons-material": "^5.4.2",
+    "@mui/material": "^5.4.3",
     "gatsby": "2.32.13",
     "gatsby-theme-mdx-deck": "^4.1.0",
     "mdx-deck": "^4.1.1",
-    "react-webcam": "^6.0.1"
+    "react-webcam": "^6.0.1",
+    "use-persisted-state": "^0.3.3"
   }
 }

src/gatsby-theme-mdx-deck/components/SettingsModal.js

@@ -0,0 +1,51 @@
+import React from 'react'
+import Box from '@mui/material/Box'
+import Typography from '@mui/material/Typography'
+import Modal from '@mui/material/Modal'
+import FormGroup from '@mui/material/FormGroup'
+import FormControlLabel from '@mui/material/FormControlLabel'
+import Switch from '@mui/material/Switch'
+import useSettings from '../../settings'
+
+const style = {
+  position: 'absolute',
+  top: '50%',
+  left: '50%',
+  transform: 'translate(-50%, -50%)',
+  width: 400,
+  bgcolor: 'background.paper',
+  border: '2px solid #000',
+  boxShadow: 24,
+  p: 4,
+}
+
+export default function SettingsModal({ show, onClose }) {
+  const { isCameraMirrored, setIsCameraMirrored } = useSettings()
+
+  return (
+    <Modal
+      open={show}
+      aria-labelledby="zoetic settings"
+      aria-describedby="change zoetic settings such as camera settings"
+      onClose={onClose}
+    >
+      <Box sx={style}>
+        <Typography id="modal-modal-title" variant="h6" component="h1">
+          zoetic settings
+        </Typography>
+        <FormGroup>
+          <FormControlLabel
+            control={
+              <Switch
+                defaultChecked
+                checked={isCameraMirrored}
+                onChange={(event) => setIsCameraMirrored(event.target.checked)}
+              />
+            }
+            label="Mirror my camera"
+          />
+        </FormGroup>
+      </Box>
+    </Modal>
+  )
+}

src/gatsby-theme-mdx-deck/components/app.js

@@ -1,11 +1,16 @@
 // Original source: https://github.com/jxnblk/mdx-deck/blob/master/packages/gatsby-theme/src/components/app.js
-import React, { useReducer } from 'react'
+import React, { useReducer, useState } from 'react'
 import merge from 'lodash.merge'
 import Webcam from 'react-webcam'
 import Context from 'gatsby-theme-mdx-deck/src/context'
 import { modes } from 'gatsby-theme-mdx-deck/src/constants'
+import SettingsModal from './SettingsModal'
+import useSettings from '../../settings'
+import SettingsIcon from '@mui/icons-material/Settings'
+import Button from '@mui/material/Button'
 
 const WebcamAsBackground = () => {
+  const { isCameraMirrored } = useSettings()
   const videoConstraints = {
     width: { min: 640, ideal: 1920, max: 1920 },
     height: { min: 400, ideal: 1080, max: 1080 },
@@ -14,6 +19,7 @@ const WebcamAsBackground = () => {
 
   return (
     <Webcam
+      mirrored={isCameraMirrored}
       videoConstraints={videoConstraints}
       style={{
         width: '100%',
@@ -41,6 +47,7 @@ const App = (props) => {
     step: 0,
     metadata: {},
   })
+  const [showSettings, setShowSettings] = useState(false)
 
   const register = (index, key, value) => {
     if (state.metadata[index] && state.metadata[index][key]) return
@@ -62,7 +69,18 @@ const App = (props) => {
   return (
     <>
       <WebcamAsBackground />
+      <Button
+        variant="contained"
+        startIcon={<SettingsIcon />}
+        onClick={() => setShowSettings(true)}
+      >
+        Settings
+      </Button>
       <Context.Provider value={context}>{props.children}</Context.Provider>
+      <SettingsModal
+        show={showSettings}
+        onClose={() => setShowSettings(false)}
+      />
     </>
   )
 }

src/settings.js

@@ -0,0 +1,11 @@
+import createPersistedState from 'use-persisted-state'
+
+const useIsCameraMirrored = createPersistedState('isCameraMirrored')
+
+export default function useSettings() {
+  const [isCameraMirrored, setIsCameraMirrored] = useIsCameraMirrored(true)
+  return {
+    isCameraMirrored,
+    setIsCameraMirrored,
+  }
+}