https://www.hololaunch.ai/_next/static/chunks/449.5bd2d1dba66599cf.js

1"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[449],{1292:(e,t,r)=>{r.d(t,{A:()=>o});var a=r(95155),n=r(12115);let l=()=>{let e=(0,n.useRef)(null),[t,r]=(0,n.useState)(!1),a=(0,n.useCallback)(()=>{e.current&&e.current.readyState>=4&&r(!0)},[]),l=(0,n.useCallback)(()=>r(!1),[]),i=(0,n.useCallback)(e=>{e.addEventListener("loadedmetadata",a),e.addEventListener("loadeddata",a),e.addEventListener("canplay",a),e.addEventListener("canplaythrough",a),e.addEventListener("abort",a),e.addEventListener("stalled",a),e.addEventListener("error",l)},[a,l]),s=(0,n.useCallback)(e=>{e.removeEventListener("loadedmetadata",a),e.removeEventListener("loadeddata",a),e.removeEventListener("canplay",a),e.removeEventListener("canplaythrough",a),e.removeEventListener("abort",a),e.removeEventListener("stalled",a),e.removeEventListener("error",l)},[a,l]),c=(0,n.useCallback)(t=>{e.current&&(s(e.current),r(!1)),e.current=t,e.current&&("requestVideoFrameCallback"in e.current&&e.current.requestVideoFrameCallback(()=>{r(!0)}),i(e.current),a())},[s,i,a]);return(0,n.useEffect)(()=>()=>{e.current&&s(e.current)},[s]),(0,n.useEffect)(()=>{t&&e.current&&(e.current.currentTime=0)},[t]),{isLoaded:t,ref:c,toggle:(0,n.useCallback)(async t=>{let r=e.current;if(r){if(t)return r.play().catch(()=>{});r.pause(),r.currentTime=0}},[])}};var i=r(41253),s=r(66766);let c=(0,n.memo)(e=>{let{name:t,src:r,aspectRatio:n,isLoaded:l,setIsLoaded:c}=e;return(0,a.jsx)("div",{className:(0,i.cn)("pointer-events-none relative w-full",r&&l?"opacity-100":"opacity-0"),style:{aspectRatio:"".concat(n)},children:r&&(0,a.jsx)(s.default,{alt:null!=t?t:"Thumbnail",className:"w-full object-cover object-center",draggable:"false",fill:!0,loading:"lazy",onLoad:()=>c(!0),sizes:"100%",src:r})})}),d=e=>{let{children:t,className:r}=e;return(0,a.jsx)("span",{className:(0,i.cn)("flex h-7 items-center justify-center truncate rounded-lg bg-black/48 px-2 py-1.5 font-body-xs text-[#FDFDFD] backdrop-blur-sm",r),children:t})},o=e=>{var t;let{name:r,config:s,visual:o,tag:u,play:p=!1,className:m}=e,[f,v]=(0,n.useState)(!1),{ref:h,isLoaded:y,toggle:b}=l(),k=(0,n.useMemo)(()=>{let[e,t]=s.aspectRatio.split(":").map(Number);return e/t},[s.aspectRatio]),j=(0,n.useCallback)(e=>{let t=e.currentTarget;t.duration-t.currentTime<3&&(t.currentTime=0)},[]);(0,n.useEffect)(()=>{if(!p)return void b(!1);let e=setTimeout(()=>{b(!0)},300*Math.random());return()=>clearTimeout(e)},[p,b]);let x=o.thumbnailUrl||(null==(t=o.inputArgs)?void 0:t.imageUrl),g=o.optimizedSrc||o.src;return(0,a.jsx)("div",{className:(0,i.cn)("group pointer-events-none flex h-fit w-full shrink-0 grow-0 flex-col items-stretch overflow-hidden rounded-[20px] transition-[opacity,transform] duration-1000 ease-out",f||y?"translate-y-0 opacity-100":"-translate-y-2 opacity-0",m),style:{contain:"layout style paint"},children:(0,a.jsxs)("div",{className:"relative h-fit min-h-0 w-full grow",children:[(0,a.jsx)(c,{aspectRatio:k,isLoaded:f,name:r,setIsLoaded:v,src:x}),(0,a.jsx)("video",{autoPlay:p,className:(0,i.cn)("absolute inset-0 h-full w-full object-cover object-center transition-opacity duration-200",y?"opacity-100":"opacity-0"),controls:!1,loop:!0,muted:!0,onTimeUpdate:j,playsInline:!0,poster:x,preload:"none",ref:h,src:g,style:{backfaceVisibility:"hidden",transform:"translateZ(0)",WebkitBackfaceVisibility:"hidden"}}),u&&(0,a.jsx)(d,{className:"absolute top-3 left-3",children:u})]})})}},22449:(e,t,r)=>{r.r(t),r.d(t,{default:()=>d});var a=r(95155),n=r(12115),l=r(38274),i=r(41253),s=r(76570),c=r(1292);let d=e=>{let{inView:t,className:r}=e,d=(0,n.useRef)(null),o=[s.kd[0],s.kd[1],s.kd[2],s.kd[3],s.kd[4],s.kd[5]],u=[s.kd[6],s.kd[7],s.kd[8],s.kd[9],s.kd[10]];return(0,a.jsxs)("div",{className:(0,i.cn)("grid h-screen grid-cols-2 items-center gap-x-3 overflow-hidden",r),ref:d,children:[(0,a.jsxs)("div",{className:(0,i.cn)("grid gap-y-3",t&&"animate-marquee-up"),children:[o.map(e=>(0,a.jsx)(l.A,{containerRef:d,injectProp:"play",inView:t,children:(0,a.jsx)(c.A,{...e})},e.id)),o.map(e=>(0,a.jsx)(l.A,{containerRef:d,injectProp:"play",inView:t,children:(0,a.jsx)(c.A,{...e})},"".concat(e.id,"-dup")))]}),(0,a.jsxs)("div",{className:(0,i.cn)("grid gap-y-3",t&&"animate-marquee-down"),children:[u.map(e=>(0,a.jsx)(l.A,{containerRef:d,injectProp:"play",inView:t,children:(0,a.jsx)(c.A,{...e})},e.id)),u.map(e=>(0,a.jsx)(l.A,{containerRef:d,injectProp:"play",inView:t,children:(0,a.jsx)(c.A,{...e})},"".concat(e.id,"-dup")))]})]})}},38274:(e,t,r)=>{r.d(t,{A:()=>i});var a=r(95155),n=r(12115),l=r(3096);let i=e=>{let{containerRef:t,inView:r=!1,threshold:i=.8,injectProp:s,children:c,className:d}=e,{ref:o,inView:u}=(0,l.Wx)({root:t.current,skip:!r,threshold:i});return(0,a.jsx)("div",{className:d,ref:o,children:(0,n.cloneElement)(c,{[s]:r&&u})})}}}]);