vexip-ui/lib/components/video/video-progress.vue2.cjs

A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good

"use strict";const e=require("vue");require("../resize-observer/index.cjs");require("../slider/index.cjs");const C=require("@vexip-ui/config"),h=require("@vexip-ui/hooks"),w=require("@vexip-ui/utils"),A=require("./helper.cjs"),P=require("../resize-observer/resize-observer.cjs"),H=require("../slider/slider.vue2.cjs"),j=["src"],G=e.defineComponent({name:"VideoProgress",__name:"video-progress",props:{time:{type:Number,default:0},duration:{type:Number,default:0},segments:{type:Array,default:()=>[]},noPreview:{type:Boolean,default:!1},previewSrc:{type:String,default:""}},emits:["change"],setup(a,{emit:q}){const s=a,_=q,o=C.useNameHelper("video"),R=C.useLocale("video"),{timer:f}=h.useSetTimeout(),k=e.ref(0),p=e.ref(!1),b=e.ref(0),E=e.ref(0),B=e.ref(0);let d=[0,0],g=100,S=60;const y=e.ref(),z=e.ref(),m=e.computed(()=>{var t;return(t=z.value)==null?void 0:t.$el}),T=e.ref(),v=e.computed(()=>{var t;return!!((t=z.value)!=null&&t.sliding[1])}),$=e.computed(()=>s.duration?(v.value?k.value:s.time)/s.duration*100:0),X=e.computed(()=>({[o.be("progress")]:!0,[o.bem("progress","sliding")]:v.value,[o.bem("progress","disabled")]:s.duration<=0})),M=e.computed(()=>{const t=Math.max(1,s.duration);let r=s.segments.map(i=>i.time);r.length||(r=[0,t]),r=r.at(-1)===t?r:[...r,t],r=r[0]===0?r:[0,...r];const n=[];for(let i=0,u=r.length-1;i<u;++i){const l=r[i],c=r[i+1],V=c-l;n.push({start:l,startPercent:l/t*100,end:c,endPercent:c/t*100,duration:V,durationPercent:V/t*100,width:(c-l)/t*100})}return n}),F=e.computed(()=>{var u;const t=b.value,r=s.segments;if(!r.length)return"";let n=-1;if(t<=0)n=0;else for(let l=1,c=r.length;l<c;++l)if(r[l].time>t){n=l-1;break}n<0&&(n=r.length-1);const i=((u=r[n])==null?void 0:u.title)||C.getStepByWord(R.value.chapterCount,n+1);return i&&` (${i})`});h.useListener(m,"pointerenter",()=>{clearTimeout(f.hover),f.hover=setTimeout(()=>{p.value=!0},100)}),h.useListener(m,"pointerleave",()=>{clearTimeout(f.hover),f.hover=setTimeout(()=>{p.value=!1},100)}),h.useListener(m,"pointermove",w.throttle(t=>{v.value||N(t)}));function N(t){if(!m.value)return;const r=w.boundRange(t.clientX-m.value.getBoundingClientRect().left,0,g);b.value=r/g*s.duration,E.value=r+d[0],B.value=w.boundRange(r-S*.5+d[0],0,g-S+d[0]+d[1])}function W(t){var n,i;if(!y.value)return;const r=getComputedStyle(y.value);d=[parseFloat(r.paddingLeft),parseFloat(r.paddingRight)],g=((i=(n=t.borderBoxSize)==null?void 0:n[0])==null?void 0:i.inlineSize)??t.contentRect.width}function Z(t){var r,n;S=((n=(r=t.borderBoxSize)==null?void 0:r[0])==null?void 0:n.inlineSize)??t.contentRect.width}function D(t){_("change",t/1e3*s.duration)}const L=w.throttle(N);function O(){k.value=s.time,document.addEventListener("pointermove",L),document.addEventListener("pointerup",x)}function x(){document.removeEventListener("pointermove",L),document.removeEventListener("pointerup",x)}return(t,r)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"wrapper",ref:y,class:e.normalizeClass(X.value)},[e.createVNode(e.unref(P),{"on-resize":W},{default:e.withCtx(()=>[e.createVNode(e.unref(H),{ref_key:"slider",ref:z,class:e.normalizeClass(e.unref(o).be("progress-slider")),value:$.value*10,max:1e3,vertical:!1,range:!1,"hide-tip":"","trigger-fade":"","flip-marker":"",disabled:a.duration<=0,onChange:D,onPointerdown:O},{filler:e.withCtx(n=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(M.value,(i,u)=>(e.openBlock(),e.createElementBlock("div",{key:u,class:e.normalizeClass(e.unref(o).be("progress-segment")),style:e.normalizeStyle({width:`${i.width}%`})},[e.createElementVNode("div",{class:e.normalizeClass(e.unref(o).be("progress-track"))},[e.createElementVNode("div",{class:e.normalizeClass(e.unref(o).be("progress-filler")),style:e.normalizeStyle({visibility:n.percent[1]<i.startPercent?"hidden":void 0,transform:`translateX(${Math.min(Math.max(n.percent[1]-i.startPercent,0)/i.durationPercent*100-100,0)}%) translateZ(0)`})},null,6)],2)],6))),128))]),trigger:e.withCtx(()=>[e.renderSlot(t.$slots,"trigger",{},()=>[e.createElementVNode("div",{class:e.normalizeClass(e.unref(o).be("progress-trigger"))},null,2)])]),_:3},8,["class","value","disabled"])]),_:3}),e.createElementVNode("div",{class:e.normalizeClass({[e.unref(o).be("progress-indicator")]:!0,[e.unref(o).bem("progress-indicator","active")]:p.value&&!v.value}),style:e.normalizeStyle({transform:`translateX(${E.value}px) translateZ(0)`})},null,6),a.noPreview?e.createCommentVNode("",!0):(e.openBlock(),e.createBlock(e.unref(P),{key:0,"on-resize":Z},{default:e.withCtx(()=>[e.createElementVNode("div",{ref_key:"preview",ref:T,class:e.normalizeClass({[e.unref(o).be("preview")]:!0,[e.unref(o).bem("preview","has-image")]:a.previewSrc,[e.unref(o).bem("preview","active")]:p.value||v.value}),style:e.normalizeStyle({transform:`translateX(${B.value}px) translateZ(0)`})},[e.renderSlot(t.$slots,"preview",{},()=>[a.previewSrc?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(e.unref(o).be("preview-image"))},[e.createElementVNode("img",{src:a.previewSrc},null,8,j)],2)):e.createCommentVNode("",!0),e.createElementVNode("div",{class:e.normalizeClass(e.unref(o).be("preview-time"))},e.toDisplayString(e.unref(A.formatSeconds)(b.value)+F.value),3)])],6)]),_:3}))],2))}});module.exports=G;
//# sourceMappingURL=video-progress.vue2.cjs.map