@farris/ui-vue/components/video/index.umd.cjs

Farris Vue, a Farris Design based Vue3 component library.

(function(a,i){typeof exports=="object"&&typeof module<"u"?i(exports,require("vue"),require("../dynamic-resolver/index.umd.js"),require("../designer-canvas/index.umd.js"),require("../component/index.umd.js")):typeof define=="function"&&define.amd?define(["exports","vue","../dynamic-resolver/index.umd.js","../designer-canvas/index.umd.js","../component/index.umd.js"],i):(a=typeof globalThis<"u"?globalThis:a||self,i(a.video={},a.Vue,a.dynamicResolver,a.designerCanvas,a.component))})(this,function(a,i,w,$,C){"use strict";const R={$schema:"https://json-schema.org/draft/2020-12/schema",$id:"https://farris-design.gitee.io/video.schema.json",title:"video",description:"A Farris Video Component",type:"object",properties:{id:{description:"The unique identifier for a Video",type:"string"},type:{description:"The type string of Video component",type:"string",default:"video"},appearance:{description:"",type:"object",properties:{class:{type:"string"},style:{type:"string"}},default:{}},visible:{description:"",type:"boolean",default:!0}},required:["id","type"]},T=new Map([["appearance",w.resolveAppearance]]);function q(t,n,r){return n}const L={title:"verify-detail",description:"A Farris Component",type:"object",categories:{basic:{description:"Basic Infomation",title:"基本信息",properties:{id:{description:"组件标识",title:"标识",type:"string",readonly:!0},type:{description:"组件类型",title:"控件类型",type:"select",editor:{type:"waiting for modification",enum:[]}}}}}},g={src:{type:String,required:!0,default:""},autoplay:{type:Boolean,default:!0},controls:{type:Boolean,default:!0},loop:{type:Boolean,default:!1},muted:{type:Boolean,default:!1},preload:{type:String,default:"none"},poster:{type:String},width:{type:[String,Number],default:300},height:{type:[String,Number],default:168}},y=w.createPropsResolver(g,R,T,q,L);function S(t,n){function r(e){e.stopPropagation(),n.emit("abort")}function s(e){e.stopPropagation(),n.emit("play")}function d(e){e.stopPropagation(),n.emit("pause")}function l(e){e.stopPropagation(),n.emit("ended")}function p(e){e.stopPropagation(),n.emit("durationchange")}function c(e){e.stopPropagation(),n.emit("error")}function m(e){e.stopPropagation(),n.emit("loadeddata")}function u(e){e.stopPropagation(),n.emit("loadedmetadata")}function h(e){e.stopPropagation(),n.emit("loadstart")}function v(e){e.stopPropagation(),n.emit("playing")}function P(e){e.stopPropagation(),n.emit("progress")}function V(e){e.stopPropagation(),n.emit("timeupdate")}function b(e){e.stopPropagation(),n.emit("volumechange")}function j(e){e.stopPropagation(),n.emit("canplay")}return{onAbort:r,onPlay:s,onPause:d,onEnded:l,onDurationchange:p,onError:c,onLoadeddata:m,onLoadedmetadata:u,onLoadstart:h,onPlaying:v,onProgress:P,onTimeupdate:V,onVolumechange:b,onCanplay:j}}const f=i.defineComponent({name:"FVideo",props:g,emits:["abort","play","pause","ended","durationchange","canplay","error","loadeddata","loadedmetadata","loadstart","playing","progress","timeupdate","volumechange"],setup(t,n){const r=i.ref(),{onAbort:s,onPlay:d,onPause:l,onEnded:p,onDurationchange:c,onError:m,onLoadeddata:u,onLoadedmetadata:h,onLoadstart:v,onPlaying:P,onProgress:V,onTimeupdate:b,onVolumechange:j,onCanplay:e}=S(t,n);return i.onUnmounted(()=>{}),()=>i.createVNode("video",{ref:r,src:t.src,autoplay:t.autoplay,controls:t.controls,loop:t.loop,muted:t.muted,width:t.width,height:t.height,poster:t.poster,onAbort:o=>s(o),onPlay:o=>d(o),onPause:o=>l(o),onEnded:o=>p(o),onDurationchange:o=>c(o),onError:o=>m(o),onLoadeddata:o=>u(o),onLoadedmetadata:o=>h(o),onLoadstart:o=>v(o),onPlaying:o=>P(o),onProgress:o=>V(o),onTimeupdate:o=>b(o),onVolumechange:o=>j(o),onCanplay:o=>e(o)},[i.createTextVNode("Your browser does not support the video tag.")])}});function D(t,n){const r=i.ref(t.width),s=i.ref(t.height);let d;i.watch(n,p=>{p&&(r.value=p.clientWidth,d=new ResizeObserver(c=>{if(!c||c.length<1)return;const u=c[0].contentRect;u&&(r.value=u.width)}),d.observe(p))});function l(){d&&d.disconnect()}return{destory:l,width:r,height:s}}const M=i.defineComponent({name:"FVideoDesign",props:g,setup(t,n){const r=i.ref(),s=i.inject("design-item-context"),d=i.inject("designer-host-service"),l=C.useDesignerRules(s,d),p=$.useDesignerComponent(r,s,l),{width:c,height:m,destory:u}=D(t,r);return i.onMounted(()=>{r.value.componentInstance=p}),i.onUnmounted(()=>{u()}),n.expose(p.value),()=>i.createVNode("div",{ref:r,class:"drag-container","data-dragref":`${s.schema.id}-container`},[i.createVNode("video",{src:t.src,autoplay:t.autoplay,controls:t.controls,loop:t.loop,muted:t.muted,width:c.value,height:m.value},[i.createTextVNode("Your browser does not support the video tag.")])])}}),F={install(t){t.component(f.name,f)},register(t,n,r,s){t.video=f,n.video=y},registerDesigner(t,n,r){t.video=M,n.video=y}};a.FVideo=f,a.default=F,a.propsResolver=y,a.videoProps=g,Object.defineProperties(a,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});