Merge pull request #3 from kantord/support-hd-webcam

feat: support HD webcams

gatsby-config.js

@@ -1,44 +1,7 @@
-const path = require('path')
-
-const src = process.env.__SRC__
-const dirname = path.dirname(src)
-
 module.exports = {
   plugins: [
-    // {
-    //   resolve: '@mdx-deck/gatsby-plugin',
-    //   options: {
-    //     path: src,
-    //     dirname,
-    //   },
-    // },
     {
       resolve: 'gatsby-theme-mdx-deck',
-      // options: {
-      //   // enable or disable gatsby-plugin-mdx
-      //   mdx: false,
-      //   // source directory
-      //   contentPath: dirname,
-      //   // base path for routes generate by this theme
-      //   basePath: ''
-      // }
     },
-    // {
-    //   resolve: 'gatsby-source-filesystem',
-    //   options: {
-    //     path: dirname + "/decks/",
-    //     ignore: [
-    //       'node_modules',
-    //       'public',
-    //       '.cache',
-    //     ]
-    //   },
-    // },
-    // {
-    //   resolve: 'gatsby-plugin-compile-es6-packages',
-    //   options: {
-    //     modules: ['mdx-deck', '@mdx-deck/themes', '@mdx-deck/gatsby-plugin'],
-    //   },
-    // },
   ],
 }

package.json

@@ -21,7 +21,6 @@
     "semantic-release": "^19.0.2"
   },
   "scripts": {
-    "develop": "gatsby develop",
     "start": "./cli.js hello.mdx",
     "build": "./cli.js build hello.mdx",
     "help": "./cli.js"

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

@@ -0,0 +1,66 @@
+// Original source: https://github.com/jxnblk/mdx-deck/blob/master/packages/gatsby-theme/src/components/app.js
+import React, { useReducer } 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'
+
+const WebcamAsBackground = () => {
+  const videoConstraints = {
+    width: { min: 640, ideal: 1920, max: 1920 },
+    height: { min: 400, ideal: 1080, max: 1080 },
+    facingMode: "user"
+  };
+
+  return (
+    <Webcam
+      videoConstraints={videoConstraints}
+      style={{
+        width: '100%',
+        height: '100%',
+        position: 'fixed',
+        objectFit: "cover",
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        zIndex: -1000,
+      }}
+    />
+  )
+}
+
+const reducer = (state, next) =>
+  typeof next === 'function'
+    ? merge({}, state, next(state))
+    : merge({}, state, next)
+
+export default props => {
+  const [state, setState] = useReducer(reducer, {
+    mode: modes.normal,
+    step: 0,
+    metadata: {},
+  })
+
+  const register = (index, key, value) => {
+    if (state.metadata[index] && state.metadata[index][key]) return
+    setState({
+      metadata: {
+        [index]: {
+          [key]: value,
+        },
+      },
+    })
+  }
+
+  const context = {
+    ...state,
+    setState,
+    register,
+  }
+
+  return <>
+    <WebcamAsBackground />
+    <Context.Provider value={context}>{props.children}</Context.Provider>
+  </>
+}