Merge pull request #12 from Jackson-Vieira/feature/set-output-device

feature: select output device
brunocroh · Jun 1, 2024 · f115036 · f115036
2 parents 27f0c9c + d231eac
commit f115036
Show file tree

Hide file tree

Showing 19 changed files with 601 additions and 375 deletions.
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -22,6 +22,7 @@ apps
 └── web
 └── server
 ```
+
 ## Development
 
 ### Fork this repo
@@ -110,7 +111,7 @@ the following categories:
   e.g. `feat(web): add new awesome feature`
 
 If you are interested in the detailed specification you can visit
-https://www.conventionalcommits.org/ 
+https://www.conventionalcommits.org/
 
 ## Requests for new features
 

diff --git a/apps/web/app/components/info-card.tsx b/apps/web/app/components/info-card.tsx
@@ -1,24 +1,27 @@
-
-import { Card, CardContent } from '@/components/ui/card'
-import { LucideIcon } from 'lucide-react';
-import React from 'react'
+import { Card, CardContent } from "@/components/ui/card"
+import { LucideIcon } from "lucide-react"
+import React from "react"
 
 type InfoCard = {
-  icon: LucideIcon;
-  content: string;
+  icon: LucideIcon
+  content: string
 }
 
-export const InfoCard: React.FC<InfoCard> = ({icon, content}) => {
+export const InfoCard: React.FC<InfoCard> = ({ icon, content }) => {
   const Icon = icon
   return (
-    <Card className="border-slate-5 bg-slate-6 w-full border border-b-0 md:w-2/5 " style={{background: "linear-gradient(180deg, rgba(80, 80, 80, 0.15) 0%, rgba(0, 0, 0, 0) 70%"}}>
+    <Card
+      className="border-slate-5 bg-slate-6 w-full border border-b-0 md:w-2/5 "
+      style={{
+        background:
+          "linear-gradient(180deg, rgba(80, 80, 80, 0.15) 0%, rgba(0, 0, 0, 0) 70%",
+      }}
+    >
       <CardContent className="flex flex-row items-center gap-4 p-5">
         <div className="border-slate-5 flex items-center justify-center rounded-md border border-b-0 border-r-0  bg-gradient-to-b from-white/[3%] to-violet-500/10 p-4 transition duration-200 ease-in-out">
           <Icon size={26} />
         </div>
-        <div className="">
-          {content}
-        </div>
+        <div className="">{content}</div>
       </CardContent>
     </Card>
   )

diff --git a/apps/web/app/permissions.d.ts b/apps/web/app/permissions.d.ts
@@ -2,16 +2,26 @@
 
 declare global {
   interface PermissionDescriptor {
-    name: 'camera' | 'microphone' | 'geolocation' | 'notifications' | 'persistent-storage' | 'push' | 'midi' | 'midi-sysex';
+    name:
+      | "camera"
+      | "microphone"
+      | "geolocation"
+      | "notifications"
+      | "persistent-storage"
+      | "push"
+      | "midi"
+      | "midi-sysex"
   }
 
   // Extend the PermissionName type
-  type ExtendedPermissionName = 'camera' | 'microphone';
+  type ExtendedPermissionName = "camera" | "microphone"
 
   interface Permissions {
-    query(permissionDesc: { name: ExtendedPermissionName }): Promise<PermissionStatus>;
+    query(permissionDesc: {
+      name: ExtendedPermissionName
+    }): Promise<PermissionStatus>
   }
 }
 
 // This is required to make TypeScript recognize the new types
-export {};
+export {}
diff --git a/apps/web/app/room/[slug]/feedback/actions.ts b/apps/web/app/room/[slug]/feedback/actions.ts
@@ -1,22 +1,21 @@
-'use server'
+"use server"
 
-import { redirect } from 'next/navigation'
+import { redirect } from "next/navigation"
 
-import { createClient } from '@/lib/supabase/server'
+import { createClient } from "@/lib/supabase/server"
 
 export async function sendFeedback(formData: FormData) {
   const supabase = createClient()
 
   const data = {
-    twitter: formData.get('twitter') as string,
-    content: formData.get('feedback') as string,
+    twitter: formData.get("twitter") as string,
+    content: formData.get("feedback") as string,
   }
 
-  if(data.twitter || data.content) {
-    const { error } = await supabase.from('feedbacks').insert(data)
+  if (data.twitter || data.content) {
+    const { error } = await supabase.from("feedbacks").insert(data)
     console.error("Fail to insert feedback", error)
   }
 
-
-  redirect('/room/queue')
+  redirect("/room/queue")
 }
diff --git a/apps/web/app/room/[slug]/feedback/page.tsx b/apps/web/app/room/[slug]/feedback/page.tsx
@@ -1,37 +1,52 @@
-import { Button } from "@/components/ui/button";
-import { Card, CardContent } from "@/components/ui/card";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import { Textarea } from "@/components/ui/textarea";
-import Link from "next/link";
-import React from "react";
-import { sendFeedback } from "./actions";
+import { Button } from "@/components/ui/button"
+import { Card, CardContent } from "@/components/ui/card"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Textarea } from "@/components/ui/textarea"
+import Link from "next/link"
+import React from "react"
+import { sendFeedback } from "./actions"
 
 export default function Page(): JSX.Element {
   return (
     <section className="container z-20 mt-24 flex h-full flex-col items-center">
-      <h2 className="text-slate-6 w-full text-center text-[3rem] leading-10">How was your experience practicing english?</h2>
-      <div className="mb-8 mt-4 w-full text-center text-slate-400">Share with us any feedback, problems, issues, ideas, or feature request.</div>
+      <h2 className="text-slate-6 w-full text-center text-[3rem] leading-10">
+        How was your experience practicing english?
+      </h2>
+      <div className="mb-8 mt-4 w-full text-center text-slate-400">
+        Share with us any feedback, problems, issues, ideas, or feature request.
+      </div>
       <Card className="border-slate-6 bg-slate-5 flex w-full flex-col items-center rounded-3xl border-x-0 border-b-0 border-t p-5 md:w-2/3">
         <CardContent className="w-full">
           <form className="flex w-full flex-col items-start gap-4 ">
             <div className="flex w-full flex-col items-baseline gap-2 sm:flex-row">
               <Label className="w-16">Twitter</Label>
-              <Input id="twitter" name="twitter" className="max-w-xs" placeholder="@brunocroh" />
+              <Input
+                id="twitter"
+                name="twitter"
+                className="max-w-xs"
+                placeholder="@brunocroh"
+              />
             </div>
             <div className="flex w-full flex-col items-baseline gap-2 sm:flex-row">
               <Label className="w-16">Feedback</Label>
-              <Textarea id="feedback" name="feedback" placeholder="Write here your feedback." />
+              <Textarea
+                id="feedback"
+                name="feedback"
+                placeholder="Write here your feedback."
+              />
             </div>
             <div className="flex flex-col gap-4 self-end sm:flex-row">
               <Link href="/room/queue">
-                <Button variant="outline">Not now, go back to practicing</Button>
+                <Button variant="outline">
+                  Not now, go back to practicing
+                </Button>
               </Link>
               <Button formAction={sendFeedback}>Send</Button>
             </div>
           </form>
         </CardContent>
       </Card>
     </section>
-  );
+  )
 }