https://flic.me/website_live/_next/static/chunks/3868-e98d64ce0af2ec23.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[3868],{3868:function(e,t,i){"use strict";i.r(t),i.d(t,{default:function(){return CropImage}});var n=i(7997),r=i(1526),o=i(3495),a=i(1720);let h={x:0,y:0,width:0,height:0,unit:"px"},f=(e,t,i)=>Math.min(Math.max(e,t),i),S=(...e)=>e.filter(e=>e&&"string"==typeof e).join(" "),P=(e,t)=>e===t||e.width===t.width&&e.height===t.height&&e.x===t.x&&e.y===t.y&&e.unit===t.unit;function D(e,t,i){return"%"===e.unit?{...h,...e,unit:"%"}:{unit:"%",x:e.x?e.x/t*100:0,y:e.y?e.y/i*100:0,width:e.width?e.width/t*100:0,height:e.height?e.height/i*100:0}}function y(e,t,i){return e.unit?"px"===e.unit?{...h,...e,unit:"px"}:{unit:"px",x:e.x?e.x*t/100:0,y:e.y?e.y*i/100:0,width:e.width?e.width*t/100:0,height:e.height?e.height*i/100:0}:{...h,...e,unit:"px"}}function X(e,t,i,n,r,o=0,a=0,h=n,d=r){let s={...e},l=Math.min(o,n),c=Math.min(a,r),w=Math.min(h,n),p=Math.min(d,r);t&&(t>1?(c=(l=a?a*t:l)/t,w=h*t):(l=(c=o?o/t:c)*t,p=d/t)),s.y<0&&(s.height=Math.max(s.height+s.y,c),s.y=0),s.x<0&&(s.width=Math.max(s.width+s.x,l),s.x=0);let g=n-(s.x+s.width);g<0&&(s.x=Math.min(s.x,n-l),s.width+=g);let u=r-(s.y+s.height);if(u<0&&(s.y=Math.min(s.y,r-c),s.height+=u),s.width<l&&(("sw"===i||"nw"==i)&&(s.x-=l-s.width),s.width=l),s.height<c&&(("nw"===i||"ne"==i)&&(s.y-=c-s.height),s.height=c),s.width>w&&(("sw"===i||"nw"==i)&&(s.x-=w-s.width),s.width=w),s.height>p&&(("nw"===i||"ne"==i)&&(s.y-=p-s.height),s.height=p),t){let e=s.width/s.height;if(e<t){let e=Math.max(s.width/t,c);("nw"===i||"ne"==i)&&(s.y-=e-s.height),s.height=e}else if(e>t){let e=Math.max(s.height*t,l);("sw"===i||"nw"==i)&&(s.x-=e-s.width),s.width=e}}return s}let d={capture:!0,passive:!1},s=class m extends a.PureComponent{constructor(){super(...arguments),this.docMoveBound=!1,this.mouseDownOnCrop=!1,this.dragStarted=!1,this.evData={startClientX:0,startClientY:0,startCropX:0,startCropY:0,clientX:0,clientY:0,isResize:!0},this.componentRef=(0,a.createRef)(),this.mediaRef=(0,a.createRef)(),this.initChangeCalled=!1,this.state={cropIsActive:!1,newCropIsBeingDrawn:!1},this.onCropPointerDown=e=>{let{crop:t,disabled:i}=this.props,n=this.getBox();if(!t)return;let r=y(t,n.width,n.height);if(i)return;e.cancelable&&e.preventDefault(),this.bindDocMove(),this.componentRef.current.focus({preventScroll:!0});let o=e.target.dataset.ord,a=e.clientX,h=e.clientY,d=r.x,s=r.y;if(o){let t=e.clientX-n.x,i=e.clientY-n.y,l=0,c=0;"ne"===o||"e"==o?(l=t-(r.x+r.width),c=i-r.y,d=r.x,s=r.y+r.height):"se"===o||"s"===o?(l=t-(r.x+r.width),c=i-(r.y+r.height),d=r.x,s=r.y):"sw"===o||"w"==o?(l=t-r.x,c=i-(r.y+r.height),d=r.x+r.width,s=r.y):("nw"===o||"n"==o)&&(l=t-r.x,c=i-r.y,d=r.x+r.width,s=r.y+r.height),a=d+n.x+l,h=s+n.y+c}this.evData={startClientX:a,startClientY:h,startCropX:d,startCropY:s,clientX:e.clientX,clientY:e.clientY,isResize:!!o,ord:o},this.mouseDownOnCrop=!0,this.setState({cropIsActive:!0})},this.onComponentPointerDown=e=>{let{crop:t,disabled:i,locked:n,keepSelection:r,onChange:o}=this.props,a=this.getBox();if(i||n||r&&t)return;e.cancelable&&e.preventDefault(),this.bindDocMove(),this.componentRef.current.focus({preventScroll:!0});let h=e.clientX-a.x,d=e.clientY-a.y,s={unit:"px",x:h,y:d,width:0,height:0};this.evData={startClientX:e.clientX,startClientY:e.clientY,startCropX:h,startCropY:d,clientX:e.clientX,clientY:e.clientY,isResize:!0},this.mouseDownOnCrop=!0,o(y(s,a.width,a.height),D(s,a.width,a.height)),this.setState({cropIsActive:!0,newCropIsBeingDrawn:!0})},this.onDocPointerMove=e=>{let t;let{crop:i,disabled:n,onChange:r,onDragStart:o}=this.props,a=this.getBox();if(n||!i||!this.mouseDownOnCrop)return;e.cancelable&&e.preventDefault(),this.dragStarted||(this.dragStarted=!0,o&&o(e));let{evData:h}=this;h.clientX=e.clientX,h.clientY=e.clientY,P(i,t=h.isResize?this.resizeCrop():this.dragCrop())||r(y(t,a.width,a.height),D(t,a.width,a.height))},this.onComponentKeyDown=e=>{let{crop:t,disabled:i,onChange:n,onComplete:r}=this.props;if(i)return;let o=e.key,a=!1;if(!t)return;let h=this.getBox(),d=this.makePixelCrop(h),s=(navigator.platform.match("Mac")?e.metaKey:e.ctrlKey)?m.nudgeStepLarge:e.shiftKey?m.nudgeStepMedium:m.nudgeStep;if("ArrowLeft"===o?(d.x-=s,a=!0):"ArrowRight"===o?(d.x+=s,a=!0):"ArrowUp"===o?(d.y-=s,a=!0):"ArrowDown"===o&&(d.y+=s,a=!0),a){e.cancelable&&e.preventDefault(),d.x=f(d.x,0,h.width-d.width),d.y=f(d.y,0,h.height-d.height);let t=y(d,h.width,h.height),i=D(d,h.width,h.height);n(t,i),r&&r(t,i)}},this.onHandlerKeyDown=(e,t)=>{let{aspect:i=0,crop:n,disabled:r,minWidth:o=0,minHeight:a=0,maxWidth:h,maxHeight:d,onChange:s,onComplete:l}=this.props,c=this.getBox();if(r||!n||"ArrowUp"!==e.key&&"ArrowDown"!==e.key&&"ArrowLeft"!==e.key&&"ArrowRight"!==e.key)return;e.stopPropagation(),e.preventDefault();let w=(navigator.platform.match("Mac")?e.metaKey:e.ctrlKey)?m.nudgeStepLarge:e.shiftKey?m.nudgeStepMedium:m.nudgeStep,p=y(n,c.width,c.height),g=function(e,t,i,n){let r={...e};

