4e:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 4f:T1907,'use client'; import { cn } from '@/lib/utils'; import * as React from 'react'; import { Button, ButtonProps } from '@/components/systaliko-ui/shadcn/button'; import { PauseIcon, PlayIcon, ReplyIcon } from 'lucide-react'; interface StoryProps extends React.HTMLAttributes { mediaLength: number; duration?: number; } interface StoryContextValue { mediaLength: number; currentIndex: number; progress: number; isPaused: boolean; isEnded: boolean; handleControl: () => void; setCurrentIndex: (index: number) => void; setIsPaused: (paused: boolean) => void; setIsEnded: (ended: boolean) => void; } const StoryContext = React.createContext( undefined, ); function useStoryContext() { const context = React.useContext(StoryContext); if (context === undefined) { throw new Error('useStoryContext must be used within a StoryProvider'); } return context; } export const Story = React.forwardRef( ({ mediaLength, duration = 2000, className, children, ...props }, ref) => { const [currentIndex, setCurrentIndex] = React.useState(0); const [progress, setProgress] = React.useState(0); const [isPaused, setIsPaused] = React.useState(false); const [isEnded, setIsEnded] = React.useState(false); const progressRef = React.useRef(0); const intervalRef = React.useRef | null>( null, ); React.useEffect(() => { progressRef.current = 0; setProgress(0); }, [currentIndex, duration, mediaLength]); React.useEffect(() => { if (mediaLength === 0 || isPaused) return; if (intervalRef.current) { clearInterval(intervalRef.current); intervalRef.current = null; } const tick = 50; const totalTicks = duration / tick; intervalRef.current = setInterval(() => { progressRef.current += 1; const newProgress = (progressRef.current / totalTicks) * 100; setProgress(newProgress); if (progressRef.current >= totalTicks) { clearInterval(intervalRef.current!); intervalRef.current = null; if (currentIndex < mediaLength - 1) { setCurrentIndex((idx) => idx + 1); } else { setIsPaused(true); setIsEnded(true); } } }, tick); return () => { if (intervalRef.current) { clearInterval(intervalRef.current); intervalRef.current = null; } }; }, [isPaused, currentIndex, duration, mediaLength]); if (mediaLength === 0) { return (

No stories to display

); } const handleControl = () => { if (isEnded) { setCurrentIndex(0); setIsEnded(false); setIsPaused(false); } else { setIsPaused((prev) => !prev); } }; return (

{children}

); }, ); Story.displayName = 'Story'; export const StoryProgress = React.forwardRef< HTMLDivElement, React.HTMLAttributes & { progressWrapClass?: string; progressActiveClass?: string; } >(({ className, progressWrapClass, progressActiveClass, ...props }, ref) => { const { mediaLength, currentIndex, progress, setCurrentIndex, setIsEnded, setIsPaused, } = useStoryContext(); const handleProgressClick = (index: number) => { setCurrentIndex(index); setIsPaused(false); setIsEnded(false); }; return (

{Array.from({ length: mediaLength }).map((_, index) => { const isActive = index === currentIndex; const isCompleted = index < currentIndex; return (

handleProgressClick(index)} role="button" tabIndex={0} onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { handleProgressClick(index); } }} >

); })}

); }); StoryProgress.displayName = 'StoryProgress'; export const StorySlide = React.forwardRef< HTMLDivElement, React.HTMLAttributes & { index: number } >(({ index, className, ...props }, ref) => { const { currentIndex } = useStoryContext(); if (index !== currentIndex) return null; return (

); }); StorySlide.displayName = 'StorySlide'; export const StoryControls: React.FC = ({ className, ...props }) => { const { isPaused, isEnded, handleControl } = useStoryContext(); return ( ); }; StoryControls.displayName = 'StoryControls'; export const StoryOverlay: React.FC = () => (

); 4d:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[null,["$","$L4e",null,{"files":[{"path":"registry/blocks/story/index.tsx","content":"$4f","type":"registry:block","target":"components/systaliko-ui/blocks/story.tsx"}],"className":"h-[70svh] min-h-80"}]]}]