feat: support multi-video post bubbles
This commit is contained in:
TerryM
@@ -1,12 +1,14 @@
|
||||
import { 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 type { Attachment, Post } from "../../../types/post";
|
||||
import { AttachmentDownloadPill } from "../AttachmentDownloadPill";
|
||||
import { useVideoPlayer } from "../overlays/VideoPlayer";
|
||||
import { autolink } from "../utils/autolink";
|
||||
import { postDisplayText } from "../utils/postText";
|
||||
|
||||
const MAX_VISIBLE = 4;
|
||||
|
||||
function formatDuration(sec: number | undefined): string {
|
||||
if (!sec || sec <= 0) return "";
|
||||
const m = Math.floor(sec / 60);
|
||||
@@ -14,81 +16,171 @@ function formatDuration(sec: number | undefined): string {
|
||||
return `${m}:${s.toString().padStart(2, "0")}`;
|
||||
}
|
||||
|
||||
export function VideoBubble({ post }: { post: Post }) {
|
||||
function isVideoAttachment(att: Attachment): boolean {
|
||||
return att.kind === "video" || att.mime.startsWith("video/");
|
||||
}
|
||||
|
||||
function videoRatio(att: Attachment) {
|
||||
return att.width && att.height ? `${att.width} / ${att.height}` : "16 / 9";
|
||||
}
|
||||
|
||||
function VideoAttachmentCard({
|
||||
postId,
|
||||
attachment,
|
||||
compact = false,
|
||||
overlayCount,
|
||||
}: {
|
||||
postId: string;
|
||||
attachment: Attachment;
|
||||
compact?: boolean;
|
||||
overlayCount?: number;
|
||||
}) {
|
||||
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`;
|
||||
const posterUrl = attachment.posterUrl ?? attachment.thumbnailUrl;
|
||||
const duration = formatDuration(attachment.durationSec);
|
||||
const previewVideoUrl = attachment.url.includes("#")
|
||||
? attachment.url
|
||||
: `${attachment.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"
|
||||
/>
|
||||
)}
|
||||
<div
|
||||
className={`relative w-full overflow-hidden bg-black ${
|
||||
compact
|
||||
? "h-full"
|
||||
: "max-h-[220px] rounded-xl min-[440px]:max-h-[250px] md:max-h-[300px] lg:max-h-[340px]"
|
||||
}`}
|
||||
style={compact ? undefined : { aspectRatio: videoRatio(attachment) }}
|
||||
onClick={() => {
|
||||
if (playing) {
|
||||
const v = videoRef.current;
|
||||
openVideo(attachment, v?.currentTime ?? 0);
|
||||
}
|
||||
}}
|
||||
>
|
||||
{playing && !compact ? (
|
||||
<video
|
||||
ref={videoRef}
|
||||
src={attachment.url}
|
||||
poster={attachment.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 ${
|
||||
overlayCount ? "blur-sm scale-105" : ""
|
||||
}`}
|
||||
/>
|
||||
) : (
|
||||
<video
|
||||
src={previewVideoUrl}
|
||||
preload="metadata"
|
||||
muted
|
||||
playsInline
|
||||
className={`absolute inset-0 h-full w-full object-cover ${
|
||||
overlayCount ? "blur-sm scale-105" : ""
|
||||
}`}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
)}
|
||||
{!compact ? (
|
||||
<AttachmentDownloadPill
|
||||
postId={post.id}
|
||||
attachment={att}
|
||||
postId={postId}
|
||||
attachment={attachment}
|
||||
leadingLabel={duration}
|
||||
/>
|
||||
) : null}
|
||||
{overlayCount ? (
|
||||
<button
|
||||
type="button"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setPlaying(true);
|
||||
openVideo(attachment, 0);
|
||||
}}
|
||||
className="absolute inset-0 flex items-center justify-center bg-black/45 text-3xl font-semibold text-white"
|
||||
aria-label="Open more videos"
|
||||
>
|
||||
+{overlayCount}
|
||||
</button>
|
||||
) : (
|
||||
<button
|
||||
type="button"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
if (compact) openVideo(attachment, 0);
|
||||
else 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
|
||||
className={`relative z-10 flex items-center justify-center rounded-full bg-black/55 text-white backdrop-blur ${
|
||||
compact ? "h-9 w-9" : "h-12 w-12 md:h-14 md:w-14"
|
||||
}`}
|
||||
>
|
||||
<Play
|
||||
className={`translate-x-0.5 fill-white ${
|
||||
compact ? "h-4 w-4" : "h-5 w-5 md:h-6 md:w-6"
|
||||
}`}
|
||||
/>
|
||||
</span>
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function VideoBubble({ post }: { post: Post }) {
|
||||
const { lang } = useI18n();
|
||||
const videos = post.attachments.filter(isVideoAttachment);
|
||||
const text = postDisplayText(post, lang);
|
||||
const shouldMerge = videos.length > MAX_VISIBLE;
|
||||
if (!videos.length) return null;
|
||||
|
||||
if (shouldMerge) {
|
||||
const visible = videos.slice(0, MAX_VISIBLE);
|
||||
const extra = videos.length - MAX_VISIBLE;
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<div className="grid h-[220px] grid-cols-2 grid-rows-2 gap-[2px] overflow-hidden rounded-xl bg-black min-[440px]:h-[250px] md:h-[300px] lg:h-[340px]">
|
||||
{visible.map((att, i) => {
|
||||
const isLastSlot = i === MAX_VISIBLE - 1 && extra > 0;
|
||||
return (
|
||||
<VideoAttachmentCard
|
||||
key={att.id}
|
||||
postId={post.id}
|
||||
attachment={att}
|
||||
compact
|
||||
overlayCount={isLastSlot ? extra : undefined}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</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>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-1.5">
|
||||
{videos.map((att) => (
|
||||
<VideoAttachmentCard key={att.id} postId={post.id} attachment={att} />
|
||||
))}
|
||||
{text ? (
|
||||
<div className="message-stream-copyable-text select-text whitespace-pre-wrap break-words text-[14px] leading-snug text-neutral-100">
|
||||
{autolink(text)}
|
||||
|
||||
Reference in New Issue
Block a user