https://www.jacktrip.com/_next/static/chunks/5008-cb02634d907c08b4.js

1"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[5008],{35008:function(e,l,s){s.d(l,{default:function(){return b}});var t=s(57437),a=s(2265),i=s(27648),r=s(37065),n=s.n(r),d=s(35396),c=s(20939),o=s(42488),u=s(33145),x=s(53335),m=s(53745),f=s(56334),h=s(34482);function p(e){var l;let{stream:s,live:a,numPublicRecordings:r}=e,{regions:n}=(0,d.eH)(!1),[p]=(0,d.bY)(s.region);if(!p)return null;let{data:v}=p;return(0,t.jsxs)("div",{className:"flex h-full w-full flex-col overflow-clip rounded-lg bg-slate-900",children:[(0,t.jsxs)("div",{className:"relative h-[140px] w-full",children:[a?(0,t.jsx)("div",{className:"absolute left-3 top-3 z-10 flex h-5 w-9 items-center justify-center rounded-md bg-red-600 text-xs font-medium text-white",children:"LIVE"}):null,r>0?(0,t.jsxs)(h.u,{children:[(0,t.jsx)(h.aJ,{className:"absolute right-3 top-3 z-10 cursor-default rounded-md bg-slate-800 p-1 shadow-[inset_0_0_2px_2px_rgba(203,213,225,0.075)] hover:cursor-default",children:(0,t.jsx)(o.Z,{name:"VideoLibrary",className:"h-4 w-4 fill-slate-100"})}),(0,t.jsx)(h._v,{side:"top",className:"text-wrap text-xs font-normal",children:r>1?"".concat(r," public recordings"):"1 public recording"})]}):null,(0,t.jsx)(u.default,{src:s.bannerURL||(0,c.HN)(s.id),alt:s.name,fill:!0,sizes:"280px",className:"z-0 rounded-lg object-cover"})]}),(0,t.jsxs)("div",{className:"flex flex-grow flex-col justify-between p-6",children:[(0,t.jsxs)("div",{className:"space-y-2",children:[(0,t.jsx)("div",{className:"line-clamp-1 overflow-clip text-ellipsis whitespace-nowrap text-base font-medium",children:s.name}),(0,t.jsxs)("div",{className:"flex items-center justify-between gap-x-2",children:[(0,t.jsx)("div",{className:"line-clamp-1 text-ellipsis whitespace-nowrap text-xs font-light",children:null==n?void 0:null===(l=n[s.region||""])||void 0===l?void 0:l.label}),(null==v?void 0:v.latency)?(0,t.jsxs)("div",{className:(0,x.m6)("rounded-md bg-green-600 px-[6px] py-[2px] text-xs font-medium text-white",v.latency>=c.K2&&v.latency<c.Y7&&"bg-yellow-300 text-gray-600",v.latency>=c.Y7&&v.latency<c.Ti&&"bg-orange-500",v.latency>=c.Ti&&"bg-red-500"),children:[v.latency," ms"]}):null]}),(0,t.jsxs)("div",{className:"line-clamp-1 overflow-clip text-ellipsis whitespace-nowrap text-xs font-light",children:["Skill Level:"," ",s.skillLevels.length>0?s.skillLevels.join(", "):"Not specified"]}),(0,t.jsxs)("div",{className:"line-clamp-1 overflow-clip text-ellipsis whitespace-nowrap text-xs font-light",children:["Instruments:"," ",s.instruments.length>0?s.instruments.join(", "):"Not specified"]}),(0,t.jsxs)("div",{className:"line-clamp-1 overflow-clip text-ellipsis whitespace-nowrap text-xs font-light",children:["Genres:"," ",s.genres.length>0?s.genres.join(", "):"Not specified"]})]}),(0,t.jsxs)("div",{className:"flex h-full flex-grow flex-col justify-end space-y-4",children:[2===s.lookingFor||3===s.lookingFor?(0,t.jsxs)("div",{className:"flex items-center gap-x-2",children:[(0,t.jsx)("div",{className:"relative flex h-6 w-6 items-center justify-center overflow-clip rounded-lg",children:(0,t.jsx)(o.Z,{name:"PersonSearch",className:(0,x.m6)("h-5 w-5",2===s.lookingFor?"fill-orange-300":"fill-yellow-300")})}),(0,t.jsx)("div",{className:(0,x.m6)("text-xs",2===s.lookingFor?"text-orange-300":"text-yellow-300"),children:2===s.lookingFor?"Looking for Other Musicians":"Looking for New Students"})]}):null,(0,t.jsx)("div",{children:s.isPublicWithActiveSession?(0,t.jsx)(m.Z,{streamId:s.id,size:"lg",fullWidth:!0}):(0,t.jsx)(f.z,{className:"w-full rounded-full text-sm",asChild:!0,children:(0,t.jsx)(i.default,{href:"/@".concat(s.id),children:"Learn More"})})})]})]})]})}var v=s(73512),g=s(6819),j=s(21235);let N="region:",w="range:";function b(e){var l;let{loggedIn:s}=e,{regions:r}=(0,d.eH)(!0),{data:u,isLoading:x,isError:m}=(0,d.ZZ)(),[b,y]=a.useState(null),[k,R]=a.useState(null),[S,_]=a.useState(null),{streams:L}=(0,d.X8)(),z=a.useMemo(()=>new Set((null==L?void 0:L.map(e=>e.id))||[]),[L]),E=a.useMemo(()=>{let e=Number(null==u?void 0:u.latitude)||0,l=Number(null==u?void 0:u.longitude)||0,s=[];return Object.keys(r||{}

