@gatewaze/admin-embed 0.1.0

package/dist/HostMediaTab-BsIBEQ1v.js

@@ -0,0 +1,440 @@
+import { c as e, i as t, t as n } from "./react-DB2tPNit.js";
+import { d as r } from "./shim-BCerG8nb.js";
+import { t as i } from "./jsx-runtime-CjozyJt-.js";
+import { D as a, E as o, O as s, a as c, l, n as u, u as d } from "./ui-DRIo9Krs.js";
+import { n as f } from "./sonnerHostBridge-CXuCMM3R.js";
+import { t as p } from "./outline-DwDYhYcF.js";
+//#region ../../../gatewaze-modules/modules/host-media/admin/utils/hostMediaService.ts
+var m = /* @__PURE__ */ e(n()), h = p();
+async function g(e, t) {
+	let n = globalThis.__GATEWAZE_CONFIG__.VITE_API_URL ?? "", { data: i } = await r.auth.getSession(), a = i.session?.access_token, o = new Headers(t?.headers);
+	return a && o.set("Authorization", `Bearer ${a}`), fetch(`${n}${e}`, {
+		...t,
+		headers: o
+	});
+}
+async function _(e, t, n = {}) {
+	let r = new URLSearchParams();
+	n.filter && n.filter !== "all" && r.set("filter", n.filter), n.album_id && r.set("album_id", n.album_id), n.search && r.set("search", n.search), n.limit && r.set("limit", String(n.limit));
+	let i = r.toString();
+	return g(`/api/admin/${e}/${t}/media${i ? `?${i}` : ""}`);
+}
+async function v(e, t, n, r = {}) {
+	let i = new FormData();
+	return Array.from(n).forEach((e) => i.append("files", e)), r.album_id && i.append("album_id", r.album_id), r.caption && i.append("caption", r.caption), g(`/api/admin/${e}/${t}/media`, {
+		method: "POST",
+		body: i
+	});
+}
+async function y(e, t, n) {
+	return g(`/api/admin/${e}/${t}/media/${n}`, { method: "DELETE" });
+}
+async function b(e, t, n, r) {
+	return g(`/api/admin/${e}/${t}/media/${n}`, {
+		method: "PATCH",
+		headers: { "Content-Type": "application/json" },
+		body: JSON.stringify(r)
+	});
+}
+async function x(e, t) {
+	return g(`/api/admin/${e}/${t}/albums`);
+}
+async function S(e, t, n) {
+	return g(`/api/admin/${e}/${t}/albums`, {
+		method: "POST",
+		headers: { "Content-Type": "application/json" },
+		body: JSON.stringify(n)
+	});
+}
+async function C(e, t, n) {
+	return g(`/api/admin/${e}/${t}/albums/${n}`, { method: "DELETE" });
+}
+async function w(e, t, n, r) {
+	return g(`/api/admin/${e}/${t}/albums/${n}/items`, {
+		method: "POST",
+		headers: { "Content-Type": "application/json" },
+		body: JSON.stringify({ media_id: r })
+	});
+}
+async function T(e, t, n, r) {
+	return g(`/api/admin/${e}/${t}/albums/${n}/items/${r}`, { method: "DELETE" });
+}
+//#endregion
+//#region ../../../gatewaze-modules/modules/host-media/admin/components/HostMediaTab.tsx
+var E = /* @__PURE__ */ t({
+	HostMediaTab: () => O,
+	default: () => O
+}), D = i();
+function O({ hostId: e, consumer: t }) {
+	let { hostKind: n } = t, [r, i] = (0, m.useState)([]), [p, g] = (0, m.useState)([]), [b, w] = (0, m.useState)(!0), [T, E] = (0, m.useState)(""), [O, A] = (0, m.useState)("all"), [j, M] = (0, m.useState)(null), [N, P] = (0, m.useState)(!1), [F, I] = (0, m.useState)(null), [L, R] = (0, m.useState)(!1), [z, B] = (0, m.useState)(""), V = (0, m.useRef)(null), H = (0, m.useMemo)(() => {
+		let e = [
+			"image/*",
+			"video/*",
+			"audio/*"
+		];
+		return t.enableZipUnpack && e.push("application/zip"), e.join(",");
+	}, [t.enableZipUnpack]), U = async () => {
+		w(!0);
+		try {
+			let t = await _(n, e, {
+				filter: O,
+				album_id: j ?? void 0,
+				search: T || void 0
+			});
+			if (t.ok) {
+				let e = await t.json();
+				i(e.items ?? []);
+			} else i([]);
+		} catch {
+			i([]);
+		}
+		w(!1);
+	}, W = async () => {
+		if (t.enableAlbums) try {
+			let t = await x(n, e);
+			if (t.ok) {
+				let e = await t.json();
+				g(e.albums ?? []);
+			}
+		} catch {
+			g([]);
+		}
+	};
+	(0, m.useEffect)(() => {
+		U();
+	}, [
+		n,
+		e,
+		O,
+		j
+	]), (0, m.useEffect)(() => {
+		W();
+	}, [
+		n,
+		e,
+		t.enableAlbums
+	]);
+	let G = async (t) => {
+		if (!(!t || t.length === 0)) {
+			P(!0);
+			try {
+				let r = await v(n, e, t, { album_id: j ?? void 0 }), i = await r.json();
+				if (r.status === 207) {
+					let e = i.items.filter((e) => e.status === "created").length, t = i.items.length - e;
+					f.warning(`Uploaded ${e} file${e === 1 ? "" : "s"}, ${t} failed`);
+				} else r.ok ? f.success(`Uploaded ${i.items.length} file${i.items.length === 1 ? "" : "s"}`) : f.error(i.message ?? "Upload failed");
+				U();
+			} catch (e) {
+				f.error(e instanceof Error ? e.message : "Upload failed");
+			}
+			P(!1);
+		}
+	}, K = async (t) => {
+		if (t.used_in.length > 0) {
+			f.error(`Cannot delete: used in ${t.used_in.length} place${t.used_in.length === 1 ? "" : "s"}`);
+			return;
+		}
+		if (window.confirm(`Delete ${t.filename}?`)) try {
+			let r = await y(n, e, t.id);
+			if (r.status === 204) f.success("Deleted"), I(null), U();
+			else {
+				let e = await r.json();
+				f.error(e.message ?? "Delete failed");
+			}
+		} catch (e) {
+			f.error(e instanceof Error ? e.message : "Delete failed");
+		}
+	}, q = async () => {
+		if (z.trim().length !== 0) try {
+			let t = await S(n, e, { name: z.trim() });
+			if (t.ok) f.success("Album created"), B(""), R(!1), W();
+			else {
+				let e = await t.json();
+				f.error(e.message ?? "Create failed");
+			}
+		} catch (e) {
+			f.error(e instanceof Error ? e.message : "Create failed");
+		}
+	}, J = async (t) => {
+		if (window.confirm(`Delete album "${t.name}"? Media will be moved to "All".`)) try {
+			let r = await C(n, e, t.id);
+			if (r.status === 204) f.success("Album deleted"), j === t.id && M(null), W(), U();
+			else {
+				let e = await r.json();
+				f.error(e.message ?? "Delete failed");
+			}
+		} catch (e) {
+			f.error(e instanceof Error ? e.message : "Delete failed");
+		}
+	}, Y = r.filter((e) => !T || e.filename.toLowerCase().includes(T.toLowerCase()));
+	return /* @__PURE__ */ (0, D.jsxs)("div", {
+		className: "space-y-4",
+		children: [
+			t.enableAlbums && p.length > 0 && /* @__PURE__ */ (0, D.jsx)(o, { children: /* @__PURE__ */ (0, D.jsxs)("div", {
+				className: "p-3 flex flex-wrap gap-2 items-center",
+				children: [
+					/* @__PURE__ */ (0, D.jsx)("span", {
+						className: "text-sm text-[var(--gray-a8)] mr-2",
+						children: "Albums:"
+					}),
+					/* @__PURE__ */ (0, D.jsx)("button", {
+						type: "button",
+						onClick: () => M(null),
+						className: `text-xs px-2 py-1 rounded ${j === null ? "bg-[var(--accent-9)] text-white" : "bg-[var(--gray-a3)]"}`,
+						children: "All"
+					}),
+					p.map((e) => /* @__PURE__ */ (0, D.jsx)("button", {
+						type: "button",
+						onClick: () => M(e.id),
+						onDoubleClick: () => J(e),
+						title: "Double-click to delete",
+						className: `text-xs px-2 py-1 rounded ${j === e.id ? "bg-[var(--accent-9)] text-white" : "bg-[var(--gray-a3)]"}`,
+						children: e.name
+					}, e.id)),
+					/* @__PURE__ */ (0, D.jsxs)(a, {
+						size: "1",
+						variant: "outlined",
+						onClick: () => R(!0),
+						children: [/* @__PURE__ */ (0, D.jsx)(h.FolderIcon, { className: "size-4" }), " + Album"]
+					})
+				]
+			}) }),
+			/* @__PURE__ */ (0, D.jsx)(o, { children: /* @__PURE__ */ (0, D.jsxs)("div", {
+				className: "p-4 flex items-center gap-3 flex-wrap",
+				children: [
+					/* @__PURE__ */ (0, D.jsxs)("div", {
+						className: "relative flex-1 min-w-[200px] max-w-sm",
+						children: [/* @__PURE__ */ (0, D.jsx)(h.MagnifyingGlassIcon, { className: "absolute left-3 top-1/2 -translate-y-1/2 size-4 text-[var(--gray-a8)] pointer-events-none" }), /* @__PURE__ */ (0, D.jsx)(d, {
+							placeholder: "Search media…",
+							value: T,
+							onChange: (e) => E(e.target.value),
+							className: "pl-9"
+						})]
+					}),
+					/* @__PURE__ */ (0, D.jsx)(l, {
+						value: O,
+						onChange: (e) => A(e.target.value),
+						data: [
+							{
+								value: "all",
+								label: "All"
+							},
+							{
+								value: "photo",
+								label: "Photos"
+							},
+							{
+								value: "video",
+								label: "Videos"
+							},
+							{
+								value: "audio",
+								label: "Audio"
+							}
+						]
+					}),
+					/* @__PURE__ */ (0, D.jsx)("input", {
+						ref: V,
+						type: "file",
+						multiple: !0,
+						accept: H,
+						className: "hidden",
+						onChange: (e) => G(e.target.files)
+					}),
+					/* @__PURE__ */ (0, D.jsxs)(a, {
+						onClick: () => V.current?.click(),
+						disabled: N,
+						children: [/* @__PURE__ */ (0, D.jsx)(h.ArrowUpTrayIcon, { className: "size-4" }), N ? "Uploading…" : "+ Upload"]
+					})
+				]
+			}) }),
+			b ? /* @__PURE__ */ (0, D.jsx)(o, { children: /* @__PURE__ */ (0, D.jsx)("div", {
+				className: "p-8 flex justify-center",
+				children: /* @__PURE__ */ (0, D.jsx)(u, {})
+			}) }) : Y.length === 0 ? /* @__PURE__ */ (0, D.jsx)(o, { children: /* @__PURE__ */ (0, D.jsxs)("div", {
+				className: "p-8 text-center",
+				children: [
+					/* @__PURE__ */ (0, D.jsx)(h.PhotoIcon, { className: "mx-auto size-12 text-[var(--gray-a6)]" }),
+					/* @__PURE__ */ (0, D.jsx)("h3", {
+						className: "mt-2 text-sm font-medium",
+						children: "No media yet"
+					}),
+					/* @__PURE__ */ (0, D.jsxs)("p", {
+						className: "mt-1 text-sm text-[var(--gray-a8)]",
+						children: [
+							"Upload images",
+							t.enableYouTube ? ", videos (uploaded to YouTube)" : " and videos",
+							t.enableZipUnpack ? ", or a zip of media" : "",
+							" for this ",
+							n,
+							"."
+						]
+					})
+				]
+			}) }) : /* @__PURE__ */ (0, D.jsx)("div", {
+				className: "grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-3",
+				children: Y.map((e) => /* @__PURE__ */ (0, D.jsxs)("button", {
+					type: "button",
+					onClick: () => I(e),
+					className: "group relative aspect-square rounded-md overflow-hidden border border-[var(--gray-a4)] hover:border-[var(--accent-9)] transition-colors text-left bg-[var(--gray-a2)]",
+					children: [e.mime_type.startsWith("image/") ? /* @__PURE__ */ (0, D.jsx)("img", {
+						src: e.cdn_url,
+						alt: e.filename,
+						className: "w-full h-full object-cover",
+						loading: "lazy"
+					}) : e.mime_type.startsWith("video/") ? e.youtube_thumbnail_url ? /* @__PURE__ */ (0, D.jsx)("img", {
+						src: e.youtube_thumbnail_url,
+						alt: e.filename,
+						className: "w-full h-full object-cover",
+						loading: "lazy"
+					}) : /* @__PURE__ */ (0, D.jsx)("div", {
+						className: "w-full h-full flex items-center justify-center",
+						children: /* @__PURE__ */ (0, D.jsx)(h.VideoCameraIcon, { className: "size-12 text-[var(--gray-a6)]" })
+					}) : /* @__PURE__ */ (0, D.jsx)("div", {
+						className: "w-full h-full flex items-center justify-center",
+						children: /* @__PURE__ */ (0, D.jsx)(h.PhotoIcon, { className: "size-12 text-[var(--gray-a6)]" })
+					}), /* @__PURE__ */ (0, D.jsxs)("div", {
+						className: "absolute inset-x-0 bottom-0 p-2 bg-gradient-to-t from-black/70 to-transparent",
+						children: [/* @__PURE__ */ (0, D.jsx)("p", {
+							className: "text-xs text-white font-medium truncate",
+							children: e.filename
+						}), /* @__PURE__ */ (0, D.jsxs)("div", {
+							className: "flex items-center gap-1 text-[10px] text-white/80",
+							children: [
+								/* @__PURE__ */ (0, D.jsx)("span", { children: k(e.bytes) }),
+								e.used_in.length > 0 && /* @__PURE__ */ (0, D.jsxs)("span", { children: ["• used in ", e.used_in.length] }),
+								e.in_repo && /* @__PURE__ */ (0, D.jsx)(s, {
+									variant: "soft",
+									color: "blue",
+									size: "1",
+									children: "repo"
+								}),
+								e.youtube_upload_status && e.youtube_upload_status !== "completed" && /* @__PURE__ */ (0, D.jsxs)(s, {
+									variant: "soft",
+									color: "orange",
+									size: "1",
+									children: ["YT: ", e.youtube_upload_status]
+								})
+							]
+						})]
+					})]
+				}, e.id))
+			}),
+			/* @__PURE__ */ (0, D.jsx)(c, {
+				isOpen: !!F,
+				onClose: () => I(null),
+				title: F?.filename ?? "",
+				footer: /* @__PURE__ */ (0, D.jsxs)("div", {
+					className: "flex justify-end gap-2",
+					children: [/* @__PURE__ */ (0, D.jsxs)(a, {
+						variant: "outlined",
+						onClick: () => {
+							F && (navigator.clipboard.writeText(F.cdn_url), f.success("CDN URL copied"));
+						},
+						children: [/* @__PURE__ */ (0, D.jsx)(h.ClipboardIcon, { className: "size-4" }), " Copy CDN URL"]
+					}), /* @__PURE__ */ (0, D.jsxs)(a, {
+						color: "error",
+						variant: "outlined",
+						onClick: () => F && K(F),
+						disabled: !F || F.used_in.length > 0,
+						children: [/* @__PURE__ */ (0, D.jsx)(h.TrashIcon, { className: "size-4" }), " Delete"]
+					})]
+				}),
+				children: F && /* @__PURE__ */ (0, D.jsxs)("div", {
+					className: "space-y-4",
+					children: [
+						F.mime_type.startsWith("image/") && /* @__PURE__ */ (0, D.jsx)("img", {
+							src: F.cdn_url,
+							alt: F.filename,
+							className: "max-w-full rounded-md"
+						}),
+						F.youtube_embed_url && /* @__PURE__ */ (0, D.jsx)("iframe", {
+							title: F.filename,
+							className: "w-full aspect-video rounded-md",
+							src: F.youtube_embed_url,
+							allow: "autoplay; encrypted-media; picture-in-picture",
+							allowFullScreen: !0
+						}),
+						/* @__PURE__ */ (0, D.jsxs)("dl", {
+							className: "grid grid-cols-2 gap-x-4 gap-y-2 text-sm",
+							children: [
+								/* @__PURE__ */ (0, D.jsx)("dt", {
+									className: "text-[var(--gray-a8)]",
+									children: "Type"
+								}),
+								/* @__PURE__ */ (0, D.jsx)("dd", { children: F.mime_type }),
+								/* @__PURE__ */ (0, D.jsx)("dt", {
+									className: "text-[var(--gray-a8)]",
+									children: "Size"
+								}),
+								/* @__PURE__ */ (0, D.jsx)("dd", { children: k(F.bytes) }),
+								F.width !== null && F.height !== null && /* @__PURE__ */ (0, D.jsxs)(D.Fragment, { children: [/* @__PURE__ */ (0, D.jsx)("dt", {
+									className: "text-[var(--gray-a8)]",
+									children: "Dimensions"
+								}), /* @__PURE__ */ (0, D.jsxs)("dd", { children: [
+									F.width,
+									" × ",
+									F.height
+								] })] }),
+								F.duration !== null && /* @__PURE__ */ (0, D.jsxs)(D.Fragment, { children: [/* @__PURE__ */ (0, D.jsx)("dt", {
+									className: "text-[var(--gray-a8)]",
+									children: "Duration"
+								}), /* @__PURE__ */ (0, D.jsxs)("dd", { children: [Math.round(F.duration), " s"] })] }),
+								/* @__PURE__ */ (0, D.jsx)("dt", {
+									className: "text-[var(--gray-a8)]",
+									children: "Storage"
+								}),
+								/* @__PURE__ */ (0, D.jsx)("dd", { children: F.in_repo ? "In repo" : "CDN only" }),
+								F.youtube_upload_status && /* @__PURE__ */ (0, D.jsxs)(D.Fragment, { children: [/* @__PURE__ */ (0, D.jsx)("dt", {
+									className: "text-[var(--gray-a8)]",
+									children: "YouTube"
+								}), /* @__PURE__ */ (0, D.jsxs)("dd", { children: [F.youtube_upload_status, F.youtube_url ? ` — ${F.youtube_url}` : ""] })] })
+							]
+						}),
+						F.used_in.length > 0 && /* @__PURE__ */ (0, D.jsxs)("div", { children: [/* @__PURE__ */ (0, D.jsx)("p", {
+							className: "text-sm font-medium mb-2",
+							children: "Used in:"
+						}), /* @__PURE__ */ (0, D.jsx)("ul", {
+							className: "text-sm space-y-1",
+							children: F.used_in.map((e) => /* @__PURE__ */ (0, D.jsxs)("li", {
+								className: "text-[var(--gray-a8)]",
+								children: [
+									e.type,
+									": ",
+									e.name
+								]
+							}, `${e.type}:${e.id}`))
+						})] })
+					]
+				})
+			}),
+			t.enableAlbums && /* @__PURE__ */ (0, D.jsx)(c, {
+				isOpen: L,
+				onClose: () => R(!1),
+				title: "New album",
+				footer: /* @__PURE__ */ (0, D.jsxs)("div", {
+					className: "flex justify-end gap-2",
+					children: [/* @__PURE__ */ (0, D.jsx)(a, {
+						variant: "outlined",
+						onClick: () => R(!1),
+						children: "Cancel"
+					}), /* @__PURE__ */ (0, D.jsx)(a, {
+						onClick: q,
+						children: "Create"
+					})]
+				}),
+				children: /* @__PURE__ */ (0, D.jsx)(d, {
+					placeholder: "Album name",
+					value: z,
+					onChange: (e) => B(e.target.value),
+					autoFocus: !0
+				})
+			})
+		]
+	});
+}
+function k(e) {
+	return e < 1024 ? `${e} B` : e < 1048576 ? `${(e / 1024).toFixed(1)} KB` : e < 1073741824 ? `${(e / 1024 / 1024).toFixed(1)} MB` : `${(e / 1024 / 1024 / 1024).toFixed(1)} GB`;
+}
+//#endregion
+export { C as a, _ as c, v as d, S as i, b as l, E as n, y as o, w as r, x as s, O as t, T as u };