{"version":3,"file":"Stories_Comp.CSsSWdgO.mjs","names":["useState","useRef","useMemo","useCallback"],"sources":["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ý stav pro vynucení opětovného spuštění useEffectu při smyčce,\n// což je nutné u jediného 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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"}