feat: chat
This commit is contained in:
gosangam
@@ -0,0 +1,204 @@
|
||||
"use client";
|
||||
|
||||
/**
|
||||
* Full-screen viewer for a message's media.
|
||||
*
|
||||
* A horizontally scroll-snapped carousel rather than a slide animation: swipe
|
||||
* comes free on touch, the scrollbar reflects position, and the browser handles
|
||||
* momentum. Arrow keys and the on-screen buttons scroll to a slide rather than
|
||||
* setting state, so every input path drives the same mechanism.
|
||||
*/
|
||||
|
||||
import { useCallback, useEffect, useRef, useState } from "react";
|
||||
import { ChevronLeft, ChevronRight, Download, Loader2, X } from "lucide-react";
|
||||
import { toast } from "sonner";
|
||||
import { attachmentUrl, type Attachment } from "@/lib/chat";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
export function MediaLightbox({
|
||||
items,
|
||||
startIndex = 0,
|
||||
onClose,
|
||||
}: {
|
||||
items: Attachment[];
|
||||
startIndex?: number;
|
||||
onClose: () => void;
|
||||
}) {
|
||||
const trackRef = useRef<HTMLDivElement>(null);
|
||||
const [index, setIndex] = useState(startIndex);
|
||||
const [downloading, setDownloading] = useState(false);
|
||||
|
||||
const scrollTo = useCallback((i: number, smooth = true) => {
|
||||
const track = trackRef.current;
|
||||
if (!track) return;
|
||||
track.scrollTo({
|
||||
left: i * track.clientWidth,
|
||||
behavior: smooth ? "smooth" : "auto",
|
||||
});
|
||||
}, []);
|
||||
|
||||
// Jump to the tapped item before the first paint, so opening the third photo
|
||||
// doesn't visibly scroll from the first.
|
||||
useEffect(() => {
|
||||
scrollTo(startIndex, false);
|
||||
}, [startIndex, scrollTo]);
|
||||
|
||||
useEffect(() => {
|
||||
const onKey = (e: KeyboardEvent) => {
|
||||
if (e.key === "Escape") onClose();
|
||||
if (e.key === "ArrowRight") scrollTo(Math.min(index + 1, items.length - 1));
|
||||
if (e.key === "ArrowLeft") scrollTo(Math.max(index - 1, 0));
|
||||
};
|
||||
window.addEventListener("keydown", onKey);
|
||||
return () => window.removeEventListener("keydown", onKey);
|
||||
}, [index, items.length, onClose, scrollTo]);
|
||||
|
||||
const current = items[index];
|
||||
|
||||
/**
|
||||
* Download through a blob so the file keeps its name. The `download`
|
||||
* attribute is ignored cross-origin, and chat media is served from the BFF,
|
||||
* so a plain link would just navigate. If the fetch is refused (the signed
|
||||
* storage URL needs CORS), fall back to opening it — better than nothing.
|
||||
*/
|
||||
const download = async () => {
|
||||
if (!current) return;
|
||||
setDownloading(true);
|
||||
const href = attachmentUrl(current.id);
|
||||
try {
|
||||
const res = await fetch(href, { credentials: "include" });
|
||||
if (!res.ok) throw new Error(String(res.status));
|
||||
const blob = await res.blob();
|
||||
const objectUrl = URL.createObjectURL(blob);
|
||||
const a = document.createElement("a");
|
||||
a.href = objectUrl;
|
||||
a.download = current.file_name ?? `attachment-${current.id}`;
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
a.remove();
|
||||
URL.revokeObjectURL(objectUrl);
|
||||
} catch {
|
||||
window.open(href, "_blank", "noopener,noreferrer");
|
||||
toast.message("Opened in a new tab");
|
||||
} finally {
|
||||
setDownloading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 flex flex-col bg-black/95">
|
||||
<div className="flex items-center justify-between gap-2 px-3 py-2 text-white">
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClose}
|
||||
aria-label="Close"
|
||||
className="rounded-md p-2 hover:bg-white/10"
|
||||
>
|
||||
<X className="size-5" />
|
||||
</button>
|
||||
|
||||
{items.length > 1 && (
|
||||
<span className="text-xs tabular-nums text-white/70">
|
||||
{index + 1} / {items.length}
|
||||
</span>
|
||||
)}
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={download}
|
||||
disabled={downloading}
|
||||
aria-label="Download"
|
||||
className="rounded-md p-2 hover:bg-white/10 disabled:opacity-50"
|
||||
>
|
||||
{downloading ? (
|
||||
<Loader2 className="size-5 animate-spin" />
|
||||
) : (
|
||||
<Download className="size-5" />
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="relative flex-1 overflow-hidden">
|
||||
<div
|
||||
ref={trackRef}
|
||||
onScroll={(e) => {
|
||||
const el = e.currentTarget;
|
||||
const next = Math.round(el.scrollLeft / el.clientWidth);
|
||||
if (next !== index) setIndex(next);
|
||||
}}
|
||||
className="flex h-full snap-x snap-mandatory overflow-x-auto overflow-y-hidden [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
|
||||
>
|
||||
{items.map((a) => (
|
||||
<div
|
||||
key={a.id}
|
||||
className="flex h-full w-full shrink-0 snap-center items-center justify-center p-4"
|
||||
>
|
||||
{a.kind === "video" ? (
|
||||
<video
|
||||
src={attachmentUrl(a.id)}
|
||||
controls
|
||||
playsInline
|
||||
className="max-h-full max-w-full"
|
||||
/>
|
||||
) : (
|
||||
// eslint-disable-next-line @next/next/no-img-element
|
||||
<img
|
||||
src={attachmentUrl(a.id)}
|
||||
alt={a.file_name ?? "Shared media"}
|
||||
className="max-h-full max-w-full object-contain"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{items.length > 1 && (
|
||||
<>
|
||||
<Arrow
|
||||
side="left"
|
||||
disabled={index === 0}
|
||||
onClick={() => scrollTo(index - 1)}
|
||||
/>
|
||||
<Arrow
|
||||
side="right"
|
||||
disabled={index === items.length - 1}
|
||||
onClick={() => scrollTo(index + 1)}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function Arrow({
|
||||
side,
|
||||
disabled,
|
||||
onClick,
|
||||
}: {
|
||||
side: "left" | "right";
|
||||
disabled: boolean;
|
||||
onClick: () => void;
|
||||
}) {
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClick}
|
||||
disabled={disabled}
|
||||
aria-label={side === "left" ? "Previous" : "Next"}
|
||||
className={cn(
|
||||
// Pointer devices only: on touch the swipe is the gesture, and arrows
|
||||
// would sit over the image for no reason.
|
||||
"absolute top-1/2 hidden -translate-y-1/2 rounded-full bg-white/10 p-2 text-white",
|
||||
"hover:bg-white/20 disabled:opacity-0 sm:block",
|
||||
side === "left" ? "left-3" : "right-3",
|
||||
)}
|
||||
>
|
||||
{side === "left" ? (
|
||||
<ChevronLeft className="size-5" />
|
||||
) : (
|
||||
<ChevronRight className="size-5" />
|
||||
)}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user