react-instagram-stories 1.0.4 → 1.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +364 -308
- package/dist/index.cjs +9 -8
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +67 -5
- package/dist/index.d.ts +67 -5
- package/dist/index.js +9 -8
- package/dist/index.js.map +1 -1
- package/dist/styles.css +59 -388
- package/package.json +4 -7
package/dist/index.cjs
CHANGED
|
@@ -1,18 +1,19 @@
|
|
|
1
|
-
'use strict';var E=require('react'),reactRouterDom=require('react-router-dom'),jsxRuntime=require('react/jsx-runtime'),reactDom=require('react-dom');function _interopDefault(e){return e&&e.__esModule?e:{default:e}}var E__default=/*#__PURE__*/_interopDefault(E);var ae=E.memo(({avatarUrl:e,username:r,hasUnreadStories:o=false,onClick:n})=>{let[l,i]=E.useState(false),[a,c]=E.useState(false);return jsxRuntime.jsxs("button",{className:`story-avatar ${o?"story-avatar-unread":"story-avatar-read"}`,onClick:n,"aria-label":`View ${r}'s story`,children:[jsxRuntime.jsx("div",{className:"story-avatar-ring",children:jsxRuntime.jsx("div",{className:"story-avatar-image-wrapper",children:a?jsxRuntime.jsx("div",{className:"story-avatar-placeholder",children:r.charAt(0).toUpperCase()}):jsxRuntime.jsx("img",{src:e,alt:r,className:`story-avatar-image ${l?"story-avatar-image-loaded":""}`,loading:"lazy",onLoad:()=>i(true),onError:()=>c(true)})})}),jsxRuntime.jsx("span",{className:"story-avatar-username",children:r})]})});ae.displayName="Avatar";var q=90,Se=3,X=E.memo(({users:e,onAvatarClick:r})=>{let o=E.useRef(null),[n,l]=E.useState(0),[i,a]=E.useState(0),c=E.useCallback(()=>{o.current&&l(o.current.scrollLeft);},[]);E.useEffect(()=>{let u=()=>{o.current&&a(o.current.clientWidth);};return u(),window.addEventListener("resize",u),()=>{window.removeEventListener("resize",u);}},[]);let{startIndex:t,endIndex:m}=E__default.default.useMemo(()=>{let u=Math.floor(n/q),g=Math.ceil(i/q);return {startIndex:Math.max(0,u-Se),endIndex:Math.min(e.length,u+g+Se)}},[n,i,e.length]),d=e.length*q,s=e.slice(t,m).map((u,g)=>({user:u,index:t+g}));return jsxRuntime.jsx("div",{ref:o,className:"story-avatar-list",onScroll:c,role:"list","aria-label":"Stories",children:jsxRuntime.jsx("div",{className:"story-avatar-list-inner",style:{width:`${d}px`,position:"relative"},children:s.map(({user:u,index:g})=>jsxRuntime.jsx("div",{className:"story-avatar-item",style:{position:"absolute",left:`${g*q}px`,width:`${q}px`},role:"listitem",children:jsxRuntime.jsx(ae,{avatarUrl:u.avatarUrl,username:u.username,hasUnreadStories:u.hasUnreadStories,onClick:()=>r(g)})},u.id))})})});X.displayName="AvatarList";var Ie=({duration:e,onComplete:r,autoStart:o=true})=>{let[n,l]=E.useState(0),[i,a]=E.useState(!o),[c,t]=E.useState(e),m=E.useRef(null),d=E.useRef(0),s=E.useRef(null),u=E.useRef(),g=E.useCallback(()=>{if(!m.current||i)return;let _=Date.now()-m.current+d.current,R=Math.min(_/c,1);if(l(R),R>=1){r?.();return}s.current=requestAnimationFrame(u.current);},[c,i,r]);u.current=g;let f=E.useCallback(()=>{i||(m.current&&(d.current+=Date.now()-m.current),a(true),s.current&&(cancelAnimationFrame(s.current),s.current=null));},[i]),v=E.useCallback(()=>{i&&(m.current=Date.now(),a(false));},[i]),S=E.useCallback(()=>{s.current&&(cancelAnimationFrame(s.current),s.current=null),m.current=Date.now(),d.current=0,l(0),a(false),s.current=requestAnimationFrame(u.current);},[]),T=E.useCallback(_=>{t(_);},[]);return E.useEffect(()=>(i||(m.current=Date.now(),s.current=requestAnimationFrame(u.current)),()=>{s.current&&cancelAnimationFrame(s.current);}),[i]),E.useEffect(()=>()=>{s.current&&cancelAnimationFrame(s.current);},[]),{progress:n,isPaused:i,pause:f,resume:v,reset:S,setDuration:T}};var Ce=({onLeft:e,onRight:r,onSpace:o,onEscape:n,enabled:l=true})=>{E.useEffect(()=>{if(!l)return;let i=a=>{switch(a.key){case "ArrowLeft":a.preventDefault(),e?.();break;case "ArrowRight":a.preventDefault(),r?.();break;case " ":a.preventDefault(),o?.();break;case "Escape":a.preventDefault(),n?.();break}};return window.addEventListener("keydown",i),()=>{window.removeEventListener("keydown",i);}},[e,r,o,n,l]);};var Ee=e=>{let r=E.useRef(null),o=E.useRef(null);return E.useEffect(()=>{if(!e||!r.current)return;o.current=document.activeElement;let n=r.current,l=n.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'),i=l[0],a=l[l.length-1];i?.focus();let c=t=>{t.key==="Tab"&&(t.shiftKey?document.activeElement===i&&(t.preventDefault(),a?.focus()):document.activeElement===a&&(t.preventDefault(),i?.focus()));};return n.addEventListener("keydown",c),()=>{n.removeEventListener("keydown",c),o.current?.focus();}},[e]),r};var Pe=()=>{let[e,r]=E.useState(!document.hidden);return E.useEffect(()=>{let o=()=>{r(!document.hidden);};return document.addEventListener("visibilitychange",o),()=>{document.removeEventListener("visibilitychange",o);}},[]),e};var Le=()=>{let e=E.useRef({}),r=E.useRef(new Set),o=E.useCallback(t=>new Promise((m,d)=>{if(e.current[t]){m();return}if(r.current.has(t)){let u=setInterval(()=>{(e.current[t]||!r.current.has(t))&&(clearInterval(u),m());},100);return}r.current.add(t);let s=new Image;s.onload=()=>{e.current[t]=true,r.current.delete(t),m();},s.onerror=()=>{r.current.delete(t),d(new Error(`Failed to load image: ${t}`));},s.src=t;}),[]),n=E.useCallback(t=>new Promise((m,d)=>{if(e.current[t]){m();return}if(r.current.has(t)){let v=setInterval(()=>{(e.current[t]||!r.current.has(t))&&(clearInterval(v),m());},100);return}r.current.add(t);let s=document.createElement("video");s.preload="auto";let u=()=>{e.current[t]=true,r.current.delete(t),f(),m();},g=()=>{r.current.delete(t),f(),d(new Error(`Failed to load video: ${t}`));},f=()=>{s.removeEventListener("canplaythrough",u),s.removeEventListener("error",g),s.src="";};s.addEventListener("canplaythrough",u),s.addEventListener("error",g),s.src=t,s.load();}),[]),l=E.useCallback(async t=>{try{t.type==="image"&&"src"in t?await o(t.src):t.type==="video"&&"src"in t&&await n(t.src);}catch(m){console.warn("Failed to preload story item:",m);}},[o,n]),i=E.useCallback(async t=>{let d=[];for(let s=0;s<t.length;s+=3)d.push(t.slice(s,s+3));for(let s of d)await Promise.allSettled(s.map(l));},[l]),a=E.useCallback(t=>e.current[t]||false,[]),c=E.useCallback(()=>{e.current={},r.current.clear();},[]);return E.useEffect(()=>()=>{c();},[c]),{preloadImage:o,preloadVideo:n,preloadStoryItem:l,preloadMultiple:i,isPreloaded:a,clearCache:c}};var le=E.memo(({progress:e,isActive:r})=>{let o=Math.round(e*100);return jsxRuntime.jsx("div",{className:"story-progress-bar",role:"progressbar","aria-valuenow":r?o:e===1?100:0,"aria-valuemin":0,"aria-valuemax":100,"aria-label":`Story progress: ${o}%`,children:jsxRuntime.jsx("div",{className:"story-progress-bar-fill",style:{transform:`scaleX(${r?e:e===1?1:0})`}})})});le.displayName="ProgressBar";var ce=E.memo(({total:e,currentIndex:r,progress:o})=>jsxRuntime.jsx("div",{className:"story-progress-bars-container",children:Array.from({length:e}).map((n,l)=>jsxRuntime.jsx(le,{progress:l<r?1:l===r?o:0,isActive:l===r},l))}));ce.displayName="StoryProgressBars";var de=E.memo(({item:e,isActive:r,isPaused:o,onDurationDetected:n,onLoadError:l,onBufferingChange:i,controls:a})=>{let c=E.useRef(null),[t,m]=E.useState(false),[d,s]=E.useState(true);E.useEffect(()=>{if(e.type!=="video"||!c.current||!r)return;let f=c.current;(async()=>{try{o?f.pause():await f.play();}catch(S){console.warn("Video play failed:",S);}})();},[e.type,r,o]),E.useEffect(()=>{if(e.type!=="video"||!c.current)return;let f=c.current,v=()=>{f.duration&&isFinite(f.duration)&&n?.(f.duration*1e3);},S=()=>{s(false);};return f.addEventListener("loadedmetadata",v),f.addEventListener("canplay",S),f.readyState>=1&&v(),f.readyState>=3&&S(),()=>{f.removeEventListener("loadedmetadata",v),f.removeEventListener("canplay",S);}},[e.type,n]),E.useEffect(()=>{if(e.type!=="video"||!c.current||!r)return;let f=c.current,v=()=>{i?.(true);},S=()=>{i?.(false);},T=()=>{i?.(true);};return f.addEventListener("waiting",v),f.addEventListener("playing",S),f.addEventListener("stalled",T),()=>{f.removeEventListener("waiting",v),f.removeEventListener("playing",S),f.removeEventListener("stalled",T);}},[e.type,r,i]),E.useEffect(()=>{if(e.type!=="video"||!c.current||!r)return;let f=c.current,v,S=()=>{f.duration&&isFinite(f.duration),v=requestAnimationFrame(S);};return v=requestAnimationFrame(S),()=>{cancelAnimationFrame(v);}},[e.type,r]);let u=E.useCallback(()=>{m(true),s(false),l?.();},[l]),g=E.useCallback(()=>{s(false);},[]);if(t)return jsxRuntime.jsx("div",{className:"story-item story-item-error",children:jsxRuntime.jsx("div",{className:"story-item-error-message",children:"Failed to load content"})});switch(e.type){case "image":return jsxRuntime.jsxs("div",{className:"story-item story-item-image",children:[d&&jsxRuntime.jsx("div",{className:"story-item-loader",children:jsxRuntime.jsx("div",{className:"story-item-spinner"})}),jsxRuntime.jsx("img",{src:e.src,alt:e.alt||"Story image",onError:u,onLoad:g,draggable:false,style:{opacity:d?0:1}})]});case "video":return jsxRuntime.jsxs("div",{className:"story-item story-item-video",children:[d&&jsxRuntime.jsx("div",{className:"story-item-loader",children:jsxRuntime.jsx("div",{className:"story-item-spinner"})}),jsxRuntime.jsx("video",{ref:c,src:e.src,playsInline:true,loop:false,onError:u,preload:"auto",style:{opacity:d?0:1}})]});case "text":return jsxRuntime.jsx("div",{className:"story-item story-item-text",style:{backgroundColor:e.backgroundColor||"#000",color:e.textColor||"#fff"},children:jsxRuntime.jsx("div",{className:"story-item-text-content",children:e.text})});case "custom_component":let f=e.component;return jsxRuntime.jsx("div",{className:"story-item story-item-component",children:jsxRuntime.jsx(f,{...a})});default:return null}});de.displayName="StoryItem";var A=5e3,ee=E__default.default.memo(({users:e,initialUserIndex:r,initialStoryIndex:o,isOpen:n,onClose:l,onStoryChange:i})=>{let[a,c]=E.useState(r),[t,m]=E.useState(o??0),[d,s]=E.useState(false);E.useEffect(()=>{c(r);},[r]),E.useEffect(()=>{m(o??0);},[o]);let[u,g]=E.useState(false),[f,v]=E.useState(null),[S,T]=E.useState(false),[_,R]=E.useState(false),me=E.useRef(null),fe=E.useRef(null),ye=E.useRef(0),ge=E.useRef(A),te=E.useRef(false),b=e[a],U=b?.stories[t],B=b?.stories.length||0;E.useEffect(()=>{ge.current=U?.duration||A;},[U?.duration]);let _e=Ee(n),re=Pe(),{preloadStoryItem:oe}=Le(),N=E.useCallback(()=>s(true),[]),z=E.useCallback(()=>s(false),[]),ve=E.useRef(),x=Ie({duration:ge.current||A,onComplete:()=>ve.current?.(),autoStart:false}),He=E.useCallback(y=>{y?x.pause():d||x.resume();},[x,d]);E.useEffect(()=>{let y=U?.duration||A;x.setDuration(y);},[x,U?.duration]);let k=E.useCallback(()=>{if(b)if(t<B-1){let y=t+1,I=b.stories[y]?.duration||A;m(y),x.setDuration(I),x.reset();}else a<e.length-1?(R(true),setTimeout(()=>{g(true),v("left"),setTimeout(()=>{let y=a+1,O=e[y].stories[0]?.duration||A;c(y),m(0),g(false),v(null),R(false),x.setDuration(O),x.reset();},150);},1e3)):l();},[b,t,B,a,e,x,l]),H=E.useCallback(()=>{if(b)if(t>0){let y=t-1,I=b.stories[y]?.duration||A;m(y),x.setDuration(I),x.reset();}else a>0&&(R(true),setTimeout(()=>{g(true),v("right"),setTimeout(()=>{let y=a-1,w=e[y],I=w.stories.length-1,he=w.stories[I]?.duration||A;c(y),m(I),g(false),v(null),R(false),x.setDuration(he),x.reset();},150);},1e3));},[b,t,a,e,x]),ne=E.useCallback(()=>{window.scrollTo(0,ye.current),l();},[l]);E.useEffect(()=>{ve.current=k;},[k]);let Oe=E.useMemo(()=>({pause:N,resume:z,next:k,prev:H,setDuration:y=>fe.current?.setDuration(y)}),[N,z,k,H]),Ke=E.useCallback(y=>{let w=y.target;if(w.closest(".story-viewer-close")||w.closest("button")||w.closest("input")||w.closest("select")||w.closest("textarea"))return;let I=me.current;if(!I)return;let O=I.getBoundingClientRect();y.clientX-O.left<O.width/2?H():k();},[H,k]),J=E.useRef(null),se=E.useRef(false),qe=E.useCallback(y=>{se.current=false,J.current={x:y.clientX,y:y.clientY},N();},[N]),Xe=E.useCallback(y=>{if(!J.current)return;let w=y.clientX-J.current.x,I=y.clientY-J.current.y;(Math.abs(w)>10||Math.abs(I)>10)&&(se.current=true);},[]);Ce({onLeft:H,onRight:k,onSpace:()=>d?z():N(),onEscape:ne,enabled:n}),E.useEffect(()=>{re?re&&!d&&z():N();},[re,N,z,d]),E.useEffect(()=>{if(!n||!b)return;let y=[];t<B-1&&y.push(b.stories[t+1]),t>0&&y.push(b.stories[t-1]),a<e.length-1&&y.push(e[a+1].stories[0]),a>0&&y.push(e[a-1].stories[0]);let w=y.slice(0,3).map(I=>oe(I).catch(()=>{}));Promise.all(w);},[n,b,a,t,B,e,oe]),E.useEffect(()=>(n&&!te.current?(te.current=true,T(true),U&&oe(U),setTimeout(()=>{T(false),ye.current=window.scrollY,document.body.style.overflow="hidden",x.resume();},1500)):n||(te.current=false,document.body.style.overflow="",T(false),R(false)),()=>{document.body.style.overflow="";}),[n,x]),E.useEffect(()=>{i&&n&&i(a,t);},[a,t,i,n]);let Ye=E.useCallback(()=>{console.warn("Story item failed to load, skipping..."),setTimeout(k,500);},[k]);if(!n||!b||!U)return null;let je=jsxRuntime.jsxs("div",{ref:me,className:"story-viewer",role:"dialog","aria-modal":"true","aria-label":`Stories by ${b?.username||"user"}`,"aria-describedby":"story-viewer-description",children:[jsxRuntime.jsx("div",{className:"story-viewer-overlay",onClick:ne}),jsxRuntime.jsx("div",{id:"story-viewer-description",className:"sr-only",children:"Instagram-style stories viewer. Tap left side to go to previous story, right side to go to next story. Swipe left or right to navigate between users. Press Escape to close."}),jsxRuntime.jsxs("div",{"aria-live":"polite","aria-atomic":"true",className:"sr-only",children:["Viewing story ",t+1," of ",B," by"," ",b?.username]}),jsxRuntime.jsxs("div",{ref:_e,className:`story-viewer-content ${u?`story-viewer-transitioning story-viewer-transition-${f}`:""}`,onClick:Ke,onPointerDown:qe,onPointerMove:Xe,onMouseEnter:N,onMouseLeave:z,children:[jsxRuntime.jsxs("div",{className:"story-viewer-header",children:[jsxRuntime.jsx(ce,{total:B,currentIndex:t,progress:x.progress}),jsxRuntime.jsxs("div",{className:"story-viewer-user-info",children:[jsxRuntime.jsx("img",{src:b.avatarUrl,alt:`${b.username} avatar`,className:"story-viewer-avatar"}),jsxRuntime.jsx("span",{className:"story-viewer-username",children:b.username})]}),jsxRuntime.jsx("button",{className:"story-viewer-close",onClick:ne,"aria-label":"Close story viewer",type:"button",children:"\xD7"})]}),jsxRuntime.jsx("div",{className:"story-viewer-items",children:S||_?jsxRuntime.jsx("div",{className:"story-item-loader",children:jsxRuntime.jsx("div",{className:"story-item-spinner"})}):jsxRuntime.jsx(de,{item:U,isActive:true,isPaused:d||se.current,onDurationDetected:y=>fe.current?.setDuration(y),onLoadError:Ye,onBufferingChange:He,controls:Oe})}),jsxRuntime.jsxs("div",{className:"story-viewer-nav-hints",children:[jsxRuntime.jsx("div",{className:"story-viewer-nav-hint story-viewer-nav-hint-left"}),jsxRuntime.jsx("div",{className:"story-viewer-nav-hint story-viewer-nav-hint-right"})]})]})]});return reactDom.createPortal(je,document.body)});function Ae(e,r){for(let o=0;o<e.length;o++){let l=e[o].stories.findIndex(i=>i.id===r);if(l!==-1)return {userIndex:o,storyIndex:l}}return null}var Be=({users:e,closeNavigateTo:r="/"})=>{let{storyId:o}=reactRouterDom.useParams(),n=reactRouterDom.useNavigate(),[l,i]=E.useState({isOpen:false,userIndex:0,storyIndex:0}),a=E.useRef(0);E.useEffect(()=>{if(o){let d=Ae(e,o);d&&i({isOpen:true,userIndex:d.userIndex,storyIndex:d.storyIndex});}},[o,e]);let c=E.useCallback(d=>{a.current=window.scrollY,i({isOpen:true,userIndex:d,storyIndex:0});let s=e[d];if(s&&s.stories.length>0){let u=s.stories[0].id;n(`/story/${u}`,{replace:true});}},[e,n]),t=E.useCallback(()=>{i({isOpen:false,userIndex:0,storyIndex:0}),requestAnimationFrame(()=>{window.scrollTo(0,a.current);}),n(r,{replace:true});},[n,r]),m=E.useCallback((d,s)=>{let u=e[d];if(u&&u.stories[s]){let g=u.stories[s].id;n(`/story/${g}`,{replace:true});}},[e,n]);return jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx(X,{users:e,onAvatarClick:c}),jsxRuntime.jsx(ee,{users:e,initialUserIndex:l.userIndex,initialStoryIndex:l.storyIndex,isOpen:l.isOpen,onClose:t,onStoryChange:m})]})};var $e=({pause:e,resume:r,next:o})=>{let[n,l]=E__default.default.useState(null),[i,a]=E__default.default.useState([42,28,18,12]);E__default.default.useEffect(()=>(e(),()=>r()),[e,r]);let c=d=>{l(d);let s=[...i];s[d]+=1,a(s),setTimeout(()=>{r(),o();},2e3);},t=i.reduce((d,s)=>d+s,0);return jsxRuntime.jsxs("div",{style:{display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",height:"100%",padding:"20px",width:"100%",background:"linear-gradient(135deg, #667eea 0%, #764ba2 100%)"},children:[jsxRuntime.jsx("h2",{style:{color:"white",marginBottom:"10px",fontSize:"28px",fontWeight:"bold"},children:"Poll"}),jsxRuntime.jsx("p",{style:{color:"rgba(255,255,255,0.9)",marginBottom:"30px",fontSize:"18px"},children:"What's your favorite framework?"}),jsxRuntime.jsx("div",{style:{width:"100%"},children:["React","Vue","Angular","Svelte"].map((d,s)=>{let u=Math.round(i[s]/t*100),g=n===s;return jsxRuntime.jsxs("button",{onClick:()=>n===null&&c(s),disabled:n!==null,style:{width:"100%",padding:"16px 20px",margin:"8px 0",border:"none",borderRadius:"12px",background:n!==null?`linear-gradient(90deg, rgba(255,255,255,0.4) ${u}%, rgba(255,255,255,0.15) ${u}%)`:"rgba(255,255,255,0.2)",color:"white",fontSize:"16px",fontWeight:"600",cursor:n===null?"pointer":"default",transition:"all 0.3s ease",display:"flex",justifyContent:"space-between",alignItems:"center",backdropFilter:"blur(10px)"},children:[jsxRuntime.jsxs("span",{style:{display:"flex",alignItems:"center",gap:"10px"},children:[g&&"\u2713 ",d]}),n!==null&&jsxRuntime.jsxs("span",{children:[u,"%"]})]},s)})}),n!==null&&jsxRuntime.jsxs("p",{style:{color:"rgba(255,255,255,0.8)",marginTop:"20px",fontSize:"14px"},children:[t," votes \u2022 Thanks for voting!"]})]})},Ve=({pause:e,resume:r,next:o})=>{let[n,l]=E__default.default.useState(false),[i,a]=E__default.default.useState(null),c=2;E__default.default.useEffect(()=>(e(),()=>r()),[e,r]);let t=d=>{a(d),l(true),setTimeout(()=>{r(),o();},2500);};return jsxRuntime.jsxs("div",{style:{display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",height:"100%",padding:"20px",width:"100%",background:"linear-gradient(135deg, #f093fb 0%, #f5576c 100%)"},children:[jsxRuntime.jsx("div",{style:{fontSize:"48px",marginBottom:"20px",animation:"bounce 1s infinite"},children:"\u{1FA90}"}),jsxRuntime.jsx("h2",{style:{color:"white",marginBottom:"10px",fontSize:"24px",fontWeight:"bold",textAlign:"center"},children:"Quiz Time!"}),jsxRuntime.jsx("p",{style:{color:"rgba(255,255,255,0.9)",marginBottom:"30px",fontSize:"18px",textAlign:"center"},children:"Which is the largest planet in our solar system?"}),jsxRuntime.jsx("div",{style:{width:"100%"},children:["Mars","Venus","Jupiter","Saturn"].map((d,s)=>{let u=s===c,g=i===s,f="rgba(255,255,255,0.2)";return n&&(u?f="rgba(34, 197, 94, 0.6)":g&&(f="rgba(239, 68, 68, 0.6)")),jsxRuntime.jsxs("button",{onClick:()=>!n&&t(s),disabled:n,style:{width:"100%",padding:"16px 20px",margin:"8px 0",border:"none",borderRadius:"12px",background:f,color:"white",fontSize:"16px",fontWeight:"600",cursor:n?"default":"pointer",transition:"all 0.3s ease",display:"flex",justifyContent:"space-between",alignItems:"center"},children:[jsxRuntime.jsx("span",{children:d}),n&&u&&jsxRuntime.jsx("span",{children:"\u2713"}),n&&g&&!u&&jsxRuntime.jsx("span",{children:"\u2717"})]},s)})}),n&&jsxRuntime.jsx("p",{style:{color:"white",marginTop:"20px",fontSize:"16px",fontWeight:"bold"},children:i===c?"\u{1F389} Correct!":"\u274C Wrong! Jupiter is the largest."})]})},wt=()=>{let[e,r]=E__default.default.useState({days:12,hours:8,minutes:45,seconds:30});E__default.default.useEffect(()=>{let n=setInterval(()=>{r(l=>{let{days:i,hours:a,minutes:c,seconds:t}=l;return t--,t<0&&(t=59,c--),c<0&&(c=59,a--),a<0&&(a=23,i--),{days:i,hours:a,minutes:c,seconds:t}});},1e3);return ()=>clearInterval(n)},[]);let o=({value:n,label:l})=>jsxRuntime.jsxs("div",{style:{textAlign:"center"},children:[jsxRuntime.jsx("div",{style:{background:"rgba(255,255,255,0.2)",backdropFilter:"blur(10px)",borderRadius:"12px",padding:"15px 20px",minWidth:"70px"},children:jsxRuntime.jsx("div",{style:{fontSize:"32px",fontWeight:"bold",color:"white"},children:String(n).padStart(2,"0")})}),jsxRuntime.jsx("div",{style:{color:"rgba(255,255,255,0.8)",fontSize:"12px",marginTop:"8px",textTransform:"uppercase"},children:l})]});return jsxRuntime.jsxs("div",{style:{display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",height:"100%",padding:"20px",width:"100%",background:"linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%)"},children:[jsxRuntime.jsx("div",{style:{fontSize:"48px",marginBottom:"15px"},children:"\u{1F680}"}),jsxRuntime.jsx("h2",{style:{color:"white",marginBottom:"8px",fontSize:"24px",fontWeight:"bold"},children:"Product Launch"}),jsxRuntime.jsx("p",{style:{color:"rgba(255,255,255,0.7)",marginBottom:"30px",fontSize:"14px"},children:"Something amazing is coming..."}),jsxRuntime.jsxs("div",{style:{display:"flex",gap:"12px",marginBottom:"30px"},children:[jsxRuntime.jsx(o,{value:e.days,label:"Days"}),jsxRuntime.jsx(o,{value:e.hours,label:"Hours"}),jsxRuntime.jsx(o,{value:e.minutes,label:"Mins"}),jsxRuntime.jsx(o,{value:e.seconds,label:"Secs"})]}),jsxRuntime.jsx("button",{style:{padding:"14px 40px",background:"linear-gradient(135deg, #667eea 0%, #764ba2 100%)",border:"none",borderRadius:"30px",color:"white",fontSize:"16px",fontWeight:"bold",cursor:"pointer"},children:"Notify Me"})]})},It=()=>jsxRuntime.jsxs("div",{style:{display:"flex",flexDirection:"column",height:"100%",background:"linear-gradient(180deg, #1a1a2e 0%, #16213e 100%)",position:"relative",overflow:"hidden"},children:[jsxRuntime.jsx("div",{style:{flex:1,display:"flex",alignItems:"center",justifyContent:"center",padding:"20px"},children:jsxRuntime.jsx("img",{src:"https://images.unsplash.com/photo-1523275335684-37898b6baf30?w=400&h=400&fit=crop",alt:"Product",style:{width:"100%",height:"100%",objectFit:"cover",borderRadius:"20px",boxShadow:"0 20px 60px rgba(0,0,0,0.5)"}})}),jsxRuntime.jsxs("div",{style:{padding:"30px",background:"linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.8) 100%)"},children:[jsxRuntime.jsxs("div",{style:{display:"flex",alignItems:"center",gap:"8px",marginBottom:"10px"},children:[jsxRuntime.jsx("span",{style:{background:"#ef4444",color:"white",padding:"4px 10px",borderRadius:"20px",fontSize:"12px",fontWeight:"bold"},children:"NEW"}),jsxRuntime.jsx("span",{style:{color:"rgba(255,255,255,0.6)",fontSize:"12px"},children:"Limited Edition"})]}),jsxRuntime.jsx("h2",{style:{color:"white",fontSize:"24px",fontWeight:"bold",marginBottom:"8px"},children:"Premium Watch Collection"}),jsxRuntime.jsx("p",{style:{color:"rgba(255,255,255,0.7)",fontSize:"14px",marginBottom:"15px"},children:"Elegant design meets modern technology"}),jsxRuntime.jsxs("div",{style:{display:"flex",alignItems:"center",gap:"15px"},children:[jsxRuntime.jsx("span",{style:{color:"white",fontSize:"28px",fontWeight:"bold"},children:"$299"}),jsxRuntime.jsx("span",{style:{color:"rgba(255,255,255,0.5)",fontSize:"18px",textDecoration:"line-through"},children:"$399"})]}),jsxRuntime.jsx("button",{style:{width:"100%",marginTop:"20px",padding:"16px",background:"white",border:"none",borderRadius:"12px",color:"#1a1a2e",fontSize:"16px",fontWeight:"bold",cursor:"pointer"},children:"Shop Now \u2192"})]})]}),We=({pause:e,resume:r,next:o})=>{let[n,l]=E__default.default.useState(5),[i,a]=E__default.default.useState(false);E__default.default.useEffect(()=>(e(),()=>r()),[e,r]);let c=()=>{a(true),setTimeout(()=>{r(),o();},1500);};return jsxRuntime.jsxs("div",{style:{display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",height:"100%",padding:"20px",width:"100%",background:"linear-gradient(135deg, #11998e 0%, #38ef7d 100%)"},children:[jsxRuntime.jsx("div",{style:{fontSize:"80px",marginBottom:"20px",transition:"all 0.3s"},children:["\u{1F622}","\u{1F615}","\u{1F610}","\u{1F642}","\u{1F60A}","\u{1F603}","\u{1F604}","\u{1F601}","\u{1F929}","\u{1F973}"][n-1]}),jsxRuntime.jsx("h2",{style:{color:"white",marginBottom:"10px",fontSize:"24px",fontWeight:"bold"},children:"Rate Your Experience"}),jsxRuntime.jsx("p",{style:{color:"rgba(255,255,255,0.9)",marginBottom:"30px",fontSize:"16px"},children:"How was your visit today?"}),i?jsxRuntime.jsxs("div",{style:{textAlign:"center"},children:[jsxRuntime.jsx("div",{style:{fontSize:"48px",marginBottom:"10px"},children:"\u{1F389}"}),jsxRuntime.jsx("p",{style:{color:"white",fontSize:"18px",fontWeight:"bold"},children:"Thanks for your feedback!"})]}):jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsxs("div",{style:{width:"100%",marginBottom:"20px"},children:[jsxRuntime.jsx("input",{type:"range",min:"1",max:"10",value:n,onChange:m=>l(parseInt(m.target.value)),style:{width:"100%",height:"8px",borderRadius:"4px",appearance:"none",background:"rgba(255,255,255,0.3)",cursor:"pointer"}}),jsxRuntime.jsxs("div",{style:{display:"flex",justifyContent:"space-between",color:"rgba(255,255,255,0.7)",fontSize:"12px",marginTop:"8px"},children:[jsxRuntime.jsx("span",{children:"1"}),jsxRuntime.jsx("span",{children:"10"})]})]}),jsxRuntime.jsxs("button",{onClick:c,style:{padding:"14px 50px",background:"white",border:"none",borderRadius:"30px",color:"#11998e",fontSize:"16px",fontWeight:"bold",cursor:"pointer"},children:["Submit (",n,"/10)"]})]})]})},j=["https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4","https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerEscapes.mp4","https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerFun.mp4"],ze=["https://images.unsplash.com/photo-1682687220742-aba13b6e50ba?w=1080&h=1920&fit=crop","https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=1080&h=1920&fit=crop","https://images.unsplash.com/photo-1469474968028-56623f02e42e?w=1080&h=1920&fit=crop","https://images.unsplash.com/photo-1426604966848-d7adac402bff?w=1080&h=1920&fit=crop","https://images.unsplash.com/photo-1472214103451-9374bd1c798e?w=1080&h=1920&fit=crop","https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=1080&h=1920&fit=crop","https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=1080&h=1920&fit=crop","https://images.unsplash.com/photo-1517841905240-472988babdf9?w=1080&h=1920&fit=crop"],W=["https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=150&h=150&fit=crop","https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=150&h=150&fit=crop","https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=150&h=150&fit=crop","https://images.unsplash.com/photo-1517841905240-472988babdf9?w=150&h=150&fit=crop","https://images.unsplash.com/photo-1539571696357-5a69c17a67c6?w=150&h=150&fit=crop","https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=150&h=150&fit=crop"],pe=[{id:"user-travel",username:"Travel",avatarUrl:W[0],hasUnreadStories:true,stories:[{id:"travel-1",type:"image",src:"https://images.unsplash.com/photo-1682687220742-aba13b6e50ba?w=1080&h=1920&fit=crop",duration:5e3,alt:"Beautiful mountain landscape"},{id:"travel-2",type:"image",src:"https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=1080&h=1920&fit=crop",duration:5e3,alt:"Scenic ocean view"},{id:"travel-3",type:"text",text:`Adventure awaits! \u{1F30D}
|
|
1
|
+
'use strict';var V=require('react'),jsxRuntime=require('react/jsx-runtime'),reactDom=require('react-dom');function _interopDefault(e){return e&&e.__esModule?e:{default:e}}var V__default=/*#__PURE__*/_interopDefault(V);function x(...e){return e.filter(Boolean).join(" ")}function He(e,r){let s=parseInt(r,10);return !isNaN(s)&&s>=0&&s<e.length?s:e.findIndex(o=>o.id===r)}function Xe(e,r){let s=parseInt(r,10);return !isNaN(s)&&s>=0&&s<e.stories.length?s:e.stories.findIndex(o=>o.id===r)}var Fe=V.memo(({avatarUrl:e,username:r,hasUnreadStories:s=false,onClick:o,classNames:u})=>{let[d,l]=V.useState(false),[c,t]=V.useState(false);return jsxRuntime.jsxs("button",{className:x("story-avatar",s?"story-avatar-unread":"story-avatar-read",u?.root),onClick:o,"aria-label":`View ${r}'s story`,children:[jsxRuntime.jsx("div",{className:x("story-avatar-ring",u?.ring),children:jsxRuntime.jsx("div",{className:x("story-avatar-image-wrapper",u?.imageWrapper),children:c?jsxRuntime.jsx("div",{className:x("story-avatar-placeholder",u?.placeholder),children:r.charAt(0).toUpperCase()}):jsxRuntime.jsx("img",{src:e,alt:r,className:x("story-avatar-image",d&&"story-avatar-image-loaded",u?.image),loading:"lazy",onLoad:()=>l(true),onError:()=>t(true)})})}),jsxRuntime.jsx("span",{className:x("story-avatar-username",u?.username),children:r})]})});Fe.displayName="Avatar";var le=90,Oe=3,ce=V.memo(({users:e,onAvatarClick:r,classNames:s})=>{let o=V.useRef(null),[u,d]=V.useState(0),[l,c]=V.useState(0),t=V.useCallback(()=>{o.current&&d(o.current.scrollLeft);},[]);V.useEffect(()=>{let y=()=>{o.current&&c(o.current.clientWidth);};return y(),window.addEventListener("resize",y),()=>{window.removeEventListener("resize",y);}},[]);let{startIndex:h,endIndex:b}=V__default.default.useMemo(()=>{let y=Math.floor(u/le),C=Math.ceil(l/le);return {startIndex:Math.max(0,y-Oe),endIndex:Math.min(e.length,y+C+Oe)}},[u,l,e.length]),i=e.length*le,I=e.slice(h,b).map((y,C)=>({user:y,index:h+C}));return jsxRuntime.jsx("div",{ref:o,className:x("story-avatar-list",s?.root),onScroll:t,role:"list","aria-label":"Stories",children:jsxRuntime.jsx("div",{className:"story-avatar-list-inner",style:{width:`${i}px`,position:"relative"},children:I.map(({user:y,index:C})=>jsxRuntime.jsx("div",{className:"story-avatar-item",style:{position:"absolute",left:`${C*le}px`,width:`${le}px`},role:"listitem",children:jsxRuntime.jsx(Fe,{avatarUrl:y.avatarUrl,username:y.username,hasUnreadStories:y.hasUnreadStories,onClick:()=>r(C),classNames:s?.avatar})},y.id))})})});ce.displayName="AvatarList";var Qe=({duration:e,onComplete:r,autoStart:s=true})=>{let[o,u]=V.useState(0),[d,l]=V.useState(!s),[c,t]=V.useState(e),h=V.useRef(null),b=V.useRef(0),i=V.useRef(null),I=V.useRef(),y=V.useCallback(()=>{if(!h.current||d)return;let A=Date.now()-h.current+b.current,H=Math.min(A/c,1);if(u(H),H>=1){r?.();return}i.current=requestAnimationFrame(I.current);},[c,d,r]);I.current=y;let C=V.useCallback(()=>{d||(h.current&&(b.current+=Date.now()-h.current),l(true),i.current&&(cancelAnimationFrame(i.current),i.current=null));},[d]),a=V.useCallback(()=>{d&&(h.current=Date.now(),l(false));},[d]),k=V.useCallback(()=>{i.current&&(cancelAnimationFrame(i.current),i.current=null),h.current=Date.now(),b.current=0,u(0),l(false),i.current=requestAnimationFrame(I.current);},[]),w=V.useCallback(A=>{t(A);},[]);return V.useEffect(()=>(d||(h.current=Date.now(),i.current=requestAnimationFrame(I.current)),()=>{i.current&&cancelAnimationFrame(i.current);}),[d]),V.useEffect(()=>()=>{i.current&&cancelAnimationFrame(i.current);},[]),{progress:o,isPaused:d,pause:C,resume:a,reset:k,setDuration:w}};var Ke=({onLeft:e,onRight:r,onSpace:s,onEscape:o,enabled:u=true})=>{V.useEffect(()=>{if(!u)return;let d=l=>{switch(l.key){case "ArrowLeft":l.preventDefault(),e?.();break;case "ArrowRight":l.preventDefault(),r?.();break;case " ":l.preventDefault(),s?.();break;case "Escape":l.preventDefault(),o?.();break}};return window.addEventListener("keydown",d),()=>{window.removeEventListener("keydown",d);}},[e,r,s,o,u]);};var Ze=e=>{let r=V.useRef(null),s=V.useRef(null);return V.useEffect(()=>{if(!e||!r.current)return;s.current=document.activeElement;let o=r.current,u=o.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'),d=u[0],l=u[u.length-1];d?.focus();let c=t=>{t.key==="Tab"&&(t.shiftKey?document.activeElement===d&&(t.preventDefault(),l?.focus()):document.activeElement===l&&(t.preventDefault(),d?.focus()));};return o.addEventListener("keydown",c),()=>{o.removeEventListener("keydown",c),s.current?.focus();}},[e]),r};var Je=()=>{let[e,r]=V.useState(!document.hidden);return V.useEffect(()=>{let s=()=>{r(!document.hidden);};return document.addEventListener("visibilitychange",s),()=>{document.removeEventListener("visibilitychange",s);}},[]),e};var et=()=>{let e=V.useRef({}),r=V.useRef(new Set),s=V.useCallback(t=>new Promise((h,b)=>{if(e.current[t]==="loaded"){h();return}if(e.current[t]==="failed"){b(new Error(`Previously failed to load image: ${t}`));return}if(r.current.has(t)){let I=setInterval(()=>{(e.current[t]!=null||!r.current.has(t))&&(clearInterval(I),h());},100);return}r.current.add(t);let i=new Image;i.onload=()=>{e.current[t]="loaded",r.current.delete(t),h();},i.onerror=()=>{e.current[t]="failed",r.current.delete(t),b(new Error(`Failed to load image: ${t}`));},i.src=t;}),[]),o=V.useCallback(t=>new Promise((h,b)=>{if(e.current[t]==="loaded"){h();return}if(e.current[t]==="failed"){b(new Error(`Previously failed to load video: ${t}`));return}if(r.current.has(t)){let a=setInterval(()=>{(e.current[t]!=null||!r.current.has(t))&&(clearInterval(a),h());},100);return}r.current.add(t);let i=document.createElement("video");i.preload="auto";let I=()=>{e.current[t]="loaded",r.current.delete(t),C(),h();},y=()=>{e.current[t]="failed",r.current.delete(t),C(),b(new Error(`Failed to load video: ${t}`));},C=()=>{i.removeEventListener("canplaythrough",I),i.removeEventListener("error",y),i.src="";};i.addEventListener("canplaythrough",I),i.addEventListener("error",y),i.src=t,i.load();}),[]),u=V.useCallback(async t=>{try{t.type==="image"&&"src"in t?await s(t.src):t.type==="video"&&"src"in t&&await o(t.src);}catch(h){console.warn("Failed to preload story item:",h);}},[s,o]),d=V.useCallback(async t=>{let b=[];for(let i=0;i<t.length;i+=3)b.push(t.slice(i,i+3));for(let i of b)await Promise.allSettled(i.map(u));},[u]),l=V.useCallback(t=>e.current[t]==="loaded",[]),c=V.useCallback(()=>{e.current={},r.current.clear();},[]);return V.useEffect(()=>()=>{c();},[c]),{preloadImage:s,preloadVideo:o,preloadStoryItem:u,preloadMultiple:d,isPreloaded:l,clearCache:c}};function tt(){let[e,r]=V.useState(()=>new URLSearchParams(window.location.search));V.useEffect(()=>{let o=()=>{r(new URLSearchParams(window.location.search));};return window.addEventListener("popstate",o),()=>window.removeEventListener("popstate",o)},[]);let s=V.useCallback((o,u={})=>{let d=typeof o=="function"?o(new URLSearchParams(window.location.search)):o,l=new URLSearchParams(d).toString(),c=l?`${window.location.pathname}?${l}`:window.location.pathname;u.replace?window.history.replaceState({},"",c):window.history.pushState({},"",c),r(new URLSearchParams(l));},[]);return [e,s]}function Re(e,r){let s=new URLSearchParams(e).toString(),o=s?`${window.location.pathname}?${s}`:window.location.pathname;r?.replace?window.history.replaceState({},"",o):window.history.pushState({},"",o),window.dispatchEvent(new PopStateEvent("popstate"));}function Xt(e){let r=window.location.pathname;e?.replace?window.history.replaceState({},"",r):window.history.pushState({},"",r),window.dispatchEvent(new PopStateEvent("popstate"));}var Te=V.memo(({progress:e,isActive:r,classNames:s})=>{let o=Math.round(e*100);return jsxRuntime.jsx("div",{className:x("story-progress-bar",s?.root),role:"progressbar","aria-valuenow":r?o:e===1?100:0,"aria-valuemin":0,"aria-valuemax":100,"aria-label":`Story progress: ${o}%`,children:jsxRuntime.jsx("div",{className:x("story-progress-bar-fill",s?.fill),style:{transform:`scaleX(${r?e:e===1?1:0})`}})})});Te.displayName="ProgressBar";var Ne=V.memo(({total:e,currentIndex:r,progress:s,classNames:o})=>jsxRuntime.jsx("div",{className:x("story-progress-bars-container",o?.root),children:Array.from({length:e}).map((u,d)=>jsxRuntime.jsx(Te,{progress:d<r?1:d===r?s:0,isActive:d===r,classNames:o?.bar},d))}));Ne.displayName="StoryProgressBars";var ke=V.memo(({item:e,isActive:r,isPaused:s,onDurationDetected:o,onLoadError:u,onBufferingChange:d,controls:l,classNames:c})=>{let t=V.useRef(null),[h,b]=V.useState(false),[i,I]=V.useState(()=>e.type==="image"||e.type==="video");V.useEffect(()=>{if(b(false),e.type==="image"&&"src"in e){let a=new Image;a.src=e.src,I(!(a.complete&&a.naturalWidth>0));}else e.type==="video"?I(true):I(false);},[e.id,e.type]),V.useEffect(()=>{if(e.type!=="video"||!t.current||!r)return;let a=t.current;(async()=>{try{s?a.pause():await a.play();}catch(w){console.warn("Video play failed:",w);}})();},[e.type,r,s]),V.useEffect(()=>{if(e.type!=="video"||!t.current)return;let a=t.current;a.currentTime=0;let k=()=>{a.duration&&isFinite(a.duration)&&o?.(a.duration*1e3);},w=()=>{I(false);};return a.addEventListener("loadedmetadata",k),a.addEventListener("canplay",w),a.readyState>=1&&k(),a.readyState>=3&&w(),()=>{a.removeEventListener("loadedmetadata",k),a.removeEventListener("canplay",w);}},[e.id,e.type,o]),V.useEffect(()=>{if(e.type!=="video"||!t.current||!r)return;let a=t.current,k=()=>{d?.(true);},w=()=>{d?.(false);},A=()=>{d?.(true);};return a.addEventListener("waiting",k),a.addEventListener("playing",w),a.addEventListener("stalled",A),()=>{a.removeEventListener("waiting",k),a.removeEventListener("playing",w),a.removeEventListener("stalled",A);}},[e.type,r,d]),V.useEffect(()=>{let a=t.current;if(!(e.type!=="video"||!a))return ()=>{a.pause(),a.removeAttribute("src"),a.load();}},[e.id,e.type]);let y=V.useCallback(()=>{b(true),I(false),u?.();},[u]),C=V.useCallback(()=>{I(false);},[]);if(h)return jsxRuntime.jsx("div",{className:x("story-item story-item-error",c?.error),children:jsxRuntime.jsx("div",{className:"story-item-error-message",children:"Failed to load content"})});switch(e.type){case "image":return jsxRuntime.jsxs("div",{className:x("story-item story-item-image",c?.root),children:[i&&jsxRuntime.jsx("div",{className:x("story-item-loader",c?.loader),children:jsxRuntime.jsx("div",{className:"story-item-spinner"})}),jsxRuntime.jsx("img",{src:e.src,alt:e.alt||"Story image",onError:y,onLoad:C,draggable:false,style:{opacity:i?0:1}})]});case "video":return jsxRuntime.jsxs("div",{className:x("story-item story-item-video",c?.root),children:[i&&jsxRuntime.jsx("div",{className:x("story-item-loader",c?.loader),children:jsxRuntime.jsx("div",{className:"story-item-spinner"})}),jsxRuntime.jsx("video",{ref:t,src:e.src,muted:true,playsInline:true,loop:false,onError:y,preload:"auto",style:{opacity:i?0:1}})]});case "text":return jsxRuntime.jsx("div",{className:x("story-item story-item-text",c?.root),style:{backgroundColor:e.backgroundColor||"#000",color:e.textColor||"#fff"},children:jsxRuntime.jsx("div",{className:x("story-item-text-content",c?.textContent),children:e.text})});case "custom_component":let a=e.component;return jsxRuntime.jsx("div",{className:x("story-item story-item-component",c?.root),children:jsxRuntime.jsx(a,{...l})});default:return null}});ke.displayName="StoryItem";var K=5e3,xe=350,lt=12,Zt=.3;function re(e,r){return `translateZ(${-e}px) rotateY(${r*90}deg)`}var we=V__default.default.memo(({users:e,initialUserIndex:r,initialStoryIndex:s,isOpen:o,onClose:u,onStoryChange:d,classNames:l})=>{let c=o===void 0,[t,h]=tt(),b=V.useMemo(()=>{if(!c||e.length===0)return null;let n=new URLSearchParams(window.location.search),m=n.get("user"),g=n.get("story");if(!m)return null;let v=He(e,m);if(v===-1)return null;let p=e[v],S=g?Xe(p,g):0;return {userIndex:v,storyIndex:S===-1?0:S}},[c,t,e]);V.useEffect(()=>{c&&t.get("user")&&e.length>0&&!b&&process.env.NODE_ENV==="development"&&console.warn(`[react-instagram-stories] User not found: "${t.get("user")}"
|
|
2
|
+
Available user IDs: ${e.map(n=>n.id).join(", ")}`);},[c,t,e,b]);let i=c?b?.userIndex??0:r??0,I=c?b?.storyIndex??0:s??0,y=c?b!==null:o??false,C=V.useCallback(()=>{c?h({},{replace:true}):u&&u();},[c,h,u]),[a,k]=V.useState(i),[w,A]=V.useState(I),[H,De]=V.useState(false);V.useEffect(()=>{k(i);},[i]),V.useEffect(()=>{A(I);},[I]);let[P,Z]=V.useState(null),[yt,Se]=V.useState(false),[gt,ht]=V.useState(false),X=V.useRef(null),Ae=V.useRef(0),Be=V.useRef(K),Ie=V.useRef(false),Ce=V.useRef(true),Q=V.useRef(null),J=V.useRef(null),M=V.useRef(0),_=V.useRef(false),ne=V.useRef(new Map),F=e[a],B=F?.stories[w],se=F?.stories.length||0;V.useEffect(()=>{Be.current=B?.duration||K;},[B?.duration]),V.useEffect(()=>{ne.current.set(a,w);},[a,w]);let vt=Ze(y),Pe=Je(),{preloadStoryItem:Ee}=et(),q=V.useCallback(()=>De(true),[]),$=V.useCallback(()=>De(false),[]),$e=V.useRef(),E=Qe({duration:Be.current||K,onComplete:()=>$e.current?.(),autoStart:false}),bt=V.useCallback(n=>{n?E.pause():H||E.resume();},[E,H]);V.useEffect(()=>{E.setDuration(B?.duration||K);},[E,B?.duration]);let me=V.useCallback(()=>({leftUserIndex:Math.max(0,a-1),rightUserIndex:Math.min(e.length-1,a+1)}),[a,e.length]),G=V.useCallback((n,m)=>{let p=e[n].stories[m]?.duration||K,S=Q.current;S&&(S.style.transition="",S.style.transform="",S.style.transformStyle="");let L=S?.parentElement;L&&(L.style.perspective=""),k(n),A(m),Z(null),_.current=false,M.current=0,E.setDuration(p),E.reset();},[e,E]),fe=V.useCallback(n=>{let m=me();Z(m),_.current=true,requestAnimationFrame(()=>{requestAnimationFrame(()=>{let g=Q.current;if(!g){let L=n==="next"?m.rightUserIndex:m.leftUserIndex,R=n==="next"?0:ne.current.get(L)??0;G(L,R);return}let v=g.offsetWidth,p=v/2;M.current=v,g.style.setProperty("--face-depth",`${p}px`);let S=g.parentElement;S&&(S.style.perspective=`${p*16}px`),g.style.transition="none",g.style.transform=re(p,0),requestAnimationFrame(()=>{g.style.transition=`transform ${xe}ms cubic-bezier(0.32, 0.72, 0.37, 0.98)`;let L=n==="next"?-1:1;g.style.transform=re(p,L);let R=n==="next"?m.rightUserIndex:m.leftUserIndex,O=n==="next"?0:ne.current.get(R)??0;setTimeout(()=>G(R,O),xe);});});});},[me,G,e]),Y=V.useCallback(()=>{if(!(!F||P||_.current))if(w<se-1){let n=w+1,m=F.stories[n];A(n),E.setDuration(m?.duration||K),E.reset();}else a<e.length-1?fe("next"):C();},[F,P,w,se,a,e,E,C,fe]),ae=V.useCallback(()=>{if(!(!F||P||_.current))if(w>0){let n=w-1,m=F.stories[n];A(n),E.setDuration(m?.duration||K),E.reset();}else a>0&&fe("prev");},[F,P,w,a,e,E,fe]),ye=V.useCallback(()=>{window.scrollTo(0,Ae.current),C();},[C]);V.useEffect(()=>{$e.current=Y;},[Y]);let xt=V.useMemo(()=>({pause:q,resume:$,next:Y,prev:ae,setDuration:n=>E.setDuration(n)}),[q,$,Y,ae,E]),wt=V.useCallback(n=>{n.target.closest(".story-viewer-overlay")||_.current||(J.current={startX:n.clientX,startY:n.clientY,currentX:n.clientX,isDragging:false,isDismissing:false,pointerId:n.pointerId,target:n.target},X.current?.setPointerCapture(n.pointerId),q());},[q]),St=V.useCallback(n=>{let m=J.current;if(!m||_.current)return;m.currentX=n.clientX;let g=n.clientX-m.startX,v=n.clientY-m.startY;if(!m.isDragging&&!m.isDismissing){Math.abs(g)>lt&&Math.abs(g)>Math.abs(v)*1.2?(m.isDragging=true,Z(me())):v>lt&&v>Math.abs(g)*1.5&&(m.isDismissing=true);return}if(m.isDismissing){let R=X.current?.querySelector(".story-viewer-cube-viewport");if(!R)return;let O=Math.max(0,v),Et=Math.max(.85,1-O/1500),Ut=Math.max(.2,1-O/600);R.style.transition="none",R.style.transform=`translateY(${O}px) scale(${Et})`,R.style.borderRadius=`${Math.min(24,O/5)}px`,R.style.overflow="hidden";let Ve=X.current?.querySelector(".story-viewer-overlay");Ve&&(Ve.style.opacity=String(Ut));return}let p=Q.current;if(!p)return;M.current||(M.current=p.offsetWidth,p.style.setProperty("--face-depth",`${M.current/2}px`));let S=M.current,L=g/S;L=Math.max(-0.95,Math.min(.95,L)),a===0&&L>0&&(L=0),a===e.length-1&&L<0&&(L=0),p.style.transition="none",p.style.transform=re(S/2,L);},[a,e.length,me]),It=V.useCallback(n=>{let m=J.current;if(J.current=null,!!m){try{X.current?.releasePointerCapture(m.pointerId);}catch{}if(m.isDismissing){let g=n.clientY-m.startY,v=X.current?.querySelector(".story-viewer-cube-viewport"),p=X.current?.querySelector(".story-viewer-overlay");g>120?(v&&(v.style.transition="transform 250ms ease-in, opacity 250ms ease-in",v.style.transform=`translateY(${window.innerHeight}px) scale(0.85)`,v.style.opacity="0"),p&&(p.style.transition="opacity 250ms ease-in",p.style.opacity="0"),setTimeout(ye,250)):(v&&(v.style.transition="transform 300ms ease-out, border-radius 300ms ease-out",v.style.transform="",v.style.borderRadius=""),p&&(p.style.transition="opacity 300ms ease-out",p.style.opacity=""),setTimeout(()=>{v&&(v.style.overflow="");},300),$());return}if(m.isDragging&&P){let g=M.current||400,v=g/2,p=(n.clientX-m.startX)/g;p=Math.max(-1,Math.min(1,p)),a===0&&p>0&&(p=0),a===e.length-1&&p<0&&(p=0);let S;Math.abs(p)>Zt?S=p>0?1:-1:S=0;let L=Q.current;if(!L){Z(null),$();return}_.current=true,L.style.transition=`transform ${xe}ms cubic-bezier(0.25, 1, 0.5, 1)`,L.style.transform=re(v,S),setTimeout(()=>{if(S===-1)G(P.rightUserIndex,0);else if(S===1){let R=ne.current.get(P.leftUserIndex)??0;G(P.leftUserIndex,R);}else {let R=Q.current;R&&(R.style.transition="",R.style.transform="",R.style.transformStyle="");let O=R?.parentElement;O&&(O.style.perspective=""),Z(null),_.current=false,M.current=0,$();}},xe);}else {$();let g=m.target||n.target;if(g.closest(".story-viewer-close")||g.closest("button")||g.closest("input")||g.closest("select")||g.closest("textarea"))return;let v=X.current?.querySelector(".story-viewer-content")||X.current?.querySelector(".story-viewer-cube-viewport");if(!v)return;let p=v.getBoundingClientRect();if(n.clientX<p.left||n.clientX>p.right||n.clientY<p.top||n.clientY>p.bottom)return;n.clientX-p.left<p.width/2?ae():Y();}}},[P,a,e,G,$,ae,Y]);V.useLayoutEffect(()=>{let n=Q.current;if(!P||!n)return;let m=n.offsetWidth;M.current=m;let g=m/2;n.style.setProperty("--face-depth",`${g}px`);let v=n.parentElement;v&&(v.style.perspective=`${g*16}px`);let p=J.current;if(p?.isDragging){let S=(p.currentX-p.startX)/m;S=Math.max(-0.95,Math.min(.95,S)),a===0&&S>0&&(S=0),a===e.length-1&&S<0&&(S=0),n.style.transition="none",n.style.transform=re(g,S);}},[P,a,e.length]),Ke({onLeft:ae,onRight:Y,onSpace:()=>H?$():q(),onEscape:ye,enabled:y}),V.useEffect(()=>{Pe?Pe&&!H&&$():q();},[Pe,q,$,H]),V.useEffect(()=>{if(!y||!F)return;let n=[];w<se-1&&n.push(F.stories[w+1]),w>0&&n.push(F.stories[w-1]),a<e.length-1&&n.push(e[a+1].stories[0]),a>0&&n.push(e[a-1].stories[0]),n.slice(0,3).forEach(m=>Ee(m).catch(()=>{}));},[y,F,a,w,se,e,Ee]),V.useEffect(()=>(y&&!Ie.current?(Ie.current=true,Se(true),B&&Ee(B),setTimeout(()=>{Se(false),Ae.current=window.scrollY,document.body.style.overflow="hidden",E.resume();},1500)):y||(Ie.current=false,Ce.current=true,document.body.style.overflow="",Se(false),ht(false),Z(null),_.current=false,M.current=0),()=>{document.body.style.overflow="";}),[y,E]),V.useEffect(()=>{if(y){if(Ce.current){Ce.current=false,d?.(a,w);return}if(c&&F&&B){let n=t.get("user"),m=t.get("story");(n!==F.id||m!==B.id)&&h({user:F.id,story:B.id},{replace:true});}d?.(a,w);}},[a,w,d,y,c,t,h]);let Ct=V.useCallback(()=>{console.warn("Story item failed to load, skipping..."),setTimeout(Y,500);},[Y]);if(!y||!F||!B)return null;let ge=P?e[P.leftUserIndex]:null,he=P?e[P.rightUserIndex]:null,ze=P&&P.leftUserIndex<a?ne.current.get(P.leftUserIndex)??0:w,We=P&&P.rightUserIndex>a?0:w,Ue=(n,m,g,v,p)=>jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsxs("div",{className:x("story-viewer-header",l?.header),children:[jsxRuntime.jsx(Ne,{total:n.stories.length,currentIndex:g,progress:v,classNames:l?.progressBars}),jsxRuntime.jsxs("div",{className:x("story-viewer-user-info",l?.userInfo),children:[jsxRuntime.jsx("img",{src:n.avatarUrl,alt:`${n.username} avatar`,className:x("story-viewer-avatar",l?.avatar)}),jsxRuntime.jsx("span",{className:x("story-viewer-username",l?.username),children:n.username})]}),jsxRuntime.jsx("button",{className:x("story-viewer-close",l?.closeButton),onClick:ye,"aria-label":"Close story viewer",type:"button",children:"\xD7"})]},n.id),jsxRuntime.jsx("div",{className:x("story-viewer-items",l?.items),children:(yt||gt)&&p?jsxRuntime.jsx("div",{className:"story-item-loader",children:jsxRuntime.jsx("div",{className:"story-item-spinner"})}):jsxRuntime.jsx(ke,{item:m,isActive:p,isPaused:p?H||!!J.current?.isDragging:true,onDurationDetected:p?S=>E.setDuration(S):void 0,onLoadError:p?Ct:void 0,onBufferingChange:p?bt:void 0,controls:xt,classNames:l?.storyItem})}),p&&jsxRuntime.jsxs("div",{className:"story-viewer-nav-hints",children:[jsxRuntime.jsx("div",{className:"story-viewer-nav-hint story-viewer-nav-hint-left"}),jsxRuntime.jsx("div",{className:"story-viewer-nav-hint story-viewer-nav-hint-right"})]})]}),Pt=jsxRuntime.jsxs("div",{ref:X,className:x("story-viewer",l?.root),role:"dialog","aria-modal":"true","aria-label":`Stories by ${F?.username||"user"}`,"aria-describedby":"story-viewer-description",onPointerDown:wt,onPointerMove:St,onPointerUp:It,children:[jsxRuntime.jsx("div",{className:x("story-viewer-overlay",l?.overlay),onClick:ye}),jsxRuntime.jsx("div",{id:"story-viewer-description",className:"sr-only",children:"Instagram-style stories viewer. Tap left side to go to previous story, right side to go to next story. Swipe left or right to navigate between users. Press Escape to close."}),jsxRuntime.jsxs("div",{"aria-live":"polite","aria-atomic":"true",className:"sr-only",children:["Viewing story ",w+1," of ",se," by"," ",F?.username]}),(()=>{let n=!!(P&&ge&&he),m=n?M.current?M.current/2:Math.min(typeof window<"u"?window.innerWidth:500,500)/2:0,g=v=>({position:"absolute",top:0,left:0,width:"100%",height:"100%",background:"#000",display:"flex",flexDirection:"column",overflow:"hidden",backfaceVisibility:"hidden",transform:`rotateY(${v}) translateZ(${m}px)`});return jsxRuntime.jsx("div",{className:"story-viewer-cube-viewport",style:n?{perspective:`${m*16}px`}:void 0,children:jsxRuntime.jsxs("div",{ref:Q,className:"story-viewer-cube-wrapper",style:n?{transformStyle:"preserve-3d",transform:re(m,0)}:void 0,children:[jsxRuntime.jsx("div",{ref:vt,className:x("story-viewer-content",l?.content),style:n?{willChange:"auto",backfaceVisibility:"hidden",transform:`translateZ(${m}px)`}:void 0,onMouseEnter:q,onMouseLeave:$,children:Ue(F,B,w,E.progress,!n)}),n&&ge&&jsxRuntime.jsx("div",{style:g("-90deg"),children:Ue(ge,ge.stories[ze],ze,0,false)}),n&&he&&jsxRuntime.jsx("div",{style:g("90deg"),children:Ue(he,he.stories[We],We,0,false)})]})})})()]});return reactDom.createPortal(Pt,document.body)});var dt=({users:e,classNames:r})=>{let s=V.useCallback(o=>{let u=e[o];u&&u.stories.length>0&&Re({user:u.id,story:u.stories[0].id});},[e]);return jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx(ce,{users:e,onAvatarClick:s,classNames:r?.avatarList}),jsxRuntime.jsx(we,{users:e,classNames:r?.storyViewer})]})};var pt=({pause:e,resume:r,next:s})=>{let[o,u]=V__default.default.useState(null),[d,l]=V__default.default.useState([42,28,18,12]);V__default.default.useEffect(()=>(e(),()=>r()),[e,r]);let c=b=>{u(b);let i=[...d];i[b]+=1,l(i),setTimeout(()=>{r(),s();},2e3);},t=d.reduce((b,i)=>b+i,0);return jsxRuntime.jsxs("div",{style:{display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",height:"100%",padding:"20px",width:"100%",background:"linear-gradient(135deg, #667eea 0%, #764ba2 100%)"},children:[jsxRuntime.jsx("h2",{style:{color:"white",marginBottom:"10px",fontSize:"28px",fontWeight:"bold"},children:"Poll"}),jsxRuntime.jsx("p",{style:{color:"rgba(255,255,255,0.9)",marginBottom:"30px",fontSize:"18px"},children:"What's your favorite framework?"}),jsxRuntime.jsx("div",{style:{width:"100%"},children:["React","Vue","Angular","Svelte"].map((b,i)=>{let I=Math.round(d[i]/t*100),y=o===i;return jsxRuntime.jsxs("button",{onClick:()=>o===null&&c(i),disabled:o!==null,style:{width:"100%",padding:"16px 20px",margin:"8px 0",border:"none",borderRadius:"12px",background:o!==null?`linear-gradient(90deg, rgba(255,255,255,0.4) ${I}%, rgba(255,255,255,0.15) ${I}%)`:"rgba(255,255,255,0.2)",color:"white",fontSize:"16px",fontWeight:"600",cursor:o===null?"pointer":"default",transition:"all 0.3s ease",display:"flex",justifyContent:"space-between",alignItems:"center",backdropFilter:"blur(10px)"},children:[jsxRuntime.jsxs("span",{style:{display:"flex",alignItems:"center",gap:"10px"},children:[y&&"\u2713 ",b]}),o!==null&&jsxRuntime.jsxs("span",{children:[I,"%"]})]},i)})}),o!==null&&jsxRuntime.jsxs("p",{style:{color:"rgba(255,255,255,0.8)",marginTop:"20px",fontSize:"14px"},children:[t," votes \u2022 Thanks for voting!"]})]})},mt=({pause:e,resume:r,next:s})=>{let[o,u]=V__default.default.useState(false),[d,l]=V__default.default.useState(null),c=2;V__default.default.useEffect(()=>(e(),()=>r()),[e,r]);let t=b=>{l(b),u(true),setTimeout(()=>{r(),s();},2500);};return jsxRuntime.jsxs("div",{style:{display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",height:"100%",padding:"20px",width:"100%",background:"linear-gradient(135deg, #f093fb 0%, #f5576c 100%)"},children:[jsxRuntime.jsx("div",{style:{fontSize:"48px",marginBottom:"20px",animation:"bounce 1s infinite"},children:"\u{1FA90}"}),jsxRuntime.jsx("h2",{style:{color:"white",marginBottom:"10px",fontSize:"24px",fontWeight:"bold",textAlign:"center"},children:"Quiz Time!"}),jsxRuntime.jsx("p",{style:{color:"rgba(255,255,255,0.9)",marginBottom:"30px",fontSize:"18px",textAlign:"center"},children:"Which is the largest planet in our solar system?"}),jsxRuntime.jsx("div",{style:{width:"100%"},children:["Mars","Venus","Jupiter","Saturn"].map((b,i)=>{let I=i===c,y=d===i,C="rgba(255,255,255,0.2)";return o&&(I?C="rgba(34, 197, 94, 0.6)":y&&(C="rgba(239, 68, 68, 0.6)")),jsxRuntime.jsxs("button",{onClick:()=>!o&&t(i),disabled:o,style:{width:"100%",padding:"16px 20px",margin:"8px 0",border:"none",borderRadius:"12px",background:C,color:"white",fontSize:"16px",fontWeight:"600",cursor:o?"default":"pointer",transition:"all 0.3s ease",display:"flex",justifyContent:"space-between",alignItems:"center"},children:[jsxRuntime.jsx("span",{children:b}),o&&I&&jsxRuntime.jsx("span",{children:"\u2713"}),o&&y&&!I&&jsxRuntime.jsx("span",{children:"\u2717"})]},i)})}),o&&jsxRuntime.jsx("p",{style:{color:"white",marginTop:"20px",fontSize:"16px",fontWeight:"bold"},children:d===c?"\u{1F389} Correct!":"\u274C Wrong! Jupiter is the largest."})]})},rr=()=>{let[e,r]=V__default.default.useState({days:12,hours:8,minutes:45,seconds:30});V__default.default.useEffect(()=>{let o=setInterval(()=>{r(u=>{let{days:d,hours:l,minutes:c,seconds:t}=u;return t--,t<0&&(t=59,c--),c<0&&(c=59,l--),l<0&&(l=23,d--),{days:d,hours:l,minutes:c,seconds:t}});},1e3);return ()=>clearInterval(o)},[]);let s=({value:o,label:u})=>jsxRuntime.jsxs("div",{style:{textAlign:"center"},children:[jsxRuntime.jsx("div",{style:{background:"rgba(255,255,255,0.2)",backdropFilter:"blur(10px)",borderRadius:"12px",padding:"15px 20px",minWidth:"70px"},children:jsxRuntime.jsx("div",{style:{fontSize:"32px",fontWeight:"bold",color:"white"},children:String(o).padStart(2,"0")})}),jsxRuntime.jsx("div",{style:{color:"rgba(255,255,255,0.8)",fontSize:"12px",marginTop:"8px",textTransform:"uppercase"},children:u})]});return jsxRuntime.jsxs("div",{style:{display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",height:"100%",padding:"20px",width:"100%",background:"linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%)"},children:[jsxRuntime.jsx("div",{style:{fontSize:"48px",marginBottom:"15px"},children:"\u{1F680}"}),jsxRuntime.jsx("h2",{style:{color:"white",marginBottom:"8px",fontSize:"24px",fontWeight:"bold"},children:"Product Launch"}),jsxRuntime.jsx("p",{style:{color:"rgba(255,255,255,0.7)",marginBottom:"30px",fontSize:"14px"},children:"Something amazing is coming..."}),jsxRuntime.jsxs("div",{style:{display:"flex",gap:"12px",marginBottom:"30px"},children:[jsxRuntime.jsx(s,{value:e.days,label:"Days"}),jsxRuntime.jsx(s,{value:e.hours,label:"Hours"}),jsxRuntime.jsx(s,{value:e.minutes,label:"Mins"}),jsxRuntime.jsx(s,{value:e.seconds,label:"Secs"})]}),jsxRuntime.jsx("button",{style:{padding:"14px 40px",background:"linear-gradient(135deg, #667eea 0%, #764ba2 100%)",border:"none",borderRadius:"30px",color:"white",fontSize:"16px",fontWeight:"bold",cursor:"pointer"},children:"Notify Me"})]})},or=()=>jsxRuntime.jsxs("div",{style:{display:"flex",flexDirection:"column",height:"100%",background:"linear-gradient(180deg, #1a1a2e 0%, #16213e 100%)",position:"relative",overflow:"hidden"},children:[jsxRuntime.jsx("div",{style:{flex:1,display:"flex",alignItems:"center",justifyContent:"center",padding:"20px"},children:jsxRuntime.jsx("img",{src:"https://images.unsplash.com/photo-1523275335684-37898b6baf30?w=400&h=400&fit=crop",alt:"Product",style:{width:"100%",height:"100%",objectFit:"cover",borderRadius:"20px",boxShadow:"0 20px 60px rgba(0,0,0,0.5)"}})}),jsxRuntime.jsxs("div",{style:{padding:"30px",background:"linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.8) 100%)"},children:[jsxRuntime.jsxs("div",{style:{display:"flex",alignItems:"center",gap:"8px",marginBottom:"10px"},children:[jsxRuntime.jsx("span",{style:{background:"#ef4444",color:"white",padding:"4px 10px",borderRadius:"20px",fontSize:"12px",fontWeight:"bold"},children:"NEW"}),jsxRuntime.jsx("span",{style:{color:"rgba(255,255,255,0.6)",fontSize:"12px"},children:"Limited Edition"})]}),jsxRuntime.jsx("h2",{style:{color:"white",fontSize:"24px",fontWeight:"bold",marginBottom:"8px"},children:"Premium Watch Collection"}),jsxRuntime.jsx("p",{style:{color:"rgba(255,255,255,0.7)",fontSize:"14px",marginBottom:"15px"},children:"Elegant design meets modern technology"}),jsxRuntime.jsxs("div",{style:{display:"flex",alignItems:"center",gap:"15px"},children:[jsxRuntime.jsx("span",{style:{color:"white",fontSize:"28px",fontWeight:"bold"},children:"$299"}),jsxRuntime.jsx("span",{style:{color:"rgba(255,255,255,0.5)",fontSize:"18px",textDecoration:"line-through"},children:"$399"})]}),jsxRuntime.jsx("button",{style:{width:"100%",marginTop:"20px",padding:"16px",background:"white",border:"none",borderRadius:"12px",color:"#1a1a2e",fontSize:"16px",fontWeight:"bold",cursor:"pointer"},children:"Shop Now \u2192"})]})]}),ft=({pause:e,resume:r,next:s})=>{let[o,u]=V__default.default.useState(5),[d,l]=V__default.default.useState(false);V__default.default.useEffect(()=>(e(),()=>r()),[e,r]);let c=()=>{l(true),setTimeout(()=>{r(),s();},1500);};return jsxRuntime.jsxs("div",{style:{display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",height:"100%",padding:"20px",width:"100%",background:"linear-gradient(135deg, #11998e 0%, #38ef7d 100%)"},children:[jsxRuntime.jsx("div",{style:{fontSize:"80px",marginBottom:"20px",transition:"all 0.3s"},children:["\u{1F622}","\u{1F615}","\u{1F610}","\u{1F642}","\u{1F60A}","\u{1F603}","\u{1F604}","\u{1F601}","\u{1F929}","\u{1F973}"][o-1]}),jsxRuntime.jsx("h2",{style:{color:"white",marginBottom:"10px",fontSize:"24px",fontWeight:"bold"},children:"Rate Your Experience"}),jsxRuntime.jsx("p",{style:{color:"rgba(255,255,255,0.9)",marginBottom:"30px",fontSize:"16px"},children:"How was your visit today?"}),d?jsxRuntime.jsxs("div",{style:{textAlign:"center"},children:[jsxRuntime.jsx("div",{style:{fontSize:"48px",marginBottom:"10px"},children:"\u{1F389}"}),jsxRuntime.jsx("p",{style:{color:"white",fontSize:"18px",fontWeight:"bold"},children:"Thanks for your feedback!"})]}):jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsxs("div",{style:{width:"100%",marginBottom:"20px"},children:[jsxRuntime.jsx("input",{type:"range",min:"1",max:"10",value:o,onChange:h=>u(parseInt(h.target.value)),style:{width:"100%",height:"8px",borderRadius:"4px",appearance:"none",background:"rgba(255,255,255,0.3)",cursor:"pointer"}}),jsxRuntime.jsxs("div",{style:{display:"flex",justifyContent:"space-between",color:"rgba(255,255,255,0.7)",fontSize:"12px",marginTop:"8px"},children:[jsxRuntime.jsx("span",{children:"1"}),jsxRuntime.jsx("span",{children:"10"})]})]}),jsxRuntime.jsxs("button",{onClick:c,style:{padding:"14px 50px",background:"white",border:"none",borderRadius:"30px",color:"#11998e",fontSize:"16px",fontWeight:"bold",cursor:"pointer"},children:["Submit (",o,"/10)"]})]})]})},pe=["https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4","https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerEscapes.mp4","https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerFun.mp4"],ut=["https://images.unsplash.com/photo-1682687220742-aba13b6e50ba?w=1080&h=1920&fit=crop","https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=1080&h=1920&fit=crop","https://images.unsplash.com/photo-1469474968028-56623f02e42e?w=1080&h=1920&fit=crop","https://images.unsplash.com/photo-1426604966848-d7adac402bff?w=1080&h=1920&fit=crop","https://images.unsplash.com/photo-1472214103451-9374bd1c798e?w=1080&h=1920&fit=crop","https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=1080&h=1920&fit=crop","https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=1080&h=1920&fit=crop","https://images.unsplash.com/photo-1517841905240-472988babdf9?w=1080&h=1920&fit=crop"],oe=["https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=150&h=150&fit=crop","https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=150&h=150&fit=crop","https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=150&h=150&fit=crop","https://images.unsplash.com/photo-1517841905240-472988babdf9?w=150&h=150&fit=crop","https://images.unsplash.com/photo-1539571696357-5a69c17a67c6?w=150&h=150&fit=crop","https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=150&h=150&fit=crop"],Me=[{id:"user-travel",username:"Travel",avatarUrl:oe[0],hasUnreadStories:true,stories:[{id:"travel-1",type:"image",src:"https://images.unsplash.com/photo-1682687220742-aba13b6e50ba?w=1080&h=1920&fit=crop",duration:5e3,alt:"Beautiful mountain landscape"},{id:"travel-2",type:"image",src:"https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=1080&h=1920&fit=crop",duration:5e3,alt:"Scenic ocean view"},{id:"travel-3",type:"text",text:`Adventure awaits! \u{1F30D}
|
|
2
3
|
|
|
3
|
-
Swipe to explore more destinations \u2192`,backgroundColor:"#FF6B6B",textColor:"#FFFFFF",duration:4e3},{id:"travel-4",type:"video",src:
|
|
4
|
+
Swipe to explore more destinations \u2192`,backgroundColor:"#FF6B6B",textColor:"#FFFFFF",duration:4e3},{id:"travel-4",type:"video",src:pe[0],duration:15e3}]},{id:"user-polls",username:"Interactive",avatarUrl:oe[1],hasUnreadStories:true,stories:[{id:"poll-intro",type:"text",text:`Let's have some fun! \u{1F3AE}
|
|
4
5
|
|
|
5
|
-
Interactive stories ahead \u2192`,backgroundColor:"#667eea",textColor:"#FFFFFF",duration:3e3},{id:"poll-1",type:"custom_component",component
|
|
6
|
+
Interactive stories ahead \u2192`,backgroundColor:"#667eea",textColor:"#FFFFFF",duration:3e3},{id:"poll-1",type:"custom_component",component:pt,duration:3e4},{id:"quiz-1",type:"custom_component",component:mt,duration:3e4},{id:"slider-1",type:"custom_component",component:ft,duration:3e4}]},{id:"user-product",username:"Shop",avatarUrl:oe[2],hasUnreadStories:true,stories:[{id:"product-1",type:"custom_component",component:or,duration:8e3},{id:"product-2",type:"image",src:"https://images.unsplash.com/photo-1523275335684-37898b6baf30?w=1080&h=1920&fit=crop",duration:5e3,alt:"Product showcase"},{id:"product-3",type:"text",text:`Limited Time Offer! \u{1F525}
|
|
6
7
|
|
|
7
8
|
50% OFF
|
|
8
9
|
|
|
9
|
-
Use code: STORY50`,backgroundColor:"#000000",textColor:"#FFFFFF",duration:5e3}]},{id:"user-launch",username:"Events",avatarUrl:
|
|
10
|
+
Use code: STORY50`,backgroundColor:"#000000",textColor:"#FFFFFF",duration:5e3}]},{id:"user-launch",username:"Events",avatarUrl:oe[3],hasUnreadStories:true,stories:[{id:"launch-1",type:"custom_component",component:rr,duration:1e4},{id:"launch-2",type:"text",text:`Mark your calendars! \u{1F4C5}
|
|
10
11
|
|
|
11
|
-
Big announcement coming soon...`,backgroundColor:"#302b63",textColor:"#FFFFFF",duration:4e3},{id:"launch-3",type:"image",src:"https://images.unsplash.com/photo-1492684223066-81342ee5ff30?w=1080&h=1920&fit=crop",duration:5e3,alt:"Event teaser"}]},{id:"user-video",username:"Videos",avatarUrl:
|
|
12
|
+
Big announcement coming soon...`,backgroundColor:"#302b63",textColor:"#FFFFFF",duration:4e3},{id:"launch-3",type:"image",src:"https://images.unsplash.com/photo-1492684223066-81342ee5ff30?w=1080&h=1920&fit=crop",duration:5e3,alt:"Event teaser"}]},{id:"user-video",username:"Videos",avatarUrl:oe[4],hasUnreadStories:true,stories:[{id:"video-1",type:"video",src:pe[1],duration:15e3},{id:"video-2",type:"video",src:pe[2],duration:15e3},{id:"video-3",type:"text",text:`More videos coming soon! \u{1F3AC}
|
|
12
13
|
|
|
13
|
-
Stay tuned \u2192`,backgroundColor:"#4ECDC4",textColor:"#FFFFFF",duration:3e3}]},{id:"user-lifestyle",username:"Lifestyle",avatarUrl:
|
|
14
|
+
Stay tuned \u2192`,backgroundColor:"#4ECDC4",textColor:"#FFFFFF",duration:3e3}]},{id:"user-lifestyle",username:"Lifestyle",avatarUrl:oe[5],hasUnreadStories:false,stories:[{id:"lifestyle-1",type:"image",src:"https://images.unsplash.com/photo-1469474968028-56623f02e42e?w=1080&h=1920&fit=crop",duration:5e3,alt:"Nature scene"},{id:"lifestyle-2",type:"image",src:"https://images.unsplash.com/photo-1426604966848-d7adac402bff?w=1080&h=1920&fit=crop",duration:5e3,alt:"Peaceful landscape"},{id:"lifestyle-3",type:"text",text:`Find your peace \u{1F9D8}
|
|
14
15
|
|
|
15
|
-
Nature heals everything`,backgroundColor:"#45B7D1",textColor:"#FFFFFF",duration:4e3}]}],
|
|
16
|
+
Nature heals everything`,backgroundColor:"#45B7D1",textColor:"#FFFFFF",duration:4e3}]}],nr=(e=50)=>{let r=[...Me];for(let s=Me.length;s<e;s++){let o=Math.random()>.3,u=Math.floor(Math.random()*5)+2;r.push({id:`user-${s}`,username:`User ${s}`,avatarUrl:`https://i.pravatar.cc/150?img=${s%70}`,hasUnreadStories:o,stories:Array.from({length:u},(d,l)=>{let c=Math.random();if(c<.5)return {id:`story-${s}-${l}`,type:"image",src:ut[Math.floor(Math.random()*ut.length)],duration:5e3,alt:`Story from User ${s}`};if(c<.7)return {id:`story-${s}-${l}`,type:"video",src:pe[Math.floor(Math.random()*pe.length)],duration:15e3};if(c<.9){let h=["#FF6B6B","#4ECDC4","#45B7D1","#FFA07A","#98D8C8","#667eea","#764ba2"];return {id:`story-${s}-${l}`,type:"text",text:`Hello from User ${s}! \u{1F44B}
|
|
16
17
|
|
|
17
|
-
This is story ${
|
|
18
|
+
This is story ${l+1}`,backgroundColor:h[Math.floor(Math.random()*h.length)],textColor:"#FFFFFF",duration:4e3}}let t=[pt,mt,ft];return {id:`story-${s}-${l}`,type:"custom_component",component:t[Math.floor(Math.random()*t.length)],duration:3e4}})});}return r};exports.AvatarList=ce;exports.Stories=dt;exports.StoryViewer=we;exports.clearQueryParams=Xt;exports.demoUsers=Me;exports.generateDemoUsers=nr;exports.navigateWithParams=Re;//# sourceMappingURL=index.cjs.map
|
|
18
19
|
//# sourceMappingURL=index.cjs.map
|