{
  "version": 3,
  "sources": ["ssg:https://framerusercontent.com/modules/ntygznRmEXTHFgOaCf9D/Q1mX5EjJGtmanTo5ucPv/Stories_Comp.js"],
  "sourcesContent": ["import{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{addPropertyControls,ControlType}from\"framer\";import{useState,useRef,useEffect,useCallback,useMemo}from\"react\";export function InstagramStories({items=[],onStoryEnd}){const[currentIndex,setCurrentIndex]=useState(0);// Nov\u00FD stav pro vynucen\u00ED op\u011Btovn\u00E9ho spu\u0161t\u011Bn\u00ED useEffectu p\u0159i smy\u010Dce,\n// co\u017E je nutn\u00E9 u jedin\u00E9ho videa, aby se spustilo znovu.\nconst[iteration,setIteration]=useState(0);// Refs for progress bars and videos\nconst progressBarRefs=useRef([]);const videoRefs=useRef([]);const containerRef=useRef(null);const[isVisible,setIsVisible]=useState(false);const IMAGE_DURATION=5// Images always display for 5 seconds\n;// Lazy loading using IntersectionObserver\nuseEffect(()=>{const observer=new IntersectionObserver(entries=>{entries.forEach(entry=>{if(entry.isIntersecting){setIsVisible(true);observer.disconnect();}});},{threshold:.1});if(containerRef.current){observer.observe(containerRef.current);}return()=>observer.disconnect();},[]);// Only use items; externalFrames removed.\nconst combinedItems=useMemo(()=>{return items.filter(item=>!item.hidden).map((item,idx)=>({...item,id:item.id||`item-${idx}`,type:item.type||\"image\"}));},[items]);if(combinedItems.length===0){return /*#__PURE__*/_jsx(\"div\",{style:containerStyle,children:/*#__PURE__*/_jsx(\"p\",{style:{color:\"white\"},children:\"No stories available\"})});}const currentItem=combinedItems[currentIndex];// When moving to the next story. If looping back (nextIndex === 0),\n// we reset all progress bars instantly and bump iteration.\nconst handleNext=useCallback(()=>{const nextIndex=(currentIndex+1)%combinedItems.length;if(nextIndex===0){progressBarRefs.current.forEach(el=>{if(el){el.style.transition=\"none\";el.style.width=\"0%\";}});// Increment iteration to force useEffect to run even if index remains 0.\nsetIteration(iter=>iter+1);}setCurrentIndex(nextIndex);if(onStoryEnd&&nextIndex===0){onStoryEnd();}},[currentIndex,combinedItems.length,onStoryEnd]);// Start CSS transition on the current progress bar.\nconst startProgressBar=useCallback(duration=>{const progressEl=progressBarRefs.current[currentIndex];if(!progressEl)return;progressEl.style.transition=\"none\";progressEl.style.width=\"0%\";progressEl.getBoundingClientRect()// force reflow\n;progressEl.style.transition=`width ${duration}s linear`;progressEl.addEventListener(\"transitionend\",()=>{if(parseFloat(getComputedStyle(progressEl).width)>=progressEl.parentElement.offsetWidth-1){handleNext();}},{once:true});progressEl.style.width=\"100%\";},[currentIndex,handleNext]);// When the current story changes or when iteration changes (for looping single video),\n// reset the progress bar and handle video playback.\nuseEffect(()=>{const progressEl=progressBarRefs.current[currentIndex];if(progressEl){progressEl.style.transition=\"none\";progressEl.style.width=\"0%\";}if(currentItem.type===\"video\"){const video=videoRefs.current[currentIndex];if(video){video.pause();video.currentTime=0;// If metadata is already loaded, start immediately.\nif(video.readyState>=1){startProgressBar(video.duration);video.play().catch(()=>{});}}}else{startProgressBar(IMAGE_DURATION);}},[currentIndex,currentItem,iteration,startProgressBar]);// When video metadata is loaded, start progress bar and play video.\nconst handleVideoLoaded=useCallback(e=>{const video=e.target;video.currentTime=0;startProgressBar(video.duration);video.play().catch(()=>{});},[startProgressBar]);// When video ends, proceed to the next story.\nconst handleVideoEnded=useCallback(()=>{handleNext();},[handleNext]);return /*#__PURE__*/_jsxs(\"div\",{ref:containerRef,style:containerStyle,role:\"region\",\"aria-label\":\"Instagram Stories\",children:[/*#__PURE__*/_jsx(\"div\",{style:progressContainerStyle,children:combinedItems.map((item,index)=>/*#__PURE__*/_jsx(\"div\",{style:progressBarStyle,children:/*#__PURE__*/_jsx(\"div\",{ref:el=>progressBarRefs.current[index]=el,style:progressFillStyle})},`progress-${index}-${item.id}`))}),/*#__PURE__*/_jsx(\"div\",{style:contentContainerStyle,children:combinedItems.map((item,index)=>{const isCurrent=index===currentIndex;return /*#__PURE__*/_jsxs(\"div\",{style:{...storyContentStyle,opacity:isCurrent?1:0},\"aria-hidden\":!isCurrent,children:[item.type===\"image\"&&/*#__PURE__*/_jsx(\"div\",{style:{...mediaStyle,backgroundImage:`url(${item.src})`},role:\"img\",\"aria-label\":\"Story image\"}),item.type===\"video\"&&isVisible&&/*#__PURE__*/_jsx(\"video\",{preload:\"auto\",ref:el=>videoRefs.current[index]=el,src:item.src,style:mediaStyle,muted:true,playsInline:true,onEnded:handleVideoEnded,onLoadedMetadata:handleVideoLoaded,\"aria-label\":\"Story video\"},`video-${currentIndex}-${item.id}-${iteration}`)]},`story-${index}-${item.id}`);})})]});}const containerStyle={width:\"100%\",height:\"100%\",position:\"relative\",background:\"#000\",borderRadius:\"8px\",overflow:\"hidden\"};const progressContainerStyle={position:\"absolute\",top:\"10px\",left:\"10px\",right:\"10px\",display:\"flex\",gap:\"4px\",zIndex:10};const progressBarStyle={flex:1,height:\"4px\",backgroundColor:\"#333\",borderRadius:\"2px\",overflow:\"hidden\",position:\"relative\"};const progressFillStyle={position:\"absolute\",top:0,left:0,bottom:0,width:\"0%\",backgroundColor:\"#fff\"};const contentContainerStyle={width:\"100%\",height:\"100%\",position:\"relative\"};const storyContentStyle={position:\"absolute\",top:0,left:0,width:\"100%\",height:\"100%\",transition:\"opacity 0.4s ease\",pointerEvents:\"none\"};const mediaStyle={width:\"100%\",height:\"100%\",objectFit:\"cover\"};addPropertyControls(InstagramStories,{items:{type:ControlType.Array,title:\"Items\",propertyControl:{type:ControlType.Object,controls:{type:{type:ControlType.Enum,options:[\"image\",\"video\"],defaultValue:\"image\",title:\"Type\"},src:{type:ControlType.String,title:\"Source\"},hidden:{type:ControlType.Boolean,title:\"Hide\"}}}},onStoryEnd:{type:ControlType.EventHandler,title:\"On Story End\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"InstagramStories\":{\"type\":\"reactComponent\",\"name\":\"InstagramStories\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./Stories_Comp.map"],
  "mappings": "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",
  "names": ["InstagramStories", "items", "onStoryEnd", "currentIndex", "setCurrentIndex", "ye", "iteration", "setIteration", "progressBarRefs", "pe", "videoRefs", "containerRef", "isVisible", "setIsVisible", "IMAGE_DURATION", "ue", "observer", "entries", "entry", "combinedItems", "se", "item", "idx", "p", "containerStyle", "currentItem", "handleNext", "te", "nextIndex", "el", "iter", "startProgressBar", "duration", "progressEl", "video", "handleVideoLoaded", "e", "handleVideoEnded", "u", "progressContainerStyle", "index", "progressBarStyle", "progressFillStyle", "contentContainerStyle", "isCurrent", "storyContentStyle", "mediaStyle", "addPropertyControls", "ControlType"]
}