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.
Files changed (9) hide show
  1. package/README.md +364 -308
  2. package/dist/index.cjs +9 -8
  3. package/dist/index.cjs.map +1 -1
  4. package/dist/index.d.cts +67 -5
  5. package/dist/index.d.ts +67 -5
  6. package/dist/index.js +9 -8
  7. package/dist/index.js.map +1 -1
  8. package/dist/styles.css +59 -388
  9. package/package.json +4 -7
package/dist/index.d.cts CHANGED
@@ -49,30 +49,92 @@ interface User {
49
49
  stories: StoryItem[];
50
50
  hasUnreadStories?: boolean;
51
51
  }
52
+ interface AvatarClassNames {
53
+ root?: string;
54
+ ring?: string;
55
+ imageWrapper?: string;
56
+ image?: string;
57
+ placeholder?: string;
58
+ username?: string;
59
+ }
60
+ interface AvatarListClassNames {
61
+ root?: string;
62
+ avatar?: AvatarClassNames;
63
+ }
64
+ interface ProgressBarClassNames {
65
+ root?: string;
66
+ fill?: string;
67
+ }
68
+ interface StoryProgressBarsClassNames {
69
+ root?: string;
70
+ bar?: ProgressBarClassNames;
71
+ }
72
+ interface StoryItemClassNames {
73
+ root?: string;
74
+ loader?: string;
75
+ error?: string;
76
+ textContent?: string;
77
+ }
78
+ interface StoryViewerClassNames {
79
+ root?: string;
80
+ overlay?: string;
81
+ content?: string;
82
+ header?: string;
83
+ userInfo?: string;
84
+ avatar?: string;
85
+ username?: string;
86
+ closeButton?: string;
87
+ items?: string;
88
+ storyItem?: StoryItemClassNames;
89
+ progressBars?: StoryProgressBarsClassNames;
90
+ }
91
+ interface StoriesClassNames {
92
+ avatarList?: AvatarListClassNames;
93
+ storyViewer?: StoryViewerClassNames;
94
+ }
52
95
 
53
96
  interface StoriesProps {
54
97
  users: User[];
55
- closeNavigateTo?: string;
98
+ classNames?: StoriesClassNames;
56
99
  }
100
+ /**
101
+ * Combined Stories component with AvatarList and StoryViewer.
102
+ * Uses URL query params for navigation: ?user={userId}&story={storyId}
103
+ */
57
104
  declare const Stories: React.FC<StoriesProps>;
58
105
 
59
106
  interface StoryViewerProps {
60
107
  users: User[];
61
- initialUserIndex: number;
108
+ initialUserIndex?: number;
62
109
  initialStoryIndex?: number;
63
- isOpen: boolean;
64
- onClose: () => void;
110
+ isOpen?: boolean;
111
+ onClose?: () => void;
65
112
  onStoryChange?: (userIndex: number, storyIndex: number) => void;
113
+ classNames?: StoryViewerClassNames;
66
114
  }
67
115
  declare const StoryViewer: React.FC<StoryViewerProps>;
68
116
 
69
117
  interface AvatarListProps {
70
118
  users: User[];
71
119
  onAvatarClick: (userIndex: number) => void;
120
+ classNames?: AvatarListClassNames;
72
121
  }
73
122
  declare const AvatarList: React.NamedExoticComponent<AvatarListProps>;
74
123
 
75
124
  declare const demoUsers: User[];
76
125
  declare const generateDemoUsers: (count?: number) => User[];
77
126
 
78
- export { AvatarList, type CustomComponentStoryItem, type ImageStoryItem, Stories, type StoryItem, type StoryItemControls, type StoryItemType, StoryViewer, type TextStoryItem, type User, type VideoStoryItem, demoUsers, generateDemoUsers };
127
+ /**
128
+ * Navigate to a URL with query params
129
+ */
130
+ declare function navigateWithParams(params: Record<string, string>, options?: {
131
+ replace?: boolean;
132
+ }): void;
133
+ /**
134
+ * Clear all query params
135
+ */
136
+ declare function clearQueryParams(options?: {
137
+ replace?: boolean;
138
+ }): void;
139
+
140
+ export { type AvatarClassNames, AvatarList, type AvatarListClassNames, type CustomComponentStoryItem, type ImageStoryItem, type ProgressBarClassNames, Stories, type StoriesClassNames, type StoryItem, type StoryItemClassNames, type StoryItemControls, type StoryItemType, type StoryProgressBarsClassNames, StoryViewer, type StoryViewerClassNames, type TextStoryItem, type User, type VideoStoryItem, clearQueryParams, demoUsers, generateDemoUsers, navigateWithParams };
package/dist/index.d.ts CHANGED
@@ -49,30 +49,92 @@ interface User {
49
49
  stories: StoryItem[];
50
50
  hasUnreadStories?: boolean;
51
51
  }
