https://volumo.com/_next/static/chunks/pages/profile/feed/setup/genres-f52fb9510fc074e1.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[5047],{32358:(e,t,i)=>{(window.__NEXT_P=window.__NEXT_P||[]).push(["/profile/feed/setup/genres",function(){return i(91019)}])},56504:e=>{e.exports={root:"UnevenGrid_root___PGHQ",inner:"UnevenGrid_inner__aXa26"}},62934:e=>{e.exports={root:"Bubble_root__7DGcY","root-highlighted":"Bubble_root-highlighted__5Xt4x","root-selected":"Bubble_root-selected__cbkn0"}},91019:(e,t,i)=>{"use strict";i.r(t),i.d(t,{default:()=>H});var n=i(80263),r=i(70719),s=i(33894),a=i(78852),l=i(13463),o=i(10330),d=i(61469),h=i.n(d),c=i(53239),u=i(50005),g=i(51143),p=i(54923),v=i(12556),_=i(97930),m=i(18785),x=i(18251),f=i(1985),w=i(50016),y=i(19958),k=i(3638),j=i(56504),N=i.n(j);let C=e=>{let{className:t,count:i,horizontalSpacing:r,itemSize:s,renderItem:a,startWithLong:l,verticalSpacing:o}=e,d=(0,c.useRef)(null),[h,u]=(0,c.useState)(),[g,p]=(0,c.useState)(),v=(0,m.yh)(r??0),_=(0,m.yh)(o??0),x=(0,c.useCallback)(e=>{let t=Math.trunc(e.width/(s.width+v));(s.width+v)*t+s.width<=e.width&&(t+=1);let n=Math.ceil(i/(t-.5));u(t),p(n)},[i,v,s]);(0,y.A)({observeWidth:!0,passive:!0,targetElementRef:d,throttleTimeout:100,onResize:x});let f=(0,c.useMemo)(()=>void 0!==g?{height:`${g*(s.height+_)-_}px`}:{},[s,g,_]),w=(0,c.useMemo)(()=>void 0!==h?{width:`${h*(s.width+v)-v}px`}:{},[v,s,h]);return(0,n.jsx)("div",{className:(0,k.A)(N().root,t),ref:d,style:f,children:(0,n.jsx)("div",{className:N().inner,style:w,children:void 0!==h&&void 0!==g?Array.from({length:i}).map((e,t)=>{let n,r=Math.ceil((t+1)/(h-.5))-1,o=r%2==+!l,d=r===g-1,c=Math.trunc(r*(h-.5)),u=t-c;if(d){let e=i-c;n=(h*(s.width+v)-v-(e*(s.width+v)-v))/2+u*(s.width+v),e%2==0&&(o&&h%2==1&&e<h||!o&&h%2==0&&e<h-1)&&(u<e/2?n-=(s.width+v)/2:n+=(s.width+v)/2)}else n=o?u*(s.width+v):u*(s.width+v)+(s.width+v)/2;return a(t,{left:n,top:r*(s.height+_),height:s.height,width:s.width})}):null})})};var S=i(89654),b=i(11182),I=i(90737),M=i(32599),A=i(62907),E=i(62934),G=i.n(E);let B=e=>{let{children:t,className:i,style:r,variant:s,onClick:a}=e;return(0,n.jsx)(A.u,{className:(0,k.A)(G().root,G()[`root-${s}`],i),style:r,onClick:a,children:t})},D=e=>{let{className:t,genre:i,style:r,variant:s,onClick:a}=e,l=(0,c.useCallback)(()=>{a?.(i)},[i,a]);return(0,n.jsx)(B,{className:t,style:r,variant:s,onClick:l,children:i.name})};var F=i(53983),P=i(92613),R=i.n(P),z=i(19893);let L={height:(0,m.yh)(16),width:(0,m.yh)(16)},V={height:(0,m.yh)(13),width:(0,m.yh)(13)},$=e=>{let{pageIndexText:t,onBackClick:i,onForwardClick:r}=e,{api:s}=(0,S.gf)(),{t:a}=(0,l.c3)(),{clientDeviceType:o,isBelowMd:d,isBelowSm:h}=(0,v.yU)(),u=(0,M.f)(300),{user:p}=(0,g.IE)(),m=(0,g.z2)(),{data:y,isFetching:j}=(0,I.IJ)(),{traceUiEvent:N}=(0,b.vs)(),{traceStarted:A,traceStepCompleted:E}=(0,z.w)("genres"),[G,B]=(0,c.useState)(p?.preferred_genres_ids??[]),[P,$]=(0,c.useState)({}),T=G.map(e=>P[e]?.map(e=>e.id)??[]).flat(),U=(0,c.useCallback)(async e=>{let t=!G.includes(e.id),i=t?[...G,e.id]:G.filter(t=>t!==e.id);B(i),m.mutate({preferred_genres_ids:i}),N("genre_favorite",{genreId:e.id,genreName:e.name,favorited:t,position:y?.findIndex(t=>t.id===e.id),total:y?.length})},[G,m,N,y]);return(0,c.useEffect)(()=>{A()},[A]),(0,c.useEffect)(()=>{(async()=>{await Promise.all(G.map(async e=>{if(!P[e]){let t=await s.getRelatedGenres(e);$(i=>({...i,[e]:t}))}}))})()},[G]),(0,n.jsxs)(_.xA,{verticalSpacing:d?4:6,children:[(0,n.jsxs)(_.NP,{alignItems:"flex-start",columns:"1fr auto",children:[(0,n.jsxs)(_.xA,{verticalSpacing:1,children:[(0,n.jsx)(w.V,{variant:"vividH2",children:a("Choose your favorite genres")}),(0,n.jsxs)(w.V,{variant:"body3",children:[a("Select the genres that interest you the most to tailor your experience."),(0,n.jsx)("br",{}),a("Choose as many as you like!")]})]}),h?void 0:(0,n.jsx)(w.V,{className:R().step,component:"span",variant:"vividH2",children:t})]}),(0,n.jsx)(f.p,{data:y,isLoading:j,children:e=>e.length?(0,n.jsx)(C,{count:e.length,horizontalSpacing:h?1:3,itemSize:d?V:L,renderItem:(t,i)=>{let r=e[t];return(0,n.jsx)(D,{className:R().genre,genre:r,style:{left:`${i.left}px`,top:`${i.top}px`},variant:G.includes(r.id)?"selected":T.includes(r.id)?"highlighted":void 0,onClick:U},t)},verticalSpacing:2}):a("No data")}),(0,n.jsx)("div",{className:(0,k.A)(R().navigator,"desktop"===o&&R().navigatorDesktopDevice),style:u,children:(0,n.jsx)(F.m,{customBackButtonContent:(0,n.jsxs)(_.xA,{alignItems:"center",autoFlow:"column",horizontalSpacing:1,justifyContent:"center",children:[(0,n.jsx)(x.GFc,{}),h?null:a("I'll do it later")]}),hint:a("We recommend choosing more genres to discover more new music"),suggestionLevel:Math.min(G.length/3*100,100),suggestionLevelVariant:G.length<2?"low":G.length<3?"medium":"high",onBackClick:i,onForwardClick:()=>{r?.()!==!1&&E(G.map(e=>{let t=y?.findIndex(t=>t.id===e)??-1;return{id:e,name:t>=0?y?.[t].name:void 0,position:t>=0?t:void 0}}),y?.length)}})})]})};var T=i(4151),U=i(28967);let X=()=>{let{t:e}=(0,l.c3)(),t=(0,p.UV)(e),i=(0,c.useMemo)(()=>[t.Root,t.MyFeed,{text:e("Set up")}].filter(o.vN),[]),{user:d}=(0,g.IE)();return(0,n.jsxs)(U.B,{topLine:(0,n.jsx)(u.I,{pageName:"myFeed",values:i}),children:[(0,n.jsx)(a.K,{mt:2}),(0,n.jsx)($,{pageIndexText:"01—03",onBackClick:()=>h().back(),onForwardClick:()=>d?.preferred_genres_ids&&d.preferred_genres_ids.length>0?(h().push(r.KW.MyFeedSetupArtists),!0):(s.vF.info(e("Please select at least one genre to continue")),!1)})]})};X.getConfig=()=>({isAuthenticationRequired:!0}),X.renderInLayout=T.P;let H=X},92613:e=>{e.exports={genre:"SetupGenres_genre__Md1M3",step:"SetupGenres_step__5RKdN",navigator:"SetupGenres_navigator__wgo4C",navigatorDesktopDevice:"SetupGenres_navigatorDesktopDevice__ZNsD0"}}},e=>{e.O(0,[4001,7236,8288,904,5046,4802,1001,1048,4533,636,6593,8792],()=>e(e.s=32358)),_N_E=e.O()}]);