https://pivotmedia.co.jp/_next/static/chunks/7171.dc06fa048aa2574d.js

1"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[7171],{47171:(e,t,a)=>{a.r(t),a.d(t,{AvatarUploadDialog:()=>R});var n=a(37876),r=a(73853),l=a(5746),s=a(45868),i=a(36814),o=a(42555),c=a(29910),w=a(74859),d=a(75566),u=a(63372),m=a(52246),h=a(4292),g=a(21257),x=a(93467),p=a(74359),v=a(54587),j=a.n(v),b=a(14232),f=a(59688),y=a(71970),C=a(67768),N=a(40097);let k="image/jpeg",z=async(e,t)=>{let a=await new Promise((t,a)=>{let n=new Image;n.addEventListener("load",()=>t(n)),n.addEventListener("error",()=>a(Error("画像の読み込みに失敗しました"))),n.src=e}),n=Math.min(t.width,t.height),r=t.x+(t.width-n)/2,l=t.y+(t.height-n)/2,s=Math.min(n,1024),i=document.createElement("canvas");i.width=s,i.height=s;let o=i.getContext("2d");if(!o)throw Error("Canvas コンテキストの取得に失敗しました");return o.drawImage(a,r,l,n,n,0,0,s,s),new Promise((e,t)=>{i.toBlob(a=>{a?e(a):t(Error("画像の書き出しに失敗しました"))},k,.92)})};var E=a(14694),D=a(32615);let A=e=>{let{imageSrc:t,onCropped:a,onCancel:r,isProcessing:s=!1}=e,[o,d]=(0,b.useState)({x:0,y:0}),[u,m]=(0,b.useState)(1),[g,x]=(0,b.useState)(),[p,v]=(0,b.useState)(!1),j=(0,b.useCallback)((e,t)=>{x(t)},[]),f=(0,b.useCallback)(async()=>{if(g){v(!0);try{let e=await z(t,g);await a(e)}finally{v(!1)}}},[g,t,a]),y=s||p;return(0,n.jsxs)(c.B,{spacing:"lg",children:[(0,n.jsx)("div",{className:"tw-relative tw-h-[320px] tw-w-full tw-overflow-hidden tw-rounded-md tw-bg-black",children:(0,n.jsx)(D.Ay,{image:t,crop:o,zoom:u,aspect:1,cropShape:"round",showGrid:!1,minZoom:1,maxZoom:3,zoomSpeed:.2,onCropChange:d,onZoomChange:m,onCropComplete:j})}),(0,n.jsxs)(c.B,{spacing:"xs",align:"center",children:[(0,n.jsxs)(i.z,{spacing:"md",align:"center",className:"tw-w-full",children:[(0,n.jsx)(h.In,{icon:"material-symbols:remove",className:"tw-h-5 tw-w-5 tw-shrink-0 tw-text-neutral-pale"}),(0,n.jsxs)(E.bL,{className:"tw-relative tw-flex tw-w-full tw-cursor-pointer tw-touch-none tw-select-none tw-items-center",min:1,max:3,step:.1,value:[u],onValueChange:e=>{let[t]=e;return m(t)},children:[(0,n.jsx)(E.CC,{className:"tw-relative tw-h-1 tw-w-full tw-rounded-full tw-bg-neutral-night",children:(0,n.jsx)(E.Q6,{className:"tw-absolute tw-h-full"})}),(0,n.jsx)(E.zi,{"aria-label":"拡大・縮小",className:"tw-block tw-h-5 tw-w-5 tw-rounded-full tw-bg-accent-brand-main focus:tw-outline-none"})]}),(0,n.jsx)(h.In,{icon:"material-symbols:add",className:"tw-h-5 tw-w-5 tw-shrink-0 tw-text-neutral-pale"})]}),(0,n.jsx)(w.E,{size:"S",className:"tw-text-neutral-middle",children:"拡大・縮小"})]}),(0,n.jsxs)(i.z,{spacing:"md",justify:"center",children:[(0,n.jsx)(l.$,{type:"button",variant:"dark",size:"medium",width:"auto",onClick:r,disabled:y,className:"tw-min-w-[120px]",children:"キャンセル"}),(0,n.jsx)(l.$,{type:"button",variant:"primary",size:"medium",width:"auto",onClick:f,disabled:y||!g,loading:y,className:"tw-min-w-[120px] !tw-bg-accent-brand-main !tw-bg-none",children:"保存する"})]})]})},L=["image/jpeg","image/png"],S=L.join(","),R=e=>{let{currentAvatarUrl:t,...a}=e,[l,i]=(0,b.useState)("select"),[w,m]=(0,b.useState)(),[h,g]=(0,b.useState)("avatar"),[x,v]=(0,b.useState)(!1),j=(0,b.useRef)(null),{uploadAvatar:z,isUploading:E,deleteAvatar:D,isDeleting:R}=(()=>{let e=(0,C.jE)(),t=(0,N.n)({mutationFn:async e=>{let{blob:t,originalName:a}=e,{url:n,version:r}=await (0,d.u9)({mimeType:k,originalName:a,fileSizeBytes:t.size});if(!(await fetch(n,{method:"PUT",headers:{"Content-Type":k,"x-goog-if-generation-match":"0"},body:t})).ok)throw Error("画像のアップロードに失敗しました");await (0,d.WH)(r)},meta:{invalidates:[r.e.getAvatar()]},onSuccess:async(t,a)=>{let{blob:n}=a,r=await new Promise((e,t)=>{let a=new FileReader;a.onload=()=>e(a.result),a.onerror=()=>{var e;return t(null!=(e=a.error)?e:Error("画像の読み込みに失敗しました"))},a.readAsDataURL(n)});e.setQueryData((0,y.n)().queryKey,e=>e?{...e,avatarUrl:r}:e)}}),a=(0,N.n)({mutationFn:()=>(0,d.pJ)(),meta:{invalidates:[(0,y.n)().queryKey,r.e.getAvatar()]}});return{uploadAvatar:t.mutateAsync,isUploading:t.isPending,deleteAvatar:a.mutateAsync,isDeleting:a.isPending}})(),{data:B}=(0,p.I)({queryKey:r.e.getAvatar(),queryFn:d.Y0}),I=(e=>(null==e?void 0:e.status)==="ACTIVE"||(null==e?void 0:e.status)==="PENDING")(B),M=(e=>(null==e?void 0:e.status)==="FAILED")(B),F=(0,b.useCallback)(()=>{m(e=>{e&&URL.revokeObjectURL(e)}),i("select")},[]),G=(0,b.useCallback)(e=>L.includes(e.type)?e.size>5242880?void f.oR.error("ファイルサイズは 5MB 以下にしてください"):void(g(e.name),m(URL.createObjectURL(e)),i("crop")):void f.oR.error("JPG または PNG の画像を選択してください"),[]),O=(0,b.useCallback)(async e=>{try{await z({blob:e,originalName:h}),f.oR.success("プロフィール画像を更新しました"),F(),a.close()}catch(e){f.oR.error((0,u.Bf)(e,"アップロードに失敗しました"))}},[z,h,F,a]),T=(0,b.useCallback)(async()=>{try{await D(),f.oR.success("プロフィール画像を削除しました"),i("select")}catch(e){f.oR.error((0,u.Bf)(e,"削除に失敗しました"))}},[D]);return(0,n.jsx)(o.RF,{mode:"dialog",layer:o.Of.AVATAR_UPLOAD,...a,close:()=>{F(),a.close()},children:(0,n.jsx)(o.sL,{children:(0,n.jsxs)(c.B,{spacing:"lg",children:[(0,n.jsx)(c.B,{align:"center",className:"tw-pr-10",children:(0,n.jsx)(o.N5,{asChild:!0,children:(0,n.jsx)(s.D,{as:"h2",size:"L",weight:"bold",className:"tw-text-white",children:"crop"===l?"プロフィール画像のトリミング":"confirm-delete"===l?"プロフィール画像を削除":"プロフィール画像アップロード"})})}),"crop"===l&&w?(0,n.jsx)(A,{imageSrc:w,onCropped:O,onCancel:F,isProcessing:E}

