| 12 |
- import{bg as we,bh as be,d as de,aC as te,r as oe,c as L,f as ue,o as he,C as Q,j as ke,h as le,Z as T,$ as G,a0 as c,n as o,T as f,a7 as O,a5 as V,a6 as D,av as J,a1 as W,a2 as A,a3 as F,a9 as j,ay as re,bn as ee,bA as Me,c3 as Ce,cm as Ie,cn as ze,co as Te,aQ as me,c1 as Ue,aH as Pe,aI as Se,at as _e,bo as Re,bc as P,ba as He,bm as Ee,aG as We,bp as $e}from"./index-a8341fa1.js";/* empty css *//* empty css *//* empty css */import"./dayjs-919e6097.js";import{V as De}from"./jb4-7b5b6ba3.js";import{_ as Oe}from"./FormItem-0af405a4.js";import"./index-298cfc47.js";import{F as Ne}from"./Form-49be2713.js";import"./canvas-b3f2b616.js";import"./index-04d608f8.js";import"./toInteger-461bf1e0.js";const B=we({requestOptions:{apiUrl:()=>be("mix")}});function Xe(p){const y={dst_stream_path:p.dst_stream,layout:p.layout,inputs:p.inputs.map(n=>({stream_url:n.stream_path,x:n.x,y:n.y,width:n.width,height:n.height,z_index:n.z_index,crop_enabled:n.crop_enabled,crop_x:n.crop_x,crop_y:n.crop_y,crop_width:n.crop_width,crop_height:n.crop_height,audio_enabled:n.audio_enabled,audio_index:n.audio_index})),encodec:p.encodec,encodec_params:p.encodec_params,audio_encodec:p.audio_encodec,audio_encodec_params:p.audio_encodec_params,global_options:p.global_options,fps:p.fps,scale_mode:p.scale_mode};return B.post({url:"/launch",data:y})}function Ae(){return B.get({url:"/list"})}function Le(p){return B.get({url:"/get",params:{dst_stream_path:p}})}function Ye(p){return B.post({url:"/close",data:{dst_stream_path:p}})}function Ve(p){return B.post({url:"/update",data:p})}const Fe={class:"canvas-form-item-label"},je=["onMousedown"],Be={class:"stream-rect__label"},qe=["onMousedown"],Ge={class:"tab-label"},Ke=["onClick"],Ze={class:"mix-input-block"},Qe=800,ie=450,Je=de({__name:"MixForm",props:{editData:{}},setup(p,{expose:y}){const{t:n}=te(),C=p,$=["CUSTOM","GRID","PIP","HORIZONTAL","VERTICAL"].map(t=>({label:t,value:t})),x=()=>({streamPath:"",x:null,y:null,width:null,height:null,zIndex:null,audioEnabled:!0,previewEnabled:!1}),e=oe({dstStream:"live/mixed",layoutType:"CUSTOM",canvasWidth:1920,canvasHeight:1080,backgroundColor:"#000000",inputs:[x()]}),N=()=>{C.editData?(e.dstStream=C.editData.dst_stream_path||"",e.layoutType=C.editData.layout?.type||"CUSTOM",e.canvasWidth=C.editData.layout?.canvas_width||1920,e.canvasHeight=C.editData.layout?.canvas_height||1080,e.backgroundColor=C.editData.layout?.background_color||"#000000",e.inputs=C.editData.inputs?.map(t=>({streamPath:t.stream_url||"",x:t.x||null,y:t.y||null,width:t.width||null,height:t.height||null,zIndex:t.z_index||null,audioEnabled:t.audio_enabled??!0,previewEnabled:!1}))||[x()],e.inputs.length===0&&(e.inputs=[x()])):(e.dstStream="live/mixed",e.layoutType="CUSTOM",e.canvasWidth=1920,e.canvasHeight=1080,e.backgroundColor="#000000",e.inputs=[x()]),k.value=0},I=()=>{const t=e.canvasWidth||1920,r=e.canvasHeight||1080,s=x();e.layoutType!=="CUSTOM"?(e.inputs.push(s),k.value=e.inputs.length-1,S()):(s.x=Math.max(0,(t-200)/2),s.y=Math.max(0,(r-150)/2),s.width=200,s.height=150,s.zIndex=e.inputs.length+1,e.inputs.push(s),k.value=e.inputs.length-1)},v=t=>{e.inputs.length!==1&&(e.inputs.splice(t,1),k.value===t?k.value=Math.max(0,t-1):k.value>t&&k.value--,e.layoutType!=="CUSTOM"&&S())},S=()=>{if(!e.inputs.length)return;const t=e.canvasWidth||1920,r=e.canvasHeight||1080,s=e.inputs.length;switch(e.layoutType){case"CUSTOM":break;case"GRID":{const a=Math.ceil(Math.sqrt(s)),m=Math.ceil(s/a),i=t/a,d=r/m,u=10;e.inputs.forEach((g,b)=>{const M=b%a,z=Math.floor(b/a);g.x=M*i+u/2,g.y=z*d+u/2,g.width=i-u,g.height=d-u,g.zIndex=b+1});break}case"PIP":{const a=t*.25,m=r*.25,i=20;e.inputs.forEach((d,u)=>{if(u===0)d.x=0,d.y=0,d.width=t,d.height=r,d.zIndex=1;else{const g=u-1,b=Math.floor(g/2),M=g%2;d.x=t-a-i-b*(a+i),d.y=r-m-i-M*(m+i),d.width=a,d.height=m,d.zIndex=u+1}});break}case"HORIZONTAL":{const a=t/s,m=r;e.inputs.forEach((i,d)=>{i.x=d*a,i.y=0,i.width=a,i.height=m,i.zIndex=d+1});break}case"VERTICAL":{const a=t,m=r/s;e.inputs.forEach((i,d)=>{i.x=0,i.y=d*m,i.width=a,i.height=m,i.zIndex=d+1});break}}Q(()=>{E()})},R=L(),k=L(0),H=L(1),K=["nw","ne","sw","se","n","s","w","e"],q=t=>{k.value=Number(t)},Y=ue(()=>{const t=e.canvasWidth||1920,r=e.canvasHeight||1080,s=H.value,a=e.backgroundColor||"#000000";return{width:`${t*s}px`,height:`${r*s}px`,backgroundColor:a,position:"relative"}}),E=()=>{if(!R.value)return;const t=e.canvasWidth||1920,r=e.canvasHeight||1080,s=32,a=R.value.clientWidth-s,m=Math.min(a*(r/t),ie-s),i=a/t,d=m/r;H.value=Math.min(i,d,(Qe-s)/t,(ie-s)/r)},Z=(t,r)=>{const s=H.value,a=t.x??0,m=t.y??0,i=t.width??200,d=t.height??150,u=t.zIndex??r+1;return{left:`${a*s}px`,top:`${m*s}px`,width:`${i*s}px`,height:`${d*s}px`,zIndex:u}},pe=(t,r)=>{const s=H.value,a=t.x??0,m=t.y??0,i=t.width??200,d=t.height??150,u=2,g=(t.zIndex??r+1)-1;return{left:`${(a+u)*s}px`,top:`${(m+u)*s}px`,width:`${(i-u*2)*s}px`,height:`${(d-u*2)*s}px`,zIndex:g}},h=oe({isDragging:!1,isResizing:!1,dragType:"",startX:0,startY:0,startRect:{x:0,y:0,width:0,height:0},targetIndex:-1}),ve=t=>{if(!R.value)return{x:0,y:0};const r=R.value.querySelector(".canvas-wrapper");if(!r)return{x:0,y:0};const s=r.getBoundingClientRect(),a=(t.clientX-s.left)/H.value,m=(t.clientY-s.top)/H.value;return{x:a,y:m}},ge=t=>{if(t.target.classList.contains("stream-rect__resize-handle"))return;const r=ve(t);let s=-1;for(let a=e.inputs.length-1;a>=0;a--){const m=e.inputs[a],i=m.x??0,d=m.y??0,u=m.width??200,g=m.height??150;if(r.x>=i&&r.x<=i+u&&r.y>=d&&r.y<=d+g){s=a;break}}s>=0&&(k.value=s)},xe=(t,r)=>{t.stopPropagation(),k.value=r;const s=e.inputs[r];h.isDragging=!0,h.dragType="move",h.targetIndex=r,h.startX=t.clientX,h.startY=t.clientY,h.startRect={x:s.x??0,y:s.y??0,width:s.width??200,height:s.height??150}},fe=(t,r,s)=>{t.stopPropagation();const a=e.inputs[r];h.isResizing=!0,h.dragType=s,h.targetIndex=r,h.startX=t.clientX,h.startY=t.clientY,h.startRect={x:a.x??0,y:a.y??0,width:a.width??200,height:a.height??150}},ae=t=>{if(!h.isDragging&&!h.isResizing||!R.value||!R.value.querySelector(".canvas-wrapper"))return;const s=(t.clientX-h.startX)/H.value,a=(t.clientY-h.startY)/H.value,m=e.inputs[h.targetIndex],i=e.canvasWidth||1920,d=e.canvasHeight||1080;if(h.isDragging&&h.dragType==="move"){let u=h.startRect.x+s,g=h.startRect.y+a;const b=h.startRect.width,M=h.startRect.height;u=Math.max(0,Math.min(u,i-b)),g=Math.max(0,Math.min(g,d-M)),m.x=Math.round(u),m.y=Math.round(g)}else if(h.isResizing){const{x:u,y:g,width:b,height:M}=h.startRect;let z=u,U=g,l=b,_=M;switch(h.dragType){case"nw":z=u+s,U=g+a,l=b-s,_=M-a;break;case"ne":U=g+a,l=b+s,_=M-a;break;case"sw":z=u+s,l=b-s,_=M+a;break;case"se":l=b+s,_=M+a;break;case"n":U=g+a,_=M-a;break;case"s":_=M+a;break;case"w":z=u+s,l=b-s;break;case"e":l=b+s;break}l<50&&(h.dragType.includes("w")&&(z=u+b-50),l=50),_<50&&(h.dragType.includes("n")&&(U=g+M-50),_=50),z<0&&(l+=z,z=0),U<0&&(_+=U,U=0),z+l>i&&(l=i-z),U+_>d&&(_=d-U),m.x=Math.round(z),m.y=Math.round(U),m.width=Math.round(l),m.height=Math.round(_)}},se=()=>{h.isDragging=!1,h.isResizing=!1,h.dragType="",h.targetIndex=-1},ne=()=>{E()};return he(()=>{N(),Q(()=>{E(),window.addEventListener("resize",ne),window.addEventListener("mousemove",ae),window.addEventListener("mouseup",se)})}),ke(()=>{window.removeEventListener("resize",ne),window.removeEventListener("mousemove",ae),window.removeEventListener("mouseup",se)}),le(()=>e.inputs.length,t=>{k.value>=t&&(k.value=Math.max(0,t-1))}),le(()=>[e.canvasWidth,e.canvasHeight],()=>{Q(()=>{E(),e.layoutType!=="CUSTOM"&&S()})}),y({form:e,resetForm:N}),(t,r)=>{const s=Me,a=Oe,m=Ce,i=Ie,d=ze,u=Te,g=me,b=Ue,M=Pe,z=Se,U=Ne;return T(),G(U,{layout:"vertical"},{default:c(()=>[o(u,{gutter:16},{default:c(()=>[o(i,{span:14},{default:c(()=>[o(a,{label:f(n)("routes.mix.输出流路径")},{default:c(()=>[o(s,{value:e.dstStream,"onUpdate:value":r[0]||(r[0]=l=>e.dstStream=l),placeholder:"live/mixed"},null,8,["value"])]),_:1},8,["label"]),o(u,{gutter:8},{default:c(()=>[o(i,{span:6},{default:c(()=>[o(a,{label:f(n)("routes.mix.布局类型")},{default:c(()=>[o(m,{value:e.layoutType,"onUpdate:value":r[1]||(r[1]=l=>e.layoutType=l),options:f($),placeholder:f(n)("routes.mix.请选择布局类型"),onChange:S},null,8,["value","options","placeholder"])]),_:1},8,["label"])]),_:1}),o(i,{span:6},{default:c(()=>[o(a,{label:f(n)("routes.mix.背景颜色")},{default:c(()=>[o(s,{value:e.backgroundColor,"onUpdate:value":r[2]||(r[2]=l=>e.backgroundColor=l),placeholder:"#000000 或 0x000000"},null,8,["value"])]),_:1},8,["label"])]),_:1}),o(i,{span:6},{default:c(()=>[o(a,{label:f(n)("routes.mix.画布宽度")},{default:c(()=>[o(d,{value:e.canvasWidth,"onUpdate:value":r[3]||(r[3]=l=>e.canvasWidth=l),min:0,style:{width:"100%"},onChange:E},null,8,["value"])]),_:1},8,["label"])]),_:1}),o(i,{span:6},{default:c(()=>[o(a,{label:f(n)("routes.mix.画布高度")},{default:c(()=>[o(d,{value:e.canvasHeight,"onUpdate:value":r[4]||(r[4]=l=>e.canvasHeight=l),min:0,style:{width:"100%"},onChange:E},null,8,["value"])]),_:1},8,["label"])]),_:1})]),_:1}),o(a,null,{label:c(()=>[O("div",Fe,[o(g,{size:"small",onClick:I},{default:c(()=>[V(D(f(n)("routes.mix.添加输入")),1)]),_:1})])]),default:c(()=>[O("div",{class:"canvas-container",ref_key:"canvasContainerRef",ref:R},[O("div",{class:"canvas-wrapper",style:J(Y.value),onMousedown:ge},[(T(!0),W(A,null,F(e.inputs,(l,_)=>(T(),W(A,{key:`preview-${_}`},[l.previewEnabled&&l.streamPath?(T(),W("div",{key:0,class:"stream-preview",style:J(pe(l,_))},[o(De,{streamPath:l.streamPath,format:"ws-flv",class:"stream-preview__player"},null,8,["streamPath"])],4)):j("",!0)],64))),128)),(T(!0),W(A,null,F(e.inputs,(l,_)=>(T(),W("div",{key:`rect-${_}`,class:re(["stream-rect",{active:k.value===_,"has-preview":l.previewEnabled&&l.streamPath}]),style:J(Z(l,_)),onMousedown:ee(w=>xe(w,_),["stop"])},[O("div",Be,D(f(n)("routes.mix.流"))+" "+D(_+1),1),k.value===_?(T(),W(A,{key:0},F(K,w=>O("div",{key:w,class:re(["stream-rect__resize-handle",`stream-rect__resize-handle--${w}`]),onMousedown:ee(ye=>fe(ye,_,w),["stop"])},null,42,qe)),64)):j("",!0)],46,je))),128))],36)],512)]),_:1})]),_:1}),o(i,{span:10},{default:c(()=>[o(a,{label:f(n)("routes.mix.输入流配置")},{default:c(()=>[o(z,{activeKey:k.value,"onUpdate:activeKey":r[5]||(r[5]=l=>k.value=l),type:"card",onChange:q,class:"input-stream-tabs"},{default:c(()=>[(T(!0),W(A,null,F(e.inputs,(l,_)=>(T(),G(M,{key:_},{tab:c(()=>[O("span",Ge,D(f(n)("routes.mix.流"))+" "+D(_+1),1),e.inputs.length>1?(T(),W("span",{key:0,class:"tab-close",onClick:ee(w=>v(_),["stop"])}," × ",8,Ke)):j("",!0)]),default:c(()=>[O("div",Ze,[o(a,{label:f(n)("routes.mix.输入流路径")},{default:c(()=>[o(s,{value:l.streamPath,"onUpdate:value":w=>l.streamPath=w,placeholder:f(n)("routes.mix.输入流路径占位符")},null,8,["value","onUpdate:value","placeholder"])]),_:2},1032,["label"]),o(u,{gutter:8},{default:c(()=>[o(i,{span:12},{default:c(()=>[o(a,{label:"X"},{default:c(()=>[o(d,{value:l.x,"onUpdate:value":w=>l.x=w,style:{width:"100%"}},null,8,["value","onUpdate:value"])]),_:2},1024)]),_:2},1024),o(i,{span:12},{default:c(()=>[o(a,{label:"Y"},{default:c(()=>[o(d,{value:l.y,"onUpdate:value":w=>l.y=w,style:{width:"100%"}},null,8,["value","onUpdate:value"])]),_:2},1024)]),_:2},1024)]),_:2},1024),o(u,{gutter:8},{default:c(()=>[o(i,{span:12},{default:c(()=>[o(a,{label:f(n)("routes.mix.宽度")},{default:c(()=>[o(d,{value:l.width,"onUpdate:value":w=>l.width=w,min:0,style:{width:"100%"}},null,8,["value","onUpdate:value"])]),_:2},1032,["label"])]),_:2},1024),o(i,{span:12},{default:c(()=>[o(a,{label:f(n)("routes.mix.高度")},{default:c(()=>[o(d,{value:l.height,"onUpdate:value":w=>l.height=w,min:0,style:{width:"100%"}},null,8,["value","onUpdate:value"])]),_:2},1032,["label"])]),_:2},1024)]),_:2},1024),o(u,{gutter:8},{default:c(()=>[o(i,{span:12},{default:c(()=>[o(a,{label:f(n)("routes.mix.层级")},{default:c(()=>[o(d,{value:l.zIndex,"onUpdate:value":w=>l.zIndex=w,style:{width:"100%"}},null,8,["value","onUpdate:value"])]),_:2},1032,["label"])]),_:2},1024),o(i,{span:12},{default:c(()=>[o(a,{label:f(n)("routes.mix.音频")},{default:c(()=>[o(b,{checked:l.audioEnabled,"onUpdate:checked":w=>l.audioEnabled=w,"checked-children":f(n)("routes.mix.开"),"un-checked-children":f(n)("routes.mix.关")},null,8,["checked","onUpdate:checked","checked-children","un-checked-children"])]),_:2},1032,["label"])]),_:2},1024)]),_:2},1024),o(a,{label:f(n)("routes.mix.预览")},{default:c(()=>[o(b,{checked:l.previewEnabled,"onUpdate:checked":w=>l.previewEnabled=w,"checked-children":"开","un-checked-children":"关"},null,8,["checked","onUpdate:checked"])]),_:2},1032,["label"])])]),_:2},1024))),128))]),_:1},8,["activeKey"])]),_:1},8,["label"])]),_:1})]),_:1})]),_:1})}}});const et=_e(Je,[["__scopeId","data-v-e1423fc4"]]),X=p=>p===null||Number.isNaN(p)?void 0:Number(p),ce=(p,y)=>{const{t:n}=te(),C=L(null),$=!!y;Re({content:()=>o(et,{ref:C,editData:y},null),modalConfig:{title:n($?"routes.mix.编辑混流配置":"routes.mix.创建混流配置"),width:1e3,maskClosable:!1,okText:n($?"routes.mix.更新":"routes.mix.开始"),cancelText:n("routes.mix.取消"),onOk:async()=>{if(!C.value)return P.error(n("routes.mix.无法获取表单实例")),Promise.reject(!1);const x=C.value.form;if(!x.dstStream||!x.dstStream.trim())return P.warning(n("routes.mix.请填写输出流路径")),Promise.reject(!1);if(!x.inputs.length)return P.warning(n("routes.mix.请至少配置一路输入流")),Promise.reject(!1);const e=x.inputs.findIndex(I=>!I.streamPath||!I.streamPath.trim());if(e>=0)return P.warning(n("routes.mix.请输入流的流路径",{index:e+1})),Promise.reject(!1);const N=x.inputs.findIndex(I=>I.streamPath.trim()===x.dstStream.trim());if(N>=0)return P.warning(n("routes.mix.输出流路径不能与输入流路径相同",{index:N+1})),Promise.reject(!1);try{const I={dst_stream:x.dstStream,layout:{type:x.layoutType,canvas_width:X(x.canvasWidth),canvas_height:X(x.canvasHeight),background_color:x.backgroundColor||void 0},inputs:x.inputs.map(v=>({stream_path:v.streamPath,x:X(v.x),y:X(v.y),width:X(v.width),height:X(v.height),z_index:X(v.zIndex),audio_enabled:v.audioEnabled}))};return $?(await Ve({dst_stream_path:I.dst_stream,layout:I.layout,inputs:I.inputs.map(v=>({stream_url:v.stream_path,x:v.x,y:v.y,width:v.width,height:v.height,z_index:v.z_index,audio_enabled:v.audio_enabled}))}),P.success(n("routes.mix.混流配置已更新"))):(await Xe(I),P.success(n("routes.mix.混流任务已启动"))),p?.(),Promise.resolve(!0)}catch(I){return console.error(n($?"routes.mix.更新混流失败":"routes.mix.启动混流失败"),I),P.error(n($?"routes.mix.更新混流失败":"routes.mix.启动混流失败")),Promise.reject(!1)}}}})},tt={class:"mix-header"},at=de({__name:"index",setup(p){const{t:y}=te(),n=L([]),C=L(!1),$=ue(()=>[{title:y("routes.mix.输出流路径"),dataIndex:"dst_stream_path",key:"dst_stream_path"},{title:y("routes.mix.输入流"),key:"src_streams"},{title:y("routes.mix.操作"),key:"action"}]),x=async()=>{C.value=!0;try{n.value=await Ae()}catch(v){console.error(y("routes.mix.获取混流列表出错"),v),P.error(y("routes.mix.获取混流列表失败"))}finally{C.value=!1}},e=async v=>{try{const S=await Le(v.dst_stream_path);ce(()=>{x()},S)}catch(S){console.error(y("routes.mix.获取混流配置出错"),S),P.error(y("routes.mix.获取混流配置失败"))}},N=v=>{He.confirm({title:y("routes.mix.确认关闭"),content:y("routes.mix.确定要关闭混流任务",{name:v.dst_stream_path}),onOk:async()=>{try{await Ye(v.dst_stream_path),P.success(y("routes.mix.混流任务已关闭")),x()}catch(S){console.error(y("routes.mix.关闭混流任务出错"),S),P.error(y("routes.mix.关闭混流任务失败"))}}})},I=()=>{ce(()=>{x()})};return he(()=>{x()}),(v,S)=>{const R=me,k=Ee,H=We,K=$e;return T(),W("div",null,[O("div",tt,[o(R,{type:"primary",onClick:I},{default:c(()=>[V(D(f(y)("routes.mix.创建混流")),1)]),_:1})]),o(K,{columns:$.value,"data-source":n.value,loading:C.value,rowKey:"dst_stream_path",pagination:!1},{bodyCell:c(({column:q,record:Y})=>[q.key==="src_streams"?(T(!0),W(A,{key:0},F(Y.src_streams,(E,Z)=>(T(),G(k,{key:Z,style:{margin:"2px"}},{default:c(()=>[V(D(E),1)]),_:2},1024))),128)):j("",!0),q.key==="action"?(T(),G(H,{key:1},{default:c(()=>[o(R,{type:"primary",size:"small",onClick:E=>e(Y)},{default:c(()=>[V(D(f(y)("routes.mix.编辑")),1)]),_:2},1032,["onClick"]),o(R,{type:"primary",danger:"",size:"small",onClick:E=>N(Y)},{default:c(()=>[V(D(f(y)("routes.mix.关闭")),1)]),_:2},1032,["onClick"])]),_:2},1024)):j("",!0)]),_:1},8,["columns","data-source","loading"])])}}});const pt=_e(at,[["__scopeId","data-v-c6679339"]]);export{pt as default};
- //# sourceMappingURL=index-af1bffd2.js.map
|
