🐛 Improve thumbnail upload; force 16:9 aspect ratio and fix overflow issues

packages/app/app/studio/(home)/components/CreateOrganizationForm.tsx

@@ -25,6 +25,7 @@ import { Loader2 } from 'lucide-react';
 import ImageUpload from '@/components/misc/form/imageUpload';
 import { useRouter } from 'next/navigation';
 import { IExtendedOrganization } from '@/lib/types';
+import { AspectRatio } from '@radix-ui/react-aspect-ratio';
 
 interface CreateOrganizationFormProps {
   organization?: IExtendedOrganization;
@@ -100,11 +101,15 @@ export default function CreateOrganizationForm({
               <FormItem className="">
                 <FormControl>
                   <ImageUpload
-                    className="h-40 w-full rounded-xl bg-neutrals-300"
-                    placeholder="Click to upload image here. Image must be exactly 1500x500 pixels. Maximum file size is 5MB."
-                    aspectRatio={3 / 1}
-                    path={`organizations`}
-                    requireExactSize={{ width: 1500, height: 500 }}
+                    className="w-full h-40 rounded-xl bg-neutrals-300"
+                    options={{
+                      requireExactSize: { width: 1500, height: 500 },
+                      resize: false,
+                      placeholder:
+                        'Click to upload image here. Image must be exactly 1500x500 pixels. Maximum file size is 2MB.',
+                      aspectRatio: 3 / 1,
+                    }}
+                    path="organizations"
                     {...field}
                   />
                 </FormControl>
@@ -119,10 +124,13 @@ export default function CreateOrganizationForm({
               <FormItem>
                 <FormControl>
                   <ImageUpload
-                    placeholder="Upload logo"
-                    aspectRatio={1}
+                    options={{
+                      placeholder: 'Upload logo',
+                      resize: false,
+                      isProfileImage: true,
+                      aspectRatio: 1,
+                    }}
                     path={`organizations`}
-                    isProfileImage={true}
                     {...field}
                   />
                 </FormControl>
@@ -193,7 +201,7 @@ export default function CreateOrganizationForm({
           <Button type="submit" className="ml-auto" variant={'primary'}>
             {isLoading ? (
               <>
-                <Loader2 className="mr-2 h-4 w-4 animate-spin" /> Please wait
+                <Loader2 className="mr-2 w-4 h-4 animate-spin" /> Please wait
               </>
             ) : organization ? (
               'Update'

packages/app/app/studio/[organization]/destinations/connect/page.tsx

@@ -1,8 +1,7 @@
 import { Button } from '@/components/ui/button';
 import Link from 'next/link';
-import React from 'react';
 import { LuArrowLeft } from 'react-icons/lu';
-import { SiTwitter } from 'react-icons/si';
+import { SiX } from 'react-icons/si';
 import YoutubeConnectButton from './components/YoutubeConnectButton';
 import { fetchOrganization } from '@/lib/services/organizationService';
 
@@ -21,25 +20,25 @@ const ConnectSocials = async ({
     })
   );
   return (
-    <div className="mx-6 h-full p-2">
+    <div className="p-2 mx-6 h-full">
       <Link href={`/studio/${params.organization}/destinations`}>
-        <div className="my-4 flex items-center justify-start space-x-4">
+        <div className="flex justify-start items-center my-4 space-x-4">
           <LuArrowLeft />
           <p>Back to destinations</p>
         </div>
       </Link>
 
-      <div className="flex flex-col overflow-auto rounded-xl border bg-white p-4">
+      <div className="flex overflow-auto flex-col p-4 bg-white rounded-xl border">
         <h3 className="mb-3 text-lg font-bold">Add a destination</h3>
         <p>
           Connect an account to StreamEth. Once connected, you can stream and
           upload clips and videos to it as often as you like.
         </p>
-        <div className="mt-4 flex w-fit flex-col gap-4">
+        <div className="flex flex-col gap-4 mt-4 w-fit">
           <YoutubeConnectButton state={state} />
           {/* <Link href={`/api/twitter/request?state=${state}`}> */}
           <Button disabled className="min-w-[200px] bg-[#121212]">
-            <SiTwitter className="mr-2" />
+            <SiX className="mr-2" />
             X(Twitter) (Coming Soon)
           </Button>
           {/* </Link> */}

packages/app/app/studio/[organization]/event/[eventId]/components/navigation/eventAccordion.tsx

@@ -130,7 +130,7 @@ const EventAccordion = ({
         >
           <AccordionItem value="item-1" className="px-2 text-black">
             <AccordionTrigger>Basics</AccordionTrigger>
-            <AccordionContent className="space-y-8 p-2">
+            <AccordionContent className="p-2 space-y-8">
               <FormField
                 control={form.control}
                 name="name"
@@ -172,9 +172,9 @@ const EventAccordion = ({
           </AccordionItem>
           <AccordionItem value="time" className="px-2">
             <AccordionTrigger>Time</AccordionTrigger>
-            <AccordionContent className="space-y-8 p-2">
+            <AccordionContent className="p-2 space-y-8">
               <div className="flex flex-col space-y-8">
-                <div className="flex w-full flex-row space-x-1">
+                <div className="flex flex-row space-x-1 w-full">
                   <FormField
                     control={form.control}
                     name="start"
@@ -208,7 +208,7 @@ const EventAccordion = ({
                     )}
                   />
                 </div>
-                <div className="flex w-full flex-row space-x-1">
+                <div className="flex flex-row space-x-1 w-full">
                   <FormField
                     control={form.control}
                     name="end"
@@ -286,7 +286,7 @@ const EventAccordion = ({
           </AccordionItem>
           <AccordionItem value="item-2" className="px-2">
             <AccordionTrigger>Appearance</AccordionTrigger>
-            <AccordionContent className="space-y-8 p-2">
+            <AccordionContent className="p-2 space-y-8">
               <div className="flex flex-row space-x-4">
                 <div className="flex w-1/6">
                   <FormField
@@ -297,10 +297,12 @@ const EventAccordion = ({
                         <FormLabel>Event Logo</FormLabel>
                         <FormControl>
                           <ImageUpload
+                            options={{
+                              resize: false,
+                              aspectRatio: 1,
+                            }}
                             path="events"
                             {...field}
-                            onChange={field.onChange}
-                            aspectRatio={1}
                           />
                         </FormControl>
                         <FormMessage />
@@ -317,10 +319,12 @@ const EventAccordion = ({
                         <FormLabel>Event Cover</FormLabel>
                         <FormControl>
                           <ImageUpload
+                            options={{
+                              resize: false,
+                              aspectRatio: 16 / 9,
+                            }}
                             path="events"
                             {...field}
-                            onChange={field.onChange}
-                            aspectRatio={16 / 9}
                           />
                         </FormControl>
                         <FormMessage />
@@ -340,7 +344,10 @@ const EventAccordion = ({
                             path="events"
                             {...field}
                             onChange={field.onChange}
-                            aspectRatio={3 / 1}
+                            options={{
+                              aspectRatio: 3 / 1,
+                              resize: false,
+                            }}
                           />
                         </FormControl>
                         <FormMessage />
@@ -378,7 +385,7 @@ const EventAccordion = ({
           </AccordionItem>
           <AccordionItem value="item-3" className="px-2">
             <AccordionTrigger>Event CMS</AccordionTrigger>
-            <AccordionContent className="space-y-8 p-2">
+            <AccordionContent className="p-2 space-y-8">
               <span>
                 Import your speaker data and your schedule from one of our
                 supported data providers.
@@ -399,7 +406,7 @@ const EventAccordion = ({
                   </FormItem>
                 )}
               />
-              <div className="flex justify-between gap-5">
+              <div className="flex gap-5 justify-between">
                 <Button disabled={isUpdatingEvent} type="submit">
                   Save
                 </Button>
@@ -416,7 +423,7 @@ const EventAccordion = ({
           </AccordionItem>
           <AccordionItem value="item-4" className="px-2">
             <AccordionTrigger>More</AccordionTrigger>
-            <AccordionContent className="flex flex-col space-y-8 p-2">
+            <AccordionContent className="flex flex-col p-2 space-y-8">
               <DeleteEvent organizationId={organizationId} event={event} />
             </AccordionContent>
           </AccordionItem>

packages/app/app/studio/[organization]/event/create/components/createEventForm.tsx

@@ -88,16 +88,16 @@ export default function CreateEventForm({
 
   return (
     <Form {...form}>
-      <Card className="relative mx-auto w-full max-w-4xl rounded-2xl border bg-white shadow-none">
-        <CardHeader className="flex flex-row items-center justify-between border-b">
+      <Card className="relative mx-auto w-full max-w-4xl bg-white rounded-2xl border shadow-none">
+        <CardHeader className="flex flex-row justify-between items-center border-b">
           <p className="text-3xl">Create an event</p>
-          <div className="flex w-full max-w-[300px] flex-row justify-between">
+          <div className="flex flex-row justify-between w-full max-w-[300px]">
             {[
               { stage: 0, name: 'Details' },
               { stage: 1, name: 'Design' },
               { stage: 2, name: 'Data' },
             ].map((i, index) => (
-              <div className="relative flex w-full flex-col" key={i.stage}>
+              <div className="flex relative flex-col w-full" key={i.stage}>
                 <div
                   onClick={() => setStage(i.stage)}
                   className={`z-50 mx-auto flex h-8 w-8 cursor-pointer items-center justify-center rounded-full text-sm text-white ${
@@ -113,7 +113,7 @@ export default function CreateEventForm({
                     } absolute top-0 z-40 h-full w-1/2 bg-white`}
                   ></div>
                 )}
-                <hr className="absolute top-[15px] z-[0] w-full bg-black" />
+                <hr className="absolute w-full bg-black top-[15px] z-[0]" />
                 <p
                   className={`z-50 mx-auto ${
                     stage === i.stage ? 'text-black' : 'text-muted'
@@ -128,7 +128,7 @@ export default function CreateEventForm({
         <CardContent className="'p-4">
           <form onSubmit={form.handleSubmit(onSubmit)}>
             <div
-              className="space-y-8 p-4"
+              className="p-4 space-y-8"
               style={
                 stage !== 0
                   ? { display: 'none' }
@@ -172,7 +172,7 @@ export default function CreateEventForm({
                   </FormItem>
                 )}
               />
-              <div className="flex w-full flex-row space-x-4">
+              <div className="flex flex-row space-x-4 w-full">
                 <FormField
                   control={form.control}
                   name="location"
@@ -211,7 +211,7 @@ export default function CreateEventForm({
                 />
               </div>
               <div className="flex flex-row space-x-4">
-                <div className="flex w-1/2 flex-row space-x-1">
+                <div className="flex flex-row space-x-1 w-1/2">
                   <FormField
                     control={form.control}
                     name="start"
@@ -245,7 +245,7 @@ export default function CreateEventForm({
                     )}
                   />
                 </div>
-                <div className="flex w-1/2 flex-row space-x-1">
+                <div className="flex flex-row space-x-1 w-1/2">
                   <FormField
                     control={form.control}
                     name="end"
@@ -290,9 +290,9 @@ export default function CreateEventForm({
                       display: 'block',
                     }
               }
-              className="space-y-4 p-4"
+              className="p-4 space-y-4"
             >
-              <div className=" ">
+              <div className="">
                 <p className="mb-4 text-lg">Upload event Logo and Banner</p>
                 <FormField
                   control={form.control}
@@ -301,10 +301,13 @@ export default function CreateEventForm({
                     <FormItem className="">
                       <FormControl>
                         <ImageUpload
-                          className="h-52 w-full rounded-xl bg-neutrals-300"
-                          placeholder="Drag or click to upload image here. Maximum image file size is 20MB.
-                    Best resolution of 1584 x 396px. Aspect ratio of 4:1. "
-                          aspectRatio={16 / 9}
+                          options={{
+                            resize: false,
+                            placeholder:
+                              'Drag or click to upload image here. Maximum image file size is 5MB. Best resolution of 1584 x 396px. Aspect ratio of 4:1. ',
+                            aspectRatio: 16 / 9,
+                          }}
+                          className="w-full h-52 rounded-xl bg-neutrals-300"
                           path={`events/${organization?.slug}`}
                           {...field}
                         />
@@ -317,11 +320,14 @@ export default function CreateEventForm({
                   control={form.control}
                   name="logo"
                   render={({ field }) => (
-                    <FormItem className="relative mx-4 mt-[-50px] flex h-24 w-24 rounded-full bg-white p-1">
+                    <FormItem className="flex relative p-1 mx-4 w-24 h-24 bg-white rounded-full mt-[-50px]">
                       <FormControl>
                         <ImageUpload
-                          className="m-auto h-full w-full rounded-full bg-neutrals-300 text-white"
-                          aspectRatio={1}
+                          className="m-auto w-full h-full text-white rounded-full bg-neutrals-300"
+                          options={{
+                            resize: false,
+                            aspectRatio: 1,
+                          }}
                           path={`events/${organization?.slug}`}
                           {...field}
                         />
@@ -331,7 +337,7 @@ export default function CreateEventForm({
                   )}
                 />
               </div>
-              <div className="flex w-full space-x-4">
+              <div className="flex space-x-4 w-full">
                 <FormField
                   control={form.control}
                   name="eventCover"
@@ -343,11 +349,14 @@ export default function CreateEventForm({
                       <FormControl>
                         <ImageUpload
                           className="h-40 rounded-xl"
-                          placeholder="Drag or click to upload image here. Maximum image file size is 20MB.
-                        Best resolution of 1584 x 396px. Aspect ratio of 4:1. "
+                          options={{
+                            resize: false,
+                            aspectRatio: 3 / 1,
+                            placeholder:
+                              'Drag or click to upload image here. Maximum image file size is 2MB. Best resolution of 1584 x 396px. Aspect ratio of 3:1. ',
+                          }}
                           path={`events/${organization?.slug}`}
                           {...field}
-                          aspectRatio={3 / 1}
                         />
                       </FormControl>
                       <FormMessage />
@@ -374,7 +383,7 @@ export default function CreateEventForm({
             </div>
             <div
               id="section3"
-              className="space-y-4 p-4"
+              className="p-4 space-y-4"
               style={
                 stage !== 2
                   ? { display: 'none' }
@@ -409,7 +418,7 @@ export default function CreateEventForm({
                 )}
               />
             </div>
-            <div className="flex flex-row items-end justify-end space-x-2">
+            <div className="flex flex-row justify-end items-end space-x-2">
               {stage !== 0 && (
                 <Button
                   variant={'outline'}
@@ -440,7 +449,7 @@ export default function CreateEventForm({
                 >
                   {isCreatingEvent ? (
                     <>
-                      <Loader2 className="mr-2 h-4 w-4 animate-spin" /> Please
+                      <Loader2 className="mr-2 w-4 h-4 animate-spin" /> Please
                       wait
                     </>
                   ) : (