https://www.fansnetwork.ai/_next/static/chunks/48754.17b99dea22fba540.js

1"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[48754],{48754:(e,a,t)=>{t.r(a),t.d(a,{default:()=>h});var l=t(71300),s=t(51944),r=t(61925),o=t(17191),n=t(33715),d=t(2573);let i={instagram:[{label:"1:1",ratio:1},{label:"4:5",ratio:.8},{label:"1.91:1",ratio:1.91}],threads:[{label:"1:1",ratio:1},{label:"4:5",ratio:.8}],facebook:[{label:"1:1",ratio:1},{label:"1.91:1",ratio:1.91},{label:"4:5",ratio:.8}],linkedin:[{label:"1:1",ratio:1},{label:"1.91:1",ratio:1.91}]};async function c(e,a,t,l){let s=new window.Image;s.crossOrigin="anonymous",await new Promise((a,t)=>{s.onload=()=>a(),s.onerror=t,s.src=e});let r=document.createElement("canvas"),o=r.getContext("2d");if("none"===t)r.width=a.width,r.height=a.height,o.drawImage(s,a.x,a.y,a.width,a.height,0,0,a.width,a.height);else{let e,a,n=s.naturalWidth,d=s.naturalHeight,i=n/d;if(i>l?(e=n,a=Math.round(n/l)):(a=d,e=Math.round(d*l)),e>1440||a>1440){let t=1440/Math.max(e,a);e=Math.round(e*t),a=Math.round(a*t)}r.width=e,r.height=a,o.fillStyle="black"===t?"#000000":"#FFFFFF",o.fillRect(0,0,e,a);let c=i>l?e:Math.round(a*i),h=i>l?Math.round(e/i):a,x=Math.round((e-c)/2),m=Math.round((a-h)/2);o.drawImage(s,x,m,c,h)}return new Promise((e,a)=>{r.toBlob(t=>{t?e(t):a(Error("Canvas toBlob failed"))},"image/jpeg",.92)})}function h({imageFile:e,platform:a,onConfirm:t,onSkip:x,onCancel:m,queuePosition:b,queueTotal:u}){let p=(0,d.c)(),g=i[a]||i.instagram,[y]=(0,s.useState)(()=>URL.createObjectURL(e)),[f,j]=(0,s.useState)({x:0,y:0}),[v,w]=(0,s.useState)(1),[N,C]=(0,s.useState)(g[0].ratio),[k,M]=(0,s.useState)(null),[$,S]=(0,s.useState)("none"),[z,F]=(0,s.useState)(!1);(0,s.useEffect)(()=>{let e=document.body.style.overflow;return document.body.style.overflow="hidden",()=>{document.body.style.overflow=e,URL.revokeObjectURL(y)}},[]);let R=(0,s.useCallback)((e,a)=>{M(a)},[]),B=async()=>{if(k){F(!0);try{let a=await c(y,k,$,N),l=e.name.replace(/.*\./,""),s=e.name.replace(/\.[^.]+$/,""),r=`${s}_cropped.${l===e.name?"jpg":l}`;t(a,r)}catch(e){console.error("Crop failed:",e)}finally{F(!1)}}},E=[{value:"none",label:p("dashboard.autopost.noBorder")},{value:"black",label:p("dashboard.autopost.blackBorder")},{value:"white",label:p("dashboard.autopost.whiteBorder")}];return(0,l.jsx)("div",{className:"fixed inset-0 bg-black/80 flex items-center justify-center p-2 md:p-4",style:{zIndex:9999,touchAction:"none"},onTouchMove:e=>e.preventDefault(),children:(0,l.jsxs)("div",{className:"bg-white rounded-xl max-w-[600px] w-full max-h-[90vh] overflow-auto",children:[(0,l.jsxs)("div",{className:"flex items-center justify-between p-3 md:p-4 border-b border-gray-200",children:[(0,l.jsxs)("div",{className:"flex items-center gap-2",children:[(0,l.jsx)(n.QmF,{color:"#718096"}),(0,l.jsx)("span",{className:"font-bold text-gray-800 text-base md:text-lg",children:p("dashboard.autopost.cropImage")}),null!=b&&null!=u&&u>1&&(0,l.jsxs)("span",{className:"text-xs text-gray-500 font-normal",children:["(",b,"/",u,")"]})]}),(0,l.jsx)("span",{className:"text-xs text-gray-400 max-w-[120px] truncate hidden md:block",children:e.name})]}),(0,l.jsxs)("div",{className:"flex flex-col items-stretch gap-3 p-3 md:p-4",children:[(0,l.jsx)("div",{className:"relative w-full h-[250px] md:h-[350px] bg-gray-900 rounded-md overflow-hidden",children:(0,l.jsx)(r.Ay,{image:y,crop:f,zoom:v,aspect:N,onCropChange:j,onZoomChange:w,onCropComplete:R,showGrid:"none"===$})}),(0,l.jsxs)("div",{children:[(0,l.jsxs)("p",{className:"text-xs text-gray-500 mb-2",children:[p("dashboard.autopost.aspectRatio")," (",p("dashboard.autopost.recommended"),")"]}),(0,l.jsx)("div",{className:"flex items-center gap-2 flex-wrap",children:g.map(e=>(0,l.jsx)(o.$,{size:"sm",onClick:()=>{C(e.ratio),w(1),j({x:0,y:0})},className:`rounded-full px-3 h-7 text-xs ${N===e.ratio?"bg-gray-800 text-white hover:bg-gray-700":"bg-gray-100 text-gray-700 hover:bg-gray-200"}`,children:e.label},e.label))})]}),(0,l.jsxs)("div",{children:[(0,l.jsx)("p",{className:"text-xs text-gray-500 mb-2",children:p("dashboard.autopost.borderMode")}),(0,l.jsx)("div",{className:"flex items-center gap-2",children:E.map(e=>(0,l.jsx)(o.$,{size:"sm",onClick:()=>S(e.value),className:`rounded-full px-3 h-7 text-xs ${$===e.value?"bg-gray-800 text-white hover:bg-gray-700":"bg-gray-100 text-gray-700 hover:bg-gray-200"}`,children:e.label},e.value))})]}),(0,l.jsxs)("div",{children:[(0,l.jsx)("p",{className:"text-xs text-gray-500 mb-1",children:"Zoom"}),(0,l.jsx)("input",{type:"range",min:1,max:3,step:.05,value:v,onCh

