@nmorph/nmorph-ui-kit 2.2.52 → 2.2.54

package/dist/components/data/nmorph-media-gallery/NmorphMediaGallery.vue.js

@@ -1,23 +1,48 @@
 import './NmorphMediaGallery.css';
-import { defineComponent as de, ref as f, computed as i, watch as C, onBeforeUnmount as ce, openBlock as p, createBlock as y, withCtx as r, createElementVNode as g, unref as t, normalizeStyle as ve, createElementBlock as T, createCommentVNode as L, withModifiers as me, createVNode as l } from "vue";
-import { useModifiers as fe } from "../../../utils/create-modifiers.js";
-import pe from "../nmorph-preview-portal/NmorphPreviewPortal.vue.js";
+import { defineComponent as Ye, ref as _, computed as s, watch as S, onBeforeUnmount as Ge, openBlock as i, createElementBlock as u, Fragment as ve, normalizeStyle as me, normalizeClass as fe, renderList as Ue, createElementVNode as x, createBlock as B, unref as o, createVNode as r, withCtx as c, createCommentVNode as d, toDisplayString as A, withModifiers as P } from "vue";
+import { useModifiers as pe } from "../../../utils/create-modifiers.js";
+import { createCssSizeVariables as Ze } from "../../../utils/common.js";
+import We from "../nmorph-preview-portal/NmorphPreviewPortal.vue.js";
 /* empty css                                                */
 import he from "../nmorph-image/NmorphImage.vue.js";
 /* empty css                               */
-import k from "../../basic/nmorph-icon/NmorphIcon.vue.js";
+import f from "../../basic/nmorph-icon/NmorphIcon.vue.js";
 /* empty css                                      */
-import w from "../../basic/nmorph-button/NmorphButton.vue.js";
+import je from "../../../assets/icons/eye.svg.js";
+import ge from "../../../assets/icons/full-screen.svg.js";
+import M from "../../basic/nmorph-button/NmorphButton.vue.js";
 /* empty css                                          */
