From 78ffafca02bb59ea641cb430dba76f7e1a334ab3 Mon Sep 17 00:00:00 2001
From: EiffelFly <57251712+EiffelFly@users.noreply.github.com>
Date: Wed, 7 Feb 2024 19:42:52 +0800
Subject: [PATCH] feat: support video format at the end operator

---
 .../VideoPreview.tsx                          | 75 ++++++++++++-------
 .../components/common/index.ts                |  1 +
 .../component-output/ImagesField.tsx          |  4 +-
 .../component-output/VideoField.tsx           | 20 +++++
 .../component-output/VideosField.tsx          | 32 ++++++++
 .../components/component-output/index.ts      |  4 +
 .../VideoField.tsx                            |  5 +-
 .../VideosField.tsx                           |  5 +-
 ...mponentOutputFieldsFromInstillFormTree.tsx | 20 +++++
 .../transformStartOperatorMetadataToZod.ts    |  9 +++
 10 files changed, 141 insertions(+), 34 deletions(-)
 rename packages/toolkit/src/lib/use-instill-form/components/{start-operator-free-form-fields => common}/VideoPreview.tsx (52%)
 create mode 100644 packages/toolkit/src/lib/use-instill-form/components/component-output/VideoField.tsx
 create mode 100644 packages/toolkit/src/lib/use-instill-form/components/component-output/VideosField.tsx

diff --git a/packages/toolkit/src/lib/use-instill-form/components/start-operator-free-form-fields/VideoPreview.tsx b/packages/toolkit/src/lib/use-instill-form/components/common/VideoPreview.tsx
similarity index 52%
rename from packages/toolkit/src/lib/use-instill-form/components/start-operator-free-form-fields/VideoPreview.tsx
rename to packages/toolkit/src/lib/use-instill-form/components/common/VideoPreview.tsx
index 8feda6c630..d716fc4ec7 100644
--- a/packages/toolkit/src/lib/use-instill-form/components/start-operator-free-form-fields/VideoPreview.tsx
+++ b/packages/toolkit/src/lib/use-instill-form/components/common/VideoPreview.tsx
@@ -1,14 +1,13 @@
 import cn from "clsx";
 import * as React from "react";
