https://bith.tv/_next/static/chunks/pages/studio/create-video/[vid…/ImageLayerController-839d058dcd6549f7.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[46807],{8074:function(e,l,t){(window.__NEXT_P=window.__NEXT_P||[]).push(["/studio/create-video/[videoId]/editor/EditingArea/LayerCard/ImageLayer/ImageLayerController",function(){return t(109)}])},72132:function(e,l,t){"use strict";var i=t(85893),n=t(45608),o=t(24556),d=t(38715),a=t(67294),s=t(42663);let u={display:"flex",alignItems:"center",justifyContent:"center",background:"#f0f0f0"};l.Z=a.memo(e=>{var l,t,r;let v=e.reference||a.useRef(),c=document.getElementById("editing"),g=(l,t)=>{if(e.handleDrag&&e.handleDrag(t),c){var i,n,o,d,a,s,u,r,v,g;let l=c.getBoundingClientRect(),m=(null==l?void 0:l.width)/2,h=(null==l?void 0:l.width)/2-5,y=(null==l?void 0:l.width)/2+5;if(((null==t?void 0:t.x)>h&&(null==t?void 0:t.x)<y||(null==t?void 0:t.x)+(null==t?void 0:null===(i=t.node)||void 0===i?void 0:i.clientWidth)/2>h&&(null==t?void 0:t.x)+(null==t?void 0:null===(n=t.node)||void 0===n?void 0:n.clientWidth)/2<y||(null==t?void 0:t.x)+(null==t?void 0:null===(o=t.node)||void 0===o?void 0:o.clientWidth)>h&&(null==t?void 0:t.x)+(null==t?void 0:null===(d=t.node)||void 0===d?void 0:d.clientWidth)<y)&&e.isActive){let e=c.getElementsByClassName("center-vertical-alignment-line"),l=(null==e?void 0:e.length)?e[0]:document.createElement("div");l.className="center-vertical-alignment-line",l.setAttribute("data-type","alignment"),l.style.left="".concat(m,"px"),(null==e?void 0:e.lenght)||c.appendChild(l)}else{let e=c.getElementsByClassName("center-vertical-alignment-line");(null==e?void 0:e.length)&&e[0].remove()}if((null==t?void 0:t.x)+(null==t?void 0:null===(a=t.node)||void 0===a?void 0:a.clientWidth)>=(null==l?void 0:l.width)-5){let e=c.getElementsByClassName("right-vertical-alignment-line"),l=(null==e?void 0:e.length)?e[0]:document.createElement("div");l.className="right-vertical-alignment-line",l.setAttribute("data-type","alignment"),l.style.right="0px",(null==e?void 0:e.lenght)||c.appendChild(l)}else{let e=c.getElementsByClassName("right-vertical-alignment-line");(null==e?void 0:e.length)&&e[0].remove()}if((null==t?void 0:t.x)===0||0===Math.round(null==t?void 0:t.x)&&e.isActive){let e=c.getElementsByClassName("left-vertical-alignment-line"),l=(null==e?void 0:e.length)?e[0]:document.createElement("div");l.className="left-vertical-alignment-line",l.setAttribute("data-type","alignment"),l.style.left="".concat(null==t?void 0:t.x,"px"),(null==e?void 0:e.lenght)||c.appendChild(l)}else{let e=c.getElementsByClassName("left-vertical-alignment-line");(null==e?void 0:e.length)&&e[0].remove()}let p=(null==l?void 0:l.height)/2,f=(null==l?void 0:l.height)/2-2,x=(null==l?void 0:l.height)/2+2;if((null==t?void 0:t.y)>f&&(null==t?void 0:t.y)<x||(null==t?void 0:t.y)+(null==t?void 0:null===(s=t.node)||void 0===s?void 0:s.clientHeight)>f&&(null==t?void 0:t.y)+(null==t?void 0:null===(u=t.node)||void 0===u?void 0:u.clientHeight)<x||(null==t?void 0:t.y)+(null==t?void 0:null===(r=t.node)||void 0===r?void 0:r.clientHeight)/2>f&&(null==t?void 0:t.y)+(null==t?void 0:null===(v=t.node)||void 0===v?void 0:v.clientHeight)/2<x){let e=c.getElementsByClassName("center-horizantaly-alignment-line"),l=(null==e?void 0:e.lenght)?e[0]:document.createElement("div");l.className="center-horizantaly-alignment-line",l.setAttribute("data-type","alignment"),l.style.top="".concat(p,"px"),(null==e?void 0:e.lenght)||c.appendChild(l)}else{let e=c.getElementsByClassName("center-horizantaly-alignment-line");(null==e?void 0:e.length)&&e[0].remove()}if(0===Math.round(null==t?void 0:t.y)){let e=c.getElementsByClassName("top-horizantaly-alignment-line"),l=(null==e?void 0:e.length)?e[0]:document.createElement("div");l.className="top-horizantaly-alignment-line",l.setAttribute("data-type","alignment"),l.style.top="0px",(null==e?void 0:e.lenght)||c.appendChild(l)}else{let e=c.getElementsByClassName("top-horizantaly-alignment-line");(null==e?void 0:e.length)&&e[0].remove()}if((null==t?void 0:t.y)+(null==t?void 0:null===(g=t.node)||void 0===g?void 0:g.clientHeight)>(null==l?void 0:l.height)-3){let e=c.getElementsByClassName("bottom-horizantaly-alignment-line"),t=(null==e?void 0:e.length)?e[0]:document.createElement("div");t.className="bottom-horizantaly-alignment-line",t.setAttribute("data-type","alignment"),t.style.top="".concat(Math.round(null==l?void 0:l.height),"px"),(null==e?void 0:e.lenght)||c.appendChild(t)}else{let e=c.getElementsByClassName("bottom-horizantaly-alignment-line");(null==e?void 0:e.length)&&e[0].remove()}}},m=()=>{let e=c.querySelectorAll('[data-type="alignment"]');