52
+ interface AvatarClassNames {
53
+ root?: string;
54
+ ring?: string;
55
+ imageWrapper?: string;
56
+ image?: string;
57
+ placeholder?: string;
58
+ username?: string;
59
+ }
60
+ interface AvatarListClassNames {
61
+ root?: string;
62
+ avatar?: AvatarClassNames;
63
+ }
64
+ interface ProgressBarClassNames {
65
+ root?: string;
66
+ fill?: string;
67
+ }
68
+ interface StoryProgressBarsClassNames {
69
+ root?: string;
70
+ bar?: ProgressBarClassNames;
71
+ }
72
+ interface StoryItemClassNames {
73
+ root?: string;
74
+ loader?: string;
75
+ error?: string;
76
+ textContent?: string;
77
+ }
78
+ interface StoryViewerClassNames {
79
+ root?: string;
80
+ overlay?: string;
81
+ content?: string;
82
+ header?: string;
83
+ userInfo?: string;
84
+ avatar?: string;
85
+ username?: string;
86
+ closeButton?: string;
87
+ items?: string;
88
+ storyItem?: StoryItemClassNames;
89
+ progressBars?: StoryProgressBarsClassNames;
90
+ }
91
+ interface StoriesClassNames {
92
+ avatarList?: AvatarListClassNames;
93
+ storyViewer?: StoryViewerClassNames;
94
+ }
52
95
 
53
96
  interface StoriesProps {
54
97
  users: User[];
55
- closeNavigateTo?: string;
98
+ classNames?: StoriesClassNames;
56
99
  }
100
+ /**
101
+ * Combined Stories component with AvatarList and StoryViewer.
102
+ * Uses URL query params for navigation: ?user={userId}&story={storyId}
103
+ */
57
104
  declare const Stories: React.FC<StoriesProps>;
58
105
 
59
106
  interface StoryViewerProps {
60
107
  users: User[];
61
- initialUserIndex: number;
108
+ initialUserIndex?: number;
62
109
  initialStoryIndex?: number;
63
- isOpen: boolean;
64
- onClose: () => void;
110
+ isOpen?: boolean;
111
+ onClose?: () => void;
65
112
  onStoryChange?: (userIndex: number, storyIndex: number) => void;
113
+ classNames?: StoryViewerClassNames;
66
114
  }
67
115
  declare const StoryViewer: React.FC<StoryViewerProps>;
68
116
 
69
117
  interface AvatarListProps {
70
118
  users: User[];
71
119
  onAvatarClick: (userIndex: number) => void;
120
+ classNames?: AvatarListClassNames;
72
121
  }
73
122
  declare const AvatarList: React.NamedExoticComponent<AvatarListProps>;
74
123
 
75
124
  declare const demoUsers: User[];
76
125
  declare const generateDemoUsers: (count?: number) => User[];
77
126
 
