@vuux/video/dist/lib/src/hook/useProgress.cjs

Vue Nuxt 视频播放器

"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("vue"),w=require("@vuux/utils"),b=(l,m,f,a)=>{const o=n.reactive({dragging:!1,hoverPosition:0,hoverTipsPosition:"50%"}),{addManaged:u,removeAllManaged:H}=w.Utils.useManagedEvents(),r=!w.Utils.isMobile(),d=e=>Math.min(1,Math.max(0,e)),p=n.computed(()=>({width:`${d(f.modelValue)*100}%`})),M=n.computed(()=>({width:`${d(o.hoverPosition)*100}%`})),X=n.computed(()=>({width:`${f.loaded}%`})),y=n.computed(()=>({left:`${d(o.hoverPosition)*100}%`})),D=e=>{if(!l.value)return 0;const t=l.value.getBoundingClientRect();return d((e-t.left)/t.width)},v=e=>{const t="touches"in e?e.touches[0].clientX:e.clientX;return D(t)},P=e=>{const t=v(e);a("update:modelValue",t),a("change",t)},g=e=>{if(!l.value||!m.value)return;const t=l.value.getBoundingClientRect(),s=m.value.clientWidth/2,c=e-t.left;c<s?o.hoverTipsPosition=`${s-c}px`:t.width-c<s?o.hoverTipsPosition=`${t.width-c-s}px`:o.hoverTipsPosition="50%"},S=e=>{if(!r)return;const t=v(e);a("onMousemove",t),o.hoverPosition=t,g(e.clientX)},T=()=>{r&&(a("onMousemove",0),o.hoverPosition=0)},h=e=>{if(P(e),r){const t="touches"in e?e.touches[0].clientX:e.clientX;o.hoverPosition=v(e),g(t)}},i=async()=>{if(!o.dragging)return;const e=[[window,"mousemove",h],[window,"touchmove",h],[window,"mouseup",i],[window,"touchend",i],[window,"contextmenu",i]];for(let t=0;t<e.length;t++){const[s,c,x]=e[t];s.removeEventListener(c,x)}await w.Utils.wait(50),o.dragging=!1},$=e=>{if(e.cancelable&&e.preventDefault(),o.dragging=!0,P(e),r){const t="touches"in e?e.touches[0].clientX:e.clientX;o.hoverPosition=v(e),g(t)}u(window,"mousemove",h,!1),u(window,"touchmove",h,!1),u(window,"mouseup",i),u(window,"touchend",i),u(window,"contextmenu",i)};return n.onMounted(()=>{}),n.onUnmounted(()=>{}),{state:o,progressBarStyle:p,hoverStyle:M,loadStyle:X,tipStyle:y,mousemoveHandle:S,mouseleaveHandle:T,startDragHandler:$}};exports.useProgressDrag=b;