Arkie-Library-Frontend/src/components/messageStream/bubbles/VideoBubble.tsx

import { ArrowDownToLine, Play } from "lucide-react";
import { useRef, useState } from "react";
import { useI18n } from "../../../i18n";
import type { Post } from "../../../types/post";
import { useVideoPlayer } from "../overlays/VideoPlayer";
import { autolink } from "../utils/autolink";
import { downloadAttachment } from "../utils/downloadFile";
import { formatBytes } from "../utils/formatBytes";
import { postDisplayText } from "../utils/postText";

function formatDuration(sec: number | undefined): string {
  if (!sec || sec <= 0) return "";
  const m = Math.floor(sec / 60);
  const s = Math.floor(sec % 60);
  return `${m}:${s.toString().padStart(2, "0")}`;
}

export function VideoBubble({ post }: { post: Post }) {
  const { openVideo } = useVideoPlayer();
  const { lang } = useI18n();
  const att = post.attachments[0];
  const [playing, setPlaying] = useState(false);
  const videoRef = useRef<HTMLVideoElement>(null);
  const text = postDisplayText(post, lang);
  if (!att) return null;
  const ratio =
    att.width && att.height ? `${att.width} / ${att.height}` : "16 / 9";
  const posterUrl = att.posterUrl ?? att.thumbnailUrl;
  const duration = formatDuration(att.durationSec);
  const previewVideoUrl = att.url.includes("#") ? att.url : `${att.url}#t=0.1`;

  return (
    <div className="flex flex-col gap-1.5">
      <div
        className="relative max-h-[220px] w-full overflow-hidden rounded-xl bg-black min-[440px]:max-h-[250px] md:max-h-[300px] lg:max-h-[340px]"
        style={{ aspectRatio: ratio }}
        onClick={() => {
          if (playing) {
            const v = videoRef.current;
            openVideo(att, v?.currentTime ?? 0);
          }
        }}
      >
        {playing ? (
          <video
            ref={videoRef}
            src={att.url}
            poster={att.posterUrl}
            controls
            playsInline
            autoPlay
            className="absolute inset-0 h-full w-full"
          />
        ) : (
          <>
            {posterUrl ? (
              <img
                src={posterUrl}
                alt=""
                className="absolute inset-0 h-full w-full object-cover"
              />
            ) : (
              <video
                src={previewVideoUrl}
                preload="metadata"
                muted
                playsInline
                className="absolute inset-0 h-full w-full object-cover"
                aria-hidden="true"
              />
            )}
            <button
              type="button"
              onClick={(e) => {
                e.stopPropagation();
                void downloadAttachment(post.id, att.id, att.filename).catch(
                  () => {},
                );
              }}
              className="group absolute left-3 top-3 z-10 inline-flex overflow-hidden rounded-full bg-black/45 text-xs text-white shadow-lg ring-1 ring-white/15 backdrop-blur-md transition hover:bg-black/60"
              aria-label={`Download ${att.filename}`}
            >
              <span className="flex h-8 w-8 items-center justify-center bg-white/10 transition group-hover:bg-white/15">
                <ArrowDownToLine className="h-4 w-4" strokeWidth={2.3} />
              </span>
              <span className="flex h-8 items-center gap-1 px-2.5">
                {duration ? (
                  <>
                    <span>{duration}</span>
                    <span className="opacity-60">·</span>
                  </>
                ) : null}
                <span>{formatBytes(att.sizeBytes)}</span>
              </span>
            </button>
            <button
              type="button"
              onClick={(e) => {
                e.stopPropagation();
                setPlaying(true);
              }}
              className="absolute inset-0 flex items-center justify-center"
              aria-label="Play video"
            >
              <span className="relative z-10 flex h-12 w-12 items-center justify-center rounded-full bg-black/55 text-white backdrop-blur md:h-14 md:w-14">
                <Play className="h-5 w-5 translate-x-0.5 fill-white md:h-6 md:w-6" />
              </span>
            </button>
          </>
        )}
      </div>
      {text ? (
        <div className="message-stream-copyable-text select-text whitespace-pre-wrap break-words text-[14px] leading-snug text-neutral-100">
          {autolink(text)}
        </div>
      ) : null}
    </div>
  );
}