fix & support a/v content types

gridaco · Jun 26, 2024 · 325ad13 · 325ad13
1 parent 4ed4252
commit 325ad13
Show file tree

Hide file tree

Showing 7 changed files with 298 additions and 101 deletions.
diff --git a/...forms/app/(api)/private/editor/connect/[form_id]/supabase/table/[table_id]/query/route.ts b/...forms/app/(api)/private/editor/connect/[form_id]/supabase/table/[table_id]/query/route.ts
@@ -52,7 +52,7 @@ export async function GET(req: NextRequest, context: Context) {
   pooler.queue(data, fields);
   const files = await pooler.resolve();
 
-  console.log("files", files);
+  // console.log("files", files);
 
   const datawithstorage = data.map((row: Record<string, any>) => {
     // TODO: get pk based on table schema (read comment in GridaXSupabaseStorageTaskPooler class)
@@ -180,14 +180,18 @@ class GridaXSupabaseStorageTaskPooler {
     rows: ReadonlyArray<Record<string, any>>,
     fields: FormFieldDefinition[]
   ) {
-    const file_fields = fields.filter((f) => FieldSupports.file_alias(f.type));
+    const x_supabase_storage_file_fields = fields.filter(
+      (f) =>
+        FieldSupports.file_alias(f.type) &&
+        (f.storage as XSupabaseStorageSchema)?.type === "x-supabase"
+    );
 
     for (const row of rows) {
       // TODO: get pk based on table schema (alternatively, we can use index as well - doesnt have to be a data from a fetched row)
       const pk = row.id;
       const task = this.storage.createSignedUrls(
         row,
-        file_fields.map((ff) => ({
+        x_supabase_storage_file_fields.map((ff) => ({
           ...(ff.storage as XSupabaseStorageSchema),
           id: ff.id,
         }))

diff --git a/apps/forms/components/form-field-type-icon.tsx b/apps/forms/components/form-field-type-icon.tsx
@@ -76,13 +76,10 @@ export function FormFieldTypeIcon({
     case "range":
       return <SliderIcon {...props} />;
     case "image":
-      return <FileImageIcon {...props} />;
     case "audio":
-      return <FileAudioIcon {...props} />;
     case "video":
-      return <FileVideoIcon {...props} />;
     case "file":
-      return <FileIcon {...props} />;
+      return <FileTypeIcon type={type} {...props} />;
     case "signature":
       // TODO: replace icon
       return <FilePenLineIcon {...props} />;
@@ -99,3 +96,27 @@ export function FormFieldTypeIcon({
       return <TextIcon {...props} />;
   }
 }
+
+export function FileTypeIcon({
+  type,
+  className,
+}: {
+  type: "file" | "image" | "audio" | "video";
+  className?: string;
+}) {
+  const props = {
+    className: className,
+  };
+
+  switch (type) {
+    case "image":
+      return <FileImageIcon {...props} />;
+    case "audio":
+      return <FileAudioIcon {...props} />;
+    case "video":
+      return <FileVideoIcon {...props} />;
+    case "file":
+    default:
+      return <FileIcon {...props} />;
+  }
+}
diff --git a/apps/forms/scaffolds/editor/feed.tsx b/apps/forms/scaffolds/editor/feed.tsx
@@ -437,7 +437,6 @@ function rowdiff(
       continue;
     }
     if (!equal(newRow[key], prevRow[key])) {
-      console.log("changed", key, newRow[key], prevRow[key]);
       changedFields[key] = newRow[key];
     }
   }
@@ -452,7 +451,10 @@ export function XSupabaseMainTableFeedProvider({
   const { datagrid_rows_per_page } = state;
 
   const request = state.connections.supabase?.main_supabase_table_id
-    ? `/private/editor/connect/${state.form_id}/supabase/table/${state.connections.supabase.main_supabase_table_id}/query?limit=${datagrid_rows_per_page}`
+    ? `/private/editor/connect/${state.form_id}/supabase/table/${state.connections.supabase.main_supabase_table_id}/query?limit=${datagrid_rows_per_page}` +
+      // refresh when fields are updated
+      "&r=" +
+      state.fields.length
     : null;
 
   const res = useSWR<EditorApiResponse<GridaSupabase.XDataRow[], any>>(

diff --git a/apps/forms/scaffolds/grid/file-cell.tsx b/apps/forms/scaffolds/grid/file-cell.tsx
@@ -40,14 +40,15 @@ import {
 import { useState } from "react";
 import { ScrollArea } from "@/components/ui/scroll-area";
 import { MediaPicker } from "../mediapicker";
+import { FileTypeIcon } from "@/components/form-field-type-icon";
 
 export function FileEditCell({
   type,
   accept,
   multiple,
   files,
 }: {
-  type: "image" | "file";
+  type: "image" | "file" | "audio" | "video";
   accept?: string;
   multiple?: boolean;
   files: {
@@ -64,7 +65,19 @@ export function FileEditCell({
   const { open: openMediaViewer } = useMediaViewer();
 
   const onEnterFullScreen = (f: GFFile) => {
-    openMediaViewer(f, "image/*");
+    switch (type) {
+      case "audio":
+        openMediaViewer(f, "audio/*");
+        break;
+      case "video":
+        openMediaViewer(f, "video/*");
+        break;
+      case "image":
+        openMediaViewer(f, "image/*");
+      default:
+        openMediaViewer(f);
+        break;
+    }
   };
 
   const canAddNewFile = multiple || files?.length === 0;
@@ -94,51 +107,11 @@ export function FileEditCell({
                   <DragHandleDots2Icon />
                 </Button> */}
                   <div className="w-4" />
-                  {type === "image" ? (
-                    <>
-                      <figure
-                        className="flex-1 cursor-zoom-in  py-4"
-                        onClick={() => onEnterFullScreen(f)}
-                      >
-                        {/* eslint-disable-next-line @next/next/no-img-element */}
-                        <img
-                          src={f.src}
-                          alt={f.name}
-                          className="w-full h-full object-fit"
-                        />
-                        <figcaption className="py-2 text-xs text-muted-foreground">
-                          <a
-                            href={f.download}
-                            target="_blank"
-                            rel="noreferrer"
-                            download
-                            className="hover:underline"
-                          >
-                            <DownloadIcon className="inline align-middle me-1" />
-                            {f.name}
-                          </a>
-                        </figcaption>
-                      </figure>
-                    </>
-                  ) : (
-                    <div className="flex-1 flex h-10 items-center ">
-                      <a
-                        href={f.download}
-                        target="_blank"
-                        rel="noreferrer"
-                        download
-                        className="hover:underline"
-                      >
-                        <span
-                          key={i}
-                          className="cursor-pointer hover:underline text-sm"
-                        >
-                          <FileIcon className="inline w-4 h-4 align-middle me-2" />
-                          {f.name}
-                        </span>
-                      </a>
-                    </div>
-                  )}
+                  <FileCard
+                    type={type}
+                    onEnterFullScreen={() => onEnterFullScreen(f)}
+                    {...f}
+                  />
                   <AlertDialog>
                     <DropdownMenu>
                       <DropdownMenuTrigger asChild>
@@ -249,3 +222,70 @@ export function FileEditCell({
     </Popover>
   );
 }
+
+function FileCard(props: {
+  type: "image" | "file" | "audio" | "video";
+  src: string;
+  srcset: {
+    thumbnail: string;
+    original: string;
+  };
+  download: string;
+  name: string;
+  onEnterFullScreen?: () => void;
+}) {
+  //
+
+  const { type, onEnterFullScreen, ...f } = props;
+
+  switch (type) {
+    case "image":
+      return (
+        <>
+          <figure
+            className="flex-1 cursor-zoom-in  py-4"
+            onClick={onEnterFullScreen}
+          >
+            {/* eslint-disable-next-line @next/next/no-img-element */}
+            <img
+              src={f.src}
+              alt={f.name}
+              className="w-full h-full object-fit"
+            />
+            <figcaption className="py-2 text-xs text-muted-foreground">
+              <a
+                href={f.download}
+                target="_blank"
+                rel="noreferrer"
+                download
+                className="hover:underline"
+              >
+                <DownloadIcon className="inline align-middle me-1" />
+                {f.name}
+              </a>
+            </figcaption>
+          </figure>
+        </>
+      );
+    default:
+      return (
+        <div className="flex-1 flex h-10 items-center ">
+          <a
+            href={f.download}
+            target="_blank"
+            rel="noreferrer"
+            download
+            className="hover:underline"
+          >
+            <span className="cursor-pointer hover:underline text-sm">
+              <FileTypeIcon
+                type={type}
+                className="inline w-4 h-4 align-middle me-2"
+              />
+              {f.name}
+            </span>
+          </a>
+        </div>
+      );
+  }
+}
diff --git a/apps/forms/scaffolds/grid/response-grid.tsx b/apps/forms/scaffolds/grid/response-grid.tsx
@@ -41,7 +41,10 @@ import { SelectColumn } from "./select-column";
 import "./grid.css";
 import { unwrapFeildValue } from "@/lib/forms/unwrap";
 import { Button } from "@/components/ui/button";
-import { FormFieldTypeIcon } from "@/components/form-field-type-icon";
+import {
+  FileTypeIcon,
+  FormFieldTypeIcon,
+} from "@/components/form-field-type-icon";
 import { toZonedTime } from "date-fns-tz";
 import { tztostr } from "../editor/symbols";
 import { mask } from "./mask";
@@ -455,12 +458,17 @@ function FieldCell({ column, row }: RenderCellProps<GFResponseRow>) {
         </div>
       );
     }
+    case "video":
+    case "audio":
     case "file": {
       return (
         <div className="w-full h-full flex gap-2">
           {files?.map((f, i) => (
             <span key={i}>
-              <FileIcon className="inline w-4 h-4 align-middle me-2" />
+              <FileTypeIcon
+                type={type as "file"}
+                className="inline w-4 h-4 align-middle me-2"
+              />
               {f.name}
             </span>
           ))}
@@ -477,6 +485,7 @@ function FieldCell({ column, row }: RenderCellProps<GFResponseRow>) {
                 src={file.src}
                 alt={file.name}
                 className="h-full min-w-10 aspect-square rounded overflow-hidden object-cover bg-neutral-500"
+                loading="lazy"
               />
               {/* <figcaption>{file.name}</figcaption> */}
             </figure>
@@ -642,10 +651,12 @@ function FieldEditCell(props: RenderEditCellProps<GFResponseRow>) {
           />
         );
       case "file":
+      case "audio":
+      case "video":
       case "image": {
         return (
           <FileEditCell
-            type={type as "file" | "image"}
+            type={type as "file" | "image" | "audio" | "video"}
             multiple={multiple}
             files={files || []}
           />