@nmorph/nmorph-ui-kit 2.2.54 → 2.2.55

package/dist/components/data/nmorph-video-preview/NmorphVideoPreview.vue.js

@@ -1,38 +1,38 @@
 import './NmorphVideoPreview.css';
-import { defineComponent as Y, useAttrs as Z, useSlots as ee, ref as w, computed as l, watch as oe, openBlock as t, createElementBlock as r, Fragment as te, createElementVNode as y, mergeProps as ae, createCommentVNode as s, createVNode as n, unref as a, withCtx as d, createBlock as m, toDisplayString as g, renderSlot as re, Teleport as le } from "vue";
-import { useModifiers as ne } from "../../../utils/create-modifiers.js";
-import { createCssSizeVariables as se } from "../../../utils/common.js";
-import u from "../../basic/nmorph-icon/NmorphIcon.vue.js";
+import { defineComponent as te, useAttrs as ae, useSlots as re, ref as k, computed as r, watch as le, openBlock as t, createElementBlock as l, Fragment as ne, createElementVNode as g, mergeProps as se, createCommentVNode as s, createVNode as n, unref as a, withCtx as u, createBlock as _, toDisplayString as N, renderSlot as ie, Teleport as de } from "vue";
+import { useModifiers as ce } from "../../../utils/create-modifiers.js";
+import { createCssSizeVariables as ue } from "../../../utils/common.js";
+import v from "../../basic/nmorph-icon/NmorphIcon.vue.js";
 /* empty css                                      */
-import ie from "../../../assets/icons/video.svg.js";
-import de from "../../others/nmorph-overlay/NmorphOverlay.vue.js";
+import pe from "../../../assets/icons/video.svg.js";
+import ve from "../../others/nmorph-overlay/NmorphOverlay.vue.js";
 /* empty css                                             */
