"use client"; import type { ComponentProps, HTMLAttributes, VideoHTMLAttributes, } from "react"; import { useEffect, useRef } from "react"; import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"; import { Carousel, CarouselContent, CarouselItem, } from "@/components/ui/carousel"; import { cn } from "@/lib/utils"; export type StoriesProps = ComponentProps; export const Stories = ({ className, opts, ...props }: StoriesProps) => ( ); export type StoriesContentProps = ComponentProps; export const StoriesContent = ({ className, ...props }: StoriesContentProps) => ( ); export type StoryProps = HTMLAttributes; export const Story = ({ className, ...props }: StoryProps) => (

); export type StoryVideoProps = VideoHTMLAttributes; const tRegex = /t=(\d+(?:\.\d+)?)/; export const StoryVideo = ({ className, ...props }: StoryVideoProps) => { const videoRef = useRef(null); const initialTimeRef = useRef(0); // Parse the initial time from the src attribute (e.g., #t=20) useEffect(() => { const src = (props.src ?? "") as string; let initialTime = 0; if (typeof src === "string") { const hashIndex = src.indexOf("#"); if (hashIndex !== -1) { const hash = src.slice(hashIndex + 1); // Look for t=number or t=start,end const tMatch = hash.match(tRegex); if (tMatch) { initialTime = Number.parseFloat(tMatch[1]); } } } initialTimeRef.current = initialTime; }, [props.src]); const handleMouseOver = () => { videoRef.current?.play(); }; const handleMouseOut = () => { if (videoRef.current) { videoRef.current.pause(); videoRef.current.currentTime = initialTimeRef.current; } }; const handleFocus = () => { videoRef.current?.play(); }; const handleBlur = () => { if (videoRef.current) { videoRef.current.pause(); videoRef.current.currentTime = initialTimeRef.current; } }; return (

stories

Instalação

Registry dependencies