82 lines
2.8 KiB
TypeScript
82 lines
2.8 KiB
TypeScript
|
import { Play } from "lucide-react";
|
||
|
|
import { useRef, useState } from "react";
|
||
|
|
import type { Post } from "../../../types/post";
|
||
|
|
import { useVideoPlayer } from "../overlays/VideoPlayer";
|
||
|
|
import { autolink } from "../utils/autolink";
|
||
|
|
import { formatBytes } from "../utils/formatBytes";
|
||
|
|
|
||
|
|
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 att = post.attachments[0];
|
||
|
|
const [playing, setPlaying] = useState(false);
|
||
|
|
const videoRef = useRef<HTMLVideoElement>(null);
|
||
|
|
if (!att) return null;
|
||
|
|
const ratio =
|
||
|
|
att.width && att.height ? `${att.width} / ${att.height}` : "16 / 9";
|
||
|
|
|
||
|
|
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"
|
||
|
|
/>
|
||
|
|
) : (
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
onClick={(e) => {
|
||
|
|
e.stopPropagation();
|
||
|
|
setPlaying(true);
|
||
|
|
}}
|
||
|
|
className="absolute inset-0 flex items-center justify-center"
|
||
|
|
aria-label="Play video"
|
||
|
|
>
|
||
|
|
{att.posterUrl ? (
|
||
|
|
<img
|
||
|
|
src={att.posterUrl}
|
||
|
|
alt=""
|
||
|
|
className="absolute inset-0 h-full w-full object-cover"
|
||
|
|
/>
|
||
|
|
) : null}
|
||
|
|
<div className="absolute left-3 top-3 z-10 flex items-center gap-1.5 rounded-full bg-black/55 px-2.5 py-1 text-xs text-white">
|
||
|
|
<span>{formatDuration(att.durationSec)}</span>
|
||
|
|
<span className="opacity-70">·</span>
|
||
|
|
<span>{formatBytes(att.sizeBytes)}</span>
|
||
|
|
</div>
|
||
|
|
<div 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" />
|
||
|
|
</div>
|
||
|
|
</button>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
{post.text ? (
|
||
|
|
<div className="whitespace-pre-wrap break-words text-[14px] leading-snug text-neutral-100">
|
||
|
|
{autolink(post.text)}
|
||
|
|
</div>
|
||
|
|
) : null}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|