-import _e from "../../../assets/icons/pause.svg.js";
-import ye from "../../../assets/icons/play.svg.js";
-import ge from "../../../assets/icons/rotate-right.svg.js";
-import ke from "../../../assets/icons/rotate-left.svg.js";
-import Ie from "../../../assets/icons/zoom-in.svg.js";
-import xe from "../../../assets/icons/zoom-out.svg.js";
-import we from "../../../assets/icons/enlarge.svg.js";
-import Ne from "../../../assets/icons/shrink.svg.js";
-const be = { class: "nmorph-media-gallery__stage" }, Pe = ["src", "poster", "controls", "muted", "playsinline", "preload", "title"], Ce = ["aria-label"], Ve = { class: "nmorph-media-gallery__action-element" }, Ee = { class: "nmorph-media-gallery__action-element" }, He = { class: "nmorph-media-gallery__action-element" }, Be = { class: "nmorph-media-gallery__action-element" }, Le = { class: "nmorph-media-gallery__action-element" }, Fe = 45, Je = /* @__PURE__ */ de({
+import _e from "../../../assets/icons/play.svg.js";
+import ye from "../../../assets/icons/download.svg.js";
+import Je from "../../../assets/icons/pause.svg.js";
+import Qe from "../../../assets/icons/rotate-right.svg.js";
+import ea from "../../../assets/icons/rotate-left.svg.js";
+import aa from "../../../assets/icons/zoom-in.svg.js";
+import la from "../../../assets/icons/zoom-out.svg.js";
+import oa from "../../../assets/icons/enlarge.svg.js";
+import ta from "../../../assets/icons/shrink.svg.js";
+const na = ["aria-label", "onClick"], ra = ["src", "poster", "title"], ia = {
+  key: 2,
+  class: "nmorph-media-gallery__trigger-play"
+}, sa = {
+  key: 3,
+  class: "nmorph-media-gallery__trigger-name"
+}, ua = {
+  key: 4,
+  class: "nmorph-media-gallery__trigger-size"
+}, ca = {
+  key: 0,
+  class: "nmorph-media-gallery__trigger-actions"
+}, da = ["aria-label", "onClick"], va = ["aria-label", "onClick"], ma = ["href", "download", "aria-label", "onClick"], fa = { class: "nmorph-media-gallery__stage" }, pa = ["src", "poster", "controls", "muted", "playsinline", "preload", "title"], ha = ["aria-label"], ga = {
+  key: 3,
+  class: "nmorph-media-gallery__file-name"
+}, _a = {
+  key: 4,
+  class: "nmorph-media-gallery__file-actions"
+}, ya = ["aria-label"], ka = ["href", "download", "aria-label"], wa = {
+  key: 5,
+  class: "nmorph-media-gallery__file-size"
+}, ba = { class: "nmorph-media-gallery__action-element" }, Ia = { class: "nmorph-media-gallery__action-element" }, Na = { class: "nmorph-media-gallery__action-element" }, xa = { class: "nmorph-media-gallery__action-element" }, Ba = { class: "nmorph-media-gallery__action-element" }, Fa = 45, Wa = /* @__PURE__ */ Ye({
   __name: "NmorphMediaGallery",
   props: {
     modelValue: { type: Boolean, default: !1 },
@@ -25,274 +50,480 @@ const be = { class: "nmorph-media-gallery__stage" }, Pe = ["src", "poster", "con
     initialIndex: { default: 0 },
     activeIndex: { default: void 0 },
     zIndex: { default: void 0 },
+    height: { default: void 0 },
+    showTrigger: { type: Boolean, default: !1 },
+    showTriggerName: { type: Boolean, default: !0 },
+    showTriggerSize: { type: Boolean, default: !0 },
+    showTriggerActions: { type: Boolean, default: !0 },
+    showTriggerPlayButton: { type: Boolean, default: !0 },
     showNavigationButtons: { type: Boolean, default: !0 },
     showActionBar: { type: Boolean, default: !0 },
+    showFileName: { type: Boolean, default: !0 },
+    showFileSize: { type: Boolean, default: !0 },
+    showFileActions: { type: Boolean, default: !0 },
+    showPlaybackButton: { type: Boolean, default: !0 },
     imageFit: { default: "contain" },
     videoFit: { default: "contain" }
   },
-  emits: ["update:model-value", "update:active-index", "close", "change"],
-  setup(X, { emit: Y }) {
-    const o = X, N = Y, c = f(o.modelValue), I = f(0), v = f(null), b = f(null), u = f(!1), d = f(1), s = f(0), h = f(null), m = i(() => o.items || []), F = i(() => m.value.length > 1), z = i(() => o.showNavigationButtons && F.value), x = (e) => {
-      const n = m.value.length - 1;
-      return n < 0 || !Number.isFinite(e) || e < 0 ? 0 : e > n ? n : e;
-    }, _ = i(() => x(I.value)), a = i(() => m.value[_.value]), M = i(() => a.value?.kind === "image"), V = i(() => a.value?.kind === "video"), U = i(
-      () => a.value?.kind === "video" ? a.value.controls !== !1 : !1
-    ), Z = i(() => a.value?.kind === "video" ? a.value.muted === !0 : !1), G = i(
-      () => a.value?.kind === "video" ? a.value.playsinline !== !1 : !0
-    ), W = i(
-      () => a.value?.kind === "video" && a.value.preload || "metadata"
-    ), R = i(
-      () => a.value?.kind === "video" && a.value.name || "video"
-    ), j = i(
-      () => fe({
+  emits: ["update:model-value", "update:active-index", "close", "change", "download", "fullscreen"],
+  setup(ke, { emit: we }) {
+    const n = ke, h = we, y = _(n.modelValue), F = _(0), k = _(null), X = _({}), z = _(null), m = _(!1), I = _(!1), w = _(1), g = _(0), C = _(null), p = s(() => n.items || []), Y = s(() => p.value.length > 1), G = s(() => n.showNavigationButtons && Y.value), $ = (e) => {
+      const l = p.value.length - 1;
+      return l < 0 || !Number.isFinite(e) || e < 0 ? 0 : e > l ? l : e;
+    }, b = s(() => $(F.value)), t = s(() => p.value[b.value]), U = s(() => t.value?.kind === "image"), H = s(() => t.value?.kind === "video"), Z = s(
+      () => t.value?.kind === "video" ? t.value.controls !== !1 : !1
+    ), be = s(() => t.value?.kind === "video" ? t.value.muted === !0 : !1), Ie = s(
+      () => t.value?.kind === "video" ? t.value.playsinline !== !1 : !0
+    ), Ne = s(
+      () => t.value?.kind === "video" && t.value.preload || "metadata"
+    ), E = s(
+      () => t.value?.kind === "video" && t.value.name || "video"
+    ), R = s(() => t.value?.name || ""), W = s(() => n.showFileName ? R.value : ""), D = s(() => t.value?.downloadHref || ""), xe = s(() => n.showPlaybackButton && H.value && I.value), j = s(() => n.showFileActions && H.value && !Z.value), Be = s(
+      () => n.showFileActions && (j.value || !!D.value)
+    ), Fe = s(
+      () => pe({
         "nmorph-media-gallery": [
-          c.value && "opened",
-          M.value && "image",
-          V.value && "video",
-          u.value && V.value && "video-playing",
-          o.imageFit === "cover" && M.value && "image-cover",
-          o.videoFit === "cover" && V.value && "video-cover"
+          y.value && "opened",
+          U.value && "image",
+          H.value && "video",
+          m.value && H.value && "video-playing",
+          n.imageFit === "cover" && U.value && "image-cover",
+          n.videoFit === "cover" && H.value && "video-cover"
         ]
       })
-    ), q = i(() => `rotate(${s.value}deg) scale(${d.value})`);
-    C(
-      () => o.modelValue,
+    ), Ce = s(() => `rotate(${g.value}deg) scale(${w.value})`), $e = s(
+      () => Ze({
+        "--nmorph-media-gallery-trigger-height": n.height
+      })
+    ), Pe = s(
+      () => pe({
+        "nmorph-media-gallery__trigger": [n.height !== void 0 && "fixed-height"]
+      })
+    ), J = (e) => {
+      if (e === void 0 || Number.isNaN(e) || e < 0) return "";
+      if (e === 0) return "0 B";
+      const l = ["B", "KB", "MB", "GB", "TB"], a = Math.min(Math.floor(Math.log(e) / Math.log(1024)), l.length - 1), v = e / 1024 ** a, N = v >= 10 || a === 0 || Number.isInteger(v) ? 0 : 1;
+      return `${v.toFixed(N)} ${l[a]}`;
+    }, Q = s(() => n.showFileSize ? J(t.value?.size) : ""), V = (e) => e.name || "", L = (e, l) => e.name || `${e.kind === "video" ? "Video" : "Image"} ${l + 1}`, ee = (e) => J(e.size), K = (e) => e.downloadHref || "", ze = (e, l) => {
+      X.value[e] = l instanceof HTMLVideoElement ? l : null;
+    };
+    S(
+      () => n.modelValue,
       (e) => {
-        c.value = e;
+        y.value = e;
       }
-    ), C(
-      () => o.activeIndex,
+    ), S(
+      () => n.activeIndex,
       (e) => {
-        typeof e == "number" && (I.value = x(e));
+        typeof e == "number" && (F.value = $(e));
       },
       { immediate: !0 }
-    ), C(
-      () => [o.initialIndex, m.value.length],
+    ), S(
+      () => [n.initialIndex, p.value.length],
       () => {
-        typeof o.activeIndex != "number" && (I.value = x(o.initialIndex));
+        typeof n.activeIndex != "number" && (F.value = $(n.initialIndex));
       },
       { immediate: !0 }
+    ), S(
+      () => [t.value?.kind, t.value?.src, b.value],
+      () => {
+        m.value = !1, I.value = !1, z.value = null;
+      }
     );
-    const E = () => {
-      !v.value || v.value === b.value || (v.value.pause(), u.value = !1, b.value = v.value);
-    }, J = () => {
-      d.value = 1, s.value = 0;
-    }, $ = (e) => {
-      if (!m.value.length) return;
-      const n = x(e);
-      if (n === _.value) return;
-      E(), u.value = !1, I.value = n, J(), N("update:active-index", n);
-      const P = m.value[n];
-      P && N("change", P, n);
-    }, H = () => {
-      const e = m.value.length;
-      e && $(_.value === 0 ? e - 1 : _.value - 1);
-    }, B = () => {
-      const e = m.value.length;
-      e && $(_.value === e - 1 ? 0 : _.value + 1);
-    }, K = () => {
-      c.value && (E(), c.value = !1, N("update:model-value", !1), N("close"));
-    }, Q = () => {
-      s.value = s.value + 90, s.value >= 360 && (s.value = 0);
-    }, ee = () => {
-      s.value = s.value - 90, s.value <= -360 && (s.value = 0);
+    const T = () => {
+      !k.value || k.value === z.value || (k.value.pause(), m.value = !1, z.value = k.value);
     }, ae = () => {
-      d.value = parseFloat(Math.min(d.value + 0.2, 4).toFixed(3));
+      w.value = 1, g.value = 0;
+    }, le = (e) => {
+      if (!p.value.length) return;
+      const l = $(e);
+      if (l === b.value) return;
+      T(), m.value = !1, I.value = !1, F.value = l, ae(), h("update:active-index", l);
+      const a = p.value[l];
+      a && h("change", a, l);
+    }, q = () => {
+      const e = p.value.length;
+      e && le(b.value === 0 ? e - 1 : b.value - 1);
+    }, O = () => {
+      const e = p.value.length;
+      e && le(b.value === e - 1 ? 0 : b.value + 1);
+    }, oe = (e) => {
+      if (!p.value.length) return;
+      const l = $(e);
+      T(), m.value = !1, I.value = !1, F.value = l, ae(), y.value = !0, h("update:model-value", !0), h("update:active-index", l);
+      const a = p.value[l];
+      a && h("change", a, l);
     }, te = () => {
-      d.value = parseFloat(Math.max(d.value - 0.2, 0.2).toFixed(3));
-    }, oe = () => {
-      d.value = 1;
-    }, le = async () => {
-      if (v.value) {
-        if (u.value) {
-          v.value.pause();
+      y.value && (T(), y.value = !1, h("update:model-value", !1), h("close"));
+    }, He = () => {
+      g.value = g.value + 90, g.value >= 360 && (g.value = 0);
+    }, Ve = () => {
+      g.value = g.value - 90, g.value <= -360 && (g.value = 0);
+    }, Le = () => {
+      w.value = parseFloat(Math.min(w.value + 0.2, 4).toFixed(3));
+    }, Se = () => {
+      w.value = parseFloat(Math.max(w.value - 0.2, 0.2).toFixed(3));
+    }, Me = () => {
+      w.value = 1;
+    }, Te = async () => {
+      if (k.value) {
+        if (m.value) {
+          k.value.pause();
           return;
         }
         try {
-          await v.value.play();
+          await k.value.play();
         } catch {
-          u.value = !1;
+          m.value = !1;
         }
       }
-    }, ne = () => {
-      u.value = !0, b.value = null;
+    }, ne = async (e) => {
+      if (e)
+        try {
+          const l = e.requestFullscreen?.() || e.webkitRequestFullscreen?.();
+          if (l) {
+            await l;
+            return;
+          }
+          e.webkitEnterFullscreen?.();
+        } catch {
+        }
+    }, Ae = async () => {
+      !t.value || t.value.kind !== "video" || (h("fullscreen", t.value, b.value), await ne(k.value));
+    }, Ee = async (e, l) => {
+      e.kind === "video" && (h("fullscreen", e, l), await ne(X.value[l]));
+    }, re = (e, l) => {
+      h("download", e, l);
+    }, Re = () => {
+      t.value && re(t.value, b.value);
+    }, De = () => {
+      m.value = !0, z.value = null;
     }, ie = () => {
-      u.value = !1;
-    }, re = () => {
-      u.value = !1;
-    }, ue = () => {
-      u.value = !1;
-    }, S = (e) => {
-      if (c.value && !(e.altKey || e.ctrlKey || e.metaKey || e.shiftKey)) {
+      I.value = !0;
+    }, Ke = () => {
+      m.value = !1;
+    }, qe = () => {
+      m.value = !1;
+    }, Oe = () => {
+      m.value = !1, I.value = !1;
+    }, se = (e) => {
+      if (y.value && !(e.altKey || e.ctrlKey || e.metaKey || e.shiftKey)) {
         if (e.key === "Escape") {
-          e.preventDefault(), K();
+          e.preventDefault(), te();
           return;
         }
-        F.value && (e.key === "ArrowLeft" && (e.preventDefault(), H()), e.key === "ArrowRight" && (e.preventDefault(), B()));
+        Y.value && (e.key === "ArrowLeft" && (e.preventDefault(), q()), e.key === "ArrowRight" && (e.preventDefault(), O()));
       }
-    }, se = () => {
-      typeof document > "u" || document.addEventListener("keydown", S);
-    }, D = () => {
-      typeof document > "u" || document.removeEventListener("keydown", S);
+    }, Xe = () => {
+      typeof document > "u" || document.addEventListener("keydown", se);
+    }, ue = () => {
+      typeof document > "u" || document.removeEventListener("keydown", se);
     };
-    C(
-      c,
+    S(
+      y,
       (e) => {
-        e ? (se(), b.value = null, I.value = x(
-          typeof o.activeIndex == "number" ? o.activeIndex : o.initialIndex
-        )) : (E(), u.value = !1, D());
+        e ? (Xe(), z.value = null, I.value = !1, F.value = $(
+          typeof n.activeIndex == "number" ? n.activeIndex : n.initialIndex
+        )) : (T(), m.value = !1, I.value = !1, ue());
       },
       { immediate: !0 }
-    ), ce(D);
-    const A = (e) => {
-      h.value = { x: e.clientX, y: e.clientY };
-    }, O = (e) => {
-      if (!h.value || !z.value) {
-        h.value = null;
+    ), Ge(ue);
+    const ce = (e) => {
+      C.value = { x: e.clientX, y: e.clientY };
+    }, de = (e) => {
+      if (!C.value || !G.value) {
+        C.value = null;
         return;
       }
-      const n = e.clientX - h.value.x, P = e.clientY - h.value.y;
-      h.value = null, !(Math.abs(n) < Fe || Math.abs(n) < Math.abs(P) * 1.2) && (n > 0 ? H() : B());
+      const l = e.clientX - C.value.x, a = e.clientY - C.value.y;
+      C.value = null, !(Math.abs(l) < Fa || Math.abs(l) < Math.abs(a) * 1.2) && (l > 0 ? q() : O());
     };
-    return (e, n) => c.value ? (p(), y(pe, {
-      key: 0,
-      show: c.value,
-      "z-index": o.zIndex,
-      "state-class": j.value,
-      "content-class": "nmorph-media-gallery__content",
-      "left-class": "nmorph-media-gallery__left",
-      "right-class": "nmorph-media-gallery__right",
-      "actions-class": "nmorph-media-gallery__actions",
-      "show-navigation": z.value,
-      "show-action-bar": o.showActionBar && a.value?.kind === "image",
-      onClose: K,
-      onPrevious: H,
-      onNext: B
-    }, {
-      actions: r(() => [
-        g("div", Ve, [
-          l(t(w), { onClick: Q }, {
-            default: r(() => [
-              l(t(k), null, {
-                default: r(() => [
-                  l(t(ge))
+    return (e, l) => (i(), u(ve, null, [
+      n.showTrigger ? (i(), u("div", {
+        key: 0,
+        class: fe(Pe.value),
+        style: me($e.value)
+      }, [
+        (i(!0), u(ve, null, Ue(p.value, (a, v) => (i(), u("div", {
+          key: `${a.kind}-${a.src}-${v}`,
+          class: fe(["nmorph-media-gallery__trigger-item", `nmorph-media-gallery__trigger-item--${a.kind}`])
+        }, [
+          x("button", {
+            type: "button",
+            class: "nmorph-media-gallery__trigger-open",
+            "aria-label": `Open ${L(a, v)}`,
+            onClick: (N) => oe(v)
+          }, [
+            a.kind === "image" ? (i(), B(o(he), {
+              key: 0,
+              src: a.src,
+              alt: a.alt || L(a, v),
+              title: V(a),
+              fit: "cover",
+              "frame-border": 0
+            }, null, 8, ["src", "alt", "title"])) : (i(), u("video", {
+              key: 1,
+              ref_for: !0,
+              ref: (N) => ze(v, N),
+              class: "nmorph-media-gallery__trigger-video",
+              src: a.src,
+              poster: a.poster || void 0,
+              muted: "",
+              playsinline: "",
+              preload: "metadata",
+              title: V(a)
+            }, null, 8, ra)),
+            n.showTriggerPlayButton && a.kind === "video" ? (i(), u("span", ia, [
+              r(o(f), {
+                size: "medium",
+                color: "var(--nmorph-contrast-text-color)"
+              }, {
+                default: c(() => [
+                  r(o(_e))
                 ]),
                 _: 1
               })
-            ]),
-            _: 1
-          })
-        ]),
-        g("div", Ee, [
-          l(t(w), { onClick: ee }, {
-            default: r(() => [
-              l(t(k), null, {
-                default: r(() => [
-                  l(t(ke))
+            ])) : d("", !0),
+            n.showTriggerName && V(a) ? (i(), u("span", sa, A(V(a)), 1)) : d("", !0),
+            n.showTriggerSize && ee(a) ? (i(), u("span", ua, A(ee(a)), 1)) : d("", !0)
+          ], 8, na),
+          n.showTriggerActions && (K(a) || a.kind === "video") ? (i(), u("div", ca, [
+            a.kind === "video" ? (i(), u("button", {
+              key: 0,
+              type: "button",
+              class: "nmorph-media-gallery__trigger-action",
+              "aria-label": `Preview ${L(a, v)}`,
+              onClick: P((N) => oe(v), ["stop"])
+            }, [
+              r(o(f), {
+                size: "small",
+                color: "var(--nmorph-contrast-text-color)"
+              }, {
+                default: c(() => [
+                  r(o(je))
                 ]),
                 _: 1
               })
-            ]),
-            _: 1
-          })
-        ]),
-        g("div", He, [
-          l(t(w), { onClick: ae }, {
-            default: r(() => [
-              l(t(k), null, {
-                default: r(() => [
-                  l(t(Ie))
+            ], 8, da)) : d("", !0),
+            a.kind === "video" ? (i(), u("button", {
+              key: 1,
+              type: "button",
+              class: "nmorph-media-gallery__trigger-action",
+              "aria-label": `Fullscreen ${L(a, v)}`,
+              onClick: P((N) => Ee(a, v), ["stop"])
+            }, [
+              r(o(f), {
+                size: "small",
+                color: "var(--nmorph-contrast-text-color)"
+              }, {
+                default: c(() => [
+                  r(o(ge))
                 ]),
                 _: 1
               })
-            ]),
-            _: 1
-          })
-        ]),
-        g("div", Be, [
-          l(t(w), { onClick: te }, {
-            default: r(() => [
-              l(t(k), null, {
-                default: r(() => [
-                  l(t(xe))
+            ], 8, va)) : d("", !0),
+            K(a) ? (i(), u("a", {
+              key: 2,
+              href: K(a),
+              download: V(a) || void 0,
+              class: "nmorph-media-gallery__trigger-action",
+              "aria-label": `Download ${L(a, v)}`,
+              onClick: P((N) => re(a, v), ["stop"])
+            }, [
+              r(o(f), {
+                size: "small",
+                color: "var(--nmorph-contrast-text-color)"
+              }, {
+                default: c(() => [
+                  r(o(ye))
                 ]),
                 _: 1
               })
-            ]),
-            _: 1
-          })
+            ], 8, ma)) : d("", !0)
+          ])) : d("", !0)
+        ], 2))), 128))
+      ], 6)) : d("", !0),
+      y.value ? (i(), B(We, {
+        key: 1,
+        show: y.value,
+        "z-index": n.zIndex,
+        "state-class": Fe.value,
+        "content-class": "nmorph-media-gallery__content",
+        "left-class": "nmorph-media-gallery__left",
+        "right-class": "nmorph-media-gallery__right",
+        "actions-class": "nmorph-media-gallery__actions",
+        "show-navigation": G.value,
+        "show-action-bar": n.showActionBar && t.value?.kind === "image",
+        onClose: te,
+        onPrevious: q,
+        onNext: O
+      }, {
+        actions: c(() => [
+          x("div", ba, [
+            r(o(M), { onClick: He }, {
+              default: c(() => [
+                r(o(f), null, {
+                  default: c(() => [
+                    r(o(Qe))
+                  ]),
+                  _: 1
+                })
+              ]),
+              _: 1
+            })
+          ]),
+          x("div", Ia, [
+            r(o(M), { onClick: Ve }, {
+              default: c(() => [
+                r(o(f), null, {
+                  default: c(() => [
+                    r(o(ea))
+                  ]),
+                  _: 1
+                })
+              ]),
+              _: 1
+            })
+          ]),
+          x("div", Na, [
+            r(o(M), { onClick: Le }, {
+              default: c(() => [
+                r(o(f), null, {
+                  default: c(() => [
+                    r(o(aa))
+                  ]),
+                  _: 1
+                })
+              ]),
+              _: 1
+            })
+          ]),
+          x("div", xa, [
+            r(o(M), { onClick: Se }, {
+              default: c(() => [
+                r(o(f), null, {
+                  default: c(() => [
+                    r(o(la))
+                  ]),
+                  _: 1
+                })
+              ]),
+              _: 1
+            })
+          ]),
+          x("div", Ba, [
+            r(o(M), {
+              disabled: w.value === 1,
+              onClick: Me
+            }, {
+              default: c(() => [
+                r(o(f), null, {
+                  default: c(() => [
+                    w.value < 1 ? (i(), B(o(oa), { key: 0 })) : (i(), B(o(ta), { key: 1 }))
+                  ]),
+                  _: 1
+                })
+              ]),
+              _: 1
+            }, 8, ["disabled"])
+          ])
         ]),
-        g("div", Le, [
-          l(t(w), {
-            disabled: d.value === 1,
-            onClick: oe
-          }, {
-            default: r(() => [
-              l(t(k), null, {
-                default: r(() => [
-                  d.value < 1 ? (p(), y(t(we), { key: 0 })) : (p(), y(t(Ne), { key: 1 }))
+        default: c(() => [
+          x("div", fa, [
+            t.value?.kind === "image" ? (i(), B(o(he), {
+              key: 0,
+              src: t.value.src,
+              alt: t.value.alt || t.value.name || "",
+              title: t.value.name,
+              fit: n.imageFit,
+              "frame-border": 0,
+              style: me({ transform: Ce.value }),
+              onPointerdown: ce,
+              onPointerup: de
+            }, null, 8, ["src", "alt", "title", "fit", "style"])) : t.value?.kind === "video" ? (i(), u("video", {
+              key: 1,
+              ref_key: "currentVideoRef",
+              ref: k,
+              class: "nmorph-media-gallery__video",
+              src: t.value.src,
+              poster: t.value.poster || void 0,
+              controls: Z.value,
+              muted: be.value,
+              playsinline: Ie.value,
+              preload: Ne.value,
+              title: t.value.name,
+              onPointerdown: ce,
+              onPointerup: de,
+              onLoadeddata: ie,
+              onCanplay: ie,
+              onPlay: De,
+              onPause: Ke,
+              onEnded: qe,
+              onError: Oe
+            }, null, 40, pa)) : d("", !0),
+            xe.value ? (i(), u("button", {
+              key: 2,
+              class: "nmorph-media-gallery__play",
+              type: "button",
+              "aria-label": m.value ? `Pause ${E.value}` : `Play ${E.value}`,
+              onClick: P(Te, ["stop"])
+            }, [
+              r(o(f), {
+                size: "medium",
+                color: "var(--nmorph-contrast-text-color)"
+              }, {
+                default: c(() => [
+                  m.value ? (i(), B(o(Je), { key: 0 })) : (i(), B(o(_e), { key: 1 }))
                 ]),
                 _: 1
               })
-            ]),
-            _: 1
-          }, 8, ["disabled"])
-        ])
-      ]),
-      default: r(() => [
-        g("div", be, [
-          a.value?.kind === "image" ? (p(), y(t(he), {
-            key: 0,
-            src: a.value.src,
-            alt: a.value.alt || a.value.name || "",
-            title: a.value.name,
-            fit: o.imageFit,
-            "frame-border": 0,
-            style: ve({ transform: q.value }),
-            onPointerdown: A,
-            onPointerup: O
-          }, null, 8, ["src", "alt", "title", "fit", "style"])) : a.value?.kind === "video" ? (p(), T("video", {
-            key: 1,
-            ref_key: "currentVideoRef",
-            ref: v,
-            class: "nmorph-media-gallery__video",
-            src: a.value.src,
-            poster: a.value.poster || void 0,
-            controls: U.value,
-            muted: Z.value,
-            playsinline: G.value,
-            preload: W.value,
-            title: a.value.name,
-            onPointerdown: A,
-            onPointerup: O,
-            onPlay: ne,
-            onPause: ie,
-            onEnded: re,
-            onError: ue
-          }, null, 40, Pe)) : L("", !0),
-          a.value?.kind === "video" ? (p(), T("button", {
-            key: 2,
-            class: "nmorph-media-gallery__play",
-            type: "button",
-            "aria-label": u.value ? `Pause ${R.value}` : `Play ${R.value}`,
-            onClick: me(le, ["stop"])
-          }, [
-            l(t(k), {
-              size: "medium",
-              color: "var(--nmorph-contrast-text-color)"
-            }, {
-              default: r(() => [
-                u.value ? (p(), y(t(_e), { key: 0 })) : (p(), y(t(ye), { key: 1 }))
-              ]),
-              _: 1
-            })
-          ], 8, Ce)) : L("", !0)
-        ])
-      ]),
-      _: 1
-    }, 8, ["show", "z-index", "state-class", "show-navigation", "show-action-bar"])) : L("", !0);
+            ], 8, ha)) : d("", !0),
+            W.value ? (i(), u("span", ga, A(W.value), 1)) : d("", !0),
+            Be.value ? (i(), u("div", _a, [
+              j.value ? (i(), u("button", {
+                key: 0,
+                type: "button",
+                class: "nmorph-media-gallery__file-action",
+                "aria-label": `Fullscreen ${E.value}`,
+                onClick: P(Ae, ["stop"])
+              }, [
+                r(o(f), {
+                  size: "small",
+                  color: "var(--nmorph-contrast-text-color)"
+                }, {
+                  default: c(() => [
+                    r(o(ge))
+                  ]),
+                  _: 1
+                })
+              ], 8, ya)) : d("", !0),
+              D.value ? (i(), u("a", {
+                key: 1,
+                href: D.value,
+                download: R.value || void 0,
+                class: "nmorph-media-gallery__file-action",
+                "aria-label": `Download ${R.value || "media"}`,
+                onClick: P(Re, ["stop"])
+              }, [
+                r(o(f), {
+                  size: "small",
+                  color: "var(--nmorph-contrast-text-color)"
+                }, {
+                  default: c(() => [
+                    r(o(ye))
+                  ]),
+                  _: 1
+                })
+              ], 8, ka)) : d("", !0)
+            ])) : d("", !0),
+            Q.value ? (i(), u("span", wa, A(Q.value), 1)) : d("", !0)
+          ])
+        ]),
+        _: 1
+      }, 8, ["show", "z-index", "state-class", "show-navigation", "show-action-bar"])) : d("", !0)
+    ], 64));
   }
 });
 export {
-  Je as default
+  Wa as default
 };