"use strict";(self.webpackChunkFotoReactLibrary=self.webpackChunkFotoReactLibrary||[]).push([["17"],{58485:function(e,t,n){n.r(t),n.d(t,{default:function(){return ed},LightboxEditFaceModeContext:function(){return es}});var o=n(76150),a=n(24460),r=n(28395),i=n(23930),c=n.n(i),l=n(45697),s=n.n(l),u=n(67294),d=n(94184),f=n.n(d),m=n(15593),g=n(96904),h=n(47407),p=n(79113),b=n(79905),E=function(e){var t=e.hasDiff,n=e.onCancel,o=e.onSave;return u.createElement("div",{className:"synofoto-lightbox-face-editor-toolbar"},u.createElement("div",{className:"synofoto-lightbox-face-editor-toolbar-left"},u.createElement(h.Z,{className:"synofoto-lightbox-face-editor-close-btn",iconCls:"cancel-dark-btn-icon",handler:n}),u.createElement("div",{className:"synofoto-lightbox-face-editor-title"},(0,b.n6)("lightbox","editing_face_toolbar_title"))),u.createElement("div",{className:"synofoto-lightbox-face-editor-toolbar-right"},u.createElement(p.Z,{text:(0,b.n6)("setting","save"),className:"synofoto-lightbox-face-editor-save-btn",disabled:!t,handler:o})))};E.propTypes={hasDiff:s().bool,onCancel:s().func,onSave:s().func},E.defaultProps={hasDiff:!1,onCancel:function(){},onSave:function(){}};var v=n(18939),I=n(22902),y=n(7409),x=n(35369),N=n(95281),_=n(8057),C=n(3321),w=n(10637),P=n(44537),S=n(22287),R=n(2828),T="synofoto-lightbox-person-select",M=function(e){var t=document.body.getBoundingClientRect();return t.bottom-e.bottom>294&&t.right-e.left>223?{className:"".concat(T,"-bottom-left"),menuPlacement:"bottom"}:t.bottom-e.top>294&&e.left>223?{className:"".concat(T,"-left-top"),menuPlacement:"bottom"}:e.bottom>294&&e.left>223?{className:"".concat(T,"-left-bottom"),menuPlacement:"top"}:t.bottom-e.top>294&&t.right-e.right>223?{className:"".concat(T,"-right-top"),menuPlacement:"bottom"}:e.bottom>294&&t.right-e.right>223?{className:"".concat(T,"-right-bottom"),menuPlacement:"top"}:{className:"".concat(T,"-bottom-left"),menuPlacement:"bottom"}},D=n(34774),F=function(e){var t,n,i,c,l,s=e.faceId,d=e.library,p=e.name,b=e.bottomRight,E=e.topLeft,v=e.personId,I=e.personThumbnail,x=e.defaultHovering,T=(0,m.I0)(),F=(0,u.useRef)(x),A=(0,a._)((0,u.useState)(F.current),2),O=A[0],J=A[1],L=(0,u.useCallback)(function(e){F.current=e,J(e)},[]),Z=(0,a._)((0,u.useState)(!1),2),B=Z[0],k=Z[1],H=(0,a._)((0,u.useState)(""),2),V=H[0],W=H[1],G=(0,u.useContext)(es),q=G.editFaceModeState,U=G.setEditFaceModeState,z=G.setNewCreatedFaceId,K=(0,u.useRef)(null),Y=(0,u.useRef)(null),j=(0,u.useCallback)(function(){k(!0),U(g.J4.EDITING_NAME)},[k,U]),X=(0,u.useCallback)(function(){F.current?U(g.J4.HOVERING):U(g.J4.VIEW_MODE)},[U]);(0,u.useEffect)(function(){L(x)},[L,x]),(0,u.useEffect)(function(){q!==g.J4.EDITING_NAME&&B&&k(!1),q===g.J4.CREATING_CROP&&O&&(L(!1),z(null))},[q,k,B,O,L,z]);var Q=(0,u.useCallback)(function(){if(!Y.current){var e;Y.current=M(null===(e=K.current)||void 0===e?void 0:e.getBoundingClientRect())}return Y.current},[]);(0,u.useEffect)(function(){var e=function(){Y.current=null};return window.addEventListener("resize",e),function(){window.removeEventListener("resize",e)}},[]);var $=(0,u.useCallback)(function(){return(0,o._)(function(){var e;return(0,r.Jh)(this,function(t){switch(t.label){case 0:return[4,(0,P.xh)(s)];case 1:return(e=t.sent())?W(URL.createObjectURL(e).toString()):W(""),[2]}})})()},[s]),ee=(0,u.useCallback)(function(){W((0,D.AJ)(v,I.toJS(),g.ZP.ALBUM_TYPE.PERSON,(0,S.$E)(),void 0,d))},[v,I,d]);(0,u.useEffect)(function(){v?ee():$()},[v,ee,$]);var et=(0,u.useCallback)(function(e){if(e){var t=e.isNewPerson?{personName:e.name}:{personId:e.id,personName:e.name,additional:e.additional};T((0,w.VK)((0,y._)({targetedFaceId:s},t))),X()}},[T,s,X]),en=(0,u.useCallback)(function(e){e.key===g.VD.ESC&&X()},[X]),eo=(0,u.useMemo)(function(){if(!B)return null;var e=Q(),t=e.className,n=e.menuPlacement;return u.createElement("div",{className:t,onPointerDown:function(e){e.stopPropagation()}},u.createElement("div",{className:"synofoto-lightbox-crop-image-person-select-gap",onMouseDown:function(e){e.preventDefault()}}),u.createElement(C.Z,{focusInputOnControlMouseDown:!0,blurInputOnSelect:!1,library:d,setSelectPersonHandler:et,className:"synofoto-lightbox-crop-image-person-select",onBlur:X,onKeyDown:en,menuPlacement:n,defaultInputValue:p,highlightDefault:!0}))},[B,d,p,Q,et,X,en]),ea=(0,u.useCallback)(function(){T((0,w.zj)({targetedFaceId:s})),U(g.J4.VIEW_MODE)},[T,s,U]),er={top:"".concat(100*E.get("y",0),"%"),left:"".concat(100*E.get("x",0),"%"),width:"".concat((b.get("x",0)-E.get("x",0))*100,"%"),height:"".concat((b.get("y",0)-E.get("y",0))*100,"%")},ei=f()("synofoto-face-bounding-box",{highlighted:O||B,"hidden-without-event":q===g.J4.CREATING_CROP||q===g.J4.EDITING_NAME&&!B,hidden:q===g.J4.HOVERING&&!O}),ec=(0,u.useCallback)(function(){q===g.J4.VIEW_MODE||q===g.J4.HOVERING?(L(!0),U(g.J4.HOVERING)):q===g.J4.EDITING_NAME&&L(!0)},[q,L,U]),el=(0,u.useCallback)(function(){(q===g.J4.HOVERING||q===g.J4.EDITING_NAME)&&(L(!1),z(null)),q===g.J4.HOVERING&&U(g.J4.VIEW_MODE)},[L,U,q,z]);return u.createElement("div",{className:ei,style:er,onClick:function(e){return e.stopPropagation()},onMouseEnter:ec,onMouseLeave:el,onPointerDown:function(e){var t=document.getElementById("synofoto-lightbox-image-crop-img");t&&t.dispatchEvent(new PointerEvent("pointerdown",e))},ref:K,"data-testid":"face-bounding-box-".concat(s)},(O||B)&&(t=Q().className,n=f()("synofoto-lightbox-crop-image-delete-icon",{"left-top":t.includes("right")}),i=f()("synofoto-face-bounding-box-delete-icon-background",{"left-top":t.includes("right")}),u.createElement(u.Fragment,null,u.createElement("div",{className:i}),u.createElement(h.Z,{className:n,iconCls:"close-btn-icon",handler:ea}))),O&&q===g.J4.HOVERING&&(c=Q().className,l=f()("synofoto-face-bounding-box-person-name",{unamended:!p}),u.createElement("div",{className:c,onPointerDown:function(e){e.stopPropagation()}},u.createElement("div",{className:"synofoto-lightbox-crop-image-person-select-gap"}),u.createElement("div",{className:"synofoto-face-bounding-box-person",onClick:j},V?u.createElement(_.Z,{className:"synofoto-face-bounding-box-person-image",imageHeight:40,imageWidth:40,imageUrl:V,isCover:!0,isPerson:!0}):u.createElement(N.Z,{name:p,classSuffix:"size40",className:"synofoto-face-bounding-box-person-image"}),u.createElement("div",{className:l},(0,R.R)(p))))),eo)};F.propTypes={faceId:s().oneOfType([s().number,s().string]).isRequired,library:s().string.isRequired,name:s().string,bottomRight:c().mapContains({x:s().number,y:s().number}),topLeft:c().mapContains({x:s().number,y:s().number}),personId:s().oneOfType([s().string,s().number]),personThumbnail:c().mapContains({cache_key:s().string}),defaultHovering:s().bool},F.defaultProps={name:"",bottomRight:x.default.Map({x:0,y:0}),topLeft:x.default.Map({x:0,y:0}),personId:void 0,personThumbnail:x.default.Map({cache_key:""}),defaultHovering:!1};var A=n(99745),O=function(e){var t=e.ctx,n=e.x,o=e.y,a=e.width,r=e.height,i=e.canvasWidth,c=e.canvasHeight;t.beginPath(),t.moveTo(0,0),t.lineTo(0,c),t.lineTo(i,c),t.lineTo(i,0),t.lineTo(0,0),t.lineTo(n+8,o),t.arcTo(n+a,o,n+a,o+r,8),t.arcTo(n+a,o+r,n,o+r,8),t.arcTo(n,o+r,n,o,8),t.arcTo(n,o,n+a,o,8),t.clip()},J=function(e){var t=e.library,n=(0,u.useContext)(es),o=n.editFaceModeState,r=n.newCreatedFaceId,i=(0,u.useRef)(null),c=(0,m.v9)(A.Z.getBoundingBoxList),l=f()("synofoto-lightbox-face-editor-canvas",{hidden:o!==g.J4.VIEW_MODE}),s=(0,u.useCallback)(function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},t=e.boundingBoxList,n=e.contentWidth,o=void 0===n?i.current.width:n,a=e.contentHeight,r=void 0===a?i.current.height:a;if(null==i?void 0:i.current){var c=i.current.getContext("2d");if(o!==i.current.width||r!==i.current.height?(i.current.width=Math.floor(o),i.current.height=Math.floor(r)):c.reset(),0!==t.size){var l=i.current,s=l.width,u=l.height;t.forEach(function(e){var t=e.get("face_bounding_box").toJS(),n=t.bottom_right,o=t.top_left,a=o.x,r=o.y;O({ctx:c,x:Math.floor(a*s),y:Math.floor(r*u),width:Math.floor((n.x-a)*s),height:Math.floor((n.y-r)*u),canvasWidth:s,canvasHeight:u})}),c.fillStyle="rgba(0, 0, 0, 0.4)",c.fillRect(0,0,s,u)}}},[i]),d=(0,I.Z)(function(e){var t=e.entry;t&&s({boundingBoxList:c,contentWidth:t.width,contentHeight:t.height})});return(0,u.useEffect)(function(){s({boundingBoxList:c})},[s,c]),u.createElement("div",{className:"synofoto-lightbox-face-collection"},u.createElement("canvas",{className:l,ref:i}),u.createElement(v.Z,{onResize:d},function(e){var n=e.measureRef;return u.createElement("div",{className:"synofoto-lightbox-face-collection-wrapper",ref:n},c.entrySeq().map(function(e){var n=(0,a._)(e,2),o=n[0],i=n[1];return u.createElement(F,{key:o,faceId:o,name:i.get("name"),library:t,personId:i.get("person_id"),personThumbnail:i.getIn(["additional","thumbnail"]),bottomRight:i.getIn(["face_bounding_box","bottom_right"]),topLeft:i.getIn(["face_bounding_box","top_left"]),defaultHovering:r===o})}))}))};J.propTypes={library:s().string.isRequired};var L=n(99282),Z=n(33344),B=n(82260),k=n(22758),H=function(e){var t=e.x,n=e.y;return{top_left:{x:t/100,y:n/100},bottom_right:{x:(t+e.width)/100,y:(n+e.height)/100}}},V=n(62916),W=function(e,t){var n=H(e),o=n.top_left,a=n.bottom_right,r=t.current.getBoundingClientRect();return{top:o.y*r.height+r.top,left:o.x*r.width+r.left,bottom:a.y*r.height+r.top,right:a.x*r.width+r.left}},G={imgSrc:s().string.isRequired,library:s().string.isRequired,item:c().map.isRequired,setIsImgLoaded:s().func.isRequired},q=function(e){var t=e.image,n=e.canvas,o=e.crop,a=n.getContext("2d");if(!a)throw Error("Canvas context is null");var r=window.devicePixelRatio;n.width=Math.floor(t.naturalWidth*o.width/100*r),n.height=Math.floor(t.naturalHeight*o.height/100*r),a.scale(r,r),a.imageSmoothingQuality="high";var i=t.naturalWidth*o.x/100,c=t.naturalHeight*o.y/100,l=t.naturalWidth/2,s=t.naturalHeight/2;a.save(),a.translate(-i,-c),a.translate(l,s),a.translate(-l,-s),a.drawImage(t,0,0,t.naturalWidth,t.naturalHeight,0,0,t.naturalWidth,t.naturalHeight),a.restore()},U=function(e){var t=e.imgSrc,n=e.library,i=e.item,c=e.setIsImgLoaded,l=(0,a._)((0,u.useState)(),2),s=l[0],d=l[1],p=(0,a._)((0,u.useState)(),2),b=p[0],E=p[1],v=(0,a._)((0,u.useState)(0),2),I=v[0],x=v[1],N=(0,a._)((0,u.useState)(0),2),_=N[0],S=N[1],R=(0,a._)((0,u.useState)(!0),2),T=R[0],D=R[1],F=(0,u.useRef)(null),A=(0,u.useRef)(null),O=(0,u.useRef)(null),J=(0,m.I0)(),k=i.get("id"),G=(0,u.useContext)(es),U=G.editFaceModeState,z=G.setEditFaceModeState,K=G.setNewCreatedFaceId;(0,u.useEffect)(function(){b&&A.current&&F.current&&q({image:F.current,canvas:A.current,crop:b})},[b]),(0,u.useEffect)(function(){return(0,P._B)(k),function(){(0,P._B)(k)}},[k]);var Y=function(){d(null),E(null)},j=(0,u.useCallback)(function(e){return(0,o._)(function(){var t,n,o,a,i;return(0,r.Jh)(this,function(r){switch(r.label){case 0:if(!e)return[3,3];return t="".concat(k,"-").concat(I),o=H(n=(0,y._)({},b)),E(null),[4,(0,B.Z)({image:F.current,crop:n})];case 1:return a=r.sent(),[4,(0,P.UN)(t,a)];case 2:r.sent(),i=e.isNewPerson?{personName:e.name}:{personId:e.id,personName:e.name,additional:e.additional},J((0,w.f_)((0,L._)((0,y._)({tempFaceId:t},i),{faceBoundingBox:o}))),d(null),x(I+1),K(t),z(g.J4.HOVERING),r.label=3;case 3:return[2]}})})()},[b,I,J,k,K,z]);(0,u.useEffect)(function(){U!==g.J4.CREATING_CROP&&(null==s?void 0:s.width)>0&&(null==s?void 0:s.height)>0?z(g.J4.CREATING_CROP):U!==g.J4.CREATING_CROP||(null==s?void 0:s.width)||(null==s?void 0:s.height)||z(g.J4.VIEW_MODE)},[s,U,z,K]);var X=function(){z(g.J4.VIEW_MODE),Y()},Q=function(){X(),D(!1)},$=function(e){e.key===g.VD.ESC&&X()};return u.createElement("div",{ref:O,className:"synofoto-lightbox-crop-image-outer-wrapper"},u.createElement(Z.ZP,{crop:s,aspect:1,onChange:function(e,t){return d(t)},onComplete:function(e,t){if((null==e?void 0:e.width)>1&&(null==e?void 0:e.width)<36){Y();return}E(t)},onDragStart:function(){D(!1)},onDragEnd:function(){D(!0)},className:"synofoto-lightbox-crop-image-wrapper",maxHeight:_,minHeight:36,renderSelectionAddon:function(e){if(!O.current||e.newCropIsBeingDrawn||!(null==b?void 0:b.width))return null;var t=M(W(s,F)),o=t.className,a=t.menuPlacement,r=f()("synofoto-lightbox-crop-image-delete-icon",{"left-top":o.includes("right")});return u.createElement("div",{onPointerDown:function(e){return e.stopPropagation()},className:o},u.createElement(h.Z,{className:r,iconCls:"close-btn-icon",handler:Y}),u.createElement("div",{className:"synofoto-lightbox-crop-image-person-select-gap",onMouseDown:function(e){e.preventDefault()}}),u.createElement(C.Z,{focusInputOnControlMouseDown:!0,library:n,setSelectPersonHandler:j,className:"synofoto-lightbox-crop-image-person-select",menuPortalTarget:O.current,menuPlacement:a,onBlur:Q,onKeyDown:$,menuIsOpen:T}))}},u.createElement("img",{id:"synofoto-lightbox-image-crop-img","data-testid":"lightbox-image-crop-img",className:"synofoto-lightbox-crop-image",alt:"lightbox-crop-preload",src:t,ref:F,onLoad:function(){S(.6*F.current.height),c(!0)}})),(0,V.Sx)()&&(null==F?void 0:F.current)&&!!b&&u.createElement("div",{className:"synofoto-debug-lightbox-crop-canvas"},u.createElement("canvas",{ref:A,style:{width:200,height:200}})))};U.propTypes=G;var z=(0,k.Z)(U),K=n(8768),Y=n(3799),j=n(74620),X=n(61403),Q=n(88093),$=n(14741);function ee(e){return{type:$.qA.LoadFaceBoundingBoxList,ItemAPI:Q.Z.Foto.Browse.Item,itemId:e}}function et(e){return{type:$.qA.LoadFaceBoundingBoxList,ItemAPI:Q.Z.FotoTeam.Browse.Item,itemId:e}}function en(){return{type:$.qA.SaveFaceBoundingBoxResult,uploadFaceAPIUrl:"SYNO.Foto.Upload.Face",PersonAPI:Q.Z.Foto.Browse.Person,ItemAPI:Q.Z.Foto.Browse.Item}}function eo(){return{type:$.qA.SaveFaceBoundingBoxResult,uploadFaceAPIUrl:"SYNO.FotoTeam.Upload.Face",PersonAPI:Q.Z.FotoTeam.Browse.Person,ItemAPI:Q.Z.FotoTeam.Browse.Item}}var ea=n(69253),er=n(83861),ei=n(92632),ec=n(48134),el=n(82183),es=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:g.J4.VIEW_MODE,t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:function(e){},n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:null,o=arguments.length>3&&void 0!==arguments[3]?arguments[3]:function(e){};return(0,u.createContext)({editFaceModeState:e,setEditFaceModeState:t,newCreatedFaceId:n,setNewCreatedFaceId:o})}(),eu=function(e){var t,n=e.item,i=e.albumType,c=e.passphrase,l=e.albumId,s=e.library,d=e.initImgLoaded,h=(0,u.useRef)(null),p=(0,m.I0)(),v=(0,m.v9)(A.Z.hasDiff),I=(0,j.Z)(),y=I.location,x=I.navigate,N=(0,a._)((0,u.useState)(g.J4.VIEW_MODE),2),_=N[0],C=N[1],P=(0,a._)((0,u.useState)(d),2),S=P[0],R=P[1],T=(0,a._)((0,u.useState)(null),2),M=T[0],D=T[1],F=(0,u.useMemo)(function(){return{editFaceModeState:_,setEditFaceModeState:C,newCreatedFaceId:M,setNewCreatedFaceId:D}},[_,C,M,D]),O=(0,m.v9)(er.Z.getId);(0,u.useEffect)(function(){return function(){p((0,w.e5)())}},[p]),(0,u.useEffect)(function(){S&&Y.Z.openTopToast({id:g.yX.EDIT_FACE,message:(0,b.n6)("lightbox","editing_face_top_toast"),callback:function(){(null==h?void 0:h.current)&&h.current.focus()}})},[S]),(0,u.useEffect)(function(){0!==n.get("id")&&(0,ea.f)(p,s,ee,et)(n.get("id"))},[p,n,s]);var L=function(){var e=y.pathname.replace("/".concat(K.Z.EDIT_FACE),""),t=y.state||{};t.editFace&&delete t.editFace,sessionStorage.setItem(g.OE,"true"),p((0,el.kl)(!0)),x(e,{replace:!0,state:t})},Z=function(){(0,ea.f)(p,s,en,eo)(),sessionStorage.setItem(g.OE,"true")},B=function(){return(0,o._)(function(){var e;return(0,r.Jh)(this,function(t){switch(t.label){case 0:if(!v)return L(),[2];return[4,(0,ec.Z)()];case 1:return(e=t.sent().type)===g.uE.LEAVE?L():e===g.uE.SAVE_AND_CLOSE&&Z(),[2]}})})()},k=(0,u.useCallback)(function(){_===g.J4.EDITING_NAME&&C(g.J4.VIEW_MODE)},[_,C]),H=f()("synofoto-lightbox-face-editor",{"overwrite-background":_!==g.J4.VIEW_MODE});return u.createElement("div",{className:H,onClick:k},u.createElement(E,{hasDiff:v,onCancel:B,onSave:Z}),u.createElement("div",{className:"synofoto-lightbox-face-editor-wrapper-container"},u.createElement("div",{className:"synofoto-lightbox-face-editor-wrapper",ref:h,tabIndex:-1,"data-testid":"face-editor-wrapper"},u.createElement(X.Z,{onKeyDown:function(e){e.key===g.VD.ESC&&(O===g.yX.EDIT_FACE&&Y.Z.cleanupTopToast(),B())}}),u.createElement(es.Provider,{value:F},S?u.createElement(J,{library:s}):null,u.createElement(z,{item:n,albumKey:(t={},(i===g.ZP.ALBUM_TYPE.ALBUM||i===g.ZP.ALBUM_TYPE.SHARING)&&((0,ei.CB)()?t.passphrase=c:l&&(t.albumId=l)),t),library:s,setIsImgLoaded:R})))))};eu.propTypes={item:c().map.isRequired,albumType:s().string,passphrase:s().string,albumId:s().number,library:s().string.isRequired,initImgLoaded:s().bool},eu.defaultProps={albumType:void 0,passphrase:"",albumId:void 0,initImgLoaded:!1};var ed=function(e){var t=(0,j.Z)(),n=t.location,o=t.navigate,r=(0,a._)((0,u.useState)(n.state&&n.state.editFace),2),i=r[0],c=r[1];return(0,u.useEffect)(function(){i||(o(n.pathname.replace("/".concat(K.Z.EDIT_FACE),""),{replace:!0,state:null}),c(!1))},[i,o,n.pathname]),i?u.createElement(eu,e):null}},48134:function(e,t,n){n.d(t,{Z:function(){return d}});var o=n(67294),a=n(73935),r=n(15593),i=n(42376),c=n(47524),l=n(96904),s=n(79905),u=n(94057);function d(){var e=c.Z.getStore(),t=document.body.appendChild(document.createElement("div"));return new Promise(function(n){var c={showClose:!0,showCancel:!0,showConfirm:!0,isOpen:!0,role:"alertdialog",message:(0,s.n6)("app","confirm_not_saved_leave"),closeText:(0,s.n6)("action","leave"),cancelText:(0,s.n6)("action","cancel"),confirmText:(0,s.n6)("action","save_and_close"),closeHandler:function(){n({type:l.uE.LEAVE})},cancelHandler:function(){n({type:l.uE.CANCEL})},confirmHandler:function(){n({type:l.uE.SAVE_AND_CLOSE})}};a.render(o.createElement(r.zt,{store:e},o.createElement(i.Z,c)),t)}).finally(function(){(0,u.P)(t)})}}}]);