@geekapps/silo-elements-nextjs 0.1.3 → 0.1.4

package/dist/MediaUploader.js

@@ -164,6 +164,72 @@ function ProgressBar({ progress, className = "", style }) {
     }
   );
 }
+var FORMATS = [
+  { value: "webp", label: "WebP", hint: "Melhor custo-benef\xEDcio" },
+  { value: "avif", label: "AVIF", hint: "M\xE1xima compress\xE3o" },
+  { value: "jpeg", label: "JPEG", hint: "Compatibilidade universal" },
+  { value: "png", label: "PNG", hint: "Sem perda" }
+];
+function ImageOptions({ value, onChange, style }) {
+  const fmt = value.format ?? "webp";
+  const optimize = value.optimize ?? true;
+  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 10, ...style }, children: [
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("div", { style: { fontSize: 11, fontWeight: 700, color: "var(--silo-text-muted, #64748b)", letterSpacing: "0.05em", textTransform: "uppercase", marginBottom: 6 }, children: "Formato de sa\xEDda" }),
+      /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: 6, flexWrap: "wrap" }, children: FORMATS.map((f) => /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => onChange({ ...value, format: f.value }),
+          title: f.hint,
+          style: {
+            padding: "4px 12px",
+            borderRadius: 6,
+            border: `1px solid ${fmt === f.value ? "var(--silo-accent, #6366f1)" : "var(--silo-border, #e2e8f0)"}`,
+            background: fmt === f.value ? "var(--silo-accent, #6366f1)" : "transparent",
+            color: fmt === f.value ? "#fff" : "var(--silo-text, #0f172a)",
+            fontSize: 12,
+            fontWeight: 600,
+            cursor: "pointer"
+          },
+          children: f.label
+        },
+        f.value
+      )) })
+    ] }),
+    /* @__PURE__ */ jsxs("label", { style: { display: "flex", alignItems: "center", gap: 8, cursor: "pointer", userSelect: "none" }, children: [
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          onClick: () => onChange({ ...value, optimize: !optimize }),
+          style: {
+            width: 36,
+            height: 20,
+            borderRadius: 10,
+            background: optimize ? "var(--silo-accent, #6366f1)" : "var(--silo-border, #e2e8f0)",
+            position: "relative",
+            flexShrink: 0,
+            transition: "background 0.15s",
+            cursor: "pointer"
+          },
+          children: /* @__PURE__ */ jsx("span", { style: {
+            position: "absolute",
+            top: 2,
+            left: optimize ? 18 : 2,
+            width: 16,
+            height: 16,
+            borderRadius: "50%",
+            background: "#fff",
+            transition: "left 0.15s",
+            boxShadow: "0 1px 3px rgba(0,0,0,0.2)"
+          } })
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { style: { fontSize: 12, color: "var(--silo-text, #0f172a)", fontWeight: 500 }, children: "Otimizar tamanho" }),
+      /* @__PURE__ */ jsx("span", { style: { fontSize: 11, color: "var(--silo-text-muted, #94a3b8)" }, children: optimize ? "Qualidade 85 \u2014 menor tamanho" : "Qualidade m\xE1xima" })
+    ] })
+  ] });
+}
 
 // src/utils/format.ts
 function formatBytes(bytes) {
@@ -195,6 +261,7 @@ function ImageUploader({
   maxSize,
   accept = "image/*",
   showPreview = true,
+  showImageOptions = false,
   image,
   theme,
   renderIcon,
@@ -205,6 +272,7 @@ function ImageUploader({
 }) {
   const { state, upload, pause, resume, abort, reset } = useMultipartUpload(bucket);
   const [preview, setPreview] = useState(null);
+  const [imageOpts, setImageOpts] = useState(image ?? { format: "webp", optimize: true });
   const t = resolveTheme(theme);
   const vars = themeToVars(t);
   const handleFiles = useCallback(async (files) => {
@@ -212,16 +280,17 @@ function ImageUploader({
     if (!file) return;
     if (showPreview) setPreview(URL.createObjectURL(file));
     try {
+      const opts = showImageOptions ? imageOpts : image ?? imageOpts;
       const result = await upload(file, {
         ...bucket !== void 0 && { bucket },
         visibility,
-        ...image && { image }
+        image: opts
       });
       if (result) onUpload?.(result);
     } catch (err) {
       onError?.(err instanceof Error ? err : new Error(String(err)));
     }
-  }, [upload, bucket, visibility, image, onUpload, onError, showPreview]);
+  }, [upload, bucket, visibility, image, imageOpts, showImageOptions, onUpload, onError, showPreview]);
   const containerStyle = {
     ...vars,
     display: "flex",
@@ -237,6 +306,14 @@ function ImageUploader({
   if (state.status === "error" && renderError) return /* @__PURE__ */ jsx("div", { style: containerStyle, children: renderError(state.error, reset) });
   if (state.status === "done" && renderSuccess) return /* @__PURE__ */ jsx("div", { style: containerStyle, children: renderSuccess(state.result) });
   return /* @__PURE__ */ jsxs("div", { className: `silo-image-uploader${className ? ` ${className}` : ""}`, style: containerStyle, children: [
+    showImageOptions && !isUploading && state.status !== "done" && /* @__PURE__ */ jsx(
+      ImageOptions,
+      {
+        value: imageOpts,
+        onChange: setImageOpts,
+        style: { padding: "12px 14px", borderRadius: 8, border: "1px solid var(--silo-border, #e2e8f0)", background: "var(--silo-bg-hover, #f8fafc)" }
+      }
+    ),
     /* @__PURE__ */ jsx(
       DropZone,
       {
@@ -303,6 +380,132 @@ function ImageUploader({
     ] })
   ] });
 }
+var CODECS = [
+  { value: "h264", label: "H.264", hint: "Compatibilidade m\xE1xima" },
+  { value: "h265", label: "H.265", hint: "Melhor compress\xE3o" },
+  { value: "av1", label: "AV1", hint: "Futuro \u2014 menor tamanho" },
+  { value: "vp9", label: "VP9", hint: "Open source" }
+];
+var RESOLUTIONS = ["360", "480", "720", "1080", "1440", "2160"];
+var RESOLUTION_LABELS = {
+  "360": "360p",
+  "480": "480p",
+  "720": "720p",
+  "1080": "1080p",
+  "1440": "1440p",
+  "2160": "4K"
+};
+function VideoOptions({ value, onChange, style }) {
+  const codec = value.codec ?? "h264";
+  const transcoding = value.transcoding ?? "auto";
+  const isAuto = transcoding === "auto";
+  const selectedRes = isAuto ? [] : transcoding;
+  function toggleRes(r) {
+    if (isAuto) {
+      onChange({ ...value, transcoding: [r] });
+      return;
+    }
+    const next = selectedRes.includes(r) ? selectedRes.filter((x) => x !== r) : [...selectedRes, r];
+    onChange({ ...value, transcoding: next.length === 0 ? "auto" : next });
+  }
+  function toggleFeature(key) {
+    onChange({ ...value, [key]: !value[key] });
+  }
+  const btn = (active) => ({
+    padding: "4px 10px",
+    borderRadius: 6,
+    border: `1px solid ${active ? "var(--silo-accent, #6366f1)" : "var(--silo-border, #e2e8f0)"}`,
+    background: active ? "var(--silo-accent, #6366f1)" : "transparent",
+    color: active ? "#fff" : "var(--silo-text, #0f172a)",
+    fontSize: 12,
+    fontWeight: 600,
+    cursor: "pointer"
+  });
+  const toggle = (on) => ({
+    display: "inline-flex",
+    alignItems: "center",
+    gap: 6,
+    cursor: "pointer",
+    userSelect: "none",
+    fontSize: 12,
+    color: "var(--silo-text, #0f172a)",
+    fontWeight: 500
+  });
+  function Toggle({ checked, onToggle, label }) {
+    return /* @__PURE__ */ jsxs("label", { style: toggle(), onClick: onToggle, children: [
+      /* @__PURE__ */ jsx("span", { style: {
+        width: 32,
+        height: 18,
+        borderRadius: 9,
+        flexShrink: 0,
+        background: checked ? "var(--silo-accent, #6366f1)" : "var(--silo-border, #e2e8f0)",
+        position: "relative",
+        transition: "background 0.15s",
+        cursor: "pointer"
+      }, children: /* @__PURE__ */ jsx("span", { style: {
+        position: "absolute",
+        top: 2,
+        left: checked ? 16 : 2,
+        width: 14,
+        height: 14,
+        borderRadius: "50%",
+        background: "#fff",
+        transition: "left 0.15s",
+        boxShadow: "0 1px 3px rgba(0,0,0,0.2)"
+      } }) }),
+      label
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 12, ...style }, children: [
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("div", { style: { fontSize: 11, fontWeight: 700, color: "var(--silo-text-muted, #64748b)", letterSpacing: "0.05em", textTransform: "uppercase", marginBottom: 6 }, children: "Codec" }),
+      /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: 6, flexWrap: "wrap" }, children: CODECS.map((c) => /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          title: c.hint,
+          onClick: () => onChange({ ...value, codec: c.value }),
+          style: btn(codec === c.value),
+          children: c.label
+        },
+        c.value
+      )) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("div", { style: { fontSize: 11, fontWeight: 700, color: "var(--silo-text-muted, #64748b)", letterSpacing: "0.05em", textTransform: "uppercase", marginBottom: 6 }, children: "Resolu\xE7\xF5es" }),
+      /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 6, flexWrap: "wrap" }, children: [
+        /* @__PURE__ */ jsx("button", { type: "button", onClick: () => onChange({ ...value, transcoding: "auto" }), style: btn(isAuto), children: "Auto" }),
+        RESOLUTIONS.map((r) => /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => toggleRes(r),
+            style: btn(!isAuto && selectedRes.includes(r)),
+            children: RESOLUTION_LABELS[r]
+          },
+          r
+        ))
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("div", { style: { fontSize: 11, fontWeight: 700, color: "var(--silo-text-muted, #64748b)", letterSpacing: "0.05em", textTransform: "uppercase", marginBottom: 8 }, children: "Recursos" }),
+      /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 8 }, children: [
+        /* @__PURE__ */ jsx(Toggle, { checked: value.thumbnails ?? true, onToggle: () => toggleFeature("thumbnails"), label: "Gerar thumbnails" }),
+        /* @__PURE__ */ jsx(Toggle, { checked: value.storyboard ?? false, onToggle: () => toggleFeature("storyboard"), label: "Gerar storyboard" }),
+        /* @__PURE__ */ jsx(Toggle, { checked: value.autoCaptions ?? false, onToggle: () => toggleFeature("autoCaptions"), label: "Legendas autom\xE1ticas (IA)" }),
+        /* @__PURE__ */ jsx(Toggle, { checked: value.separateAudio ?? false, onToggle: () => toggleFeature("separateAudio"), label: "Separar faixa de \xE1udio" })
+      ] })
+    ] })
+  ] });
+}
+var DEFAULT_VIDEO_OPTS = {
+  thumbnails: true,
+  storyboard: false,
+  autoCaptions: false,
+  separateAudio: false,
+  codec: "h264",
+  transcoding: "auto"
+};
 function VideoUploader({
   bucket,
   expiresIn,
@@ -315,6 +518,7 @@ function VideoUploader({
   maxSize,
   accept = "video/*",
   showPreview = true,
+  showVideoOptions = false,
   video,
   theme,
   renderIcon,
@@ -325,6 +529,7 @@ function VideoUploader({
 }) {
   const { state, upload, pause, resume, abort, reset } = useMultipartUpload(bucket);
   const [preview, setPreview] = useState(null);
+  const [videoOpts, setVideoOpts] = useState(video ?? DEFAULT_VIDEO_OPTS);
   const t = resolveTheme(theme);
   const vars = themeToVars(t);
   const handleFiles = useCallback(async (files) => {
@@ -332,16 +537,17 @@ function VideoUploader({
     if (!file) return;
     if (showPreview) setPreview(URL.createObjectURL(file));
     try {
+      const opts = showVideoOptions ? videoOpts : video ?? videoOpts;
       const result = await upload(file, {
         ...bucket !== void 0 && { bucket },
         visibility,
-        ...video && { video }
+        video: opts
       });
       if (result) onUpload?.(result);
     } catch (err) {
       onError?.(err instanceof Error ? err : new Error(String(err)));
     }
-  }, [upload, bucket, visibility, video, onUpload, onError, showPreview]);
+  }, [upload, bucket, visibility, video, videoOpts, showVideoOptions, onUpload, onError, showPreview]);
   const containerStyle = {
     ...vars,
     display: "flex",
@@ -357,6 +563,14 @@ function VideoUploader({
   if (state.status === "error" && renderError) return /* @__PURE__ */ jsx("div", { style: containerStyle, children: renderError(state.error, reset) });
   if (state.status === "done" && renderSuccess) return /* @__PURE__ */ jsx("div", { style: containerStyle, children: renderSuccess(state.result) });
   return /* @__PURE__ */ jsxs("div", { className: `silo-video-uploader${className ? ` ${className}` : ""}`, style: containerStyle, children: [
+    showVideoOptions && !isUploading && state.status !== "done" && /* @__PURE__ */ jsx(
+      VideoOptions,
+      {
+        value: videoOpts,
+        onChange: setVideoOpts,
+        style: { padding: "12px 14px", borderRadius: 8, border: "1px solid var(--silo-border, #e2e8f0)", background: "var(--silo-bg-hover, #f8fafc)" }
+      }
+    ),
     /* @__PURE__ */ jsx(
       DropZone,
       {
@@ -398,7 +612,14 @@ function VideoUploader({
       /* @__PURE__ */ jsx("span", { style: { fontSize: "12px", color: "var(--silo-text-muted)" }, children: "O processamento inicia ap\xF3s o upload" })
     ] }) }),
     isPaused && /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "8px" }, children: [
-      /* @__PURE__ */ jsx("button", { onClick: () => resume({ ...bucket !== void 0 && { bucket }, visibility, ...video && { video } }), style: { flex: 1, padding: "8px", borderRadius: "6px", border: "none", backgroundColor: "#10b981", color: "#fff", fontSize: "13px", fontWeight: 600, cursor: "pointer" }, children: "Retomar upload" }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: () => resume({ ...bucket !== void 0 && { bucket }, visibility, video: showVideoOptions ? videoOpts : video ?? videoOpts }),
+          style: { flex: 1, padding: "8px", borderRadius: "6px", border: "none", backgroundColor: "#10b981", color: "#fff", fontSize: "13px", fontWeight: 600, cursor: "pointer" },
+          children: "Retomar upload"
+        }
+      ),
       /* @__PURE__ */ jsx("button", { onClick: () => {
         abort();
         setPreview(null);
@@ -421,6 +642,14 @@ function VideoUploader({
     ] })
   ] });
 }
+var DEFAULT_VIDEO_OPTS2 = {
+  thumbnails: true,
+  storyboard: false,
+  autoCaptions: false,
+  separateAudio: false,
+  codec: "h264",
+  transcoding: "auto"
+};
 function FileUploader({
   bucket,
   visibility = "private",
@@ -434,6 +663,8 @@ function FileUploader({
   accept,
   multiple = false,
   allowRename = false,
+  showImageOptions = false,
+  showVideoOptions = false,
   image,
   video,
   theme,
@@ -456,6 +687,8 @@ function FileUploader({
   };
   const single = useMultipartUpload(bucket);
   const batch = useBatchUpload();
+  const [imageOpts, setImageOpts] = useState(image ?? { format: "webp", optimize: true });
+  const [videoOpts, setVideoOpts] = useState(video ?? DEFAULT_VIDEO_OPTS2);
   const [staged, setStaged] = useState(null);
   const [renames, setRenames] = useState(/* @__PURE__ */ new Map());
   const [editingIndex, setEditingIndex] = useState(null);
@@ -479,9 +712,11 @@ function FileUploader({
     setEditingIndex(null);
   }
   const doUpload = useCallback(async (files) => {
+    const effectiveImage = showImageOptions ? imageOpts : image ?? imageOpts;
+    const effectiveVideo = showVideoOptions ? videoOpts : video ?? videoOpts;
     if (multiple && files.length > 1) {
       try {
-        const opts = { ...bucket !== void 0 && { bucket }, visibility, ...image && { image }, ...video && { video } };
+        const opts = { ...bucket !== void 0 && { bucket }, visibility, image: effectiveImage, video: effectiveVideo };
         const results = await batch.upload(files, opts);
         onBatchUpload?.(results);
         results.forEach((r) => onUpload?.(r));
@@ -492,7 +727,7 @@ function FileUploader({
       const file = files[0];
       if (!file) return;
       try {
-        const opts = { ...bucket !== void 0 && { bucket }, visibility, ...image && { image }, ...video && { video } };
+        const opts = { ...bucket !== void 0 && { bucket }, visibility, image: effectiveImage, video: effectiveVideo };
         const result = await single.upload(file, opts);
         if (result) onUpload?.(result);
       } catch (err) {
@@ -611,6 +846,22 @@ function FileUploader({
           }
         )
       ] }, i)),
+      showImageOptions && staged.some((f) => f.type.startsWith("image/")) && /* @__PURE__ */ jsx(
+        ImageOptions,
+        {
+          value: imageOpts,
+          onChange: setImageOpts,
+          style: { padding: "12px 14px", borderRadius: 8, border: "1px solid var(--silo-border)", background: "var(--silo-bg-hover, #f8fafc)", marginTop: 4 }
+        }
+      ),
+      showVideoOptions && staged.some((f) => f.type.startsWith("video/")) && /* @__PURE__ */ jsx(
+        VideoOptions,
+        {
+          value: videoOpts,
+          onChange: setVideoOpts,
+          style: { padding: "12px 14px", borderRadius: 8, border: "1px solid var(--silo-border)", background: "var(--silo-bg-hover, #f8fafc)", marginTop: 4 }
+        }
+      ),
       /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "8px", marginTop: "4px" }, children: [
         /* @__PURE__ */ jsx(
           "button",