-import { FieldMode } from "../../type";
+import { FieldMode } from "../../types";
+import { Icons } from "@instill-ai/design-system";
 
 export const VideoPreview = ({
   src,
-  mode,
   className,
 }: {
   src: string;
-  mode: FieldMode;
   className?: string;
 }) => {
   const [isPlaying, setIsPlaying] = React.useState(false);
@@ -34,40 +33,20 @@ export const VideoPreview = ({
       />
       {isPlaying ? (
         <div className="absolute bottom-0 left-0 right-0 top-0 z-10 flex items-center justify-center">
-          <PauseIcon className="h-1/3 w-1/3 stroke-white" />
+          <CustomizePauseIcon className="h-1/3 w-1/3 stroke-white stroke-1" />
         </div>
       ) : (
         <div className="absolute bottom-0 left-0 right-0 top-0 z-10 flex items-center justify-center">
-          <PlayIcon className="h-1/3 w-1/3 stroke-white" />
+          <CustomizePlayIcon className="h-1/3 w-1/3 stroke-white" />
         </div>
       )}
     </div>
   );
 };
 
-const PauseIcon = ({ className }: { className?: string }) => {
+const CustomizePlayIcon = ({ className }: { className?: string }) => {
   return (
     <svg
-      width="80"
-      height="80"
-      viewBox="0 0 80 80"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      className={className}
-    >
-      <path
-        d="M78.1998 40C78.1998 61.0972 61.0971 78.2 39.9998 78.2C18.9026 78.2 1.79985 61.0972 1.79985 40C1.79985 18.9027 18.9026 1.79996 39.9998 1.79996C61.0971 1.79996 78.1998 18.9027 78.1998 40Z"
-        strokeWidth="3.6"
-      />
-    </svg>
-  );
-};
-
-const PlayIcon = ({ className }: { className?: string }) => {
-  return (
-    <svg
-      width="80"
-      height="80"
       viewBox="0 0 80 80"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
@@ -89,3 +68,47 @@ const PlayIcon = ({ className }: { className?: string }) => {
     </svg>
   );
 };
+
+const CustomizePauseIcon = ({ className }: { className?: string }) => {
+  return (
+    <svg
+      viewBox="0 0 80 80"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <g filter="url(#filter0_b_857_30751)">
+        <path
+          d="M31.4998 28H28.4998V52H31.4998V28ZM51.4998 28H48.4998V52H51.4998V28ZM78.4998 40C78.4998 61.2629 61.2628 78.5 39.9998 78.5C18.7369 78.5 1.49985 61.2629 1.49985 40C1.49985 18.737 18.7369 1.49996 39.9998 1.49996C61.2628 1.49996 78.4998 18.737 78.4998 40Z"
+          stroke="white"
+          stroke-width="3"
+        />
+      </g>
+      <defs>
+        <filter
+          id="filter0_b_857_30751"
+          x="-19.2002"
+          y="-19.2"
+          width="118.4"
+          height="118.4"
+          filterUnits="userSpaceOnUse"
+          color-interpolation-filters="sRGB"
+        >
+          <feFlood flood-opacity="0" result="BackgroundImageFix" />
+          <feGaussianBlur in="BackgroundImageFix" stdDeviation="9.6" />
+          <feComposite
+            in2="SourceAlpha"
+            operator="in"
+            result="effect1_backgroundBlur_857_30751"
+          />
+          <feBlend
+            mode="normal"
+            in="SourceGraphic"
+            in2="effect1_backgroundBlur_857_30751"
+            result="shape"
+          />
+        </filter>
+      </defs>
+    </svg>
+  );
+};
diff --git a/packages/toolkit/src/lib/use-instill-form/components/common/index.ts b/packages/toolkit/src/lib/use-instill-form/components/common/index.ts
index 676ecac81b..610f53f90a 100644
--- a/packages/toolkit/src/lib/use-instill-form/components/common/index.ts
+++ b/packages/toolkit/src/lib/use-instill-form/components/common/index.ts
@@ -1 +1,2 @@
 export * from "./FieldDescriptionTooltip";
+export * from "./VideoPreview";
diff --git a/packages/toolkit/src/lib/use-instill-form/components/component-output/ImagesField.tsx b/packages/toolkit/src/lib/use-instill-form/components/component-output/ImagesField.tsx
index dc84d2a4c7..5917663931 100644
--- a/packages/toolkit/src/lib/use-instill-form/components/component-output/ImagesField.tsx
+++ b/packages/toolkit/src/lib/use-instill-form/components/component-output/ImagesField.tsx
@@ -12,8 +12,8 @@ export const ImagesField = (props: ImagesFieldProps) => {
   return (
     <FieldRoot title={title} fieldKey={`${title}-field`}>
       {images && !hideField ? (
-        <div className="flex w-full flex-wrap">
-          {images?.slice(0, 5)?.map((image) => {
+        <div className="flex w-full flex-wrap gap-2">
+          {images?.map((image) => {
             if (!image) return null;
 
             return (
diff --git a/packages/toolkit/src/lib/use-instill-form/components/component-output/VideoField.tsx b/packages/toolkit/src/lib/use-instill-form/components/component-output/VideoField.tsx
new file mode 100644
index 0000000000..a7e92889b7
--- /dev/null
+++ b/packages/toolkit/src/lib/use-instill-form/components/component-output/VideoField.tsx
@@ -0,0 +1,20 @@
+import { Nullable } from "../../../type";
+import { ComponentOutputFieldBaseProps } from "../../types";
+import { VideoPreview } from "../common";
+import { FieldRoot } from "./FieldRoot";
+
+export type VideoFieldProps = {
+  video: Nullable<string>;
+} & ComponentOutputFieldBaseProps;
+
+export const VideoField = (props: VideoFieldProps) => {
+  const { title, video, hideField } = props;
+
+  return (
+    <FieldRoot title={title} fieldKey={`${title}-field`}>
+      {!hideField && video ? (
+        <VideoPreview src={video} className="w-full" />
+      ) : null}
+    </FieldRoot>
+  );
+};
diff --git a/packages/toolkit/src/lib/use-instill-form/components/component-output/VideosField.tsx b/packages/toolkit/src/lib/use-instill-form/components/component-output/VideosField.tsx
new file mode 100644
index 0000000000..a7f44b5d7b
--- /dev/null
+++ b/packages/toolkit/src/lib/use-instill-form/components/component-output/VideosField.tsx
@@ -0,0 +1,32 @@
+import { Nullable } from "../../../type";
+import { ComponentOutputFieldBaseProps } from "../../types";
+import { VideoPreview } from "../common";
+import { FieldRoot } from "./FieldRoot";
+
+export type VideosFieldProps = {
+  videos: Nullable<string>[];
+} & ComponentOutputFieldBaseProps;
+
+export const VideosField = (props: VideosFieldProps) => {
+  const { title, videos, hideField } = props;
+
+  return (
+    <FieldRoot title={title} fieldKey={`${title}-field`}>
+      {videos && !hideField ? (
+        <div className="flex w-full flex-wrap gap-2">
+          {videos.map((video) => {
+            if (!video) return null;
+
+            return (
+              <VideoPreview
+                key={`${title}-${video}-field`}
+                src={video}
+                className="object-contain"
+              />
+            );
+          })}
+        </div>
+      ) : null}
+    </FieldRoot>
+  );
+};
diff --git a/packages/toolkit/src/lib/use-instill-form/components/component-output/index.ts b/packages/toolkit/src/lib/use-instill-form/components/component-output/index.ts
index 237cd31fa4..dcee27d412 100644
--- a/packages/toolkit/src/lib/use-instill-form/components/component-output/index.ts
+++ b/packages/toolkit/src/lib/use-instill-form/components/component-output/index.ts
@@ -8,6 +8,8 @@ import { ObjectField } from "./ObjectField";
 import { ObjectsField } from "./ObjectsField";
 import { TextField } from "./TextField";
 import { TextsField } from "./TextsField";
+import { VideoField } from "./VideoField";
+import { VideosField } from "./VideosField";
 
 export const ComponentOutputFields = {
   AudioField,
@@ -20,4 +22,6 @@ export const ComponentOutputFields = {
   ObjectsField,
   TextField,
   TextsField,
+  VideoField,
+  VideosField,
 };
diff --git a/packages/toolkit/src/lib/use-instill-form/components/start-operator-free-form-fields/VideoField.tsx b/packages/toolkit/src/lib/use-instill-form/components/start-operator-free-form-fields/VideoField.tsx
index 572690a365..2229cbbb28 100644
--- a/packages/toolkit/src/lib/use-instill-form/components/start-operator-free-form-fields/VideoField.tsx
+++ b/packages/toolkit/src/lib/use-instill-form/components/start-operator-free-form-fields/VideoField.tsx
@@ -6,8 +6,8 @@ import { readFileToBinary } from "../../../../view";
 import { FieldHead } from "./FieldHead";
 import { FileListItem } from "./FileListItem";
 import { UploadFileInput } from "./UploadFileInput";
-import { StartOperatorFreeFormFieldBaseProps } from "../../type";
-import { VideoPreview } from "./VideoPreview";
+import { StartOperatorFreeFormFieldBaseProps } from "../../types";
+import { VideoPreview } from "../common";
 
 export const VideoField = ({
   mode,
@@ -51,7 +51,6 @@ export const VideoField = ({
               {videoFile ? (
                 <VideoPreview
                   src={URL.createObjectURL(videoFile)}
-                  mode={mode}
                   className={mode === "build" ? "h-[150px]" : "h-[360px]"}
                 />
               ) : (
diff --git a/packages/toolkit/src/lib/use-instill-form/components/start-operator-free-form-fields/VideosField.tsx b/packages/toolkit/src/lib/use-instill-form/components/start-operator-free-form-fields/VideosField.tsx
index 7870ed9c32..781df2b1a4 100644
--- a/packages/toolkit/src/lib/use-instill-form/components/start-operator-free-form-fields/VideosField.tsx
+++ b/packages/toolkit/src/lib/use-instill-form/components/start-operator-free-form-fields/VideosField.tsx
@@ -6,8 +6,8 @@ import { readFileToBinary } from "../../../../view";
 import { FieldHead } from "./FieldHead";
 import { FileListItem } from "./FileListItem";
 import { UploadFileInput } from "./UploadFileInput";
-import { StartOperatorFreeFormFieldBaseProps } from "../../type";
-import { VideoPreview } from "./VideoPreview";
+import { StartOperatorFreeFormFieldBaseProps } from "../../types";
+import { VideoPreview } from "../common";
 
 export const VideosField = ({
   mode,
@@ -63,7 +63,6 @@ export const VideosField = ({
                         <VideoPreview
                           key={`${path}-${file.name}`}
                           src={URL.createObjectURL(file)}
-                          mode={mode}
                           className={
                             mode === "build"
                               ? "h-[55px] object-cover"
diff --git a/packages/toolkit/src/lib/use-instill-form/pick/pickComponentOutputFieldsFromInstillFormTree.tsx b/packages/toolkit/src/lib/use-instill-form/pick/pickComponentOutputFieldsFromInstillFormTree.tsx
index 31de20ef0d..425795a2d7 100644
--- a/packages/toolkit/src/lib/use-instill-form/pick/pickComponentOutputFieldsFromInstillFormTree.tsx
+++ b/packages/toolkit/src/lib/use-instill-form/pick/pickComponentOutputFieldsFromInstillFormTree.tsx
@@ -206,6 +206,16 @@ export function pickComponentOutputFieldsFromInstillFormTree(
           />
         );
       }
+      case "video": {
+        return (
+          <ComponentOutputFields.VideosField
+            mode={mode}
+            title={title}
+            videos={propertyValue}
+            hideField={hideField}
+          />
+        );
+      }
       case "text": {
         return (
           <ComponentOutputFields.TextsField
@@ -268,6 +278,16 @@ export function pickComponentOutputFieldsFromInstillFormTree(
         />
       );
     }
+    case "video": {
+      return (
+        <ComponentOutputFields.VideoField
+          mode={mode}
+          title={title}
+          video={propertyValue}
+          hideField={hideField}
+        />
+      );
+    }
     case "image": {
       return (
         <ComponentOutputFields.ImageField
diff --git a/packages/toolkit/src/lib/use-instill-form/transform/transformStartOperatorMetadataToZod.ts b/packages/toolkit/src/lib/use-instill-form/transform/transformStartOperatorMetadataToZod.ts
index 86aa09a1e8..f3e321870d 100644
--- a/packages/toolkit/src/lib/use-instill-form/transform/transformStartOperatorMetadataToZod.ts
+++ b/packages/toolkit/src/lib/use-instill-form/transform/transformStartOperatorMetadataToZod.ts
@@ -55,6 +55,15 @@ export function transformStartOperatorMetadataToZod(
           z.array(z.string()).nullable().optional()
         );
         break;
+      case "video/*":
+        zodSchema = zodSchema.setKey(key, z.string().nullable().optional());
+        break;
+      case "array:video/*":
+        zodSchema = zodSchema.setKey(
+          key,
+          z.array(z.string()).nullable().optional()
+        );
+        break;
       case "*/*":
         zodSchema = zodSchema.setKey(key, z.string().nullable().optional());
         break;