@nmorph/nmorph-ui-kit 2.2.53 → 2.2.55

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

@@ -1,228 +1,320 @@
 import './NmorphVideoPreview.css';
-import s from "./NmorphVideoPreview.vue2.js";
-import { openBlock as r, createElementBlock as e, Fragment as _, createElementVNode as d, mergeProps as t, createCommentVNode as a, createVNode as n, withCtx as i, createBlock as l, toDisplayString as p, renderSlot as m, Teleport as v } from "vue";
-/* empty css                        */
-import h from "../../../_virtual/_plugin-vue_export-helper.js";
-const y = ["src", "poster", "controls", "muted", "playsinline", "preload"], w = ["aria-label"], f = {
+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 pe from "../../../assets/icons/video.svg.js";
+import ve from "../../others/nmorph-overlay/NmorphOverlay.vue.js";
+/* empty css                                             */
+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"
-}, k = {
+}, Pe = {
   key: 2,
   class: "nmorph-video-preview__error"
-}, N = {
+}, Ce = {
   key: 3,
   class: "nmorph-video-preview__meta"
-}, b = {
+}, Ne = {
   key: 0,
   class: "nmorph-video-preview__name"
-}, O = {
+}, Ae = {
   key: 1,
   class: "nmorph-video-preview__duration"
-}, C = {
+}, Oe = {
   key: 4,
   class: "nmorph-video-preview__actions"
-}, I = ["aria-label"], P = ["aria-label"], g = ["href", "aria-label"], H = ["href", "download", "aria-label"], R = { class: "nmorph-video-preview__portal" }, T = { class: "nmorph-video-preview__portal-content" }, A = ["src", "poster", "muted", "playsinline", "preload"];
-function z(c, S, E, o, V, x) {
-  return r(), e(
-    _,
-    null,
-    [
-      d(
-        "div",
-        t(o.rootAttrs, {
-          class: o.rootClass,
-          style: o.rootStyle
-        }),
-        [
-          !o.props.loading && !o.props.error ? (r(), e("video", {
+}, 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: {
+    src: {},
+    poster: { default: "" },
+    name: { default: "" },
+    width: { default: void 0 },
+    height: { default: void 0 },
+    durationMs: { default: void 0 },
+    surface: { default: "card" },
+    embedded: { type: Boolean, default: !1 },
+    showMeta: { type: Boolean, default: !0 },
+    compact: { type: Boolean, default: !1 },
+    controls: { type: Boolean, default: !0 },
+    muted: { type: Boolean, default: !1 },
+    playsinline: { type: Boolean, default: !0 },
+    preload: { default: "metadata" },
+    fit: { default: "cover" },
+    downloadHref: { default: "" },
+    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(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 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",
+          !e.showMeta && "no-meta",
+          e.compact && "compact",
+          e.fit,
+          e.loading && "loading",
+          e.error && "error",
+          i.value && "playing",
+          !E.value && "no-actions"
+        ]
+      })
+    ), T = r(
+      () => ue({
+        "--nmorph-video-preview-width": e.width,
+        "--nmorph-video-preview-height": e.height
+      })
+    ), 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, m.value = !1;
+      }
+    );
+    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) {
+        p("fullscreen");
+        try {
+          const d = o.requestFullscreen?.() || o.webkitRequestFullscreen?.();
+          if (d) {
+            await d;
+            return;
+          }
+          o.webkitEnterFullscreen?.();
+        } catch {
+        }
+      }
+    }, W = async () => {
+      if (!(!c.value || e.loading || e.error || !m.value)) {
+        if (i.value) {
+          c.value.pause();
+          return;
+        }
+        try {
+          await c.value.play();
+        } catch {
+          i.value = !1;
+        }
+      }
+    }, 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;
+    }, oe = (o) => {
+      i.value = !1, m.value = !1, p("error", o);
+    };
+    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(), l("video", {
+          key: 0,
+          ref_key: "videoRef",
+          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: 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: W
+        }, [
+          n(a(v), {
+            size: "medium",
+            color: A
+          }, {
+            default: u(() => [
+              i.value ? (t(), _(a(me), { key: 0 })) : (t(), _(a(fe), { key: 1 }))
+            ]),
+            _: 1
+          })
+        ], 8, ge)) : (t(), l("div", Be, [
+          e.loading ? (t(), _(a(v), {
             key: 0,
-            ref: "videoRef",
-            class: "nmorph-video-preview__media",
-            src: o.props.src,
-            poster: o.props.poster || void 0,
-            controls: o.props.controls,
-            muted: o.props.muted,
-            playsinline: o.props.playsinline,
-            preload: o.props.preload,
-            onPlay: o.playHandler,
-            onPause: o.pauseHandler,
-            onEnded: o.endedHandler,
-            onError: o.errorHandler
-          }, null, 40, y)) : a("v-if", !0),
-          !o.props.loading && !o.props.error ? (r(), e("button", {
+            size: "large"
+          }, {
+            default: u(() => [
+              n(a(he))
+            ]),
+            _: 1
+          })) : (t(), _(a(v), {
             key: 1,
-            class: "nmorph-video-preview__play",
-            type: "button",
-            "aria-label": o.playing ? `Pause ${o.props.name || "video"}` : `Play ${o.props.name || "video"}`,
-            onClick: o.togglePlayback
-          }, [
-            n(o.NmorphIcon, {
-              size: "medium",
-              color: o.CONTRAST_ICON_COLOR
-            }, {
-              default: i(() => [
-                o.playing ? (r(), l(o.NmorphIconPause, { key: 0 })) : (r(), l(o.NmorphIconPlay, { key: 1 }))
-              ]),
-              _: 1
-              /* STABLE */
-            })
-          ], 8, w)) : (r(), e("div", f, [
-            o.props.loading ? (r(), l(o.NmorphIcon, {
+            size: "large"
+          }, {
+            default: u(() => [
+              n(a(pe))
+            ]),
+            _: 1
+          })),
+          e.error && e.errorText ? (t(), l("span", Pe, N(e.errorText), 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),
+        E.value ? (t(), l("div", Oe, [
+          ie(o.$slots, "actions", {}, () => [
+            e.showPreviewAction && y.value ? (t(), l("button", {
               key: 0,
-              size: "large"
-            }, {
-              default: i(() => [
-                n(o.NmorphIconLoader)
-              ]),
-              _: 1
-              /* STABLE */
-            })) : (r(), l(o.NmorphIcon, {
+              type: "button",
+              class: "nmorph-video-preview__action-button nmorph-video-preview__action-button--preview",
+              "aria-label": `Preview ${e.name || "video"}`,
+              onClick: J
+            }, [
+              n(a(v), {
+                size: "small",
+                color: A
+              }, {
+                default: u(() => [
+                  n(a(_e))
+                ]),
+                _: 1
+              })
+            ], 8, Ee)) : s("", !0),
+            O.value ? (t(), l("button", {
               key: 1,
-              size: "large"
-            }, {
-              default: i(() => [
-                n(o.NmorphIconVideo)
-              ]),
-              _: 1
-              /* STABLE */
-            })),
-            o.props.error && o.props.errorText ? (r(), e(
-              "span",
-              k,
-              p(o.props.errorText),
-              1
-              /* TEXT */
-            )) : a("v-if", !0)
-          ])),
-          o.props.showMeta && (o.props.name || o.duration) ? (r(), e("div", N, [
-            o.props.name ? (r(), e(
-              "span",
-              b,
-              p(o.props.name),
-              1
-              /* TEXT */
-            )) : a("v-if", !0),
-            o.duration ? (r(), e(
-              "span",
-              O,
-              p(o.duration),
-              1
-              /* TEXT */
-            )) : a("v-if", !0)
-          ])) : a("v-if", !0),
-          o.hasActions ? (r(), e("div", C, [
-            m(c.$slots, "actions", {}, () => [
-              o.props.showPreviewAction && o.mediaReady ? (r(), e("button", {
-                key: 0,
-                type: "button",
-                class: "nmorph-video-preview__action-button nmorph-video-preview__action-button--preview",
-                "aria-label": `Preview ${o.props.name || "video"}`,
-                onClick: o.previewHandler
-              }, [
-                n(o.NmorphIcon, {
-                  size: "small",
-                  color: o.CONTRAST_ICON_COLOR
-                }, {
-                  default: i(() => [
-                    n(o.NmorphIconEye)
-                  ]),
-                  _: 1
-                  /* STABLE */
-                })
-              ], 8, I)) : a("v-if", !0),
-              o.props.showFullscreenAction && o.mediaReady ? (r(), e("button", {
-                key: 1,
-                type: "button",
-                class: "nmorph-video-preview__action-button nmorph-video-preview__action-button--fullscreen",
-                "aria-label": `Fullscreen ${o.props.name || "video"}`,
-                onClick: o.fullscreenHandler
-              }, [
-                n(o.NmorphIcon, {
-                  size: "small",
-                  color: o.CONTRAST_ICON_COLOR
-                }, {
-                  default: i(() => [
-                    n(o.NmorphIconFullScreen)
-                  ]),
-                  _: 1
-                  /* STABLE */
-                })
-              ], 8, P)) : a("v-if", !0),
-              o.props.showDefaultActions && o.props.src ? (r(), e("a", {
-                key: 2,
-                href: o.props.src,
-                target: "_blank",
-                rel: "noopener noreferrer",
-                class: "nmorph-video-preview__action-link",
-                "aria-label": `Open ${o.props.name || "video"}`,
-                onClick: o.openHandler
-              }, [
-                n(o.NmorphIcon, { size: "small" }, {
-                  default: i(() => [
-                    n(o.NmorphIconOpen)
-                  ]),
-                  _: 1
-                  /* STABLE */
-                })
-              ], 8, g)) : a("v-if", !0),
-              o.props.downloadHref ? (r(), e("a", {
-                key: 3,
-                href: o.props.downloadHref,
-                download: o.props.name,
-                class: "nmorph-video-preview__action-link",
-                "aria-label": `Download ${o.props.name || "video"}`,
-                onClick: o.downloadHandler
-              }, [
-                n(o.NmorphIcon, { size: "small" }, {
-                  default: i(() => [
-                    n(o.NmorphIconDownload)
-                  ]),
-                  _: 1
-                  /* STABLE */
-                })
-              ], 8, H)) : a("v-if", !0)
-            ])
-          ])) : a("v-if", !0)
-        ],
-        16
-        /* FULL_PROPS */
-      ),
-      o.previewOpen ? (r(), l(v, {
+              type: "button",
+              class: "nmorph-video-preview__action-button nmorph-video-preview__action-button--fullscreen",
+              "aria-label": `Fullscreen ${e.name || "video"}`,
+              onClick: Q
+            }, [
+              n(a(v), {
+                size: "small",
+                color: A
+              }, {
+                default: u(() => [
+                  n(a(we))
+                ]),
+                _: 1
+              })
+            ], 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: U
+            }, [
+              n(a(v), { size: "small" }, {
+                default: u(() => [
+                  n(a(ye))
+                ]),
+                _: 1
+              })
+            ], 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: G
+            }, [
+              n(a(v), { size: "small" }, {
+                default: u(() => [
+                  n(a(be))
+                ]),
+                _: 1
+              })
+            ], 8, He)) : s("", !0)
+          ])
+        ])) : s("", !0)
+      ], 16),
+      w.value ? (t(), _(de, {
         key: 0,
         to: "body"
       }, [
-        d("div", R, [
-          n(o.NmorphOverlay, {
-            show: o.previewOpen,
+        g("div", De, [
+          n(a(ve), {
+            show: w.value,
             "disabled-teleport": "",
-            onOnOutsideClick: o.closePreviewHandler,
-            onOnEscapeKeydown: o.closePreviewHandler
+            onOnOutsideClick: S,
+            onOnEscapeKeydown: S
           }, {
-            default: i(() => [
-              d("div", T, [
-                d("video", {
+            default: u(() => [
+              g("div", Ie, [
+                g("video", {
                   class: "nmorph-video-preview__portal-media",
-                  src: o.props.src,
-                  poster: o.props.poster || void 0,
+                  src: e.src,
+                  poster: e.poster || void 0,
                   controls: "",
                   autoplay: "",
-                  muted: o.props.muted,
-                  playsinline: o.props.playsinline,
-                  preload: o.props.preload
-                }, null, 8, A)
+                  muted: e.muted,
+                  playsinline: e.playsinline,
+                  preload: e.preload
+                }, null, 8, $e)
               ])
             ]),
             _: 1
-            /* STABLE */
           }, 8, ["show"])
         ])
-      ])) : a("v-if", !0)
-    ],
-    64
-    /* STABLE_FRAGMENT */
-  );
-}
-const j = /* @__PURE__ */ h(s, [["render", z], ["__file", "/builds/ketjo/nmorph/library/src/components/data/nmorph-video-preview/NmorphVideoPreview.vue"]]);
+      ])) : s("", !0)
+    ], 64));
+  }
+});
 export {
-  j as default
+  Xe as default
 };

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

@@ -0,0 +1,6 @@
+import './NmorphVideoPreview.css';
+import o from "./NmorphVideoPreview.vue.js";
+/* empty css                        */
+export {
+  o as default
+};