video-split-screen 1.0.22 → 1.0.23
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.js +1 -1
- package/dist/index.mjs +128 -121
- package/dist/style.css +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("vue"),k={1:{type:"1",label:"1分屏",count:1,cols:1,rows:1},2:{type:"2",label:"2分屏",count:2,cols:2,rows:1},3:{type:"3",label:"3分屏",count:3,cols:2,rows:2},4:{type:"4",label:"4分屏",count:4,cols:2,rows:2},6:{type:"6",label:"6分屏",count:6,cols:3,rows:2},7:{type:"7",label:"7分屏",count:7,cols:4,rows:4},8:{type:"8",label:"8分屏",count:8,cols:4,rows:4},9:{type:"9",label:"9分屏",count:9,cols:3,rows:3},10:{type:"10",label:"10分屏",count:10,cols:6,rows:4},13:{type:"13",label:"13分屏",count:13,cols:4,rows:4},16:{type:"16",label:"16分屏",count:16,cols:4,rows:4}},B={};function N(n){if(B[n])return B[n];const o={1:[{col:1,colSpan:1,row:1,rowSpan:1}],2:[{col:1,colSpan:1,row:1,rowSpan:1},{col:2,colSpan:1,row:1,rowSpan:1}],3:[{col:1,colSpan:1,row:1,rowSpan:2,isMain:!0},{col:2,colSpan:1,row:1,rowSpan:1},{col:2,colSpan:1,row:2,rowSpan:1}],4:[{col:1,colSpan:1,row:1,rowSpan:1},{col:2,colSpan:1,row:1,rowSpan:1},{col:1,colSpan:1,row:2,rowSpan:1},{col:2,colSpan:1,row:2,rowSpan:1}],6:[{col:1,colSpan:1,row:1,rowSpan:1},{col:2,colSpan:1,row:1,rowSpan:1},{col:3,colSpan:1,row:1,rowSpan:1},{col:1,colSpan:1,row:2,rowSpan:1},{col:2,colSpan:1,row:2,rowSpan:1},{col:3,colSpan:1,row:2,rowSpan:1}],7:[{col:1,colSpan:2,row:1,rowSpan:2},{col:3,colSpan:2,row:1,rowSpan:2},{col:1,colSpan:2,row:3,rowSpan:2},{col:3,colSpan:1,row:3,rowSpan:1},{col:4,colSpan:1,row:3,rowSpan:1},{col:3,colSpan:1,row:4,rowSpan:1},{col:4,colSpan:1,row:4,rowSpan:1}],8:[{col:1,colSpan:3,row:1,rowSpan:3,isMain:!0},{col:4,colSpan:1,row:1,rowSpan:1},{col:4,colSpan:1,row:2,rowSpan:1},{col:4,colSpan:1,row:3,rowSpan:1},{col:1,colSpan:1,row:4,rowSpan:1},{col:2,colSpan:1,row:4,rowSpan:1},{col:3,colSpan:1,row:4,rowSpan:1},{col:4,colSpan:1,row:4,rowSpan:1}],9:[{col:1,colSpan:1,row:1,rowSpan:1},{col:2,colSpan:1,row:1,rowSpan:1},{col:3,colSpan:1,row:1,rowSpan:1},{col:1,colSpan:1,row:2,rowSpan:1},{col:2,colSpan:1,row:2,rowSpan:1},{col:3,colSpan:1,row:2,rowSpan:1},{col:1,colSpan:1,row:3,rowSpan:1},{col:2,colSpan:1,row:3,rowSpan:1},{col:3,colSpan:1,row:3,rowSpan:1}],10:[{col:1,colSpan:5,row:1,rowSpan:3,isMain:!0},{col:6,colSpan:1,row:1,rowSpan:1},{col:6,colSpan:1,row:2,rowSpan:1},{col:6,colSpan:1,row:3,rowSpan:1},{col:1,colSpan:1,row:4,rowSpan:1},{col:2,colSpan:1,row:4,rowSpan:1},{col:3,colSpan:1,row:4,rowSpan:1},{col:4,colSpan:1,row:4,rowSpan:1},{col:5,colSpan:1,row:4,rowSpan:1},{col:6,colSpan:1,row:4,rowSpan:1}],13:[{col:1,colSpan:2,row:1,rowSpan:2,isMain:!0},{col:3,colSpan:1,row:1,rowSpan:1},{col:4,colSpan:1,row:1,rowSpan:1},{col:3,colSpan:1,row:2,rowSpan:1},{col:4,colSpan:1,row:2,rowSpan:1},{col:1,colSpan:1,row:3,rowSpan:1},{col:2,colSpan:1,row:3,rowSpan:1},{col:3,colSpan:1,row:3,rowSpan:1},{col:4,colSpan:1,row:3,rowSpan:1},{col:1,colSpan:1,row:4,rowSpan:1},{col:2,colSpan:1,row:4,rowSpan:1},{col:3,colSpan:1,row:4,rowSpan:1},{col:4,colSpan:1,row:4,rowSpan:1}],16:[{col:1,colSpan:1,row:1,rowSpan:1},{col:2,colSpan:1,row:1,rowSpan:1},{col:3,colSpan:1,row:1,rowSpan:1},{col:4,colSpan:1,row:1,rowSpan:1},{col:1,colSpan:1,row:2,rowSpan:1},{col:2,colSpan:1,row:2,rowSpan:1},{col:3,colSpan:1,row:2,rowSpan:1},{col:4,colSpan:1,row:2,rowSpan:1},{col:1,colSpan:1,row:3,rowSpan:1},{col:2,colSpan:1,row:3,rowSpan:1},{col:3,colSpan:1,row:3,rowSpan:1},{col:4,colSpan:1,row:3,rowSpan:1},{col:1,colSpan:1,row:4,rowSpan:1},{col:2,colSpan:1,row:4,rowSpan:1},{col:3,colSpan:1,row:4,rowSpan:1},{col:4,colSpan:1,row:4,rowSpan:1}]}[n]||[];return o.length>0&&(B[n]=o),o}function L(){return Object.keys(k)}const Y={class:"layout-icon"},j={key:0,viewBox:"0 0 48 48",fill:"none"},H={key:1,viewBox:"0 0 48 48",fill:"none"},W={key:2,viewBox:"0 0 48 48",fill:"none"},q={key:3,viewBox:"0 0 48 48",fill:"none"},J={key:4,viewBox:"0 0 48 48",fill:"none"},K={key:5,viewBox:"0 0 48 48",fill:"none"},Q={key:6,viewBox:"0 0 48 48",fill:"none"},X={key:7,viewBox:"0 0 48 48",fill:"none"},Z={key:8,viewBox:"0 0 54 48",fill:"none"},tt={key:9,viewBox:"0 0 48 48",fill:"none"},et={key:10,viewBox:"0 0 48 48",fill:"none"},ot=t.defineComponent({__name:"VideoLayoutIcon",props:{type:{}},setup(n){return(p,o)=>(t.openBlock(),t.createElementBlock("div",Y,[n.type==="1"?(t.openBlock(),t.createElementBlock("svg",j,[...o[0]||(o[0]=[t.createElementVNode("rect",{x:"4",y:"4",width:"40",height:"40",stroke:"currentColor","stroke-width":"2"},null,-1)])])):n.type==="2"?(t.openBlock(),t.createElementBlock("svg",H,[...o[1]||(o[1]=[t.createElementVNode("rect",{x:"4",y:"4",width:"19",height:"40",stroke:"currentColor","stroke-width":"1.5"},null,-1),t.createElementVNode("rect",{x:"25",y:"4",width:"19",height:"40",stroke:"currentColor","stroke-width":"1.5"},null,-1)])])):n.type==="3"?(t.openBlock(),t.createElementBlock("svg",W,[...o[2]||(o[2]=[t.createElementVNode("rect",{x:"4",y:"4",width:"20",height:"40",stroke:"currentColor","stroke-width":"2"},null,-1),t.createElementVNode("rect",{x:"26",y:"4",width:"18",height:"19",stroke:"currentColor","stroke-width":"1.5"},null,-1),t.createElementVNode("rect",{x:"26",y:"25",width:"18",height:"19",stroke:"currentColor","stroke-width":"1.5"},null,-1)])])):n.type==="4"?(t.openBlock(),t.createElementBlock("svg",q,[...o[3]||(o[3]=[t.createElementVNode("rect",{x:"4",y:"4",width:"19",height:"19",stroke:"currentColor","stroke-width":"1.5"},null,-1),t.createElementVNode("rect",{x:"25",y:"4",width:"19",height:"19",stroke:"currentColor","stroke-width":"1.5"},null,-1),t.createElementVNode("rect",{x:"4",y:"25",width:"19",height:"19",stroke:"currentColor","stroke-width":"1.5"},null,-1),t.createElementVNode("rect",{x:"25",y:"25",width:"19",height:"19",stroke:"currentColor","stroke-width":"1.5"},null,-1)])])):n.type==="6"?(t.openBlock(),t.createElementBlock("svg",J,[...o[4]||(o[4]=[t.createStaticVNode('<rect x="3" y="4" width="13" height="18" stroke="currentColor" stroke-width="1.5" data-v-31e0404d></rect><rect x="18" y="4" width="12" height="18" stroke="currentColor" stroke-width="1.5" data-v-31e0404d></rect><rect x="32" y="4" width="13" height="18" stroke="currentColor" stroke-width="1.5" data-v-31e0404d></rect><rect x="3" y="24" width="13" height="18" stroke="currentColor" stroke-width="1.5" data-v-31e0404d></rect><rect x="18" y="24" width="12" height="18" stroke="currentColor" stroke-width="1.5" data-v-31e0404d></rect><rect x="32" y="24" width="13" height="18" stroke="currentColor" stroke-width="1.5" data-v-31e0404d></rect>',6)])])):n.type==="7"?(t.openBlock(),t.createElementBlock("svg",K,[...o[5]||(o[5]=[t.createStaticVNode('<rect x="4" y="4" width="19" height="19" stroke="currentColor" stroke-width="2" data-v-31e0404d></rect><rect x="25" y="4" width="19" height="19" stroke="currentColor" stroke-width="2" data-v-31e0404d></rect><rect x="4" y="25" width="19" height="19" stroke="currentColor" stroke-width="2" data-v-31e0404d></rect><rect x="25" y="25" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="35" y="25" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="25" y="35" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="35" y="35" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect>',7)])])):n.type==="8"?(t.openBlock(),t.createElementBlock("svg",Q,[...o[6]||(o[6]=[t.createStaticVNode('<rect x="4" y="4" width="28" height="29" stroke="currentColor" stroke-width="2" data-v-31e0404d></rect><rect x="34" y="4" width="10" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="34" y="14.5" width="10" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="34" y="24.5" width="10" height="8.5" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="4" y="35" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="14" y="35" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="24" y="35" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="34" y="35" width="10" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect>',8)])])):n.type==="9"?(t.openBlock(),t.createElementBlock("svg",X,[...o[7]||(o[7]=[t.createStaticVNode('<rect x="4" y="4" width="12" height="12" stroke="currentColor" stroke-width="1.5" data-v-31e0404d></rect><rect x="18" y="4" width="12" height="12" stroke="currentColor" stroke-width="1.5" data-v-31e0404d></rect><rect x="32" y="4" width="12" height="12" stroke="currentColor" stroke-width="1.5" data-v-31e0404d></rect><rect x="4" y="18" width="12" height="12" stroke="currentColor" stroke-width="1.5" data-v-31e0404d></rect><rect x="18" y="18" width="12" height="12" stroke="currentColor" stroke-width="1.5" data-v-31e0404d></rect><rect x="32" y="18" width="12" height="12" stroke="currentColor" stroke-width="1.5" data-v-31e0404d></rect><rect x="4" y="32" width="12" height="12" stroke="currentColor" stroke-width="1.5" data-v-31e0404d></rect><rect x="18" y="32" width="12" height="12" stroke="currentColor" stroke-width="1.5" data-v-31e0404d></rect><rect x="32" y="32" width="12" height="12" stroke="currentColor" stroke-width="1.5" data-v-31e0404d></rect>',9)])])):n.type==="10"?(t.openBlock(),t.createElementBlock("svg",Z,[...o[8]||(o[8]=[t.createStaticVNode('<rect x="3" y="4" width="36" height="29" stroke="currentColor" stroke-width="2" data-v-31e0404d></rect><rect x="41" y="4" width="10" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="41" y="14.5" width="10" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="41" y="24.5" width="10" height="8.5" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="3" y="35" width="7" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="11" y="35" width="7" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="19" y="35" width="7" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="27" y="35" width="7" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="35" y="35" width="6" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="42" y="35" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect>',10)])])):n.type==="13"?(t.openBlock(),t.createElementBlock("svg",tt,[...o[9]||(o[9]=[t.createStaticVNode('<rect x="4" y="4" width="18" height="18" stroke="currentColor" stroke-width="2" data-v-31e0404d></rect><rect x="24" y="4" width="8" height="8" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="34" y="4" width="10" height="8" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="24" y="14" width="8" height="8" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="34" y="14" width="10" height="8" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="4" y="24" width="8" height="8" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="14" y="24" width="8" height="8" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="24" y="24" width="8" height="8" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="34" y="24" width="10" height="8" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="4" y="34" width="8" height="10" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="14" y="34" width="8" height="10" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="24" y="34" width="8" height="10" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="34" y="34" width="10" height="10" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect>',13)])])):n.type==="16"?(t.openBlock(),t.createElementBlock("svg",et,[...o[10]||(o[10]=[t.createStaticVNode('<rect x="4" y="4" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="15" y="4" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="26" y="4" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="37" y="4" width="7" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="4" y="15" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="15" y="15" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="26" y="15" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="37" y="15" width="7" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="4" y="26" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="15" y="26" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="26" y="26" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="37" y="26" width="7" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="4" y="37" width="9" height="7" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="15" y="37" width="9" height="7" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="26" y="37" width="9" height="7" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="37" y="37" width="7" height="7" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect>',16)])])):t.createCommentVNode("",!0)]))}}),D=(n,p)=>{const o=n.__vccOpts||n;for(const[v,s]of p)o[v]=s;return o},E=D(ot,[["__scopeId","data-v-31e0404d"]]),rt={key:0,class:"layout-toolbar",role:"toolbar","aria-label":"布局切换工具栏"},at={class:"layout-buttons"},lt=["onClick","title","aria-label","aria-pressed"],ct={class:"layout-label"},nt={class:"video-grid-container",role:"region","aria-label":"视频网格"},it=["aria-label","onDragstart","onDragenter","onDragleave","onDrop"],dt={class:"video-placeholder"},st={class:"placeholder-number"},wt=.5,ht="grabbing",ut="0.8",pt=t.defineComponent({__name:"VideoGridLayout",props:{videos:{},layout:{default:"1"},availableLayouts:{},showToolbar:{type:Boolean,default:!0},width:{},height:{},placeholderText:{},placeholders:{}},emits:["layoutChange","videosChange"],setup(n,{emit:p}){const o=n,v=p,s=t.ref(o.layout);t.watch(()=>o.layout,e=>{s.value=e});const $=t.computed(()=>o.availableLayouts&&o.availableLayouts.length>0?o.availableLayouts:L()),u=t.shallowRef([]);function f(e){const r=Array.isArray(e)?e:o.videos||[],l=b.value,a={};u.value.forEach((i,h)=>{i&&i.id!==void 0&&(a[i.id]=i.__labelNumber??h+1)});const c=Array.from({length:l}).map((i,h)=>{const d=r[h];if(d){const U=a[d.id]??d.__labelNumber??h+1;return{...d,__labelNumber:U}}});u.value=c}t.watch(()=>o.videos,e=>{if(!Array.isArray(e)){console.warn("[VideoGridLayout] Invalid videos prop, expected array");return}f(e)},{flush:"post"});let x=!1;t.watch(u,e=>{!x&&Array.isArray(e)&&v("videosChange",e)});const V=t.computed(()=>{const e=k[s.value];return e||(console.warn(`[VideoGridLayout] Invalid layout type: ${s.value}, fallback to '4'`),k[4])}),y=t.computed(()=>N(s.value)),b=t.computed(()=>{var e;return((e=V.value)==null?void 0:e.count)||4}),C=t.computed(()=>u.value.slice(0,b.value).map(e=>e).filter(Boolean));f(o.videos),t.watch(b,()=>{f(o.videos)}),t.computed(()=>{const e=y.value.map((r,l)=>({p:r,idx:l}));return e.sort((r,l)=>r.p.row===l.p.row?(r.p.col||0)-(l.p.col||0):(r.p.row||0)-(l.p.row||0)),e.map(r=>r.idx)});const w=t.ref(-1),S=t.ref(-1),g=t.shallowRef(null),I=t.computed(()=>{const e=V.value;return{display:"grid",gridTemplateColumns:(e==null?void 0:e.colTemplate)||`repeat(${(e==null?void 0:e.cols)||2}, 1fr)`,gridTemplateRows:(e==null?void 0:e.rowTemplate)||`repeat(${(e==null?void 0:e.rows)||2}, 1fr)`,gap:"4px",width:o.width||"100%",height:o.height||"100%"}}),A=t.computed(()=>({width:o.width||"100%",height:o.height||"100%"}));function G(e){const r=y.value[e];return!r||typeof r.col!="number"||typeof r.row!="number"?{}:{gridColumn:`${r.col} / span ${r.colSpan}`,gridRow:`${r.row} / span ${r.rowSpan}`}}function T(e){const r=y.value[e];return(r==null?void 0:r.isMain)||!1}function O(e){s.value=e,v("layoutChange",s.value)}function m(){if(g.value&&document.body.contains(g.value)){try{document.body.removeChild(g.value)}catch(e){console.warn("[VideoGridLayout] Failed to cleanup drag image:",e)}g.value=null}}function M(e,r){if(r<0||r>=u.value.length){console.warn("[VideoGridLayout] Invalid drag index:",r);return}if(w.value=r,!e.dataTransfer)return;e.dataTransfer.effectAllowed="move";const a=e.target.closest(".video-item");if(a)try{m();const c=a.cloneNode(!0);c.style.width=`${a.offsetWidth}px`,c.style.height=`${a.offsetHeight}px`,c.style.opacity=ut,c.style.position="absolute",c.style.top="-9999px",c.style.pointerEvents="none",document.body.appendChild(c),g.value=c,e.dataTransfer.setDragImage(c,a.offsetWidth/2,a.offsetHeight/2),setTimeout(()=>{m()},100),a.style.opacity=String(wt),a.style.cursor=ht}catch(c){console.error("[VideoGridLayout] Drag start error:",c),m()}}function R(e,r){e.preventDefault(),e.stopPropagation();const l=w.value;if(l===-1||l===r){w.value=-1;return}if(r<0||r>=y.value.length){console.warn("[VideoGridLayout] Invalid drop index:",r),w.value=-1;return}try{const a=e.currentTarget;a&&(a.style.backgroundColor="rgba(66, 184, 131, 0.3)",a.style.borderColor="#42b883",setTimeout(()=>{a.style.backgroundColor="",a.style.borderColor=""},200));const c=[...u.value],i=c[l],h=c[r];c[l]=h,c[r]=i,x=!0,u.value=c,setTimeout(()=>{x=!1,v("videosChange",u.value.filter(Boolean))},0)}catch(a){console.error("[VideoGridLayout] Drop error:",a)}finally{w.value=-1}}function P(e,r){e.preventDefault(),w.value!==-1&&w.value!==r&&(S.value=r)}function F(e,r){e.preventDefault();const l=e.target,a=e.relatedTarget;l.contains(a)||S.value===r&&(S.value=-1)}function z(e){const l=e.target.closest(".video-item");l&&(l.style.opacity="1",l.style.cursor="move"),m(),w.value=-1,S.value=-1}return t.onBeforeUnmount(()=>{m()}),(e,r)=>(t.openBlock(),t.createElementBlock("div",{class:"video-grid-layout",role:"application","aria-label":"视频分屏布局",style:t.normalizeStyle(A.value)},[n.showToolbar?(t.openBlock(),t.createElementBlock("div",rt,[r[1]||(r[1]=t.createElementVNode("div",{class:"toolbar-title"},"分屏布局",-1)),t.createElementVNode("div",at,[(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList($.value,l=>{var a,c,i;return t.openBlock(),t.createElementBlock("button",{key:l,class:t.normalizeClass(["layout-btn",{active:s.value===l}]),onClick:h=>O(l),title:((a=t.unref(k)[l])==null?void 0:a.label)||"","aria-label":`切换到${((c=t.unref(k)[l])==null?void 0:c.label)||""}布局`,"aria-pressed":s.value===l,type:"button"},[t.createVNode(E,{type:l},null,8,["type"]),t.createElementVNode("span",ct,t.toDisplayString(((i=t.unref(k)[l])==null?void 0:i.label)||""),1)],10,lt)}),128))])])):t.createCommentVNode("",!0),t.createElementVNode("div",nt,[t.createElementVNode("div",{class:"video-grid",style:t.normalizeStyle(I.value)},[(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(y.value,(l,a)=>{var c,i,h;return t.openBlock(),t.createElementBlock("div",{key:((c=C.value[a])==null?void 0:c.id)??a,class:t.normalizeClass(["video-item",{"main-video":T(a),dragging:w.value===a,"drag-over":S.value===a&&w.value!==a}]),style:t.normalizeStyle(G(a)),draggable:!0,"aria-label":`视频 ${a+1}: ${((i=C.value[a])==null?void 0:i.title)||((h=C.value[a])==null?void 0:h.id)||""}`,role:"article",tabindex:"0",onDragstart:d=>M(d,a),onDragover:r[0]||(r[0]=t.withModifiers(()=>{},["prevent"])),onDragenter:d=>P(d,a),onDragleave:d=>F(d,a),onDrop:d=>R(d,a),onDragend:z},[t.renderSlot(e.$slots,"video",{video:C.value[a],index:a},()=>[t.createElementVNode("div",dt,[t.createElementVNode("div",st,t.toDisplayString(a+1),1)])],!0)],46,it)}),128))],4)])],4))}}),_=D(pt,[["__scopeId","data-v-4073e998"]]),kt={VideoGridLayout:_,VideoLayoutIcon:E},vt={install(n){Object.entries(kt).forEach(([p,o])=>{n.component(p,o)})}};exports.LAYOUT_CONFIGS=k;exports.VideoGridLayout=_;exports.VideoLayoutIcon=E;exports.default=vt;exports.getAllLayoutTypes=L;exports.getLayoutPositions=N;
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("vue"),k={1:{type:"1",label:"1分屏",count:1,cols:1,rows:1},2:{type:"2",label:"2分屏",count:2,cols:2,rows:1},3:{type:"3",label:"3分屏",count:3,cols:2,rows:2},4:{type:"4",label:"4分屏",count:4,cols:2,rows:2},6:{type:"6",label:"6分屏",count:6,cols:3,rows:2},7:{type:"7",label:"7分屏",count:7,cols:4,rows:4},8:{type:"8",label:"8分屏",count:8,cols:4,rows:4},9:{type:"9",label:"9分屏",count:9,cols:3,rows:3},10:{type:"10",label:"10分屏",count:10,cols:6,rows:4},13:{type:"13",label:"13分屏",count:13,cols:4,rows:4},16:{type:"16",label:"16分屏",count:16,cols:4,rows:4}},B={};function N(n){if(B[n])return B[n];const o={1:[{col:1,colSpan:1,row:1,rowSpan:1}],2:[{col:1,colSpan:1,row:1,rowSpan:1},{col:2,colSpan:1,row:1,rowSpan:1}],3:[{col:1,colSpan:1,row:1,rowSpan:2,isMain:!0},{col:2,colSpan:1,row:1,rowSpan:1},{col:2,colSpan:1,row:2,rowSpan:1}],4:[{col:1,colSpan:1,row:1,rowSpan:1},{col:2,colSpan:1,row:1,rowSpan:1},{col:1,colSpan:1,row:2,rowSpan:1},{col:2,colSpan:1,row:2,rowSpan:1}],6:[{col:1,colSpan:1,row:1,rowSpan:1},{col:2,colSpan:1,row:1,rowSpan:1},{col:3,colSpan:1,row:1,rowSpan:1},{col:1,colSpan:1,row:2,rowSpan:1},{col:2,colSpan:1,row:2,rowSpan:1},{col:3,colSpan:1,row:2,rowSpan:1}],7:[{col:1,colSpan:2,row:1,rowSpan:2},{col:3,colSpan:2,row:1,rowSpan:2},{col:1,colSpan:2,row:3,rowSpan:2},{col:3,colSpan:1,row:3,rowSpan:1},{col:4,colSpan:1,row:3,rowSpan:1},{col:3,colSpan:1,row:4,rowSpan:1},{col:4,colSpan:1,row:4,rowSpan:1}],8:[{col:1,colSpan:3,row:1,rowSpan:3,isMain:!0},{col:4,colSpan:1,row:1,rowSpan:1},{col:4,colSpan:1,row:2,rowSpan:1},{col:4,colSpan:1,row:3,rowSpan:1},{col:1,colSpan:1,row:4,rowSpan:1},{col:2,colSpan:1,row:4,rowSpan:1},{col:3,colSpan:1,row:4,rowSpan:1},{col:4,colSpan:1,row:4,rowSpan:1}],9:[{col:1,colSpan:1,row:1,rowSpan:1},{col:2,colSpan:1,row:1,rowSpan:1},{col:3,colSpan:1,row:1,rowSpan:1},{col:1,colSpan:1,row:2,rowSpan:1},{col:2,colSpan:1,row:2,rowSpan:1},{col:3,colSpan:1,row:2,rowSpan:1},{col:1,colSpan:1,row:3,rowSpan:1},{col:2,colSpan:1,row:3,rowSpan:1},{col:3,colSpan:1,row:3,rowSpan:1}],10:[{col:1,colSpan:5,row:1,rowSpan:3,isMain:!0},{col:6,colSpan:1,row:1,rowSpan:1},{col:6,colSpan:1,row:2,rowSpan:1},{col:6,colSpan:1,row:3,rowSpan:1},{col:1,colSpan:1,row:4,rowSpan:1},{col:2,colSpan:1,row:4,rowSpan:1},{col:3,colSpan:1,row:4,rowSpan:1},{col:4,colSpan:1,row:4,rowSpan:1},{col:5,colSpan:1,row:4,rowSpan:1},{col:6,colSpan:1,row:4,rowSpan:1}],13:[{col:1,colSpan:2,row:1,rowSpan:2,isMain:!0},{col:3,colSpan:1,row:1,rowSpan:1},{col:4,colSpan:1,row:1,rowSpan:1},{col:3,colSpan:1,row:2,rowSpan:1},{col:4,colSpan:1,row:2,rowSpan:1},{col:1,colSpan:1,row:3,rowSpan:1},{col:2,colSpan:1,row:3,rowSpan:1},{col:3,colSpan:1,row:3,rowSpan:1},{col:4,colSpan:1,row:3,rowSpan:1},{col:1,colSpan:1,row:4,rowSpan:1},{col:2,colSpan:1,row:4,rowSpan:1},{col:3,colSpan:1,row:4,rowSpan:1},{col:4,colSpan:1,row:4,rowSpan:1}],16:[{col:1,colSpan:1,row:1,rowSpan:1},{col:2,colSpan:1,row:1,rowSpan:1},{col:3,colSpan:1,row:1,rowSpan:1},{col:4,colSpan:1,row:1,rowSpan:1},{col:1,colSpan:1,row:2,rowSpan:1},{col:2,colSpan:1,row:2,rowSpan:1},{col:3,colSpan:1,row:2,rowSpan:1},{col:4,colSpan:1,row:2,rowSpan:1},{col:1,colSpan:1,row:3,rowSpan:1},{col:2,colSpan:1,row:3,rowSpan:1},{col:3,colSpan:1,row:3,rowSpan:1},{col:4,colSpan:1,row:3,rowSpan:1},{col:1,colSpan:1,row:4,rowSpan:1},{col:2,colSpan:1,row:4,rowSpan:1},{col:3,colSpan:1,row:4,rowSpan:1},{col:4,colSpan:1,row:4,rowSpan:1}]}[n]||[];return o.length>0&&(B[n]=o),o}function L(){return Object.keys(k)}const Y={class:"layout-icon"},j={key:0,viewBox:"0 0 48 48",fill:"none"},H={key:1,viewBox:"0 0 48 48",fill:"none"},W={key:2,viewBox:"0 0 48 48",fill:"none"},q={key:3,viewBox:"0 0 48 48",fill:"none"},J={key:4,viewBox:"0 0 48 48",fill:"none"},K={key:5,viewBox:"0 0 48 48",fill:"none"},Q={key:6,viewBox:"0 0 48 48",fill:"none"},X={key:7,viewBox:"0 0 48 48",fill:"none"},Z={key:8,viewBox:"0 0 54 48",fill:"none"},tt={key:9,viewBox:"0 0 48 48",fill:"none"},et={key:10,viewBox:"0 0 48 48",fill:"none"},ot=t.defineComponent({__name:"VideoLayoutIcon",props:{type:{}},setup(n){return(p,o)=>(t.openBlock(),t.createElementBlock("div",Y,[n.type==="1"?(t.openBlock(),t.createElementBlock("svg",j,[...o[0]||(o[0]=[t.createElementVNode("rect",{x:"4",y:"4",width:"40",height:"40",stroke:"currentColor","stroke-width":"2"},null,-1)])])):n.type==="2"?(t.openBlock(),t.createElementBlock("svg",H,[...o[1]||(o[1]=[t.createElementVNode("rect",{x:"4",y:"4",width:"19",height:"40",stroke:"currentColor","stroke-width":"1.5"},null,-1),t.createElementVNode("rect",{x:"25",y:"4",width:"19",height:"40",stroke:"currentColor","stroke-width":"1.5"},null,-1)])])):n.type==="3"?(t.openBlock(),t.createElementBlock("svg",W,[...o[2]||(o[2]=[t.createElementVNode("rect",{x:"4",y:"4",width:"20",height:"40",stroke:"currentColor","stroke-width":"2"},null,-1),t.createElementVNode("rect",{x:"26",y:"4",width:"18",height:"19",stroke:"currentColor","stroke-width":"1.5"},null,-1),t.createElementVNode("rect",{x:"26",y:"25",width:"18",height:"19",stroke:"currentColor","stroke-width":"1.5"},null,-1)])])):n.type==="4"?(t.openBlock(),t.createElementBlock("svg",q,[...o[3]||(o[3]=[t.createElementVNode("rect",{x:"4",y:"4",width:"19",height:"19",stroke:"currentColor","stroke-width":"1.5"},null,-1),t.createElementVNode("rect",{x:"25",y:"4",width:"19",height:"19",stroke:"currentColor","stroke-width":"1.5"},null,-1),t.createElementVNode("rect",{x:"4",y:"25",width:"19",height:"19",stroke:"currentColor","stroke-width":"1.5"},null,-1),t.createElementVNode("rect",{x:"25",y:"25",width:"19",height:"19",stroke:"currentColor","stroke-width":"1.5"},null,-1)])])):n.type==="6"?(t.openBlock(),t.createElementBlock("svg",J,[...o[4]||(o[4]=[t.createStaticVNode('<rect x="3" y="4" width="13" height="18" stroke="currentColor" stroke-width="1.5" data-v-31e0404d></rect><rect x="18" y="4" width="12" height="18" stroke="currentColor" stroke-width="1.5" data-v-31e0404d></rect><rect x="32" y="4" width="13" height="18" stroke="currentColor" stroke-width="1.5" data-v-31e0404d></rect><rect x="3" y="24" width="13" height="18" stroke="currentColor" stroke-width="1.5" data-v-31e0404d></rect><rect x="18" y="24" width="12" height="18" stroke="currentColor" stroke-width="1.5" data-v-31e0404d></rect><rect x="32" y="24" width="13" height="18" stroke="currentColor" stroke-width="1.5" data-v-31e0404d></rect>',6)])])):n.type==="7"?(t.openBlock(),t.createElementBlock("svg",K,[...o[5]||(o[5]=[t.createStaticVNode('<rect x="4" y="4" width="19" height="19" stroke="currentColor" stroke-width="2" data-v-31e0404d></rect><rect x="25" y="4" width="19" height="19" stroke="currentColor" stroke-width="2" data-v-31e0404d></rect><rect x="4" y="25" width="19" height="19" stroke="currentColor" stroke-width="2" data-v-31e0404d></rect><rect x="25" y="25" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="35" y="25" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="25" y="35" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="35" y="35" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect>',7)])])):n.type==="8"?(t.openBlock(),t.createElementBlock("svg",Q,[...o[6]||(o[6]=[t.createStaticVNode('<rect x="4" y="4" width="28" height="29" stroke="currentColor" stroke-width="2" data-v-31e0404d></rect><rect x="34" y="4" width="10" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="34" y="14.5" width="10" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="34" y="24.5" width="10" height="8.5" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="4" y="35" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="14" y="35" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="24" y="35" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="34" y="35" width="10" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect>',8)])])):n.type==="9"?(t.openBlock(),t.createElementBlock("svg",X,[...o[7]||(o[7]=[t.createStaticVNode('<rect x="4" y="4" width="12" height="12" stroke="currentColor" stroke-width="1.5" data-v-31e0404d></rect><rect x="18" y="4" width="12" height="12" stroke="currentColor" stroke-width="1.5" data-v-31e0404d></rect><rect x="32" y="4" width="12" height="12" stroke="currentColor" stroke-width="1.5" data-v-31e0404d></rect><rect x="4" y="18" width="12" height="12" stroke="currentColor" stroke-width="1.5" data-v-31e0404d></rect><rect x="18" y="18" width="12" height="12" stroke="currentColor" stroke-width="1.5" data-v-31e0404d></rect><rect x="32" y="18" width="12" height="12" stroke="currentColor" stroke-width="1.5" data-v-31e0404d></rect><rect x="4" y="32" width="12" height="12" stroke="currentColor" stroke-width="1.5" data-v-31e0404d></rect><rect x="18" y="32" width="12" height="12" stroke="currentColor" stroke-width="1.5" data-v-31e0404d></rect><rect x="32" y="32" width="12" height="12" stroke="currentColor" stroke-width="1.5" data-v-31e0404d></rect>',9)])])):n.type==="10"?(t.openBlock(),t.createElementBlock("svg",Z,[...o[8]||(o[8]=[t.createStaticVNode('<rect x="3" y="4" width="36" height="29" stroke="currentColor" stroke-width="2" data-v-31e0404d></rect><rect x="41" y="4" width="10" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="41" y="14.5" width="10" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="41" y="24.5" width="10" height="8.5" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="3" y="35" width="7" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="11" y="35" width="7" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="19" y="35" width="7" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="27" y="35" width="7" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="35" y="35" width="6" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="42" y="35" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect>',10)])])):n.type==="13"?(t.openBlock(),t.createElementBlock("svg",tt,[...o[9]||(o[9]=[t.createStaticVNode('<rect x="4" y="4" width="18" height="18" stroke="currentColor" stroke-width="2" data-v-31e0404d></rect><rect x="24" y="4" width="8" height="8" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="34" y="4" width="10" height="8" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="24" y="14" width="8" height="8" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="34" y="14" width="10" height="8" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="4" y="24" width="8" height="8" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="14" y="24" width="8" height="8" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="24" y="24" width="8" height="8" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="34" y="24" width="10" height="8" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="4" y="34" width="8" height="10" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="14" y="34" width="8" height="10" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="24" y="34" width="8" height="10" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="34" y="34" width="10" height="10" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect>',13)])])):n.type==="16"?(t.openBlock(),t.createElementBlock("svg",et,[...o[10]||(o[10]=[t.createStaticVNode('<rect x="4" y="4" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="15" y="4" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="26" y="4" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="37" y="4" width="7" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="4" y="15" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="15" y="15" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="26" y="15" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="37" y="15" width="7" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="4" y="26" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="15" y="26" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="26" y="26" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="37" y="26" width="7" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="4" y="37" width="9" height="7" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="15" y="37" width="9" height="7" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="26" y="37" width="9" height="7" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="37" y="37" width="7" height="7" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect>',16)])])):t.createCommentVNode("",!0)]))}}),D=(n,p)=>{const o=n.__vccOpts||n;for(const[v,s]of p)o[v]=s;return o},E=D(ot,[["__scopeId","data-v-31e0404d"]]),rt={key:0,class:"layout-toolbar",role:"toolbar","aria-label":"布局切换工具栏"},at={class:"layout-buttons"},lt=["onClick","title","aria-label","aria-pressed"],ct={class:"layout-label"},nt={class:"video-grid-container",role:"region","aria-label":"视频网格"},it=["aria-label","onDragstart","onDragenter","onDragleave","onDrop"],dt={class:"video-placeholder"},st={class:"placeholder-number"},ht=.5,wt="grabbing",ut="0.8",pt=t.defineComponent({__name:"VideoGridLayout",props:{videos:{},layout:{default:"1"},availableLayouts:{},showToolbar:{type:Boolean,default:!0},width:{},height:{},placeholderText:{},placeholders:{}},emits:["layoutChange","videosChange"],setup(n,{emit:p}){const o=n,v=p,s=t.ref(o.layout);t.watch(()=>o.layout,e=>{s.value=e});const I=t.computed(()=>o.availableLayouts&&o.availableLayouts.length>0?o.availableLayouts:L()),w=t.shallowRef([]);function f(e){const r=Array.isArray(e)?e:o.videos||[],l=b.value,a={};w.value.forEach((i,u)=>{i&&i.id!==void 0&&(a[i.id]=i.__labelNumber??u+1)});const c=Array.from({length:l}).map((i,u)=>{const d=r[u];if(d){const U=a[d.id]??d.__labelNumber??u+1;return{...d,__labelNumber:U}}});w.value=c}t.watch(()=>o.videos,e=>{if(!Array.isArray(e)){console.warn("[VideoGridLayout] Invalid videos prop, expected array");return}f(e)},{flush:"post"});let x=!1;t.watch(w,e=>{!x&&Array.isArray(e)&&v("videosChange",e)});const V=t.computed(()=>{const e=k[s.value];return e||(console.warn(`[VideoGridLayout] Invalid layout type: ${s.value}, fallback to '4'`),k[4])}),m=t.computed(()=>N(s.value)),b=t.computed(()=>{var e;return((e=V.value)==null?void 0:e.count)||4}),C=t.computed(()=>w.value.slice(0,b.value).map(e=>e).filter(Boolean));f(o.videos),t.watch(b,()=>{f(o.videos)}),t.computed(()=>{const e=m.value.map((r,l)=>({p:r,idx:l}));return e.sort((r,l)=>r.p.row===l.p.row?(r.p.col||0)-(l.p.col||0):(r.p.row||0)-(l.p.row||0)),e.map(r=>r.idx)});const h=t.ref(-1),y=t.ref(-1),S=t.shallowRef(null),$=t.computed(()=>{const e=V.value;return{display:"grid",gridTemplateColumns:(e==null?void 0:e.colTemplate)||`repeat(${(e==null?void 0:e.cols)||2}, 1fr)`,gridTemplateRows:(e==null?void 0:e.rowTemplate)||`repeat(${(e==null?void 0:e.rows)||2}, 1fr)`,gap:"4px",width:o.width||"100%",height:o.height||"100%"}}),A=t.computed(()=>({width:o.width||"100%",height:o.height||"100%"}));function G(e){const r=m.value[e];return!r||typeof r.col!="number"||typeof r.row!="number"?{}:{gridColumn:`${r.col} / span ${r.colSpan}`,gridRow:`${r.row} / span ${r.rowSpan}`}}function T(e){const r=m.value[e];return(r==null?void 0:r.isMain)||!1}function O(e){s.value=e,v("layoutChange",s.value)}function g(){if(S.value&&document.body.contains(S.value)){try{document.body.removeChild(S.value)}catch(e){console.warn("[VideoGridLayout] Failed to cleanup drag image:",e)}S.value=null}}function M(e,r){if(r<0||r>=w.value.length){console.warn("[VideoGridLayout] Invalid drag index:",r);return}if(h.value=r,!e.dataTransfer)return;e.dataTransfer.effectAllowed="move";const a=e.target.closest(".video-item");if(a)try{g();const c=a.cloneNode(!0);c.style.width=`${a.offsetWidth}px`,c.style.height=`${a.offsetHeight}px`,c.style.opacity=ut,c.style.position="absolute",c.style.top="-9999px",c.style.pointerEvents="none",document.body.appendChild(c),S.value=c,e.dataTransfer.setDragImage(c,a.offsetWidth/2,a.offsetHeight/2),setTimeout(()=>{g()},100),a.style.opacity=String(ht),a.style.cursor=wt}catch(c){console.error("[VideoGridLayout] Drag start error:",c),g()}}function R(e,r){e.preventDefault(),e.stopPropagation();const l=h.value;if(l===-1||l===r){h.value=-1;return}if(l>=w.value.length){console.warn("[VideoGridLayout] No video at from index:",l),h.value=-1;return}try{const a=e.currentTarget;a&&(a.style.backgroundColor="rgba(66, 184, 131, 0.3)",a.style.borderColor="#42b883",setTimeout(()=>{a.style.backgroundColor="",a.style.borderColor=""},200));const c=[...w.value];if(r>=c.length){const i=c[l];c.splice(l,1),c.push(i)}else{const i=c[l];c[l]=c[r],c[r]=i}x=!0,w.value=c,setTimeout(()=>{x=!1,v("videosChange",w.value.filter(Boolean))},0)}catch(a){console.error("[VideoGridLayout] Drop error:",a)}finally{h.value=-1}}function P(e,r){e.preventDefault(),h.value!==-1&&h.value!==r&&(y.value=r)}function F(e,r){e.preventDefault();const l=e.target,a=e.relatedTarget;l.contains(a)||y.value===r&&(y.value=-1)}function z(e){const l=e.target.closest(".video-item");l&&(l.style.opacity="1",l.style.cursor="move"),g(),h.value=-1,y.value=-1}return t.onBeforeUnmount(()=>{g()}),(e,r)=>(t.openBlock(),t.createElementBlock("div",{class:"video-grid-layout",role:"application","aria-label":"视频分屏布局",style:t.normalizeStyle(A.value)},[n.showToolbar?(t.openBlock(),t.createElementBlock("div",rt,[r[1]||(r[1]=t.createElementVNode("div",{class:"toolbar-title"},"分屏布局",-1)),t.createElementVNode("div",at,[(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(I.value,l=>{var a,c,i;return t.openBlock(),t.createElementBlock("button",{key:l,class:t.normalizeClass(["layout-btn",{active:s.value===l}]),onClick:u=>O(l),title:((a=t.unref(k)[l])==null?void 0:a.label)||"","aria-label":`切换到${((c=t.unref(k)[l])==null?void 0:c.label)||""}布局`,"aria-pressed":s.value===l,type:"button"},[t.createVNode(E,{type:l},null,8,["type"]),t.createElementVNode("span",ct,t.toDisplayString(((i=t.unref(k)[l])==null?void 0:i.label)||""),1)],10,lt)}),128))])])):t.createCommentVNode("",!0),t.createElementVNode("div",nt,[t.createElementVNode("div",{class:"video-grid",style:t.normalizeStyle($.value)},[(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(m.value,(l,a)=>{var c,i,u;return t.openBlock(),t.createElementBlock("div",{key:((c=C.value[a])==null?void 0:c.id)??a,class:t.normalizeClass(["video-item",{"main-video":T(a),dragging:h.value===a,"drag-over":y.value===a&&h.value!==a}]),style:t.normalizeStyle(G(a)),draggable:!0,"aria-label":`视频 ${a+1}: ${((i=C.value[a])==null?void 0:i.title)||((u=C.value[a])==null?void 0:u.id)||""}`,role:"article",tabindex:"0",onDragstart:d=>M(d,a),onDragover:r[0]||(r[0]=t.withModifiers(()=>{},["prevent"])),onDragenter:d=>P(d,a),onDragleave:d=>F(d,a),onDrop:d=>R(d,a),onDragend:z},[t.renderSlot(e.$slots,"video",{video:C.value[a],index:a},()=>[t.createElementVNode("div",dt,[t.createElementVNode("div",st,t.toDisplayString(a+1),1)])],!0)],46,it)}),128))],4)])],4))}}),_=D(pt,[["__scopeId","data-v-222ef64d"]]),kt={VideoGridLayout:_,VideoLayoutIcon:E},vt={install(n){Object.entries(kt).forEach(([p,o])=>{n.component(p,o)})}};exports.LAYOUT_CONFIGS=k;exports.VideoGridLayout=_;exports.VideoLayoutIcon=E;exports.default=vt;exports.getAllLayoutTypes=L;exports.getLayoutPositions=N;
|
package/dist/index.mjs
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { defineComponent as P, createElementBlock as c, openBlock as i, createCommentVNode as F, createElementVNode as d, createStaticVNode as
|
|
2
|
-
const
|
|
1
|
+
import { defineComponent as P, createElementBlock as c, openBlock as i, createCommentVNode as F, createElementVNode as d, createStaticVNode as g, ref as B, watch as L, computed as y, shallowRef as T, onBeforeUnmount as et, normalizeStyle as V, Fragment as E, renderList as O, unref as A, normalizeClass as M, createVNode as rt, toDisplayString as R, withModifiers as at, renderSlot as lt } from "vue";
|
|
2
|
+
const S = {
|
|
3
3
|
1: {
|
|
4
4
|
type: "1",
|
|
5
5
|
label: "1分屏",
|
|
@@ -187,7 +187,7 @@ function nt(n) {
|
|
|
187
187
|
return o.length > 0 && (G[n] = o), o;
|
|
188
188
|
}
|
|
189
189
|
function ct() {
|
|
190
|
-
return Object.keys(
|
|
190
|
+
return Object.keys(S);
|
|
191
191
|
}
|
|
192
192
|
const it = { class: "layout-icon" }, dt = {
|
|
193
193
|
key: 0,
|
|
@@ -197,11 +197,11 @@ const it = { class: "layout-icon" }, dt = {
|
|
|
197
197
|
key: 1,
|
|
198
198
|
viewBox: "0 0 48 48",
|
|
199
199
|
fill: "none"
|
|
200
|
-
},
|
|
200
|
+
}, ht = {
|
|
201
201
|
key: 2,
|
|
202
202
|
viewBox: "0 0 48 48",
|
|
203
203
|
fill: "none"
|
|
204
|
-
},
|
|
204
|
+
}, wt = {
|
|
205
205
|
key: 3,
|
|
206
206
|
viewBox: "0 0 48 48",
|
|
207
207
|
fill: "none"
|
|
@@ -225,11 +225,11 @@ const it = { class: "layout-icon" }, dt = {
|
|
|
225
225
|
key: 8,
|
|
226
226
|
viewBox: "0 0 54 48",
|
|
227
227
|
fill: "none"
|
|
228
|
-
},
|
|
228
|
+
}, gt = {
|
|
229
229
|
key: 9,
|
|
230
230
|
viewBox: "0 0 48 48",
|
|
231
231
|
fill: "none"
|
|
232
|
-
},
|
|
232
|
+
}, St = {
|
|
233
233
|
key: 10,
|
|
234
234
|
viewBox: "0 0 48 48",
|
|
235
235
|
fill: "none"
|
|
@@ -266,7 +266,7 @@ const it = { class: "layout-icon" }, dt = {
|
|
|
266
266
|
stroke: "currentColor",
|
|
267
267
|
"stroke-width": "1.5"
|
|
268
268
|
}, null, -1)
|
|
269
|
-
])])) : n.type === "3" ? (i(), c("svg",
|
|
269
|
+
])])) : n.type === "3" ? (i(), c("svg", ht, [...o[2] || (o[2] = [
|
|
270
270
|
d("rect", {
|
|
271
271
|
x: "4",
|
|
272
272
|
y: "4",
|
|
@@ -291,7 +291,7 @@ const it = { class: "layout-icon" }, dt = {
|
|
|
291
291
|
stroke: "currentColor",
|
|
292
292
|
"stroke-width": "1.5"
|
|
293
293
|
}, null, -1)
|
|
294
|
-
])])) : n.type === "4" ? (i(), c("svg",
|
|
294
|
+
])])) : n.type === "4" ? (i(), c("svg", wt, [...o[3] || (o[3] = [
|
|
295
295
|
d("rect", {
|
|
296
296
|
x: "4",
|
|
297
297
|
y: "4",
|
|
@@ -325,26 +325,26 @@ const it = { class: "layout-icon" }, dt = {
|
|
|
325
325
|
"stroke-width": "1.5"
|
|
326
326
|
}, null, -1)
|
|
327
327
|
])])) : n.type === "6" ? (i(), c("svg", ut, [...o[4] || (o[4] = [
|
|
328
|
-
|
|
328
|
+
g('<rect x="3" y="4" width="13" height="18" stroke="currentColor" stroke-width="1.5" data-v-31e0404d></rect><rect x="18" y="4" width="12" height="18" stroke="currentColor" stroke-width="1.5" data-v-31e0404d></rect><rect x="32" y="4" width="13" height="18" stroke="currentColor" stroke-width="1.5" data-v-31e0404d></rect><rect x="3" y="24" width="13" height="18" stroke="currentColor" stroke-width="1.5" data-v-31e0404d></rect><rect x="18" y="24" width="12" height="18" stroke="currentColor" stroke-width="1.5" data-v-31e0404d></rect><rect x="32" y="24" width="13" height="18" stroke="currentColor" stroke-width="1.5" data-v-31e0404d></rect>', 6)
|
|
329
329
|
])])) : n.type === "7" ? (i(), c("svg", pt, [...o[5] || (o[5] = [
|
|
330
|
-
|
|
330
|
+
g('<rect x="4" y="4" width="19" height="19" stroke="currentColor" stroke-width="2" data-v-31e0404d></rect><rect x="25" y="4" width="19" height="19" stroke="currentColor" stroke-width="2" data-v-31e0404d></rect><rect x="4" y="25" width="19" height="19" stroke="currentColor" stroke-width="2" data-v-31e0404d></rect><rect x="25" y="25" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="35" y="25" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="25" y="35" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="35" y="35" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect>', 7)
|
|
331
331
|
])])) : n.type === "8" ? (i(), c("svg", vt, [...o[6] || (o[6] = [
|
|
332
|
-
|
|
332
|
+
g('<rect x="4" y="4" width="28" height="29" stroke="currentColor" stroke-width="2" data-v-31e0404d></rect><rect x="34" y="4" width="10" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="34" y="14.5" width="10" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="34" y="24.5" width="10" height="8.5" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="4" y="35" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="14" y="35" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="24" y="35" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="34" y="35" width="10" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect>', 8)
|
|
333
333
|
])])) : n.type === "9" ? (i(), c("svg", yt, [...o[7] || (o[7] = [
|
|
334
|
-
|
|
334
|
+
g('<rect x="4" y="4" width="12" height="12" stroke="currentColor" stroke-width="1.5" data-v-31e0404d></rect><rect x="18" y="4" width="12" height="12" stroke="currentColor" stroke-width="1.5" data-v-31e0404d></rect><rect x="32" y="4" width="12" height="12" stroke="currentColor" stroke-width="1.5" data-v-31e0404d></rect><rect x="4" y="18" width="12" height="12" stroke="currentColor" stroke-width="1.5" data-v-31e0404d></rect><rect x="18" y="18" width="12" height="12" stroke="currentColor" stroke-width="1.5" data-v-31e0404d></rect><rect x="32" y="18" width="12" height="12" stroke="currentColor" stroke-width="1.5" data-v-31e0404d></rect><rect x="4" y="32" width="12" height="12" stroke="currentColor" stroke-width="1.5" data-v-31e0404d></rect><rect x="18" y="32" width="12" height="12" stroke="currentColor" stroke-width="1.5" data-v-31e0404d></rect><rect x="32" y="32" width="12" height="12" stroke="currentColor" stroke-width="1.5" data-v-31e0404d></rect>', 9)
|
|
335
335
|
])])) : n.type === "10" ? (i(), c("svg", kt, [...o[8] || (o[8] = [
|
|
336
|
-
|
|
337
|
-
])])) : n.type === "13" ? (i(), c("svg",
|
|
338
|
-
|
|
339
|
-
])])) : n.type === "16" ? (i(), c("svg",
|
|
340
|
-
|
|
336
|
+
g('<rect x="3" y="4" width="36" height="29" stroke="currentColor" stroke-width="2" data-v-31e0404d></rect><rect x="41" y="4" width="10" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="41" y="14.5" width="10" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="41" y="24.5" width="10" height="8.5" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="3" y="35" width="7" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="11" y="35" width="7" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="19" y="35" width="7" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="27" y="35" width="7" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="35" y="35" width="6" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="42" y="35" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect>', 10)
|
|
337
|
+
])])) : n.type === "13" ? (i(), c("svg", gt, [...o[9] || (o[9] = [
|
|
338
|
+
g('<rect x="4" y="4" width="18" height="18" stroke="currentColor" stroke-width="2" data-v-31e0404d></rect><rect x="24" y="4" width="8" height="8" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="34" y="4" width="10" height="8" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="24" y="14" width="8" height="8" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="34" y="14" width="10" height="8" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="4" y="24" width="8" height="8" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="14" y="24" width="8" height="8" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="24" y="24" width="8" height="8" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="34" y="24" width="10" height="8" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="4" y="34" width="8" height="10" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="14" y="34" width="8" height="10" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="24" y="34" width="8" height="10" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="34" y="34" width="10" height="10" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect>', 13)
|
|
339
|
+
])])) : n.type === "16" ? (i(), c("svg", St, [...o[10] || (o[10] = [
|
|
340
|
+
g('<rect x="4" y="4" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="15" y="4" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="26" y="4" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="37" y="4" width="7" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="4" y="15" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="15" y="15" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="26" y="15" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="37" y="15" width="7" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="4" y="26" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="15" y="26" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="26" y="26" width="9" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="37" y="26" width="7" height="9" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="4" y="37" width="9" height="7" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="15" y="37" width="9" height="7" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="26" y="37" width="9" height="7" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect><rect x="37" y="37" width="7" height="7" stroke="currentColor" stroke-width="1.2" data-v-31e0404d></rect>', 16)
|
|
341
341
|
])])) : F("", !0)
|
|
342
342
|
]));
|
|
343
343
|
}
|
|
344
344
|
}), U = (n, k) => {
|
|
345
345
|
const o = n.__vccOpts || n;
|
|
346
|
-
for (const [C,
|
|
347
|
-
o[C] =
|
|
346
|
+
for (const [C, w] of k)
|
|
347
|
+
o[C] = w;
|
|
348
348
|
return o;
|
|
349
349
|
}, Y = /* @__PURE__ */ U(Ct, [["__scopeId", "data-v-31e0404d"]]), ft = {
|
|
350
350
|
key: 0,
|
|
@@ -355,7 +355,7 @@ const it = { class: "layout-icon" }, dt = {
|
|
|
355
355
|
class: "video-grid-container",
|
|
356
356
|
role: "region",
|
|
357
357
|
"aria-label": "视频网格"
|
|
358
|
-
}, Lt = ["aria-label", "onDragstart", "onDragenter", "onDragleave", "onDrop"], _t = { class: "video-placeholder" }, $t = { class: "placeholder-number" }, It = 0.5, Bt = "grabbing",
|
|
358
|
+
}, Lt = ["aria-label", "onDragstart", "onDragenter", "onDragleave", "onDrop"], _t = { class: "video-placeholder" }, $t = { class: "placeholder-number" }, It = 0.5, Bt = "grabbing", Vt = "0.8", At = /* @__PURE__ */ P({
|
|
359
359
|
__name: "VideoGridLayout",
|
|
360
360
|
props: {
|
|
361
361
|
videos: {},
|
|
@@ -369,24 +369,24 @@ const it = { class: "layout-icon" }, dt = {
|
|
|
369
369
|
},
|
|
370
370
|
emits: ["layoutChange", "videosChange"],
|
|
371
371
|
setup(n, { emit: k }) {
|
|
372
|
-
const o = n, C = k,
|
|
372
|
+
const o = n, C = k, w = B(o.layout);
|
|
373
373
|
L(() => o.layout, (t) => {
|
|
374
|
-
|
|
374
|
+
w.value = t;
|
|
375
375
|
});
|
|
376
|
-
const j = y(() => o.availableLayouts && o.availableLayouts.length > 0 ? o.availableLayouts : ct()),
|
|
376
|
+
const j = y(() => o.availableLayouts && o.availableLayouts.length > 0 ? o.availableLayouts : ct()), p = T([]);
|
|
377
377
|
function _(t) {
|
|
378
|
-
const
|
|
379
|
-
|
|
380
|
-
s && s.id !== void 0 && (
|
|
378
|
+
const e = Array.isArray(t) ? t : o.videos || [], a = I.value, r = {};
|
|
379
|
+
p.value.forEach((s, v) => {
|
|
380
|
+
s && s.id !== void 0 && (r[s.id] = s.__labelNumber ?? v + 1);
|
|
381
381
|
});
|
|
382
|
-
const l = Array.from({ length: a }).map((s,
|
|
383
|
-
const
|
|
384
|
-
if (
|
|
385
|
-
const ot =
|
|
386
|
-
return { ...
|
|
382
|
+
const l = Array.from({ length: a }).map((s, v) => {
|
|
383
|
+
const h = e[v];
|
|
384
|
+
if (h) {
|
|
385
|
+
const ot = r[h.id] ?? h.__labelNumber ?? v + 1;
|
|
386
|
+
return { ...h, __labelNumber: ot };
|
|
387
387
|
}
|
|
388
388
|
});
|
|
389
|
-
|
|
389
|
+
p.value = l;
|
|
390
390
|
}
|
|
391
391
|
L(() => o.videos, (t) => {
|
|
392
392
|
if (!Array.isArray(t)) {
|
|
@@ -396,24 +396,24 @@ const it = { class: "layout-icon" }, dt = {
|
|
|
396
396
|
_(t);
|
|
397
397
|
}, { flush: "post" });
|
|
398
398
|
let $ = !1;
|
|
399
|
-
L(
|
|
399
|
+
L(p, (t) => {
|
|
400
400
|
!$ && Array.isArray(t) && C("videosChange", t);
|
|
401
401
|
});
|
|
402
|
-
const
|
|
403
|
-
const t =
|
|
404
|
-
return t || (console.warn(`[VideoGridLayout] Invalid layout type: ${
|
|
405
|
-
}),
|
|
402
|
+
const N = y(() => {
|
|
403
|
+
const t = S[w.value];
|
|
404
|
+
return t || (console.warn(`[VideoGridLayout] Invalid layout type: ${w.value}, fallback to '4'`), S[4]);
|
|
405
|
+
}), b = y(() => nt(w.value)), I = y(() => {
|
|
406
406
|
var t;
|
|
407
|
-
return ((t =
|
|
408
|
-
}), D = y(() =>
|
|
407
|
+
return ((t = N.value) == null ? void 0 : t.count) || 4;
|
|
408
|
+
}), D = y(() => p.value.slice(0, I.value).map((t) => t).filter(Boolean));
|
|
409
409
|
_(o.videos), L(I, () => {
|
|
410
410
|
_(o.videos);
|
|
411
411
|
}), y(() => {
|
|
412
|
-
const t =
|
|
413
|
-
return t.sort((
|
|
412
|
+
const t = b.value.map((e, a) => ({ p: e, idx: a }));
|
|
413
|
+
return t.sort((e, a) => e.p.row === a.p.row ? (e.p.col || 0) - (a.p.col || 0) : (e.p.row || 0) - (a.p.row || 0)), t.map((e) => e.idx);
|
|
414
414
|
});
|
|
415
|
-
const u = B(-1),
|
|
416
|
-
const t =
|
|
415
|
+
const u = B(-1), f = B(-1), x = T(null), z = y(() => {
|
|
416
|
+
const t = N.value;
|
|
417
417
|
return {
|
|
418
418
|
display: "grid",
|
|
419
419
|
gridTemplateColumns: (t == null ? void 0 : t.colTemplate) || `repeat(${(t == null ? void 0 : t.cols) || 2}, 1fr)`,
|
|
@@ -427,110 +427,117 @@ const it = { class: "layout-icon" }, dt = {
|
|
|
427
427
|
height: o.height || "100%"
|
|
428
428
|
}));
|
|
429
429
|
function W(t) {
|
|
430
|
-
const
|
|
431
|
-
return !
|
|
432
|
-
gridColumn: `${
|
|
433
|
-
gridRow: `${
|
|
430
|
+
const e = b.value[t];
|
|
431
|
+
return !e || typeof e.col != "number" || typeof e.row != "number" ? {} : {
|
|
432
|
+
gridColumn: `${e.col} / span ${e.colSpan}`,
|
|
433
|
+
gridRow: `${e.row} / span ${e.rowSpan}`
|
|
434
434
|
};
|
|
435
435
|
}
|
|
436
436
|
function q(t) {
|
|
437
|
-
const
|
|
438
|
-
return (
|
|
437
|
+
const e = b.value[t];
|
|
438
|
+
return (e == null ? void 0 : e.isMain) || !1;
|
|
439
439
|
}
|
|
440
440
|
function J(t) {
|
|
441
|
-
|
|
441
|
+
w.value = t, C("layoutChange", w.value);
|
|
442
442
|
}
|
|
443
|
-
function
|
|
444
|
-
if (
|
|
443
|
+
function m() {
|
|
444
|
+
if (x.value && document.body.contains(x.value)) {
|
|
445
445
|
try {
|
|
446
|
-
document.body.removeChild(
|
|
446
|
+
document.body.removeChild(x.value);
|
|
447
447
|
} catch (t) {
|
|
448
448
|
console.warn("[VideoGridLayout] Failed to cleanup drag image:", t);
|
|
449
449
|
}
|
|
450
|
-
|
|
450
|
+
x.value = null;
|
|
451
451
|
}
|
|
452
452
|
}
|
|
453
|
-
function K(t,
|
|
454
|
-
if (
|
|
455
|
-
console.warn("[VideoGridLayout] Invalid drag index:",
|
|
453
|
+
function K(t, e) {
|
|
454
|
+
if (e < 0 || e >= p.value.length) {
|
|
455
|
+
console.warn("[VideoGridLayout] Invalid drag index:", e);
|
|
456
456
|
return;
|
|
457
457
|
}
|
|
458
|
-
if (u.value =
|
|
458
|
+
if (u.value = e, !t.dataTransfer) return;
|
|
459
459
|
t.dataTransfer.effectAllowed = "move";
|
|
460
|
-
const
|
|
461
|
-
if (
|
|
460
|
+
const r = t.target.closest(".video-item");
|
|
461
|
+
if (r)
|
|
462
462
|
try {
|
|
463
|
-
|
|
464
|
-
const l =
|
|
465
|
-
l.style.width = `${
|
|
466
|
-
|
|
467
|
-
}, 100),
|
|
463
|
+
m();
|
|
464
|
+
const l = r.cloneNode(!0);
|
|
465
|
+
l.style.width = `${r.offsetWidth}px`, l.style.height = `${r.offsetHeight}px`, l.style.opacity = Vt, l.style.position = "absolute", l.style.top = "-9999px", l.style.pointerEvents = "none", document.body.appendChild(l), x.value = l, t.dataTransfer.setDragImage(l, r.offsetWidth / 2, r.offsetHeight / 2), setTimeout(() => {
|
|
466
|
+
m();
|
|
467
|
+
}, 100), r.style.opacity = String(It), r.style.cursor = Bt;
|
|
468
468
|
} catch (l) {
|
|
469
|
-
console.error("[VideoGridLayout] Drag start error:", l),
|
|
469
|
+
console.error("[VideoGridLayout] Drag start error:", l), m();
|
|
470
470
|
}
|
|
471
471
|
}
|
|
472
|
-
function Q(t,
|
|
472
|
+
function Q(t, e) {
|
|
473
473
|
t.preventDefault(), t.stopPropagation();
|
|
474
474
|
const a = u.value;
|
|
475
|
-
if (a === -1 || a ===
|
|
475
|
+
if (a === -1 || a === e) {
|
|
476
476
|
u.value = -1;
|
|
477
477
|
return;
|
|
478
478
|
}
|
|
479
|
-
if (
|
|
480
|
-
console.warn("[VideoGridLayout]
|
|
479
|
+
if (a >= p.value.length) {
|
|
480
|
+
console.warn("[VideoGridLayout] No video at from index:", a), u.value = -1;
|
|
481
481
|
return;
|
|
482
482
|
}
|
|
483
483
|
try {
|
|
484
|
-
const
|
|
485
|
-
|
|
486
|
-
|
|
484
|
+
const r = t.currentTarget;
|
|
485
|
+
r && (r.style.backgroundColor = "rgba(66, 184, 131, 0.3)", r.style.borderColor = "#42b883", setTimeout(() => {
|
|
486
|
+
r.style.backgroundColor = "", r.style.borderColor = "";
|
|
487
487
|
}, 200));
|
|
488
|
-
const l = [...
|
|
489
|
-
|
|
490
|
-
|
|
488
|
+
const l = [...p.value];
|
|
489
|
+
if (e >= l.length) {
|
|
490
|
+
const s = l[a];
|
|
491
|
+
l.splice(a, 1), l.push(s);
|
|
492
|
+
} else {
|
|
493
|
+
const s = l[a];
|
|
494
|
+
l[a] = l[e], l[e] = s;
|
|
495
|
+
}
|
|
496
|
+
$ = !0, p.value = l, setTimeout(() => {
|
|
497
|
+
$ = !1, C("videosChange", p.value.filter(Boolean));
|
|
491
498
|
}, 0);
|
|
492
|
-
} catch (
|
|
493
|
-
console.error("[VideoGridLayout] Drop error:",
|
|
499
|
+
} catch (r) {
|
|
500
|
+
console.error("[VideoGridLayout] Drop error:", r);
|
|
494
501
|
} finally {
|
|
495
502
|
u.value = -1;
|
|
496
503
|
}
|
|
497
504
|
}
|
|
498
|
-
function X(t,
|
|
499
|
-
t.preventDefault(), u.value !== -1 && u.value !==
|
|
505
|
+
function X(t, e) {
|
|
506
|
+
t.preventDefault(), u.value !== -1 && u.value !== e && (f.value = e);
|
|
500
507
|
}
|
|
501
|
-
function Z(t,
|
|
508
|
+
function Z(t, e) {
|
|
502
509
|
t.preventDefault();
|
|
503
|
-
const a = t.target,
|
|
504
|
-
a.contains(
|
|
510
|
+
const a = t.target, r = t.relatedTarget;
|
|
511
|
+
a.contains(r) || f.value === e && (f.value = -1);
|
|
505
512
|
}
|
|
506
513
|
function tt(t) {
|
|
507
514
|
const a = t.target.closest(".video-item");
|
|
508
|
-
a && (a.style.opacity = "1", a.style.cursor = "move"),
|
|
515
|
+
a && (a.style.opacity = "1", a.style.cursor = "move"), m(), u.value = -1, f.value = -1;
|
|
509
516
|
}
|
|
510
|
-
return
|
|
511
|
-
|
|
512
|
-
}), (t,
|
|
517
|
+
return et(() => {
|
|
518
|
+
m();
|
|
519
|
+
}), (t, e) => (i(), c("div", {
|
|
513
520
|
class: "video-grid-layout",
|
|
514
521
|
role: "application",
|
|
515
522
|
"aria-label": "视频分屏布局",
|
|
516
|
-
style:
|
|
523
|
+
style: V(H.value)
|
|
517
524
|
}, [
|
|
518
525
|
n.showToolbar ? (i(), c("div", ft, [
|
|
519
|
-
|
|
526
|
+
e[1] || (e[1] = d("div", { class: "toolbar-title" }, "分屏布局", -1)),
|
|
520
527
|
d("div", xt, [
|
|
521
|
-
(i(!0), c(
|
|
522
|
-
var
|
|
528
|
+
(i(!0), c(E, null, O(j.value, (a) => {
|
|
529
|
+
var r, l, s;
|
|
523
530
|
return i(), c("button", {
|
|
524
531
|
key: a,
|
|
525
|
-
class: M(["layout-btn", { active:
|
|
526
|
-
onClick: (
|
|
527
|
-
title: ((
|
|
528
|
-
"aria-label": `切换到${((l =
|
|
529
|
-
"aria-pressed":
|
|
532
|
+
class: M(["layout-btn", { active: w.value === a }]),
|
|
533
|
+
onClick: (v) => J(a),
|
|
534
|
+
title: ((r = A(S)[a]) == null ? void 0 : r.label) || "",
|
|
535
|
+
"aria-label": `切换到${((l = A(S)[a]) == null ? void 0 : l.label) || ""}布局`,
|
|
536
|
+
"aria-pressed": w.value === a,
|
|
530
537
|
type: "button"
|
|
531
538
|
}, [
|
|
532
|
-
|
|
533
|
-
d("span", bt, R(((s =
|
|
539
|
+
rt(Y, { type: a }, null, 8, ["type"]),
|
|
540
|
+
d("span", bt, R(((s = A(S)[a]) == null ? void 0 : s.label) || ""), 1)
|
|
534
541
|
], 10, mt);
|
|
535
542
|
}), 128))
|
|
536
543
|
])
|
|
@@ -538,36 +545,36 @@ const it = { class: "layout-icon" }, dt = {
|
|
|
538
545
|
d("div", Dt, [
|
|
539
546
|
d("div", {
|
|
540
547
|
class: "video-grid",
|
|
541
|
-
style:
|
|
548
|
+
style: V(z.value)
|
|
542
549
|
}, [
|
|
543
|
-
(i(!0), c(
|
|
544
|
-
var l, s,
|
|
550
|
+
(i(!0), c(E, null, O(b.value, (a, r) => {
|
|
551
|
+
var l, s, v;
|
|
545
552
|
return i(), c("div", {
|
|
546
|
-
key: ((l = D.value[
|
|
553
|
+
key: ((l = D.value[r]) == null ? void 0 : l.id) ?? r,
|
|
547
554
|
class: M(["video-item", {
|
|
548
|
-
"main-video": q(
|
|
549
|
-
dragging: u.value ===
|
|
550
|
-
"drag-over":
|
|
555
|
+
"main-video": q(r),
|
|
556
|
+
dragging: u.value === r,
|
|
557
|
+
"drag-over": f.value === r && u.value !== r
|
|
551
558
|
}]),
|
|
552
|
-
style:
|
|
559
|
+
style: V(W(r)),
|
|
553
560
|
draggable: !0,
|
|
554
|
-
"aria-label": `视频 ${
|
|
561
|
+
"aria-label": `视频 ${r + 1}: ${((s = D.value[r]) == null ? void 0 : s.title) || ((v = D.value[r]) == null ? void 0 : v.id) || ""}`,
|
|
555
562
|
role: "article",
|
|
556
563
|
tabindex: "0",
|
|
557
|
-
onDragstart: (
|
|
558
|
-
onDragover:
|
|
564
|
+
onDragstart: (h) => K(h, r),
|
|
565
|
+
onDragover: e[0] || (e[0] = at(() => {
|
|
559
566
|
}, ["prevent"])),
|
|
560
|
-
onDragenter: (
|
|
561
|
-
onDragleave: (
|
|
562
|
-
onDrop: (
|
|
567
|
+
onDragenter: (h) => X(h, r),
|
|
568
|
+
onDragleave: (h) => Z(h, r),
|
|
569
|
+
onDrop: (h) => Q(h, r),
|
|
563
570
|
onDragend: tt
|
|
564
571
|
}, [
|
|
565
572
|
lt(t.$slots, "video", {
|
|
566
|
-
video: D.value[
|
|
567
|
-
index:
|
|
573
|
+
video: D.value[r],
|
|
574
|
+
index: r
|
|
568
575
|
}, () => [
|
|
569
576
|
d("div", _t, [
|
|
570
|
-
d("div", $t, R(
|
|
577
|
+
d("div", $t, R(r + 1), 1)
|
|
571
578
|
])
|
|
572
579
|
], !0)
|
|
573
580
|
], 46, Lt);
|
|
@@ -576,21 +583,21 @@ const it = { class: "layout-icon" }, dt = {
|
|
|
576
583
|
])
|
|
577
584
|
], 4));
|
|
578
585
|
}
|
|
579
|
-
}), Gt = /* @__PURE__ */ U(
|
|
586
|
+
}), Gt = /* @__PURE__ */ U(At, [["__scopeId", "data-v-222ef64d"]]), Nt = {
|
|
580
587
|
VideoGridLayout: Gt,
|
|
581
588
|
VideoLayoutIcon: Y
|
|
582
|
-
},
|
|
589
|
+
}, Et = {
|
|
583
590
|
install(n) {
|
|
584
|
-
Object.entries(
|
|
591
|
+
Object.entries(Nt).forEach(([k, o]) => {
|
|
585
592
|
n.component(k, o);
|
|
586
593
|
});
|
|
587
594
|
}
|
|
588
595
|
};
|
|
589
596
|
export {
|
|
590
|
-
|
|
597
|
+
S as LAYOUT_CONFIGS,
|
|
591
598
|
Gt as VideoGridLayout,
|
|
592
599
|
Y as VideoLayoutIcon,
|
|
593
|
-
|
|
600
|
+
Et as default,
|
|
594
601
|
ct as getAllLayoutTypes,
|
|
595
602
|
nt as getLayoutPositions
|
|
596
603
|
};
|
package/dist/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.layout-icon[data-v-31e0404d]{width:16px;height:16px;display:inline-flex;align-items:center;justify-content:center}.layout-icon svg[data-v-31e0404d]{width:100%;height:100%}.video-grid-layout[data-v-
|
|
1
|
+
.layout-icon[data-v-31e0404d]{width:16px;height:16px;display:inline-flex;align-items:center;justify-content:center}.layout-icon svg[data-v-31e0404d]{width:100%;height:100%}.video-grid-layout[data-v-222ef64d]{width:100%;height:100%;display:flex;flex-direction:column;background:#0015294d}.layout-toolbar[data-v-222ef64d]{padding:12px 16px;background:#fff;border-bottom:1px solid #e0e0e0;display:flex;align-items:center;gap:16px;flex-wrap:wrap}.toolbar-title[data-v-222ef64d]{font-size:14px;font-weight:600;color:#333}.layout-buttons[data-v-222ef64d]{display:flex;gap:8px;flex-wrap:wrap}.layout-btn[data-v-222ef64d]{display:flex;align-items:center;gap:6px;padding:6px 12px;border:1px solid #d0d0d0;background:#fff;border-radius:4px;cursor:pointer;transition:all .2s;font-size:12px;color:#666}.layout-btn[data-v-222ef64d]:hover{border-color:#42b883;color:#42b883;background:#f0fdf4}.layout-btn.active[data-v-222ef64d]{border-color:#42b883;background:#42b883;color:#fff}.layout-label[data-v-222ef64d]{font-size:12px}.video-grid-container[data-v-222ef64d]{flex:1;padding:8px;display:flex;align-items:center;justify-content:center;min-height:0;overflow:hidden;box-sizing:border-box}.video-grid[data-v-222ef64d]{width:100%;height:100%;max-width:100%;max-height:100%;background:#00409f33;padding:4px;border-radius:4px;box-sizing:border-box}.video-item[data-v-222ef64d]{position:relative;background:#00152999;border:2px solid rgba(0,64,159,.49);border-radius:4px;overflow:hidden;cursor:move;transition:border-color .2s ease,background .2s ease,box-shadow .2s ease,transform .2s ease;min-height:0;min-width:0;-webkit-user-select:none;user-select:none;-webkit-user-drag:element;will-change:transform}.video-item.dragging[data-v-222ef64d]{opacity:.5;cursor:grabbing;transform:scale(.98);box-shadow:0 4px 12px #0000004d}.video-item[data-v-222ef64d]:hover{border-color:#42b883cc;background:#001529cc}.video-item.drag-over[data-v-222ef64d]{border:1px solid rgba(66,184,131,1)!important;background:#42b88333!important}.video-item[data-v-222ef64d]:focus{outline:1px solid rgba(66,184,131,1);outline-offset:1px}.video-item.main-video[data-v-222ef64d]{border-width:1px}.video-item[data-v-222ef64d]>*{width:100%;height:100%}.video-placeholder[data-v-222ef64d]{display:flex;align-items:center;justify-content:center;height:100%;color:#3de6ff80;-webkit-user-select:none;user-select:none;background:#00409f4d}.placeholder-number[data-v-222ef64d]{font-size:48px;font-weight:700;color:#3de6ff99;text-shadow:0 0 10px rgba(61,230,255,.3)}@media (max-width: 768px){.layout-toolbar[data-v-222ef64d]{flex-direction:column;align-items:flex-start}.layout-label[data-v-222ef64d]{display:none}}
|