1(null==e?void 0:e.length)&&e.forEach(e=>e.remove())};return c?(0,i.jsxs)(s.s,{style:{...u,...(null==e?void 0:e.visible)?{}:{visibility:"hidden"},...e.style},ref:v,bounds:"#editingWrapper",minWidth:null==e?void 0:e.minWidth,className:"".concat(e.isActive?"border-0-important bg-transparent-important outline-1-important outline-".concat(e.color||"tangaroa","-important outline-solid-important ").concat(null==e?void 0:e.className," "):"bg-transparent-important border-0-important outline-0-important"),lockAspectRatio:null==e?void 0:e.lockAspectRatio,...(null==e?void 0:e.lockAspectRatio)?{resizeHandleStyles:{left:{display:"none"},right:{display:"none"},top:{display:"none"},bottom:{display:"none"}}}:{},...(null==e?void 0:e.isText)?{resizeHandleClasses:{left:"text-rnd-resizer left",right:"text-rnd-resizer right"}}:{},size:{width:e.position.width,height:null===(l=e.position)||void 0===l?void 0:l.height},onDragStop:(l,t)=>{e.onDrag&&(null==e||e.onDrag(t)),m()},onClick:e=>{e.preventDefault(),e.stopPropagation()},onResizeStop:(l,t,i,n,o)=>{e.onResize&&(null==e||e.onResize({x:null==o?void 0:o.x,y:null==o?void 0:o.y,width:null==i?void 0:i.clientWidth,height:i.clientHeight})),m()},position:{x:(0,n.k3)(e.position.x)?(0,d.dE)(null===(t=e.position.x)||void 0===t?void 0:t.split("%")[0],null==c?void 0:c.clientWidth):e.position.x,y:(0,n.k3)(e.position.y)?(0,d.dE)(null===(r=e.position.y)||void 0===r?void 0:r.split("%")[0],null==c?void 0:c.clientHeight):e.position.y},onDrag:g,onResize:(l,t,i,n,d)=>{if(e.isText&&"right"!==t&&"left"!==t)(0,o.HH)({elements:document.querySelectorAll(".".concat(e.id)),step:.5},()=>{});else if(e.isText&&("right"===t||"left"===t)){let l=document.querySelector("#draggable-".concat(e.id)),t=document.querySelector("#mainText-".concat(null==e?void 0:e.layerId));l.style.height="".concat(null==t?void 0:t.offsetHeight,"px")}(null==e?void 0:e.handleResize)&&e.handleResize({x:null==d?void 0:d.x,y:null==d?void 0:d.y,width:null==i?void 0:i.clientWidth,height:i.clientHeight,dir:t}),g(null,{x:d.x,y:d.y,node:i})},disableDragging:!e.controlable||!e.isActive,enableResizing:e.isActive,id:"draggable-".concat(e.id),onMouseDown:e.onMouseDown,children:[e.children,e.isActive&&(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)("div",{className:"absolute rounded-sm -top-2 -left-2 w-2 h-2 bg-secondary",onClick:e=>e.stopPropagation()}),(0,i.jsx)("div",{className:"absolute rounded-sm -top-2 -right-2 w-2 h-2 bg-secondary",onClick:e=>e.stopPropagation()}),(0,i.jsx)("div",{className:"absolute rounded-sm -right-2 -bottom-2 w-2 h-2 bg-secondary",onClick:e=>e.stopPropagation()}),(0,i.jsx)("div",{className:"absolute rounded-sm -left-2 -bottom-2 w-2 h-2 bg-secondary",onClick:e=>e.stopPropagation()})]})]}):null})},109:function(e,l,t){"use strict";t.r(l);var i=t(85893),n=t(67294),o=t(72132),d=t(82591),a=t(25617),s=t(90446);l.default=e=>{var l,t,u,r;let{layer:v,isActive:c,onClick:g}=e,[m,h]=n.useState(!0),y=(0,a.v9)(e=>{var l;return null==e?void 0:null===(l=e.Timeline)||void 0===l?void 0:l.totalDuration}),p=(0,a.v9)(e=>{var l;return null==e?void 0:null===(l=e.Timeline)||void 0===l?void 0:l.currentTime}),f=(0,a.I0)(),{saveValue:x}=n.useContext(d.YW);return n.useEffect(()=>{if(y){var e,l;p<=(null==v?void 0:null===(e=v.duration)||void 0===e?void 0:e.to)&&p>=(null==v?void 0:null===(l=v.duration)||void 0===l?void 0:l.from)?m||h(!0):m&&h(!1)}},[y,p,null==v?void 0:null===(l=v.duration)||void 0===l?void 0:l.to,null==v?void 0:null===(t=v.duration)||void 0===t?void 0:t.from]),(0,i.jsx)(o.Z,{position:v.position,controlable:!0,editingContainerBoxId:"editingWrapper",lockAspectRatio:!0,isActive:c,visible:m,onDrag:e=>{let{x:l,y:t}=e,i=document.getElementById("editing"),n=JSON.parse(JSON.stringify(v));f(s.ZP.updateLayer({layerId:null==v?void 0:v.id,values:{position:{...null==n?void 0:n.position,x:"".concat(100*l/(null==i?void 0:i.clientWidth),"%"),y:"".concat(100*t/(null==i?void 0:i.clientHeight),"%")}}},e=>{x(e)}))},onResize:e=>{let{x:l,y:t,width:i,height:n}=e,o=document.getElementById("editing"),d=JSON.parse(JSON.stringify(v));f(s.ZP.updateLayer({layerId:null==v?void 0:v.id,values:{position:{...null==d?void 0:d.position,x:"".concat(100*l/(null==o?void 0:o.clientWidth),"%"),y:"".concat(100*t/(null==o?void 0:o.clientHeight),"%"),width:"".concat(100*i/(null==o?void 0:o.clientWidth),"%"),height:"".concat(100*n/(null==o?void 0:o.clientHeight),"%")}}},e=>{x(e)}))},handleDrag:e=>{let{x:l,y:t}=e,i=document.querySelector("#imageLayer-".concat(null==v?void 0:v.id)),n=document.getElementById("editing");i.style.left="".concat(100*l/(null==n?void 0:n.clientWidth),"%"),i.style.top="".concat(100*t/(null==n?void 0:n.clientHeight),"%")},handleResize:e=>{let{x:l,y:t,width:i,height:n}=e,o=document.querySelector("#imageLayer-".concat(null==v?void 0:v.id)),d=document.getElementById("editing");o.style.left="".concat(100*l/(null==d?void 0:d.clientWidth),"%"),o.style.top="".concat(100*t/(null==d?void 0:d.clientHeight),"%"),o.style.width="".concat(100*i/(null==d?void 0:d.clientWidth),"%"),o.style.height="".concat(100*n/(null==d?void 0:d.clientHeight),"%")},isText:!1,style:{zIndex:null==v?void 0:v.order},children:(0,i.jsxs)("div",{className:"w-full h-full image-".concat(null==v?void 0:null===(u=v.layerData)||void 0===u?void 0:u.id,"-layer"),onClick:g,children:[(0,i.jsx)("div",{className:"border-animation absolute top-0 right-0 bottom-0 left-0"}),(0,i.jsx)("img",{className:"w-full h-full object-contain invisible",src:null==v?void 0:null===(r=v.layerData)||void 0===r?void 0:r.image_url,onDragStart:e=>e.preventDefault(),onClick:g})]})})}}},function(e){e.O(0,[42663,92888,49774,40179],function(){return e(e.s=8074)}),_N_E=e.O()}]);