@duxweb/dvha-pro 1.1.29 → 1.1.31

package/dist/esm/components/upload/video.js

@@ -1,340 +1,225 @@
-import { defineComponent as S, computed as y, ref as U, watch as F, createVNode as o, onMounted as D, onUnmounted as L } from "vue";
-import { useI18n as R, useUpload as E } from "@duxweb/dvha-core";
-import { useVModel as I } from "@vueuse/core";
-import M from "clsx";
-import { useMessage as B, NButton as z, NProgress as T } from "naive-ui";
-import { VueDraggable as O } from "vue-draggable-plus";
-import "vue-router";
-import { useDialog as q } from "../../hooks/dialog.js";
-import "@overlastic/vue";
-import "vue-echarts";
-import "vue3-ace-editor";
-import "ace-builds/src-noconflict/mode-vue";
-import "ace-builds/src-noconflict/mode-javascript";
-import "ace-builds/src-noconflict/mode-html";
-import "ace-builds/src-noconflict/mode-json";
-import "ace-builds/src-noconflict/mode-json5";
-import "ace-builds/src-noconflict/theme-tomorrow_night";
-import "ace-builds/src-noconflict/theme-tomorrow";
-import "ace-builds/src-noconflict/ext-searchbox";
-import "ace-builds/src-noconflict/ext-language_tools";
-import "ace-builds/src-noconflict/mode-snippets";
-import "vue-cropper";
-import "jinrishici";
-import "lodash-es";
-import "@vee-validate/i18n";
-import "colorizr";
-import "echarts";
-import "highlight.js/lib/core";
-import "highlight.js/lib/languages/bash";
-import "highlight.js/lib/languages/css";
-import "highlight.js/lib/languages/go";
-import "highlight.js/lib/languages/java";
-import "highlight.js/lib/languages/javascript";
-import "highlight.js/lib/languages/json";
-import "highlight.js/lib/languages/markdown";
-import "highlight.js/lib/languages/php";
-import "highlight.js/lib/languages/python";
-import "highlight.js/lib/languages/shell";
-import "highlight.js/lib/languages/sql";
-import "highlight.js/lib/languages/typescript";
-import "highlight.js/lib/languages/xml";
-import "@ant-design/colors";
-import "@unocss/preset-icons/browser";
-import "@unocss/preset-typography";
-import "unocss/preset-wind4";
-import "@vee-validate/i18n/dist/locale/en.json";
-import "@vee-validate/i18n/dist/locale/zh_CN.json";
-import "vee-validate";
-import "vue-command-palette";
-import "@duxweb/dvha-naiveui";
-import "../../pages/page404.js";
-import "short-unique-id";
-import "aieditor";
-import { useUploadConfig as H } from "./config.js";
-import "@vue-flow/core";
-import "lodash-es/cloneDeep";
-import "@vue-flow/background";
-/* empty css                      */
-import { useModal as W } from "../../hooks/modal.js";
-import "mime";
-import "@iconify-json/tabler/icons.json";
-import "../posterEditor/elements/index.js";
-import "fabric";
-import "../schemaEditor/schemaEditor.js";
-import "dayjs";
-import "@tanstack/vue-query";
-import "pinia";
-const $ = /* @__PURE__ */ S({
-  name: "DuxVideoThumb",
-  props: {
-    src: String
-  },
-  setup(t) {
-    const h = U(), m = U();
-    let u;
-    const w = async () => {
-      if (!t.src || m.value) return;
-      const a = document.createElement("video");
-      a.muted = !0, a.playsInline = !0, a.preload = "metadata", a.crossOrigin = "anonymous", a.src = t.src;
-      const d = (l) => new Promise((v, c) => {
-        function s() {
-          b(), v();
-        }
-        function p() {
-          b(), c(new Error("video load failed"));
-        }
-        function b() {
-          a.removeEventListener(l, s), a.removeEventListener("error", p);
-        }
-        a.addEventListener(l, s, {
-          once: !0
-        }), a.addEventListener("error", p, {
-          once: !0
-        });
-      });
-      try {
-        await d("loadedmetadata");
-        const l = Number.isFinite(a.duration) && a.duration > 1 ? 0.1 : 0;
-        try {
-          a.currentTime = l;
-        } catch {
-          a.currentTime = 0;
-        }
-        await d("seeked");
-        const v = a.videoWidth || 160, c = a.videoHeight || 90, s = document.createElement("canvas");
-        s.width = v, s.height = c;
-        const p = s.getContext("2d");
-        if (!p) return;
-        p.drawImage(a, 0, 0, v, c), m.value = s.toDataURL("image/jpeg", 0.75);
-      } catch {
-      } finally {
-        a.removeAttribute("src"), a.load();
-      }
-    };
-    return D(() => {
-      h.value && (u = new IntersectionObserver((a) => {
-        a[0]?.isIntersecting && w().finally(() => {
-          u?.disconnect(), u = void 0;
-        });
-      }, {
-        rootMargin: "200px"
-      }), u.observe(h.value));
-    }), L(() => {
-      u?.disconnect(), u = void 0;
-    }), () => o("div", {
-      ref: h,
-      class: "size-12 flex items-center justify-center"
-    }, [m.value ? o("img", {
-      src: m.value,
-      class: "size-12 rounded object-cover"
-    }, null) : o("div", {
-      class: "i-tabler:video size-6 text-muted"
-    }, null)]);
-  }
-}), it = /* @__PURE__ */ S({
-  name: "DuxVideoUpload",
-  props: {
-    path: {
-      type: String,
-      default: "upload"
-    },
-    signPath: {
-      type: String,
-      default: ""
-    },
-    signCallback: Function,
-    managePath: {
-      type: String,
-      default: ""
-    },
-    driver: {
-      type: String
-    },
-    maxNum: Number,
-    maxSize: {
-      type: Number,
-      default: 0
-    },
-    multiple: Boolean,
-    manager: Boolean,
-    value: [String, Array],
-    defaultValue: [String, Array],
-    onUpdateValue: Function,
-    method: String
-  },
-  setup(t, {
-    emit: h
-  }) {
-    const m = I(t, "value", h, {
-      passive: !0,
-      deep: !0,
-      defaultValue: t.defaultValue
-    }), u = B(), w = q(), a = W(), {
-      t: d
-    } = R(), l = {
-      container: "flex gap-2",
-      item: "size-80px rounded border border-muted relative group draggable flex items-center justify-center bg-default",
-      overlay: "z-1 size-full inset-0 absolute flex items-center justify-center bg-default/80 transition-all opacity-0 group-hover:opacity-100 rounded gap-1",
-      uploadArea: "relative size-80px text-sm rounded flex flex-col border border-dashed bg-elevated border-muted dark:border-accented hover:bg-accented/50 hover:border-accented dark:hover:bg-accented/50 dark:hover:border-accented cursor-pointer",
-      uploadContent: "flex-1 flex flex-col justify-center items-center gap-1 relative",
-      progressContainer: "size-80px flex items-center justify-center rounded",
-      progressBar: "absolute left-2 right-2 bottom-2"
-    }, v = y(() => t.maxSize), {
-      uploadPath: c,
-      managePath: s,
-      driver: p,
-      method: b
-    } = H({
-      driver: t?.driver,
-      signPath: t?.signPath,
-      signCallback: t?.signCallback,
-      uploadPath: t?.path,
-      managePath: t?.managePath,
-      method: t?.method
-    }), i = E({
-      path: c.value,
-      multiple: t.multiple,
-      maxFileCount: t.maxNum,
-      maxFileSize: v.value * 1024 * 1024,
-      autoUpload: !0,
-      accept: "video/*",
-      params: t.manager ? {
-        manager: "true"
-      } : void 0,
-      method: b.value,
-      onError: (e) => {
-        u.error(e.message || d("components.upload.error"));
-      },
-      driver: p.value
-    }), x = U(/* @__PURE__ */ new Map()), C = (e) => {
-      if (e.url) return e.url;
-      const n = x.value.get(e.id);
-      if (n) return n;
-      const r = URL.createObjectURL(e.file);
-      return x.value.set(e.id, r), r;
-    };
-    F(i.uploadFiles, (e) => {
-      const n = new Set((e || []).map((r) => r.id));
-      for (const [r, f] of x.value.entries())
-        n.has(r) || (URL.revokeObjectURL(f), x.value.delete(r));
-    }, {
-      deep: !0
-    }), F(i.uploadFiles, (e) => {
-      const n = (e || []).filter((r) => r?.status === "error");
-      n.length && i.removeFiles(n.map((r) => r.id));
-    }, {
-      deep: !0
-    }), F(i.dataFiles, (e) => {
-      const n = t.multiple ? e?.map((r) => r.url) : e?.[0]?.url;
-      m.value = n, t.onUpdateValue?.(n);
-    });
-    const P = y(() => i.progress.value.totalPercent), V = y(() => i.isUploading.value || i.uploadFiles.value.some((e) => e?.status === "uploading")), k = async () => {
-      i.open();
-    }, j = y(() => t.multiple ? t.maxNum && i.uploadFiles.value.length >= t.maxNum : !0), N = (e) => {
-      e && w.node({
-        title: d("components.button.preview"),
-        render: () => o("div", {
-          class: "flex items-center justify-center"
-        }, [o("video", {
-          class: "w-120 max-w-full",
-          controls: !0
-        }, [o("source", {
-          src: e
-        }, null)])])
-      });
-    }, A = (e) => (e || []).filter((r) => {
-      const f = String(r?.filetype || ""), g = String(r?.url || "");
-      return /^video\//i.test(f) || /\.(?:mp4|webm|ogg|mov|m4v)$/i.test(g);
-    });
-    return F(m, (e) => {
-      if (!e || !(Array.isArray(e) ? e.length : String(e).length)) return;
-      const n = typeof e == "string" ? [e] : Array.isArray(e) ? e : [], r = (i.dataFiles.value || []).map((g) => g.url).filter(Boolean), f = n.filter((g) => !r.includes(g));
-      f.length && i.addDataFiles(f.map((g) => ({
-        url: g
-      })));
-    }), () => o("div", null, [o(O, {
-      modelValue: i.uploadFiles.value,
-      "onUpdate:modelValue": (e) => i.uploadFiles.value = e,
-      class: l.container,
-      draggable: ".draggable"
-    }, {
-      default: () => [i.uploadFiles.value?.map((e, n) => {
-        const r = C(e);
-        return o("div", {
-          key: n,
-          class: M(l.item)
-        }, [o($, {
-          src: r
-        }, null), o("div", {
-          class: l.overlay
-        }, [e.status === "success" && o(z, {
-          quaternary: !0,
-          circle: !0,
-          size: "small",
-          renderIcon: () => o("div", {
-            class: "n-icon i-tabler:eye"
-          }, null),
-          onClick: () => N(r)
-        }, null), o(z, {
-          quaternary: !0,
-          circle: !0,
-          size: "small",
-          renderIcon: () => o("div", {
-            class: "n-icon i-tabler:trash"
-          }, null),
-          onClick: () => {
-            i.removeFiles([e.id]);
-          }
-        }, null)])]);
-      }), (i.uploadFiles.value.length === 0 || !j.value) && o("div", {
-        class: l.uploadArea,
-        onClick: () => {
-          k();
-        }
-      }, [t.manager && o("div", {
-        class: " py-1 text-xs bg-muted border-b border-dashed border-accented flex items-center justify-center",
-        onClick: (e) => {
-          e.stopPropagation(), a.show({
-            title: d("components.upload.title"),
-            width: "800px",
-            component: () => import("./manager.js"),
-            componentProps: {
-              path: s.value,
-              type: "media",
-              multiple: t.multiple,
-              uploadParams: {
-                path: c.value,
-                accept: "video/*",
-                maxNum: t.maxNum,
-                maxSize: t.maxSize,
-                method: b.value
-              }
-            }
-          }).then((n) => {
-            const r = A(n);
-            i.addDataFiles(r);
-          });
-        }
-      }, [o("div", {
-        class: "i-tabler:folder size-4"
-      }, null)]), o("div", {
-        class: l.uploadContent
-      }, [V.value ? o("div", {
-        class: l.progressContainer
-      }, [o("div", {
-        class: l.progressBar
-      }, [o(T, {
-        type: "line",
-        percentage: P.value,
-        showIndicator: !1,
-        height: 4
-      }, null)])]) : o("div", {
-        class: "i-tabler:plus size-4"
-      }, null)])])]
-    })]);
-  }
+import { useDialog as e } from "../../hooks/dialog.js";
+import { useModal as t } from "../../hooks/modal.js";
+import "../../hooks/index.js";
+import { useUploadConfig as n } from "./config.js";
+import { computed as r, createVNode as i, defineComponent as a, onMounted as o, onUnmounted as s, ref as c, watch as l } from "vue";
+import { useI18n as u, useUpload as d } from "@duxweb/dvha-core";
+import { NButton as f, NProgress as p, useMessage as m } from "naive-ui";
+import { useVModel as h } from "@vueuse/core";
+import g from "clsx";
+import { VueDraggable as _ } from "vue-draggable-plus";
+var v = /* @__PURE__ */ a({
+	name: "DuxVideoThumb",
+	props: { src: String },
+	setup(e) {
+		let t = c(), n = c(), r, a = async () => {
+			if (!e.src || n.value) return;
+			let t = document.createElement("video");
+			t.muted = !0, t.playsInline = !0, t.preload = "metadata", t.crossOrigin = "anonymous", t.src = e.src;
+			let r = (e) => new Promise((n, r) => {
+				function i() {
+					o(), n();
+				}
+				function a() {
+					o(), r(/* @__PURE__ */ Error("video load failed"));
+				}
+				function o() {
+					t.removeEventListener(e, i), t.removeEventListener("error", a);
+				}
+				t.addEventListener(e, i, { once: !0 }), t.addEventListener("error", a, { once: !0 });
+			});
+			try {
+				await r("loadedmetadata");
+				let e = Number.isFinite(t.duration) && t.duration > 1 ? .1 : 0;
+				try {
+					t.currentTime = e;
+				} catch {
+					t.currentTime = 0;
+				}
+				await r("seeked");
+				let i = t.videoWidth || 160, a = t.videoHeight || 90, o = document.createElement("canvas");
+				o.width = i, o.height = a;
+				let s = o.getContext("2d");
+				if (!s) return;
+				s.drawImage(t, 0, 0, i, a), n.value = o.toDataURL("image/jpeg", .75);
+			} catch {} finally {
+				t.removeAttribute("src"), t.load();
+			}
+		};
+		return o(() => {
+			t.value && (r = new IntersectionObserver((e) => {
+				e[0]?.isIntersecting && a().finally(() => {
+					r?.disconnect(), r = void 0;
+				});
+			}, { rootMargin: "200px" }), r.observe(t.value));
+		}), s(() => {
+			r?.disconnect(), r = void 0;
+		}), () => i("div", {
+			ref: t,
+			class: "size-12 flex items-center justify-center"
+		}, [n.value ? i("img", {
+			src: n.value,
+			class: "size-12 rounded object-cover"
+		}, null) : i("div", { class: "i-tabler:video size-6 text-muted" }, null)]);
+	}
 });
-export {
-  it as DuxVideoUpload
-};
+const y = /* @__PURE__ */ a({
+	name: "DuxVideoUpload",
+	props: {
+		path: {
+			type: String,
+			default: "upload"
+		},
+		signPath: {
+			type: String,
+			default: ""
+		},
+		signCallback: Function,
+		managePath: {
+			type: String,
+			default: ""
+		},
+		driver: { type: String },
+		maxNum: Number,
+		maxSize: {
+			type: Number,
+			default: 0
+		},
+		multiple: Boolean,
+		manager: Boolean,
+		value: [String, Array],
+		defaultValue: [String, Array],
+		onUpdateValue: Function,
+		method: String
+	},
+	setup(a, { emit: o }) {
+		let s = h(a, "value", o, {
+			passive: !0,
+			deep: !0,
+			defaultValue: a.defaultValue
+		}), y = m(), b = e(), x = t(), { t: S } = u(), C = {
+			container: "flex gap-2",
+			item: "size-80px rounded border border-muted relative group draggable flex items-center justify-center bg-default",
+			overlay: "z-1 size-full inset-0 absolute flex items-center justify-center bg-default/80 transition-all opacity-0 group-hover:opacity-100 rounded gap-1",
+			uploadArea: "relative size-80px text-sm rounded flex flex-col border border-dashed bg-elevated border-muted dark:border-accented hover:bg-accented/50 hover:border-accented dark:hover:bg-accented/50 dark:hover:border-accented cursor-pointer",
+			uploadContent: "flex-1 flex flex-col justify-center items-center gap-1 relative",
+			progressContainer: "size-80px flex items-center justify-center rounded",
+			progressBar: "absolute left-2 right-2 bottom-2"
+		}, w = r(() => a.maxSize), { uploadPath: T, managePath: E, driver: D, method: O } = n({
+			driver: a?.driver,
+			signPath: a?.signPath,
+			signCallback: a?.signCallback,
+			uploadPath: a?.path,
+			managePath: a?.managePath,
+			method: a?.method
+		}), k = d({
+			path: T.value,
+			multiple: a.multiple,
+			maxFileCount: a.maxNum,
+			maxFileSize: w.value * 1024 * 1024,
+			autoUpload: !0,
+			accept: "video/*",
+			params: a.manager ? { manager: "true" } : void 0,
+			method: O.value,
+			onError: (e) => {
+				y.error(e.message || S("components.upload.error"));
+			},
+			driver: D.value
+		}), A = c(/* @__PURE__ */ new Map()), j = (e) => {
+			if (e.url) return e.url;
+			let t = A.value.get(e.id);
+			if (t) return t;
+			let n = URL.createObjectURL(e.file);
+			return A.value.set(e.id, n), n;
+		};
+		l(k.uploadFiles, (e) => {
+			let t = new Set((e || []).map((e) => e.id));
+			for (let [e, n] of A.value.entries()) t.has(e) || (URL.revokeObjectURL(n), A.value.delete(e));
+		}, { deep: !0 }), l(k.uploadFiles, (e) => {
+			let t = (e || []).filter((e) => e?.status === "error");
+			t.length && k.removeFiles(t.map((e) => e.id));
+		}, { deep: !0 }), l(k.dataFiles, (e) => {
+			let t = a.multiple ? e?.map((e) => e.url) : e?.[0]?.url;
+			s.value = t, a.onUpdateValue?.(t);
+		});
+		let M = r(() => k.progress.value.totalPercent), N = r(() => k.isUploading.value || k.uploadFiles.value.some((e) => e?.status === "uploading")), P = async () => {
+			k.open();
+		}, F = r(() => a.multiple ? a.maxNum && k.uploadFiles.value.length >= a.maxNum : !0), I = (e) => {
+			e && b.node({
+				title: S("components.button.preview"),
+				render: () => i("div", { class: "flex items-center justify-center" }, [i("video", {
+					class: "w-120 max-w-full",
+					controls: !0
+				}, [i("source", { src: e }, null)])])
+			});
+		}, L = (e) => (e || []).filter((e) => {
+			let t = String(e?.filetype || ""), n = String(e?.url || "");
+			return /^video\//i.test(t) || /\.(?:mp4|webm|ogg|mov|m4v)$/i.test(n);
+		});
+		return l(s, (e) => {
+			if (!e || !(Array.isArray(e) ? e.length : String(e).length)) return;
+			let t = typeof e == "string" ? [e] : Array.isArray(e) ? e : [], n = (k.dataFiles.value || []).map((e) => e.url).filter(Boolean), r = t.filter((e) => !n.includes(e));
+			r.length && k.addDataFiles(r.map((e) => ({ url: e })));
+		}), () => i("div", null, [i(_, {
+			modelValue: k.uploadFiles.value,
+			"onUpdate:modelValue": (e) => k.uploadFiles.value = e,
+			class: C.container,
+			draggable: ".draggable"
+		}, { default: () => [k.uploadFiles.value?.map((e, t) => {
+			let n = j(e);
+			return i("div", {
+				key: t,
+				class: g(C.item)
+			}, [i(v, { src: n }, null), i("div", { class: C.overlay }, [e.status === "success" && i(f, {
+				quaternary: !0,
+				circle: !0,
+				size: "small",
+				renderIcon: () => i("div", { class: "n-icon i-tabler:eye" }, null),
+				onClick: () => I(n)
+			}, null), i(f, {
+				quaternary: !0,
+				circle: !0,
+				size: "small",
+				renderIcon: () => i("div", { class: "n-icon i-tabler:trash" }, null),
+				onClick: () => {
+					k.removeFiles([e.id]);
+				}
+			}, null)])]);
+		}), (k.uploadFiles.value.length === 0 || !F.value) && i("div", {
+			class: C.uploadArea,
+			onClick: () => {
+				P();
+			}
+		}, [a.manager && i("div", {
+			class: " py-1 text-xs bg-muted border-b border-dashed border-accented flex items-center justify-center",
+			onClick: (e) => {
+				e.stopPropagation(), x.show({
+					title: S("components.upload.title"),
+					width: "800px",
+					component: () => import("./manager.js"),
+					componentProps: {
+						path: E.value,
+						type: "media",
+						multiple: a.multiple,
+						uploadParams: {
+							path: T.value,
+							accept: "video/*",
+							maxNum: a.maxNum,
+							maxSize: a.maxSize,
+							method: O.value
+						}
+					}
+				}).then((e) => {
+					let t = L(e);
+					k.addDataFiles(t);
+				});
+			}
+		}, [i("div", { class: "i-tabler:folder size-4" }, null)]), i("div", { class: C.uploadContent }, [N.value ? i("div", { class: C.progressContainer }, [i("div", { class: C.progressBar }, [i(p, {
+			type: "line",
+			percentage: M.value,
+			showIndicator: !1,
+			height: 4
+		}, null)])]) : i("div", { class: "i-tabler:plus size-4" }, null)])])] })]);
+	}
+});
+export { y as DuxVideoUpload };