@nmorph/nmorph-ui-kit 2.2.52 → 2.2.54

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

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