stories

1"use client";
2 
3import type {
4  ComponentProps,
5  HTMLAttributes,
6  VideoHTMLAttributes,
7} from "react";
8import { useEffect, useRef } from "react";
9import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
10import {
11  Carousel,
12  CarouselContent,
13  CarouselItem,
14} from "@/components/ui/carousel";
15import { cn } from "@/lib/utils";
16 
17export type StoriesProps = ComponentProps<typeof Carousel>;
18 
19export const Stories = ({ className, opts, ...props }: StoriesProps) => (
20  <Carousel
21    className={cn("w-full", className)}
22    opts={{
23      align: "start",
24      loop: false,
25      dragFree: true,
26      ...opts,
27    }}
28    {...props}
29  />
30);
31 
32export type StoriesContentProps = ComponentProps<typeof CarouselContent>;
33 
34export const StoriesContent = ({
35  className,
36  ...props
37}: StoriesContentProps) => (
38  <CarouselContent className={cn("-ml-2 gap-2", className)} {...props} />
39);
40 
41export type StoryProps = HTMLAttributes<HTMLDivElement>;
42 
43export const Story = ({ className, ...props }: StoryProps) => (
44  <CarouselItem className={cn("basis-0 pl-2 md:pl-4", className)}>
45    <div
46      className={cn(
47        "group relative overflow-hidden rounded-xl bg-muted/40",
48        "cursor-pointer transition-all duration-200",
49        "hover:scale-[1.02] hover:shadow-lg",
50        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
51        className
52      )}
53      role="button"
54      tabIndex={0}
55      {...props}
56    />
57  </CarouselItem>
58);
59 
60export type StoryVideoProps = VideoHTMLAttributes<HTMLVideoElement>;
61 
62const tRegex = /t=(\d+(?:\.\d+)?)/;
63 
64export const StoryVideo = ({ className, ...props }: StoryVideoProps) => {
65  const videoRef = useRef<HTMLVideoElement>(null);
66  const initialTimeRef = useRef<number>(0);
67 
68  // Parse the initial time from the src attribute (e.g., #t=20)
69  useEffect(() => {
70    const src = (props.src ?? "") as string;
71    let initialTime = 0;
72    if (typeof src === "string") {
73      const hashIndex = src.indexOf("#");
74      if (hashIndex !== -1) {
75        const hash = src.slice(hashIndex + 1);
76        // Look for t=number or t=start,end
77        const tMatch = hash.match(tRegex);
78        if (tMatch) {
79          initialTime = Number.parseFloat(tMatch[1]);
80        }
81      }
82    }
83    initialTimeRef.current = initialTime;
84  }, [props.src]);
85 
86  const handleMouseOver = () => {
87    videoRef.current?.play();
88  };
89 
90  const handleMouseOut = () => {
91    if (videoRef.current) {
92// … truncated