-import ce from "../../../assets/icons/pause.svg.js";
-import ue from "../../../assets/icons/play.svg.js";
-import pe from "../../../assets/icons/loading.svg.js";
-import ve from "../../../assets/icons/eye.svg.js";
-import me from "../../../assets/icons/full-screen.svg.js";
-import fe from "../../../assets/icons/open.svg.js";
-import he from "../../../assets/icons/download.svg.js";
-const _e = ["src", "poster", "controls", "muted", "playsinline", "preload"], we = ["aria-label"], ye = {
+import me from "../../../assets/icons/pause.svg.js";
+import fe from "../../../assets/icons/play.svg.js";
+import he from "../../../assets/icons/loading.svg.js";
+import _e from "../../../assets/icons/eye.svg.js";
+import we from "../../../assets/icons/full-screen.svg.js";
+import ye from "../../../assets/icons/open.svg.js";
+import be from "../../../assets/icons/download.svg.js";
+const ke = ["src", "poster", "controls", "muted", "playsinline", "preload"], ge = ["aria-label"], Be = {
   key: 2,
   class: "nmorph-video-preview__state"
-}, be = {
+}, Pe = {
   key: 2,
   class: "nmorph-video-preview__error"
-}, ke = {
+}, Ce = {
   key: 3,
   class: "nmorph-video-preview__meta"
-}, ge = {
+}, Ne = {
   key: 0,
   class: "nmorph-video-preview__name"
-}, Be = {
+}, Ae = {
   key: 1,
   class: "nmorph-video-preview__duration"
-}, Pe = {
+}, Oe = {
   key: 4,
   class: "nmorph-video-preview__actions"
-}, Ae = ["aria-label"], Ce = ["aria-label"], He = ["href", "aria-label"], Ne = ["href", "download", "aria-label"], Oe = { class: "nmorph-video-preview__portal" }, $e = { class: "nmorph-video-preview__portal-content" }, Se = ["src", "poster", "muted", "playsinline", "preload"], B = "var(--nmorph-contrast-text-color)", Je = /* @__PURE__ */ Y({
+}, Ee = ["aria-label"], Se = ["aria-label"], Fe = ["href", "aria-label"], He = ["href", "download", "aria-label"], De = { class: "nmorph-video-preview__portal" }, Ie = { class: "nmorph-video-preview__portal-content" }, $e = ["src", "poster", "muted", "playsinline", "preload"], A = "var(--nmorph-contrast-text-color)", F = 0.25, Xe = /* @__PURE__ */ te({
   inheritAttrs: !1,
   __name: "NmorphVideoPreview",
   props: {
@@ -62,13 +62,15 @@ const _e = ["src", "poster", "controls", "muted", "playsinline", "preload"], we
     previewMode: { default: "internal" }
   },
   emits: ["play", "pause", "open", "preview", "fullscreen", "download", "error"],
-  setup(N, { expose: O, emit: $ }) {
-    const e = N, c = $, b = Z(), S = ee(), p = w(null), f = w(!1), i = w(!1), h = w(!1), E = (o) => {
+  setup(H, { expose: D, emit: I }) {
+    const e = H, p = I, B = ae(), $ = re(), c = k(null), w = k(!1), i = k(!1), m = k(!1), x = (o) => {
       if (!o || o < 0) return "";
-      const v = Math.round(o / 1e3), W = Math.floor(v / 60), X = v % 60;
-      return `${W}:${X.toString().padStart(2, "0")}`;
-    }, k = l(() => E(e.durationMs)), _ = l(() => !!e.src && !e.loading && !e.error), F = l(() => e.showPlaybackButton && _.value && h.value), P = l(() => e.showFullscreenAction && _.value && !e.controls), I = l(() => _.value && (e.showPreviewAction || P.value)), z = l(() => e.showDefaultActions && (e.src || e.downloadHref)), A = l(() => !!S.actions || I.value || z.value), D = l(
-      () => ne({
+      const d = Math.round(o / 1e3), h = Math.floor(d / 60), C = d % 60;
+      return `${h}:${C.toString().padStart(2, "0")}`;
+    }, P = r(() => x(e.durationMs)), y = r(() => !!e.src && !e.loading && !e.error), M = r(() => e.showPlaybackButton && y.value && m.value), V = r(
+      () => e.showPlaybackButton && e.preload === "metadata" ? "auto" : e.preload
+    ), O = r(() => e.showFullscreenAction && y.value && !e.controls), z = r(() => y.value && (e.showPreviewAction || O.value)), R = r(() => e.showDefaultActions && (e.src || e.downloadHref)), E = r(() => !!$.actions || z.value || R.value), L = r(
+      () => ce({
         "nmorph-video-preview": [
           e.surface,
           e.embedded && "embedded",
@@ -78,209 +80,223 @@ const _e = ["src", "poster", "controls", "muted", "playsinline", "preload"], we
           e.loading && "loading",
           e.error && "error",
           i.value && "playing",
-          !A.value && "no-actions"
+          !E.value && "no-actions"
         ]
       })
-    ), M = l(
-      () => se({
+    ), T = r(
+      () => ue({
         "--nmorph-video-preview-width": e.width,
         "--nmorph-video-preview-height": e.height
       })
-    ), x = l(() => Object.fromEntries(Object.entries(b).filter(([o]) => o !== "class" && o !== "style"))), R = l(() => [D.value, b.class]), T = l(() => [M.value, b.style]);
-    oe(
+    ), q = r(() => Object.fromEntries(Object.entries(B).filter(([o]) => o !== "class" && o !== "style"))), j = r(() => [L.value, B.class]), K = r(() => [T.value, B.style]);
+    le(
       () => [e.src, e.loading, e.error],
       () => {
-        i.value = !1, h.value = !1;
+        i.value = !1, m.value = !1;
       }
     );
-    const V = () => c("open"), L = () => c("download"), q = () => {
-      e.previewMode === "internal" && (f.value = !0), c("preview");
-    }, C = () => {
-      f.value = !1;
-    }, j = async () => {
-      const o = p.value;
+    const U = () => p("open"), G = () => p("download"), J = () => {
+      e.previewMode === "internal" && (w.value = !0), p("preview");
+    }, S = () => {
+      w.value = !1;
+    }, Q = async () => {
+      const o = c.value;
       if (o) {
-        c("fullscreen");
+        p("fullscreen");
         try {
-          const v = o.requestFullscreen?.() || o.webkitRequestFullscreen?.();
-          if (v) {
-            await v;
+          const d = o.requestFullscreen?.() || o.webkitRequestFullscreen?.();
+          if (d) {
+            await d;
             return;
           }
           o.webkitEnterFullscreen?.();
         } catch {
         }
       }
-    }, K = async () => {
-      if (!(!p.value || e.loading || e.error)) {
+    }, W = async () => {
+      if (!(!c.value || e.loading || e.error || !m.value)) {
         if (i.value) {
-          p.value.pause();
+          c.value.pause();
           return;
         }
         try {
-          await p.value.play();
+          await c.value.play();
         } catch {
           i.value = !1;
         }
       }
-    }, H = () => {
-      h.value = !0;
-    }, G = (o) => {
-      i.value = !0, c("play", o);
-    }, J = (o) => {
-      i.value = !1, c("pause", o);
-    }, Q = () => {
+    }, X = (o) => {
+      const d = o.duration;
+      if (!Number.isFinite(d) || d <= 0) return !1;
+      const h = o.buffered, C = Math.max(0, d - F);
+      for (let b = 0; b < h.length; b += 1)
+        try {
+          if (h.start(b) <= F && h.end(b) >= C) return !0;
+        } catch {
+          return !1;
+        }
+      return !1;
+    }, f = () => {
+      m.value = c.value ? X(c.value) : !1;
+    }, Y = (o) => {
+      i.value = !0, p("play", o);
+    }, Z = (o) => {
+      i.value = !1, p("pause", o);
+    }, ee = () => {
       i.value = !1;
-    }, U = (o) => {
-      i.value = !1, h.value = !1, c("error", o);
+    }, oe = (o) => {
+      i.value = !1, m.value = !1, p("error", o);
     };
-    return O({ videoRef: p }), (o, v) => (t(), r(te, null, [
-      y("div", ae(x.value, {
-        class: R.value,
-        style: T.value
+    return D({ videoRef: c }), (o, d) => (t(), l(ne, null, [
+      g("div", se(q.value, {
+        class: j.value,
+        style: K.value
       }), [
-        !e.loading && !e.error ? (t(), r("video", {
+        !e.loading && !e.error ? (t(), l("video", {
           key: 0,
           ref_key: "videoRef",
-          ref: p,
+          ref: c,
           class: "nmorph-video-preview__media",
           src: e.src,
           poster: e.poster || void 0,
           controls: e.controls,
           muted: e.muted,
           playsinline: e.playsinline,
-          preload: e.preload,
-          onLoadeddata: H,
-          onCanplay: H,
-          onPlay: G,
-          onPause: J,
-          onEnded: Q,
-          onError: U
-        }, null, 40, _e)) : s("", !0),
-        F.value ? (t(), r("button", {
+          preload: V.value,
+          onLoadedmetadata: f,
+          onDurationchange: f,
+          onProgress: f,
+          onCanplaythrough: f,
+          onSuspend: f,
+          onPlay: Y,
+          onPause: Z,
+          onEnded: ee,
+          onError: oe
+        }, null, 40, ke)) : s("", !0),
+        M.value ? (t(), l("button", {
           key: 1,
           class: "nmorph-video-preview__play",
           type: "button",
           "aria-label": i.value ? `Pause ${e.name || "video"}` : `Play ${e.name || "video"}`,
-          onClick: K
+          onClick: W
         }, [
-          n(a(u), {
+          n(a(v), {
             size: "medium",
-            color: B
+            color: A
           }, {
-            default: d(() => [
-              i.value ? (t(), m(a(ce), { key: 0 })) : (t(), m(a(ue), { key: 1 }))
+            default: u(() => [
+              i.value ? (t(), _(a(me), { key: 0 })) : (t(), _(a(fe), { key: 1 }))
             ]),
             _: 1
           })
-        ], 8, we)) : (t(), r("div", ye, [
-          e.loading ? (t(), m(a(u), {
+        ], 8, ge)) : (t(), l("div", Be, [
+          e.loading ? (t(), _(a(v), {
             key: 0,
             size: "large"
           }, {
-            default: d(() => [
-              n(a(pe))
+            default: u(() => [
+              n(a(he))
             ]),
             _: 1
-          })) : (t(), m(a(u), {
+          })) : (t(), _(a(v), {
             key: 1,
             size: "large"
           }, {
-            default: d(() => [
-              n(a(ie))
+            default: u(() => [
+              n(a(pe))
             ]),
             _: 1
           })),
-          e.error && e.errorText ? (t(), r("span", be, g(e.errorText), 1)) : s("", !0)
+          e.error && e.errorText ? (t(), l("span", Pe, N(e.errorText), 1)) : s("", !0)
         ])),
-        e.showMeta && (e.name || k.value) ? (t(), r("div", ke, [
-          e.name ? (t(), r("span", ge, g(e.name), 1)) : s("", !0),
-          k.value ? (t(), r("span", Be, g(k.value), 1)) : s("", !0)
+        e.showMeta && (e.name || P.value) ? (t(), l("div", Ce, [
+          e.name ? (t(), l("span", Ne, N(e.name), 1)) : s("", !0),
+          P.value ? (t(), l("span", Ae, N(P.value), 1)) : s("", !0)
         ])) : s("", !0),
-        A.value ? (t(), r("div", Pe, [
-          re(o.$slots, "actions", {}, () => [
-            e.showPreviewAction && _.value ? (t(), r("button", {
+        E.value ? (t(), l("div", Oe, [
+          ie(o.$slots, "actions", {}, () => [
+            e.showPreviewAction && y.value ? (t(), l("button", {
               key: 0,
               type: "button",
               class: "nmorph-video-preview__action-button nmorph-video-preview__action-button--preview",
               "aria-label": `Preview ${e.name || "video"}`,
-              onClick: q
+              onClick: J
             }, [
-              n(a(u), {
+              n(a(v), {
                 size: "small",
-                color: B
+                color: A
               }, {
-                default: d(() => [
-                  n(a(ve))
+                default: u(() => [
+                  n(a(_e))
                 ]),
                 _: 1
               })
-            ], 8, Ae)) : s("", !0),
-            P.value ? (t(), r("button", {
+            ], 8, Ee)) : s("", !0),
+            O.value ? (t(), l("button", {
               key: 1,
               type: "button",
               class: "nmorph-video-preview__action-button nmorph-video-preview__action-button--fullscreen",
               "aria-label": `Fullscreen ${e.name || "video"}`,
-              onClick: j
+              onClick: Q
             }, [
-              n(a(u), {
+              n(a(v), {
                 size: "small",
-                color: B
+                color: A
               }, {
-                default: d(() => [
-                  n(a(me))
+                default: u(() => [
+                  n(a(we))
                 ]),
                 _: 1
               })
-            ], 8, Ce)) : s("", !0),
-            e.showDefaultActions && e.src ? (t(), r("a", {
+            ], 8, Se)) : s("", !0),
+            e.showDefaultActions && e.src ? (t(), l("a", {
               key: 2,
               href: e.src,
               target: "_blank",
               rel: "noopener noreferrer",
               class: "nmorph-video-preview__action-link",
               "aria-label": `Open ${e.name || "video"}`,
-              onClick: V
+              onClick: U
             }, [
-              n(a(u), { size: "small" }, {
-                default: d(() => [
-                  n(a(fe))
+              n(a(v), { size: "small" }, {
+                default: u(() => [
+                  n(a(ye))
                 ]),
                 _: 1
               })
-            ], 8, He)) : s("", !0),
-            e.downloadHref ? (t(), r("a", {
+            ], 8, Fe)) : s("", !0),
+            e.downloadHref ? (t(), l("a", {
               key: 3,
               href: e.downloadHref,
               download: e.name,
               class: "nmorph-video-preview__action-link",
               "aria-label": `Download ${e.name || "video"}`,
-              onClick: L
+              onClick: G
             }, [
-              n(a(u), { size: "small" }, {
-                default: d(() => [
-                  n(a(he))
+              n(a(v), { size: "small" }, {
+                default: u(() => [
+                  n(a(be))
                 ]),
                 _: 1
               })
-            ], 8, Ne)) : s("", !0)
+            ], 8, He)) : s("", !0)
           ])
         ])) : s("", !0)
       ], 16),
-      f.value ? (t(), m(le, {
+      w.value ? (t(), _(de, {
         key: 0,
         to: "body"
       }, [
-        y("div", Oe, [
-          n(a(de), {
-            show: f.value,
+        g("div", De, [
+          n(a(ve), {
+            show: w.value,
             "disabled-teleport": "",
-            onOnOutsideClick: C,
-            onOnEscapeKeydown: C
+            onOnOutsideClick: S,
+            onOnEscapeKeydown: S
           }, {
-            default: d(() => [
-              y("div", $e, [
-                y("video", {
+            default: u(() => [
+              g("div", Ie, [
+                g("video", {
                   class: "nmorph-video-preview__portal-media",
                   src: e.src,
                   poster: e.poster || void 0,
@@ -289,7 +305,7 @@ const _e = ["src", "poster", "controls", "muted", "playsinline", "preload"], we
                   muted: e.muted,
                   playsinline: e.playsinline,
                   preload: e.preload
-                }, null, 8, Se)
+                }, null, 8, $e)
               ])
             ]),
             _: 1
@@ -300,5 +316,5 @@ const _e = ["src", "poster", "controls", "muted", "playsinline", "preload"], we
   }
 });
 export {
-  Je as default
+  Xe as default
 };