@seresweb/website-component 2.2.0 → 2.2.2

package/dist/es/video.mjs

@@ -1,7 +1,7 @@
-import { defineComponent as L, ref as d, watch as A, nextTick as E, onMounted as O, onBeforeUnmount as M, createElementBlock as h, openBlock as r, normalizeClass as f, createElementVNode as y, createCommentVNode as _, renderSlot as V, onUnmounted as U, Fragment as S, createBlock as $, mergeProps as T, normalizeStyle as H, unref as N, toDisplayString as X, Teleport as F, createVNode as Y } from "vue";
-import { P as u } from "../_vars-BV4QQF-p.js";
+import { defineComponent as S, ref as d, watch as F, nextTick as N, onMounted as L, onBeforeUnmount as X, createElementBlock as C, openBlock as c, normalizeClass as y, createElementVNode as i, createCommentVNode as R, renderSlot as b, onUnmounted as E, createBlock as x, mergeProps as V, Fragment as O, normalizeStyle as U, unref as W, toDisplayString as H, Teleport as Y, createVNode as z, withCtx as $ } from "vue";
+import { P as f } from "../_vars-BV4QQF-p.js";
 import { ScLayzImage as j } from "./layz-image.mjs";
-const D = ["controls", "poster", "src"], z = /* @__PURE__ */ L({
+const D = ["controls", "poster", "src"], I = /* @__PURE__ */ S({
   __name: "video-wrapper",
   props: {
     class: {},
@@ -16,83 +16,83 @@ const D = ["controls", "poster", "src"], z = /* @__PURE__ */ L({
     urlSmall: {}
   },
   emits: ["paused"],
-  setup(m, { expose: e, emit: C }) {
-    const l = m, k = C, g = /xiaomi|miui/i, x = `${u}-player-wrapper`, w = `${u}-player-is-fullscreen`, B = `${u}-player-close-btn`, b = `${u}-player-icon`, t = d(), s = d(!0), p = d(g.test(navigator.userAgent) ? void 0 : l.url);
-    let n = null;
-    const o = (a) => {
-      var c, i;
-      a.target !== t.value && ((c = t.value) == null || c.pause(), s.value = !!((i = t.value) != null && i.paused), k("paused"));
-    }, v = (a) => {
-      const c = a[0], i = t.value;
-      !i || !l.playable || (c.isIntersecting && l.autoPlay && i.paused ? (i.play().catch(console.warn), s.value = !1) : !c.isIntersecting && !i.paused && (i.pause(), s.value = !0));
-    }, P = () => {
-      l.autoPlay && l.playable && t.value && (n = new IntersectionObserver(v, {
+  setup(v, { expose: w, emit: e }) {
+    const t = v, o = e, P = /xiaomi|miui/i, T = `${f}-player-wrapper`, g = `${f}-player-is-fullscreen`, m = `${f}-player-close-btn`, _ = `${f}-player-icon`, a = d(), n = d(!0), k = d(P.test(navigator.userAgent) ? void 0 : t.url);
+    let r = null;
+    const s = (p) => {
+      var h, B;
+      p.target !== a.value && ((h = a.value) == null || h.pause(), n.value = !!((B = a.value) != null && B.paused), o("paused"));
+    }, l = (p) => {
+      const h = p[0], B = a.value;
+      !B || !t.playable || (h.isIntersecting && t.autoPlay && B.paused ? (B.play().catch(console.warn), n.value = !1) : !h.isIntersecting && !B.paused && (B.pause(), n.value = !0));
+    }, u = () => {
+      t.autoPlay && t.playable && a.value && (r = new IntersectionObserver(l, {
         threshold: 0.25
         // 可根据需求调整可见区域百分比
-      }), n.observe(t.value));
-    }, I = () => {
-      n == null || n.disconnect(), n = null;
+      }), r.observe(a.value));
+    }, A = () => {
+      r == null || r.disconnect(), r = null;
     };
-    return A(
-      () => l.playable,
+    return F(
+      () => t.playable,
       () => {
-        I(), E(() => P());
+        A(), N(() => u());
       }
-    ), e({
+    ), w({
       play() {
-        t.value.play(), s.value = t.value.paused;
+        a.value.play(), n.value = a.value.paused;
       },
       pause() {
-        t.value.pause(), s.value = t.value.paused;
+        a.value.pause(), n.value = a.value.paused;
       }
-    }), O(() => {
-      g.test(navigator.userAgent) && fetch(l.url).then((a) => {
-        if (!a.ok)
-          throw new Error(`HTTP error! status: ${a.status}`);
-        return a.blob();
-      }).then((a) => {
-        p.value = URL.createObjectURL(a);
-      }).catch((a) => {
-        console.error("获取视频失败：", a);
-      }), P();
-    }), M(() => {
-      I();
-    }), (a, c) => (r(), h(
+    }), L(() => {
+      P.test(navigator.userAgent) && fetch(t.url).then((p) => {
+        if (!p.ok)
+          throw new Error(`HTTP error! status: ${p.status}`);
+        return p.blob();
+      }).then((p) => {
+        k.value = URL.createObjectURL(p);
+      }).catch((p) => {
+        console.error("获取视频失败：", p);
+      }), u();
+    }), X(() => {
+      A();
+    }), (p, h) => (c(), C(
       "div",
       {
-        class: f([x, l.class, !s.value && !l.autoPlay && w])
+        class: y([T, t.class, !n.value && !t.autoPlay && g])
       },
       [
-        y("video", {
+        i("video", {
           ref_key: "videoRef",
-          ref: t,
+          ref: a,
           muted: "",
           loop: "",
           playsinline: "",
           "webkit-playsinline": "",
           "x5-video-player-type": "h5",
-          controls: !s.value && !l.autoPlay,
-          poster: l.poster,
-          src: p.value
+          controls: !n.value && !t.autoPlay,
+          poster: t.poster,
+          src: k.value
         }, null, 8, D),
-        !s.value && !l.autoPlay ? (r(), h(
+        !n.value && !t.autoPlay ? (c(), C(
           "button",
           {
             key: 0,
-            class: f([B, l.playerButtonClass]),
-            onClick: o
+            class: y([m, t.playerButtonClass]),
+            onClick: s
           },
           [
-            V(a.$slots, "close", {}, () => [
-              (r(), h("svg", {
-                class: f(b),
+            b(p.$slots, "close", {}, () => [
+              (c(), C("svg", {
+                class: y(_),
                 viewBox: "0 0 1121 1024",
                 version: "1.1",
                 xmlns: "http://www.w3.org/2000/svg",
                 width: "200",
                 height: "200"
-              }, [...c[0] || (c[0] = [
-                y(
+              }, [...h[0] || (h[0] = [
+                i(
                   "path",
                   {
                     d: "M1040.725333 49.005714l-965.485714 965.436953-48.420571-48.469334L992.256 0.487619l48.469333 48.518095z",
@@ -102,7 +102,7 @@ const D = ["controls", "poster", "src"], z = /* @__PURE__ */ L({
                   -1
                   /* CACHED */
                 ),
-                y(
+                i(
                   "path",
                   {
                     d: "M1040.725333 1014.442667l-965.485714-965.485715 48.518095-48.420571L1089.194667 965.973333l-48.469334 48.469334z",
@@ -117,14 +117,162 @@ const D = ["controls", "poster", "src"], z = /* @__PURE__ */ L({
           ],
           2
           /* CLASS */
-        )) : _("v-if", !0)
+        )) : R("v-if", !0)
       ],
       2
       /* CLASS */
     ));
   }
-}), R = /* @__PURE__ */ L({
-  __name: "video",
+}), G = /* @__PURE__ */ S({
+  __name: "video-normal",
+  props: {
+    class: {},
+    style: {},
+    playerButtonClass: {},
+    playerButtonText: { default: "PLAY" },
+    poster: { default: "" },
+    url: {},
+    autoPlay: { type: Boolean, default: !0 },
+    playable: { type: Boolean, default: !0 },
+    multiple: { type: Boolean },
+    urlSmall: {}
+  },
+  setup(v, { expose: w }) {
+    const e = v, t = `${f}-player-wrapper`, o = `${f}-player-poster`, P = `${f}-player-btn`, T = `${f}-player-btn-text`, g = `${f}-player-icon`, m = d(), _ = d(), a = d(), n = d(!1), k = (l) => {
+      l.stopPropagation(), e.playable && (n.value = !0, setTimeout(() => {
+        var u;
+        (u = a.value) == null || u.play();
+      }, 0));
+    }, r = () => {
+      n.value = !1;
+    };
+    let s = null;
+    return L(() => {
+      !e.autoPlay && m.value && (s = new IntersectionObserver(
+        ([l]) => {
+          l.isIntersecting && (n.value = !0);
+        },
+        { threshold: 0.1 }
+      ), s.observe(m.value));
+    }), E(() => {
+      s == null || s.disconnect();
+    }), w({
+      play() {
+        var l;
+        e.autoPlay ? (l = _.value) == null || l.play() : k(new MouseEvent("click"));
+      },
+      pause() {
+        var l, u;
+        (l = _.value) == null || l.pause(), (u = a.value) == null || u.pause();
+      }
+    }), (l, u) => e.autoPlay ? (c(), x(I, V({ key: 0 }, e, {
+      url: e.url,
+      ref_key: "videoRef",
+      ref: _
+    }), null, 16, ["url"])) : (c(), C(
+      O,
+      { key: 1 },
+      [
+        i(
+          "div",
+          {
+            class: y([t, e.class]),
+            style: U(e.style)
+          },
+          [
+            e.poster ? (c(), x(W(j), {
+              key: 0,
+              class: y(o),
+              src: e.poster,
+              alt: "AITO"
+            }, null, 8, ["src"])) : R("v-if", !0),
+            i(
+              "button",
+              {
+                ref_key: "btnRef",
+                ref: m,
+                class: y([P, e.playerButtonClass]),
+                onClick: k
+              },
+              [
+                b(l.$slots, "play", {}, () => [
+                  (c(), C("svg", {
+                    class: y(g),
+                    viewBox: "0 0 1024 1024",
+                    version: "1.1",
+                    xmlns: "http://www.w3.org/2000/svg",
+                    width: "200",
+                    height: "200"
+                  }, [...u[0] || (u[0] = [
+                    i(
+                      "path",
+                      {
+                        d: "M671.744 495.616c20.48 12.288 20.48 36.864 0 49.152l-217.088 126.976c-20.48 12.288-45.056-4.096-45.056-24.576V393.216c0-20.48 24.576-36.864 45.056-24.576l217.088 126.976z",
+                        fill: "#ffffff"
+                      },
+                      null,
+                      -1
+                      /* CACHED */
+                    ),
+                    i(
+                      "path",
+                      {
+                        d: "M512 1011.712C237.568 1011.712 12.288 786.432 12.288 512 12.288 237.568 237.568 12.288 512 12.288c274.432 0 499.712 225.28 499.712 499.712 0 274.432-225.28 499.712-499.712 499.712z m0-958.464c-253.952 0-458.752 204.8-458.752 458.752s204.8 458.752 458.752 458.752 458.752-204.8 458.752-458.752-204.8-458.752-458.752-458.752z",
+                        fill: "#ffffff"
+                      },
+                      null,
+                      -1
+                      /* CACHED */
+                    )
+                  ])])),
+                  i(
+                    "span",
+                    {
+                      class: y(T)
+                    },
+                    H(e.playerButtonText),
+                    1
+                    /* TEXT */
+                  )
+                ])
+              ],
+              2
+              /* CLASS */
+            )
+          ],
+          6
+          /* CLASS, STYLE */
+        ),
+        n.value ? (c(), x(Y, {
+          key: 0,
+          to: "body"
+        }, [
+          z(
+            I,
+            V(e, {
+              autoPlay: !1,
+              ref_key: "modalVideoRef",
+              ref: a,
+              onPaused: r
+            }),
+            {
+              close: $(() => [
+                b(l.$slots, "close")
+              ]),
+              _: 3
+              /* FORWARDED */
+            },
+            16
+            /* FULL_PROPS */
+          )
+        ])) : R("v-if", !0)
+      ],
+      64
+      /* STABLE_FRAGMENT */
+    ));
+  }
+}), q = /* @__PURE__ */ S({
+  __name: "video-multiple",
   props: {
     class: {},
     style: {},
@@ -137,137 +285,200 @@ const D = ["controls", "poster", "src"], z = /* @__PURE__ */ L({
     multiple: { type: Boolean },
     urlSmall: {}
   },
-  setup(m) {
-    const e = m, C = `${u}-player-wrapper`, l = `${u}-player-poster`, k = `${u}-player-btn`, g = `${u}-player-btn-text`, x = `${u}-player-icon`, w = d(), B = d(), b = d(), t = (o) => {
-      var v, P;
-      o.stopPropagation(), (v = b.value) == null || v.pause(), (P = B.value) == null || P.play();
-    }, s = () => {
-      var o;
-      (o = b.value) == null || o.play();
+  setup(v, { expose: w }) {
+    const e = v, t = `${f}-player-wrapper`, o = `${f}-player-btn`, P = `${f}-player-btn-text`, T = `${f}-player-icon`, g = d(), m = d(), _ = d(), a = d(!1), n = (s) => {
+      var l;
+      s.stopPropagation(), e.playable && ((l = m.value) == null || l.pause(), a.value = !0, setTimeout(() => {
+        var u;
+        (u = _.value) == null || u.play();
+      }, 0));
+    }, k = () => {
+      var s;
+      a.value = !1, (s = m.value) == null || s.play();
     };
-    let p = null;
-    const n = d(!1);
-    return O(() => {
-      p = new IntersectionObserver(
-        ([o]) => {
-          o.isIntersecting && (n.value = !0);
+    let r = null;
+    return L(() => {
+      g.value && (r = new IntersectionObserver(
+        ([s]) => {
+          s.isIntersecting && (a.value = !0);
         },
         { threshold: 0.1 }
-      ), w.value && p.observe(w.value);
-    }), U(() => {
-      p == null || p.disconnect();
-    }), (o, v) => (r(), h(
-      S,
+      ), r.observe(g.value));
+    }), E(() => {
+      r == null || r.disconnect();
+    }), w({
+      play() {
+        n(new MouseEvent("click"));
+      },
+      pause() {
+        var s, l;
+        (s = m.value) == null || s.pause(), (l = _.value) == null || l.pause();
+      }
+    }), (s, l) => (c(), C(
+      O,
       null,
       [
-        e.autoPlay || e.multiple ? (r(), $(z, T({ key: 0 }, e, {
-          url: e.multiple && e.urlSmall || e.url,
-          ref_key: "autoPlayRef",
-          ref: b
-        }), null, 16, ["url"])) : _("v-if", !0),
-        !e.autoPlay || e.multiple ? (r(), h(
-          S,
-          { key: 1 },
+        R(" Background: Small Video AutoPlay "),
+        z(I, V(e, {
+          url: e.urlSmall || e.url,
+          autoPlay: !0,
+          ref_key: "smallVideoRef",
+          ref: m
+        }), null, 16, ["url"]),
+        R(" Foreground: Button -> Modal Video (Large) "),
+        i(
+          "div",
+          {
+            class: y([t, e.class, "is-multiple"]),
+            style: U(e.style)
+          },
           [
-            y(
-              "div",
+            i(
+              "button",
               {
-                class: f([C, e.class, { "is-multiple": e.multiple }]),
-                style: H(e.style)
+                ref_key: "btnRef",
+                ref: g,
+                class: y([o, e.playerButtonClass]),
+                onClick: n
               },
               [
-                e.poster ? (r(), $(N(j), {
-                  key: 0,
-                  class: f(l),
-                  src: e.poster,
-                  alt: "AITO"
-                }, null, 8, ["src"])) : _("v-if", !0),
-                y(
-                  "button",
-                  {
-                    ref_key: "btnRef",
-                    ref: w,
-                    class: f([k, e.playerButtonClass]),
-                    onClick: t
-                  },
-                  [
-                    V(o.$slots, "play", {}, () => [
-                      (r(), h("svg", {
-                        class: f(x),
-                        viewBox: "0 0 1024 1024",
-                        version: "1.1",
-                        xmlns: "http://www.w3.org/2000/svg",
-                        width: "200",
-                        height: "200"
-                      }, [...v[0] || (v[0] = [
-                        y(
-                          "path",
-                          {
-                            d: "M671.744 495.616c20.48 12.288 20.48 36.864 0 49.152l-217.088 126.976c-20.48 12.288-45.056-4.096-45.056-24.576V393.216c0-20.48 24.576-36.864 45.056-24.576l217.088 126.976z",
-                            fill: "#ffffff"
-                          },
-                          null,
-                          -1
-                          /* CACHED */
-                        ),
-                        y(
-                          "path",
-                          {
-                            d: "M512 1011.712C237.568 1011.712 12.288 786.432 12.288 512 12.288 237.568 237.568 12.288 512 12.288c274.432 0 499.712 225.28 499.712 499.712 0 274.432-225.28 499.712-499.712 499.712z m0-958.464c-253.952 0-458.752 204.8-458.752 458.752s204.8 458.752 458.752 458.752 458.752-204.8 458.752-458.752-204.8-458.752-458.752-458.752z",
-                            fill: "#ffffff"
-                          },
-                          null,
-                          -1
-                          /* CACHED */
-                        )
-                      ])])),
-                      y(
-                        "span",
-                        {
-                          class: f(g)
-                        },
-                        X(e.playerButtonText),
-                        1
-                        /* TEXT */
-                      )
-                    ])
-                  ],
-                  2
-                  /* CLASS */
-                )
+                b(s.$slots, "play", {}, () => [
+                  (c(), C("svg", {
+                    class: y(T),
+                    viewBox: "0 0 1024 1024",
+                    version: "1.1",
+                    xmlns: "http://www.w3.org/2000/svg",
+                    width: "200",
+                    height: "200"
+                  }, [...l[0] || (l[0] = [
+                    i(
+                      "path",
+                      {
+                        d: "M671.744 495.616c20.48 12.288 20.48 36.864 0 49.152l-217.088 126.976c-20.48 12.288-45.056-4.096-45.056-24.576V393.216c0-20.48 24.576-36.864 45.056-24.576l217.088 126.976z",
+                        fill: "#ffffff"
+                      },
+                      null,
+                      -1
+                      /* CACHED */
+                    ),
+                    i(
+                      "path",
+                      {
+                        d: "M512 1011.712C237.568 1011.712 12.288 786.432 12.288 512 12.288 237.568 237.568 12.288 512 12.288c274.432 0 499.712 225.28 499.712 499.712 0 274.432-225.28 499.712-499.712 499.712z m0-958.464c-253.952 0-458.752 204.8-458.752 458.752s204.8 458.752 458.752 458.752 458.752-204.8 458.752-458.752-204.8-458.752-458.752-458.752-458.752z",
+                        fill: "#ffffff"
+                      },
+                      null,
+                      -1
+                      /* CACHED */
+                    )
+                  ])])),
+                  i(
+                    "span",
+                    {
+                      class: y(P)
+                    },
+                    H(e.playerButtonText),
+                    1
+                    /* TEXT */
+                  )
+                ])
               ],
-              6
-              /* CLASS, STYLE */
-            ),
-            n.value ? (r(), $(F, {
-              key: 0,
-              to: "body"
-            }, [
-              Y(
-                z,
-                T(e, {
-                  autoPlay: !1,
-                  ref_key: "vwRef",
-                  ref: B,
-                  onPaused: s
-                }),
-                null,
-                16
-                /* FULL_PROPS */
-              )
-            ])) : _("v-if", !0)
+              2
+              /* CLASS */
+            )
           ],
-          64
-          /* STABLE_FRAGMENT */
-        )) : _("v-if", !0)
+          6
+          /* CLASS, STYLE */
+        ),
+        a.value ? (c(), x(Y, {
+          key: 0,
+          to: "body"
+        }, [
+          z(I, V(e, {
+            url: e.url,
+            autoPlay: !1,
+            ref_key: "modalVideoRef",
+            ref: _,
+            onPaused: k
+          }), {
+            close: $(() => [
+              b(s.$slots, "close")
+            ]),
+            _: 3
+            /* FORWARDED */
+          }, 16, ["url"])
+        ])) : R("v-if", !0)
       ],
       64
       /* STABLE_FRAGMENT */
     ));
   }
+}), M = /* @__PURE__ */ S({
+  __name: "video",
+  props: {
+    class: {},
+    style: {},
+    playerButtonClass: {},
+    playerButtonText: { default: "PLAY" },
+    poster: { default: "" },
+    url: {},
+    autoPlay: { type: Boolean, default: !0 },
+    playable: { type: Boolean, default: !0 },
+    multiple: { type: Boolean },
+    urlSmall: {}
+  },
+  setup(v, { expose: w }) {
+    const e = v, t = d();
+    return w({
+      play() {
+        var o;
+        (o = t.value) == null || o.play();
+      },
+      pause() {
+        var o;
+        (o = t.value) == null || o.pause();
+      }
+    }), (o, P) => e.multiple ? (c(), x(
+      q,
+      V({ key: 0 }, e, {
+        ref_key: "videoRef",
+        ref: t
+      }),
+      {
+        play: $(() => [
+          b(o.$slots, "play")
+        ]),
+        close: $(() => [
+          b(o.$slots, "close")
+        ]),
+        _: 3
+        /* FORWARDED */
+      },
+      16
+      /* FULL_PROPS */
+    )) : (c(), x(
+      G,
+      V({ key: 1 }, e, {
+        ref_key: "videoRef",
+        ref: t
+      }),
+      {
+        play: $(() => [
+          b(o.$slots, "play")
+        ]),
+        close: $(() => [
+          b(o.$slots, "close")
+        ]),
+        _: 3
+        /* FORWARDED */
+      },
+      16
+      /* FULL_PROPS */
+    ));
+  }
 });
-R.install = (m) => (m.component("ScVideo", R), m);
-const J = R;
+M.install = (v) => (v.component("ScVideo", M), v);
+const Z = M;
 export {
-  J as ScVideo
+  Z as ScVideo
 };