video-split-screen 1.0.9 → 1.0.12
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/README.md +2 -2
- package/dist/index.js +1 -1
- package/dist/index.mjs +252 -188
- package/dist/style.css +1 -1
- package/dist/types.d.ts +2 -2
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# video-split-screen
|
|
2
2
|
|
|
3
|
-
> **v1.0.
|
|
3
|
+
> **v1.0.12** - Vue 3 视频分屏组件（VideoSplitScreen）——可发布到 npm 的插件包。
|
|
4
4
|
|
|
5
5
|
安装（npm）
|
|
6
6
|
|
|
@@ -39,7 +39,7 @@ import 'video-split-screen/dist/style.css'
|
|
|
39
39
|
主要 Props（VideoGridLayout）
|
|
40
40
|
|
|
41
41
|
- `videos: VideoItem[]` — 视频数组（必填）
|
|
42
|
-
- `layout?: LayoutType` — 布局类型（'1'|'2'|'3'|'4'|'6'|'7'|'8'|'9'|'10'|'13'|'16'），默认 `'1'`
|
|
42
|
+
- `layout?: LayoutType` — 布局类型（'1'|'2'|'3'|'4'|'6'|'7'|'8'|'9'|'10'|'13'|'16'|'24'|'32'|'36'|'48'|'64'），默认 `'1'`
|
|
43
43
|
- `availableLayouts?: LayoutType[]` — 可选显示的布局按钮列表
|
|
44
44
|
- `showToolbar?: boolean` — 是否显示工具栏，默认 `true`
|
|
45
45
|
- `width?: string` — 宽度（任意 CSS 长度，例如 `100%`, `800px`）
|
package/dist/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=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}},V={};function D(n){if(V[n])return V[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&&(V[n]=o),o}function _(){return Object.keys(k)}const X={class:"layout-icon"},J={key:0,viewBox:"0 0 48 48",fill:"none"},K={key:1,viewBox:"0 0 48 48",fill:"none"},Q={key:2,viewBox:"0 0 48 48",fill:"none"},W={key:3,viewBox:"0 0 48 48",fill:"none"},Z={key:4,viewBox:"0 0 48 48",fill:"none"},ee={key:5,viewBox:"0 0 48 48",fill:"none"},te={key:6,viewBox:"0 0 48 48",fill:"none"},oe={key:7,viewBox:"0 0 48 48",fill:"none"},re={key:8,viewBox:"0 0 54 48",fill:"none"},ae={key:9,viewBox:"0 0 48 48",fill:"none"},le={key:10,viewBox:"0 0 48 48",fill:"none"},ne=e.defineComponent({__name:"VideoLayoutIcon",props:{type:{}},setup(n){return(v,o)=>(e.openBlock(),e.createElementBlock("div",X,[n.type==="1"?(e.openBlock(),e.createElementBlock("svg",J,[...o[0]||(o[0]=[e.createElementVNode("rect",{x:"4",y:"4",width:"40",height:"40",stroke:"currentColor","stroke-width":"2"},null,-1)])])):n.type==="2"?(e.openBlock(),e.createElementBlock("svg",K,[...o[1]||(o[1]=[e.createElementVNode("rect",{x:"4",y:"4",width:"19",height:"40",stroke:"currentColor","stroke-width":"1.5"},null,-1),e.createElementVNode("rect",{x:"25",y:"4",width:"19",height:"40",stroke:"currentColor","stroke-width":"1.5"},null,-1)])])):n.type==="3"?(e.openBlock(),e.createElementBlock("svg",Q,[...o[2]||(o[2]=[e.createElementVNode("rect",{x:"4",y:"4",width:"20",height:"40",stroke:"currentColor","stroke-width":"2"},null,-1),e.createElementVNode("rect",{x:"26",y:"4",width:"18",height:"19",stroke:"currentColor","stroke-width":"1.5"},null,-1),e.createElementVNode("rect",{x:"26",y:"25",width:"18",height:"19",stroke:"currentColor","stroke-width":"1.5"},null,-1)])])):n.type==="4"?(e.openBlock(),e.createElementBlock("svg",W,[...o[3]||(o[3]=[e.createElementVNode("rect",{x:"4",y:"4",width:"19",height:"19",stroke:"currentColor","stroke-width":"1.5"},null,-1),e.createElementVNode("rect",{x:"25",y:"4",width:"19",height:"19",stroke:"currentColor","stroke-width":"1.5"},null,-1),e.createElementVNode("rect",{x:"4",y:"25",width:"19",height:"19",stroke:"currentColor","stroke-width":"1.5"},null,-1),e.createElementVNode("rect",{x:"25",y:"25",width:"19",height:"19",stroke:"currentColor","stroke-width":"1.5"},null,-1)])])):n.type==="6"?(e.openBlock(),e.createElementBlock("svg",Z,[...o[4]||(o[4]=[e.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"?(e.openBlock(),e.createElementBlock("svg",ee,[...o[5]||(o[5]=[e.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"?(e.openBlock(),e.createElementBlock("svg",te,[...o[6]||(o[6]=[e.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"?(e.openBlock(),e.createElementBlock("svg",oe,[...o[7]||(o[7]=[e.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"?(e.openBlock(),e.createElementBlock("svg",re,[...o[8]||(o[8]=[e.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"?(e.openBlock(),e.createElementBlock("svg",ae,[...o[9]||(o[9]=[e.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"?(e.openBlock(),e.createElementBlock("svg",le,[...o[10]||(o[10]=[e.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)])])):e.createCommentVNode("",!0)]))}}),A=(n,v)=>{const o=n.__vccOpts||n;for(const[y,h]of v)o[y]=h;return o},L=A(ne,[["__scopeId","data-v-31e0404d"]]),ce={key:0,class:"layout-toolbar",role:"toolbar","aria-label":"布局切换工具栏"},ie={class:"layout-buttons"},de=["onClick","title","aria-label","aria-pressed"],se={class:"layout-label"},he={class:"video-grid-container",role:"region","aria-label":"视频网格"},we=["aria-label","onDragstart","onDragenter","onDragleave","onDrop"],ue={class:"video-placeholder"},pe={class:"placeholder-number"},ve=.5,ke="grabbing",ye="0.8",ge=e.defineComponent({__name:"VideoGridLayout",props:{videos:{},layout:{default:"1"},availableLayouts:{},showToolbar:{type:Boolean,default:!0},width:{},height:{},placeholderText:{},placeholders:{},dragAnimation:{default:"scale"}},emits:["layoutChange","videosChange"],setup(n,{emit:v}){const o=n,y=v,h=e.ref(o.layout);e.watch(()=>o.layout,t=>{h.value=t});const I=e.computed(()=>o.availableLayouts&&o.availableLayouts.length>0?o.availableLayouts:_()),u=e.shallowRef([]);function b(t){const r=Array.isArray(t)?t:o.videos||[],l=E.value,a={};u.value.forEach((i,p)=>{i&&i.id!==void 0&&(a[i.id]=i.__labelNumber??p+1)});const c=Array.from({length:l}).map((i,p)=>{const s=r[p];if(s){const H=a[s.id]??s.__labelNumber??p+1;return{...s,__labelNumber:H}}});u.value=c}e.watch(()=>o.videos,t=>{if(!Array.isArray(t)){console.warn("[VideoGridLayout] Invalid videos prop, expected array");return}b(t)},{flush:"post"}),e.watch(E,()=>{b(o.videos)});let B=!1;e.watch(u,t=>{!B&&Array.isArray(t)&&y("videosChange",t)});const N=e.computed(()=>{const t=k[h.value];return t||(console.warn(`[VideoGridLayout] Invalid layout type: ${h.value}, fallback to '4'`),k[4])}),g=e.computed(()=>D(h.value)),E=e.computed(()=>{var t;return((t=N.value)==null?void 0:t.count)||4}),C=e.computed(()=>u.value.slice(0,E.value).map(t=>t).filter(Boolean));b(o.videos);const T=e.computed(()=>{const t=g.value.map((r,l)=>({p:r,idx:l}));return t.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)),t.map(r=>r.idx)}),w=e.ref(-1),S=e.ref(-1),f=e.shallowRef(null),d=e.shallowRef(null);let m=null;const G=e.computed(()=>{const t=N.value;return{display:"grid",gridTemplateColumns:(t==null?void 0:t.colTemplate)||`repeat(${(t==null?void 0:t.cols)||2}, 1fr)`,gridTemplateRows:(t==null?void 0:t.rowTemplate)||`repeat(${(t==null?void 0:t.rows)||2}, 1fr)`,gap:"4px",width:o.width||"100%",height:o.height||"100%"}}),O=e.computed(()=>({width:o.width||"100%",height:o.height||"100%"}));function M(t){const r=T.value.indexOf(t);if(r===-1)return String(t+1);if(Array.isArray(o.placeholders)&&o.placeholders[r]!==void 0)return String(o.placeholders[r]);if(typeof o.placeholderText=="function")try{return o.placeholderText(r)}catch{return String(r+1)}return o.placeholderText?String(o.placeholderText):String(r+1)}function R(t){const r=g.value[t];return!r||typeof r.col!="number"||typeof r.row!="number"?{}:{gridColumn:`${r.col} / span ${r.colSpan}`,gridRow:`${r.row} / span ${r.rowSpan}`}}function P(t){const r=g.value[t];return(r==null?void 0:r.isMain)||!1}function z(t){h.value=t,y("layoutChange",h.value)}function x(){if(f.value&&document.body.contains(f.value)){try{document.body.removeChild(f.value)}catch(t){console.warn("[VideoGridLayout] Failed to cleanup drag image:",t)}f.value=null}if(d.value&&document.body.contains(d.value)){try{document.body.removeChild(d.value)}catch{}d.value=null}m&&(document.removeEventListener("mousemove",m),m=null)}function F(t,r){if(r<0||r>=u.value.length){console.warn("[VideoGridLayout] Invalid drag index:",r);return}if(w.value=r,!t.dataTransfer)return;t.dataTransfer.effectAllowed="move";const a=t.target.closest(".video-item");if(a)try{if(x(),t.dataTransfer){const i=new Image;i.src="",t.dataTransfer.setDragImage(i,0,0)}const c=a.cloneNode(!0);c.style.position="fixed",c.style.top="0px",c.style.left="0px",c.style.margin="0",c.style.pointerEvents="none",c.style.opacity=ye,c.style.transform="translate(-50%,-50%)",c.style.zIndex="9999",c.classList.add("drag-preview"),o.dragAnimation&&o.dragAnimation!=="none"&&c.classList.add(o.dragAnimation),document.body.appendChild(c),d.value=c,m=i=>{d.value&&(d.value.style.left=`${i.clientX}px`,d.value.style.top=`${i.clientY}px`)},document.addEventListener("mousemove",m),a.style.opacity=String(ve),a.style.cursor=ke}catch(c){console.error("[VideoGridLayout] Drag start error:",c),x()}}function U(t,r){t.preventDefault(),t.stopPropagation();const l=w.value;if(l===-1||l===r){w.value=-1;return}if(r<0||r>=g.value.length){console.warn("[VideoGridLayout] Invalid drop index:",r),w.value=-1;return}try{const a=[...u.value],c=a[l],i=a[r];a[l]=i,a[r]=c,B=!0,u.value=a,setTimeout(()=>{B=!1,y("videosChange",u.value.filter(Boolean))},0)}catch(a){console.error("[VideoGridLayout] Drop error:",a)}finally{w.value=-1}}function Y(t,r){if(t.preventDefault(),w.value!==-1&&w.value!==r){S.value=r;try{const a=(t.currentTarget||t.target).getBoundingClientRect();d.value&&(d.value.style.width=`${a.width}px`,d.value.style.height=`${a.height}px`,d.value.style.transform="translate(-50%,-50%)")}catch{}}}function j(t,r){t.preventDefault();const l=t.target,a=t.relatedTarget;l.contains(a)||S.value===r&&(S.value=-1)}function q(t){const l=t.target.closest(".video-item");l&&(l.style.opacity="1",l.style.cursor="move"),x(),w.value=-1,S.value=-1}return e.onBeforeUnmount(()=>{x()}),(t,r)=>(e.openBlock(),e.createElementBlock("div",{class:"video-grid-layout",role:"application","aria-label":"视频分屏布局",style:e.normalizeStyle(O.value)},[n.showToolbar?(e.openBlock(),e.createElementBlock("div",ce,[r[1]||(r[1]=e.createElementVNode("div",{class:"toolbar-title"},"分屏布局",-1)),e.createElementVNode("div",ie,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(I.value,l=>{var a,c,i;return e.openBlock(),e.createElementBlock("button",{key:l,class:e.normalizeClass(["layout-btn",{active:h.value===l}]),onClick:p=>z(l),title:((a=e.unref(k)[l])==null?void 0:a.label)||"","aria-label":`切换到${((c=e.unref(k)[l])==null?void 0:c.label)||""}布局`,"aria-pressed":h.value===l,type:"button"},[e.createVNode(L,{type:l},null,8,["type"]),e.createElementVNode("span",se,e.toDisplayString(((i=e.unref(k)[l])==null?void 0:i.label)||""),1)],10,de)}),128))])])):e.createCommentVNode("",!0),e.createElementVNode("div",he,[e.createElementVNode("div",{class:"video-grid",style:e.normalizeStyle(G.value)},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(g.value,(l,a)=>{var c,i,p;return e.openBlock(),e.createElementBlock("div",{key:((c=C.value[a])==null?void 0:c.id)??a,class:e.normalizeClass(["video-item",{"main-video":P(a),dragging:w.value===a,"drag-over":S.value===a&&w.value!==a}]),style:e.normalizeStyle(R(a)),draggable:!0,"aria-label":`视频 ${a+1}: ${((i=C.value[a])==null?void 0:i.title)||((p=C.value[a])==null?void 0:p.id)||""}`,role:"article",tabindex:"0",onDragstart:s=>F(s,a),onDragover:r[0]||(r[0]=e.withModifiers(()=>{},["prevent"])),onDragenter:s=>Y(s,a),onDragleave:s=>j(s,a),onDrop:s=>U(s,a),onDragend:q},[e.renderSlot(t.$slots,"video",{video:C.value[a],index:a},()=>[e.createElementVNode("div",ue,[e.createElementVNode("div",pe,e.toDisplayString(M(a)),1)])],!0)],46,we)}),128))],4)])],4))}}),$=A(ge,[["__scopeId","data-v-df3be083"]]),Se={VideoGridLayout:$,VideoLayoutIcon:L},me={install(n){Object.entries(Se).forEach(([v,o])=>{n.component(v,o)})}};exports.LAYOUT_CONFIGS=k;exports.VideoGridLayout=$;exports.VideoLayoutIcon=L;exports.default=me;exports.getAllLayoutTypes=_;exports.getLayoutPositions=D;
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),y={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},24:{type:"24",label:"24分屏",count:24,cols:6,rows:4},32:{type:"32",label:"32分屏",count:32,cols:8,rows:4},36:{type:"36",label:"36分屏",count:36,cols:6,rows:6},48:{type:"48",label:"48分屏",count:48,cols:8,rows:6},64:{type:"64",label:"64分屏",count:64,cols:8,rows:8}},V={};function A(c){if(V[c])return V[c];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}],24:Array.from({length:24},(w,n)=>({col:n%6+1,colSpan:1,row:Math.floor(n/6)+1,rowSpan:1})),32:Array.from({length:32},(w,n)=>({col:n%8+1,colSpan:1,row:Math.floor(n/8)+1,rowSpan:1})),36:Array.from({length:36},(w,n)=>({col:n%6+1,colSpan:1,row:Math.floor(n/6)+1,rowSpan:1})),48:Array.from({length:48},(w,n)=>({col:n%8+1,colSpan:1,row:Math.floor(n/8)+1,rowSpan:1})),64:Array.from({length:64},(w,n)=>({col:n%8+1,colSpan:1,row:Math.floor(n/8)+1,rowSpan:1}))}[c]||[];return o.length>0&&(V[c]=o),o}function D(){return Object.keys(y)}const X={class:"layout-icon"},J={key:0,viewBox:"0 0 48 48",fill:"none"},K={key:1,viewBox:"0 0 48 48",fill:"none"},Q={key:2,viewBox:"0 0 48 48",fill:"none"},W={key:3,viewBox:"0 0 48 48",fill:"none"},Z={key:4,viewBox:"0 0 48 48",fill:"none"},ee={key:5,viewBox:"0 0 48 48",fill:"none"},te={key:6,viewBox:"0 0 48 48",fill:"none"},oe={key:7,viewBox:"0 0 48 48",fill:"none"},re={key:8,viewBox:"0 0 54 48",fill:"none"},ae={key:9,viewBox:"0 0 48 48",fill:"none"},le={key:10,viewBox:"0 0 48 48",fill:"none"},ne=e.defineComponent({__name:"VideoLayoutIcon",props:{type:{}},setup(c){return(k,o)=>(e.openBlock(),e.createElementBlock("div",X,[c.type==="1"?(e.openBlock(),e.createElementBlock("svg",J,[...o[0]||(o[0]=[e.createElementVNode("rect",{x:"4",y:"4",width:"40",height:"40",stroke:"currentColor","stroke-width":"2"},null,-1)])])):c.type==="2"?(e.openBlock(),e.createElementBlock("svg",K,[...o[1]||(o[1]=[e.createElementVNode("rect",{x:"4",y:"4",width:"19",height:"40",stroke:"currentColor","stroke-width":"1.5"},null,-1),e.createElementVNode("rect",{x:"25",y:"4",width:"19",height:"40",stroke:"currentColor","stroke-width":"1.5"},null,-1)])])):c.type==="3"?(e.openBlock(),e.createElementBlock("svg",Q,[...o[2]||(o[2]=[e.createElementVNode("rect",{x:"4",y:"4",width:"20",height:"40",stroke:"currentColor","stroke-width":"2"},null,-1),e.createElementVNode("rect",{x:"26",y:"4",width:"18",height:"19",stroke:"currentColor","stroke-width":"1.5"},null,-1),e.createElementVNode("rect",{x:"26",y:"25",width:"18",height:"19",stroke:"currentColor","stroke-width":"1.5"},null,-1)])])):c.type==="4"?(e.openBlock(),e.createElementBlock("svg",W,[...o[3]||(o[3]=[e.createElementVNode("rect",{x:"4",y:"4",width:"19",height:"19",stroke:"currentColor","stroke-width":"1.5"},null,-1),e.createElementVNode("rect",{x:"25",y:"4",width:"19",height:"19",stroke:"currentColor","stroke-width":"1.5"},null,-1),e.createElementVNode("rect",{x:"4",y:"25",width:"19",height:"19",stroke:"currentColor","stroke-width":"1.5"},null,-1),e.createElementVNode("rect",{x:"25",y:"25",width:"19",height:"19",stroke:"currentColor","stroke-width":"1.5"},null,-1)])])):c.type==="6"?(e.openBlock(),e.createElementBlock("svg",Z,[...o[4]||(o[4]=[e.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)])])):c.type==="7"?(e.openBlock(),e.createElementBlock("svg",ee,[...o[5]||(o[5]=[e.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)])])):c.type==="8"?(e.openBlock(),e.createElementBlock("svg",te,[...o[6]||(o[6]=[e.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)])])):c.type==="9"?(e.openBlock(),e.createElementBlock("svg",oe,[...o[7]||(o[7]=[e.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)])])):c.type==="10"?(e.openBlock(),e.createElementBlock("svg",re,[...o[8]||(o[8]=[e.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)])])):c.type==="13"?(e.openBlock(),e.createElementBlock("svg",ae,[...o[9]||(o[9]=[e.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)])])):c.type==="16"?(e.openBlock(),e.createElementBlock("svg",le,[...o[10]||(o[10]=[e.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)])])):e.createCommentVNode("",!0)]))}}),I=(c,k)=>{const o=c.__vccOpts||c;for(const[w,n]of k)o[w]=n;return o},L=I(ne,[["__scopeId","data-v-31e0404d"]]),ce={key:0,class:"layout-toolbar",role:"toolbar","aria-label":"布局切换工具栏"},ie={class:"layout-buttons"},de=["onClick","title","aria-label","aria-pressed"],se={class:"layout-label"},he={class:"video-grid-container",role:"region","aria-label":"视频网格"},we=["aria-label","onDragstart","onDragenter","onDragleave","onDrop"],ue={class:"video-placeholder"},pe={class:"placeholder-number"},ve=.5,ke="grabbing",ye="0.8",Se=e.defineComponent({__name:"VideoGridLayout",props:{videos:{},layout:{default:"1"},availableLayouts:{},showToolbar:{type:Boolean,default:!0},width:{},height:{},placeholderText:{},placeholders:{},dragAnimation:{default:"scale"}},emits:["layoutChange","videosChange"],setup(c,{emit:k}){const o=c,w=k,n=e.ref(o.layout);e.watch(()=>o.layout,t=>{n.value=t});const T=e.computed(()=>o.availableLayouts&&o.availableLayouts.length>0?o.availableLayouts:D()),p=e.shallowRef([]);function b(t){const r=Array.isArray(t)?t:o.videos||[],l=E.value,a={};p.value.forEach((d,v)=>{d&&d.id!==void 0&&(a[d.id]=d.__labelNumber??v+1)});const i=Array.from({length:l}).map((d,v)=>{const h=r[v];if(h){const H=a[h.id]??h.__labelNumber??v+1;return{...h,__labelNumber:H}}});p.value=i}e.watch(()=>o.videos,t=>{if(!Array.isArray(t)){console.warn("[VideoGridLayout] Invalid videos prop, expected array");return}b(t)},{flush:"post"}),e.watch(E,()=>{b(o.videos)});let B=!1;e.watch(p,t=>{!B&&Array.isArray(t)&&w("videosChange",t)});const N=e.computed(()=>{const t=y[n.value];return t||(console.warn(`[VideoGridLayout] Invalid layout type: ${n.value}, fallback to '4'`),y[4])}),S=e.computed(()=>A(n.value)),E=e.computed(()=>{var t;return((t=N.value)==null?void 0:t.count)||4}),f=e.computed(()=>p.value.slice(0,E.value).map(t=>t).filter(Boolean));b(o.videos);const _=e.computed(()=>{const t=S.value.map((r,l)=>({p:r,idx:l}));return t.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)),t.map(r=>r.idx)}),u=e.ref(-1),g=e.ref(-1),C=e.shallowRef(null),s=e.shallowRef(null);let m=null;const G=e.computed(()=>{const t=N.value;return{display:"grid",gridTemplateColumns:(t==null?void 0:t.colTemplate)||`repeat(${(t==null?void 0:t.cols)||2}, 1fr)`,gridTemplateRows:(t==null?void 0:t.rowTemplate)||`repeat(${(t==null?void 0:t.rows)||2}, 1fr)`,gap:"4px",width:o.width||"100%",height:o.height||"100%"}}),M=e.computed(()=>({width:o.width||"100%",height:o.height||"100%"}));function O(t){const r=t,l=_.value[r];if(Array.isArray(o.placeholders)&&o.placeholders[l]!==void 0)return String(o.placeholders[l]);if(typeof o.placeholderText=="function")try{return o.placeholderText(r)}catch{return String(r+1)}return o.placeholderText?String(o.placeholderText):String(r+1)}function R(t){const r=S.value[t];return!r||typeof r.col!="number"||typeof r.row!="number"?{}:{gridColumn:`${r.col} / span ${r.colSpan}`,gridRow:`${r.row} / span ${r.rowSpan}`}}function P(t){const r=S.value[t];return(r==null?void 0:r.isMain)||!1}function z(t){n.value=t,w("layoutChange",n.value)}function x(){if(C.value&&document.body.contains(C.value)){try{document.body.removeChild(C.value)}catch(t){console.warn("[VideoGridLayout] Failed to cleanup drag image:",t)}C.value=null}if(s.value&&document.body.contains(s.value)){try{document.body.removeChild(s.value)}catch{}s.value=null}m&&(document.removeEventListener("mousemove",m),m=null)}function F(t,r){if(r<0||r>=p.value.length){console.warn("[VideoGridLayout] Invalid drag index:",r);return}if(u.value=r,!t.dataTransfer)return;t.dataTransfer.effectAllowed="move";const a=t.target.closest(".video-item");if(a)try{if(x(),t.dataTransfer){const d=new Image;d.src="",t.dataTransfer.setDragImage(d,0,0)}const i=a.cloneNode(!0);i.style.position="fixed",i.style.top="0px",i.style.left="0px",i.style.margin="0",i.style.pointerEvents="none",i.style.opacity=ye,i.style.transform="translate(-50%,-50%)",i.style.zIndex="9999",i.classList.add("drag-preview"),o.dragAnimation&&o.dragAnimation!=="none"&&i.classList.add(o.dragAnimation),document.body.appendChild(i),s.value=i,m=d=>{s.value&&(s.value.style.left=`${d.clientX}px`,s.value.style.top=`${d.clientY}px`)},document.addEventListener("mousemove",m),a.style.opacity=String(ve),a.style.cursor=ke}catch(i){console.error("[VideoGridLayout] Drag start error:",i),x()}}function U(t,r){t.preventDefault(),t.stopPropagation();const l=u.value;if(l===-1||l===r){u.value=-1;return}if(r<0||r>=S.value.length){console.warn("[VideoGridLayout] Invalid drop index:",r),u.value=-1;return}try{const a=[...p.value],i=a[l],d=a[r];a[l]=d,a[r]=i,B=!0,p.value=a,setTimeout(()=>{B=!1,w("videosChange",p.value.filter(Boolean))},0)}catch(a){console.error("[VideoGridLayout] Drop error:",a)}finally{u.value=-1}}function Y(t,r){if(t.preventDefault(),u.value!==-1&&u.value!==r){g.value=r;try{const a=(t.currentTarget||t.target).getBoundingClientRect();s.value&&(s.value.style.width=`${a.width}px`,s.value.style.height=`${a.height}px`,s.value.style.transform="translate(-50%,-50%)")}catch{}}}function j(t,r){t.preventDefault();const l=t.target,a=t.relatedTarget;l.contains(a)||g.value===r&&(g.value=-1)}function q(t){const l=t.target.closest(".video-item");l&&(l.style.opacity="1",l.style.cursor="move"),x(),u.value=-1,g.value=-1}return e.onBeforeUnmount(()=>{x()}),(t,r)=>(e.openBlock(),e.createElementBlock("div",{class:"video-grid-layout",role:"application","aria-label":"视频分屏布局",style:e.normalizeStyle(M.value)},[c.showToolbar?(e.openBlock(),e.createElementBlock("div",ce,[r[1]||(r[1]=e.createElementVNode("div",{class:"toolbar-title"},"分屏布局",-1)),e.createElementVNode("div",ie,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(T.value,l=>{var a,i,d;return e.openBlock(),e.createElementBlock("button",{key:l,class:e.normalizeClass(["layout-btn",{active:n.value===l}]),onClick:v=>z(l),title:((a=e.unref(y)[l])==null?void 0:a.label)||"","aria-label":`切换到${((i=e.unref(y)[l])==null?void 0:i.label)||""}布局`,"aria-pressed":n.value===l,type:"button"},[e.createVNode(L,{type:l},null,8,["type"]),e.createElementVNode("span",se,e.toDisplayString(((d=e.unref(y)[l])==null?void 0:d.label)||""),1)],10,de)}),128))])])):e.createCommentVNode("",!0),e.createElementVNode("div",he,[e.createElementVNode("div",{class:"video-grid",style:e.normalizeStyle(G.value)},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(S.value,(l,a)=>{var i,d,v;return e.openBlock(),e.createElementBlock("div",{key:((i=f.value[a])==null?void 0:i.id)??a,class:e.normalizeClass(["video-item",{"main-video":P(a),dragging:u.value===a,"drag-over":g.value===a&&u.value!==a}]),style:e.normalizeStyle(R(a)),draggable:!0,"aria-label":`视频 ${a+1}: ${((d=f.value[a])==null?void 0:d.title)||((v=f.value[a])==null?void 0:v.id)||""}`,role:"article",tabindex:"0",onDragstart:h=>F(h,a),onDragover:r[0]||(r[0]=e.withModifiers(()=>{},["prevent"])),onDragenter:h=>Y(h,a),onDragleave:h=>j(h,a),onDrop:h=>U(h,a),onDragend:q},[e.renderSlot(t.$slots,"video",{video:f.value[a],index:a},()=>[e.createElementVNode("div",ue,[e.createElementVNode("div",pe,e.toDisplayString(O(_.value.indexOf(a))),1)])],!0)],46,we)}),128))],4)])],4))}}),$=I(Se,[["__scopeId","data-v-4813a92a"]]),ge={VideoGridLayout:$,VideoLayoutIcon:L},me={install(c){Object.entries(ge).forEach(([k,o])=>{c.component(k,o)})}};exports.LAYOUT_CONFIGS=y;exports.VideoGridLayout=$;exports.VideoLayoutIcon=L;exports.default=me;exports.getAllLayoutTypes=D;exports.getLayoutPositions=A;
|
package/dist/index.mjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { defineComponent as
|
|
1
|
+
import { defineComponent as Y, createElementBlock as s, openBlock as d, createCommentVNode as z, createElementVNode as h, createStaticVNode as f, ref as V, watch as D, computed as S, shallowRef as E, onBeforeUnmount as nt, normalizeStyle as G, Fragment as R, renderList as P, unref as M, normalizeClass as F, createVNode as ct, toDisplayString as U, withModifiers as it, renderSlot as st } from "vue";
|
|
2
2
|
const C = {
|
|
3
3
|
1: {
|
|
4
4
|
type: "1",
|
|
@@ -76,12 +76,47 @@ const C = {
|
|
|
76
76
|
count: 16,
|
|
77
77
|
cols: 4,
|
|
78
78
|
rows: 4
|
|
79
|
+
},
|
|
80
|
+
24: {
|
|
81
|
+
type: "24",
|
|
82
|
+
label: "24分屏",
|
|
83
|
+
count: 24,
|
|
84
|
+
cols: 6,
|
|
85
|
+
rows: 4
|
|
86
|
+
},
|
|
87
|
+
32: {
|
|
88
|
+
type: "32",
|
|
89
|
+
label: "32分屏",
|
|
90
|
+
count: 32,
|
|
91
|
+
cols: 8,
|
|
92
|
+
rows: 4
|
|
93
|
+
},
|
|
94
|
+
36: {
|
|
95
|
+
type: "36",
|
|
96
|
+
label: "36分屏",
|
|
97
|
+
count: 36,
|
|
98
|
+
cols: 6,
|
|
99
|
+
rows: 6
|
|
100
|
+
},
|
|
101
|
+
48: {
|
|
102
|
+
type: "48",
|
|
103
|
+
label: "48分屏",
|
|
104
|
+
count: 48,
|
|
105
|
+
cols: 8,
|
|
106
|
+
rows: 6
|
|
107
|
+
},
|
|
108
|
+
64: {
|
|
109
|
+
type: "64",
|
|
110
|
+
label: "64分屏",
|
|
111
|
+
count: 64,
|
|
112
|
+
cols: 8,
|
|
113
|
+
rows: 8
|
|
79
114
|
}
|
|
80
|
-
},
|
|
81
|
-
function
|
|
82
|
-
if (
|
|
83
|
-
return
|
|
84
|
-
const
|
|
115
|
+
}, T = {};
|
|
116
|
+
function dt(n) {
|
|
117
|
+
if (T[n])
|
|
118
|
+
return T[n];
|
|
119
|
+
const o = {
|
|
85
120
|
1: [
|
|
86
121
|
{ col: 1, colSpan: 1, row: 1, rowSpan: 1 }
|
|
87
122
|
],
|
|
@@ -182,9 +217,40 @@ function st(l) {
|
|
|
182
217
|
{ col: 2, colSpan: 1, row: 4, rowSpan: 1 },
|
|
183
218
|
{ col: 3, colSpan: 1, row: 4, rowSpan: 1 },
|
|
184
219
|
{ col: 4, colSpan: 1, row: 4, rowSpan: 1 }
|
|
185
|
-
]
|
|
186
|
-
|
|
187
|
-
|
|
220
|
+
],
|
|
221
|
+
// 新增大尺寸布局配置
|
|
222
|
+
24: Array.from({ length: 24 }, (p, l) => ({
|
|
223
|
+
col: l % 6 + 1,
|
|
224
|
+
colSpan: 1,
|
|
225
|
+
row: Math.floor(l / 6) + 1,
|
|
226
|
+
rowSpan: 1
|
|
227
|
+
})),
|
|
228
|
+
32: Array.from({ length: 32 }, (p, l) => ({
|
|
229
|
+
col: l % 8 + 1,
|
|
230
|
+
colSpan: 1,
|
|
231
|
+
row: Math.floor(l / 8) + 1,
|
|
232
|
+
rowSpan: 1
|
|
233
|
+
})),
|
|
234
|
+
36: Array.from({ length: 36 }, (p, l) => ({
|
|
235
|
+
col: l % 6 + 1,
|
|
236
|
+
colSpan: 1,
|
|
237
|
+
row: Math.floor(l / 6) + 1,
|
|
238
|
+
rowSpan: 1
|
|
239
|
+
})),
|
|
240
|
+
48: Array.from({ length: 48 }, (p, l) => ({
|
|
241
|
+
col: l % 8 + 1,
|
|
242
|
+
colSpan: 1,
|
|
243
|
+
row: Math.floor(l / 8) + 1,
|
|
244
|
+
rowSpan: 1
|
|
245
|
+
})),
|
|
246
|
+
64: Array.from({ length: 64 }, (p, l) => ({
|
|
247
|
+
col: l % 8 + 1,
|
|
248
|
+
colSpan: 1,
|
|
249
|
+
row: Math.floor(l / 8) + 1,
|
|
250
|
+
rowSpan: 1
|
|
251
|
+
}))
|
|
252
|
+
}[n] || [];
|
|
253
|
+
return o.length > 0 && (T[n] = o), o;
|
|
188
254
|
}
|
|
189
255
|
function ht() {
|
|
190
256
|
return Object.keys(C);
|
|
@@ -209,19 +275,19 @@ const wt = { class: "layout-icon" }, ut = {
|
|
|
209
275
|
key: 4,
|
|
210
276
|
viewBox: "0 0 48 48",
|
|
211
277
|
fill: "none"
|
|
212
|
-
},
|
|
278
|
+
}, St = {
|
|
213
279
|
key: 5,
|
|
214
280
|
viewBox: "0 0 48 48",
|
|
215
281
|
fill: "none"
|
|
216
|
-
},
|
|
282
|
+
}, kt = {
|
|
217
283
|
key: 6,
|
|
218
284
|
viewBox: "0 0 48 48",
|
|
219
285
|
fill: "none"
|
|
220
|
-
},
|
|
286
|
+
}, ft = {
|
|
221
287
|
key: 7,
|
|
222
288
|
viewBox: "0 0 48 48",
|
|
223
289
|
fill: "none"
|
|
224
|
-
},
|
|
290
|
+
}, Ct = {
|
|
225
291
|
key: 8,
|
|
226
292
|
viewBox: "0 0 54 48",
|
|
227
293
|
fill: "none"
|
|
@@ -233,15 +299,15 @@ const wt = { class: "layout-icon" }, ut = {
|
|
|
233
299
|
key: 10,
|
|
234
300
|
viewBox: "0 0 48 48",
|
|
235
301
|
fill: "none"
|
|
236
|
-
}, bt = /* @__PURE__ */
|
|
302
|
+
}, bt = /* @__PURE__ */ Y({
|
|
237
303
|
__name: "VideoLayoutIcon",
|
|
238
304
|
props: {
|
|
239
305
|
type: {}
|
|
240
306
|
},
|
|
241
|
-
setup(
|
|
242
|
-
return (k,
|
|
243
|
-
|
|
244
|
-
|
|
307
|
+
setup(n) {
|
|
308
|
+
return (k, o) => (d(), s("div", wt, [
|
|
309
|
+
n.type === "1" ? (d(), s("svg", ut, [...o[0] || (o[0] = [
|
|
310
|
+
h("rect", {
|
|
245
311
|
x: "4",
|
|
246
312
|
y: "4",
|
|
247
313
|
width: "40",
|
|
@@ -249,8 +315,8 @@ const wt = { class: "layout-icon" }, ut = {
|
|
|
249
315
|
stroke: "currentColor",
|
|
250
316
|
"stroke-width": "2"
|
|
251
317
|
}, null, -1)
|
|
252
|
-
])])) :
|
|
253
|
-
|
|
318
|
+
])])) : n.type === "2" ? (d(), s("svg", pt, [...o[1] || (o[1] = [
|
|
319
|
+
h("rect", {
|
|
254
320
|
x: "4",
|
|
255
321
|
y: "4",
|
|
256
322
|
width: "19",
|
|
@@ -258,7 +324,7 @@ const wt = { class: "layout-icon" }, ut = {
|
|
|
258
324
|
stroke: "currentColor",
|
|
259
325
|
"stroke-width": "1.5"
|
|
260
326
|
}, null, -1),
|
|
261
|
-
|
|
327
|
+
h("rect", {
|
|
262
328
|
x: "25",
|
|
263
329
|
y: "4",
|
|
264
330
|
width: "19",
|
|
@@ -266,8 +332,8 @@ const wt = { class: "layout-icon" }, ut = {
|
|
|
266
332
|
stroke: "currentColor",
|
|
267
333
|
"stroke-width": "1.5"
|
|
268
334
|
}, null, -1)
|
|
269
|
-
])])) :
|
|
270
|
-
|
|
335
|
+
])])) : n.type === "3" ? (d(), s("svg", vt, [...o[2] || (o[2] = [
|
|
336
|
+
h("rect", {
|
|
271
337
|
x: "4",
|
|
272
338
|
y: "4",
|
|
273
339
|
width: "20",
|
|
@@ -275,7 +341,7 @@ const wt = { class: "layout-icon" }, ut = {
|
|
|
275
341
|
stroke: "currentColor",
|
|
276
342
|
"stroke-width": "2"
|
|
277
343
|
}, null, -1),
|
|
278
|
-
|
|
344
|
+
h("rect", {
|
|
279
345
|
x: "26",
|
|
280
346
|
y: "4",
|
|
281
347
|
width: "18",
|
|
@@ -283,7 +349,7 @@ const wt = { class: "layout-icon" }, ut = {
|
|
|
283
349
|
stroke: "currentColor",
|
|
284
350
|
"stroke-width": "1.5"
|
|
285
351
|
}, null, -1),
|
|
286
|
-
|
|
352
|
+
h("rect", {
|
|
287
353
|
x: "26",
|
|
288
354
|
y: "25",
|
|
289
355
|
width: "18",
|
|
@@ -291,8 +357,8 @@ const wt = { class: "layout-icon" }, ut = {
|
|
|
291
357
|
stroke: "currentColor",
|
|
292
358
|
"stroke-width": "1.5"
|
|
293
359
|
}, null, -1)
|
|
294
|
-
])])) :
|
|
295
|
-
|
|
360
|
+
])])) : n.type === "4" ? (d(), s("svg", yt, [...o[3] || (o[3] = [
|
|
361
|
+
h("rect", {
|
|
296
362
|
x: "4",
|
|
297
363
|
y: "4",
|
|
298
364
|
width: "19",
|
|
@@ -300,7 +366,7 @@ const wt = { class: "layout-icon" }, ut = {
|
|
|
300
366
|
stroke: "currentColor",
|
|
301
367
|
"stroke-width": "1.5"
|
|
302
368
|
}, null, -1),
|
|
303
|
-
|
|
369
|
+
h("rect", {
|
|
304
370
|
x: "25",
|
|
305
371
|
y: "4",
|
|
306
372
|
width: "19",
|
|
@@ -308,7 +374,7 @@ const wt = { class: "layout-icon" }, ut = {
|
|
|
308
374
|
stroke: "currentColor",
|
|
309
375
|
"stroke-width": "1.5"
|
|
310
376
|
}, null, -1),
|
|
311
|
-
|
|
377
|
+
h("rect", {
|
|
312
378
|
x: "4",
|
|
313
379
|
y: "25",
|
|
314
380
|
width: "19",
|
|
@@ -316,7 +382,7 @@ const wt = { class: "layout-icon" }, ut = {
|
|
|
316
382
|
stroke: "currentColor",
|
|
317
383
|
"stroke-width": "1.5"
|
|
318
384
|
}, null, -1),
|
|
319
|
-
|
|
385
|
+
h("rect", {
|
|
320
386
|
x: "25",
|
|
321
387
|
y: "25",
|
|
322
388
|
width: "19",
|
|
@@ -324,38 +390,38 @@ const wt = { class: "layout-icon" }, ut = {
|
|
|
324
390
|
stroke: "currentColor",
|
|
325
391
|
"stroke-width": "1.5"
|
|
326
392
|
}, null, -1)
|
|
327
|
-
])])) :
|
|
328
|
-
|
|
329
|
-
])])) :
|
|
330
|
-
|
|
331
|
-
])])) :
|
|
332
|
-
|
|
333
|
-
])])) :
|
|
334
|
-
|
|
335
|
-
])])) :
|
|
336
|
-
|
|
337
|
-
])])) :
|
|
338
|
-
|
|
339
|
-
])])) :
|
|
340
|
-
|
|
341
|
-
])])) :
|
|
393
|
+
])])) : n.type === "6" ? (d(), s("svg", gt, [...o[4] || (o[4] = [
|
|
394
|
+
f('<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)
|
|
395
|
+
])])) : n.type === "7" ? (d(), s("svg", St, [...o[5] || (o[5] = [
|
|
396
|
+
f('<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)
|
|
397
|
+
])])) : n.type === "8" ? (d(), s("svg", kt, [...o[6] || (o[6] = [
|
|
398
|
+
f('<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)
|
|
399
|
+
])])) : n.type === "9" ? (d(), s("svg", ft, [...o[7] || (o[7] = [
|
|
400
|
+
f('<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)
|
|
401
|
+
])])) : n.type === "10" ? (d(), s("svg", Ct, [...o[8] || (o[8] = [
|
|
402
|
+
f('<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)
|
|
403
|
+
])])) : n.type === "13" ? (d(), s("svg", xt, [...o[9] || (o[9] = [
|
|
404
|
+
f('<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)
|
|
405
|
+
])])) : n.type === "16" ? (d(), s("svg", mt, [...o[10] || (o[10] = [
|
|
406
|
+
f('<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)
|
|
407
|
+
])])) : z("", !0)
|
|
342
408
|
]));
|
|
343
409
|
}
|
|
344
|
-
}),
|
|
345
|
-
const
|
|
346
|
-
for (const [
|
|
347
|
-
|
|
348
|
-
return
|
|
349
|
-
},
|
|
410
|
+
}), j = (n, k) => {
|
|
411
|
+
const o = n.__vccOpts || n;
|
|
412
|
+
for (const [p, l] of k)
|
|
413
|
+
o[p] = l;
|
|
414
|
+
return o;
|
|
415
|
+
}, H = /* @__PURE__ */ j(bt, [["__scopeId", "data-v-31e0404d"]]), Lt = {
|
|
350
416
|
key: 0,
|
|
351
417
|
class: "layout-toolbar",
|
|
352
418
|
role: "toolbar",
|
|
353
419
|
"aria-label": "布局切换工具栏"
|
|
354
|
-
},
|
|
420
|
+
}, At = { class: "layout-buttons" }, _t = ["onClick", "title", "aria-label", "aria-pressed"], Dt = { class: "layout-label" }, $t = {
|
|
355
421
|
class: "video-grid-container",
|
|
356
422
|
role: "region",
|
|
357
423
|
"aria-label": "视频网格"
|
|
358
|
-
}, It = ["aria-label", "onDragstart", "onDragenter", "onDragleave", "onDrop"], Bt = { class: "video-placeholder" }, Vt = { class: "placeholder-number" }, Et = 0.5, Gt = "grabbing",
|
|
424
|
+
}, It = ["aria-label", "onDragstart", "onDragenter", "onDragleave", "onDrop"], Bt = { class: "video-placeholder" }, Vt = { class: "placeholder-number" }, Et = 0.5, Gt = "grabbing", Mt = "0.8", Tt = /* @__PURE__ */ Y({
|
|
359
425
|
__name: "VideoGridLayout",
|
|
360
426
|
props: {
|
|
361
427
|
videos: {},
|
|
@@ -369,236 +435,234 @@ const wt = { class: "layout-icon" }, ut = {
|
|
|
369
435
|
dragAnimation: { default: "scale" }
|
|
370
436
|
},
|
|
371
437
|
emits: ["layoutChange", "videosChange"],
|
|
372
|
-
setup(
|
|
373
|
-
const
|
|
374
|
-
|
|
375
|
-
|
|
438
|
+
setup(n, { emit: k }) {
|
|
439
|
+
const o = n, p = k, l = V(o.layout);
|
|
440
|
+
D(() => o.layout, (t) => {
|
|
441
|
+
l.value = t;
|
|
376
442
|
});
|
|
377
|
-
const
|
|
378
|
-
function
|
|
379
|
-
const
|
|
380
|
-
|
|
381
|
-
|
|
443
|
+
const X = S(() => o.availableLayouts && o.availableLayouts.length > 0 ? o.availableLayouts : ht()), y = E([]);
|
|
444
|
+
function $(t) {
|
|
445
|
+
const e = Array.isArray(t) ? t : o.videos || [], a = B.value, r = {};
|
|
446
|
+
y.value.forEach((i, g) => {
|
|
447
|
+
i && i.id !== void 0 && (r[i.id] = i.__labelNumber ?? g + 1);
|
|
382
448
|
});
|
|
383
|
-
const
|
|
384
|
-
const
|
|
385
|
-
if (
|
|
386
|
-
const lt = r[
|
|
387
|
-
return { ...
|
|
449
|
+
const c = Array.from({ length: a }).map((i, g) => {
|
|
450
|
+
const u = e[g];
|
|
451
|
+
if (u) {
|
|
452
|
+
const lt = r[u.id] ?? u.__labelNumber ?? g + 1;
|
|
453
|
+
return { ...u, __labelNumber: lt };
|
|
388
454
|
}
|
|
389
455
|
});
|
|
390
|
-
|
|
456
|
+
y.value = c;
|
|
391
457
|
}
|
|
392
|
-
|
|
458
|
+
D(() => o.videos, (t) => {
|
|
393
459
|
if (!Array.isArray(t)) {
|
|
394
460
|
console.warn("[VideoGridLayout] Invalid videos prop, expected array");
|
|
395
461
|
return;
|
|
396
462
|
}
|
|
397
|
-
|
|
398
|
-
}, { flush: "post" }),
|
|
399
|
-
|
|
463
|
+
$(t);
|
|
464
|
+
}, { flush: "post" }), D(B, () => {
|
|
465
|
+
$(o.videos);
|
|
400
466
|
});
|
|
401
467
|
let I = !1;
|
|
402
|
-
|
|
403
|
-
!I && Array.isArray(t) &&
|
|
468
|
+
D(y, (t) => {
|
|
469
|
+
!I && Array.isArray(t) && p("videosChange", t);
|
|
404
470
|
});
|
|
405
|
-
const
|
|
406
|
-
const t = C[
|
|
407
|
-
return t || (console.warn(`[VideoGridLayout] Invalid layout type: ${
|
|
408
|
-
}), x =
|
|
471
|
+
const O = S(() => {
|
|
472
|
+
const t = C[l.value];
|
|
473
|
+
return t || (console.warn(`[VideoGridLayout] Invalid layout type: ${l.value}, fallback to '4'`), C[4]);
|
|
474
|
+
}), x = S(() => dt(l.value)), B = S(() => {
|
|
409
475
|
var t;
|
|
410
|
-
return ((t =
|
|
411
|
-
}), L =
|
|
412
|
-
|
|
413
|
-
const
|
|
414
|
-
const t = x.value.map((
|
|
415
|
-
return t.sort((
|
|
416
|
-
}),
|
|
476
|
+
return ((t = O.value) == null ? void 0 : t.count) || 4;
|
|
477
|
+
}), L = S(() => y.value.slice(0, B.value).map((t) => t).filter(Boolean));
|
|
478
|
+
$(o.videos);
|
|
479
|
+
const N = S(() => {
|
|
480
|
+
const t = x.value.map((e, a) => ({ p: e, idx: a }));
|
|
481
|
+
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);
|
|
482
|
+
}), v = V(-1), m = V(-1), A = E(null), w = E(null);
|
|
417
483
|
let b = null;
|
|
418
|
-
const q =
|
|
419
|
-
const t =
|
|
484
|
+
const q = S(() => {
|
|
485
|
+
const t = O.value;
|
|
420
486
|
return {
|
|
421
487
|
display: "grid",
|
|
422
488
|
gridTemplateColumns: (t == null ? void 0 : t.colTemplate) || `repeat(${(t == null ? void 0 : t.cols) || 2}, 1fr)`,
|
|
423
489
|
gridTemplateRows: (t == null ? void 0 : t.rowTemplate) || `repeat(${(t == null ? void 0 : t.rows) || 2}, 1fr)`,
|
|
424
490
|
gap: "4px",
|
|
425
|
-
width:
|
|
426
|
-
height:
|
|
491
|
+
width: o.width || "100%",
|
|
492
|
+
height: o.height || "100%"
|
|
427
493
|
};
|
|
428
|
-
}), J =
|
|
429
|
-
width:
|
|
430
|
-
height:
|
|
494
|
+
}), J = S(() => ({
|
|
495
|
+
width: o.width || "100%",
|
|
496
|
+
height: o.height || "100%"
|
|
431
497
|
}));
|
|
432
498
|
function K(t) {
|
|
433
|
-
const
|
|
434
|
-
if (o
|
|
435
|
-
return String(
|
|
436
|
-
if (
|
|
437
|
-
return String(e.placeholders[o]);
|
|
438
|
-
if (typeof e.placeholderText == "function")
|
|
499
|
+
const e = t, a = N.value[e];
|
|
500
|
+
if (Array.isArray(o.placeholders) && o.placeholders[a] !== void 0)
|
|
501
|
+
return String(o.placeholders[a]);
|
|
502
|
+
if (typeof o.placeholderText == "function")
|
|
439
503
|
try {
|
|
440
|
-
return
|
|
504
|
+
return o.placeholderText(e);
|
|
441
505
|
} catch {
|
|
442
|
-
return String(
|
|
506
|
+
return String(e + 1);
|
|
443
507
|
}
|
|
444
|
-
return
|
|
508
|
+
return o.placeholderText ? String(o.placeholderText) : String(e + 1);
|
|
445
509
|
}
|
|
446
510
|
function Q(t) {
|
|
447
|
-
const
|
|
448
|
-
return !
|
|
449
|
-
gridColumn: `${
|
|
450
|
-
gridRow: `${
|
|
511
|
+
const e = x.value[t];
|
|
512
|
+
return !e || typeof e.col != "number" || typeof e.row != "number" ? {} : {
|
|
513
|
+
gridColumn: `${e.col} / span ${e.colSpan}`,
|
|
514
|
+
gridRow: `${e.row} / span ${e.rowSpan}`
|
|
451
515
|
};
|
|
452
516
|
}
|
|
453
517
|
function W(t) {
|
|
454
|
-
const
|
|
455
|
-
return (
|
|
518
|
+
const e = x.value[t];
|
|
519
|
+
return (e == null ? void 0 : e.isMain) || !1;
|
|
456
520
|
}
|
|
457
521
|
function Z(t) {
|
|
458
|
-
|
|
522
|
+
l.value = t, p("layoutChange", l.value);
|
|
459
523
|
}
|
|
460
|
-
function
|
|
461
|
-
if (
|
|
524
|
+
function _() {
|
|
525
|
+
if (A.value && document.body.contains(A.value)) {
|
|
462
526
|
try {
|
|
463
|
-
document.body.removeChild(
|
|
527
|
+
document.body.removeChild(A.value);
|
|
464
528
|
} catch (t) {
|
|
465
529
|
console.warn("[VideoGridLayout] Failed to cleanup drag image:", t);
|
|
466
530
|
}
|
|
467
|
-
|
|
531
|
+
A.value = null;
|
|
468
532
|
}
|
|
469
|
-
if (
|
|
533
|
+
if (w.value && document.body.contains(w.value)) {
|
|
470
534
|
try {
|
|
471
|
-
document.body.removeChild(
|
|
535
|
+
document.body.removeChild(w.value);
|
|
472
536
|
} catch {
|
|
473
537
|
}
|
|
474
|
-
|
|
538
|
+
w.value = null;
|
|
475
539
|
}
|
|
476
540
|
b && (document.removeEventListener("mousemove", b), b = null);
|
|
477
541
|
}
|
|
478
|
-
function tt(t,
|
|
479
|
-
if (
|
|
480
|
-
console.warn("[VideoGridLayout] Invalid drag index:",
|
|
542
|
+
function tt(t, e) {
|
|
543
|
+
if (e < 0 || e >= y.value.length) {
|
|
544
|
+
console.warn("[VideoGridLayout] Invalid drag index:", e);
|
|
481
545
|
return;
|
|
482
546
|
}
|
|
483
|
-
if (
|
|
547
|
+
if (v.value = e, !t.dataTransfer) return;
|
|
484
548
|
t.dataTransfer.effectAllowed = "move";
|
|
485
549
|
const r = t.target.closest(".video-item");
|
|
486
550
|
if (r)
|
|
487
551
|
try {
|
|
488
|
-
if (
|
|
489
|
-
const
|
|
490
|
-
|
|
552
|
+
if (_(), t.dataTransfer) {
|
|
553
|
+
const i = new Image();
|
|
554
|
+
i.src = "", t.dataTransfer.setDragImage(i, 0, 0);
|
|
491
555
|
}
|
|
492
|
-
const
|
|
493
|
-
|
|
494
|
-
|
|
556
|
+
const c = r.cloneNode(!0);
|
|
557
|
+
c.style.position = "fixed", c.style.top = "0px", c.style.left = "0px", c.style.margin = "0", c.style.pointerEvents = "none", c.style.opacity = Mt, c.style.transform = "translate(-50%,-50%)", c.style.zIndex = "9999", c.classList.add("drag-preview"), o.dragAnimation && o.dragAnimation !== "none" && c.classList.add(o.dragAnimation), document.body.appendChild(c), w.value = c, b = (i) => {
|
|
558
|
+
w.value && (w.value.style.left = `${i.clientX}px`, w.value.style.top = `${i.clientY}px`);
|
|
495
559
|
}, document.addEventListener("mousemove", b), r.style.opacity = String(Et), r.style.cursor = Gt;
|
|
496
|
-
} catch (
|
|
497
|
-
console.error("[VideoGridLayout] Drag start error:",
|
|
560
|
+
} catch (c) {
|
|
561
|
+
console.error("[VideoGridLayout] Drag start error:", c), _();
|
|
498
562
|
}
|
|
499
563
|
}
|
|
500
|
-
function
|
|
564
|
+
function ot(t, e) {
|
|
501
565
|
t.preventDefault(), t.stopPropagation();
|
|
502
|
-
const a =
|
|
503
|
-
if (a === -1 || a ===
|
|
504
|
-
|
|
566
|
+
const a = v.value;
|
|
567
|
+
if (a === -1 || a === e) {
|
|
568
|
+
v.value = -1;
|
|
505
569
|
return;
|
|
506
570
|
}
|
|
507
|
-
if (
|
|
508
|
-
console.warn("[VideoGridLayout] Invalid drop index:",
|
|
571
|
+
if (e < 0 || e >= x.value.length) {
|
|
572
|
+
console.warn("[VideoGridLayout] Invalid drop index:", e), v.value = -1;
|
|
509
573
|
return;
|
|
510
574
|
}
|
|
511
575
|
try {
|
|
512
|
-
const r = [...
|
|
513
|
-
r[a] =
|
|
514
|
-
I = !1,
|
|
576
|
+
const r = [...y.value], c = r[a], i = r[e];
|
|
577
|
+
r[a] = i, r[e] = c, I = !0, y.value = r, setTimeout(() => {
|
|
578
|
+
I = !1, p("videosChange", y.value.filter(Boolean));
|
|
515
579
|
}, 0);
|
|
516
580
|
} catch (r) {
|
|
517
581
|
console.error("[VideoGridLayout] Drop error:", r);
|
|
518
582
|
} finally {
|
|
519
|
-
|
|
583
|
+
v.value = -1;
|
|
520
584
|
}
|
|
521
585
|
}
|
|
522
|
-
function
|
|
523
|
-
if (t.preventDefault(),
|
|
524
|
-
m.value =
|
|
586
|
+
function et(t, e) {
|
|
587
|
+
if (t.preventDefault(), v.value !== -1 && v.value !== e) {
|
|
588
|
+
m.value = e;
|
|
525
589
|
try {
|
|
526
590
|
const r = (t.currentTarget || t.target).getBoundingClientRect();
|
|
527
|
-
|
|
591
|
+
w.value && (w.value.style.width = `${r.width}px`, w.value.style.height = `${r.height}px`, w.value.style.transform = "translate(-50%,-50%)");
|
|
528
592
|
} catch {
|
|
529
593
|
}
|
|
530
594
|
}
|
|
531
595
|
}
|
|
532
|
-
function rt(t,
|
|
596
|
+
function rt(t, e) {
|
|
533
597
|
t.preventDefault();
|
|
534
598
|
const a = t.target, r = t.relatedTarget;
|
|
535
|
-
a.contains(r) || m.value ===
|
|
599
|
+
a.contains(r) || m.value === e && (m.value = -1);
|
|
536
600
|
}
|
|
537
601
|
function at(t) {
|
|
538
602
|
const a = t.target.closest(".video-item");
|
|
539
|
-
a && (a.style.opacity = "1", a.style.cursor = "move"),
|
|
603
|
+
a && (a.style.opacity = "1", a.style.cursor = "move"), _(), v.value = -1, m.value = -1;
|
|
540
604
|
}
|
|
541
605
|
return nt(() => {
|
|
542
|
-
|
|
543
|
-
}), (t,
|
|
606
|
+
_();
|
|
607
|
+
}), (t, e) => (d(), s("div", {
|
|
544
608
|
class: "video-grid-layout",
|
|
545
609
|
role: "application",
|
|
546
610
|
"aria-label": "视频分屏布局",
|
|
547
611
|
style: G(J.value)
|
|
548
612
|
}, [
|
|
549
|
-
|
|
550
|
-
|
|
551
|
-
|
|
552
|
-
(d(!0),
|
|
553
|
-
var r,
|
|
554
|
-
return d(),
|
|
613
|
+
n.showToolbar ? (d(), s("div", Lt, [
|
|
614
|
+
e[1] || (e[1] = h("div", { class: "toolbar-title" }, "分屏布局", -1)),
|
|
615
|
+
h("div", At, [
|
|
616
|
+
(d(!0), s(R, null, P(X.value, (a) => {
|
|
617
|
+
var r, c, i;
|
|
618
|
+
return d(), s("button", {
|
|
555
619
|
key: a,
|
|
556
|
-
class:
|
|
557
|
-
onClick: (
|
|
558
|
-
title: ((r =
|
|
559
|
-
"aria-label": `切换到${((
|
|
560
|
-
"aria-pressed":
|
|
620
|
+
class: F(["layout-btn", { active: l.value === a }]),
|
|
621
|
+
onClick: (g) => Z(a),
|
|
622
|
+
title: ((r = M(C)[a]) == null ? void 0 : r.label) || "",
|
|
623
|
+
"aria-label": `切换到${((c = M(C)[a]) == null ? void 0 : c.label) || ""}布局`,
|
|
624
|
+
"aria-pressed": l.value === a,
|
|
561
625
|
type: "button"
|
|
562
626
|
}, [
|
|
563
|
-
ct(
|
|
564
|
-
|
|
565
|
-
], 10,
|
|
627
|
+
ct(H, { type: a }, null, 8, ["type"]),
|
|
628
|
+
h("span", Dt, U(((i = M(C)[a]) == null ? void 0 : i.label) || ""), 1)
|
|
629
|
+
], 10, _t);
|
|
566
630
|
}), 128))
|
|
567
631
|
])
|
|
568
|
-
])) :
|
|
569
|
-
|
|
570
|
-
|
|
632
|
+
])) : z("", !0),
|
|
633
|
+
h("div", $t, [
|
|
634
|
+
h("div", {
|
|
571
635
|
class: "video-grid",
|
|
572
636
|
style: G(q.value)
|
|
573
637
|
}, [
|
|
574
|
-
(d(!0),
|
|
575
|
-
var
|
|
576
|
-
return d(),
|
|
577
|
-
key: ((
|
|
578
|
-
class:
|
|
638
|
+
(d(!0), s(R, null, P(x.value, (a, r) => {
|
|
639
|
+
var c, i, g;
|
|
640
|
+
return d(), s("div", {
|
|
641
|
+
key: ((c = L.value[r]) == null ? void 0 : c.id) ?? r,
|
|
642
|
+
class: F(["video-item", {
|
|
579
643
|
"main-video": W(r),
|
|
580
|
-
dragging:
|
|
581
|
-
"drag-over": m.value === r &&
|
|
644
|
+
dragging: v.value === r,
|
|
645
|
+
"drag-over": m.value === r && v.value !== r
|
|
582
646
|
}]),
|
|
583
647
|
style: G(Q(r)),
|
|
584
648
|
draggable: !0,
|
|
585
|
-
"aria-label": `视频 ${r + 1}: ${((
|
|
649
|
+
"aria-label": `视频 ${r + 1}: ${((i = L.value[r]) == null ? void 0 : i.title) || ((g = L.value[r]) == null ? void 0 : g.id) || ""}`,
|
|
586
650
|
role: "article",
|
|
587
651
|
tabindex: "0",
|
|
588
|
-
onDragstart: (
|
|
589
|
-
onDragover:
|
|
652
|
+
onDragstart: (u) => tt(u, r),
|
|
653
|
+
onDragover: e[0] || (e[0] = it(() => {
|
|
590
654
|
}, ["prevent"])),
|
|
591
|
-
onDragenter: (
|
|
592
|
-
onDragleave: (
|
|
593
|
-
onDrop: (
|
|
655
|
+
onDragenter: (u) => et(u, r),
|
|
656
|
+
onDragleave: (u) => rt(u, r),
|
|
657
|
+
onDrop: (u) => ot(u, r),
|
|
594
658
|
onDragend: at
|
|
595
659
|
}, [
|
|
596
|
-
|
|
660
|
+
st(t.$slots, "video", {
|
|
597
661
|
video: L.value[r],
|
|
598
662
|
index: r
|
|
599
663
|
}, () => [
|
|
600
|
-
|
|
601
|
-
|
|
664
|
+
h("div", Bt, [
|
|
665
|
+
h("div", Vt, U(K(N.value.indexOf(r))), 1)
|
|
602
666
|
])
|
|
603
667
|
], !0)
|
|
604
668
|
], 46, It);
|
|
@@ -607,21 +671,21 @@ const wt = { class: "layout-icon" }, ut = {
|
|
|
607
671
|
])
|
|
608
672
|
], 4));
|
|
609
673
|
}
|
|
610
|
-
}),
|
|
611
|
-
VideoGridLayout:
|
|
612
|
-
VideoLayoutIcon:
|
|
674
|
+
}), Ot = /* @__PURE__ */ j(Tt, [["__scopeId", "data-v-4813a92a"]]), Nt = {
|
|
675
|
+
VideoGridLayout: Ot,
|
|
676
|
+
VideoLayoutIcon: H
|
|
613
677
|
}, Pt = {
|
|
614
|
-
install(
|
|
615
|
-
Object.entries(
|
|
616
|
-
|
|
678
|
+
install(n) {
|
|
679
|
+
Object.entries(Nt).forEach(([k, o]) => {
|
|
680
|
+
n.component(k, o);
|
|
617
681
|
});
|
|
618
682
|
}
|
|
619
683
|
};
|
|
620
684
|
export {
|
|
621
685
|
C as LAYOUT_CONFIGS,
|
|
622
|
-
|
|
623
|
-
|
|
686
|
+
Ot as VideoGridLayout,
|
|
687
|
+
H as VideoLayoutIcon,
|
|
624
688
|
Pt as default,
|
|
625
689
|
ht as getAllLayoutTypes,
|
|
626
|
-
|
|
690
|
+
dt as getLayoutPositions
|
|
627
691
|
};
|
package/dist/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.video-grid-layout{width:100%;height:100%;display:flex;flex-direction:column;background:#0015294d}.layout-toolbar{padding:12px 16px;background:#fff;border-bottom:1px solid #e0e0e0;display:flex;align-items:center;gap:16px;flex-wrap:wrap}.toolbar-title{font-size:14px;font-weight:600;color:#333}.layout-buttons{display:flex;gap:8px;flex-wrap:wrap}.layout-btn{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:hover{border-color:#42b883;color:#42b883;background:#f0fdf4}.layout-btn.active{border-color:#42b883;background:#42b883;color:#fff}.layout-label{font-size:12px}.video-grid-container{flex:1;padding:8px;display:flex;align-items:center;justify-content:center;min-height:0;overflow:hidden;box-sizing:border-box}.video-grid{width:100%;height:100%;max-width:100%;max-height:100%;background:#00409f33;padding:4px;border-radius:4px;box-sizing:border-box}.video-item{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{opacity:.5;cursor:grabbing;transform:scale(.98);box-shadow:0 4px 12px #0000004d}.video-item:hover{border-color:#42b883cc;background:#001529cc}.video-item.drag-over{border:1px solid rgba(66,184,131,1)!important;background:#42b88333!important}.video-item:focus{outline:1px solid rgba(66,184,131,1);outline-offset:1px}.video-item.main-video{border-width:1px}.video-item>*{width:100%;height:100%}.video-placeholder{display:flex;align-items:center;justify-content:center;height:100%;color:#3de6ff80;-webkit-user-select:none;user-select:none;background:#00409f4d}.placeholder-number{font-size:48px;font-weight:700;color:#3de6ff99;text-shadow:0 0 10px rgba(61,230,255,.3)}@media (max-width: 768px){.layout-toolbar{flex-direction:column;align-items:flex-start}.layout-label{display:none}}.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
|
+
.video-grid-layout{width:100%;height:100%;display:flex;flex-direction:column;background:#0015294d}.layout-toolbar{padding:12px 16px;background:#fff;border-bottom:1px solid #e0e0e0;display:flex;align-items:center;gap:16px;flex-wrap:wrap}.toolbar-title{font-size:14px;font-weight:600;color:#333}.layout-buttons{display:flex;gap:8px;flex-wrap:wrap}.layout-btn{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:hover{border-color:#42b883;color:#42b883;background:#f0fdf4}.layout-btn.active{border-color:#42b883;background:#42b883;color:#fff}.layout-label{font-size:12px}.video-grid-container{flex:1;padding:8px;display:flex;align-items:center;justify-content:center;min-height:0;overflow:hidden;box-sizing:border-box}.video-grid{width:100%;height:100%;max-width:100%;max-height:100%;background:#00409f33;padding:4px;border-radius:4px;box-sizing:border-box}.video-item{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{opacity:.5;cursor:grabbing;transform:scale(.98);box-shadow:0 4px 12px #0000004d}.video-item:hover{border-color:#42b883cc;background:#001529cc}.video-item.drag-over{border:1px solid rgba(66,184,131,1)!important;background:#42b88333!important}.video-item:focus{outline:1px solid rgba(66,184,131,1);outline-offset:1px}.video-item.main-video{border-width:1px}.video-item>*{width:100%;height:100%}.video-placeholder{display:flex;align-items:center;justify-content:center;height:100%;color:#3de6ff80;-webkit-user-select:none;user-select:none;background:#00409f4d}.placeholder-number{font-size:48px;font-weight:700;color:#3de6ff99;text-shadow:0 0 10px rgba(61,230,255,.3)}@media (max-width: 768px){.layout-toolbar{flex-direction:column;align-items:flex-start}.layout-label{display:none}}.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-4813a92a]{width:100%;height:100%;display:flex;flex-direction:column;background:#0015294d}.layout-toolbar[data-v-4813a92a]{padding:12px 16px;background:#fff;border-bottom:1px solid #e0e0e0;display:flex;align-items:center;gap:16px;flex-wrap:wrap}.toolbar-title[data-v-4813a92a]{font-size:14px;font-weight:600;color:#333}.layout-buttons[data-v-4813a92a]{display:flex;gap:8px;flex-wrap:wrap}.layout-btn[data-v-4813a92a]{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-4813a92a]:hover{border-color:#42b883;color:#42b883;background:#f0fdf4}.layout-btn.active[data-v-4813a92a]{border-color:#42b883;background:#42b883;color:#fff}.layout-label[data-v-4813a92a]{font-size:12px}.video-grid-container[data-v-4813a92a]{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-4813a92a]{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-4813a92a]{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-4813a92a]{opacity:.5;cursor:grabbing;transform:scale(.98);box-shadow:0 4px 12px #0000004d}.drag-preview.scale[data-v-4813a92a]{transition:transform .16s ease}.drag-preview.fade[data-v-4813a92a]{transition:opacity .16s ease;opacity:.9}.drag-preview.slide[data-v-4813a92a]{transition:transform .2s cubic-bezier(.2,.8,.2,1)}.video-item[data-v-4813a92a]:hover{border-color:#42b883cc;background:#001529cc}.video-item.drag-over[data-v-4813a92a]{border:1px solid rgba(66,184,131,1)!important;background:#42b88333!important}.video-item[data-v-4813a92a]:focus{outline:1px solid rgba(66,184,131,1);outline-offset:1px}.video-item.main-video[data-v-4813a92a]{border-width:1px}.video-item[data-v-4813a92a]>*{width:100%;height:100%}.video-placeholder[data-v-4813a92a]{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-4813a92a]{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-4813a92a]{flex-direction:column;align-items:flex-start}.layout-label[data-v-4813a92a]{display:none}}
|
package/dist/types.d.ts
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* 布局类型定义
|
|
3
|
-
* 支持的分屏数量：1/2/3/4/6/7/8/9/10/13/16
|
|
3
|
+
* 支持的分屏数量：1/2/3/4/6/7/8/9/10/13/16/24/32/36/48/64
|
|
4
4
|
*/
|
|
5
|
-
export type LayoutType = '1' | '2' | '3' | '4' | '6' | '7' | '8' | '9' | '10' | '13' | '16';
|
|
5
|
+
export type LayoutType = '1' | '2' | '3' | '4' | '6' | '7' | '8' | '9' | '10' | '13' | '16' | '24' | '32' | '36' | '48' | '64';
|
|
6
6
|
/**
|
|
7
7
|
* 视频项基础接口
|
|
8
8
|
*/
|