1):"confirm-delete"===l?(0,n.jsx)(P,{isDeleting:R,onCancel:()=>i("select"),onConfirm:T}):(0,n.jsx)(U,{currentAvatarUrl:t,canDelete:I,hasFailed:M,isDragging:x,onPickFile:()=>{var e;return null==(e=j.current)?void 0:e.click()},onDelete:()=>i("confirm-delete"),onDragOver:e=>{e.preventDefault(),v(!0)},onDragLeave:()=>v(!1),onDrop:e=>{var t;e.preventDefault(),v(!1);let a=null==(t=e.dataTransfer.files)?void 0:t[0];a&&G(a)}}),(0,n.jsx)("input",{ref:j,type:"file",accept:S,onChange:e=>{var t;let a=null==(t=e.target.files)?void 0:t[0];e.target.value="",a&&G(a)},className:"tw-hidden"})]})})})},P=e=>{let{isDeleting:t,onCancel:a,onConfirm:r}=e;return(0,n.jsxs)(c.B,{spacing:"lg",children:[(0,n.jsx)(w.E,{size:"M",className:"tw-text-center tw-text-neutral-pale",children:"プロフィール画像を削除してデフォルトに戻します。よろしいですか？"}),(0,n.jsxs)(i.z,{spacing:"md",justify:"center",children:[(0,n.jsx)(l.$,{type:"button",variant:"dark",size:"medium",width:"auto",onClick:a,disabled:t,className:"tw-min-w-[120px]",children:"キャンセル"}),(0,n.jsx)(l.$,{type:"button",variant:"danger",size:"medium",width:"auto",onClick:r,disabled:t,loading:t,className:"tw-min-w-[120px]",children:"削除する"})]})]})},B=e=>{let{className:t}=e;return(0,n.jsx)("svg",{viewBox:"0 0 48 48",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:t,"aria-hidden":!0,children:(0,n.jsx)("path",{d:"M24.001 25.9995V42M32.0006 33.9998L24.001 25.9995L16.0015 33.9998M8.00259 29.7982C6.51676 28.28 5.39588 26.4435 4.72485 24.4279C4.05382 22.4123 3.85024 20.2704 4.12953 18.1644C4.40883 16.0585 5.16367 14.0437 6.33688 12.2727C7.51009 10.5017 9.0709 9.02099 10.9011 7.94263C12.7313 6.86427 14.7829 6.21658 16.9004 6.04863C19.018 5.88067 21.146 6.19685 23.1233 6.97322C25.1006 7.74958 26.8752 8.96578 28.3129 10.5297C29.7506 12.0936 30.8136 13.9642 31.4213 15.9998H35.0011C36.932 15.9995 38.8118 16.6204 40.3628 17.7707C41.9137 18.921 43.0537 20.5396 43.6141 22.3876C44.1746 24.2355 44.1259 26.2147 43.4753 28.0329C42.8246 29.851 41.6065 31.4116 40.0008 32.4842",stroke:"currentColor",strokeWidth:2,strokeLinecap:"round"})})},U=e=>{let{currentAvatarUrl:t,canDelete:a,hasFailed:r,isDragging:s,onPickFile:i,onDelete:o,onDragOver:d,onDragLeave:u,onDrop:p}=e,{currentSrc:v,handleError:b}=(0,m.r)(t,(0,x.wi)(240));return(0,n.jsxs)(c.B,{spacing:"lg",align:"center",children:[(0,n.jsxs)("div",{className:"tw-relative",children:[(0,n.jsx)("div",{className:"tw-flex tw-h-[120px] tw-w-[120px] tw-items-center tw-justify-center tw-overflow-hidden tw-rounded-full tw-bg-neutral-night",children:v?(0,n.jsx)(j(),{src:v,alt:"現在のプロフィール画像",width:120,height:120,unoptimized:!0,onError:b,className:"tw-h-full tw-w-full tw-object-cover"}):(0,n.jsx)(h.In,{icon:"material-symbols:person",className:"tw-h-16 tw-w-16 tw-text-neutral-middle"})}),a&&(0,n.jsx)("button",{type:"button","aria-label":"プロフィール画像を削除",onClick:o,className:"tw-absolute tw-bottom-0 tw-right-0 tw-flex tw-h-10 tw-w-10 tw-items-center tw-justify-center tw-rounded-full tw-bg-neutral-night tw-text-white",children:(0,n.jsx)(h.In,{icon:"material-symbols:delete-outline",className:"tw-h-6 tw-w-6"})})]}),r&&(0,n.jsx)(w.E,{size:"S",className:"tw-text-center tw-text-functional-orange",children:"前回アップロードした画像の処理に失敗しました。別の画像でお試しください。"}),(0,n.jsxs)("div",{onDragOver:d,onDragLeave:u,onDrop:p,className:(0,g.cn)("tw-flex tw-w-full tw-flex-col tw-items-center tw-gap-4 tw-rounded-lg tw-border tw-border-dashed tw-bg-neutral-bright tw-px-4 tw-py-8 tw-transition-colors",s?"tw-border-brand-main":"tw-border-neutral-pale"),children:[(0,n.jsx)(B,{className:"tw-h-12 tw-w-12 tw-text-neutral-pale"}),(0,n.jsx)(w.E,{size:"M",className:"tw-text-[#374151]",children:"ここにファイルをドラッグ＆ドロップ"}),(0,n.jsx)(w.E,{size:"XS",className:"tw-text-[#9ca3af]",children:"または"}),(0,n.jsx)(l.$,{type:"button",variant:"primary",size:"medium",width:"auto",onClick:i,className:"tw-min-w-[144px] !tw-bg-accent-brand-main !tw-bg-none",children:"ファイルを選択"})]}),(0,n.jsx)(w.E,{size:"S",className:"tw-text-neutral-middle",children:"JPG、PNG対応 / 最大5MB"})]})}}}]);