Video Bubble

1"use client";
2 
3import * as React from "react";
4import { cn } from "@/lib/utils";
5import { type MessageStatus, MessageStatusIcon } from "./message-status";
6import "@/components/ui/whatsapp/styles/whatsapp.css";
7 
8interface VideoBubbleProps extends React.HTMLAttributes<HTMLDivElement> {
9  variant?: "incoming" | "outgoing";
10  src: string;
11  caption?: string;
12  /** e.g. "0:42" */
13  duration?: string;
14  timestamp?: string;
15  status?: MessageStatus;
16  showTail?: boolean;
17}
18 
19const VideoBubble = React.forwardRef<HTMLDivElement, VideoBubbleProps>(
20  (
21    {
22      className,
23      variant = "incoming",
24      src,
25      caption,
26      duration,
27      timestamp,
28      status,
29      showTail = false,
30      ...props
31    },
32    ref
33  ) => {
34    const isOutgoing = variant === "outgoing";
35    const videoRef = React.useRef<HTMLVideoElement>(null);
36    const [loaded, setLoaded] = React.useState(false);
37    const [playing, setPlaying] = React.useState(false);
38 
39    const togglePlay = () => {
40      const video = videoRef.current;
41      if (!video) return;
42      if (video.paused) {
43        video.play();
44        setPlaying(true);
45      } else {
46        video.pause();
47        setPlaying(false);
48      }
49    };
50 
51    const handleEnded = () => setPlaying(false);
52 
53    return (
54      <div
55        className={cn(
56          "flex w-full",
57          isOutgoing ? "justify-end" : "justify-start",
58          showTail ? "mb-[6px]" : "mb-[2px]",
59          className
60        )}
61        {...props}
62        ref={ref}
63      >
64        <div
65          className={cn(
66            "font-wa relative max-w-[336px] overflow-hidden rounded-lg",
67            showTail && (isOutgoing ? "rounded-br-[3px]" : "rounded-bl-[3px]")
68          )}
69        >
70          {/* Video */}
71          <div className="relative cursor-pointer bg-wa-gray-800" onClick={togglePlay}>
72            {!loaded && (
73              <div className="flex h-[200px] w-[336px] items-center justify-center">
74                <div className="animate-pulse bg-wa-gray-700 absolute inset-0" />
75              </div>
76            )}
77 
78            <video
79              ref={videoRef}
80              src={src}
81              onLoadedData={() => setLoaded(true)}
82              onEnded={handleEnded}
83              playsInline
84              preload="metadata"
85              className={cn(
86                "w-full max-h-[330px] object-cover transition-opacity duration-300",
87                loaded ? "opacity-100" : "opacity-0"
88              )}
89            />
90 
91// … truncated