feat: added bowser to detect mobile or desktop

package.json

@@ -18,6 +18,7 @@
     "@eyevinn/media-event-filter": "^2.0.0",
     "@hookform/error-message": "^2.0.1",
     "@types/react-router-dom": "^5.3.3",
+    "bowser": "^2.11.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.51.2",

src/api/bowser.ts

@@ -0,0 +1,7 @@
+import Bowser from "bowser";
+
+const deviceInfo = Bowser.parse(window.navigator.userAgent);
+
+export const isMobile = deviceInfo.platform.type === "mobile";
+
+export const isDesktop = deviceInfo.platform.type === "desktop";

src/components/landing-page/create-production.tsx

@@ -13,6 +13,7 @@ import {
 } from "./form-elements.tsx";
 import { API } from "../../api/api.ts";
 import { useGlobalState } from "../../global-state/context-provider.tsx";
+import { isDesktop, isMobile } from "../../api/bowser.ts";
 
 type FormValues = {
   productionName: string;
@@ -64,6 +65,9 @@ export const CreateProduction = () => {
 
   // Reset form values when created production id changes
   useEffect(() => {
+    // TODO remove this after testing
+    console.log(`Is this a mobile? "${isMobile}"`);
+    console.log(`Is this a desktop? "${isDesktop}"`);
     if (createdProductionId) {
       reset({
         productionName: "",

yarn.lock

@@ -1103,6 +1103,11 @@ balanced-match@^1.0.0:
   resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.2.tgz#e83e3a7e3f300b34cb9d87f615fa0cbf357690ee"
   integrity sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==
 
+bowser@^2.11.0:
+  version "2.11.0"
+  resolved "https://registry.yarnpkg.com/bowser/-/bowser-2.11.0.tgz#5ca3c35757a7aa5771500c70a73a9f91ef420a8f"
+  integrity sha512-AlcaJBi/pqqJBIQ8U9Mcpc9i8Aqxn88Skv5d+xBX006BY5u8N3mGLHa5Lgppa7L/HfwgwLgZ6NYs+Ag6uUmJRA==
+
 brace-expansion@^1.1.7:
   version "1.1.11"
   resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"