@nmorph/nmorph-ui-kit 2.2.55 → 2.2.57

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

@@ -1,320 +1,233 @@
 import './NmorphVideoPreview.css';
-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 = {
+import s from "./NmorphVideoPreview.vue2.js";
+import { openBlock as e, createElementBlock as r, Fragment as t, createElementVNode as d, mergeProps as _, createCommentVNode as a, createVNode as n, withCtx as i, createBlock as l, toDisplayString as c, 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 = {
   key: 2,
   class: "nmorph-video-preview__state"
-}, Pe = {
+}, k = {
   key: 2,
   class: "nmorph-video-preview__error"
-}, Ce = {
+}, b = {
   key: 3,
   class: "nmorph-video-preview__meta"
-}, Ne = {
+}, N = {
   key: 0,
   class: "nmorph-video-preview__name"
-}, Ae = {
+}, C = {
   key: 1,
   class: "nmorph-video-preview__duration"
-}, Oe = {
+}, O = {
   key: 4,
   class: "nmorph-video-preview__actions"
-}, 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), {
+}, I = ["aria-label"], P = ["aria-label"], g = ["href", "aria-label"], H = ["href", "download", "aria-label"], V = { class: "nmorph-video-preview__portal" }, L = { class: "nmorph-video-preview__portal-content" }, T = ["src", "poster", "muted", "playsinline", "preload"];
+function A(p, R, S, o, z, E) {
+  return e(), r(
+    t,
+    null,
+    [
+      d(
+        "div",
+        _(o.rootAttrs, {
+          class: o.rootClass,
+          style: o.rootStyle
+        }),
+        [
+          !o.props.loading && !o.props.error ? (e(), r("video", {
             key: 0,
-            size: "large"
-          }, {
-            default: u(() => [
-              n(a(he))
-            ]),
-            _: 1
-          })) : (t(), _(a(v), {
+            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.resolvedPreload,
+            onLoadedmetadata: o.updateVideoLoaded,
+            onDurationchange: o.updateVideoLoaded,
+            onProgress: o.updateVideoLoaded,
+            onCanplaythrough: o.updateVideoLoaded,
+            onSuspend: o.updateVideoLoaded,
+            onPlay: o.playHandler,
+            onPause: o.pauseHandler,
+            onEnded: o.endedHandler,
+            onError: o.errorHandler
+          }, null, 40, y)) : a("v-if", !0),
+          o.showPlaybackControl ? (e(), r("button", {
             key: 1,
-            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", {
+            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 ? (e(), l(o.NmorphIconPause, { key: 0 })) : (e(), l(o.NmorphIconPlay, { key: 1 }))
+              ]),
+              _: 1
+              /* STABLE */
+            })
+          ], 8, w)) : (e(), r("div", f, [
+            o.props.loading ? (e(), l(o.NmorphIcon, {
               key: 0,
-              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", {
+              size: "large"
+            }, {
+              default: i(() => [
+                n(o.NmorphIconLoader)
+              ]),
+              _: 1
+              /* STABLE */
+            })) : (e(), l(o.NmorphIcon, {
               key: 1,
-              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, {
+              size: "large"
+            }, {
+              default: i(() => [
+                n(o.NmorphIconVideo)
+              ]),
+              _: 1
+              /* STABLE */
+            })),
+            o.props.error && o.props.errorText ? (e(), r(
+              "span",
+              k,
+              c(o.props.errorText),
+              1
+              /* TEXT */
+            )) : a("v-if", !0)
+          ])),
+          o.props.showMeta && (o.props.name || o.duration) ? (e(), r("div", b, [
+            o.props.name ? (e(), r(
+              "span",
+              N,
+              c(o.props.name),
+              1
+              /* TEXT */
+            )) : a("v-if", !0),
+            o.duration ? (e(), r(
+              "span",
+              C,
+              c(o.duration),
+              1
+              /* TEXT */
+            )) : a("v-if", !0)
+          ])) : a("v-if", !0),
+          o.hasActions ? (e(), r("div", O, [
+            m(p.$slots, "actions", {}, () => [
+              o.props.showPreviewAction && o.mediaReady ? (e(), r("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.showFullscreenAction ? (e(), r("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 ? (e(), r("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 ? (e(), r("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 ? (e(), l(v, {
         key: 0,
         to: "body"
       }, [
-        g("div", De, [
-          n(a(ve), {
-            show: w.value,
+        d("div", V, [
+          n(o.NmorphOverlay, {
+            show: o.previewOpen,
             "disabled-teleport": "",
-            onOnOutsideClick: S,
-            onOnEscapeKeydown: S
+            onOnOutsideClick: o.closePreviewHandler,
+            onOnEscapeKeydown: o.closePreviewHandler
           }, {
-            default: u(() => [
-              g("div", Ie, [
-                g("video", {
+            default: i(() => [
+              d("div", L, [
+                d("video", {
                   class: "nmorph-video-preview__portal-media",
-                  src: e.src,
-                  poster: e.poster || void 0,
+                  src: o.props.src,
+                  poster: o.props.poster || void 0,
                   controls: "",
                   autoplay: "",
-                  muted: e.muted,
-                  playsinline: e.playsinline,
-                  preload: e.preload
-                }, null, 8, $e)
+                  muted: o.props.muted,
+                  playsinline: o.props.playsinline,
+                  preload: o.props.preload
+                }, null, 8, T)
               ])
             ]),
             _: 1
+            /* STABLE */
           }, 8, ["show"])
         ])
-      ])) : s("", !0)
-    ], 64));
-  }
-});
+      ])) : a("v-if", !0)
+    ],
+    64
+    /* STABLE_FRAGMENT */
+  );
+}
+const j = /* @__PURE__ */ h(s, [["render", A], ["__file", "/builds/ketjo/nmorph/library/src/components/data/nmorph-video-preview/NmorphVideoPreview.vue"]]);
 export {
-  Xe as default
+  j as default
 };