@nutui/nutui 4.0.0-beta.9 → 4.0.1-2.beta-1

package/dist/packages/_es/Video.js

@@ -1,25 +1,27 @@
-import { reactive, ref, computed, watch, nextTick, onMounted, toRefs, openBlock, createElementBlock, createElementVNode, createCommentVNode, withDirectives, vShow, normalizeClass, toDisplayString, normalizeStyle, withModifiers } from "vue";
-import { c as createComponent } from "./component-81a4c1d0.js";
-import { _ as _export_sfc } from "./_plugin-vue_export-helper-cc2b3d55.js";
+var I = Object.defineProperty, G = Object.defineProperties;
+var J = Object.getOwnPropertyDescriptors;
+var k = Object.getOwnPropertySymbols;
+var K = Object.prototype.hasOwnProperty, Q = Object.prototype.propertyIsEnumerable;
+var B = (o, t, e) => t in o ? I(o, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : o[t] = e, c = (o, t) => {
+  for (var e in t || (t = {}))
+    K.call(t, e) && B(o, e, t[e]);
+  if (k)
+    for (var e of k(t))
+      Q.call(t, e) && B(o, e, t[e]);
+  return o;
+}, C = (o, t) => G(o, J(t));
+import { reactive as U, ref as W, computed as Y, watch as $, nextTick as Z, onMounted as _, toRefs as D, openBlock as f, createElementBlock as y, createElementVNode as r, createCommentVNode as L, withDirectives as E, vShow as g, normalizeClass as X, toDisplayString as v, normalizeStyle as R, withModifiers as h } from "vue";
+import { c as x } from "./component-234624bc.js";
+import { _ as ee } from "./_plugin-vue_export-helper-dad06003.js";
 import "../locale/lang";
-function throttle(fn, delay) {
-  let timer = null;
-  let startTime = Date.now();
+function A(o, t) {
+  let e = null, a = Date.now();
   return function() {
-    let now = Date.now();
-    let remaining = delay - (now - startTime);
-    if (timer)
-      clearTimeout(timer);
-    if (remaining <= 0) {
-      fn.apply(null, arguments);
-      startTime = Date.now();
-    } else {
-      timer = setTimeout(fn, remaining);
-    }
+    let p = Date.now(), u = t - (p - a);
+    e && clearTimeout(e), u <= 0 ? (o.apply(null, arguments), a = Date.now()) : e = setTimeout(o, u);
   };
 }
-const { create, translate } = createComponent("video");
-const _sfc_main = create({
+const { create: oe, translate: te } = x("video"), le = oe({
   props: {
     source: {
       type: Object,
@@ -28,18 +30,22 @@ const _sfc_main = create({
     options: {
       type: Object,
       default: {
-        autoplay: false,
+        autoplay: !1,
+        //是否自动播放
         volume: 0.5,
         poster: "",
-        loop: false,
-        controls: true,
-        muted: false,
-        disabled: false,
-        playsinline: false,
-        touchPlay: false,
+        loop: !1,
+        controls: !0,
+        muted: !1,
+        //是否静音
+        disabled: !1,
+        //禁止操作
+        playsinline: !1,
+        //行内展示
+        touchPlay: !1,
         preload: ""
       },
-      required: true
+      required: !0
     },
     model: {
       type: String,
@@ -48,343 +54,248 @@ const _sfc_main = create({
   },
   components: {},
   emits: ["click", "play", "pause", "playend", "time"],
-  setup(props, { emit }) {
-    const state = reactive({
+  setup(o, { emit: t }) {
+    const e = U({
       videoElm: null,
-      initial: true,
-      showToolbox: false,
+      initial: !0,
+      //控制封面的显示
+      showToolbox: !1,
+      //控制控制器和标题的显示
+      // 视频容器元素
       player: {
         $player: null,
         pos: null
       },
+      // progress进度条元素
       progressBar: {
         progressElm: null,
+        // 进度条DOM对象
         pos: null
       },
+      // video控制显示设置
       videoSet: {
         loaded: 0,
+        // 缓存长度
         displayTime: "00:00",
+        // 进度时间
         totalTime: "00:00",
+        // 总时间
         progress: {
           width: 0,
+          // 进度条长度
           current: 0
+          // 进度条当前位置
         }
       },
       state: {
-        controlShow: true,
+        controlShow: !0,
         vol: 0.5,
+        //音量
         currentTime: 0,
-        fullScreen: false,
-        playing: false,
-        isLoading: false,
-        isEnd: false,
-        isError: false,
-        isMuted: false
+        //当前时间
+        fullScreen: !1,
+        playing: !1,
+        //是否正在播放
+        isLoading: !1,
+        isEnd: !1,
+        isError: !1,
+        isMuted: !1
       },
-      showTouchMask: false
-    });
-    const root = ref(null);
-    const isDisabled = computed(() => {
-      return props.options.disabled;
-    });
-    watch(
-      () => props.source,
-      (newValue) => {
-        if (newValue.src) {
-          nextTick(() => {
-            state.videoElm.load();
-          });
-        }
+      showTouchMask: !1
+    }), a = W(null), p = Y(() => o.options.disabled);
+    $(
+      () => o.source,
+      (s) => {
+        s.src && Z(() => {
+          e.videoElm.load();
+        });
       },
-      { immediate: true, deep: true }
-    );
-    watch(
-      () => props.options,
-      (newValue) => {
-        state.state.isMuted = newValue ? newValue.muted : false;
+      { immediate: !0, deep: !0 }
+    ), $(
+      () => o.options,
+      (s) => {
+        e.state.isMuted = s ? s.muted : !1;
       },
-      { immediate: true }
+      { immediate: !0 }
     );
-    const init = () => {
-      state.videoElm = root.value;
-      if (props.options.autoplay) {
-        setTimeout(() => {
-          state.videoElm.play();
-        }, 200);
-      }
-      if (props.options.touchPlay) {
-        state.showTouchMask = true;
-      }
-      if (props.options.playsinline) {
-        state.videoElm.setAttribute("playsinline", props.options.playsinline);
-        state.videoElm.setAttribute("webkit-playsinline", props.options.playsinline);
-        state.videoElm.setAttribute("x5-video-player-type", "h5-page");
-        state.videoElm.setAttribute("x5-video-player-fullscreen", false);
-      }
-      volumeHandle();
-      if (state.showToolbox) {
-        customerInit();
-      } else {
-        state.videoElm.addEventListener("play", () => {
-          state.state.playing = true;
-          emit("play", state.videoElm);
-        });
-        state.videoElm.addEventListener("pause", () => {
-          state.state.playing = false;
-          emit("pause", state.videoElm);
-        });
-        state.videoElm.addEventListener("ended", playEnded);
-        state.videoElm.addEventListener("timeupdate", throttle(getPlayTime, 1e3));
-      }
-    };
-    const customerInit = () => {
-      const $player = root.value;
-      const $progress = root.value.getElementsByClassName("nut-video-controller__progress-value")[0];
-      state.player.$player = $player;
-      state.progressBar.progressElm = $progress;
-      state.progressBar.pos = $progress.getBoundingClientRect();
-      state.videoSet.progress.width = Math.round($progress.getBoundingClientRect().width);
-    };
-    const play = () => {
-      if (props.options.autoplay && props.options.disabled) {
-        state.state.playing = true;
-        return false;
-      }
-      state.state.playing = !state.state.playing;
-      if (state.videoElm) {
-        if (state.state.playing) {
+    const u = () => {
+      e.videoElm = a.value, o.options.autoplay && setTimeout(() => {
+        e.videoElm.play();
+      }, 200), o.options.touchPlay && (e.showTouchMask = !0), o.options.playsinline && (e.videoElm.setAttribute("playsinline", o.options.playsinline), e.videoElm.setAttribute("webkit-playsinline", o.options.playsinline), e.videoElm.setAttribute("x5-video-player-type", "h5-page"), e.videoElm.setAttribute("x5-video-player-fullscreen", !1)), N(), e.showToolbox ? l() : (e.videoElm.addEventListener("play", () => {
+        e.state.playing = !0, t("play", e.videoElm);
+      }), e.videoElm.addEventListener("pause", () => {
+        e.state.playing = !1, t("pause", e.videoElm);
+      }), e.videoElm.addEventListener("ended", w), e.videoElm.addEventListener("timeupdate", A(T, 1e3)));
+    }, l = () => {
+      const s = a.value, n = a.value.getElementsByClassName("nut-video-controller__progress-value")[0];
+      e.player.$player = s, e.progressBar.progressElm = n, e.progressBar.pos = n.getBoundingClientRect(), e.videoSet.progress.width = Math.round(n.getBoundingClientRect().width);
+    }, P = () => {
+      if (o.options.autoplay && o.options.disabled)
+        return e.state.playing = !0, !1;
+      if (e.state.playing = !e.state.playing, e.videoElm)
+        if (e.state.playing)
           try {
             setTimeout(() => {
-              state.videoElm.play();
-            }, 200);
-            state.videoElm.addEventListener("progress", () => {
-              getLoadTime();
-            });
-            state.videoElm.addEventListener("timeupdate", throttle(getPlayTime, 1e3));
-            state.videoElm.addEventListener("ended", playEnded);
-            emit("play", state.videoElm);
-          } catch (e) {
-            handleError();
+              e.videoElm.play();
+            }, 200), e.videoElm.addEventListener("progress", () => {
+              F();
+            }), e.videoElm.addEventListener("timeupdate", A(T, 1e3)), e.videoElm.addEventListener("ended", w), t("play", e.videoElm);
+          } catch (s) {
+            b();
           }
-        } else {
-          state.videoElm.pause();
-          emit("pause", state.videoElm);
-        }
-      }
-    };
-    const timeFormat = (t) => {
-      var h = Math.floor(t / 3600);
-      if (h < 10) {
-        h = "0" + h;
-      }
-      var m = Math.floor(t % 3600 / 60);
-      if (m < 10) {
-        m = "0" + m;
-      }
-      var s = Math.round(t % 3600 % 60);
-      if (s < 10) {
-        s = "0" + s;
-      }
-      var str = "";
-      if (h != 0) {
-        str = h + ":" + m + ":" + s;
-      } else {
-        str = m + ":" + s;
-      }
-      return str;
-    };
-    const getLoadTime = () => {
-      if (state.videoSet.loaded)
-        state.videoSet.loaded = state.videoElm.buffered.end(0) / state.videoElm.duration * 100;
-    };
-    const getPlayTime = () => {
-      const percent = state.videoElm.currentTime / state.videoElm.duration;
-      state.videoSet.progress.current = Math.round(state.videoSet.progress.width * percent);
-      state.videoSet.totalTime = timeFormat(state.videoElm.duration);
-      state.videoSet.displayTime = timeFormat(state.videoElm.currentTime);
-      emit("time", state.videoSet.displayTime, state.videoSet.totalTime);
+        else
+          e.videoElm.pause(), t("pause", e.videoElm);
+    }, S = (s) => {
+      var n = Math.floor(s / 3600);
+      n < 10 && (n = "0" + n);
+      var i = Math.floor(s % 3600 / 60);
+      i < 10 && (i = "0" + i);
+      var d = Math.round(s % 3600 % 60);
+      d < 10 && (d = "0" + d);
+      var m = "";
+      return n != 0 ? m = n + ":" + i + ":" + d : m = i + ":" + d, m;
+    }, F = () => {
+      e.videoSet.loaded && (e.videoSet.loaded = e.videoElm.buffered.end(0) / e.videoElm.duration * 100);
+    }, T = () => {
+      const s = e.videoElm.currentTime / e.videoElm.duration;
+      e.videoSet.progress.current = Math.round(e.videoSet.progress.width * s), e.videoSet.totalTime = S(e.videoElm.duration), e.videoSet.displayTime = S(e.videoElm.currentTime), t("time", e.videoSet.displayTime, e.videoSet.totalTime);
+    }, w = () => {
+      e.state.playing = !1, e.state.isEnd = !0, e.videoSet.displayTime = "00:00", e.videoSet.progress.current = 0, e.videoElm.currentTime = 0, t("playend", e.videoElm);
+    }, b = () => {
+      e.state.isError = !0;
+    }, N = () => {
+      e.state.vol = o.options.volume;
+    }, j = () => {
+      e.state.isMuted = !e.state.isMuted, e.videoElm.muted = e.state.isMuted;
+    }, q = () => {
+    }, z = (s) => {
+      let i = s.targetTouches[0].pageX - e.progressBar.pos.left;
+      i <= 0 && (i = 0), i >= e.videoSet.progress.width && (i = e.videoSet.progress.width), e.videoSet.progress.current = i;
+      let d = e.videoSet.progress.current / e.videoSet.progress.width;
+      e.videoElm.duration && M(d, e.videoElm.duration);
+    }, O = (s) => {
+      let i = s.changedTouches[0].pageX - e.progressBar.pos.left;
+      e.videoSet.progress.current = i;
+      let d = i / e.videoSet.progress.width;
+      e.videoElm.duration && M(d, e.videoElm.duration);
+    }, M = (s, n) => {
+      e.videoElm.currentTime = Math.floor(s * n);
+    }, V = () => {
+      e.state.isError = !1, u();
+    }, H = () => {
+      e.state.fullScreen ? (e.state.fullScreen = !1, document.webkitCancelFullScreen()) : (e.state.fullScreen = !0, e.videoElm.webkitRequestFullScreen());
     };
-    const playEnded = () => {
-      state.state.playing = false;
-      state.state.isEnd = true;
-      state.videoSet.displayTime = "00:00";
-      state.videoSet.progress.current = 0;
-      state.videoElm.currentTime = 0;
-      emit("playend", state.videoElm);
-    };
-    const handleError = () => {
-      state.state.isError = true;
-    };
-    const volumeHandle = () => {
-      state.state.vol = props.options.volume;
-    };
-    const handleMuted = () => {
-      state.state.isMuted = !state.state.isMuted;
-      state.videoElm.muted = state.state.isMuted;
-    };
-    const touchSlidSrart = () => {
-    };
-    const touchSlidMove = (e) => {
-      let currentX = e.targetTouches[0].pageX;
-      let offsetX = currentX - state.progressBar.pos.left;
-      if (offsetX <= 0) {
-        offsetX = 0;
-      }
-      if (offsetX >= state.videoSet.progress.width) {
-        offsetX = state.videoSet.progress.width;
-      }
-      state.videoSet.progress.current = offsetX;
-      let percent = state.videoSet.progress.current / state.videoSet.progress.width;
-      state.videoElm.duration && setPlayTime(percent, state.videoElm.duration);
-    };
-    const touchSlidEnd = (e) => {
-      let currentX = e.changedTouches[0].pageX;
-      let offsetX = currentX - state.progressBar.pos.left;
-      state.videoSet.progress.current = offsetX;
-      let percent = offsetX / state.videoSet.progress.width;
-      state.videoElm.duration && setPlayTime(percent, state.videoElm.duration);
-    };
-    const setPlayTime = (percent, totalTime) => {
-      state.videoElm.currentTime = Math.floor(percent * totalTime);
-    };
-    const retry = () => {
-      state.state.isError = false;
-      init();
-    };
-    const fullScreen = () => {
-      if (!state.state.fullScreen) {
-        state.state.fullScreen = true;
-        state.videoElm.webkitRequestFullScreen();
-      } else {
-        state.state.fullScreen = false;
-        document.webkitCancelFullScreen();
-      }
-    };
-    onMounted(() => {
-      init();
+    return _(() => {
+      u();
+    }), C(c(c({
+      root: a
+    }, D(o)), D(e)), {
+      handleError: b,
+      isDisabled: p,
+      play: P,
+      handleMuted: j,
+      touchSlidSrart: q,
+      touchSlidMove: z,
+      touchSlidEnd: O,
+      retry: V,
+      fullScreen: H,
+      translate: te
     });
-    return {
-      root,
-      ...toRefs(props),
-      ...toRefs(state),
-      handleError,
-      isDisabled,
-      play,
-      handleMuted,
-      touchSlidSrart,
-      touchSlidMove,
-      touchSlidEnd,
-      retry,
-      fullScreen,
-      translate
-    };
   }
-});
-const _hoisted_1 = {
+}), se = {
   class: "nut-video",
   ref: "videocon"
-};
-const _hoisted_2 = ["muted", "autoplay", "loop", "poster", "controls", "preload"];
-const _hoisted_3 = ["src", "type"];
-const _hoisted_4 = { class: "nut-video-controller__now" };
-const _hoisted_5 = { class: "nut-video-controller__progress" };
-const _hoisted_6 = {
+}, re = ["muted", "autoplay", "loop", "poster", "controls", "preload"], ie = ["src", "type"], ne = { class: "nut-video-controller__now" }, de = { class: "nut-video-controller__progress" }, ae = {
   class: "nut-video-controller__progress-value",
   ref: "progressBar"
-};
-const _hoisted_7 = /* @__PURE__ */ createElementVNode("div", { class: "nut-video-controller__ball-move" }, null, -1);
-const _hoisted_8 = [
-  _hoisted_7
-];
-const _hoisted_9 = {
+}, ue = /* @__PURE__ */ r("div", { class: "nut-video-controller__ball-move" }, null, -1), pe = [
+  ue
+], ve = {
   class: "nut-video-controller__played",
   ref: "playedBar"
-};
-const _hoisted_10 = { class: "nut-video-controller__total" };
-const _hoisted_11 = { class: "nut-video-error" };
-const _hoisted_12 = { class: "nut-video-error-tip" };
-function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("div", _hoisted_1, [
-    createElementVNode("video", {
+}, me = { class: "nut-video-controller__total" }, ce = { class: "nut-video-error" }, fe = { class: "nut-video-error-tip" };
+function ye(o, t, e, a, p, u) {
+  return f(), y("div", se, [
+    r("video", {
       ref: "root",
       class: "nut-video-player",
-      muted: _ctx.options.muted,
-      autoplay: _ctx.options.autoplay,
-      loop: _ctx.options.loop,
-      poster: _ctx.options.poster,
-      controls: _ctx.options.controls,
-      preload: _ctx.options.preload,
-      onError: _cache[0] || (_cache[0] = (...args) => _ctx.handleError && _ctx.handleError(...args))
+      muted: o.options.muted,
+      autoplay: o.options.autoplay,
+      loop: o.options.loop,
+      poster: o.options.poster,
+      controls: o.options.controls,
+      preload: o.options.preload,
+      onError: t[0] || (t[0] = (...l) => o.handleError && o.handleError(...l))
     }, [
-      createElementVNode("source", {
-        src: _ctx.source.src,
-        type: _ctx.source.type
-      }, null, 8, _hoisted_3)
-    ], 40, _hoisted_2),
-    _ctx.showToolbox && !_ctx.isDisabled ? (openBlock(), createElementBlock("div", {
+      r("source", {
+        src: o.source.src,
+        type: o.source.type
+      }, null, 8, ie)
+    ], 40, re),
+    o.showToolbox && !o.isDisabled ? (f(), y("div", {
       key: 0,
       class: "nut-video-mask",
       ref: "touchMask",
-      onClick: _cache[1] || (_cache[1] = (...args) => _ctx.play && _ctx.play(...args))
-    }, null, 512)) : createCommentVNode("", true),
-    _ctx.showToolbox && !_ctx.isDisabled ? withDirectives((openBlock(), createElementBlock("div", {
+      onClick: t[1] || (t[1] = (...l) => o.play && o.play(...l))
+    }, null, 512)) : L("", !0),
+    o.showToolbox && !o.isDisabled ? E((f(), y("div", {
       key: 1,
       class: "nut-video-play-btn",
       ref: "palyBtn",
-      onClick: _cache[2] || (_cache[2] = (...args) => _ctx.play && _ctx.play(...args))
+      onClick: t[2] || (t[2] = (...l) => o.play && o.play(...l))
     }, null, 512)), [
-      [vShow, !_ctx.state.playing]
-    ]) : createCommentVNode("", true),
-    withDirectives(createElementVNode("div", {
-      class: normalizeClass(["nut-video-controller", { "nut-video-controller--show": !_ctx.state.playing, "nut-video-controller--hide": _ctx.state.playing }])
+      [g, !o.state.playing]
+    ]) : L("", !0),
+    E(r("div", {
+      class: X(["nut-video-controller", { "nut-video-controller--show": !o.state.playing, "nut-video-controller--hide": o.state.playing }])
     }, [
-      createElementVNode("div", {
+      r("div", {
         class: "nut-video-controller__playbtn",
-        onClick: _cache[3] || (_cache[3] = (...args) => _ctx.play && _ctx.play(...args))
+        onClick: t[3] || (t[3] = (...l) => o.play && o.play(...l))
       }),
-      createElementVNode("div", _hoisted_4, toDisplayString(_ctx.videoSet.displayTime), 1),
-      createElementVNode("div", _hoisted_5, [
-        createElementVNode("div", _hoisted_6, [
-          createElementVNode("div", {
+      r("div", ne, v(o.videoSet.displayTime), 1),
+      r("div", de, [
+        r("div", ae, [
+          r("div", {
             class: "buffered",
-            style: normalizeStyle({ width: `${_ctx.videoSet.loaded}%` })
+            style: R({ width: `${o.videoSet.loaded}%` })
           }, null, 4),
-          createElementVNode("div", {
+          r("div", {
             class: "nut-video-controller__ball",
-            style: normalizeStyle({
-              transform: `translate3d(${_ctx.videoSet.progress.current}px, -50%, 0)`
+            style: R({
+              transform: `translate3d(${o.videoSet.progress.current}px, -50%, 0)`
             }),
-            onTouchmove: _cache[4] || (_cache[4] = withModifiers(($event) => _ctx.touchSlidMove($event), ["stop", "prevent"])),
-            onTouchstart: _cache[5] || (_cache[5] = withModifiers(($event) => _ctx.touchSlidSrart(), ["stop"])),
-            onTouchend: _cache[6] || (_cache[6] = withModifiers(($event) => _ctx.touchSlidEnd($event), ["stop"]))
-          }, _hoisted_8, 36),
-          createElementVNode("div", _hoisted_9, null, 512)
+            onTouchmove: t[4] || (t[4] = h((l) => o.touchSlidMove(l), ["stop", "prevent"])),
+            onTouchstart: t[5] || (t[5] = h((l) => o.touchSlidSrart(), ["stop"])),
+            onTouchend: t[6] || (t[6] = h((l) => o.touchSlidEnd(l), ["stop"]))
+          }, pe, 36),
+          r("div", ve, null, 512)
         ], 512)
       ]),
-      createElementVNode("div", _hoisted_10, toDisplayString(_ctx.videoSet.totalTime), 1),
-      createElementVNode("div", {
-        class: normalizeClass(["nut-video-controller__volume", { muted: _ctx.state.isMuted }]),
-        onClick: _cache[7] || (_cache[7] = (...args) => _ctx.handleMuted && _ctx.handleMuted(...args))
+      r("div", me, v(o.videoSet.totalTime), 1),
+      r("div", {
+        class: X(["nut-video-controller__volume", { muted: o.state.isMuted }]),
+        onClick: t[7] || (t[7] = (...l) => o.handleMuted && o.handleMuted(...l))
       }, null, 2),
-      createElementVNode("div", {
+      r("div", {
         class: "nut-video-controller__full",
-        onClick: _cache[8] || (_cache[8] = (...args) => _ctx.fullScreen && _ctx.fullScreen(...args))
+        onClick: t[8] || (t[8] = (...l) => o.fullScreen && o.fullScreen(...l))
       })
     ], 2), [
-      [vShow, _ctx.showToolbox && !_ctx.isDisabled]
+      [g, o.showToolbox && !o.isDisabled]
     ]),
-    withDirectives(createElementVNode("div", _hoisted_11, [
-      createElementVNode("p", _hoisted_12, toDisplayString(_ctx.translate("errorTip")), 1),
-      createElementVNode("p", {
+    E(r("div", ce, [
+      r("p", fe, v(o.translate("errorTip")), 1),
+      r("p", {
         class: "nut-video-error-retry",
-        onClick: _cache[9] || (_cache[9] = (...args) => _ctx.retry && _ctx.retry(...args))
-      }, toDisplayString(_ctx.translate("clickRetry")), 1)
+        onClick: t[9] || (t[9] = (...l) => o.retry && o.retry(...l))
+      }, v(o.translate("clickRetry")), 1)
     ], 512), [
-      [vShow, _ctx.state.isError]
+      [g, o.state.isError]
     ])
   ], 512);
 }
-const Video = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+const we = /* @__PURE__ */ ee(le, [["render", ye]]);
 export {
-  Video as default
+  we as default
 };