mario-core 2.0.98-release → 2.0.100-release

package/dist/GalleryList-Byohd3LQ.mjs

@@ -0,0 +1,329 @@
+import { jsx as e, jsxs as s } from "react/jsx-runtime";
+import { Row as k, Col as u, Input as R, Button as y, Label as g, Card as E, CardImg as S, CardBody as w, CardTitle as M, CardHeader as B, CardText as j } from "reactstrap";
+import { useSelector as q } from "react-redux";
+import { forwardRef as H, memo as v, useRef as U, useState as K } from "react";
+import { a0 as W, E as L, ar as z, as as P, at as T, au as Q, av as J, aw as X, ax as C, h as Y, a2 as Z, $ as ee, ay as le, m as ae } from "./index-B3i6X8ri.mjs";
+import { Formik as ne } from "formik";
+import * as b from "yup";
+import { useTranslation as A } from "react-i18next";
+const re = b.object({
+  name: b.string().required("Name is required")
+}), se = (l, n) => {
+  const { targetMedia: r, onConfirm: i } = l, a = r?.key ? "Update" : "Create", d = r?.key ? "Rename" : "Folder";
+  return /* @__PURE__ */ e(
+    ne,
+    {
+      initialValues: { name: r?.name },
+      enableReinitialize: !0,
+      validationSchema: re,
+      onSubmit: (o, m) => {
+        i && i(o), m.resetForm();
+      },
+      children: (o) => {
+        const {
+          values: m,
+          touched: I,
+          errors: p,
+          handleChange: D,
+          handleBlur: O,
+          handleSubmit: f
+        } = o;
+        return /* @__PURE__ */ e(
+          W,
+          {
+            header: d,
+            confirmText: a,
+            onConfirm: f,
+            ref: n,
+            children: /* @__PURE__ */ e(k, { children: /* @__PURE__ */ s(u, { md: 12, children: [
+              /* @__PURE__ */ e(
+                R,
+                {
+                  name: "name",
+                  placeholder: `Enter your ${r?.key ? "file" : "folder"} name`,
+                  value: m.name,
+                  onChange: D,
+                  onBlur: O("question")
+                }
+              ),
+              I.name && p.name && /* @__PURE__ */ e(
+                L,
+                {
+                  text: p.name
+                }
+              )
+            ] }) })
+          }
+        );
+      }
+    }
+  );
+}, te = H(se), ie = ({
+  isLibrary: l,
+  step: n,
+  breadcumb: r,
+  currentPrefix: i,
+  targetMedia: a,
+  handleSelectFile: d,
+  handleCreateFolder: o,
+  handleRenameFile: m,
+  handleGoBack: I,
+  handleDownloadMedia: p,
+  handleDeleteMediaOrFolder: D,
+  showErrorAlert: O
+}) => {
+  const f = U(null), x = U(null), { t: F } = A(), N = () => f?.current?.toggle();
+  return /* @__PURE__ */ s("div", { children: [
+    /* @__PURE__ */ s(k, { className: "p-2 pl-3", style: { gap: "8px" }, children: [
+      !!n && /* @__PURE__ */ s(
+        y,
+        {
+          className: "mr-2",
+          color: "secondary",
+          onClick: I,
+          style: { width: "auto", display: "flex", gap: "4px" },
+          children: [
+            /* @__PURE__ */ e(z, {}),
+            /* @__PURE__ */ e(g, { className: "ml-1 h6 m-0", children: "Go up" })
+          ]
+        }
+      ),
+      a && !a.isFolder && /* @__PURE__ */ s(
+        y,
+        {
+          className: "mr-2",
+          color: "success",
+          onClick: p,
+          style: { width: "auto", display: "flex", gap: "4px" },
+          children: [
+            /* @__PURE__ */ e(P, {}),
+            /* @__PURE__ */ e(g, { className: "ml-1 h6 m-0", children: "Download" })
+          ]
+        }
+      ),
+      a && !l && /* @__PURE__ */ s(
+        y,
+        {
+          className: "mr-2",
+          color: "danger",
+          onClick: D,
+          style: { width: "auto", display: "flex", gap: "4px" },
+          children: [
+            /* @__PURE__ */ e(T, {}),
+            /* @__PURE__ */ e(g, { className: "ml-1 h6 m-0", children: "Delete" })
+          ]
+        }
+      ),
+      a && !l && !a.isFolder && /* @__PURE__ */ s(y, { className: "mr-2", color: "primary", onClick: N, style: { width: "auto", display: "flex", gap: "4px" }, children: [
+        /* @__PURE__ */ e(Q, {}),
+        /* @__PURE__ */ e(g, { className: "ml-1 h6 m-0", children: "Rename" })
+      ] }),
+      !a && !l && /* @__PURE__ */ s(y, { className: "mr-2", color: "success", onClick: N, style: { width: "auto", display: "flex", gap: "4px" }, children: [
+        /* @__PURE__ */ e(J, {}),
+        /* @__PURE__ */ e(g, { className: "ml-1 h6 m-0", children: F("new_folder") })
+      ] }),
+      !a && !l && /* @__PURE__ */ s(
+        y,
+        {
+          className: "mr-2",
+          color: "info",
+          onClick: () => x?.current?.click(),
+          style: { width: "auto", display: "flex", gap: "4px" },
+          children: [
+            /* @__PURE__ */ e(X, {}),
+            /* @__PURE__ */ e(g, { className: "ml-1 h6 m-0", children: F("upload") })
+          ]
+        }
+      ),
+      r && /* @__PURE__ */ e(u, { className: "h-100 d-flex align-items-center", children: r })
+    ] }),
+    /* @__PURE__ */ e(
+      te,
+      {
+        ref: f,
+        targetMedia: a,
+        onConfirm: async (h) => {
+          h.name != "" ? a && !a.isFolder ? (N(), await m(h.name)) : (N(), await o(i, h.name)) : O("Name can't be empty");
+        }
+      }
+    ),
+    /* @__PURE__ */ e(
+      "input",
+      {
+        type: "file",
+        id: "customMediaUpload",
+        ref: x,
+        style: { display: "none" },
+        onChange: async (h) => {
+          const c = h?.target?.files[0];
+          c && await d({ key: i, file: c });
+        }
+      }
+    )
+  ] });
+}, oe = v(ie), _ = {
+  "media-wrapper": "_media-wrapper_1nc2k_6",
+  "media-image": "_media-image_1nc2k_11",
+  "media-image-selected": "_media-image-selected_1nc2k_17",
+  "media-title": "_media-title_1nc2k_21",
+  "filter-media-file": "_filter-media-file_1nc2k_30"
+};
+var t = /* @__PURE__ */ ((l) => (l[l.IMAGE = 0] = "IMAGE", l[l.VIDEO = 1] = "VIDEO", l[l.AUDIO = 2] = "AUDIO", l[l.DOC = 3] = "DOC", l[l.UNKNOW = 4] = "UNKNOW", l))(t || {});
+const ce = ["png", "jpg", "jpeg", "gif"], de = ["mp4", "mp4v"], me = ["txt", "pdf", "doc", "docx", "xls", "csv"], he = ["wav", "mp3"], V = (l) => {
+  if (l) {
+    if (ce.includes(l)) return t.IMAGE;
+    if (de.includes(l)) return t.VIDEO;
+    if (me.includes(l)) return t.DOC;
+    if (he.includes(l)) return t.AUDIO;
+  }
+  return t.UNKNOW;
+}, ue = (l) => {
+  if (l.isFolder) return C.FOLDER_IMAGE;
+  const n = V(l.extension);
+  return n === t.IMAGE ? C.PHOTO_IMAGE : n === t.VIDEO ? C.VIDEO_IMAGE : n === t.AUDIO ? C.AUDIO_IMAGE : n === t.DOC ? C.DOCS_IMAGE : C.UNKNOW_IMAGE;
+}, pe = ({ media: l, isTarget: n }) => {
+  const r = ue(l);
+  return /* @__PURE__ */ s(E, { className: `${n ? _["media-image-selected"] : ""} border-0 `, children: [
+    /* @__PURE__ */ e(
+      S,
+      {
+        className: `${_["media-image"]} p-1`,
+        top: !0,
+        width: "90%",
+        src: Y(r),
+        alt: l.name
+      }
+    ),
+    /* @__PURE__ */ e(w, { className: "p-1", style: { height: 45 }, children: /* @__PURE__ */ e(M, { tag: "h6", className: _["media-title"], children: l.name }) })
+  ] });
+}, fe = v(pe), Ne = [
+  { value: t.IMAGE, label: "images" },
+  { value: t.AUDIO, label: "audios" },
+  { value: t.DOC, label: "docs" },
+  { value: t.VIDEO, label: "videos" }
+], ye = ({
+  changeFilters: l
+  // filters
+}) => {
+  const [n, r] = K(), { t: i } = A();
+  return /* @__PURE__ */ s(k, { className: `${_["filter-media-file"]}`, children: [
+    /* @__PURE__ */ e(u, { sm: 8, children: /* @__PURE__ */ e(
+      Z,
+      {
+        initValue: "",
+        onSearch: (a) => l({
+          searchString: a
+        }),
+        placeholder: i("type_something_to_search_by_file_name")
+      }
+    ) }),
+    /* @__PURE__ */ e(u, { sm: 4, children: /* @__PURE__ */ e(
+      ee,
+      {
+        value: n,
+        isMulti: !0,
+        options: Ne.map((a) => ({ ...a, label: i(a.label) })),
+        onChange: (a) => {
+          r(a);
+          const d = a.map((o) => o.value);
+          l({ types: d });
+        }
+      }
+    ) })
+  ] });
+}, ge = ({ height: l, isLibrary: n }) => {
+  const {
+    filters: r,
+    mediaList: i,
+    targetMedia: a,
+    router: d,
+    breadcrumb: o,
+    changeFilters: m,
+    handleOpenFolder: I,
+    handleSelectMedia: p,
+    handleSelectFile: D,
+    handleCreateFolder: O,
+    handleRenameFile: f,
+    handleDownloadMedia: x,
+    handleDeleteMediaOrFolder: F,
+    handleGoBack: N,
+    showErrorAlert: G
+  } = le(n), h = () => i.map((c) => {
+    const $ = a?.key === c.key;
+    return /* @__PURE__ */ e(u, { className: "p-2", xs: "auto", children: /* @__PURE__ */ e(
+      "div",
+      {
+        onDoubleClick: () => I(c),
+        onClick: () => p(c),
+        className: _["media-wrapper"],
+        children: /* @__PURE__ */ e(fe, { media: c, isTarget: $ })
+      }
+    ) }, c.key);
+  });
+  return /* @__PURE__ */ s(E, { children: [
+    /* @__PURE__ */ s(B, { children: [
+      /* @__PURE__ */ e(ye, { changeFilters: m, filters: r }),
+      /* @__PURE__ */ e(
+        oe,
+        {
+          isLibrary: n,
+          step: d.step,
+          breadcumb: o,
+          currentPrefix: r.prefix || "",
+          targetMedia: a,
+          handleSelectFile: D,
+          handleCreateFolder: O,
+          handleRenameFile: f,
+          handleDownloadMedia: x,
+          handleDeleteMediaOrFolder: F,
+          handleGoBack: N,
+          showErrorAlert: G
+        }
+      )
+    ] }),
+    /* @__PURE__ */ e(w, { style: { minHeight: l }, children: /* @__PURE__ */ e(k, { className: "p-1", children: h() }) })
+  ] });
+}, Ce = ({ targetMedia: l }) => {
+  if (!l || l?.isFolder) return /* @__PURE__ */ e("div", {});
+  const n = V(l.extension), r = ae(l.key || "");
+  return /* @__PURE__ */ s(E, { className: "position-sticky", children: [
+    /* @__PURE__ */ e(B, { children: l?.name || "Media name" }),
+    n === t.IMAGE && /* @__PURE__ */ e(S, { className: "p-2", src: r, loading: "lazy" }),
+    n === t.VIDEO && /* @__PURE__ */ e("div", { className: "p-2", children: /* @__PURE__ */ e(
+      "video",
+      {
+        id: l.key,
+        width: "100%",
+        height: "100%",
+        controls: !0,
+        children: /* @__PURE__ */ e("source", { src: r })
+      }
+    ) }),
+    n === t.AUDIO && /* @__PURE__ */ e("div", { className: "p-2", children: /* @__PURE__ */ e("audio", { controls: !0, className: "w-100", children: /* @__PURE__ */ e("source", { src: r }) }) }),
+    /* @__PURE__ */ s(w, { children: [
+      /* @__PURE__ */ e(M, { tag: "h6", children: "General Info" }),
+      /* @__PURE__ */ s(j, { children: [
+        "File extension: ",
+        l.extension?.toUpperCase()
+      ] })
+    ] })
+  ] });
+}, Ie = v(Ce), De = "media_gallery", ve = ({ isLibrary: l }) => {
+  const n = q((i) => i.gallery.targetMedia), { t: r } = A();
+  return /* @__PURE__ */ s("div", { className: "fadeIn animated", children: [
+    !l && /* @__PURE__ */ e("h5", { className: "mb-2", children: r(De) }),
+    /* @__PURE__ */ s(k, { className: "mb-2", children: [
+      /* @__PURE__ */ e(u, { md: 8, children: /* @__PURE__ */ e(ge, { height: "100vh", isLibrary: l }) }),
+      /* @__PURE__ */ e(u, { md: 4, children: /* @__PURE__ */ e(
+        Ie,
+        {
+          targetMedia: n
+        },
+        n?.key
+      ) })
+    ] })
+  ] });
+};
+export {
+  ve as default
+};