1).forEach(t=>{let a=null==r?void 0:r[t];a&&s.push({id:t,data:a,estimatedDistanceToUser:(0,c.Z_)(e,l,(null==a?void 0:a.latitude)||0,(null==a?void 0:a.longitude)||0)})}),s.sort((e,l)=>e.estimatedDistanceToUser-l.estimatedDistanceToUser)},[u,r]),[O,A]=a.useState(null);a.useEffect(()=>{let e=()=>{A(Math.min(10,Math.ceil(window.innerWidth/300)))},l=n()(e,200);return e(),window.addEventListener("resize",l),()=>{window.removeEventListener("resize",l)}},[]);let I=!!r&&!m&&!x&&null!==O,{data:Z,isLoading:C}=(0,d.Sf)(O,I),M=!Z&&C,{activeRegionSelection:W,activeRegionRange:P}=a.useMemo(()=>{if(b){if("_"===b)return{activeRegionSelection:"_",activeRegionRange:null};if(b.startsWith(N))return{activeRegionSelection:[b.replace(N,"")],activeRegionRange:null};{if(!b.startsWith(w))return console.warn("The user's region selection was not handled by one of the expected cases.No regions are active for search."),{activeRegionSelection:[],activeRegionRange:null};let e=Number(b.replace(w,""));return{activeRegionSelection:E.filter(l=>l.estimatedDistanceToUser<=e).map(e=>e.id),activeRegionRange:e}}}return Z?{activeRegionSelection:Z.initialRegionSelection,activeRegionRange:Z.initialRegionRange}:{activeRegionSelection:[],activeRegionRange:null}},[E,b,Z]),{data:T,fetchNextPage:D,isFetching:Q,isLoading:B}=(0,d.yO)(W,k&&"all"!==k?[k]:[],S&&"all"!==S?[S]:[],[],I&&!M),[G,U]=a.useState(!1),[V,F]=a.useState(!1),Y=a.useRef(null),J=a.useCallback(()=>{Y.current&&(U(Y.current.scrollLeft>0),F(Y.current.scrollLeft<Y.current.scrollWidth-Y.current.clientWidth))},[]);a.useEffect(()=>{let e=n()(J,200);return window.addEventListener("resize",e),()=>{window.removeEventListener("resize",e)}},[J]),a.useEffect(()=>{if(!Y.current)return;let e=Y.current,l=n()(J,200);return e.addEventListener("scroll",l),e.addEventListener("scrollend",l),()=>{e.removeEventListener("scroll",l),e.removeEventListener("scrollend",l)}},[J]),a.useEffect(()=>{if(!T){J();return}J()},[T,J]);let{ref:H,entry:$}=(0,c.sx)({threshold:0,rootMargin:"32px"});a.useEffect(()=>{(null==$?void 0:$.isIntersecting)&&!Q&&D()},[null==$?void 0:$.isIntersecting,D,Q]);let q=s?(0,t.jsx)("div",{className:"flex h-[400px] items-center justify-center",children:(0,t.jsxs)("div",{className:"flex flex-col items-center gap-y-3 text-sm text-slate-200",children:[0!==W.length?(0,t.jsx)("div",{className:"text-center",children:"We didn't find any studios in the location you selected."}):null,(0,t.jsx)("div",{className:"text-center font-semibold",children:"Are you looking to connect with other musicians?"}),(0,t.jsxs)("div",{className:"text-center",children:[0!==W.length?"Please try a different location, or ":"Please select a region, or ",(0,t.jsx)(i.default,{href:"/studios/create",className:"underline underline-offset-2 hover:text-white",children:"create a studio"})," ","to get started!"]})]})}):(0,t.jsx)("div",{className:"flex h-[400px] items-center justify-center",children:(0,t.jsx)("div",{className:"text-base",children:"No studios found. Please select a different location."})}),K=(null==T?void 0:T.pages.flatMap(e=>e.results))||[];return(0,t.jsx)("section",{className:"relative bg-[#1E3342] pb-8 pt-10",children:(0,t.jsxs)("div",{className:"space-y-8",children:[(0,t.jsxs)("div",{className:"justify-between space-y-4 px-8 lg:flex lg:space-y-0 lg:px-24",children:[(0,t.jsx)("div",{className:"flex flex-col justify-end",children:(0,t.jsxs)("div",{className:"text-2xl font-medium",children:["Find other musicians"," ",(0,t.jsxs)(h.u,{children:[(0,t.jsx)(h.aJ,{children:(0,t.jsx)(o.Z,{name:"Info",className:"h-4 w-4"})}),(0,t.jsx)(h._v,{side:"right",sideOffset:4,className:"w-64 text-wrap text-xs font-normal",children:"By default, all of JackTrip's studios are private and not visible. This list only includes studios that are looking for other musicians or have published public recordings."})]})]})}),I&&!M?(0,t.jsxs)("div",{className:"flex",children:[(0,t.jsxs)("div",{className:"hidden space-y-1 pr-5 sm:flex sm:flex-col",children:[(0,t.jsx)("div",{className:"text-xs",children:"Select instrument:"}),(0,t.jsx)("div",{className:"sm:w-[180px] md:w-[200px]",children:(0,t.jsxs)(g.Ph,{value:S||void 0,onValueChange:e=>{_(e)},children:[(0,t.jsx)(g.i4,{className:"w-full border-slate-500/75 text-xs focus-visible:border-slate-400 dark:border-slate-500/75 dark:focus-visible:border-slate-400 lg:w-full",children:(0,t.jsx)(g.ki,{placeholder:"All Instruments",children:"all"===S?"All Instruments":(0,

1c.mc)().flatMap(e=>e.instruments).find(e=>e===S)||"All Instruments"})}),(0,t.jsxs)(g.Bw,{className:"w-full bg-slate-700 p-1 dark:bg-slate-700",children:[(0,t.jsx)(g.Ql,{value:"all",className:"text-xs",children:"All Instruments"}),(0,c.mc)().map(e=>(0,t.jsxs)(g.DI,{className:"mt-3 space-y-1",children:[(0,t.jsx)(g.n5,{className:"sticky -top-1 z-10 rounded-md bg-slate-500 py-2 text-xs font-normal text-white",children:e.category}),e.instruments.map(e=>(0,t.jsx)(g.Ql,{value:e,className:"text-xs",children:e},e))]},e.category))]})]})})]}),(0,t.jsxs)("div",{className:"flex-col space-y-1 pr-5",children:[(0,t.jsx)("div",{className:"text-xs",children:"Select genre:"}),(0,t.jsx)("div",{className:"sm:w-[180px] md:w-[200px]",children:(0,t.jsxs)(g.Ph,{value:k||void 0,onValueChange:e=>{R(e)},children:[(0,t.jsx)(g.i4,{className:"w-full border-slate-500/75 text-xs focus-visible:border-slate-400 dark:border-slate-500/75 dark:focus-visible:border-slate-400",children:(0,t.jsx)(g.ki,{placeholder:"All Genres",children:"all"===k?"All Genres":(0,c.sf)().find(e=>e===k)||"All Genres"})}),(0,t.jsxs)(g.Bw,{className:"w-full bg-slate-700 p-1 dark:bg-slate-700",children:[(0,t.jsx)(g.Ql,{value:"all",className:"text-xs",children:"All Genres"}),(0,c.sf)().map(e=>(0,t.jsx)(g.Ql,{value:e,className:"text-xs",children:e},e))]})]})})]}),(0,t.jsxs)("div",{className:"flex-col space-y-1",children:[(0,t.jsx)("div",{className:"text-xs",children:"Select location:"}),(0,t.jsx)("div",{className:"sm:w-[180px] md:w-[200px]",children:(0,t.jsx)(g.Ph,{value:b||void 0,onValueChange:e=>{y(e)},children:(0,t.jsxs)(g.i4,{className:"w-full border-slate-500/75 text-xs focus-visible:border-slate-400 dark:border-slate-500/75 dark:focus-visible:border-slate-400",children:[(0,t.jsx)(g.ki,{placeholder:P?"Within ".concat(P," miles"):"All Locations"}),(0,t.jsxs)(g.Bw,{className:"w-full bg-slate-700 p-1 dark:bg-slate-700",children:[(0,t.jsxs)(g.DI,{className:"mt-3 space-y-1",children:[(0,t.jsx)(g.n5,{className:"sticky -top-1 z-10 rounded-md bg-slate-500 py-2 text-xs font-normal text-white",children:"Select a range (estimated)"}),(0,t.jsx)(g.Ql,{value:"_",className:"z-0 m-0 block cursor-pointer rounded-md text-xs font-light focus:bg-slate-600 data-[disabled]:opacity-80 focus:dark:bg-slate-600",children:(0,t.jsx)("div",{className:"w-full pl-3",children:(0,t.jsx)(g.S_,{children:"All Locations"})})},"_"),[1e3,500,250].map(e=>(0,t.jsx)(g.Ql,{value:"".concat(w).concat(e),className:"z-0 m-0 block cursor-pointer rounded-md text-xs font-light focus:bg-slate-600 data-[disabled]:opacity-80 focus:dark:bg-slate-600",children:(0,t.jsx)("div",{className:"w-full pl-3",children:(0,t.jsxs)(g.S_,{children:["Within ",e," miles"]})})},"".concat(w).concat(e)))]}),(0,t.jsxs)(g.DI,{className:"mt-3 space-y-1",children:[(0,t.jsx)(g.n5,{className:"sticky -top-1 z-10 rounded-md bg-slate-500 py-2 text-xs font-normal text-white",children:"Or, select a specific location"}),null===(l=Object.keys(r||{}))||void 0===l?void 0:l.sort((e,l)=>{var s,t,a,i;return(null==u?void 0:u.latitude)&&(null==u?void 0:u.longitude)?(0,c.Z_)(Number(null==u?void 0:u.latitude),Number(null==u?void 0:u.longitude),Number(null==r?void 0:null===(s=r[e])||void 0===s?void 0:s.latitude)||0,Number(null==r?void 0:null===(t=r[e])||void 0===t?void 0:t.longitude)||0)-(0,c.Z_)(Number(null==u?void 0:u.latitude),Number(null==u?void 0:u.longitude),Number(null==r?void 0:null===(a=r[l])||void 0===a?void 0:a.latitude)||0,Number(null==r?void 0:null===(i=r[l])||void 0===i?void 0:i.longitude)||0):0}).map(e=>{var l,s,a;let i=(null==r?void 0:null===(l=r[e])||void 0===l?void 0:l.label)||"",n="";if(i){if(i.includes(" - ")){let e=null===(s=i.split(" - ")[0])||void 0===s?void 0:s.trim(),l=null===(a=i.split(" - ")[1])||void 0===a?void 0:a.trim();n=(null==e?void 0:e.toLocaleLowerCase())==="usa"?l+" - "+e:l+", "+e}else n=i}else n="Unknown location";return(0,t.jsx)(g.Ql,{value:"".concat(N).concat(e),className:"z-0 m-0 block cursor-pointer rounded-md text-xs font-light focus:bg-slate-600 data-[disabled]:opacity-80 focus:dark:bg-slate-600",children:(0,t.jsx)("div",{className:"w-full pl-3",children:(0,t.jsx)(g.S_,{children:n})})},"".concat(N).concat(e))})]})]})]})})})]})]}):null]}),(0,t.jsx)("div",{children:(0,t.jsxs)(v.ScrollArea,{className:"relative",children:[(0,t.jsxs)(v.ScrollViewport,{className:"relative snap-x snap-mandatory scroll-smooth px-8 lg:px-24",ref:Y,children:[0!==K.length||B||!I||M||null===O?null:q,0===K.length&&(B||!I||M||null===O)?(0,t.jsxs)("div",{className:"flex h-[400px] flex-row items-center justify-center gap-6",children:[(0,t.jsx)(j.O,{className:"h-[400px] w-[280px] rounded-lg"}),(0,t.jsx)(j.O,{className:"h-[400px] w-[280px] rounded-lg"}),(0,t.jsx)(j.O,{className:"h-[400px] w-[280px] rounded-lg"}),(0,t.jsx)(j.O,{className:"h-[400px] w-[280px] rounded-lg"}),(0,t.jsx)(j.O,{className:"h-[400px] w-[280px] rounded-lg"}),(0,t.jsx)(j.O,{className:"h-[400px] w-[280px] rounded-lg"}),(0,t.jsx)(j.O,{className:"h-[400px] w-[280px] rounded-lg"}),(0,t.jsx)(j.O,{className:"h-[400px] w-[280px] rounded-lg"}),(0,t.jsx)(j.O,{className:"h-[400px] w-[280px] rounded-lg"}),(0,t.jsx)(j.O,{className:"h-[400px] w-[280px] rounded-lg"})]}):null,(0,t.jsx)("div",{className:"flex w-full flex-row gap-6",children:K.map((e,l,s)=>(0,t.jsx)("div",{className:"h-[400px] w-[280px]",ref:l===s.length-1?H:void 0,children:(0,t.jsx)(p,{stream:e,live:z.has(e.id),numPublicRecordings:e.numPublicRecordings})},e.id))})]}),(0,t.jsx)(v.ScrollBar,{orientation:"horizontal",className:"invisible"}),(0,t.jsx)("div",{className:"absolute left-4 top-1/2 flex h-32 w-14 -translate-y-1/2 items-center justify-center rounded-md border-[1px] border-slate-500 bg-slate-900/60 backdrop-blur-md",children:(0,t.jsx)(f.z,{disabled:!G,variant:"outline",className:"group h-full w-full cursor-pointer border-0 p-1 hover:dark:bg-transparent",onClick:e=>{if(e.preventDefault(),!Y.current)return;let l=Math.floor(Y.current.clientWidth/304);l<1&&(l=1),Y.current.scrollLeft-=304*l},children:(0,t.jsx)(o.Z,{name:"ArrowBack",className:"text-md w-8 fill-slate-100 group-hover:scale-110"})})}),(0,t.jsx)("div",{className:"absolute right-4 top-1/2 flex h-32 w-14 -translate-y-1/2 items-center justify-center rounded-md border-[1px] border-slate-500 bg-slate-900/60 backdrop-blur-md",children:(0,t.jsx)(f.z,{disabled:!V,variant:"outline",className:"group h-full w-full cursor-pointer border-0 p-1 hover:dark:bg-transparent",onClick:e=>{if(e.preventDefault(),!Y.current)return;let l=Math.floor(Y.current.clientWidth/304);l<1&&(l=1),Y.current.scrollLeft+=304*l}

1,children:(0,t.jsx)(o.Z,{name:"ArrowForward",className:"text-md w-8 fill-slate-100 group-hover:scale-110"})})})]})})]})})}},6819:function(e,l,s){s.d(l,{Bw:function(){return f},DI:function(){return c},Ph:function(){return d},Ql:function(){return p},S_:function(){return v},i4:function(){return u},ki:function(){return o},n5:function(){return h}});var t=s(57437),a=s(2265),i=s(20653),r=s(56390),n=s(20939);let d=r.fC,c=r.ZA,o=r.B4,u=a.forwardRef((e,l)=>{let{className:s,children:a,...d}=e;return(0,t.jsxs)(r.xz,{ref:l,className:(0,n.cn)("flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-slate-200 bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-white placeholder:text-slate-500 focus:outline-none focus:ring-1 focus:ring-slate-950 disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-800 dark:ring-offset-slate-950 dark:placeholder:text-slate-400 dark:focus:ring-slate-500 [&>span]:line-clamp-1",s),...d,children:[a,(0,t.jsx)(r.JO,{asChild:!0,children:(0,t.jsx)(i.jnn,{className:"h-4 w-4 opacity-50"})})]})});u.displayName=r.xz.displayName;let x=a.forwardRef((e,l)=>{let{className:s,...a}=e;return(0,t.jsx)(r.u_,{ref:l,className:(0,n.cn)("flex cursor-default items-center justify-center py-1",s),...a,children:(0,t.jsx)(i.g8U,{})})});x.displayName=r.u_.displayName;let m=a.forwardRef((e,l)=>{let{className:s,...a}=e;return(0,t.jsx)(r.$G,{ref:l,className:(0,n.cn)("flex cursor-default items-center justify-center py-1",s),...a,children:(0,t.jsx)(i.v4q,{})})});m.displayName=r.$G.displayName;let f=a.forwardRef((e,l)=>{let{className:s,children:a,position:i="popper",...d}=e;return(0,t.jsx)(r.h_,{children:(0,t.jsxs)(r.VY,{ref:l,className:(0,n.cn)("relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border border-slate-200 bg-white text-slate-950 shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:border-slate-800 dark:bg-slate-950 dark:text-slate-50","popper"===i&&"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",s),position:i,...d,children:[(0,t.jsx)(x,{}),(0,t.jsx)(r.l_,{className:(0,n.cn)("p-1","popper"===i&&"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"),children:a}),(0,t.jsx)(m,{})]})})});f.displayName=r.VY.displayName;let h=a.forwardRef((e,l)=>{let{className:s,...a}=e;return(0,t.jsx)(r.__,{ref:l,className:(0,n.cn)("px-2 py-1.5 text-sm font-semibold",s),...a})});h.displayName=r.__.displayName;let p=a.forwardRef((e,l)=>{let{className:s,children:a,...d}=e;return(0,t.jsxs)(r.ck,{ref:l,className:(0,n.cn)("relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-slate-100 focus:text-slate-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-slate-800 dark:focus:text-slate-50",s),...d,children:[(0,t.jsx)("span",{className:"absolute right-2 flex h-3.5 w-3.5 items-center justify-center",children:(0,t.jsx)(r.wU,{children:(0,t.jsx)(i.nQG,{className:"h-4 w-4"})})}),a]})});p.displayName=r.ck.displayName;let v=r.eT;v.displayName=r.eT.displayName,a.forwardRef((e,l)=>{let{className:s,...a}=e;return(0,t.jsx)(r.Z0,{ref:l,className:(0,n.cn)("-mx-1 my-1 h-px bg-slate-100 dark:bg-slate-800",s),...a})}).displayName=r.Z0.displayName}}]);