feat: add JSON and video error toasters (yondonfu#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 <john@eliteencoder.net>

Author: rickstaa

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",

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.",
+      });
     }
   };
 

ui/src/components/ui/sonner.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 };