feat: add JSON and video error toasters (#44)

* feat: add JSON and video error toasters This commit ensures that users are aware if there has been an error trying to get their camara devices or parsing of the workflow json. * fix setSelectedVideoDevice name from rebase --------- Co-authored-by: Elite <[email protected]>
yondonfu · Feb 19, 2025 · a93858d · a93858d
1 parent 125c5d6
commit a93858d
Show file tree

Hide file tree

Showing 4 changed files with 67 additions and 36 deletions.
diff --git a/ui/src/app/layout.tsx b/ui/src/app/layout.tsx
@@ -1,7 +1,7 @@
 import type { Metadata } from "next";
 import localFont from "next/font/local";
 import "./globals.css";
-import { Toaster } from "@/components/ui/sonner";
+import { Toaster } from "@/components/ui/toaster";
 
 const geistSans = localFont({
   src: "./fonts/GeistVF.woff",

diff --git a/ui/src/components/settings.tsx b/ui/src/components/settings.tsx
@@ -36,6 +36,7 @@ import {
 import { useForm } from "react-hook-form";
 import { z } from "zod";
 import { Select } from "./ui/select";
+import { toast } from "sonner";
 
 export interface StreamConfig {
   streamUrl: string;
@@ -170,8 +171,16 @@ function ConfigForm({ config, onSubmit }: ConfigFormProps) {
       if (selectedVideoDevice == "none" && videoDevices.length > 1) {
         setSelectedVideoDevice(videoDevices[1].deviceId); // Index 1 because 0 is "No Video"
       }
-    } catch (err){
-      console.log(`Failed to get video devices: ${err}`);
+    } catch (error) {
+      console.log(`Failed to get video devices: ${error}`);
+      toast.error("Failed to get video devices", {
+        description: "Please make sure your camera is connected and enabled.",
+      });
+
+      // If we can't access video devices, still provide the None option
+      const videoDevices = [{ deviceId: "none", label: "No Video" }];
+      setVideoDevices(videoDevices);
+      setSelectedVideoDevice("none");
     }
   }, []);
 
@@ -194,8 +203,16 @@ function ConfigForm({ config, onSubmit }: ConfigFormProps) {
       if (selectedAudioDevice == "none" && audioDevices.length > 1) {
         setSelectedAudioDevice(audioDevices[1].deviceId);  // Index 1 because 0 is "No Audio"
       }
-    } catch (err) {
-      console.log(`Failed to get audio devices: ${err}`);
+    } catch (error) {
+      console.error("Failed to get audio devices: ", error);
+      toast.error("Failed to get audio devices", {
+        description: "Please make sure your microphone is connected and enabled.",
+      });
+
+      // If we can't access audio devices, still provide the None option
+      const audioDevices = [{ deviceId: "none", label: "No Audio" }];
+      setAudioDevices(audioDevices);
+      setSelectedAudioDevice("none");
     }
   }, []);
 
@@ -245,6 +262,9 @@ function ConfigForm({ config, onSubmit }: ConfigFormProps) {
       setOriginalPrompts(allPrompts);
     } catch (err) {
       console.error("Failed to parse one or more JSON files.", err);
+      toast.error("Failed to Parse Workflow", {
+        description: "Please upload a valid JSON file.",
+      });
     }
   };
 

diff --git a/ui/src/components/ui/sonner.tsx b/ui/src/components/ui/sonner.tsx
diff --git a/ui/src/components/ui/toaster.tsx b/ui/src/components/ui/toaster.tsx
@@ -0,0 +1,42 @@
+/**
+ * @file Contains a Toaster component that can be used to trigger toast notifications
+ * from anywhere in the app.
+ */
+"use client";
+import { useTheme } from "next-themes";
+import { Toaster as Sonner } from "sonner";
+
+type ToasterProps = React.ComponentProps<typeof Sonner>;
+
+/**
+ * Toaster component for displaying toast notifications using the `sonner` library.
+ *
+ * Add to the layout to trigger notifications anywhere in the app using the `toast`
+ * method.
+ *
+ * @param props - The props for the Toaster component.
+ */
+const Toaster = ({ ...props }: ToasterProps): JSX.Element => {
+  const { theme = "system" } = useTheme();
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps["theme"]}
+      className="toaster group"
+      toastOptions={{
+        classNames: {
+          toast:
+            "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
+          description: "group-[.toast]:text-muted-foreground",
+          actionButton:
+            "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
+          cancelButton:
+            "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
+        },
+      }}
+      {...props}
+    />
+  );
+};
+
+export { Toaster };