1ange:e=>w(Number(e.target.value)),style:{width:"100%",accentColor:"#2D3748"}})]}),(0,l.jsxs)("div",{className:"flex items-center justify-end gap-2 pt-2",children:[(0,l.jsxs)(o.$,{size:"sm",onClick:m,className:"bg-gray-100 text-gray-700 hover:bg-gray-200 px-2 md:px-4",children:[(0,l.jsx)(n.QCr,{}),(0,l.jsx)("span",{className:"ml-1 hidden md:inline",children:p("common.cancel")})]}),(0,l.jsxs)(o.$,{size:"sm",onClick:x,className:"bg-gray-100 text-gray-700 hover:bg-gray-200 px-2 md:px-4",children:[(0,l.jsx)(n.Z0P,{}),(0,l.jsx)("span",{className:"ml-1 hidden md:inline",children:p("dashboard.autopost.skipCrop")})]}),(0,l.jsxs)(o.$,{size:"sm",onClick:B,disabled:z,className:"bg-gray-800 text-white hover:bg-gray-700 px-4 flex-1 md:flex-none",children:[z?(0,l.jsx)("span",{className:"inline-block h-3 w-3 animate-spin rounded-full border-2 border-white border-t-transparent"}):(0,l.jsx)(n.CMH,{}),(0,l.jsx)("span",{className:"ml-1",children:p("dashboard.autopost.applyCrop")})]})]})]})]})})}}}]);