package/dist/GalleryList-C0c1Lcei.mjs

@@ -0,0 +1,329 @@
+import { jsx as e, jsxs as s } from "react/jsx-runtime";
+import { Row as k, Col as u, Input as R, Button as y, Label as g, Card as E, CardImg as S, CardBody as w, CardTitle as M, CardHeader as B, CardText as j } from "reactstrap";
+import { useSelector as q } from "react-redux";
+import { forwardRef as H, memo as v, useRef as U, useState as K } from "react";
+import { a0 as W, E as L, ar as z, as as P, at as T, au as Q, av as J, aw as X, ax as C, h as Y, a2 as Z, $ as ee, ay as le, m as ae } from "./index-C2r-UaCo.mjs";
+import { Formik as ne } from "formik";
+import * as b from "yup";
+import { useTranslation as A } from "react-i18next";
+const re = b.object({
+  name: b.string().required("Name is required")
+}), se = (l, n) => {
+  const { targetMedia: r, onConfirm: i } = l, a = r?.key ? "Update" : "Create", d = r?.key ? "Rename" : "Folder";
+  return /* @__PURE__ */ e(
+    ne,
+    {
+      initialValues: { name: r?.name },
+      enableReinitialize: !0,
+      validationSchema: re,
+      onSubmit: (o, m) => {
+        i && i(o), m.resetForm();
+      },
+      children: (o) => {
+        const {
+          values: m,
+          touched: I,
+          errors: p,
+          handleChange: D,
+          handleBlur: O,
+          handleSubmit: f
+        } = o;
+        return /* @__PURE__ */ e(
+          W,
+          {
+            header: d,
+            confirmText: a,
+            onConfirm: f,
+            ref: n,
+            children: /* @__PURE__ */ e(k, { children: /* @__PURE__ */ s(u, { md: 12, children: [
+              /* @__PURE__ */ e(
+                R,
+                {
+                  name: "name",
+                  placeholder: `Enter your ${r?.key ? "file" : "folder"} name`,
+                  value: m.name,
+                  onChange: D,
+                  onBlur: O("question")
+                }
+              ),
+              I.name && p.name && /* @__PURE__ */ e(
+                L,
+                {
+                  text: p.name
+                }
+              )
+            ] }) })
+          }
+        );
+      }
+    }
+  );
+}, te = H(se), ie = ({
+  isLibrary: l,
+  step: n,
+  breadcumb: r,
+  currentPrefix: i,
+  targetMedia: a,
+  handleSelectFile: d,
+  handleCreateFolder: o,
+  handleRenameFile: m,
+  handleGoBack: I,
+  handleDownloadMedia: p,
+  handleDeleteMediaOrFolder: D,
+  showErrorAlert: O
+}) => {
+  const f = U(null), x = U(null), { t: F } = A(), N = () => f?.current?.toggle();
+  return /* @__PURE__ */ s("div", { children: [
+    /* @__PURE__ */ s(k, { className: "p-2 pl-3", style: { gap: "8px" }, children: [
+      !!n && /* @__PURE__ */ s(
+        y,
+        {
+          className: "mr-2",
+          color: "secondary",
+          onClick: I,
+          style: { width: "auto", display: "flex", gap: "4px" },
+          children: [
+            /* @__PURE__ */ e(z, {}),
+            /* @__PURE__ */ e(g, { className: "ml-1 h6 m-0", children: "Go up" })
+          ]
+        }
+      ),
+      a && !a.isFolder && /* @__PURE__ */ s(
+        y,
+        {
+          className: "mr-2",
+          color: "success",
+          onClick: p,
+          style: { width: "auto", display: "flex", gap: "4px" },
+          children: [
+            /* @__PURE__ */ e(P, {}),
+            /* @__PURE__ */ e(g, { className: "ml-1 h6 m-0", children: "Download" })
+          ]
+        }
+      ),
+      a && !l && /* @__PURE__ */ s(
+        y,
+        {
+          className: "mr-2",
+          color: "danger",
+          onClick: D,
+          style: { width: "auto", display: "flex", gap: "4px" },
+          children: [
+            /* @__PURE__ */ e(T, {}),
+            /* @__PURE__ */ e(g, { className: "ml-1 h6 m-0", children: "Delete" })
+          ]
+        }
+      ),
+      a && !l && !a.isFolder && /* @__PURE__ */ s(y, { className: "mr-2", color: "primary", onClick: N, style: { width: "auto", display: "flex", gap: "4px" }, children: [
+        /* @__PURE__ */ e(Q, {}),
+        /* @__PURE__ */ e(g, { className: "ml-1 h6 m-0", children: "Rename" })
+      ] }),
+      !a && !l && /* @__PURE__ */ s(y, { className: "mr-2", color: "success", onClick: N, style: { width: "auto", display: "flex", gap: "4px" }, children: [
+        /* @__PURE__ */ e(J, {}),
+        /* @__PURE__ */ e(g, { className: "ml-1 h6 m-0", children: F("new_folder") })
+      ] }),
+      !a && !l && /* @__PURE__ */ s(
+        y,
+        {
+          className: "mr-2",
+          color: "info",
+          onClick: () => x?.current?.click(),
+          style: { width: "auto", display: "flex", gap: "4px" },
+          children: [
+            /* @__PURE__ */ e(X, {}),
+            /* @__PURE__ */ e(g, { className: "ml-1 h6 m-0", children: F("upload") })
+          ]
+        }
+      ),
+      r && /* @__PURE__ */ e(u, { className: "h-100 d-flex align-items-center", children: r })
+    ] }),
+    /* @__PURE__ */ e(
+      te,
+      {
+        ref: f,
+        targetMedia: a,
+        onConfirm: async (h) => {
+          h.name != "" ? a && !a.isFolder ? (N(), await m(h.name)) : (N(), await o(i, h.name)) : O("Name can't be empty");
+        }
+      }
+    ),
+    /* @__PURE__ */ e(
+      "input",
+      {
+        type: "file",
+        id: "customMediaUpload",
+        ref: x,
+        style: { display: "none" },
+        onChange: async (h) => {
+          const c = h?.target?.files[0];
+          c && await d({ key: i, file: c });
+        }
+      }
+    )
+  ] });
+}, oe = v(ie), _ = {
+  "media-wrapper": "_media-wrapper_1nc2k_6",
+  "media-image": "_media-image_1nc2k_11",
+  "media-image-selected": "_media-image-selected_1nc2k_17",
+  "media-title": "_media-title_1nc2k_21",
+  "filter-media-file": "_filter-media-file_1nc2k_30"
+};
+var t = /* @__PURE__ */ ((l) => (l[l.IMAGE = 0] = "IMAGE", l[l.VIDEO = 1] = "VIDEO", l[l.AUDIO = 2] = "AUDIO", l[l.DOC = 3] = "DOC", l[l.UNKNOW = 4] = "UNKNOW", l))(t || {});
+const ce = ["png", "jpg", "jpeg", "gif"], de = ["mp4", "mp4v"], me = ["txt", "pdf", "doc", "docx", "xls", "csv"], he = ["wav", "mp3"], V = (l) => {
+  if (l) {
+    if (ce.includes(l)) return t.IMAGE;
+    if (de.includes(l)) return t.VIDEO;
+    if (me.includes(l)) return t.DOC;
+    if (he.includes(l)) return t.AUDIO;
+  }
+  return t.UNKNOW;
+}, ue = (l) => {
+  if (l.isFolder) return C.FOLDER_IMAGE;
+  const n = V(l.extension);
+  return n === t.IMAGE ? C.PHOTO_IMAGE : n === t.VIDEO ? C.VIDEO_IMAGE : n === t.AUDIO ? C.AUDIO_IMAGE : n === t.DOC ? C.DOCS_IMAGE : C.UNKNOW_IMAGE;
+}, pe = ({ media: l, isTarget: n }) => {
+  const r = ue(l);
+  return /* @__PURE__ */ s(E, { className: `${n ? _["media-image-selected"] : ""} border-0 `, children: [
+    /* @__PURE__ */ e(
+      S,
+      {
+        className: `${_["media-image"]} p-1`,
+        top: !0,
+        width: "90%",
+        src: Y(r),
+        alt: l.name
+      }
+    ),
+    /* @__PURE__ */ e(w, { className: "p-1", style: { height: 45 }, children: /* @__PURE__ */ e(M, { tag: "h6", className: _["media-title"], children: l.name }) })
+  ] });
+}, fe = v(pe), Ne = [
+  { value: t.IMAGE, label: "images" },
+  { value: t.AUDIO, label: "audios" },
+  { value: t.DOC, label: "docs" },
+  { value: t.VIDEO, label: "videos" }
+], ye = ({
+  changeFilters: l
+  // filters
+}) => {
+  const [n, r] = K(), { t: i } = A();
+  return /* @__PURE__ */ s(k, { className: `${_["filter-media-file"]}`, children: [
+    /* @__PURE__ */ e(u, { sm: 8, children: /* @__PURE__ */ e(
+      Z,
+      {
+        initValue: "",
+        onSearch: (a) => l({
+          searchString: a
+        }),
+        placeholder: i("type_something_to_search_by_file_name")
+      }
+    ) }),
+    /* @__PURE__ */ e(u, { sm: 4, children: /* @__PURE__ */ e(
+      ee,
+      {
+        value: n,
+        isMulti: !0,
+        options: Ne.map((a) => ({ ...a, label: i(a.label) })),
+        onChange: (a) => {
+          r(a);
+          const d = a.map((o) => o.value);
+          l({ types: d });
+        }
+      }
+    ) })
+  ] });
+}, ge = ({ height: l, isLibrary: n }) => {
+  const {
+    filters: r,
+    mediaList: i,
+    targetMedia: a,
+    router: d,
+    breadcrumb: o,
+    changeFilters: m,
+    handleOpenFolder: I,
+    handleSelectMedia: p,
+    handleSelectFile: D,
+    handleCreateFolder: O,
+    handleRenameFile: f,
+    handleDownloadMedia: x,
+    handleDeleteMediaOrFolder: F,
+    handleGoBack: N,
+    showErrorAlert: G
+  } = le(n), h = () => i.map((c) => {
+    const $ = a?.key === c.key;
+    return /* @__PURE__ */ e(u, { className: "p-2", xs: "auto", children: /* @__PURE__ */ e(
+      "div",
+      {
+        onDoubleClick: () => I(c),
+        onClick: () => p(c),
+        className: _["media-wrapper"],
+        children: /* @__PURE__ */ e(fe, { media: c, isTarget: $ })
+      }
+    ) }, c.key);
+  });
+  return /* @__PURE__ */ s(E, { children: [
+    /* @__PURE__ */ s(B, { children: [
+      /* @__PURE__ */ e(ye, { changeFilters: m, filters: r }),
+      /* @__PURE__ */ e(
+        oe,
+        {
+          isLibrary: n,
+          step: d.step,
+          breadcumb: o,
+          currentPrefix: r.prefix || "",
+          targetMedia: a,
+          handleSelectFile: D,
+          handleCreateFolder: O,
+          handleRenameFile: f,
+          handleDownloadMedia: x,
+          handleDeleteMediaOrFolder: F,
+          handleGoBack: N,
+          showErrorAlert: G
+        }
+      )
+    ] }),
+    /* @__PURE__ */ e(w, { style: { minHeight: l }, children: /* @__PURE__ */ e(k, { className: "p-1", children: h() }) })
+  ] });
+}, Ce = ({ targetMedia: l }) => {
+  if (!l || l?.isFolder) return /* @__PURE__ */ e("div", {});
+  const n = V(l.extension), r = ae(l.key || "");
+  return /* @__PURE__ */ s(E, { className: "position-sticky", children: [
+    /* @__PURE__ */ e(B, { children: l?.name || "Media name" }),
+    n === t.IMAGE && /* @__PURE__ */ e(S, { className: "p-2", src: r, loading: "lazy" }),
+    n === t.VIDEO && /* @__PURE__ */ e("div", { className: "p-2", children: /* @__PURE__ */ e(
+      "video",
+      {
+        id: l.key,
+        width: "100%",
+        height: "100%",
+        controls: !0,
+        children: /* @__PURE__ */ e("source", { src: r })
+      }
+    ) }),
+    n === t.AUDIO && /* @__PURE__ */ e("div", { className: "p-2", children: /* @__PURE__ */ e("audio", { controls: !0, className: "w-100", children: /* @__PURE__ */ e("source", { src: r }) }) }),
+    /* @__PURE__ */ s(w, { children: [
+      /* @__PURE__ */ e(M, { tag: "h6", children: "General Info" }),
+      /* @__PURE__ */ s(j, { children: [
+        "File extension: ",
+        l.extension?.toUpperCase()
+      ] })
+    ] })
+  ] });
+}, Ie = v(Ce), De = "media_gallery", ve = ({ isLibrary: l }) => {
+  const n = q((i) => i.gallery.targetMedia), { t: r } = A();
+  return /* @__PURE__ */ s("div", { className: "fadeIn animated", children: [
+    !l && /* @__PURE__ */ e("h5", { className: "mb-2", children: r(De) }),
+    /* @__PURE__ */ s(k, { className: "mb-2", children: [
+      /* @__PURE__ */ e(u, { md: 8, children: /* @__PURE__ */ e(ge, { height: "100vh", isLibrary: l }) }),
+      /* @__PURE__ */ e(u, { md: 4, children: /* @__PURE__ */ e(
+        Ie,
+        {
+          targetMedia: n
+        },
+        n?.key
+      ) })
+    ] })
+  ] });
+};
+export {
+  ve as default
+};