120 lines
4.4 KiB
TypeScript
120 lines
4.4 KiB
TypeScript
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>
|
|
);
|
|
}
|