https://volumo.com/_next/static/chunks/3961-7ab03e317df6a539.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[3961],{28235:e=>{e.exports={placeholder:"FragmentSettings_placeholder__KydUP"}},33961:(e,t,a)=>{"use strict";a.d(t,{s:()=>eu});var i=a(80263),s=a(60719),r=a(70719),l=a(23107),o=a(67445),n=a(57975),d=a(43959),c=a(904),g=a(136),u=a(78852),m=a(13463),p=a(6750),C=a(53239),h=a(24426),y=a(33946),v=a(8639),f=a(34187),b=a(24422),x=a(33281),k=a(33364),I=a(13380),j=a(54923),_=a(75922),P=a(96417),S=a(15407),w=a(97930),T=a(51083),A=a(93340),R=a(22894),E=a(73572),U=a.n(E);let N=e=>{let{mediaCache:t,settings:a}=e,{t:s}=(0,m.c3)(),r=(0,C.useRef)(null),l=(0,C.useMemo)(()=>(0,P.QA)(a?.aspectRatio??"1:1"),[a?.aspectRatio]);(0,R.n)();let o=(0,C.useCallback)(async()=>{if(a.playlistId&&a.bgColor&&a.fgColor){let e=r.current?.getContext("2d");if(e){let i=t.getParent(a.playlistId),s=t.getArtwork(a.playlistId,S.Xl.width),r=t.getLogo(a.bgColor),o=t.getPlate(a.playlistId,a.bgColor),n=t.getQrCode(a.playlistId,a.fgColor,a.bgColor,!1);if(i&&s&&r&&n){let t={ctx:e,artwork:await (0,A.uu)(s,S.Xl),bgColor:a.bgColor,fgColor:a.fgColor,logo:await (0,A.uu)(r,S.kC),plate:o?await (0,A.uu)(o,S.fJ):void 0,qrCode:await (0,A.uu)(n,S.Tn),size:l,subtext:i.name,text:i.owner.name};S.aC(t)}}}},[a]);return(0,C.useEffect)(()=>(o(),t.subscribe(o),()=>t.unsubscribe(o)),[o,t]),(0,i.jsxs)(w.xA,{className:U().canvasContainer,children:[!(a.playlistId&&t.getArtwork(a.playlistId,S.Xl.width))&&(0,i.jsx)(T.Ay,{"aria-label":s("Loading"),backgroundColor:"#33363D",className:U().loader,foregroundColor:"#54565C",speed:2,uniqueKey:"artwork",children:(0,i.jsx)("rect",{height:"100%",width:"100%"})}),(0,i.jsx)("canvas",{className:U().canvas,height:l.height,ref:r,width:l.width})]})};var V=a(50016),F=a(3638),M=a(98219),B=a(75756),D=a(73150),K=a.n(D);let Z={playlistId:""},L=e=>{let{disabled:t,mediaCache:a,settings:s,onSettingsChange:r}=e,{t:l}=(0,m.c3)(),o=s??Z,n=a.getParent(o.playlistId),{palette:d}=(0,B.T)({sceneType:"playlistImage",settings:o,onSettingsChange:t?void 0:r,mediaCache:a},[n]),c=[...d??[],S.wN.fgColor,S.wN.bgColor];return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(V.V,{className:(0,F.A)(K().title,t&&K().disabled),variant:"vividH2",children:l("Appearance")}),(0,i.jsx)(u.K,{mt:3}),(0,i.jsx)("div",{className:t?K().disabledContent:void 0,children:(0,i.jsx)(M.J,{bgColor:o.bgColor??S.wN.bgColor,disabled:t,fgColor:o.fgColor??S.wN.fgColor,paletteColors:c,onBgColorChange:e=>{s&&r({...s,bgColor:e})},onFgColorChange:e=>{s&&r({...s,fgColor:e})}})})]})};var O=a(30454),z=a(61469),q=a(7570);let J=["playlistVideo","playlistImage"],X=["1:1","3:2","3:4","4:5","9:16"],H=["standard","chartVideo","onRotation","focus"],G=(e,t)=>t.find(t=>t===e);var Q=a(46947),W=a(89654),Y=a(33064),$=a(34131),ee=a(6461),et=a(15443);let ea=e=>{let{mediaCache:t,settings:a}=e,r=(0,_._B)(),{playbackServer:l}=(0,s.cs)(),{rerender:o}=(0,$.v)(),n=(0,C.useCallback)(e=>{void 0!==e&&(r.setTime(e,"renderer"),o())},[r]),d=(0,C.useCallback)(e=>{l.implicitlyMuted=!1,r.setIsPlaying(e,"renderer"),o()},[]),c=(0,C.useCallback)(e=>{l.implicitlyMuted=e,o()},[]);return(0,C.useEffect)(()=>{let e=e=>{let{source:t}=e;"renderer"!==t&&(0,C.startTransition)(()=>{o()})};return r.subscribe(e),()=>{r.unsubscribe(e)}},[]),(0,i.jsxs)(w.xA,{children:[(0,i.jsx)(et.M,{mediaCache:t,settings:a,style:{aspectRatio:(a.aspectRatio??"9:16").replace(":","/")}}),(0,i.jsx)(u.K,{mt:3}),(0,i.jsx)(ee.n,{duration:a.fragments?.reduce((e,t)=>e+(t.duration??0),0),isMute:l.implicitlyMuted,isPlaying:r.getIsPlaying(),time:r.getTime(),onMute:c,onPlaybackToggle:d,onTimeChange:n})]})};var ei=a(12556),es=a(96776),er=a(85056),el=a(37247),eo=a(7265),en=a(72327),ed=a(62898),ec=a.n(ed);let eg=e=>{let{disabled:t,mediaCache:a,playlist:r,settings:n,onSettingsChange:d}=e,g={playlistId:r.id,fragments:r.tracks.map(e=>({trackId:e.id,start:e.duration/3,duration:e.duration/3}))},{t:p}=(0,m.c3)(),{isAboveSm:h,isBelowSm:y}=(0,ei.yU)(),{cookieData:v}=(0,I.iT)(),{playbackServer:f}=(0,s.cs)(),b=(0,_._B)(),{rerender:x}=(0,$.v)(),[k,j]=(0,C.useState)(n?.fragments[0]?.trackId),[P,S]=(0,C.useState)(!1),{fragment:T}=l.G9(n?.fragments,b.getTime())??{},R=(0,C.useCallback)((e,t)=>{let a=l.E(n?.fragments,t);b.setTime(a+e+1,"settings")},[n?.fragments]),E=(0,C.useCallback)(e=>{n?.fragments&&d({...n,fragments:(0,el.j$)(n.fragments,n.fragments.findIndex(t=>t.trackId===e.trackId),e)})},[n,d]),U=(0,C.useCallback)(e=>{f.implicitlyMuted=!1,b.setIsPlaying(e,"settings"),x()},[]);(0,C.useEffect)(()=>{let e=e=>{let{source:t}=e;"settings"!==t&&x()};return b.subscribe(e),()=>{b.unsubscribe(e)}},[n]),(0,es.I)(()=>{T&&j(T.trackId)},[T]);let{palette:N}=(0,B.T)({sceneType:"playlistVideo",settings:n??g,onSettingsChange:t?void 0:d,mediaCache:a,onBeforeUpdate:()=>{j(e=>e??n?.fragments[0]?.trackId)},onAfterUpdate:()=>{x()}}

