import{d as T,P as $,s as i,j as v,O,Q as E,B as N,p as U,l as q,C as F,a as l,o,c as L,Y as w,b as r,N as M,g as V,h as c,u as s,$ as W,Z as A,L as Q,S as u,aj as h,a0 as Y,t as b,a6 as Z,ak as G,al as H}from"./index-IQ_epUwE.js";import{_ as J}from"./RowAutoGrid.vue_vue_type_script_setup_true_lang-DYE8NXEb.js";const K={key:0,class:"flex items-center justify-center w-full h-full mt-32"},X=["onClick"],ee=["src","srcset","onError","alt"],te={class:"text-[9rem] text-white"},se={class:"text-2xl text-gray-200 text-center font-lato line-clamp-1"},re=T({__name:"Profiles",setup(ae,{expose:C}){const R=$(),d=i.profiles.profiles,S=i.profiles.selected_profile,f=v(null),g=O(),{setRows:p}=E();function j(){p(x(),0)}const{getImageUrl:B,getSourceSet:I}=Q(),P=v(!1);function x(){return[f.value]}C({getPageRows:x}),N(async()=>{}),U(()=>{p([],0),f.value=null});const z=a=>{i.profiles.select_profile(a.profile_id),G(R.currentRoute.value,{path:"/"},{navigation_method:"profile_selected"});const t=H(a.profile_id);i.analytics.report_tv_page_interaction({page_name:g.name,interaction_type:"button_click",interaction_target:"profile_button",interaction_value:t.success?t.value:void 0})};q(d,async(a,t)=>{const e=Date.now();await F(),j();const n=Object.values(d).length===0?"no_profiles_detected":void 0,_=Date.now();i.analytics.report_tv_page_performance({page_name:g.name,load_time_ms:_-e,any_errors:!!n,error_details:n})},{immediate:!0});function m(a){return S.value?.profile_id===a.profile_id}function D(a,t){return a&&t?"cubic-bezier-transition-timing-in scale-[1.10]":!a&&t?"cubic-bezier-transition-timing-out scale-[1.00]":a&&!t?"cubic-bezier-transition-timing-in scale-[1.10]":"cubic-bezier-transition-timing-out scale-[1.00]"}function y(a,t){const e="rounded-2xl outline outline-4 outline-roon-primary outline-offset-4";return a?`${e}`:""}return(a,t)=>(o(),l("div",{class:c(["flex flex-col items-center justify-center p-6 pb-36 mb-12 mx-auto max-w-screen-lg",s(Z)])},[t[0]||(w(-1,!0),(t[0]=r("h1",{class:"text-8xl font-normal text-gray-100 font-grifo-l tracking-tight"},[t[1]||(t[1]=M("Who's listening?"))])).cacheIndex=0,w(1),t[0]),P.value?(o(),l("div",K,t[2]||(t[2]=[r("div",{class:"w-16 h-16 border-t-4 border-r-4 border-roon-primary rounded-full animate-spin"},null,-1)]))):(o(),L(J,{key:1,id:"profile-row",ref_key:"profileRow",ref:f,"make-key":(e,k)=>e.profile_id,cols:3,"center-if-less-than-cols":!0,items:Object.values(s(d)),"container-class":["mt-14"],"inner-container-class":["relative"],gap:"gap-12","focus-class":[],centerOnScreenWhenFocused:!0},{default:V(({item:e,index:k,isFocused:n})=>[r("button",{onClick:_=>z(e),class:c(["flex flex-col items-center w-full rounded-lg gap-2",D(n,m(e))])},[e.image_key&&!s(W)[e.image_key]?(o(),l("div",{key:0,class:c(["w-full h-full",y(n,m(e))])},[(o(),l("img",{key:e.image_key,src:s(B)(e.image_key),srcset:s(I)(e.image_key,[s(u).S320,s(u).S480,s(u).S640,s(u).S768,s(u).S1024]),sizes:"341px",onError:_=>s(A)(e.image_key),alt:e.name,class:"w-full aspect-square object-cover rounded-2xl"},null,40,ee))],2)):(o(),l("div",{key:1,class:c(["w-full aspect-square rounded-2xl",y(n,m(e))])},[r("div",{class:c(["w-full h-full rounded-2xl flex items-center justify-center",s(h)[s(Y)(e.profile_id,0,s(h).length-1)]])},[r("span",te,b(e.name.charAt(0).toUpperCase()),1)],2)],2)),r("span",se,b(e.name),1)],10,X)]),_:1},8,["make-key","items"]))],2))}});export{re as default};
