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

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

"use strict";const e=require("vue");require("../full-screen/index.cjs");require("../icon/index.cjs");require("../progress/index.cjs");require("../renderer/index.cjs");const c=require("@vexip-ui/config");require("./video-control.vue.cjs");require("./video-progress.vue.cjs");require("./video-timer.vue.cjs");require("./video-volume.vue.cjs");const h=require("@vexip-ui/hooks"),_=require("@vexip-ui/utils"),ke=require("./props.cjs"),L=require("./symbol.cjs"),y=require("./video-control.vue2.cjs"),f=require("../icon/icon.cjs"),Re=require("./video-timer.vue2.cjs"),Ie=require("./video-volume.vue2.cjs"),Fe=require("../progress/progress.vue2.cjs"),Me=require("./video-progress.vue2.cjs"),Ae=require("../renderer/renderer.cjs"),De=require("../full-screen/full-screen.vue2.cjs"),Ke=e.defineComponent({name:"Video",props:ke.videoProps,emits:["update:src","update:time","update:volume","update:playback-rate"],setup(le,{slots:b,emit:T,expose:ae}){var Z,ee;const l=c.useProps("video",le,{src:{static:!0,default:""},srcList:{static:!0,default:null},noControls:!1,videoAttrs:null,time:{static:!0,default:0},volume:1,playbackRate:1,playbackRates:()=>[.5,1,1.25,1.5,2],controlLayout:()=>L.videoDefaultControlLayout,poster:"",video:{static:!0,default:null},segments:()=>[],loading:!1,loadingIcon:null,loadingEffect:null,shortcuts:()=>({}),slots:()=>({})}),u=c.useNameHelper("video"),v=c.useLocale("video"),n=c.useIcons(),{timer:R}=h.useSetTimeout(),B=_.isClient&&document.pictureInPictureEnabled,w=e.ref(l.src||((Z=l.srcList)==null?void 0:Z[0])||((ee=l.videoAttrs)==null?void 0:ee.src)||""),i=e.ref(!1),s=e.ref(l.time),d=e.ref(!1),p=e.ref(0),N=e.ref(l.volume),V=e.ref(!1),C=e.ref(!0),I=e.ref(!1),D=e.ref(l.playbackRate),x=e.ref(!1),q=e.ref(!1),S=e.ref(!1),m=e.ref(1.3),P=e.ref(),F=e.computed(()=>{var t;return(t=P.value)==null?void 0:t.wrapper}),E=e.ref(),z=e.ref(),ue=e.computed(()=>{var t;return(t=P.value)==null?void 0:t.placeId}),G=e.computed(()=>{var t;return((t=P.value)==null?void 0:t.full)??!1}),r=e.computed(()=>E.value||l.video),k=e.reactive({}),g=e.computed(()=>({...L.videoDefaultShortcuts,...l.shortcuts}));function re(t,a){return k[t]?(console.warn(`[vexip-ui:Video] duplicate shortcut key '${t}' and it will be ignored`),_.noop):(k[t]=a,()=>{delete k[t]})}h.useModifier({target:F,passive:!1,onKeyDown:(t,a)=>{t.ctrlKey||t.shiftKey||t.altKey||t.metaKey||_.decide([[()=>a.up,()=>{N.value=Math.min(1,N.value+.05)}],[()=>a.down,()=>N.value=Math.max(0,N.value-.05)],[()=>a.right,()=>s.value=Math.min(p.value,s.value+5)],[()=>a.left,()=>s.value=Math.max(0,s.value-5)],[()=>a[g.value.volume||"M"],()=>{var o;return(o=z.value)==null?void 0:o.toggleMute()}],...Object.keys(k).map(o=>[()=>a[o],k[o]])],{afterMatchAny:a.resetAll})}});const ne=e.computed(()=>[u.b(),u.bs("vars"),{[u.bm("loading")]:l.loading}]),J=e.computed(()=>i.value?n.value.pause:n.value.play),K=e.computed(()=>i.value?n.value.pauseState:n.value.playState),oe=e.computed(()=>{const t=l.playbackRates.map(a=>{const o=typeof a=="number"?{value:a}:a;return o.value=_.toNumber(o.value),o.label=o.label||`${_.decimalLength(o.value)?o.value:o.value.toFixed(1)}x`,o}).filter(a=>a.value>0).sort((a,o)=>o.value-a.value);if(!t.find(a=>a.value===1)){const a=t.findIndex(o=>o.value<1);t.splice((a+t.length)%t.length,0,{value:1,label:"1.0x"})}return t}),ce=e.computed(()=>l.segments.map(t=>typeof t=="number"?{time:t}:t).filter(t=>t.time>=0&&t.time<=p.value).sort((t,a)=>t.time-a.time)),se=e.computed(()=>p.value?s.value/p.value*100:0),M=e.computed(()=>{var a;const t=l.src||((a=l.videoAttrs)==null?void 0:a.src)||"";return t&&l.srcList&&!l.srcList.includes(t)?[t].concat(l.srcList):l.srcList||[t]}),W=e.computed(()=>M.value?M.value.indexOf(w.value):-1),ie=e.shallowReadonly(e.reactive({playing:i,currentTime:s,currentVolume:N,currentRate:D,interacting:x,flipped:S,canPlay:d,duration:p,pip:V,hasPlayed:q,togglePlaying:O,togglePip:Q,changeRate:$,changeTime:A,changeVolume:j,toggleFull:H}));e.watch(()=>l.src,t=>{U(),w.value=t},{flush:"pre"}),e.watch(()=>l.time,t=>{A(t,!1)}),e.watch(()=>l.volume,t=>{j(t,!1)}),e.watch(()=>l.playbackRate,t=>{$(t,!1)}),e.watch(i,t=>{t?requestAnimationFrame(()=>{C.value=!1}):C.value=!0}),e.watch(d,t=>{t||(i.value=!1)}),e.watch(C,t=>{t&&(I.value=!1)}),e.onMounted(()=>{e.nextTick(()=>{var t;_.isClient&&!r.value&&((t=P.value)!=null&&t.wrapper)&&(E.value=P.value.wrapper.querySelector("video")??void 0),r.value&&s.value>0&&(r.value.currentTime=s.value)})}),e.provide(L.VIDEO_STATE,e.reactive({placeId:ue,iconScale:m,addShortcut:re})),h.useListener(r,"canplay",()=>{var t;d.value=!0,p.value=((t=r.value)==null?void 0:t.duration)??0}),h.useListener(r,"timeupdate",()=>{var t;s.value=((t=r.value)==null?void 0:t.currentTime)??0,T("update:time",s.value),c.emitEvent(l.onTimeChange,s.value)}),h.useListener(r,"ended",ve),h.useListener(r,"enterpictureinpicture",()=>{V.value=!0,c.emitEvent(l.onTogglePip,!0)}),h.useListener(r,"leavepictureinpicture",()=>{V.value=!1,c.emitEvent(l.onTogglePip,!1)}),ae({currentSrc:w,playing:i,currentTime:s,duration:p,pip:V,interacting:x,stateHidden:I,wrapper:F,video:E,resetMetaState:U});function O(t=!i.value){var a,o,te;if(!d.value){i.value=!1;return}i.value=t,i.value?(q.value=!0,(a=r.value)==null||a.play()):(o=r.value)==null||o.pause(),(te=F.value)==null||te.focus(),c.emitEvent(i.value?l.onPlay:l.onPause)}function ve(){var t;i.value=!1,(t=r.value)==null||t.pause(),c.emitEvent(l.onEnded)}async function Q(){!B||!r.value||(V.value?await document.exitPictureInPicture():await r.value.requestPictureInPicture())}function $(t,a=!0){D.value=t,r.value&&(r.value.playbackRate=t),a&&(T("update:playback-rate",t),c.emitEvent(l.onRateChange,t))}function A(t,a=!0){s.value=t,r.value&&t!==r.value.currentTime&&(r.value.currentTime=t,t=r.value.currentTime),a&&(T("update:time",t),c.emitEvent(l.onTimeChange,t))}function j(t,a=!0){N.value=t,r.value&&(r.value.volume=t),a&&(T("update:volume",t),c.emitEvent(l.onVolumeChange,t))}function de(t=!S.value,a=!0){S.value=t,a&&c.emitEvent(l.onToggleFlip,S.value)}function pe(t){e.nextTick(()=>{var a;(a=F.value)==null||a.focus(),c.emitEvent(l.onToggleFull,t)})}function U(){var t;i.value=!1,s.value=0,d.value=!1,p.value=0,V.value=!1,q.value=!1,(t=r.value)==null||t.pause()}function fe(){clearTimeout(R.interact),x.value=!0,R.interact=setTimeout(()=>{x.value=!1},3e3)}function me(){clearTimeout(R.interact),R.interact=setTimeout(()=>{x.value=!1},500)}function Y(t){const a=M.value;l.srcList&&(w.value=a[(W.value+t+a.length)%a.length],T("update:src",w.value))}function ge(){Y(-1),c.emitEvent(l.onPrev)}function ye(){Y(1),c.emitEvent(l.onNext)}function H(t){var a;(a=P.value)==null||a.toggle(t)}function be(){c.emitEvent(l.onRefresh)}function he(){return e.createVNode(y,{class:u.be("play-prev"),label:v.value.playPrev,shortcut:g.value["play-prev"],disabled:!!l.srcList&&!W.value,onClick:ge},{default:()=>[e.createVNode(f,e.mergeProps(n.value.playPrev,{scale:+(n.value.playPrev.scale||1)*m.value}),null)]})}function Ne(){return e.createVNode(y,{class:u.be("play"),label:i.value?v.value.pause:v.value.play,shortcut:g.value.play,disabled:!d.value,onClick:O},{default:()=>[e.createVNode(f,e.mergeProps(J.value,{scale:+(J.value.scale||1)*m.value*1.16}),null)]})}function Ve(){return e.createVNode(y,{class:u.be("play-next"),label:v.value.playNext,shortcut:g.value["play-next"],disabled:!!l.srcList&&W.value===M.value.length-1,onClick:ye},{default:()=>[e.createVNode(f,e.mergeProps(n.value.playNext,{scale:+(n.value.playNext.scale||1)*m.value}),null)]})}function Pe(){return e.createVNode(y,{class:u.be("play-refresh"),label:v.value.refresh,shortcut:g.value.refresh,onClick:be},{default:()=>[e.createVNode(f,e.mergeProps(n.value.refresh,{scale:+(n.value.refresh.scale||1)*m.value}),null)]})}function _e(){return e.createVNode(Re,{time:s.value,duration:p.value,disabled:!d.value,onChange:A},null)}function we(){return e.createVNode(y,{class:u.be("playback-rate"),type:"select",value:D.value,options:oe.value,onSelect:t=>$(t.value)},null)}function Ce(){return e.createVNode(Ie,{ref:z,volume:N.value,onChange:j},null)}function xe(){return e.createVNode(y,{class:u.be("flip"),label:v.value.flip,shortcut:g.value.flip,onClick:de},{default:()=>[e.createVNode(f,e.mergeProps(n.value.flipX,{scale:+(n.value.flipX.scale||1)*m.value}),null)]})}function Le(){return!B||!E.value?null:e.createVNode(y,{class:u.be("pip"),label:V.value?v.value.exitPip:v.value.requestPip,shortcut:g.value.pip,disabled:!d.value,onClick:Q},{default:()=>[e.createVNode(f,e.mergeProps(n.value.pip,{scale:+(n.value.pip.scale||1)*m.value}),null)]})}function Te(){return e.createVNode(y,{class:u.be("full-window"),label:G.value==="window"?v.value.fullWindowExit:v.value.fullWindow,shortcut:g.value["full-window"],onClick:()=>H("window")},{default:()=>[e.createVNode(f,e.mergeProps(n.value.fullWindow,{scale:+(n.value.fullWindow.scale||1)*m.value}),null)]})}function qe(){return e.createVNode(y,{class:u.be("full-browser"),label:G.value==="browser"?v.value.fullScreenExit:v.value.fullScreen,shortcut:g.value["full-browser"],onClick:()=>H("browser")},{default:()=>[e.createVNode(f,e.mergeProps(n.value.fullScreen,{scale:+(n.value.fullScreen.scale||1)*m.value}),null)]})}function X(t){var a;switch(t){case"play-prev":return he();case"play":return Ne();case"play-next":return Ve();case"refresh":return Pe();case"timer":return _e();case"playback-rate":return we();case"volume":return Ce();case"flip":return xe();case"pip":return Le();case"full-window":return Te();case"full-browser":return qe();default:return(a=h.createSlotRender(b,[`control-${t}`,`control${_.toCapitalCase(t)}`]))==null?void 0:a(ie)}}function Se(){return l.noControls?e.createVNode(Fe,{class:u.be("progress-line"),percentage:se.value,"stroke-width":1,"info-type":"none"},null):e.createVNode("div",{class:{[u.be("controls")]:!0,[u.bem("controls","collapsed")]:q.value&&!x.value}},[e.createVNode("section",{class:u.be("controls-top")},[e.createVNode(Me,{time:s.value,duration:p.value,segments:ce.value,onChange:A},null)]),e.createVNode("section",{class:u.be("controls-bottom")},[e.createVNode("div",{class:u.be("controls-left")},[(l.controlLayout.left??L.videoDefaultControlLayout.left).map(X)]),e.createVNode("div",{class:u.be("controls-center")},[(l.controlLayout.center??L.videoDefaultControlLayout.center).map(X)]),e.createVNode("div",{class:u.be("controls-right")},[(l.controlLayout.right??L.videoDefaultControlLayout.right).map(X)])])])}function Ee(){return e.createVNode("div",{class:u.be("main")},[e.createVNode("div",{class:[u.be("player"),S.value&&u.bem("player","flipped")],onClick:()=>O()},[e.renderSlot(b,"player",{},()=>{var t;return[e.createVNode("video",e.mergeProps(l.videoAttrs,{ref:E,class:u.be("video"),src:w.value||((t=l.videoAttrs)==null?void 0:t.src)}),[e.renderSlot(b,"default")])]})]),!q.value&&(l.poster||b.poster||l.slots.poster)&&e.createVNode("div",{class:u.be("poster")},[e.renderSlot(b,"poster",void 0,()=>[e.createVNode(Ae,{renderer:l.slots.poster},{default:()=>[e.createVNode("img",{src:l.poster},null)]})])]),e.createVNode(e.Transition,{name:u.bs("state-effect"),onAfterLeave:()=>I.value=!0},{default:()=>[d.value&&C.value&&e.createVNode("div",{class:u.be("state")},[e.renderSlot(b,"state",{active:C.value},()=>[e.createVNode(f,e.mergeProps(K.value,{scale:+(K.value.scale||1)*5}),null)])])]}),e.createVNode(e.Transition,{name:u.ns("fade")},{default:()=>[(!d.value&&!C.value||l.loading&&I.value)&&e.createVNode("div",{class:u.be("loading")},[e.renderSlot(b,"loading",{},()=>[e.createVNode(f,e.mergeProps(n.value.loading,{icon:l.loadingIcon||n.value.loading.icon,label:"loading",effect:l.loadingEffect||n.value.loading.effect,scale:+(K.value.scale||1)*5}),null)])])]}),Se(),e.renderSlot(b,"extra")])}return()=>e.createVNode(De,{ref:P,class:ne.value,tabindex:"-1",onToggle:pe,onPointermove:fe,onPointerleave:me},{default:Ee})}});module.exports=Ke;
//# sourceMappingURL=video.cjs.map