"use strict";(globalThis.webpackChunkweb_stories_wp=globalThis.webpackChunkweb_stories_wp||[]).push([[6736],{42607:(e,t,n)=>{n.r(t),n.d(t,{default:()=>Ae});var a=n(67294),r=(n(41792),n(69845)),i=n(72443),o=n(21530),l=n(12788),s=n(84967),c=n(36823),d=n(84705),u=n(55571),p=n(3961),m=n(46315),g=n(12161),h=n(59470),f=n(28395),y=n(80852),b=n(28154),w=n(4063),E=n(60641),_=n(36382),C=n(71028),x=n(6992),k=n(72165),v=n(25733),I=n(74515),T=n(69812),M=n(30540);const D=function DeleteDialog(e){let{mediaId:t,type:n,onClose:i}=e;const{actions:{deleteMedia:o}}=(0,v.useAPI)(),{showSnackbar:l}=(0,C.useSnackbar)(),{deleteMediaElement:s}=(0,I.useLocalMedia)((e=>{let{actions:{deleteMediaElement:t}}=e;return{deleteMediaElement:t}})),{deleteElementsByResourceId:d}=(0,T.useStory)((e=>({deleteElementsByResourceId:e.actions.deleteElementsByResourceId}))),u=(0,r.useCallback)((async()=>{i();try{await o(t),s({id:t}),d({id:t})}catch(e){(0,_.trackError)("local_media_deletion",e.message),l({message:(0,c.__)("Failed to delete media item.","web-stories"),dismissible:!0})}}),[o,s,d,t,i,l]),p=(0,c.__)("Delete Image?","web-stories"),m=(0,c.__)("Delete Video?","web-stories"),g=(0,c.__)("You are about to permanently delete this image from your site. The image will appear broken in any content that uses it.","web-stories"),h=(0,c.__)("You are about to permanently delete this video from your site. The video will appear broken in any content that uses it.","web-stories");return a.createElement(M.default,{isOpen:!0,onClose:i,title:"image"===n?p:m,secondaryText:(0,c.__)("Cancel","web-stories"),onPrimary:u,primaryText:(0,c.__)("Delete","web-stories"),maxWidth:512},a.createElement(x.Text.Paragraph,{size:k.TextSize.Small},"image"===n?g:h),a.createElement(x.Text.Paragraph,{size:k.TextSize.Small,isBold:!0},(0,c.__)("This action can not be undone.","web-stories")))};var S=n(36313),R=n(83057),P=n(10693),j=n(13070);const N=(0,l.css)(["display:flex;width:","px;margin-right:28px;"],152),O=l.default.img.withConfig({displayName:"mediaEditDialog__Image",componentId:"sc-ctku7j-0"})(["",""],N),B=l.default.video.withConfig({displayName:"mediaEditDialog__Video",componentId:"sc-ctku7j-1"})(["",""],N),z=l.default.div.withConfig({displayName:"mediaEditDialog__DialogBody",componentId:"sc-ctku7j-2"})(["display:flex;justify-content:left;align-items:flex-start;"]),L=l.default.div.withConfig({displayName:"mediaEditDialog__MetadataTextContainer",componentId:"sc-ctku7j-3"})(["display:flex;flex-direction:column;margin:0 4px;"]),$=(0,l.default)(x.Text.Span).withConfig({displayName:"mediaEditDialog__DateText",componentId:"sc-ctku7j-4"})(["margin-bottom:8px;"]),A=(0,l.default)(j.default).withConfig({displayName:"mediaEditDialog__AssistiveTextArea",componentId:"sc-ctku7j-5"})(["margin:20px 0 4px;"]),V=(0,c.__)("Edit Image","web-stories"),q=(0,c.__)("Edit Video","web-stories"),U=(0,c.__)("Assistive text","web-stories"),F=(0,c.__)("Video description","web-stories"),W=(0,c.__)("Describe the appearance and function of the image. Leave empty if the image is purely decorative.","web-stories"),G=(0,c.__)("For indexability and accessibility. Include any burned-in text inside the video.","web-stories");const X=function MediaEditDialog(e){let{resource:t,onClose:n}=e;const{id:i,src:o,creationDate:l,width:s,height:d,type:u,alt:p,poster:m,mimeType:g}=t,{actions:{updateMedia:h}}=(0,v.useAPI)(),{updateMediaElement:f}=(0,I.useLocalMedia)((e=>{let{actions:{updateMediaElement:t}}=e;return{updateMediaElement:t}})),{showSnackbar:y}=(0,C.useSnackbar)(),[b,w]=(0,r.useState)(p),E=(0,S.toDate)(l),T=(0,r.useCallback)((e=>{w(e.target.value)}),[]),D=(0,r.useCallback)((async()=>{try{await h(i,{altText:b}),f({id:i,data:{alt:b}}),n()}catch(e){(0,_.trackError)("local_media_edit",e.message),y({message:(0,c.__)("Failed to update, please try again.","web-stories"),dismissible:!0})}}),[b,i,n,y,h,f]),j="image"===u;return a.createElement(M.default,{isOpen:!0,onClose:n,title:j?V:q,secondaryText:(0,c.__)("Cancel","web-stories"),onPrimary:D,primaryText:(0,c.__)("Save","web-stories")},a.createElement(z,null,"image"===u?a.createElement(O,{src:(0,P.default)(152,t),alt:p,loading:"lazy",crossOrigin:"anonymous",decoding:"async"}):a.createElement(B,{key:o,crossOrigin:"anonymous",poster:m,preload:"metadata",muted:!0},a.createElement("source",{src:o,type:g})),a.createElement(L,null,(0,S.isValid)(E)&&a.createElement($,{size:k.TextSize.XSmall},(0,R.default)(/* translators: %s: upload date of media item. */
(0,c.__)("Uploaded: %s","web-stories"),(0,S.formatDate)(l))),a.createElement(x.Text.Span,{size:k.TextSize.Small},(0,R.default)(/* translators: 1: image width. 2: image height. */
(0,c.__)("%1$d x %2$d pixels","web-stories"),s,d)),a.createElement(A,{value:b,"aria-label":j?U:F,type:"text",placeholder:j?U:F,onChange:T}),a.createElement(x.Text.Paragraph,{size:k.TextSize.Small},j?W:G))))},H=(0,l.default)(w.ActionButton).withConfig({displayName:"dropDownMenu__MoreButton",componentId:"sc-1eq0xdj-0"})(["top:4px;right:4px;"]),Y=l.default.div.withConfig({displayName:"dropDownMenu__DropDownContainer",componentId:"sc-1eq0xdj-1"})(["margin-top:10px;"]),K=l.default.div.withConfig({displayName:"dropDownMenu__MenuContainer",componentId:"sc-1eq0xdj-2"})(["z-index:1;"]),J=(0,l.css)(["min-width:160px;margin-top:0;li{display:block;}"]),Q="edit",Z="delete";const ee=function DropDownMenu(e){let{resource:t,display:n,isMenuOpen:i,onMenuOpen:o,onMenuCancelled:l,onMenuSelected:s,setParentActive:d=m.noop}=e;const u=[{options:[{label:(0,c.__)("Edit meta data","web-stories"),value:Q},{label:(0,c.__)("Delete from library","web-stories"),value:Z}]}],[w,_]=(0,r.useState)(!1),[C,x]=(0,r.useState)(!1),k=(0,r.useRef)(),v=(0,r.useCallback)((()=>{l(),k.current?.focus(),d()}),[l,d]),{canTranscodeResource:I}=(0,b.useLocalMedia)((e=>{let{state:{canTranscodeResource:t}}=e;return{canTranscodeResource:t}})),T=(0,r.useCallback)((()=>{_(!1),v()}),[_,v]),M=(0,r.useCallback)((()=>{x(!1),v()}),[x,v]),S=(0,r.useMemo)((()=>`list-${(0,p.default)()}`),[]),R=(0,r.useMemo)((()=>`button-${(0,p.default)()}`),[]);return I(t)&&a.createElement(K,null,k.current&&a.createElement(E.default,{target:k.current}),a.createElement(H,{ref:k,onClick:o,"aria-label":(0,c.__)("More","web-stories"),"aria-pressed":i,"aria-haspopup":!0,"aria-expanded":i,"aria-owns":i?S:null,id:R,$display:n,tabIndex:n||i?0:-1},a.createElement(g.default,null)),(n||i)&&a.createElement(h.default,{anchor:k,placement:f.Placement.BottomStart,isOpen:i},a.createElement(Y,null,a.createElement(y.default,{parentId:R,listId:S,handleMenuItemSelect:(e,t)=>{switch(s(),t){case Q:x(!0);break;case Z:_(!0)}},groups:u,onDismissMenu:v,hasMenuRole:!0,menuStylesOverride:J}))),w&&a.createElement(D,{mediaId:t.id,type:t.type,onClose:T}),C&&a.createElement(X,{resource:t,onClose:M}))};var te=n(37257),ne=n(91960);const ae=(0,l.default)(x.Text.Span).withConfig({displayName:"attribution__StyledText",componentId:"sc-dg18hp-0"})(["color:",";"],(e=>{let{theme:t,active:n}=e;return(0,s.rgba)(t.colors.standard.white,n?1:.6)})),re=l.default.a.withConfig({displayName:"attribution__Link",componentId:"sc-dg18hp-1"})(["display:block;position:absolute;left:0;bottom:0;width:100%;padding:8px;background-color:",";text-overflow:ellipsis;overflow:hidden;white-space:nowrap;text-decoration:none;"],(e=>{let{theme:t,active:n}=e;return(0,s.rgba)(t.colors.bg.primary,n?.8:.6)})),ie=e=>{let{author:t,url:n}=e;const[i,o]=(0,r.useState)(!1),l=()=>o(!0),s=()=>o(!1);return a.createElement(re,{title:t,active:i,onPointerEnter:l,onFocus:l,onPointerLeave:s,onBlur:s,href:n,target:"_blank",rel:"noreferrer"},a.createElement(ae,{size:k.TextSize.XSmall},t))};var oe=n(5101),le=n(65742),se=n(39604),ce=n(37945),de=n(17989);function ue(){return ue=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},ue.apply(this,arguments)}const pe=(0,l.css)(["width:100%;cursor:pointer;transition:0.2s transform,0.15s opacity;border-radius:4px;opacity:0;object-fit:cover;"]),me=l.default.img.withConfig({displayName:"innerElement__Image",componentId:"sc-qkk7ov-0"})(["",""],pe),ge=l.default.video.withConfig({displayName:"innerElement__Video",componentId:"sc-qkk7ov-1"})([""," ",""],pe,(e=>{let{showWithoutDelay:t}=e;return t?"opacity: 1;":""})),he=l.default.div.withConfig({displayName:"innerElement__DurationWrapper",componentId:"sc-qkk7ov-2"})(["position:absolute;bottom:8px;left:8px;background:",";border-radius:100px;height:18px;padding:0 6px;"],(e=>{let{theme:t}=e;return t.colors.opacity.black64})),fe=l.default.div.withConfig({displayName:"innerElement__MuteWrapper",componentId:"sc-qkk7ov-3"})(["position:absolute;bottom:8px;right:8px;height:24px;width:24px;background:",";color:",";border-radius:100px;"],(e=>{let{theme:t}=e;return t.colors.opacity.black64}),(e=>{let{theme:t}=e;return t.colors.fg.primary})),ye=(0,l.default)(x.Text.Span).attrs({size:k.TextSize.XSmall}).withConfig({displayName:"innerElement__Duration",componentId:"sc-qkk7ov-4"})(["color:",";display:block;"],(e=>{let{theme:t}=e;return t.colors.fg.primary})),be=l.default.img.withConfig({displayName:"innerElement__CloneImg",componentId:"sc-qkk7ov-5"})(["opacity:0;width:",";height:",";position:absolute;"],(e=>{let{width:t}=e;return`${t}px`}),(e=>{let{height:t}=e;return`${t}px`}));const we=(0,r.memo)((function InnerElement(e){let{type:t,src:n,resource:i,alt:o,width:l,height:s,onClick:c,onLoad:d=m.noop,showVideoDetail:u,mediaElement:p,active:g,isMuted:h}=e;const f=(0,r.useRef)(null),y=(0,r.useRef)(null),{handleDrag:b,handleDrop:w}=(0,ce.useDropTargets)((e=>{let{state:t,actions:n}=e;return{handleDrag:n.handleDrag,handleDrop:n.handleDrop,dropTargets:t.dropTargets,activeDropTargetId:t.activeDropTargetId}}),((e,t)=>{if(y.current)return!1;if(null===y.current)return y.current=!1,!1;if(e?.dropTargets&&t?.dropTargets){const n=Object.keys(e.dropTargets),a=Object.keys(t.dropTargets);if(n.join()!==a.join())return!1}return e?.activeDropTargetId===t?.activeDropTargetId})),{setDraggingResource:E}=(0,ce.useDropTargets)((e=>{let{actions:{setDraggingResource:t}}=e;return{setDraggingResource:t}}));let _;(0,r.useEffect)((()=>{i.poster&&(f.current=i.poster)}),[i.poster]);const{lengthFormatted:C,poster:x,mimeType:k}=i,v=x??f.current,T=v||(0,P.default)(l,i),M={width:l,height:s,alt:o,crossOrigin:"anonymous"},D={...M,onLoad:()=>{p.current&&(p.current.style.opacity=1),d()},loading:"lazy",decoding:"async",draggable:!1},S={...D,onLoad:void 0},R={...D,src:T},j={...M,title:o,alt:null,loop:t===I.ContentType.Gif,muted:!0,preload:"metadata",poster:v,showWithoutDelay:g};if(t===I.ContentType.Image||t===I.ContentType.Sticker?(_=a.createElement(me,ue({key:n},R,{ref:p})),S.src=T):[I.ContentType.Video,I.ContentType.Gif].includes(t)&&(_=a.createElement(a.Fragment,null,x&&!g?a.createElement(me,ue({key:n},R,{ref:p})):a.createElement(ge,ue({key:n},j,{ref:p}),t===I.ContentType.Gif?i.output.src&&a.createElement("source",{src:i.output.src,type:i.output.mimeType}):a.createElement("source",{src:(0,P.default)(l,i),type:k})),t===I.ContentType.Video&&u&&C&&a.createElement(he,null,a.createElement(ye,null,C)),t===I.ContentType.Video&&u&&h&&a.createElement(fe,null,a.createElement(le.default,null))),S.src=x),!_)throw new Error("Invalid media element type.");const N=t===I.ContentType.Image?T:x;return a.createElement(a.Fragment,null,_,g&&a.createElement(de.default,{showIcon:!1}),a.createElement(se.default,{active:g,handleDrag:e=>{y.current||(oe.default.set(i.id,{url:T,type:"cached"}),E(i),y.current=!0),b(i,e.clientX,e.clientY)},handleDragEnd:()=>{w(i),y.current=!1},type:i.type,elementProps:{resource:i},onClick:c(N),cloneElement:be,cloneProps:S}))}));var Ee=n(58979),_e=n(25941),Ce=n(88348),xe=n(37075),ke=n(8092),ve=n(51093);const Ie=l.default.div.withConfig({displayName:"insertionMenu__DropDownContainer",componentId:"sc-xjd4tf-0"})(["margin-top:10px;min-width:160px;"]),Te=l.default.div.withConfig({displayName:"insertionMenu__MenuContainer",componentId:"sc-xjd4tf-1"})(["z-index:1;"]),Me=(0,l.css)(["min-width:160px;margin-top:0;li{display:block;}"]),De="insert",Se="addBackground";const Re=function InsertionMenu(e){let{resource:t,display:n,onInsert:i,width:o,index:l,isLocal:s=!1,setParentActive:d=m.noop,setParentInactive:u=m.noop}=e;const g=(0,r.useRef)(),[b,E]=(0,r.useState)(!1),_=(0,r.useCallback)((e=>{e.stopPropagation(),E(!0)}),[]),C=(0,r.useCallback)((()=>{E(!1),g.current?.focus(),d()}),[d]),{currentBackgroundId:x,combineElements:k}=(0,xe.default)((e=>({currentBackgroundId:e.state.currentPage?.elements?.[0]?.id,combineElements:e.actions.combineElements}))),{type:v,poster:I}=t,T=[{options:[{label:["image","gif"].includes(v)?(0,c.__)("Insert image","web-stories"):(0,c.__)("Insert video","web-stories"),value:De},{label:(0,c.__)("Add as background","web-stories"),value:Se}]}];(0,ke.default)({ref:g},[],3);const M=(0,ve.default)();(0,Ee.useKeyDownEffect)(s?null:g,"tab",M,[M]);const D=(0,r.useMemo)((()=>`list-${(0,p.default)()}`),[]),S=(0,r.useMemo)((()=>`button-${(0,p.default)()}`),[]);return a.createElement(Te,null,a.createElement(w.ActionButton,{ref:g,onClick:_,"aria-label":(0,c.__)("Open insertion menu","web-stories"),"aria-pressed":b,"aria-haspopup":!0,"aria-expanded":b,"aria-owns":b?D:null,id:S,$display:n,tabIndex:0===l?0:-1},a.createElement(_e.default,null)),b&&a.createElement(h.default,{anchor:g,placement:f.Placement.BottomStart,isOpen:b},a.createElement(Ie,null,a.createElement(y.default,{parentId:S,listId:D,handleMenuItemSelect:(e,n)=>{const a=I||(0,P.default)(o,t),r=(0,Ce.default)(t.type,{resource:t});switch(E(!1),n){case De:i(t,a);break;case Se:k({firstElement:r,secondId:x})}u()},groups:T,onDismissMenu:C,hasMenuRole:!0,menuStylesOverride:Me}))))};function Pe(){return Pe=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},Pe.apply(this,arguments)}const je=600,Ne=l.default.div.attrs((e=>({style:{width:e.width+"px",height:e.height+"px",margin:e.margin,backgroundColor:"transparent",color:"inherit",border:"none",padding:0}}))).withConfig({displayName:"mediaElement__Container",componentId:"sc-n7038j-0"})([""]),Oe=l.default.div.withConfig({displayName:"mediaElement__InnerContainer",componentId:"sc-n7038j-1"})(["position:relative;display:flex;margin-bottom:10px;background-color:",";"],(e=>{let{theme:t,$baseColor:n}=e;return n||(0,s.rgba)(t.colors.standard.black,.3)})),Be=(0,l.default)(u.Blurhash).withConfig({displayName:"mediaElement__BlurhashContainer",componentId:"sc-n7038j-2"})(["position:absolute !important;top:0;left:0;"]);function Element(e){let{index:t,resource:n,width:i,height:o,margin:l,onInsert:s,providerType:u,canEditMedia:p}=e;const{id:m,src:g,type:h,width:f,height:y,alt:b,isMuted:w,baseColor:E,blurHash:_}=n,{isCurrentResourceProcessing:C,isCurrentResourceUploading:x}=(0,I.useLocalMedia)((e=>{let{state:t}=e;return{isCurrentResourceProcessing:t.isCurrentResourceProcessing,isCurrentResourceUploading:t.isCurrentResourceUploading}})),k=f&&y?f/y:1,v=i||o/k,T=o||v/k,M=(0,r.useRef)(),[D,S]=(0,r.useState)(!0),[R,P]=(0,r.useState)(!1),[j,N]=(0,r.useState)(!1),[O,B]=(0,r.useState)(!1),z=(0,r.useCallback)((()=>P(!0)),[]),L=(0,r.useCallback)((()=>P(!1)),[]),$=(0,r.useCallback)((()=>N(!0)),[]),A=(0,r.useCallback)((()=>N(!1)),[]),V=(0,r.useCallback)((()=>{N(!1),P(!1)}),[]),[q,U]=(0,r.useState)(null),F=(0,r.useRef)(R);F.current=R,(0,r.useEffect)((()=>{if(![I.ContentType.Video,I.ContentType.Gif].includes(h))return;const e=()=>{null!==q&&(clearTimeout(q),U(null))};if(!j)if(R){if(S(!1),M.current&&null===q){const e=setTimeout((()=>{F.current&&g&&M.current.play().catch(ne.noop)}),je);U(e)}}else S(!0),e(),M.current&&M.current?.pause&&g&&(M.current.pause(),M.current.currentTime=0);return e}),[j,R,h,g,q,U,F]);const W=(0,r.useCallback)((e=>()=>{s(n,e)}),[s,n]),G=R&&n.attribution?.author?.displayName&&n.attribution?.author?.url&&a.createElement(ie,{author:n.attribution.author.displayName,url:n.attribution.author.url}),X=(0,r.useRef)(),H=(0,r.useCallback)((()=>B(!0)),[]),Y=!O&&!R;return a.createElement(Ne,{ref:X,"data-testid":`mediaElement-${h}`,"data-id":m,className:"mediaElement",width:v,height:T,margin:l,onPointerEnter:z,onFocus:z,onPointerLeave:L,onBlur:L,tabIndex:"-1"},a.createElement(Oe,{$baseColor:Y&&E},a.createElement(we,{type:h,src:g,mediaElement:M,resource:n,alt:b,isMuted:w,width:v,height:T,onClick:W,onLoad:H,showVideoDetail:D,active:R}),G,Y&&_&&a.createElement(Be,{hash:_,width:v,height:T,punch:1}),(!g||C(m)||x(m))&&a.createElement(d.LoadingBar,{loadingMessage:(0,c.__)("Uploading media…","web-stories")}),a.createElement(Re,{resource:n,display:R,onInsert:s,width:v,index:t,isLocal:"local"===u,setParentActive:z,setParentInactive:L}),"local"===u&&p&&a.createElement(ee,{resource:n,display:R,isMenuOpen:j,onMenuOpen:$,onMenuCancelled:A,onMenuSelected:V,setParentActive:z})))}const ze=(0,r.memo)((function MediaElement(e){let{providerType:t="local",canEditMedia:n=!1,...r}=e;const{isCurrentResourceProcessing:i,isCurrentResourceUploading:o}=(0,I.useLocalMedia)((e=>{let{state:t}=e;return{isCurrentResourceProcessing:t.isCurrentResourceProcessing,isCurrentResourceUploading:t.isCurrentResourceUploading}})),{id:l}=r.resource;return i(l)||o(l)?a.createElement(te.default,{title:(0,c.__)("Uploading media…","web-stories")},a.createElement(Element,Pe({},r,{providerType:t,canEditMedia:n}))):a.createElement(Element,Pe({},r,{providerType:t,canEditMedia:n}))}));var Le=n(81024);const $e={maxPhotos:2},ContainerRenderer=e=>{let{children:t,containerRef:n}=e;return a.createElement(Le.GalleryContainer,{ref:n},t)},RowRenderer=e=>{let{children:t}=e;return t};const Ae=function MediaGallery(e){let{resources:t,uploadingResources:n=[],onInsert:l,providerType:s,canEditMedia:c=!1}=e;const d=[...n.map((e=>({key:`uploading-${e.id}`,src:e.src,width:e.width,height:e.height,resource:e}))),...t.map((e=>({key:e.id,src:e.src,width:e.width,height:e.height,resource:e})))].map(((e,t)=>({...e,index:t}))),u=(0,r.useCallback)((e=>{let{photo:t,layout:n}=e;return a.createElement(ze,{key:t.key,index:t.index,margin:"0px 0px 8px 0px",resource:t.resource,width:n.width,height:n.height,onInsert:l,providerType:s,canEditMedia:c})}),[s,l,c]);return a.createElement("div",null,a.createElement(i.default,{layout:"rows",photos:d,renderPhoto:u,renderRowContainer:RowRenderer,renderContainer:ContainerRenderer,targetRowHeight:110,rowConstraints:$e,spacing:8,defaultContainerWidth:o.SIDEBAR_WIDTH}))}}}]);