https://photocat.com/_next/static/chunks/8571.9366a543a57972e1.js

1!function(){try{var e="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof globalThis?globalThis:"undefined"!=typeof self?self:{},t=(new e.Error).stack;t&&(e._sentryDebugIds=e._sentryDebugIds||{},e._sentryDebugIds[t]="739ad31a-f9ec-4b4f-ac6c-4619a43bbd05",e._sentryDebugIdIdentifier="sentry-dbid-739ad31a-f9ec-4b4f-ac6c-4619a43bbd05")}catch(e){}}();"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[8571],{41461:function(e,t,n){var r,i,l,o,a=n(75271);function s(){return(s=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)({}).hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(null,arguments)}t.Z=function(e){return a.createElement("svg",s({xmlns:"http://www.w3.org/2000/svg",width:"1em",height:"1em",viewBox:"0 0 24 24",fill:"currentColor"},e),r||(r=a.createElement("path",{d:"M15 3H21V9",stroke:"currentColor",strokeWidth:2,strokeLinecap:"round",strokeLinejoin:"round"})),i||(i=a.createElement("path",{d:"M9 21H3V15",stroke:"currentColor",strokeWidth:2,strokeLinecap:"round",strokeLinejoin:"round"})),l||(l=a.createElement("path",{d:"M21 3L14 10",stroke:"currentColor",strokeWidth:2,strokeLinecap:"round",strokeLinejoin:"round"})),o||(o=a.createElement("path",{d:"M3 21L10 14",stroke:"currentColor",strokeWidth:2,strokeLinecap:"round",strokeLinejoin:"round"})))}},33412:function(e,t,n){n.d(t,{a:function(){return p}});var r=n(52676),i=n(75271),l=n(68420),o=n(23545),a=n(52890),s=n(76245);let c=e=>{let{className:t,style:n,children:i}=e;return(0,r.jsx)("div",{className:(0,a.cn)("absolute z-[2] bg-[var(--c-bg-diff-tag)] px-4 py-[6px] text-[15px] font-light leading-[1.1] text-[var(--c-text-diff-tag)]",t),style:n,children:i})},d=e=>/^(blob:|data:|https?:)/.test(e),h=e=>/\.[a-zA-Z0-9]+($|\?)/.test(e),u=e=>d(e)||h(e)?[e]:["".concat(e,".avif"),"".concat(e,".webp"),"".concat(e,".png")],f=e=>{let{src:t,alt:n,priority:i,style:l}=e;return d(t)?(0,r.jsx)("img",{src:t,alt:n,className:"h-full w-full object-contain",loading:i?"eager":"lazy",fetchPriority:i?"high":void 0,style:l}):(0,r.jsx)(s.Z,{alt:n,src:t,className:"h-full w-full overflow-hidden",innerImgClassName:"h-full w-full object-contain",fetchpriority:i?"high":void 0,loading:i?"eager":"lazy",style:l})},p=e=>{let{sourceUrl:t,afterUrl:n,className:s,style:d,children:h,hideDiffTag:p,alt:w,priority:g}=e,[b,m]=(0,i.useState)(50),[x,v]=(0,i.useState)(!1),y=(0,i.useRef)(null),j=(0,i.useRef)(!1),k=(0,i.useRef)(0),[N,E]=(0,i.useState)({width:0,height:0}),[C,L]=(0,i.useState)({width:0,height:0}),P=(0,i.useMemo)(()=>{let{width:e,height:t}=N,{width:n,height:r}=C;if(!e||!t||!n||!r)return{width:e,height:t,left:0,top:0};let i=Math.min(e/n,t/r),l=n*i,o=r*i;return{width:l,height:o,left:(e-l)/2,top:(t-o)/2}},[N,C]),M=P.left+P.width*(b/100),O=(0,i.useMemo)(()=>{let e={...d};return!e.height&&C.width&&C.height&&(e.aspectRatio="".concat(C.width," / ").concat(C.height)),e},[C.height,C.width,d]),z=(0,i.useCallback)(function(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0;if(!P.width)return;let n=(e-t-P.left)/P.width*100;m(Math.max(0,Math.min(100,n)))},[P.left,P.width]),I=(0,i.useCallback)(e=>{j.current&&(e.preventDefault(),z(e.clientX,k.current))},[z]),S=(0,i.useCallback)(()=>{j.current=!1},[]),W=(0,i.useCallback)(e=>{var t,n;e.preventDefault(),e.stopPropagation(),j.current=!0,k.current=e.clientX-M,null===(n=(t=e.currentTarget).setPointerCapture)||void 0===n||n.call(t,e.pointerId)},[M]);return(0,i.useEffect)(()=>(window.addEventListener("pointermove",I),window.addEventListener("pointerup",S),window.addEventListener("pointercancel",S),()=>{window.removeEventListener("pointermove",I),window.removeEventListener("pointerup",S),window.removeEventListener("pointercancel",S)}),[I,S]),(0,i.useEffect)(()=>{m(50),v(!1),L({width:0,height:0});let e=!1,n=async()=>{let n=u(t);for(let t of n){let n=await new Promise(e=>{let n=new Image;n.onload=()=>{e({width:n.naturalWidth,height:n.naturalHeight})},n.onerror=()=>e(null),n.src=t});if(e)return;if(n){L(n),v(!0);return}}};return n(),()=>{e=!0}},[t,n]),(0,i.useEffect)(()=>{let e=y.current;if(!e||!window.ResizeObserver)return;let t=()=>{let t=e.getBoundingClientRect();E({width:t.width,height:t.height})};t();let n=new ResizeObserver(t);return n.observe(e),()=>{n.disconnect()}},[]),(0,r.jsxs)("div",{ref:y,className:(0,a.cn)("relative isolate w-full overflow-hidden rounded-[inherit]",s),style:O,children:[(0,r.jsx)("div",{className:"absolute overflow-hidden",style:{width:P.width,height:P.height,left:P.left,top:P.top},children:(0,r.jsx)(f,{src:t,alt:w,priority:g})}),(0,r.jsx)("div",{className:"absolute overflow-hidden",style:{width:P.width,height:P.height,left:P.left,top:P.top,clipPath:"pol

1ygon(".concat(b,"% 0%, 100% 0%, 100% 100%, ").concat(b,"% 100%)"),WebkitClipPath:"polygon(".concat(b,"% 0%, 100% 0%, 100% 100%, ").concat(b,"% 100%)")},children:(0,r.jsx)(f,{src:n,alt:w,priority:!0})}),(0,r.jsx)(c,{className:(0,a.cn)("rounded-r-[80px]",(p||!x)&&"invisible"),style:{left:P.left,top:P.top+12.5},children:(0,o.t)("gen.before")}),(0,r.jsx)(c,{className:(0,a.cn)("rounded-l-[80px]",(p||!x)&&"invisible"),style:{right:N.width-P.left-P.width,top:P.top+12.5},children:(0,o.t)("gen.after")}),(0,r.jsx)("div",{className:"pointer-events-none absolute inset-0 bg-white/0"}),(0,r.jsx)("button",{type:"button",onPointerDown:W,className:(0,a.cn)("absolute z-[3] w-px -translate-x-1/2 cursor-ew-resize touch-none bg-white",!x&&"pointer-events-none invisible"),style:{left:M,top:P.top,height:P.height},"aria-label":"compare images",children:(0,r.jsx)("div",{className:"absolute left-1/2 top-1/2 h-6 w-6 -translate-x-1/2 -translate-y-1/2 rounded-full bg-white",children:(0,r.jsx)(l.Z,{className:"absolute left-1/2 top-1/2 h-6 w-6 -translate-x-1/2 -translate-y-1/2 rotate-90 text-black"})})}),(0,r.jsx)("div",{className:(0,a.cn)("pointer-events-none absolute inset-0 z-[4]",!x&&"invisible"),children:(0,r.jsx)("div",{className:"absolute",style:{width:P.width,height:P.height,left:P.left,top:P.top},children:h})})]})}},78571:function(e,t,n){n.d(t,{Z:function(){return x}});var r,i=n(52676),l=n(75271),o=n(52890);n(37786);var a=n(15639),s=n(23545),c=n(4067),d=n(56139);function h(){return(h=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)({}).hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(null,arguments)}var u=function(e){return l.createElement("svg",h({width:"1em",height:"1em",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg",fill:"currentColor"},e),r||(r=l.createElement("g",{id:"success"},l.createElement("path",{id:"Vector 17",d:"M10.8235 4L3 12M3 12L10.8235 20M3 12H21",stroke:"white",strokeWidth:2,strokeLinecap:"round",strokeLinejoin:"round"}))))},f=n(71477),p=n(33412);let w={width:1088,height:612},g={width:356,height:500},b=(0,l.forwardRef)((e,t)=>{let{onDownload:n,children:r,className:h,src:b,diff:m}=e,[x,v]=(0,l.useState)(!1);(0,c.S)();let[y,j]=(0,l.useState)();(0,l.useEffect)(()=>{let e=new Image;e.onload=()=>{let t=e.naturalWidth,n=e.naturalHeight,r=(0,d.X)()?w:g,i=r.width,l=r.height,o=t/n,a=t>i?i:t,s=n>l?l:n,c=0,h=0;o>i/l?(c=a,h=a/o):(h=s,c=s*o),c>t&&(c=t,h=t/o),h>n&&(h=n,c=n*o),j({w:c,h:h})},b?e.src=b:e.src=m.after},[b,m]),(0,l.useEffect)(()=>(x?document.body.style.overflowY="hidden":document.body.style.overflowY="initial",()=>{document.body.style.overflowY="initial"}),[x]),(0,l.useImperativeHandle)(t,()=>({}),[]);let k=(0,l.useCallback)(e=>{let{onClose:t}=e;return(0,i.jsx)("div",{className:"mobile:top-[12px] mobile:left-[12px] mobile:right-[12px] absolute left-[32px] right-[32px] top-[32px] z-[20] flex items-center justify-between",onMouseDown:e=>e.stopPropagation(),children:(0,i.jsx)(u,{className:"h-6 w-6 cursor-pointer text-white",onClick:t})})},[]),N=(0,l.useCallback)(()=>(0,i.jsx)("div",{className:"mobile:bottom-3 absolute bottom-[32px] left-1/2 z-[21] flex w-full -translate-x-1/2 items-center justify-center",children:(0,i.jsx)("div",{className:(0,o.cn)("m-auto flex min-h-[50px] items-center justify-center gap-2 rounded-lg p-2","mobile:flex-wrap mobile:mx-4"),children:(0,i.jsx)("div",{className:"flex",children:n?(0,i.jsx)(f.z,{variant:"default",className:"mobile:w-[326px] h-[62px] w-[296px] flex-col",onClick:n,children:(0,s.t)("gen.download")}):null})})}),[n]);return(0,i.jsx)(a.TV,{className:(0,o.cn)(h),maskOpacity:.85,onVisibleChange:e=>v(e),maskClassName:"backdrop-blur-[25px]",loop:1,toolbarRender:k,overlayRender:N,children:(()=>{if(!y)return r;let{w:e,h:t}=y;return(0,i.jsx)(a.HI,{width:e,height:t,render:n=>{let{scale:r,attrs:o}=n;if((0,l.useEffect)(()=>{if(m){let e=document.querySelector(".PhotoView__PhotoWrap");e.style.setProperty("pointer-events","none"),e.classList.add("diff_view")}},[]),!e||!t)return(0,i.jsx)(i.Fragment,{});let a=o.style.width,s=(a-e)/e,c=o.style.height,d=(c-t)/t;return(c&&c>612&&o.style&&(o.style.height=612),b)?(0,i.jsxs)("div",{...o,children:[(0,i.jsx)("div",{style:{transform:"scale(".concat(1===r?r+s:1+s,", ").concat(1===r?r+d:1+d,")"),width:"".concat(e,"px"),height:"".concat(t,"px"),transformOrigin:"0 0"},children:(0,i.jsx)("img",{loading:"lazy",src:b,alt:""})}),(0,i.jsx)("div",{className:"absolute bottom-0 left-0 right-0 top-0 h-full w-full bg-white/0"})]}):m?(0,i.jsx)(p.a,{style:{width:"".concat(e,"px"),height:"".concat(t,"px")},className:"pointer-events-auto h-full w-full",sourceUrl:m.before,afterUrl:m.after}):void 0},children:r})})()})});var m=n(41461);function x(e){let{alt:t,before:n,after:r,conCls:a,imgCls:s,differCls:c,onFullscreenClick:d}=e,[h,u]=(0,l.useState)(null);(0,l.useEffect)(()=>{let e=!1,t=new Image;return t.src=n,t.onload=()=>

1{e||u({width:t.naturalWidth,height:t.naturalHeight})},()=>{e=!0,t.onload=null}},[n]);let f=(0,l.useMemo)(()=>!!h&&h.width-h.height<=100,[h]),w=(0,o.cn)("mobile:max-w-[356px] h-full w-full rounded-[12px]",f&&"min-h-[200px]");return(0,i.jsx)("div",{className:(0,o.cn)("mobile:p-0 mobile:border-none flex h-full w-full items-center justify-center rounded-[20px] border-[0.5px] border-[var(--c-result-box-border)] p-3",a),children:r?(0,i.jsx)(p.a,{className:(0,o.cn)(c,w),sourceUrl:n,afterUrl:r,alt:t,children:d?(0,i.jsx)(b,{type:"btn",diff:{before:n,after:r},children:(0,i.jsx)("div",{role:"button",className:"pointer-events-auto absolute bottom-3 right-3 cursor-pointer rounded-full bg-black/40 p-3 text-white",onClick:d,children:(0,i.jsx)(m.Z,{className:"h-6 w-6 text-white"})})}):null}):(0,i.jsx)("div",{className:(0,o.cn)(w,"flex items-center justify-center overflow-hidden"),children:(0,i.jsx)("img",{alt:t,src:n,className:(0,o.cn)("h-full w-full rounded-[inherit] object-contain",s)})})})}},56139:function(e,t,n){n.d(t,{X:function(){return r}}),t.Z=()=>/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);let r=()=>{let e=navigator.userAgent,t=["Android","iPhone","SymbianOS","Windows Phone","iPad","iPod"],n=!0;for(let r=0;r<t.length;r++)if(e.indexOf(t[r])>0){n=!1;break}return n}}}]);