@vuux/video/dist/es/src/hook/useProgress.mjs

Vue Nuxt 视频播放器

import { reactive as S, computed as h, onMounted as B, onUnmounted as C } from "vue";
import { Utils as g } from "@vuux/utils";
const V = (a, m, f, l) => {
  const e = S({
    /**
     * 是否正在拖拽
     */
    dragging: !1,
    /**
     * 当前hover的进度位置
     */
    hoverPosition: 0,
    /**
     * hover提示的位置
     */
    hoverTipsPosition: "50%"
  }), { addManaged: c, removeAllManaged: b } = g.useManagedEvents(), r = !g.isMobile(), u = (o) => Math.min(1, Math.max(0, o)), p = h(() => ({
    width: `${u(f.modelValue) * 100}%`
  })), X = h(() => ({
    width: `${u(e.hoverPosition) * 100}%`
  })), M = h(() => ({
    width: `${f.loaded}%`
  })), x = h(() => ({
    left: `${u(e.hoverPosition) * 100}%`
  })), y = (o) => {
    if (!a.value)
      return 0;
    const t = a.value.getBoundingClientRect();
    return u((o - t.left) / t.width);
  }, d = (o) => {
    const t = "touches" in o ? o.touches[0].clientX : o.clientX;
    return y(t);
  }, P = (o) => {
    const t = d(o);
    l("update:modelValue", t), l("change", t);
  }, w = (o) => {
    if (!a.value || !m.value)
      return;
    const t = a.value.getBoundingClientRect(), i = m.value.clientWidth / 2, s = o - t.left;
    s < i ? e.hoverTipsPosition = `${i - s}px` : t.width - s < i ? e.hoverTipsPosition = `${t.width - s - i}px` : e.hoverTipsPosition = "50%";
  }, $ = (o) => {
    if (!r)
      return;
    const t = d(o);
    l("onMousemove", t), e.hoverPosition = t, w(o.clientX);
  }, D = () => {
    r && (l("onMousemove", 0), e.hoverPosition = 0);
  }, v = (o) => {
    if (P(o), r) {
      const t = "touches" in o ? o.touches[0].clientX : o.clientX;
      e.hoverPosition = d(o), w(t);
    }
  }, n = async () => {
    if (!e.dragging)
      return;
    const o = [
      [window, "mousemove", v],
      [window, "touchmove", v],
      [window, "mouseup", n],
      [window, "touchend", n],
      [window, "contextmenu", n]
    ];
    for (let t = 0; t < o.length; t++) {
      const [i, s, H] = o[t];
      i.removeEventListener(s, H);
    }
    await g.wait(50), e.dragging = !1;
  }, T = (o) => {
    if (o.cancelable && o.preventDefault(), e.dragging = !0, P(o), r) {
      const t = "touches" in o ? o.touches[0].clientX : o.clientX;
      e.hoverPosition = d(o), w(t);
    }
    c(window, "mousemove", v, !1), c(window, "touchmove", v, !1), c(window, "mouseup", n), c(window, "touchend", n), c(window, "contextmenu", n);
  };
  return B(() => {
  }), C(() => {
  }), {
    state: e,
    progressBarStyle: p,
    hoverStyle: X,
    loadStyle: M,
    tipStyle: x,
    mousemoveHandle: $,
    mouseleaveHandle: D,
    startDragHandler: T
  };
};
export {
  V as useProgressDrag
};