modified code so that the mobile camera will (hopefully) work

src/components/App.tsx

@@ -42,7 +42,6 @@ const App: FC = () => {
           </Route>
           <Route path="">
             <InputOptionsBar
-              text={text}
               setText={setText}
               setCameraOpen={setCameraModalOpen}
               setFile={(file: File) => {

src/components/INPUTS/InputOptionsBar.tsx

@@ -4,31 +4,40 @@ import CameraInput from "./camera/CameraInput";
 import { FileInput } from "./file/FileInput";
 import WriteInput from "./WriteInput";
 import type { booleanSetter, fileSetter, stringSetter } from "src/projectTypes";
+import CamMobile from "./camera/CamMobile";
 
 interface inputBarProps {
-  text: string;
   setText: stringSetter;
   setCameraOpen: booleanSetter;
   setFile: CallableFunction;
 }
 
 const InputOptionsBar: FC<inputBarProps> = ({
-  text,
   setText,
   setCameraOpen,
   setFile,
 }) => {
   const [camera, setCamera] = useState(<div />);
 
   async function detectCamera() {
+    //detect if we are on mobile.
+    let isMobile = /Mobi|Android/i.test(navigator.userAgent);
+
+    let camElement = isMobile ? (
+      <CamMobile setFile={setFile} />
+    ) : (
+      <CameraInput setCameraOpen={setCameraOpen} />
+    );
+
     return await navigator.mediaDevices
       .getUserMedia({ video: true })
       .then((stream) => {
         if (stream.getVideoTracks().length > 0) {
-          setCamera(<CameraInput setCameraOpen={setCameraOpen} />);
+          setCamera(camElement);
         }
       });
   }
+
   useEffect(() => {
     detectCamera();
   });

src/components/INPUTS/camera/CamMobile.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+import type { FC } from "react";
+import { misc } from "../../ICONS/ICONS";
+
+interface camMobileProps {
+  setFile: CallableFunction;
+}
+
+const CamMobile: FC<camMobileProps> = ({ setFile }) => {
+  let hasCamera: boolean;
+
+  function handleInput(e: React.ChangeEvent<HTMLInputElement>) {
+    let files = e.target.files;
+    if (files) {
+      let file = files[0];
+      setFile(file);
+    }
+  }
+
+  return (
+    <div>
+      <input
+        type="file"
+        name="image"
+        accept="image/*"
+        capture="environment"
+        onInput={handleInput}
+      >
+        {misc.Camera}
+      </input>
+    </div>
+  );
+};
+
+export default CamMobile;

src/components/INPUTS/camera/CameraInput.tsx

@@ -8,8 +8,6 @@ interface cameraInputProps {
 }
 
 const CameraInput: FC<cameraInputProps> = ({ setCameraOpen }) => {
-  let hasCamera: boolean;
-
   return (
     <div>
       <button onClick={() => setCameraOpen(true)} className={"inputOption"}>

src/components/INPUTS/file/FileInput.tsx

@@ -1,5 +1,5 @@
 import React, { FC, useRef, useState } from "react";
-import type { fileSetter, stringSetter } from "src/projectTypes";
+import type { stringSetter } from "src/projectTypes";
 import { misc } from "../../ICONS/ICONS";
 import handleFile from "../FileHandler";
 

tsconfig.json

@@ -11,7 +11,7 @@
     "forceConsistentCasingInFileNames": true,
     "resolveJsonModule": true,
     "allowSyntheticDefaultImports": true,
-    "importsNotUsedAsValues": "error",
+    "importsNotUsedAsValues": "preserve",
     "allowJs": false,
     "esModuleInterop": true,
     "noFallthroughCasesInSwitch": true,