1return"ArrowLeft"===t?"nw"===n?(r.x-=i,r.y-=i,r.width+=i,r.height+=i):"w"===n?(r.x-=i,r.width+=i):"sw"===n?(r.x-=i,r.width+=i,r.height+=i):"ne"===n?(r.y+=i,r.width-=i,r.height-=i):"e"===n?r.width-=i:"se"===n&&(r.width-=i,r.height-=i):"ArrowRight"===t&&("nw"===n?(r.x+=i,r.y+=i,r.width-=i,r.height-=i):"w"===n?(r.x+=i,r.width-=i):"sw"===n?(r.x+=i,r.width-=i,r.height-=i):"ne"===n?(r.y-=i,r.width+=i,r.height+=i):"e"===n?r.width+=i:"se"===n&&(r.width+=i,r.height+=i)),"ArrowUp"===t?"nw"===n?(r.x-=i,r.y-=i,r.width+=i,r.height+=i):"n"===n?(r.y-=i,r.height+=i):"ne"===n?(r.y-=i,r.width+=i,r.height+=i):"sw"===n?(r.x+=i,r.width-=i,r.height-=i):"s"===n?r.height-=i:"se"===n&&(r.width-=i,r.height-=i):"ArrowDown"===t&&("nw"===n?(r.x+=i,r.y+=i,r.width-=i,r.height-=i):"n"===n?(r.y+=i,r.height-=i):"ne"===n?(r.y+=i,r.width-=i,r.height-=i):"sw"===n?(r.x-=i,r.width+=i,r.height+=i):"s"===n?r.height+=i:"se"===n&&(r.width+=i,r.height+=i)),r}(p,e.key,w,t),u=X(g,i,t,c.width,c.height,o,a,h,d);if(!P(n,u)){let e=D(u,c.width,c.height);s(u,e),l&&l(u,e)}},this.onDocPointerDone=e=>{let{crop:t,disabled:i,onComplete:n,onDragEnd:r}=this.props,o=this.getBox();this.unbindDocMove(),!(i||!t)&&this.mouseDownOnCrop&&(this.mouseDownOnCrop=!1,this.dragStarted=!1,r&&r(e),n&&n(y(t,o.width,o.height),D(t,o.width,o.height)),this.setState({cropIsActive:!1,newCropIsBeingDrawn:!1}))},this.onDragFocus=e=>{var t;null==(t=this.componentRef.current)||t.scrollTo(0,0)}}get document(){return document}getBox(){let e=this.mediaRef.current;if(!e)return{x:0,y:0,width:0,height:0};let{x:t,y:i,width:n,height:r}=e.getBoundingClientRect();return{x:t,y:i,width:n,height:r}}componentDidUpdate(e){let{crop:t,onComplete:i}=this.props;if(i&&!e.crop&&t){let{width:e,height:n}=this.getBox();e&&n&&i(y(t,e,n),D(t,e,n))}}componentWillUnmount(){this.resizeObserver&&this.resizeObserver.disconnect()}bindDocMove(){this.docMoveBound||(this.document.addEventListener("pointermove",this.onDocPointerMove,d),this.document.addEventListener("pointerup",this.onDocPointerDone,d),this.document.addEventListener("pointercancel",this.onDocPointerDone,d),this.docMoveBound=!0)}unbindDocMove(){this.docMoveBound&&(this.document.removeEventListener("pointermove",this.onDocPointerMove,d),this.document.removeEventListener("pointerup",this.onDocPointerDone,d),this.document.removeEventListener("pointercancel",this.onDocPointerDone,d),this.docMoveBound=!1)}getCropStyle(){let{crop:e}=this.props;if(e)return{top:`${e.y}${e.unit}`,left:`${e.x}${e.unit}`,width:`${e.width}${e.unit}`,height:`${e.height}${e.unit}`}}dragCrop(){let{evData:e}=this,t=this.getBox(),i=this.makePixelCrop(t),n=e.clientX-e.startClientX,r=e.clientY-e.startClientY;return i.x=f(e.startCropX+n,0,t.width-i.width),i.y=f(e.startCropY+r,0,t.height-i.height),i}getPointRegion(e,t,i,n){let r;let{evData:o}=this,a=o.clientX-e.x,h=o.clientY-e.y;return r=n&&t?"nw"===t||"n"===t||"ne"===t:h<o.startCropY,(i&&t?"nw"===t||"w"===t||"sw"===t:a<o.startCropX)?r?"nw":"sw":r?"ne":"se"}resolveMinDimensions(e,t,i=0,n=0){let r=Math.min(i,e.width),o=Math.min(n,e.height);return t&&(r||o)?t>1?r?[r,r/t]:[o*t,o]:o?[o*t,o]:[r,r/t]:[r,o]}resizeCrop(){let{evData:e}=this,{aspect:t=0,maxWidth:i,maxHeight:n}=this.props,r=this.getBox(),[o,a]=this.resolveMinDimensions(r,t,this.props.minWidth,this.props.minHeight),h=this.makePixelCrop(r),d=this.getPointRegion(r,e.ord,o,a),s=e.ord||d,l=e.clientX-e.startClientX,c=e.clientY-e.startClientY;(o&&"nw"===s||"w"===s||"sw"===s)&&(l=Math.min(l,-o)),(a&&"nw"===s||"n"===s||"ne"===s)&&(c=Math.min(c,-a));let w={unit:"px",x:0,y:0,width:0,height:0};"ne"===d?(w.x=e.startCropX,w.width=l,t?w.height=w.width/t:w.height=Math.abs(c),w.y=e.startCropY-w.height):"se"===d?(w.x=e.startCropX,w.y=e.startCropY,w.width=l,t?w.height=w.width/t:w.height=c):"sw"===d?(w.x=e.startCropX+l,w.y=e.startCropY,w.width=Math.abs(l),t?w.height=w.width/t:w.height=c):"nw"===d&&(w.x=e.startCropX+l,w.width=Math.abs(l),t?(w.height=w.width/t,w.y=e.startCropY-w.height):(w.height=Math.abs(c),w.y=e.startCropY+c));let p=X(w,t,d,r.width,r.height,o,a,i,n);return t||m.xyOrds.indexOf(s)>-1?h=p:m.xOrds.indexOf(s)>-1?(h.x=p.x,h.width=p.width):m.yOrds.indexOf(s)>-1&&(h.y=p.y,h.height=p.height),h.x=f(h.x,0,r.width-h.width),h.y=f(h.y,0,r.height-h.height),h}createCropSelection(){let{ariaLabels:e=m.defaultProps.ariaLabels,disabled:t,locked:i,renderSelectionAddon:n,ruleOfThirds:r,crop:o}=this.props,h=this.getCropStyle();if(o)return a.default.createElement("div",{style:h,className:"ReactCrop__crop-selection",onPointerDown:this.onCropPointerDown,"aria-label":e.cropArea,tabIndex:0,onKeyDown:this.onComponentKeyDown,role:"group"},!t&&!i&&a.default.createElement("div",{className:"ReactCrop__drag-elements",onFocus:this.onDragFocus},a.default.createElement("div",{className:"ReactCrop__drag-bar ord-n","data-ord":"n"}),a.default.createElement("div",{className:"ReactCrop__drag-bar ord-e","data-ord":"e"}),a.default.createElement("div",{className:"ReactCrop__drag-bar ord-s","data-ord":"s"}),a.default.createElement("div",{className:"ReactCrop__drag-bar ord-w","data-ord":"w"}),a.default.createElement("div",{className:"ReactCrop__drag-handle ord-nw","data-ord":"nw",tabIndex:0,"aria-label":e.nwDragHandle,onKeyDown:e=>this.onHandlerKeyDown(e,"nw"),role:"button"}),a.default.createElement("div",{className:"ReactCrop__drag-handle ord-n","data-ord":"n",tabIndex:0,"aria-label":e.nDragHandle,onKeyDown:e=>this.onHandlerKeyDown(e,"n"),role:"button"}),a.default.createElement("div",{className:"ReactCrop__drag-handle ord-ne","data-ord":"ne",tabIndex:0,"aria-label":e.neDragHandle,onKeyDown:e=>this.onHandlerKeyDown(e,"ne"),role:"button"}),a.default.createElement("div",{className:"ReactCrop__drag-handle ord-e","data-ord":"e",tabIndex:0,"aria-label":e.eDragHandle,onKeyDown:e=>this.onHandlerKeyDown(e,"e"),role:"button"}),a.default.createElement("div",{className:"ReactCrop__drag-handle ord-se","data-ord":"se",tabIndex:0,"aria-label":e.seDragHandle,onKeyDown:e=>this.onHandlerKeyDown(e,"se"),role:"button"}),a.default.createElement("div",{className:"ReactCrop__drag-handle ord-s","data-ord":"s",tabIndex:0,"aria-label":e.sDragHandle,onKeyDown:e=>this.onHandlerKeyDown(e,"s"),role:"button"}),a.default.createElement("div",{className:"ReactCrop__drag-handle ord-sw","data-ord":"sw",tabIndex:0,"aria-label":e.swDragHandle,onKeyDown:e=>this.onHandlerKeyDown(e,"sw"),role:"button"}),a.default.createElement("div",{className:"ReactCrop__drag-handle ord-w","data-ord":"w",tabIndex:0,"aria-label":e.wDragHandle,onKeyDown:e=>this.onHandlerKeyDown(e,"w"),role:"button"})),n&&a.default.createElement("div",{className:"ReactCrop__selection-addon",onMouseDown:e=>e.stopPropagation()},n(this.state)),r&&a.default.createElement(a.default.Fragment,null,a.default.createElement("div",{className:"ReactCrop__rule-of-thirds-hz"}),a.default.createElement("div",{className:"ReactCrop__rule-of-thirds-vt"})))}makePixelCrop(e){let t={...h,...this.props.crop||{}};return y(t,e.width,e.height)}render(){let{aspect:e,children:t,circularCrop:i,className:n,crop:r,disabled:o,locked:h,style:d,ruleOfThirds:s}=this.props,{cropIsActive:l,newCropIsBeingDrawn:c}=this.state,w=r?this.createCropSelection():null,p=S("ReactCrop",n,l&&"ReactCrop--active",o&&"ReactCrop--disabled",h&&"ReactCrop--locked",c&&"ReactCrop--new-crop",r&&e&&"ReactCrop--fixed-aspect",r&&i&&"ReactCrop--circular-crop",r&&s&&"ReactCrop--rule-of-thirds",!this.dragStarted&&r&&!r.width&&!r.height&&"ReactCrop--invisible-crop",i&&"ReactCrop--no-animate");return a.default.createElement("div",{ref:this.componentRef,className:p,style:d},a.default.createElement("div",{ref:this.mediaRef,className:"ReactCrop__child-wrapper",onPointerDown:this.onComponentPointerDown},t),w)}};s.xOrds=["e","w"],s.yOrds=["n","s"],s.xyOrds=["nw","ne","se","sw"],s.nudgeStep=1,s.nudgeStepMedium=10,s.nudgeStepLarge=100,s.defaultProps={ariaLabels:{cropArea:"Use the arrow keys to move the crop selection area",nwDragHandle:"Use the arrow keys to move the north west drag handle to change the crop selection area",nDragHandle:"Use the up and down arrow keys to move the north drag handle to change the crop selection area",neDragHandle:"Use the arrow keys to move the north east drag handle to change the crop selection area",eDragHandle:"Use the up and down arrow keys to move the east drag handle to change the crop selection area",seDragHandle:"Use the arrow keys to move the south east drag handle to change the crop selection area",sDragHandle:"Use the up and down arrow keys to move the south drag handle to change the crop selection area",swDragHandle:"Use the arrow keys to move the south west drag handle to change the crop selection area",wDragHandle:"Use the up and down arrow keys to move the west drag handle to change the crop selection area"}};var l=i(1865);i(948);var c=i(9473),w=i(5342),p=i(5675),g=i.n(p);function CropImage(){var e;let t=(0,c.v9)(e=>{var t;return null==e?void 0:null===(t=e.admin)||void 0===t?void 0:t.account}),i=(0,c.v9)(e=>{var t;return null==e?void 0:null===(t=e.common)||void 0===t?void 0:t.cropperState});(0,c.v9)(e=>{var t;return null==e?void 0:null===(t=e.common)||void 0===t?void 0:t.croppedPictures}),(0,c.v9)(e=>{var t;return null==e?void 0:null===(t=e.common)||void 0===t?void 0:t.currentProfilePic});let[h,d]=(0,a.useState)(t);(0,c.v9)(e=>{var t;return null===(t=e.common)||void 0===t?void 0:t.picturesHistory}),(0,c.v9)(e=>{var t;return null===(t=e.common)||void 0===t?void 0:t.croppedPictures});let p=(0,a.useRef)(),[u,v]=(0,a.useState)(),[x,C]=(0,a.useState)(),[b,R]=(0,a.useState)(),M=(0,c.I0)();async function onDownloadCropClick(){var e,t,n,r;let o=null==p?void 0:p.current;if(!o)throw Error("Crop canvas does not exist");

1let a=o.naturalWidth/o.width,h=o.naturalHeight/o.height,d=new OffscreenCanvas(x.width*a,x.height*h),s=d.getContext("2d");if(!s)throw Error("No 2d context");s.drawImage(o,x.x*a,x.y*h,x.width*a,x.height*h,0,0,d.width,d.height);let l=document.createElement("canvas");l.width=d.width,l.height=d.height,null===(e=l.getContext("2d"))||void 0===e||e.drawImage(d,0,0);let c=l.toDataURL("image/png");M((0,w.aM)({id:null==i?void 0:null===(t=i.baseImage)||void 0===t?void 0:t.id,url:null==i?void 0:null===(n=i.baseImage)||void 0===n?void 0:n.url,crop:x})),M((0,w.Bj)({id:null==i?void 0:null===(r=i.baseImage)||void 0===r?void 0:r.id,url:c,crop:x})),M((0,w.Ds)({active:!1,baseImage:{},croppedImage:{}}))}return(0,n.tZ)(r.M,{children:(null==i?void 0:i.active)?(0,n.BX)(o.E.div,{initial:{opacity:1,y:"100%",x:"-50%"},animate:{opacity:1,y:"0",x:"-50%"},exit:{opacity:1,y:"100%",x:"-50%"},transition:{ease:"linear",duration:.3},className:"fixed left-1/2 top-0 z-50 flex h-screen w-full max-w-[428px] -translate-x-1/2 items-center justify-center bg-black",children:[(0,n.BX)("div",{className:"max-w-[428px fixed top-0 z-50 flex w-full flex-wrap items-center justify-between px-5 py-3 text-right",children:[(0,n.tZ)(g(),{src:l.Z.src,height:35,width:35,alt:"cross",className:"cursor-pointer",onClick:e=>{(null==i?void 0:i.onCloseAction)&&(null==i||i.onCloseAction()),M((0,w.Ds)({active:!1,baseImage:{},croppedImage:{},new:!1}))}}),(0,n.tZ)("button",{className:"text-white",onClick:e=>onDownloadCropClick(),children:"Crop"})]}),(0,n.tZ)(s,{crop:u,aspect:1,keepSelection:!0,ruleOfThirds:!0,circularCrop:!0,onChange:(e,t)=>

1{v(t)},onComplete:e=>{C(e)},className:"max-h-[100vh]",children:(0,n.tZ)("img",{ref:p,onLoad:function(e){let{width:t,height:i}=e.currentTarget,n=function(e,t,i){let n=y(e,t,i);return n.x=(t-n.width)/2,n.y=(i-n.height)/2,"%"===e.unit?D(n,t,i):n}(function(e,t,i,n){let r=y(e,i,n);return e.width&&(r.height=r.width/t),e.height&&(r.width=r.height*t),r.y+r.height>n&&(r.height=n-r.y,r.width=r.height*t),r.x+r.width>i&&(r.width=i-r.x,r.height=r.width/t),"%"===e.unit?D(r,i,n):r}({unit:"%",width:100},1,t,i),t,i);v(n),C(y(n,t,i))},src:null==i?void 0:null===(e=i.baseImage)||void 0===e?void 0:e.url,width:"auto",height:"auto",className:"max-h-[100vh] object-cover"})})]},"cropperView"):""})}},948:function(){}}]);