1),D=[...N??[],l.Ee.fgColor,l.Ee.bgColor];return(0,i.jsxs)(w.xA,{children:[(0,i.jsx)(V.V,{className:(0,F.A)(ec().title,t&&ec().disabled),variant:"vividH2",children:p("Appearance")}),(0,i.jsx)(u.K,{mt:y?2:3}),(0,i.jsx)("div",{className:t?ec().disabledContent:void 0,children:(0,i.jsx)(M.J,{bgColor:n?.bgColor??l.Ee.bgColor,disabled:t,fgColor:n?.fgColor??l.Ee.fgColor,paletteColors:D,thirdColumn:v.hasDebugSet?(0,i.jsx)(c.v,{reserveLabelSpace:h,children:(0,i.jsxs)(w.xA,{alignItems:"center",className:ec().switch,columns:"1fr auto",children:[(0,i.jsx)(V.V,{variant:"body1",children:p("Swap colors")}),(0,i.jsx)(er.d,{value:P,onChange:e=>{n&&d((0,A.p7)(n)),S(e)}})]})}):void 0,onBgColorChange:e=>{n&&d({...n,bgColor:e})},onFgColorChange:e=>{n&&d({...n,fgColor:e})}})}),(0,i.jsx)(u.K,{mt:y?2:3}),(0,i.jsx)(o.c,{variant:"zero"}),(0,i.jsx)(u.K,{mt:y?2:3}),(0,i.jsx)(V.V,{className:(0,F.A)(ec().title,t&&ec().disabled),variant:"vividH2",children:p("Music")}),(0,i.jsx)(u.K,{mt:y?2:3}),(0,i.jsx)("div",{className:t?ec().disabledContent:void 0,children:(0,i.jsx)(c.v,{children:(0,i.jsx)(w.xA,{verticalSpacing:y?void 0:1,children:n?n.fragments.map(e=>(0,i.jsx)(en.s,{expanded:k===e.trackId,fragment:e,isPlaying:T===e&&b.getIsPlaying(),mediaCache:a,time:T===e?b.getTime()-l.E(n.fragments,e):void 0,onFragmentChange:E,onPlaybackToggle:U,onTimeChange:R},e.trackId)):g.fragments.map((e,t)=>(0,i.jsx)("div",{className:ec().disabledContent,children:(0,i.jsx)(eo.F,{canChangeDuration:!0,defaultDuration:e.duration,isPlaying:!1,range:void 0!==e.start&&void 0!==e.duration?{from:e.start,to:e.start+e.duration}:void 0,showWaveform:0===t,track:r.tracks.find(t=>t.id===e.trackId)??r.tracks[0]})},e.trackId))})})})]})},eu=e=>{let{contextPath:t,playlist:a}=e,{t:P}=(0,m.c3)(),{cookieData:w}=(0,I.iT)(),{playbackServer:T}=(0,s.cs)(),{getIsPlaying:R,setIsPlaying:E,getTime:U,setTime:V,subscribe:F,unsubscribe:M}=(0,_._B)(),{sceneType:B,aspectRatio:D,template:K,validationTriggered:Z,imageSettings:$,videoSettings:ee,mediaCache:et,setImageSettings:ei,setVideoSettings:es,handleSceneTypeChange:er,handleAspectRatioChange:el,handleTemplateChange:eo,handleMissingSettings:en}=(()=>{let{query:e}=(0,z.useRouter)(),[t,a]=(0,C.useState)(()=>G(e[q.DX],J)),[i,s]=(0,C.useState)(()=>G(e[q.UR],X)),[r,l]=(0,C.useState)(()=>G(e[q.wi],H)),[o,n]=(0,C.useState)(!1),[d,c]=(0,C.useState)(),[g,u]=(0,C.useState)(),[m]=(0,C.useState)(()=>new O.d),p=(0,C.useCallback)(e=>{e||(u(void 0),c(void 0),n(!1)),s(void 0),l(void 0),a(e)},[]),h=(0,C.useCallback)(e=>{e||(u(void 0),c(void 0),l(void 0),n(!1)),e&&g&&u({...g,aspectRatio:e}),e&&d&&c({...d,aspectRatio:e}),s(e)},[g,d]),y=(0,C.useCallback)(e=>{e||(u(void 0),c(void 0),n(!1)),l(e)},[]);return{sceneType:t,aspectRatio:i,template:r,validationTriggered:o,imageSettings:d,videoSettings:g,mediaCache:m,setImageSettings:c,setVideoSettings:u,handleSceneTypeChange:p,handleAspectRatioChange:h,handleTemplateChange:y,handleMissingSettings:(0,C.useCallback)(()=>{n(!0)},[])}})();(e=>{let{playlist:t,sceneType:a,aspectRatio:i,template:s,imageSettings:r,videoSettings:o,setImageSettings:n,setVideoSettings:d,mediaCache:c}=e,{api:g}=(0,W.gf)(),u=(0,C.useRef)(Promise.resolve());(0,C.useEffect)(()=>{if("playlistImage"===a){let e=i??"9:16",a=async()=>{try{await S.V1({...S.wN,cache:c,imageApi:Q.C,storeApi:g,shareUrlBase:Y.Z4.volumoShareUrl||Y.Z4.volumoStoreUrl,playlistId:t.id,...r,aspectRatio:e}),r||n({...await (0,A.ig)(c,t.id),aspectRatio:e})}finally{c.emitOnChange()}};u.current=u.current.then(a)}},[r,a,i]),(0,C.useEffect)(()=>{let e=async()=>{try{await l.x({...l.Ee,cache:c,imageApi:Q.C,storeApi:g,shareUrlBase:Y.Z4.volumoShareUrl||Y.Z4.volumoStoreUrl,playlistId:t.id,fragments:[]})}finally{c.emitOnChange()}};u.current=u.current.then(e)},[]),(0,C.useEffect)(()=>{if("playlistVideo"===a&&!i&&!s){let e=async()=>{try{await l.x({...l.Ee,cache:c,imageApi:Q.C,storeApi:g,shareUrlBase:Y.Z4.volumoShareUrl||Y.Z4.volumoStoreUrl,playlistId:t.id,fragments:[]})}finally{c.emitOnChange()}};u.current=u.current.then(e)}},[a]),(0,C.useEffect)(()=>{if("playlistVideo"===a&&i&&s){let e=async()=>{try{await l.x({...l.Ee,cache:c,imageApi:Q.C,storeApi:g,shareUrlBase:Y.Z4.volumoShareUrl||Y.Z4.volumoStoreUrl,playlistId:t.id,fragments:[],...o}),o||d({...await (0,A.E4)(c,t.id),aspectRatio:i,template:s??"standard"})}finally{c.emitOnChange()}};u.current=u.current.then(e)}},[a,o,i,s])})({playlist:a,sceneType:B,aspectRatio:D,template:K,imageSettings:$,videoSettings:ee,setImageSettings:ei,setVideoSettings:es,mediaCache:et});let{isOpen:ed,open:ec,close:eu}=(0,d.F)(),em=(0,C.useRef)(),ep=(0,C.useCallback)(()=>{w.hasDebugSet&&ec()},[w.hasDebugSet,ec]);(0,C.useEffect)(()=>(T.implicitlyMuted=!0,E(!0,"renderer"),()=>{T.implicitlyMuted=!1,T.triggerPlayback(void 0)}),[]),(0,C.useEffect)(()=>{"playlistVideo"===B&&D&&K||T.triggerPlayback(void 0)},[B,D,K]),(0,n.T)(ee,(e,a)=>{let i;if(!a){em.current=void 0;return}let r=(e,r)=>{if(a&&"playback"!==r.source){let o=em.current,n=l.G9(a.fragments,r.time);if(n&&(e.isPlaying!==r.isPlaying||e.time!==r.time||!o||o.start!==n.fragment.start||o.duration!==n.fragment.duration||o.trackId!==n.fragment.trackId)){let{fragment:e,time:a}=n;

1if(void 0!==e.trackId&&void 0!==e.start&&void 0!==e.duration){let i=et.getTrack(e.trackId);if(i){let l=o?.trackId!==e.trackId,n=o?.trackId===e.trackId&&o.start!==e.start;(l||"renderer"===r.source?T.triggerPlayback:T.triggerPlaybackDebounced)({trackId:e.trackId,duration:i.duration,access:(0,p.GJ)(i.release_start_at)?"limited":"standard",contextPath:t,range:{from:e.start,to:e.start+e.duration},position:n?e.start:e.start+a,instanceId:(0,s.bP)(t,e.trackId)},!!r.isPlaying&&"force"),em.current=e}}}let d=()=>{let e=T.getActiveInstance(),t=T.position,s=T.getActiveRange(),r=s?.from,o=s?.to,n=a?.fragments;if(e&&void 0!==t&&void 0!==r&&void 0!==o&&n){let a=n.find(t=>t.trackId===e.trackId);if(a&&void 0!==a.duration){let e=l.E(n,a);void 0!==e&&(t>=o?a===n.at(-1)?V(0,"renderer"):V(e+a.duration+10,"renderer"):V(e+t-r,"playback"))}}i=requestAnimationFrame(d)};e.isPlaying&&i||!r.isPlaying?r.isPlaying||void 0===i||cancelAnimationFrame(i):i=requestAnimationFrame(d)}};F(r);let o={isPlaying:R(),source:"settings",time:U()};return r(o,o),()=>{M(r),void 0!==i&&cancelAnimationFrame(i)}});let eC=[{ratio:"9:16",title:P("Reels and Story"),subTitle:P("Instagram Reel and Story, YouTube Shorts, TikTok"),valueText:"1080\xd71920px",tagLabel:P("Reels and Story"),imageClassName:h.s.reels},{ratio:"3:4",title:P("Partscreen"),subTitle:P("Instagram Carousel, Facebook Post"),valueText:"1080\xd71440px",tagLabel:P("Partscreen"),imageClassName:h.s.post}],eh=(0,j.UV)(P),ey=P("Clips"),ev=(0,C.useMemo)(()=>({title:ey}),[ey]),ef=(0,C.useMemo)(()=>[eh.Root,(0,j.xH)(a?.type,!!a?.published_at,P)??eh.Loading,(0,j.OQ)(a)??eh.Loading,{text:ey}],[eh,a,ey]),eb="playlistVideo"===B&&K&&ee?(0,i.jsx)(ea,{mediaCache:et,settings:ee}):"playlistImage"===B&&K&&$?(0,i.jsx)(N,{mediaCache:et,settings:$}):void 0,ex="playlistImage"===B?D&&K?$:void 0:ee;return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsxs)(k.U,{aspectRatio:D,backButton:(0,i.jsx)(x.o,{artworkType:"playlist",artworkUuid:a?.artwork_uuid??void 0,href:a?(0,r.C$)(a):"",label:a?.type==="chart"?P("Back to chart"):P("Back to playlist")}),breadcrumbValues:ef,downloadButton:(0,i.jsx)(b.O,{coverImageUuid:a?.artwork_uuid??void 0,sceneType:B??"playlistVideo",settings:ex,onDownloadStart:"playlistVideo"===B?ep:void 0,onMissingSettings:en}),hidePlayer:"playlistImage"===B,metaFields:ev,preview:eb,children:[(0,i.jsx)(c.v,{error:Z&&!B?P("Please select media type"):void 0,children:(0,i.jsx)(y.i,{contentType:"playlist",sceneType:B,onChange:er})}),(0,i.jsx)(o.c,{variant:"zero"}),(0,i.jsx)(c.v,{error:Z&&!D?P("Please select aspect ratio"):void 0,children:(0,i.jsx)(h.h,{aspectRatio:D,disabled:!B,options:eC,onChange:el})}),(0,i.jsx)(o.c,{variant:"zero"}),(0,i.jsx)(c.v,{error:Z&&!K?P("Please select template"):void 0,children:(0,i.jsx)(v.U,{aspectRatio:D,disabled:!B||!D,imagePreview:"playlistImage"===B&&$?(0,i.jsx)(N,{mediaCache:et,settings:$}):void 0,item:a,sceneType:B,template:K,onChange:eo})}),(0,i.jsx)(o.c,{variant:"zero"}),(0,i.jsx)(u.K,{mt:3}),"playlistImage"!==B&&(B&&D&&K?(0,i.jsx)(eg,{mediaCache:et,playlist:a,settings:ee,onSettingsChange:es}):(0,i.jsx)(eg,{disabled:!0,mediaCache:et,playlist:a,settings:ee,onSettingsChange:es})),"playlistImage"===B&&(D&&K?$&&!a?.artwork_uuid?(0,i.jsx)(g.p,{type:"error",children:P("The playlist must have a minimum of 1 track before we could generate an image for it")}):(0,i.jsx)(L,{mediaCache:et,settings:$,onSettingsChange:ei}):(0,i.jsx)(L,{disabled:!0,mediaCache:et,settings:$,onSettingsChange:ei}))]}),ee&&(0,i.jsx)(f.F,{imageSettings:{playlistId:ee.playlistId,aspectRatio:ee.aspectRatio,bgColor:ee.bgColor,fgColor:ee.fgColor},item:a,open:ed,onCloseAttempt:eu})]})}},62898:e=>{e.exports={title:"PlaylistVideoSettings_title__OdVu8",disabled:"PlaylistVideoSettings_disabled__d3zXl",disabledContent:"PlaylistVideoSettings_disabledContent__5hg5i",switch:"PlaylistVideoSettings_switch__SsYz_"}},72327:(e,t,a)=>{"use strict";a.d(t,{s:()=>u});var i=a(80263),s=a(97930),r=a(25051),l=a(78852),o=a(13463),n=a(53239),d=a(7265),c=a(28235),g=a.n(c);let u=e=>{let{className:t,expanded:a,fragment:c,isPlaying:u,mediaCache:m,time:p,onFragmentChange:C,onPlaybackToggle:h,onTimeChange:y}=e,{t:v}=(0,o.c3)(),f=c.trackId?m.getTrack(c.trackId):void 0,b=(0,n.useCallback)(e=>{y?.(e,c)},[c,y]),x=(0,n.useCallback)(e=>{h?.(e,c)},[c]),k=(0,r.h)(void 0!==c.start&&void 0!==c.duration?{from:c.start,to:c.start+c.duration}:void 0);return(0,i.jsx)("div",{className:t,children:f?(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(d.F,{defaultDuration:c.duration,isPlaying:u,range:k,showWaveform:a,time:p,track:f,onPlaybackToggle:x,onRangeChange:e=>{void 0!==e.from&&void 0!==e.to&&C({...c,start:e.from,duration:e.to-e.from})},onTimeChange:b},f.id),a&&(0,i.jsx)(l.K,{mt:1})]}):(0,i.jsx)(s.xA,{alignItems:"center",className:g().placeholder,children:v("Loading…")})})}},73150:e=>{e.exports={title:"PlaylistImageSettings_title__DZFsg",disabled:"PlaylistImageSettings_disabled__Eka75",disabledContent:"PlaylistImageSettings_disabledContent__7VK6i"}},73572:e=>{e.exports={canvasContainer:"PlaylistImageRenderer_canvasContainer__3iMqJ",canvas:"PlaylistImageRenderer_canvas__MdFWb",loader:"PlaylistImageRenderer_loader__ubtzU"}}}]);