feat(extra) : detect uploaded image ratio

components/admin/guide-section-editor.tsx

@@ -306,11 +306,12 @@ export interface GuideSectionEditorProps {
       title: string;
       rows: Array<{
         mediaId: string | null;
-        ratio: "1:1" | "16:9";
         heading: string;
         body: string;
         percent: string | null;
         imageUrl: string | null;
+        imageWidth: number | null;
+        imageHeight: number | null;
       }>;
     }>;
   };
@@ -3255,7 +3256,6 @@ function ExtraEditor({ guide, initial }: EditorBase) {
       title: section.title,
       rows: section.rows.map((row) => ({
         mediaId: row.mediaId,
-        ratio: row.ratio,
         heading: row.heading,
         body: row.body,
         percent:
@@ -3386,12 +3386,13 @@ function ExtraEditor({ guide, initial }: EditorBase) {
                     <FieldGroup>
                       {row.imageUrl ? (
                         <div
-                          className={cn(
-                            "relative overflow-hidden rounded-lg border",
-                            row.ratio === "1:1"
-                              ? "aspect-square"
-                              : "aspect-video",
-                          )}
+                          className="relative overflow-hidden rounded-lg border"
+                          style={{
+                            aspectRatio:
+                              row.imageWidth && row.imageHeight
+                                ? `${row.imageWidth} / ${row.imageHeight}`
+                                : "16 / 9",
+                          }}
                         >
                           <Image
                             src={row.imageUrl}
@@ -3425,6 +3426,8 @@ function ExtraEditor({ guide, initial }: EditorBase) {
                                                   ...candidate,
                                                   mediaId: null,
                                                   imageUrl: null,
+                                                  imageWidth: null,
+                                                  imageHeight: null,
                                                 }
                                               : candidate,
                                         ),
@@ -3451,6 +3454,8 @@ function ExtraEditor({ guide, initial }: EditorBase) {
                                             ...candidate,
                                             mediaId: asset.id,
                                             imageUrl: asset.url,
+                                            imageWidth: asset.width,
+                                            imageHeight: asset.height,
                                           }
                                         : candidate,
                                     ),
@@ -3460,46 +3465,6 @@ function ExtraEditor({ guide, initial }: EditorBase) {
                           )
                         }
                       />
-                      <Field>
-                        <FieldLabel>อัตราส่วนภาพ</FieldLabel>
-                        <ToggleGroup
-                          variant="outline"
-                          value={[row.ratio]}
-                          onValueChange={(selected) => {
-                            const ratio = selected[0];
-                            if (ratio === "1:1" || ratio === "16:9")
-                              setSections(
-                                sections.map((item, index) =>
-                                  index === sectionIndex
-                                    ? {
-                                        ...item,
-                                        rows: item.rows.map(
-                                          (candidate, inner) =>
-                                            inner === rowIndex
-                                              ? { ...candidate, ratio }
-                                              : candidate,
-                                        ),
-                                      }
-                                    : item,
-                                ),
-                              );
-                          }}
-                          className="flex-wrap justify-start"
-                        >
-                          <ToggleGroupItem
-                            className={SELECTED_TOGGLE_CLASS}
-                            value="1:1"
-                          >
-                            1:1
-                          </ToggleGroupItem>
-                          <ToggleGroupItem
-                            className={SELECTED_TOGGLE_CLASS}
-                            value="16:9"
-                          >
-                            16:9
-                          </ToggleGroupItem>
-                        </ToggleGroup>
-                      </Field>
                       <Field>
                         <FieldLabel>หัวข้อ</FieldLabel>
                         <Input
@@ -3628,7 +3593,8 @@ function ExtraEditor({ guide, initial }: EditorBase) {
                               {
                                 mediaId: null,
                                 imageUrl: null,
-                                ratio: "16:9",
+                                imageWidth: null,
+                                imageHeight: null,
                                 heading: "",
                                 body: "",
                                 percent: null,

components/admin/media-uploader.tsx

@@ -13,6 +13,8 @@ export interface UploadedMedia {
   id: string;
   url: string;
   fileName: string;
+  width: number;
+  height: number;
 }
 
 export function MediaUploader({