https://konst24.se/_next/static/chunks/9844.7263b83eefdb4dd5.js

1"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[9844],{69844:(e,t,r)=>{r.r(t),r.d(t,{default:()=>u});var n=r(95155),a=r(12115),s=r(98500),l=r.n(s);let i=(0,a.memo)(function({videoUrl:e,posterUrl:t,active:r}){let s=(0,a.useRef)(null);return(0,a.useEffect)(()=>{let t=s.current;if(!t)return;if(!r){t.pause(),t.src&&(t.removeAttribute("src"),t.load());return}!function(e,t){if(!t)return!e.src;try{return e.src===new URL(t,window.location.origin).href}catch{return e.getAttribute("src")===t}}(t,e)&&(t.src=e);let n=()=>{t.play().catch(()=>{})};return t.readyState>=HTMLMediaElement.HAVE_CURRENT_DATA?n():(t.addEventListener("loadeddata",n,{once:!0}),t.addEventListener("canplay",n,{once:!0})),()=>{t.removeEventListener("loadeddata",n),t.removeEventListener("canplay",n)}},[r,e]),(0,n.jsx)("div",{className:"absolute inset-0 overflow-hidden bg-black",children:(0,n.jsx)("video",{ref:s,poster:t,muted:!0,loop:!0,playsInline:!0,preload:r?"metadata":"none",className:"absolute inset-0 h-full w-full object-cover object-center","aria-hidden":!0})})});function c({items:e,className:t="",locale:r="sv"}){let s=(0,a.useRef)(null),l=(0,a.useRef)(null),i=(0,a.useRef)(0),u=(0,a.useRef)(0),d=(0,a.useRef)(0),f=(0,a.useRef)(!1),m=(0,a.useRef)(0),h=(0,a.useRef)(!1),v=(0,a.useMemo)(()=>Array.isArray(e)?e.filter(e=>e?.videoUrl).slice(0,6):[],[e]),w=v.length,[p,b]=(0,a.useState)(400),[g,x]=(0,a.useState)(200),[y,E]=(0,a.useState)(0),[k,N]=(0,a.useState)(3),[j,M]=(0,a.useState)(!1),[L,A]=(0,a.useState)(!1),[S,R]=(0,a.useState)(()=>new Set),[C,z]=(0,a.useState)(!1),U=!C,I=p<=767?36:48,T=(0,a.useMemo)(()=>w<1||k<1?[]:Array.from({length:k},()=>v).flat(),[v,k,w]),$=(0,a.useCallback)(e=>{let t=l.current;t&&(t.style.transform=`translate3d(${e}px, 0, 0)`)},[]),_=(0,a.useCallback)(()=>{if(w<1)return;let e=window.innerWidth;b(e);let t=e<640?160:e<1024?180:200;x(t);let r=w<=0?0:1===w?t:w*t+(w-1)*12;N(Math.min(12,Math.max(3,Math.ceil(2.5*e/Math.max(r,1))+1))),E(r),i.current=0,$(0)},[w,$]);(0,a.useLayoutEffect)(()=>{_()},[_]),(0,a.useEffect)(()=>{let e=()=>_(),t=()=>_();return window.addEventListener("resize",e),window.addEventListener("pageshow",t),()=>{window.removeEventListener("resize",e),window.removeEventListener("pageshow",t)}},[_]),(0,a.useEffect)(()=>{if(!L||function(){if("u"<typeof navigator)return!1;let e=navigator.connection;return!!e?.saveData||e?.effectiveType==="2g"||e?.effectiveType==="slow-2g"}())return void M(!1);let e=2200*!h.current,t=window.setTimeout(()=>{h.current=!0,M(!0)},e);return()=>window.clearTimeout(t)},[L]),(0,a.useEffect)(()=>{let e=window.matchMedia("(prefers-reduced-motion: reduce)"),t=()=>z(e.matches);return t(),e.addEventListener("change",t),()=>e.removeEventListener("change",t)},[]),(0,a.useEffect)(()=>{let e=()=>{f.current=document.hidden||!U};return e(),document.addEventListener("visibilitychange",e),()=>document.removeEventListener("visibilitychange",e)},[U]),(0,a.useEffect)(()=>{let e=s.current;if(!e||!U)return;let t=new IntersectionObserver(([e])=>{A(e.isIntersecting),!document.hidden&&U&&(f.current=!e.isIntersecting)},{rootMargin:"80px",threshold:.01});return t.observe(e),()=>t.disconnect()},[U,w]);let H=(0,a.useCallback)(e=>{R(t=>{let r=new Set(e);return t.size===r.size&&[...t].every(e=>r.has(e))?t:r})},[]),F=(0,a.useCallback)(()=>{let e=s.current?.clientWidth??p,t=g+12,r=i.current,n=new Map;for(let a=0;a<T.length;a++){let s=a*t+r,l=s+g;if(l<0||s>e)continue;let i=(Math.min(l,e)-Math.max(s,0))/Math.max(g,1);i>=.35&&n.set(a,i)}let a=[...n.entries()].sort((e,t)=>t[1]-e[1]).map(([e])=>e),l=new Set,c=[];for(let e of a){let t=T[e]?.videoUrl;if(!(!t||l.has(t))&&(l.add(t),c.push(e),c.length>=1))break}H(c)},[g,H,T,1,p]),W=(0,a.useCallback)(e=>{if(f.current||y<=0||0===d.current){d.current=e,u.current=requestAnimationFrame(W);return}let t=(e-d.current)/1e3;d.current=e,i.current-=I*t,i.current<-y?i.current+=y:i.current>0&&(i.current-=y),$(i.current),j&&e-m.current>700&&(m.current=e,F()),u.current=requestAnimationFrame(W)},[y,$,j,F,I]);(0,a.useEffect)(()=>(u.current=requestAnimationFrame(W),()=>cancelAnimationFrame(u.current)),[W]),(0,a.useEffect)(()=>{j&&F()},[j,F,T.length]);let q=(0,a.useCallback)(()=>{f.current=!0},[]),D=(0,a.useCallback)(()=>{f.current=!1},[]);if(0===w)return null;let G=Math.round(16*g/9);return(0,n.jsx)("div",{ref:s,className:`overflow-x-hidden scrollbar-hide ${t}`,style:{scrollbarWidth:"none",msOverflowStyle:"none",minHeight:G,cursor:"default",userSelect:"none",touchAction:"pan-y"},children:(0,n.jsx)("div",{ref:l,className:"flex w-max flex-shrink-0 will-change-transform",style:{gap:12,transform:`translate3d(${i.current}px, 0, 0)`},children:T.map((e,t)=>(0,n.jsx)(o,{beltIndex:t,item:e,cardWidth:g,locale:r,active:!C&&j&&S.has(t),onHoverStart:q,onHoverEnd:D},`${e.id}-${t}`))})})}let o=(0,a.memo)(function({item:e,cardWidth:t,beltIndex:r,active:a,locale:s,onHoverStart:c,onHoverEnd:o}){return(0,n.jsxs)("div",{"data-belt-index":r,className:"relative flex-shrink-0 overflow-hidden border border-gray-200 bg-black shadow-sm dark:border-gray-700 rounded-xl",style:{width:t,aspectRatio:"9/16"},onMouseEnter:c,onMouseLeave:o,children:[(0,n.jsx)(i,{videoUrl:e.videoUrl,posterUrl:e.posterUrl,active:a}),(0,n.jsxs)("div",{className:"pointer-events-none absolute inset-x-0 bottom-0 z-10 bg-gradient-to-t from-black via-black/75 to-transparent px-2.5 pb-2.5 pt-9",children:[(0,n.jsx)("p",{className:"text-xs font-medium leading-snug text-white line-clamp-2",children:e.title}),e.artistName&&(0,n.jsx)("p",{className:"mt-0.5 text-[10px] leading-snug text-white/85 line-clamp-1",children:e.artistName})]}),e.artistImage&&(0,n.jsx)("div",{className:"absolute top-2 left-2 z-10 w-8 h-8 rounded-full overflow-hidden border border-white/80 pointer-events-none",children:(0,n.jsx)("img",{src:e.artistImage,alt:"",width:32,height:32,className:"w-full h-full object-cover",loading:"lazy",decoding:"async"})}),e.href?(0,n.jsx)(l(),{href:e.href,prefetch:!1,className:"absolute inset-0 z-20","aria-label":e.artistName?`Go to ${e.artistName} gallery`:"Go to artist gallery"}):null]})});function u({items:e,locale:t="sv"}){let r=Array.isArray(e)?e:[];return(0,n.jsx)(c,{items:r,locale:t,className:"w-full py-3 sm:py-4"})}}}]);