78
- export { AvatarList, type CustomComponentStoryItem, type ImageStoryItem, Stories, type StoryItem, type StoryItemControls, type StoryItemType, StoryViewer, type TextStoryItem, type User, type VideoStoryItem, demoUsers, generateDemoUsers };
127
+ /**
128
+ * Navigate to a URL with query params
129
+ */
130
+ declare function navigateWithParams(params: Record<string, string>, options?: {
131
+ replace?: boolean;
132
+ }): void;
133
+ /**
134
+ * Clear all query params
135
+ */
136
+ declare function clearQueryParams(options?: {
137
+ replace?: boolean;
138
+ }): void;
139
+
140
+ export { type AvatarClassNames, AvatarList, type AvatarListClassNames, type CustomComponentStoryItem, type ImageStoryItem, type ProgressBarClassNames, Stories, type StoriesClassNames, type StoryItem, type StoryItemClassNames, type StoryItemControls, type StoryItemType, type StoryProgressBarsClassNames, StoryViewer, type StoryViewerClassNames, type TextStoryItem, type User, type VideoStoryItem, clearQueryParams, demoUsers, generateDemoUsers, navigateWithParams };
package/dist/index.js CHANGED
@@ -1,18 +1,19 @@
1
- import E,{memo,useState,useRef,useCallback,useEffect,useMemo}from'react';import {useParams,useNavigate}from'react-router-dom';import {jsxs,jsx,Fragment}from'react/jsx-runtime';import {createPortal}from'react-dom';var ae=memo(({avatarUrl:e,username:r,hasUnreadStories:o=false,onClick:n})=>{let[l,i]=useState(false),[a,c]=useState(false);return jsxs("button",{className:`story-avatar ${o?"story-avatar-unread":"story-avatar-read"}`,onClick:n,"aria-label":`View ${r}'s story`,children:[jsx("div",{className:"story-avatar-ring",children:jsx("div",{className:"story-avatar-image-wrapper",children:a?jsx("div",{className:"story-avatar-placeholder",children:r.charAt(0).toUpperCase()}):jsx("img",{src:e,alt:r,className:`story-avatar-image ${l?"story-avatar-image-loaded":""}`,loading:"lazy",onLoad:()=>i(true),onError:()=>c(true)})})}),jsx("span",{className:"story-avatar-username",children:r})]})});ae.displayName="Avatar";var q=90,Se=3,X=memo(({users:e,onAvatarClick:r})=>{let o=useRef(null),[n,l]=useState(0),[i,a]=useState(0),c=useCallback(()=>{o.current&&l(o.current.scrollLeft);},[]);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.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 jsx("div",{ref:o,className:"story-avatar-list",onScroll:c,role:"list","aria-label":"Stories",children:jsx("div",{className:"story-avatar-list-inner",style:{width:`${d}px`,position:"relative"},children:s.map(({user:u,index:g})=>jsx("div",{className:"story-avatar-item",style:{position:"absolute",left:`${g*q}px`,width:`${q}px`},role:"listitem",children: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]=useState(0),[i,a]=useState(!o),[c,t]=useState(e),m=useRef(null),d=useRef(0),s=useRef(null),u=useRef(),g=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=useCallback(()=>{i||(m.current&&(d.current+=Date.now()-m.current),a(true),s.current&&(cancelAnimationFrame(s.current),s.current=null));},[i]),v=useCallback(()=>{i&&(m.current=Date.now(),a(false));},[i]),S=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=useCallback(_=>{t(_);},[]);return useEffect(()=>(i||(m.current=Date.now(),s.current=requestAnimationFrame(u.current)),()=>{s.current&&cancelAnimationFrame(s.current);}),[i]),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})=>{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=useRef(null),o=useRef(null);return 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]=useState(!document.hidden);return useEffect(()=>{let o=()=>{r(!document.hidden);};return document.addEventListener("visibilitychange",o),()=>{document.removeEventListener("visibilitychange",o);}},[]),e};var Le=()=>{let e=useRef({}),r=useRef(new Set),o=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=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=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=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=useCallback(t=>e.current[t]||false,[]),c=useCallback(()=>{e.current={},r.current.clear();},[]);return useEffect(()=>()=>{c();},[c]),{preloadImage:o,preloadVideo:n,preloadStoryItem:l,preloadMultiple:i,isPreloaded:a,clearCache:c}};var le=memo(({progress:e,isActive:r})=>{let o=Math.round(e*100);return 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:jsx("div",{className:"story-progress-bar-fill",style:{transform:`scaleX(${r?e:e===1?1:0})`}})})});le.displayName="ProgressBar";var ce=memo(({total:e,currentIndex:r,progress:o})=>jsx("div",{className:"story-progress-bars-container",children:Array.from({length:e}).map((n,l)=>jsx(le,{progress:l<r?1:l===r?o:0,isActive:l===r},l))}));ce.displayName="StoryProgressBars";var de=memo(({item:e,isActive:r,isPaused:o,onDurationDetected:n,onLoadError:l,onBufferingChange:i,controls:a})=>{let c=useRef(null),[t,m]=useState(false),[d,s]=useState(true);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]),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]),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]),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=useCallback(()=>{m(true),s(false),l?.();},[l]),g=useCallback(()=>{s(false);},[]);if(t)return jsx("div",{className:"story-item story-item-error",children:jsx("div",{className:"story-item-error-message",children:"Failed to load content"})});switch(e.type){case "image":return jsxs("div",{className:"story-item story-item-image",children:[d&&jsx("div",{className:"story-item-loader",children:jsx("div",{className:"story-item-spinner"})}),jsx("img",{src:e.src,alt:e.alt||"Story image",onError:u,onLoad:g,draggable:false,style:{opacity:d?0:1}})]});case "video":return jsxs("div",{className:"story-item story-item-video",children:[d&&jsx("div",{className:"story-item-loader",children:jsx("div",{className:"story-item-spinner"})}),jsx("video",{ref:c,src:e.src,playsInline:true,loop:false,onError:u,preload:"auto",style:{opacity:d?0:1}})]});case "text":return jsx("div",{className:"story-item story-item-text",style:{backgroundColor:e.backgroundColor||"#000",color:e.textColor||"#fff"},children:jsx("div",{className:"story-item-text-content",children:e.text})});case "custom_component":let f=e.component;return jsx("div",{className:"story-item story-item-component",children:jsx(f,{...a})});default:return null}});de.displayName="StoryItem";var A=5e3,ee=E.memo(({users:e,initialUserIndex:r,initialStoryIndex:o,isOpen:n,onClose:l,onStoryChange:i})=>{let[a,c]=useState(r),[t,m]=useState(o??0),[d,s]=useState(false);useEffect(()=>{c(r);},[r]),useEffect(()=>{m(o??0);},[o]);let[u,g]=useState(false),[f,v]=useState(null),[S,T]=useState(false),[_,R]=useState(false),me=useRef(null),fe=useRef(null),ye=useRef(0),ge=useRef(A),te=useRef(false),b=e[a],U=b?.stories[t],B=b?.stories.length||0;useEffect(()=>{ge.current=U?.duration||A;},[U?.duration]);let _e=Ee(n),re=Pe(),{preloadStoryItem:oe}=Le(),N=useCallback(()=>s(true),[]),z=useCallback(()=>s(false),[]),ve=useRef(),x=Ie({duration:ge.current||A,onComplete:()=>ve.current?.(),autoStart:false}),He=useCallback(y=>{y?x.pause():d||x.resume();},[x,d]);useEffect(()=>{let y=U?.duration||A;x.setDuration(y);},[x,U?.duration]);let k=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=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=useCallback(()=>{window.scrollTo(0,ye.current),l();},[l]);useEffect(()=>{ve.current=k;},[k]);let Oe=useMemo(()=>({pause:N,resume:z,next:k,prev:H,setDuration:y=>fe.current?.setDuration(y)}),[N,z,k,H]),Ke=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=useRef(null),se=useRef(false),qe=useCallback(y=>{se.current=false,J.current={x:y.clientX,y:y.clientY},N();},[N]),Xe=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}),useEffect(()=>{re?re&&!d&&z():N();},[re,N,z,d]),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]),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]),useEffect(()=>{i&&n&&i(a,t);},[a,t,i,n]);let Ye=useCallback(()=>{console.warn("Story item failed to load, skipping..."),setTimeout(k,500);},[k]);if(!n||!b||!U)return null;let je=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:[jsx("div",{className:"story-viewer-overlay",onClick:ne}),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."}),jsxs("div",{"aria-live":"polite","aria-atomic":"true",className:"sr-only",children:["Viewing story ",t+1," of ",B," by"," ",b?.username]}),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:[jsxs("div",{className:"story-viewer-header",children:[jsx(ce,{total:B,currentIndex:t,progress:x.progress}),jsxs("div",{className:"story-viewer-user-info",children:[jsx("img",{src:b.avatarUrl,alt:`${b.username} avatar`,className:"story-viewer-avatar"}),jsx("span",{className:"story-viewer-username",children:b.username})]}),jsx("button",{className:"story-viewer-close",onClick:ne,"aria-label":"Close story viewer",type:"button",children:"\xD7"})]}),jsx("div",{className:"story-viewer-items",children:S||_?jsx("div",{className:"story-item-loader",children:jsx("div",{className:"story-item-spinner"})}):jsx(de,{item:U,isActive:true,isPaused:d||se.current,onDurationDetected:y=>fe.current?.setDuration(y),onLoadError:Ye,onBufferingChange:He,controls:Oe})}),jsxs("div",{className:"story-viewer-nav-hints",children:[jsx("div",{className:"story-viewer-nav-hint story-viewer-nav-hint-left"}),jsx("div",{className:"story-viewer-nav-hint story-viewer-nav-hint-right"})]})]})]});return 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}=useParams(),n=useNavigate(),[l,i]=useState({isOpen:false,userIndex:0,storyIndex:0}),a=useRef(0);useEffect(()=>{if(o){let d=Ae(e,o);d&&i({isOpen:true,userIndex:d.userIndex,storyIndex:d.storyIndex});}},[o,e]);let c=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=useCallback(()=>{i({isOpen:false,userIndex:0,storyIndex:0}),requestAnimationFrame(()=>{window.scrollTo(0,a.current);}),n(r,{replace:true});},[n,r]),m=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 jsxs(Fragment,{children:[jsx(X,{users:e,onAvatarClick:c}),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.useState(null),[i,a]=E.useState([42,28,18,12]);E.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 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:[jsx("h2",{style:{color:"white",marginBottom:"10px",fontSize:"28px",fontWeight:"bold"},children:"Poll"}),jsx("p",{style:{color:"rgba(255,255,255,0.9)",marginBottom:"30px",fontSize:"18px"},children:"What's your favorite framework?"}),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 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:[jsxs("span",{style:{display:"flex",alignItems:"center",gap:"10px"},children:[g&&"\u2713 ",d]}),n!==null&&jsxs("span",{children:[u,"%"]})]},s)})}),n!==null&&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.useState(false),[i,a]=E.useState(null),c=2;E.useEffect(()=>(e(),()=>r()),[e,r]);let t=d=>{a(d),l(true),setTimeout(()=>{r(),o();},2500);};return 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:[jsx("div",{style:{fontSize:"48px",marginBottom:"20px",animation:"bounce 1s infinite"},children:"\u{1FA90}"}),jsx("h2",{style:{color:"white",marginBottom:"10px",fontSize:"24px",fontWeight:"bold",textAlign:"center"},children:"Quiz Time!"}),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?"}),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)")),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:[jsx("span",{children:d}),n&&u&&jsx("span",{children:"\u2713"}),n&&g&&!u&&jsx("span",{children:"\u2717"})]},s)})}),n&&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.useState({days:12,hours:8,minutes:45,seconds:30});E.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})=>jsxs("div",{style:{textAlign:"center"},children:[jsx("div",{style:{background:"rgba(255,255,255,0.2)",backdropFilter:"blur(10px)",borderRadius:"12px",padding:"15px 20px",minWidth:"70px"},children:jsx("div",{style:{fontSize:"32px",fontWeight:"bold",color:"white"},children:String(n).padStart(2,"0")})}),jsx("div",{style:{color:"rgba(255,255,255,0.8)",fontSize:"12px",marginTop:"8px",textTransform:"uppercase"},children:l})]});return 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:[jsx("div",{style:{fontSize:"48px",marginBottom:"15px"},children:"\u{1F680}"}),jsx("h2",{style:{color:"white",marginBottom:"8px",fontSize:"24px",fontWeight:"bold"},children:"Product Launch"}),jsx("p",{style:{color:"rgba(255,255,255,0.7)",marginBottom:"30px",fontSize:"14px"},children:"Something amazing is coming..."}),jsxs("div",{style:{display:"flex",gap:"12px",marginBottom:"30px"},children:[jsx(o,{value:e.days,label:"Days"}),jsx(o,{value:e.hours,label:"Hours"}),jsx(o,{value:e.minutes,label:"Mins"}),jsx(o,{value:e.seconds,label:"Secs"})]}),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=()=>jsxs("div",{style:{display:"flex",flexDirection:"column",height:"100%",background:"linear-gradient(180deg, #1a1a2e 0%, #16213e 100%)",position:"relative",overflow:"hidden"},children:[jsx("div",{style:{flex:1,display:"flex",alignItems:"center",justifyContent:"center",padding:"20px"},children: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)"}})}),jsxs("div",{style:{padding:"30px",background:"linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.8) 100%)"},children:[jsxs("div",{style:{display:"flex",alignItems:"center",gap:"8px",marginBottom:"10px"},children:[jsx("span",{style:{background:"#ef4444",color:"white",padding:"4px 10px",borderRadius:"20px",fontSize:"12px",fontWeight:"bold"},children:"NEW"}),jsx("span",{style:{color:"rgba(255,255,255,0.6)",fontSize:"12px"},children:"Limited Edition"})]}),jsx("h2",{style:{color:"white",fontSize:"24px",fontWeight:"bold",marginBottom:"8px"},children:"Premium Watch Collection"}),jsx("p",{style:{color:"rgba(255,255,255,0.7)",fontSize:"14px",marginBottom:"15px"},children:"Elegant design meets modern technology"}),jsxs("div",{style:{display:"flex",alignItems:"center",gap:"15px"},children:[jsx("span",{style:{color:"white",fontSize:"28px",fontWeight:"bold"},children:"$299"}),jsx("span",{style:{color:"rgba(255,255,255,0.5)",fontSize:"18px",textDecoration:"line-through"},children:"$399"})]}),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.useState(5),[i,a]=E.useState(false);E.useEffect(()=>(e(),()=>r()),[e,r]);let c=()=>{a(true),setTimeout(()=>{r(),o();},1500);};return 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:[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]}),jsx("h2",{style:{color:"white",marginBottom:"10px",fontSize:"24px",fontWeight:"bold"},children:"Rate Your Experience"}),jsx("p",{style:{color:"rgba(255,255,255,0.9)",marginBottom:"30px",fontSize:"16px"},children:"How was your visit today?"}),i?jsxs("div",{style:{textAlign:"center"},children:[jsx("div",{style:{fontSize:"48px",marginBottom:"10px"},children:"\u{1F389}"}),jsx("p",{style:{color:"white",fontSize:"18px",fontWeight:"bold"},children:"Thanks for your feedback!"})]}):jsxs(Fragment,{children:[jsxs("div",{style:{width:"100%",marginBottom:"20px"},children:[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"}}),jsxs("div",{style:{display:"flex",justifyContent:"space-between",color:"rgba(255,255,255,0.7)",fontSize:"12px",marginTop:"8px"},children:[jsx("span",{children:"1"}),jsx("span",{children:"10"})]})]}),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
+ import V,{memo,useState,useRef,useCallback,useEffect,useMemo,useLayoutEffect}from'react';import {jsxs,jsx,Fragment}from'react/jsx-runtime';import {createPortal}from'react-dom';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=memo(({avatarUrl:e,username:r,hasUnreadStories:s=false,onClick:o,classNames:u})=>{let[d,l]=useState(false),[c,t]=useState(false);return jsxs("button",{className:x("story-avatar",s?"story-avatar-unread":"story-avatar-read",u?.root),onClick:o,"aria-label":`View ${r}'s story`,children:[jsx("div",{className:x("story-avatar-ring",u?.ring),children:jsx("div",{className:x("story-avatar-image-wrapper",u?.imageWrapper),children:c?jsx("div",{className:x("story-avatar-placeholder",u?.placeholder),children:r.charAt(0).toUpperCase()}):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)})})}),jsx("span",{className:x("story-avatar-username",u?.username),children:r})]})});Fe.displayName="Avatar";var le=90,Oe=3,ce=memo(({users:e,onAvatarClick:r,classNames:s})=>{let o=useRef(null),[u,d]=useState(0),[l,c]=useState(0),t=useCallback(()=>{o.current&&d(o.current.scrollLeft);},[]);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.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 jsx("div",{ref:o,className:x("story-avatar-list",s?.root),onScroll:t,role:"list","aria-label":"Stories",children:jsx("div",{className:"story-avatar-list-inner",style:{width:`${i}px`,position:"relative"},children:I.map(({user:y,index:C})=>jsx("div",{className:"story-avatar-item",style:{position:"absolute",left:`${C*le}px`,width:`${le}px`},role:"listitem",children: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]=useState(0),[d,l]=useState(!s),[c,t]=useState(e),h=useRef(null),b=useRef(0),i=useRef(null),I=useRef(),y=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=useCallback(()=>{d||(h.current&&(b.current+=Date.now()-h.current),l(true),i.current&&(cancelAnimationFrame(i.current),i.current=null));},[d]),a=useCallback(()=>{d&&(h.current=Date.now(),l(false));},[d]),k=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=useCallback(A=>{t(A);},[]);return useEffect(()=>(d||(h.current=Date.now(),i.current=requestAnimationFrame(I.current)),()=>{i.current&&cancelAnimationFrame(i.current);}),[d]),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})=>{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=useRef(null),s=useRef(null);return 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]=useState(!document.hidden);return useEffect(()=>{let s=()=>{r(!document.hidden);};return document.addEventListener("visibilitychange",s),()=>{document.removeEventListener("visibilitychange",s);}},[]),e};var et=()=>{let e=useRef({}),r=useRef(new Set),s=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=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=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=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=useCallback(t=>e.current[t]==="loaded",[]),c=useCallback(()=>{e.current={},r.current.clear();},[]);return useEffect(()=>()=>{c();},[c]),{preloadImage:s,preloadVideo:o,preloadStoryItem:u,preloadMultiple:d,isPreloaded:l,clearCache:c}};function tt(){let[e,r]=useState(()=>new URLSearchParams(window.location.search));useEffect(()=>{let o=()=>{r(new URLSearchParams(window.location.search));};return window.addEventListener("popstate",o),()=>window.removeEventListener("popstate",o)},[]);let s=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=memo(({progress:e,isActive:r,classNames:s})=>{let o=Math.round(e*100);return 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:jsx("div",{className:x("story-progress-bar-fill",s?.fill),style:{transform:`scaleX(${r?e:e===1?1:0})`}})})});Te.displayName="ProgressBar";var Ne=memo(({total:e,currentIndex:r,progress:s,classNames:o})=>jsx("div",{className:x("story-progress-bars-container",o?.root),children:Array.from({length:e}).map((u,d)=>jsx(Te,{progress:d<r?1:d===r?s:0,isActive:d===r,classNames:o?.bar},d))}));Ne.displayName="StoryProgressBars";var ke=memo(({item:e,isActive:r,isPaused:s,onDurationDetected:o,onLoadError:u,onBufferingChange:d,controls:l,classNames:c})=>{let t=useRef(null),[h,b]=useState(false),[i,I]=useState(()=>e.type==="image"||e.type==="video");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]),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]),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]),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]),useEffect(()=>{let a=t.current;if(!(e.type!=="video"||!a))return ()=>{a.pause(),a.removeAttribute("src"),a.load();}},[e.id,e.type]);let y=useCallback(()=>{b(true),I(false),u?.();},[u]),C=useCallback(()=>{I(false);},[]);if(h)return jsx("div",{className:x("story-item story-item-error",c?.error),children:jsx("div",{className:"story-item-error-message",children:"Failed to load content"})});switch(e.type){case "image":return jsxs("div",{className:x("story-item story-item-image",c?.root),children:[i&&jsx("div",{className:x("story-item-loader",c?.loader),children:jsx("div",{className:"story-item-spinner"})}),jsx("img",{src:e.src,alt:e.alt||"Story image",onError:y,onLoad:C,draggable:false,style:{opacity:i?0:1}})]});case "video":return jsxs("div",{className:x("story-item story-item-video",c?.root),children:[i&&jsx("div",{className:x("story-item-loader",c?.loader),children:jsx("div",{className:"story-item-spinner"})}),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 jsx("div",{className:x("story-item story-item-text",c?.root),style:{backgroundColor:e.backgroundColor||"#000",color:e.textColor||"#fff"},children:jsx("div",{className:x("story-item-text-content",c?.textContent),children:e.text})});case "custom_component":let a=e.component;return jsx("div",{className:x("story-item story-item-component",c?.root),children: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.memo(({users:e,initialUserIndex:r,initialStoryIndex:s,isOpen:o,onClose:u,onStoryChange:d,classNames:l})=>{let c=o===void 0,[t,h]=tt(),b=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]);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=useCallback(()=>{c?h({},{replace:true}):u&&u();},[c,h,u]),[a,k]=useState(i),[w,A]=useState(I),[H,De]=useState(false);useEffect(()=>{k(i);},[i]),useEffect(()=>{A(I);},[I]);let[P,Z]=useState(null),[yt,Se]=useState(false),[gt,ht]=useState(false),X=useRef(null),Ae=useRef(0),Be=useRef(K),Ie=useRef(false),Ce=useRef(true),Q=useRef(null),J=useRef(null),M=useRef(0),_=useRef(false),ne=useRef(new Map),F=e[a],B=F?.stories[w],se=F?.stories.length||0;useEffect(()=>{Be.current=B?.duration||K;},[B?.duration]),useEffect(()=>{ne.current.set(a,w);},[a,w]);let vt=Ze(y),Pe=Je(),{preloadStoryItem:Ee}=et(),q=useCallback(()=>De(true),[]),$=useCallback(()=>De(false),[]),$e=useRef(),E=Qe({duration:Be.current||K,onComplete:()=>$e.current?.(),autoStart:false}),bt=useCallback(n=>{n?E.pause():H||E.resume();},[E,H]);useEffect(()=>{E.setDuration(B?.duration||K);},[E,B?.duration]);let me=useCallback(()=>({leftUserIndex:Math.max(0,a-1),rightUserIndex:Math.min(e.length-1,a+1)}),[a,e.length]),G=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=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=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=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=useCallback(()=>{window.scrollTo(0,Ae.current),C();},[C]);useEffect(()=>{$e.current=Y;},[Y]);let xt=useMemo(()=>({pause:q,resume:$,next:Y,prev:ae,setDuration:n=>E.setDuration(n)}),[q,$,Y,ae,E]),wt=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=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=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]);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}),useEffect(()=>{Pe?Pe&&!H&&$():q();},[Pe,q,$,H]),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]),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]),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=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)=>jsxs(Fragment,{children:[jsxs("div",{className:x("story-viewer-header",l?.header),children:[jsx(Ne,{total:n.stories.length,currentIndex:g,progress:v,classNames:l?.progressBars}),jsxs("div",{className:x("story-viewer-user-info",l?.userInfo),children:[jsx("img",{src:n.avatarUrl,alt:`${n.username} avatar`,className:x("story-viewer-avatar",l?.avatar)}),jsx("span",{className:x("story-viewer-username",l?.username),children:n.username})]}),jsx("button",{className:x("story-viewer-close",l?.closeButton),onClick:ye,"aria-label":"Close story viewer",type:"button",children:"\xD7"})]},n.id),jsx("div",{className:x("story-viewer-items",l?.items),children:(yt||gt)&&p?jsx("div",{className:"story-item-loader",children:jsx("div",{className:"story-item-spinner"})}):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&&jsxs("div",{className:"story-viewer-nav-hints",children:[jsx("div",{className:"story-viewer-nav-hint story-viewer-nav-hint-left"}),jsx("div",{className:"story-viewer-nav-hint story-viewer-nav-hint-right"})]})]}),Pt=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:[jsx("div",{className:x("story-viewer-overlay",l?.overlay),onClick:ye}),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."}),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 jsx("div",{className:"story-viewer-cube-viewport",style:n?{perspective:`${m*16}px`}:void 0,children:jsxs("div",{ref:Q,className:"story-viewer-cube-wrapper",style:n?{transformStyle:"preserve-3d",transform:re(m,0)}:void 0,children:[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&&jsx("div",{style:g("-90deg"),children:Ue(ge,ge.stories[ze],ze,0,false)}),n&&he&&jsx("div",{style:g("90deg"),children:Ue(he,he.stories[We],We,0,false)})]})})})()]});return createPortal(Pt,document.body)});var dt=({users:e,classNames:r})=>{let s=useCallback(o=>{let u=e[o];u&&u.stories.length>0&&Re({user:u.id,story:u.stories[0].id});},[e]);return jsxs(Fragment,{children:[jsx(ce,{users:e,onAvatarClick:s,classNames:r?.avatarList}),jsx(we,{users:e,classNames:r?.storyViewer})]})};var pt=({pause:e,resume:r,next:s})=>{let[o,u]=V.useState(null),[d,l]=V.useState([42,28,18,12]);V.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 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:[jsx("h2",{style:{color:"white",marginBottom:"10px",fontSize:"28px",fontWeight:"bold"},children:"Poll"}),jsx("p",{style:{color:"rgba(255,255,255,0.9)",marginBottom:"30px",fontSize:"18px"},children:"What's your favorite framework?"}),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 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:[jsxs("span",{style:{display:"flex",alignItems:"center",gap:"10px"},children:[y&&"\u2713 ",b]}),o!==null&&jsxs("span",{children:[I,"%"]})]},i)})}),o!==null&&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.useState(false),[d,l]=V.useState(null),c=2;V.useEffect(()=>(e(),()=>r()),[e,r]);let t=b=>{l(b),u(true),setTimeout(()=>{r(),s();},2500);};return 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:[jsx("div",{style:{fontSize:"48px",marginBottom:"20px",animation:"bounce 1s infinite"},children:"\u{1FA90}"}),jsx("h2",{style:{color:"white",marginBottom:"10px",fontSize:"24px",fontWeight:"bold",textAlign:"center"},children:"Quiz Time!"}),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?"}),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)")),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:[jsx("span",{children:b}),o&&I&&jsx("span",{children:"\u2713"}),o&&y&&!I&&jsx("span",{children:"\u2717"})]},i)})}),o&&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.useState({days:12,hours:8,minutes:45,seconds:30});V.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})=>jsxs("div",{style:{textAlign:"center"},children:[jsx("div",{style:{background:"rgba(255,255,255,0.2)",backdropFilter:"blur(10px)",borderRadius:"12px",padding:"15px 20px",minWidth:"70px"},children:jsx("div",{style:{fontSize:"32px",fontWeight:"bold",color:"white"},children:String(o).padStart(2,"0")})}),jsx("div",{style:{color:"rgba(255,255,255,0.8)",fontSize:"12px",marginTop:"8px",textTransform:"uppercase"},children:u})]});return 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:[jsx("div",{style:{fontSize:"48px",marginBottom:"15px"},children:"\u{1F680}"}),jsx("h2",{style:{color:"white",marginBottom:"8px",fontSize:"24px",fontWeight:"bold"},children:"Product Launch"}),jsx("p",{style:{color:"rgba(255,255,255,0.7)",marginBottom:"30px",fontSize:"14px"},children:"Something amazing is coming..."}),jsxs("div",{style:{display:"flex",gap:"12px",marginBottom:"30px"},children:[jsx(s,{value:e.days,label:"Days"}),jsx(s,{value:e.hours,label:"Hours"}),jsx(s,{value:e.minutes,label:"Mins"}),jsx(s,{value:e.seconds,label:"Secs"})]}),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=()=>jsxs("div",{style:{display:"flex",flexDirection:"column",height:"100%",background:"linear-gradient(180deg, #1a1a2e 0%, #16213e 100%)",position:"relative",overflow:"hidden"},children:[jsx("div",{style:{flex:1,display:"flex",alignItems:"center",justifyContent:"center",padding:"20px"},children: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)"}})}),jsxs("div",{style:{padding:"30px",background:"linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.8) 100%)"},children:[jsxs("div",{style:{display:"flex",alignItems:"center",gap:"8px",marginBottom:"10px"},children:[jsx("span",{style:{background:"#ef4444",color:"white",padding:"4px 10px",borderRadius:"20px",fontSize:"12px",fontWeight:"bold"},children:"NEW"}),jsx("span",{style:{color:"rgba(255,255,255,0.6)",fontSize:"12px"},children:"Limited Edition"})]}),jsx("h2",{style:{color:"white",fontSize:"24px",fontWeight:"bold",marginBottom:"8px"},children:"Premium Watch Collection"}),jsx("p",{style:{color:"rgba(255,255,255,0.7)",fontSize:"14px",marginBottom:"15px"},children:"Elegant design meets modern technology"}),jsxs("div",{style:{display:"flex",alignItems:"center",gap:"15px"},children:[jsx("span",{style:{color:"white",fontSize:"28px",fontWeight:"bold"},children:"$299"}),jsx("span",{style:{color:"rgba(255,255,255,0.5)",fontSize:"18px",textDecoration:"line-through"},children:"$399"})]}),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.useState(5),[d,l]=V.useState(false);V.useEffect(()=>(e(),()=>r()),[e,r]);let c=()=>{l(true),setTimeout(()=>{r(),s();},1500);};return 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:[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]}),jsx("h2",{style:{color:"white",marginBottom:"10px",fontSize:"24px",fontWeight:"bold"},children:"Rate Your Experience"}),jsx("p",{style:{color:"rgba(255,255,255,0.9)",marginBottom:"30px",fontSize:"16px"},children:"How was your visit today?"}),d?jsxs("div",{style:{textAlign:"center"},children:[jsx("div",{style:{fontSize:"48px",marginBottom:"10px"},children:"\u{1F389}"}),jsx("p",{style:{color:"white",fontSize:"18px",fontWeight:"bold"},children:"Thanks for your feedback!"})]}):jsxs(Fragment,{children:[jsxs("div",{style:{width:"100%",marginBottom:"20px"},children:[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"}}),jsxs("div",{style:{display:"flex",justifyContent:"space-between",color:"rgba(255,255,255,0.7)",fontSize:"12px",marginTop:"8px"},children:[jsx("span",{children:"1"}),jsx("span",{children:"10"})]})]}),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:j[0],duration:15e3}]},{id:"user-polls",username:"Interactive",avatarUrl:W[1],hasUnreadStories:true,stories:[{id:"poll-intro",type:"text",text:`Let's have some fun! \u{1F3AE}
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:$e,duration:3e4},{id:"quiz-1",type:"custom_component",component:Ve,duration:3e4},{id:"slider-1",type:"custom_component",component:We,duration:3e4}]},{id:"user-product",username:"Shop",avatarUrl:W[2],hasUnreadStories:true,stories:[{id:"product-1",type:"custom_component",component:It,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
+ 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:W[3],hasUnreadStories:true,stories:[{id:"launch-1",type:"custom_component",component:wt,duration:1e4},{id:"launch-2",type:"text",text:`Mark your calendars! \u{1F4C5}
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:W[4],hasUnreadStories:true,stories:[{id:"video-1",type:"video",src:j[1],duration:15e3},{id:"video-2",type:"video",src:j[2],duration:15e3},{id:"video-3",type:"text",text:`More videos coming soon! \u{1F3AC}
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:W[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
+ 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}]}],Ct=(e=50)=>{let r=[...pe];for(let o=pe.length;o<e;o++){let n=Math.random()>.3,l=Math.floor(Math.random()*5)+2;r.push({id:`user-${o}`,username:`User ${o}`,avatarUrl:`https://i.pravatar.cc/150?img=${o%70}`,hasUnreadStories:n,stories:Array.from({length:l},(i,a)=>{let c=Math.random();if(c<.5)return {id:`story-${o}-${a}`,type:"image",src:ze[Math.floor(Math.random()*ze.length)],duration:5e3,alt:`Story from User ${o}`};if(c<.7)return {id:`story-${o}-${a}`,type:"video",src:j[Math.floor(Math.random()*j.length)],duration:15e3};if(c<.9){let m=["#FF6B6B","#4ECDC4","#45B7D1","#FFA07A","#98D8C8","#667eea","#764ba2"];return {id:`story-${o}-${a}`,type:"text",text:`Hello from User ${o}! \u{1F44B}
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 ${a+1}`,backgroundColor:m[Math.floor(Math.random()*m.length)],textColor:"#FFFFFF",duration:4e3}}let t=[$e,Ve,We];return {id:`story-${o}-${a}`,type:"custom_component",component:t[Math.floor(Math.random()*t.length)],duration:3e4}})});}return r};export{X as AvatarList,Be as Stories,ee as StoryViewer,pe as demoUsers,Ct as generateDemoUsers};//# sourceMappingURL=index.js.map
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};export{ce as AvatarList,dt as Stories,we as StoryViewer,Xt as clearQueryParams,Me as demoUsers,nr as generateDemoUsers,Re as navigateWithParams};//# sourceMappingURL=index.js.map
18
19
  //# sourceMappingURL=index.js.map