https://nya.chat/packs/media_modal-CiKdfGAl.js

1import{o as e}from"./rolldown-runtime-C0FnF6B9.js";import{n as t,t as n}from"./jsx-runtime-CKeovgl0.js";import{c as r,s as i}from"./react-intl-C-SARy9S.js";import{M as a,N as o,P as s,f as c,g as l,h as u,i as d,j as f,k as p,m,p as h}from"./logo-CXYNw2nw.js";import{K as g,en as _,gi as v}from"./time-COg4FErg.js";import{m as y,s as b}from"./react-router-MZ31fgC0.js";import{t as x}from"./defineProperty-C0YrXxyM.js";import{o as S,s as C}from"./typed_functions-Bx3rrHQB.js";import{n as w}from"./modal-Cy2tCnPO.js";import{t as T}from"./classnames-CfLRLWYq.js";import{F as E,M as D,P as O,R as k,m as A,o as j}from"./poll-B-vbxn_z.js";import{t as M}from"./video-B5BGLtox.js";import{c as N,s as P}from"./card-SWNlaUHA.js";import{i as F,n as ee,r as I,t as L}from"./use-gesture-react.esm-BB-5p3vn.js";import{t as te}from"./chevron_left-D0AYmAQ6.js";import{n as ne,r as R,t as re}from"./actual_size-BpVF46OD.js";var z=e(T()),B=e(t()),V=n(),H=i({reply:{id:`status.reply`,defaultMessage:`Reply`},replyAll:{id:`status.replyAll`,defaultMessage:`Reply to thread`},reblog:{id:`status.reblog`,defaultMessage:`Boost`},reblog_private:{id:`status.reblog_private`,defaultMessage:`Share again with your followers`},cancel_reblog_private:{id:`status.cancel_reblog_private`,defaultMessage:`Unboost`},cannot_reblog:{id:`status.cannot_reblog`,defaultMessage:`This post cannot be boosted`},favourite:{id:`status.favourite`,defaultMessage:`Favorite`},removeFavourite:{id:`status.remove_favourite`,defaultMessage:`Remove from favorites`},open:{id:`status.open`,defaultMessage:`Expand this status`}}),U=({statusId:e,withOpenButton:t,onClose:n})=>{let{signedIn:i}=D(),a=r(),o=b(),s=S(),d=(0,B.useMemo)(()=>j(),[]),f=C(t=>d(t,{id:e})),p=f?.get(`account`),_=C(e=>e.compose.get(`text`).trim().length!==0),y=C(e=>e.local_settings.get(`show_reply_count`,!1)),x=(0,B.useCallback)(()=>{f&&(i?(n(!0),s(_?w({modalType:`CONFIRM_REPLY`,modalProps:{status:f}}):v(f))):s(w({modalType:`INTERACTION`,modalProps:{intent:`reply`,accountId:f.getIn([`account`,`id`]),url:f.get(`uri`)}})))},[s,f,i,_,n]),T=(0,B.useCallback)(e=>{f&&s(i?g(f.get(`id`),e.shiftKey):w({modalType:`INTERACTION`,modalProps:{intent:`favourite`,accountId:f.getIn([`account`,`id`]),url:f.get(`uri`)}}))},[s,f,i]),E=(0,B.useCallback)(e=>{e.button!==0||!f||(n(),o.push(`/@${p?.acct}/${f.get(`id`)}`))},[o,f,p,n]);if(!f)return null;let k,A,M;f.get(`in_reply_to_id`,null)===null?(k=`reply`,A=u,M=a.formatMessage(H.reply)):(k=`reply-all`,A=m,M=a.formatMessage(H.replyAll));let P=a.formatMessage(f.get(`favourited`)?H.removeFavourite:H.favourite);return(0,V.jsxs)(`div`,{className:`picture-in-picture__footer`,children:[(0,V.jsx)(O,{className:`status__action-bar-button`,title:M,icon:f.get(`in_reply_to_account_id`)===f.getIn([`account`,`id`])?`reply`:k,iconComponent:f.get(`in_reply_to_account_id`)===f.getIn([`account`,`id`])?u:A,onClick:x,counter:y?f.get(`replies_count`):void 0,obfuscateCount:!y}),(0,V.jsx)(N,{counters:!0,statusId:e}),(0,V.jsx)(O,{className:`status__action-bar-button star-icon`,animate:!0,active:f.get(`favourited`),title:P,icon:`star`,iconComponent:f.get(`favourited`)?h:c,onClick:T,counter:f.get(`favourites_count`)}),t&&(0,V.jsx)(O,{className:`status__action-bar-button`,title:a.formatMessage(H.open),icon:`external-link`,iconComponent:l,onClick:E,href:f.get(`url`)})]})},W=class extends B.PureComponent{constructor(...e){super(...e),x(this,`activeElement`,this.props.children?document.activeElement:null),x(this,`handleKeyUp`,e=>{(e.key===`Escape`||e.key===`Esc`||e.keyCode===27)&&this.props.children&&!this.props.noEsc&&this.props.onClose()}),x(this,`handleKeyDown`,e=>{if(e.key===`Tab`){let t=Array.from(this.node.querySelectorAll(`button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])`)).filter(e=>window.getComputedStyle(e).display!==`none`),n=t.indexOf(e.target),r;r=e.shiftKey?t[n-1]||t[t.length-1]:t[n+1]||t[0],r&&(r.focus(),e.stopPropagation(),e.preventDefault())}}),x(this,`getSiblings`,()=>Array(...this.node.parentElement.childNodes).filter(e=>e!==this.node)),x(this,`setRef`,e=>{this.node=e})}

1componentDidMount(){window.addEventListener(`keyup`,this.handleKeyUp,!1),window.addEventListener(`keydown`,this.handleKeyDown,!1),this.history=this.props.history||y(),this.props.children&&this._handleModalOpen()}componentDidUpdate(e){!this.props.children&&e.children&&(this.getSiblings().forEach(e=>e.removeAttribute(`inert`)),Promise.resolve().then(()=>{this.props.ignoreFocus||this.activeElement.focus({preventScroll:!0}),this.activeElement=null}).catch(console.error),this._handleModalClose()),this.props.children&&!e.children&&(this.activeElement=document.activeElement,this.getSiblings().forEach(e=>e.setAttribute(`inert`,!0)),this._handleModalOpen()),this.props.children&&this._ensureHistoryBuffer()}componentWillUnmount(){window.removeEventListener(`keyup`,this.handleKeyUp),window.removeEventListener(`keydown`,this.handleKeyDown)}_handleModalOpen(){this._modalHistoryKey=Date.now(),this.unlistenHistory=this.history.listen((e,t)=>{t===`POP`&&this.props.onClose()})}_handleModalClose(){this.unlistenHistory&&this.unlistenHistory();let{state:e}=this.history.location;e&&e.mastodonModalKey===this._modalHistoryKey&&this.history.goBack()}_ensureHistoryBuffer(){let{pathname:e,search:t,hash:n,state:r}=this.history.location;(!r||r.mastodonModalKey!==this._modalHistoryKey)&&this.history.push({pathname:e,search:t,hash:n},{...r,focusTarget:this.props.ignoreFocus!==_,mastodonModalKey:this._modalHistoryKey})}render(){let{children:e,onClose:t}=this.props,n=!!e;if(!n)return(0,V.jsx)(`div`,{className:`modal-root`,ref:this.setRef,style:{opacity:0}});let r=null;if(this.props.backgroundColor&&typeof this.props.backgroundColor==`string`)r=this.props.backgroundColor;else if(this.props.backgroundColor){let e=R({...this.props.backgroundColor,a:1},{r:0,g:0,b:0,a:.7});r=`rgb(${e.r}, ${e.g}, ${e.b})`}return(0,V.jsx)(`div`,{className:`modal-root`,ref:this.setRef,children:(0,V.jsxs)(`div`,{style:{pointerEvents:n?`auto`:`none`},children:[(0,V.jsx)(`div`,{role:`presentation`,className:`modal-root__overlay`,onClick:t,style:{backgroundColor:r}}),(0,V.jsx)(`div`,{role:`dialog`,className:`modal-root__container`,children:e})]})})}},G=P(W),K=(0,B.forwardRef)(({src:e,alt:t,lang:n,width:r,height:i,onClick:a,onMouseDown:o,onTouchStart:s},c)=>{let[l,u]=(0,B.useState)(!0),d=(0,B.useCallback)(()=>{u(!1)},[u]),f=(0,B.useCallback)(e=>{e.stopPropagation(),a?.(e)},[a]);return(0,V.jsxs)(`div`,{className:`gifv`,children:[l&&(0,V.jsx)(`canvas`,{role:`button`,tabIndex:0,"aria-label":t,lang:n,onClick:f}),(0,V.jsx)(`video`,{ref:c,src:e,role:`button`,tabIndex:0,"aria-label":t,lang:n,width:r,height:i,muted:!0,loop:!0,autoPlay:!0,playsInline:!0,onClick:f,onLoadedData:d,onMouseDown:o,onTouchStart:s})]})});K.displayName=`GIFV`;var q=`0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz#$%*+,-.:;=?@[]^_{|}~`.split(``),ie=e=>{let t=0,n;for(let r of e)n=q.indexOf(r),t=t*83+n;return t},ae=e=>({r:Math.max(0,e>>16),g:Math.max(0,e>>8&255),b:Math.max(0,e&255)}),J=e=>e?ae(ie(e.slice(2,6))):null,Y=1,oe=4,se=250,ce=(e,t,n,r)=>{let{clientWidth:i,clientHeight:a}=e,{offsetWidth:o,offsetHeight:s}=t;return{containerWidth:i,containerHeight:a,imageWidth:o,imageHeight:s,initialScale:(n/r<i/a?`width`:`height`)==`width`?Math.min(i,n)/o:Math.min(a,r)/s}},le=L([I,F]),ue=(e,t)=>{if(!e||t===Y)return{left:-1/0,right:1/0,top:-1/0,bottom:1/0};let{containerWidth:n,containerHeight:r,imageWidth:i,imageHeight:a}=e;return{left:-Math.max(i*t-n,0)/2,right:Math.max(i*t-n,0)/2,top:-Math.max(a*t-r,0)/2,bottom:Math.max(a*t-r,0)/2}},X=({alt:e=``,lang:t=``,src:n,width:r,height:i,onClick:c,onDoubleClick:l,onClose:u,onZoomChange:d,zoomedIn:p,blurhash:m})=>{(0,B.useEffect)(()=>{let e=e=>{e.preventDefault()};return document.addEventListener(`gesturestart`,e),document.addEventListener(`gesturechange`,e),document.addEventListener(`gestureend`,e),()=>{document.removeEventListener(`gesturestart`,e),document.removeEventListener(`gesturechange`,e),document.removeEventListener(`gestureend`,e)}},[]);let[h,g]=(0,B.useState)(!1),[_,v]=(0,B.useState)(!1),[y,b]=(0,B.useState)(!1),x=(0,B.useRef)(null),S=(0,B.useRef)(null),C=(0,B.useRef)(null),w=(0,B.useRef)(null),[T,E]=s(()=>({x:0,y:0,scale:1,onRest:{scale({value:e}){d&&d(e!==Y)}}}));le({onDrag({pinching:e,cancel:t,active:n,last:r,offset:[i,o],velocity:[,s],direction:[,d],tap:f}){if(f){C.current?(clearTimeout(C.current),C.current=null,l?.()):C.current=setTimeout(()=>{c?.(),C.current=null},se);return}if(!p){if(r){(s>.5&&d!==0||Math.abs(o)>150)&&u?.(),E.start({y:0,config:a.wobbly});return}if(d!==0){E.start({y:o,immediate:!0});return}t();return}if(e){t();return}g(!!n),E.start({x:i,y:o})},onPinch({origin:[e,t],first:n,movement:[r],offset:[i],memo:a}

1){if(!S.current)return;if(n){let{width:n,height:r,x:i,y:o}=S.current.getBoundingClientRect(),s=e-(i+n/2),c=t-(o+r/2);a=[T.x.get(),T.y.get(),s,c]}let o=a[0]-(r-1)*a[2],s=a[1]-(r-1)*a[3];return E.start({scale:i,x:o,y:s}),a}},{target:S,drag:{from:()=>[T.x.get(),T.y.get()],filterTaps:!0,bounds:()=>ue(w.current,T.scale.get()),rubberband:!0},pinch:{scaleBounds:{min:Y,max:oe},rubberband:!0}}),(0,B.useEffect)(()=>{!_||!x.current||!S.current||(w.current=ce(x.current,S.current,r,i),p?T.scale.get()===Y&&E.start({scale:w.current.initialScale,x:0,y:0}):E.start({scale:Y,x:0,y:0}))},[E,T.scale,p,r,i,_]);let D=(0,B.useCallback)(e=>{e.preventDefault(),e.stopPropagation()},[]),O=(0,B.useCallback)(()=>{v(!0)},[v]),j=(0,B.useCallback)(()=>{b(!0)},[b]),M=o([T.scale,T.x,T.y],(e,t,n)=>`matrix(${e}, 0, 0, ${e}, ${t}, ${n})`);return(0,V.jsxs)(`div`,{className:(0,z.default)(`zoomable-image`,{"zoomable-image--zoomed-in":p,"zoomable-image--error":y,"zoomable-image--dragging":h}),ref:x,children:[!_&&m&&(0,V.jsx)(`div`,{className:`zoomable-image__preview`,style:{aspectRatio:`${r}/${i}`,height:`min(${i}px, 100%)`},children:(0,V.jsx)(A,{hash:m})}),(0,V.jsx)(f.img,{style:{transform:M},ref:S,alt:e,lang:t,src:n,width:r,height:i,draggable:!1,onLoad:O,onError:j,onClickCapture:D}),!_&&!y&&(0,V.jsx)(k,{})]})},Z=i({close:{id:`lightbox.close`,defaultMessage:`Close`},previous:{id:`lightbox.previous`,defaultMessage:`Previous`},next:{id:`lightbox.next`,defaultMessage:`Next`},zoomIn:{id:`lightbox.zoom_in`,defaultMessage:`Zoom to actual size`},zoomOut:{id:`lightbox.zoom_out`,defaultMessage:`Zoom to fit`}}),de=400,Q=getComputedStyle(document.body).direction!==`rtl`,$=(0,B.forwardRef)(({media:e,onClose:t,index:n,lang:i,currentTime:a,autoPlay:o,volume:c,statusId:l,onChangeBackgroundColor:u},m)=>{let[h,g]=(0,B.useState)(n),[_,v]=(0,B.useState)(!1),y=e.get(h),b=Q?`-`:``,[x,S]=s(()=>({x:`${b}${h*100}%`})),C=(0,B.useCallback)((t,n=!1)=>{t<0?t=e.size+t:t>=e.size&&(t%=e.size),g(t),v(!1),n&&S.start({x:`calc(${b}${t*100}% + 0px)`})},[S,e.size,b]),w=(0,B.useCallback)(()=>{C(h-1,!0)},[C,h]),T=(0,B.useCallback)(()=>{C(h+1,!0)},[C,h]),D=(0,B.useCallback)(e=>{let t=Q?`ArrowLeft`:`ArrowRight`,n=Q?`ArrowRight`:`ArrowLeft`;e.key===t?(w(),e.preventDefault(),e.stopPropagation()):e.key===n&&(T(),e.preventDefault(),e.stopPropagation())},[T,w]),k=ee(({active:e,movement:[t],direction:[n],cancel:r})=>{if(_)return;e&&Math.abs(t)>Math.min(window.innerWidth/4,de)&&(C(Q?h-n:h+n),r());let i=e?t:0,a=Q?`+`:`-`;S.start({x:`calc(${b}${h*100}% ${a} ${i}px)`})},{pointer:{capture:!1}});(0,B.useEffect)(()=>(window.addEventListener(`keydown`,D,!1),()=>{window.removeEventListener(`keydown`,D)}),[D]),(0,B.useEffect)(()=>{let e=y?.get(`blurhash`);if(e){let t=J(e);t&&u(t)}return()=>{u(null)}},[y,u]);let[A,j]=(0,B.useState)({width:0,height:0}),N=(0,B.useCallback)(e=>{typeof m==`function`?m(e):m&&(m.current=e),e?.clientWidth&&e.clientHeight&&j({width:e.clientWidth,height:e.clientHeight})},[m]),P=y?.get(`type`)===`image`&&(y.getIn([`meta`,`original`,`width`])>A.width||y.getIn([`meta`,`original`,`height`])>A.height),F=(0,B.useCallback)(()=>{v(e=>!e)},[]),[I,L]=(0,B.useState)(!1),R=(0,B.useCallback)(()=>{L(e=>!e)},[]),H=(0,B.useMemo)(()=>e.map((e,n)=>{let r=e.get(`url`),s=e.get(`blurhash`),l=e.getIn([`meta`,`original`,`width`],0),u=e.getIn([`meta`,`original`,`height`],0),d=e.getIn([`translation`,`description`],e.get(`description`));return e.get(`type`)===`image`?(0,V.jsx)(X,{src:r,blurhash:s,width:l,height:u,alt:d,lang:i,onClick:R,onDoubleClick:F,onClose:t,onZoomChange:v,zoomedIn:_&&n===h},r):e.get(`type`)===`video`?(0,V.jsx)(M,{preview:e.get(`preview_url`),blurhash:s,src:r,frameRate:e.getIn([`meta`,`original`,`frame_rate`]),aspectRatio:`${l} / ${u}`,startTime:a??0,startPlaying:o??!1,startVolume:c??1,onCloseVideo:t,detailed:!0,alt:d,lang:i},r):e.get(`type`)===`gifv`?(0,V.jsx)(K,{src:r,alt:d,lang:i,onClick:R},r):null}),[o,a,R,F,h,i,e,t,c,_]),W=r(),G=e.size>1&&(0,V.jsx)(`button`,{className:`media-modal__nav media-modal__nav--prev`,onClick:w,"aria-label":W.formatMessage(Z.previous),type:`button`,children:(0,V.jsx)(E,{id:`chevron-left`,icon:te})}),q=e.size>1&&(0,V.jsx)(`button`,{className:`media-modal__nav  media-modal__nav--next`,onClick:T,"aria-label":W.formatMessage(Z.next),type:`button`,children:(0,V.jsx)(E,{id:`chevron-right`,icon:d})});return(0,V.jsxs)(`div`,{...k(),className:`modal-root__modal media-modal`,ref:N,children:[(0,V.jsx)(f.div,{style:x,className:`media-modal__closer`,role:`presentation`,onClick:t,children:H}),(0,V.jsxs)(`div`,{className:(0,z.default)(`media-modal__navigation`,{"media-modal__navigation--hidden":I}),children:[(0,V.jsxs)(`div`,{className:`media-modal__buttons`,children:[P&&(0,V.jsx)(O,{title:W.formatMessage(_?Z.zoomOut:Z.zoomIn),icon:``,iconComponent:_?ne:re,onClick:F}),(0,V.jsx)(O,{title:W.formatMessage(Z.close),icon:`times`,iconComponent:p,onClick:t})]}),G,q,(0,V.jsxs)(`div`,{className:`media-modal__overlay`,children:[(0,V.jsx)(fe,{itemsCount:e.size,index:h,onChangeIndex:C}),l&&(0,V.jsx)(U,{statusId:l,withOpenButton:!0,onClose:t})]})]})]})});$.displayName=`MediaModal`;var fe=({itemsCount:e,index:t,onChangeIndex:n})=>{let r=(0,B.useCallback)(e=>()=>{n(e)},[n]);return e<=1?null:(0,V.jsx)(`ul`,{className:`media-modal__pagination`,children:Array.from({length:e}).map((e,n)=>(0,V.jsx)(`button`,{className:(0,z.default)(`media-modal__page-dot`,{active:n===t}),onClick:r(n),type:`button`,children:n+1},n))})};export{G as a,K as i,X as n,U as o,J as r,$ as t};
2//# sourceMappingURL=media_modal-CiKdfGAl.js.map