geoiq-frontend-ui-kit
Version:
This project is a UI kit for GeoIQ's frontend. It's built with React, TypeScript, and Vite.
113 lines (112 loc) • 4.22 kB
JavaScript
import { Video as v, X as w } from "lucide-react";
import e, { useState as k, useRef as A } from "react";
import { Typography as o } from "./index.es17.js";
import { Spinner as $ } from "./index.es56.js";
import { useFormValues as x } from "./index.es146.js";
import { useToast as L } from "./index.es73.js";
const z = ({
id: u,
onChange: c,
value: t = [],
accept: f = "video/*",
error: d,
maxVideos: l = 5
}) => {
const { onAssetUpload: m } = x(), { toast: i } = L(), [a, g] = k(!1), s = A(null), h = async (n) => {
const r = n.target.files;
if (!(!r?.length || a)) {
if (t.length + r.length > l) {
i({
title: "Alert!",
description: `Maximum ${l} videos allowed.`,
icon: "warning"
});
return;
}
if (m) {
g(!0);
try {
const p = Array.from(r).map((N) => m(N)), E = await Promise.all(p);
c([...t, ...E]), i({
title: "Alert!",
description: `${r.length} ${r.length === 1 ? "video" : "videos"} uploaded successfully.`,
icon: "success"
});
} catch {
i({
title: "Alert!",
description: "Error uploading videos",
icon: "warning"
});
} finally {
g(!1), s.current && (s.current.value = "");
}
}
}
}, y = () => {
!a && t.length < l ? s.current?.click() : t.length >= l && i({
title: "Alert!",
description: `Maximum ${l} videos allowed.`,
icon: "warning"
});
}, b = (n) => {
if (!a) {
const r = [...t];
r.splice(n, 1), c(r);
}
};
return /* @__PURE__ */ e.createElement("div", { className: "relative" }, a && /* @__PURE__ */ e.createElement("div", { className: "absolute inset-0 z-10 flex items-center justify-center bg-white bg-opacity-70" }, /* @__PURE__ */ e.createElement($, { className: "w-12 h-12 animate-spin text-primary-1" })), /* @__PURE__ */ e.createElement("div", { className: "relative p-8 border-2 border-dashed rounded-lg border-primary-1 bg-primary-1" }, /* @__PURE__ */ e.createElement(
"button",
{
className: "w-full",
onClick: y,
type: "button",
disabled: a || t.length >= l
},
/* @__PURE__ */ e.createElement("div", { className: "flex flex-col items-center gap-3 text-center" }, /* @__PURE__ */ e.createElement("div", { className: "bg-gray-100 rounded-full" }, /* @__PURE__ */ e.createElement(v, { className: "w-6 h-6 text-gray-500" })), /* @__PURE__ */ e.createElement(o, { variant: "body1", className: "text-gray-600" }, a ? "Uploading..." : t.length >= l ? `Maximum ${l} videos reached` : "Add Videos"), t.length > 0 && /* @__PURE__ */ e.createElement(o, { variant: "body1", className: "text-gray-500" }, t.length, " of ", l, " videos"))
), /* @__PURE__ */ e.createElement(
"input",
{
ref: s,
id: `${u}-gallery`,
type: "file",
accept: f,
disabled: a || t.length >= l,
onChange: h,
className: "hidden",
multiple: !0
}
), d && /* @__PURE__ */ e.createElement(o, { variant: "body1", className: "mt-1 text-danger-1" }, d)), t.length > 0 && /* @__PURE__ */ e.createElement("div", { className: "grid grid-cols-2 gap-4 mt-4 sm:grid-cols-2 md:grid-cols-2" }, t.map((n, r) => /* @__PURE__ */ e.createElement("div", { key: r, className: "relative flex rounded" }, /* @__PURE__ */ e.createElement(
"video",
{
src: n.public_url,
className: "object-cover w-full h-32 rounded",
controls: !0,
controlsList: "nodownload",
preload: "metadata"
},
/* @__PURE__ */ e.createElement(
"track",
{
kind: "captions",
label: "English captions",
srcLang: "en",
src: "",
default: !0
}
)
), /* @__PURE__ */ e.createElement(
"button",
{
onClick: () => b(r),
className: "absolute p-1 text-white bg-white rounded-full right-2 top-2 opacity-70 hover:opacity-100",
type: "button",
disabled: a
},
/* @__PURE__ */ e.createElement(w, { size: 16, className: "stroke-danger" })
)))));
};
export {
z as MultiVideoPicker
};
//# sourceMappingURL=index.es154.js.map