Add camera option for image uploads

web/package.json

@@ -27,11 +27,11 @@
     "@uppy/progress-bar": "^4.0.0",
     "@uppy/react": "^4.0.1",
     "@uppy/tus": "^4.0.0",
+    "@uppy/webcam": "^4.0.1",
     "date-fns": "^4.1.0",
     "humanize-string": "2.1.0",
     "react": "18.3.1",
     "react-colorful": "^5.6.1",
-    "react-device-detect": "^2.2.3",
     "react-dom": "18.3.1",
     "react-typed": "^2.0.12"
   },

web/src/components/Portrait/PortraitForm/PortraitForm.tsx

@@ -133,7 +133,7 @@ const PortraitForm = ({ portrait }: PortraitFormProps) => {
             <Uploader
               onComplete={onUploadComplete}
               width="22rem"
-              height="11.5rem"
+              height="34.5rem"
               className="flex justify-center"
             />
             <p className="text-center">

web/src/components/Uploader/Uploader.tsx

@@ -5,11 +5,13 @@ import Uppy from '@uppy/core'
 import type { UploadResult, Meta } from '@uppy/core'
 import { Dashboard } from '@uppy/react'
 import Tus from '@uppy/tus'
+import Webcam from '@uppy/webcam'
 
 import { isProduction } from '@redwoodjs/api/logger'
 
 import '@uppy/core/dist/style.min.css'
 import '@uppy/dashboard/dist/style.min.css'
+import '@uppy/webcam/dist/style.min.css'
 
 type FileType = 'image' | 'pdf'
 
@@ -69,6 +71,11 @@ const Uploader = ({
         mimeType: 'image/webp',
       })
 
+    if (type === 'image')
+      instance.use(Webcam, {
+        modes: ['picture'],
+      })
+
     return instance.on('complete', onComplete)
   })
 

web/src/pages/Project/ProjectsPage/ProjectsPage.tsx

@@ -1,4 +1,4 @@
-import { isMobile, isBrowser } from 'react-device-detect'
+import mobile from 'is-mobile'
 
 import { Metadata } from '@redwoodjs/web'
 
@@ -14,8 +14,12 @@ const ProjectsPage = () => {
           <div className="max-w-md text-center">
             <h1 className="text-5xl font-bold">Projects</h1>
             <p className="py-6">
-              {isBrowser && !isMobile ? 'Click' : 'Tap'} on a project for
-              details
+              {mobile({
+                tablet: true,
+              })
+                ? 'Tap'
+                : 'Click'}{' '}
+              on a project for details
             </p>
           </div>
         </div>