@seresweb/website-component 2.3.1 → 2.3.3

package/dist/es/video.mjs

@@ -1,6 +1,6 @@
-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";
+import { defineComponent as S, ref as y, watch as G, nextTick as O, onMounted as E, onBeforeUnmount as j, createElementBlock as g, openBlock as n, normalizeClass as i, createCommentVNode as P, createBlock as R, unref as Q, renderSlot as h, createElementVNode as f, onUnmounted as U, mergeProps as T, Fragment as H, normalizeStyle as X, toDisplayString as Y, Teleport as F, createVNode as A, withCtx as V } from "vue";
+import { P as u } from "../_vars-BV4QQF-p.js";
+import { ScLayzImage as N } from "./layz-image.mjs";
 const D = ["controls", "poster", "src"], I = /* @__PURE__ */ S({
   __name: "video-wrapper",
   props: {
@@ -16,83 +16,95 @@ const D = ["controls", "poster", "src"], I = /* @__PURE__ */ S({
     urlSmall: {}
   },
   emits: ["paused"],
-  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, {
+  setup(v, { expose: k, emit: e }) {
+    const t = v, r = e, C = /xiaomi|miui/i, x = /QQBrowser/i, $ = `${u}-player-wrapper`, m = `${u}-player-is-fullscreen`, b = `${u}-player-close-btn`, _ = `${u}-player-icon`, B = `${u}-player-poster`, s = y(), o = y(!0), a = y(
+      C.test(navigator.userAgent) || x.test(navigator.userAgent) ? void 0 : t.url
+    );
+    let l = null;
+    const p = (c) => {
+      var d, w;
+      c.target !== s.value && ((d = s.value) == null || d.pause(), o.value = !!((w = s.value) != null && w.paused), r("paused"));
+    }, W = (c) => {
+      const d = c[0], w = s.value;
+      !w || !t.playable || (d.isIntersecting && t.autoPlay && w.paused ? (w.play().catch(console.warn), o.value = !1) : !d.isIntersecting && !w.paused && (w.pause(), o.value = !0));
+    }, M = () => {
+      t.autoPlay && t.playable && s.value && (l = new IntersectionObserver(W, {
         threshold: 0.25
         // 可根据需求调整可见区域百分比
-      }), r.observe(a.value));
-    }, A = () => {
-      r == null || r.disconnect(), r = null;
+      }), l.observe(s.value));
+    }, L = () => {
+      l == null || l.disconnect(), l = null;
     };
-    return F(
+    return G(
       () => t.playable,
       () => {
-        A(), N(() => u());
+        L(), O(() => M());
       }
-    ), w({
+    ), k({
       play() {
-        a.value.play(), n.value = a.value.paused;
+        s.value.play(), o.value = s.value.paused;
       },
       pause() {
-        a.value.pause(), n.value = a.value.paused;
+        s.value.pause(), o.value = s.value.paused;
       }
-    }), 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(
+    }), E(() => {
+      (C.test(navigator.userAgent) || x.test(navigator.userAgent)) && fetch(t.url).then((c) => {
+        if (!c.ok)
+          throw new Error(`HTTP error! status: ${c.status}`);
+        return c.blob();
+      }).then((c) => {
+        a.value = URL.createObjectURL(c), O(() => {
+          var d;
+          t.autoPlay && t.playable && ((d = s.value) == null || d.play().catch(console.warn), o.value = !1);
+        });
+      }).catch((c) => {
+        console.error("获取视频失败：", c);
+      }), M();
+    }), j(() => {
+      L();
+    }), (c, d) => (n(), g(
       "div",
       {
-        class: y([T, t.class, !n.value && !t.autoPlay && g])
+        class: i([$, t.class, !o.value && !t.autoPlay && m])
       },
       [
-        i("video", {
+        P(" 特殊的浏览器，QQ、小米浏览器，很魔幻 "),
+        !a.value && t.poster ? (n(), R(Q(N), {
+          key: 0,
+          class: i(B),
+          src: t.poster,
+          alt: "AITO"
+        }, null, 8, ["src"])) : a.value ? (n(), g("video", {
+          key: 1,
           ref_key: "videoRef",
-          ref: a,
+          ref: s,
           muted: "",
           loop: "",
           playsinline: "",
           "webkit-playsinline": "",
           "x5-video-player-type": "h5",
-          controls: !n.value && !t.autoPlay,
+          controls: !o.value && !t.autoPlay,
           poster: t.poster,
-          src: k.value
-        }, null, 8, D),
-        !n.value && !t.autoPlay ? (c(), C(
+          src: a.value
+        }, null, 8, D)) : P("v-if", !0),
+        !o.value && !t.autoPlay ? (n(), g(
           "button",
           {
-            key: 0,
-            class: y([m, t.playerButtonClass]),
-            onClick: s
+            key: 2,
+            class: i([b, t.playerButtonClass]),
+            onClick: p
           },
           [
-            b(p.$slots, "close", {}, () => [
-              (c(), C("svg", {
-                class: y(_),
+            h(c.$slots, "close", {}, () => [
+              (n(), g("svg", {
+                class: i(_),
                 viewBox: "0 0 1121 1024",
                 version: "1.1",
                 xmlns: "http://www.w3.org/2000/svg",
                 width: "200",
                 height: "200"
-              }, [...h[0] || (h[0] = [
-                i(
+              }, [...d[0] || (d[0] = [
+                f(
                   "path",
                   {
                     d: "M1040.725333 49.005714l-965.485714 965.436953-48.420571-48.469334L992.256 0.487619l48.469333 48.518095z",
@@ -102,7 +114,7 @@ const D = ["controls", "poster", "src"], I = /* @__PURE__ */ S({
                   -1
                   /* CACHED */
                 ),
-                i(
+                f(
                   "path",
                   {
                     d: "M1040.725333 1014.442667l-965.485714-965.485715 48.518095-48.420571L1089.194667 965.973333l-48.469334 48.469334z",
@@ -117,13 +129,13 @@ const D = ["controls", "poster", "src"], I = /* @__PURE__ */ S({
           ],
           2
           /* CLASS */
-        )) : R("v-if", !0)
+        )) : P("v-if", !0)
       ],
       2
       /* CLASS */
     ));
   }
-}), G = /* @__PURE__ */ S({
+}), q = /* @__PURE__ */ S({
   __name: "video-normal",
   props: {
     class: {},
@@ -137,74 +149,74 @@ const D = ["controls", "poster", "src"], I = /* @__PURE__ */ S({
     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();
+  setup(v, { expose: k }) {
+    const e = v, t = `${u}-player-wrapper`, r = `${u}-player-poster`, C = `${u}-player-btn`, x = `${u}-player-btn-text`, $ = `${u}-player-icon`, m = y(), b = y(), _ = y(), B = y(!1), s = (l) => {
+      l.stopPropagation(), e.playable && (B.value = !0, setTimeout(() => {
+        var p;
+        (p = _.value) == null || p.play();
       }, 0));
-    }, r = () => {
-      n.value = !1;
+    }, o = () => {
+      B.value = !1;
     };
-    let s = null;
-    return L(() => {
-      !e.autoPlay && m.value && (s = new IntersectionObserver(
+    let a = null;
+    return E(() => {
+      !e.autoPlay && m.value && (a = new IntersectionObserver(
         ([l]) => {
-          l.isIntersecting && (n.value = !0);
+          l.isIntersecting && (B.value = !0);
         },
         { threshold: 0.1 }
-      ), s.observe(m.value));
-    }), E(() => {
-      s == null || s.disconnect();
-    }), w({
+      ), a.observe(m.value));
+    }), U(() => {
+      a == null || a.disconnect();
+    }), k({
       play() {
         var l;
-        e.autoPlay ? (l = _.value) == null || l.play() : k(new MouseEvent("click"));
+        e.autoPlay ? (l = b.value) == null || l.play() : s(new MouseEvent("click"));
       },
       pause() {
-        var l, u;
-        (l = _.value) == null || l.pause(), (u = a.value) == null || u.pause();
+        var l, p;
+        (l = b.value) == null || l.pause(), (p = _.value) == null || p.pause();
       }
-    }), (l, u) => e.autoPlay ? (c(), x(I, V({ key: 0 }, e, {
+    }), (l, p) => e.autoPlay ? (n(), R(I, T({ key: 0 }, e, {
       url: e.url,
       ref_key: "videoRef",
-      ref: _
-    }), null, 16, ["url"])) : (c(), C(
-      O,
+      ref: b
+    }), null, 16, ["url"])) : (n(), g(
+      H,
       { key: 1 },
       [
-        i(
+        f(
           "div",
           {
-            class: y([t, e.class]),
-            style: U(e.style)
+            class: i([t, e.class]),
+            style: X(e.style)
           },
           [
-            e.poster ? (c(), x(W(j), {
+            e.poster ? (n(), R(Q(N), {
               key: 0,
-              class: y(o),
+              class: i(r),
               src: e.poster,
               alt: "AITO"
-            }, null, 8, ["src"])) : R("v-if", !0),
-            i(
+            }, null, 8, ["src"])) : P("v-if", !0),
+            f(
               "button",
               {
                 ref_key: "btnRef",
                 ref: m,
-                class: y([P, e.playerButtonClass]),
-                onClick: k
+                class: i([C, e.playerButtonClass]),
+                onClick: s
               },
               [
-                b(l.$slots, "play", {}, () => [
-                  (c(), C("svg", {
-                    class: y(g),
+                h(l.$slots, "play", {}, () => [
+                  (n(), g("svg", {
+                    class: i($),
                     viewBox: "0 0 1024 1024",
                     version: "1.1",
                     xmlns: "http://www.w3.org/2000/svg",
                     width: "200",
                     height: "200"
-                  }, [...u[0] || (u[0] = [
-                    i(
+                  }, [...p[0] || (p[0] = [
+                    f(
                       "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",
@@ -214,7 +226,7 @@ const D = ["controls", "poster", "src"], I = /* @__PURE__ */ S({
                       -1
                       /* CACHED */
                     ),
-                    i(
+                    f(
                       "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",
@@ -225,12 +237,12 @@ const D = ["controls", "poster", "src"], I = /* @__PURE__ */ S({
                       /* CACHED */
                     )
                   ])])),
-                  i(
+                  f(
                     "span",
                     {
-                      class: y(T)
+                      class: i(x)
                     },
-                    H(e.playerButtonText),
+                    Y(e.playerButtonText),
                     1
                     /* TEXT */
                   )
@@ -243,21 +255,21 @@ const D = ["controls", "poster", "src"], I = /* @__PURE__ */ S({
           6
           /* CLASS, STYLE */
         ),
-        n.value ? (c(), x(Y, {
+        B.value ? (n(), R(F, {
           key: 0,
           to: "body"
         }, [
-          z(
+          A(
             I,
-            V(e, {
+            T(e, {
               autoPlay: !1,
               ref_key: "modalVideoRef",
-              ref: a,
-              onPaused: r
+              ref: _,
+              onPaused: o
             }),
             {
-              close: $(() => [
-                b(l.$slots, "close")
+              close: V(() => [
+                h(l.$slots, "close")
               ]),
               _: 3
               /* FORWARDED */
@@ -265,13 +277,13 @@ const D = ["controls", "poster", "src"], I = /* @__PURE__ */ S({
             16
             /* FULL_PROPS */
           )
-        ])) : R("v-if", !0)
+        ])) : P("v-if", !0)
       ],
       64
       /* STABLE_FRAGMENT */
     ));
   }
-}), q = /* @__PURE__ */ S({
+}), J = /* @__PURE__ */ S({
   __name: "video-multiple",
   props: {
     class: {},
@@ -285,73 +297,73 @@ const D = ["controls", "poster", "src"], I = /* @__PURE__ */ S({
     multiple: { type: Boolean },
     urlSmall: {}
   },
-  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) => {
+  setup(v, { expose: k }) {
+    const e = v, t = `${u}-player-wrapper`, r = `${u}-player-btn`, C = `${u}-player-btn-text`, x = `${u}-player-icon`, $ = y(), m = y(), b = y(), _ = y(!1), B = (a) => {
       var l;
-      s.stopPropagation(), e.playable && ((l = m.value) == null || l.pause(), a.value = !0, setTimeout(() => {
-        var u;
-        (u = _.value) == null || u.play();
+      a.stopPropagation(), e.playable && ((l = m.value) == null || l.pause(), _.value = !0, setTimeout(() => {
+        var p;
+        (p = b.value) == null || p.play();
       }, 0));
-    }, k = () => {
-      var s;
-      a.value = !1, (s = m.value) == null || s.play();
+    }, s = () => {
+      var a;
+      _.value = !1, (a = m.value) == null || a.play();
     };
-    let r = null;
-    return L(() => {
-      g.value && (r = new IntersectionObserver(
-        ([s]) => {
-          s.isIntersecting && (a.value = !0);
+    let o = null;
+    return E(() => {
+      $.value && (o = new IntersectionObserver(
+        ([a]) => {
+          a.isIntersecting && (_.value = !0);
         },
         { threshold: 0.1 }
-      ), r.observe(g.value));
-    }), E(() => {
-      r == null || r.disconnect();
-    }), w({
+      ), o.observe($.value));
+    }), U(() => {
+      o == null || o.disconnect();
+    }), k({
       play() {
-        n(new MouseEvent("click"));
+        B(new MouseEvent("click"));
       },
       pause() {
-        var s, l;
-        (s = m.value) == null || s.pause(), (l = _.value) == null || l.pause();
+        var a, l;
+        (a = m.value) == null || a.pause(), (l = b.value) == null || l.pause();
       }
-    }), (s, l) => (c(), C(
-      O,
+    }), (a, l) => (n(), g(
+      H,
       null,
       [
-        R(" Background: Small Video AutoPlay "),
-        z(I, V(e, {
+        P(" Background: Small Video AutoPlay "),
+        A(I, T(e, {
           url: e.urlSmall || e.url,
           autoPlay: !0,
           ref_key: "smallVideoRef",
           ref: m
         }), null, 16, ["url"]),
-        R(" Foreground: Button -> Modal Video (Large) "),
-        i(
+        P(" Foreground: Button -> Modal Video (Large) "),
+        f(
           "div",
           {
-            class: y([t, e.class, "is-multiple"]),
-            style: U(e.style)
+            class: i([t, e.class, "is-multiple"]),
+            style: X(e.style)
           },
           [
-            i(
+            f(
               "button",
               {
                 ref_key: "btnRef",
-                ref: g,
-                class: y([o, e.playerButtonClass]),
-                onClick: n
+                ref: $,
+                class: i([r, e.playerButtonClass]),
+                onClick: B
               },
               [
-                b(s.$slots, "play", {}, () => [
-                  (c(), C("svg", {
-                    class: y(T),
+                h(a.$slots, "play", {}, () => [
+                  (n(), g("svg", {
+                    class: i(x),
                     viewBox: "0 0 1024 1024",
                     version: "1.1",
                     xmlns: "http://www.w3.org/2000/svg",
                     width: "200",
                     height: "200"
                   }, [...l[0] || (l[0] = [
-                    i(
+                    f(
                       "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",
@@ -361,7 +373,7 @@ const D = ["controls", "poster", "src"], I = /* @__PURE__ */ S({
                       -1
                       /* CACHED */
                     ),
-                    i(
+                    f(
                       "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",
@@ -372,12 +384,12 @@ const D = ["controls", "poster", "src"], I = /* @__PURE__ */ S({
                       /* CACHED */
                     )
                   ])])),
-                  i(
+                  f(
                     "span",
                     {
-                      class: y(P)
+                      class: i(C)
                     },
-                    H(e.playerButtonText),
+                    Y(e.playerButtonText),
                     1
                     /* TEXT */
                   )
@@ -390,30 +402,30 @@ const D = ["controls", "poster", "src"], I = /* @__PURE__ */ S({
           6
           /* CLASS, STYLE */
         ),
-        a.value ? (c(), x(Y, {
+        _.value ? (n(), R(F, {
           key: 0,
           to: "body"
         }, [
-          z(I, V(e, {
+          A(I, T(e, {
             url: e.url,
             autoPlay: !1,
             ref_key: "modalVideoRef",
-            ref: _,
-            onPaused: k
+            ref: b,
+            onPaused: s
           }), {
-            close: $(() => [
-              b(s.$slots, "close")
+            close: V(() => [
+              h(a.$slots, "close")
             ]),
             _: 3
             /* FORWARDED */
           }, 16, ["url"])
-        ])) : R("v-if", !0)
+        ])) : P("v-if", !0)
       ],
       64
       /* STABLE_FRAGMENT */
     ));
   }
-}), M = /* @__PURE__ */ S({
+}), z = /* @__PURE__ */ S({
   __name: "video",
   props: {
     class: {},
@@ -427,47 +439,47 @@ const D = ["controls", "poster", "src"], I = /* @__PURE__ */ S({
     multiple: { type: Boolean },
     urlSmall: {}
   },
-  setup(v, { expose: w }) {
-    const e = v, t = d();
-    return w({
+  setup(v, { expose: k }) {
+    const e = v, t = y();
+    return k({
       play() {
-        var o;
-        (o = t.value) == null || o.play();
+        var r;
+        (r = t.value) == null || r.play();
       },
       pause() {
-        var o;
-        (o = t.value) == null || o.pause();
+        var r;
+        (r = t.value) == null || r.pause();
       }
-    }), (o, P) => e.multiple ? (c(), x(
-      q,
-      V({ key: 0 }, e, {
+    }), (r, C) => e.multiple ? (n(), R(
+      J,
+      T({ key: 0 }, e, {
         ref_key: "videoRef",
         ref: t
       }),
       {
-        play: $(() => [
-          b(o.$slots, "play")
+        play: V(() => [
+          h(r.$slots, "play")
         ]),
-        close: $(() => [
-          b(o.$slots, "close")
+        close: V(() => [
+          h(r.$slots, "close")
         ]),
         _: 3
         /* FORWARDED */
       },
       16
       /* FULL_PROPS */
-    )) : (c(), x(
-      G,
-      V({ key: 1 }, e, {
+    )) : (n(), R(
+      q,
+      T({ key: 1 }, e, {
         ref_key: "videoRef",
         ref: t
       }),
       {
-        play: $(() => [
-          b(o.$slots, "play")
+        play: V(() => [
+          h(r.$slots, "play")
         ]),
-        close: $(() => [
-          b(o.$slots, "close")
+        close: V(() => [
+          h(r.$slots, "close")
         ]),
         _: 3
         /* FORWARDED */
@@ -477,8 +489,8 @@ const D = ["controls", "poster", "src"], I = /* @__PURE__ */ S({
     ));
   }
 });
-M.install = (v) => (v.component("ScVideo", M), v);
-const Z = M;
+z.install = (v) => (v.component("ScVideo", z), v);
+const le = z;
 export {
-  Z as ScVideo
+  le as ScVideo
 };