mirror of
https://github.com/block/buzz.git
synced 2026-08-18 06:50:31 +02:00
feat(desktop): restore compact link preview cards
Co-authored-by: Taylor Ho <taylorkmho@gmail.com> Signed-off-by: Taylor Ho <taylorkmho@gmail.com>
This commit is contained in:
npub1223z34hd7vtwc6qj4s7flsxkj644nlre2nthu7lrrmkumhu3xddsrx9r6w
co-authored by
Taylor Ho
Taylor Ho
parent
a4b26c82a7
commit
92bbe84cad
@@ -1,11 +1,103 @@
|
||||
import { ChevronDown, ChevronUp, X } from "lucide-react";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { Globe, X } from "lucide-react";
|
||||
|
||||
import type { ResolvedLinkPreview } from "@/shared/lib/useResolvedLinkPreviews";
|
||||
import { cn } from "@/shared/lib/cn";
|
||||
import { Button } from "@/shared/ui/button";
|
||||
import {
|
||||
Attachment,
|
||||
AttachmentContent,
|
||||
AttachmentMedia,
|
||||
AttachmentTitle,
|
||||
AttachmentTrigger,
|
||||
} from "@/shared/ui/attachment";
|
||||
|
||||
function LinkPreviewIdentity({ preview }: { preview: ResolvedLinkPreview }) {
|
||||
function LinearLogo({ className }: { className?: string }) {
|
||||
return (
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
className={className}
|
||||
fill="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M2.886 4.18A11.982 11.982 0 0 1 11.99 0C18.624 0 24 5.376 24 12.009c0 3.64-1.62 6.903-4.18 9.105L2.887 4.18ZM1.817 5.626l16.556 16.556c-.524.33-1.075.62-1.65.866L.951 7.277c.247-.575.537-1.126.866-1.65ZM.322 9.163l14.515 14.515c-.71.172-1.443.282-2.195.322L0 11.358a12 12 0 0 1 .322-2.195Zm-.17 4.862 9.823 9.824a12.02 12.02 0 0 1-9.824-9.824Z" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
function GitHubLogo({ className }: { className?: string }) {
|
||||
return (
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
className={className}
|
||||
fill="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
function GoogleDriveLogo({ className }: { className?: string }) {
|
||||
return (
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
className={className}
|
||||
fill="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M12.01 1.485c-2.082 0-3.754.02-3.743.047.01.02 1.708 3.001 3.774 6.62l3.76 6.574h3.76c2.081 0 3.753-.02 3.742-.047-.005-.02-1.708-3.001-3.775-6.62l-3.76-6.574zm-4.76 1.73a789.828 789.861 0 0 0-3.63 6.319L0 15.868l1.89 3.298 1.885 3.297 3.62-6.335 3.618-6.33-1.88-3.287C8.1 4.704 7.255 3.22 7.25 3.214zm2.259 12.653-.203.348c-.114.198-.96 1.672-1.88 3.287a423.93 423.948 0 0 1-1.698 2.97c-.01.026 3.24.042 7.222.042h7.244l1.796-3.157c.992-1.734 1.85-3.23 1.906-3.323l.104-.167h-7.249z" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
function GoogleDocsLogo({ className }: { className?: string }) {
|
||||
return (
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
className={className}
|
||||
fill="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M14.727 6.727H14V0H4.91c-.905 0-1.637.732-1.637 1.636v20.728c0 .904.732 1.636 1.636 1.636h14.182c.904 0 1.636-.732 1.636-1.636V6.727h-6zm-.545 10.455H7.09v-1.364h7.09v1.364zm2.727-3.273H7.091v-1.364h9.818v1.364zm0-3.273H7.091V9.273h9.818v1.363zM14.727 6h6l-6-6v6z" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
function GoogleSheetsLogo({ className }: { className?: string }) {
|
||||
return (
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
className={className}
|
||||
fill="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M11.318 12.545H7.91v-1.909h3.41v1.91zM14.728 0v6h6l-6-6zm1.363 10.636h-3.41v1.91h3.41v-1.91zm0 3.273h-3.41v1.91h3.41v-1.91zM20.727 6.5v15.864c0 .904-.732 1.636-1.636 1.636H4.909a1.636 1.636 0 0 1-1.636-1.636V1.636C3.273.732 4.005 0 4.909 0h9.318v6.5h6.5zm-3.273 2.773H6.545v7.909h10.91v-7.91zm-6.136 4.636H7.91v1.91h3.41v-1.91z" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
function GoogleSlidesLogo({ className }: { className?: string }) {
|
||||
return (
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
className={className}
|
||||
fill="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M16.09 15.273H7.91v-4.637h8.18v4.637zm1.728-8.523h2.91v15.614c0 .904-.733 1.636-1.637 1.636H4.909a1.636 1.636 0 0 1-1.636-1.636V1.636C3.273.732 4.005 0 4.909 0h9.068v6.75h3.841zm-.363 2.523H6.545v7.363h10.91V9.273zm-2.728-5.979V6h6.001l-6-6v3.294z" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
function getHostname(preview: ResolvedLinkPreview): string {
|
||||
try {
|
||||
return new URL(preview.href).hostname.replace(/^www\./, "");
|
||||
} catch {
|
||||
return preview.provider;
|
||||
}
|
||||
}
|
||||
|
||||
function LinkPreviewLogo({ preview }: { preview: ResolvedLinkPreview }) {
|
||||
if (preview.faviconDataUrl) {
|
||||
return (
|
||||
<img
|
||||
@@ -17,175 +109,28 @@ function LinkPreviewIdentity({ preview }: { preview: ResolvedLinkPreview }) {
|
||||
/>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
function getHostname(preview: ResolvedLinkPreview): string {
|
||||
try {
|
||||
return new URL(preview.href).hostname.replace(/^www\./, "");
|
||||
} catch {
|
||||
return preview.provider;
|
||||
switch (preview.kind) {
|
||||
case "github-issue":
|
||||
case "github-pull-request":
|
||||
case "github-repository":
|
||||
return <GitHubLogo className="h-4 w-4" />;
|
||||
case "linear-issue":
|
||||
return <LinearLogo className="h-4 w-4" />;
|
||||
case "google-drive-file":
|
||||
case "google-drive-folder":
|
||||
return <GoogleDriveLogo className="h-4 w-4" />;
|
||||
case "google-docs-document":
|
||||
return <GoogleDocsLogo className="h-4 w-4" />;
|
||||
case "google-sheets-spreadsheet":
|
||||
return <GoogleSheetsLogo className="h-4 w-4" />;
|
||||
case "google-slides-presentation":
|
||||
return <GoogleSlidesLogo className="h-4 w-4" />;
|
||||
case "generic-link":
|
||||
return <Globe aria-hidden="true" className="h-4 w-4" />;
|
||||
}
|
||||
}
|
||||
|
||||
function isTweetPreview(preview: ResolvedLinkPreview): boolean {
|
||||
try {
|
||||
const url = new URL(preview.href);
|
||||
return (
|
||||
(url.hostname === "x.com" || url.hostname === "twitter.com") &&
|
||||
/^\/[^/]+\/status\/\d+/.test(url.pathname)
|
||||
);
|
||||
} catch {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
function TweetPreview({
|
||||
className,
|
||||
onRemove,
|
||||
preview,
|
||||
}: {
|
||||
className?: string;
|
||||
onRemove?: () => void;
|
||||
preview: ResolvedLinkPreview;
|
||||
}) {
|
||||
const [descriptionExpanded, setDescriptionExpanded] = useState(false);
|
||||
const [descriptionOverflows, setDescriptionOverflows] = useState(false);
|
||||
const [imageExpanded, setImageExpanded] = useState(true);
|
||||
const descriptionRef = useRef<HTMLDivElement>(null);
|
||||
const reserveImage = preview.imageState !== "none";
|
||||
const showImage = preview.imageState === "image";
|
||||
const hostname = getHostname(preview);
|
||||
|
||||
useEffect(() => {
|
||||
if (!preview.description) return;
|
||||
|
||||
const description = descriptionRef.current;
|
||||
if (!description || descriptionExpanded) return;
|
||||
|
||||
const measure = () => {
|
||||
setDescriptionOverflows(
|
||||
description.scrollHeight > description.clientHeight + 1,
|
||||
);
|
||||
};
|
||||
const frame = requestAnimationFrame(measure);
|
||||
const observer = new ResizeObserver(measure);
|
||||
observer.observe(description);
|
||||
return () => {
|
||||
cancelAnimationFrame(frame);
|
||||
observer.disconnect();
|
||||
};
|
||||
}, [descriptionExpanded, preview.description]);
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
"relative w-[26rem] max-w-full shrink-0 border-l-[3px] border-border pl-3",
|
||||
className,
|
||||
)}
|
||||
data-image-state={preview.imageState}
|
||||
data-link-preview={preview.kind}
|
||||
data-tweet-preview=""
|
||||
>
|
||||
<div
|
||||
className="text-xs leading-4 text-muted-foreground"
|
||||
data-link-preview-hostname=""
|
||||
>
|
||||
{hostname}
|
||||
</div>
|
||||
<a
|
||||
className="mt-0.5 block truncate text-sm font-semibold leading-5 text-foreground hover:underline"
|
||||
href={preview.href}
|
||||
rel="noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
{preview.title}
|
||||
</a>
|
||||
{preview.description ? (
|
||||
<>
|
||||
<div
|
||||
className={cn(
|
||||
"mt-1 whitespace-normal text-sm leading-5 text-foreground",
|
||||
!descriptionExpanded && "line-clamp-5",
|
||||
)}
|
||||
data-slot="attachment-description"
|
||||
ref={descriptionRef}
|
||||
>
|
||||
{preview.description}
|
||||
</div>
|
||||
{descriptionOverflows ? (
|
||||
<button
|
||||
aria-expanded={descriptionExpanded}
|
||||
className="mt-1 text-xs font-medium leading-4 text-muted-foreground hover:text-foreground"
|
||||
onClick={() => setDescriptionExpanded((expanded) => !expanded)}
|
||||
type="button"
|
||||
>
|
||||
{descriptionExpanded ? "Show less" : "Show more"}
|
||||
</button>
|
||||
) : null}
|
||||
</>
|
||||
) : null}
|
||||
{reserveImage ? (
|
||||
<div className="mt-2">
|
||||
{imageExpanded ? (
|
||||
<a
|
||||
aria-label={`Open tweet: ${preview.title}`}
|
||||
className="block overflow-hidden rounded-xl bg-muted"
|
||||
href={preview.href}
|
||||
rel="noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<div
|
||||
className="aspect-video w-full"
|
||||
data-link-preview-thumbnail=""
|
||||
>
|
||||
{showImage ? (
|
||||
<img
|
||||
alt={`Preview from ${preview.imageDomain}`}
|
||||
className="h-full w-full object-cover"
|
||||
src={preview.imageDataUrl ?? undefined}
|
||||
/>
|
||||
) : (
|
||||
<div
|
||||
className="h-full w-full animate-pulse bg-muted-foreground/10"
|
||||
data-link-preview-skeleton=""
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</a>
|
||||
) : null}
|
||||
<button
|
||||
aria-expanded={imageExpanded}
|
||||
className="mt-1 flex items-center gap-1 text-xs leading-4 text-muted-foreground hover:text-foreground"
|
||||
onClick={() => setImageExpanded((expanded) => !expanded)}
|
||||
type="button"
|
||||
>
|
||||
{imageExpanded ? (
|
||||
<ChevronUp aria-hidden="true" className="size-3" />
|
||||
) : (
|
||||
<ChevronDown aria-hidden="true" className="size-3" />
|
||||
)}
|
||||
{imageExpanded ? "Hide image" : "Show image"}
|
||||
</button>
|
||||
</div>
|
||||
) : null}
|
||||
{onRemove ? (
|
||||
<Button
|
||||
aria-label="Remove previews for everyone"
|
||||
className="absolute left-full top-0 z-20 ml-1 h-5 w-5 rounded-full text-muted-foreground opacity-0 transition-opacity hover:text-destructive focus-visible:opacity-100 group-hover/message:opacity-100"
|
||||
onClick={onRemove}
|
||||
size="icon-xs"
|
||||
title="Remove previews for everyone"
|
||||
type="button"
|
||||
variant="ghost"
|
||||
>
|
||||
<X aria-hidden="true" />
|
||||
</Button>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function LinkPreviewAttachment({
|
||||
className,
|
||||
onRemove,
|
||||
@@ -195,106 +140,64 @@ export function LinkPreviewAttachment({
|
||||
onRemove?: () => void;
|
||||
preview: ResolvedLinkPreview;
|
||||
}) {
|
||||
const [imageExpanded, setImageExpanded] = useState(true);
|
||||
|
||||
if (isTweetPreview(preview)) {
|
||||
return (
|
||||
<TweetPreview
|
||||
className={className}
|
||||
onRemove={onRemove}
|
||||
preview={preview}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
const reserveImage = preview.imageState !== "none";
|
||||
const showImage = preview.imageState === "image";
|
||||
const hostname = getHostname(preview);
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
"relative w-[26rem] max-w-full shrink-0 border-l-[3px] border-border pl-3",
|
||||
className,
|
||||
)}
|
||||
data-image-state={preview.imageState}
|
||||
data-link-preview={preview.kind}
|
||||
data-link-preview-inline=""
|
||||
>
|
||||
<div className={cn(reserveImage && "min-h-[3.875rem]")}>
|
||||
<div
|
||||
className="flex items-center gap-1.5 text-xs leading-4 text-muted-foreground"
|
||||
data-link-preview-identity=""
|
||||
>
|
||||
<LinkPreviewIdentity preview={preview} />
|
||||
<span data-link-preview-hostname="">{hostname}</span>
|
||||
</div>
|
||||
<a
|
||||
aria-label={`Open ${preview.provider} ${preview.typeLabel}: ${preview.title}`}
|
||||
className="mt-0.5 block text-sm font-semibold leading-5 text-foreground hover:underline"
|
||||
href={preview.href}
|
||||
rel="noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<span
|
||||
className={preview.description ? "line-clamp-1" : "line-clamp-2"}
|
||||
<div className={cn("relative w-80 max-w-full shrink-0", className)}>
|
||||
<Attachment
|
||||
className="w-full no-underline shadow-none"
|
||||
data-image-state={preview.imageState}
|
||||
data-link-preview={preview.kind}
|
||||
orientation="horizontal"
|
||||
>
|
||||
{reserveImage ? (
|
||||
<AttachmentMedia
|
||||
aria-hidden={showImage ? undefined : "true"}
|
||||
className="h-12 w-16 rounded-lg bg-muted sm:h-14 sm:w-[6.6875rem]"
|
||||
data-link-preview-thumbnail=""
|
||||
variant="image"
|
||||
>
|
||||
{preview.title}
|
||||
</span>
|
||||
</a>
|
||||
{preview.description ? (
|
||||
<div
|
||||
className="mt-1 line-clamp-2 whitespace-normal text-sm leading-5 text-muted-foreground"
|
||||
data-slot="attachment-description"
|
||||
>
|
||||
{preview.description}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
{reserveImage ? (
|
||||
<div className="mt-2">
|
||||
{imageExpanded ? (
|
||||
<a
|
||||
aria-label={`Open preview image from ${hostname}`}
|
||||
className="block overflow-hidden rounded-xl bg-muted"
|
||||
href={preview.href}
|
||||
rel="noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<div
|
||||
className="aspect-[1.91/1] w-full"
|
||||
data-link-preview-thumbnail=""
|
||||
>
|
||||
{showImage ? (
|
||||
<img
|
||||
alt={`Preview from ${preview.imageDomain}`}
|
||||
className="h-full w-full object-cover"
|
||||
src={preview.imageDataUrl ?? undefined}
|
||||
/>
|
||||
) : (
|
||||
<div
|
||||
className="h-full w-full animate-pulse bg-muted-foreground/10"
|
||||
data-link-preview-skeleton=""
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</a>
|
||||
) : null}
|
||||
<button
|
||||
aria-expanded={imageExpanded}
|
||||
className="mt-1 flex items-center gap-1 text-xs leading-4 text-muted-foreground hover:text-foreground"
|
||||
onClick={() => setImageExpanded((expanded) => !expanded)}
|
||||
type="button"
|
||||
>
|
||||
{imageExpanded ? (
|
||||
<ChevronUp aria-hidden="true" className="size-3" />
|
||||
{showImage ? (
|
||||
<img
|
||||
alt={`Preview from ${preview.imageDomain}`}
|
||||
className="h-full w-full object-cover"
|
||||
src={preview.imageDataUrl ?? undefined}
|
||||
/>
|
||||
) : (
|
||||
<ChevronDown aria-hidden="true" className="size-3" />
|
||||
<div
|
||||
className="h-full w-full animate-pulse bg-muted-foreground/10"
|
||||
data-link-preview-skeleton=""
|
||||
/>
|
||||
)}
|
||||
{imageExpanded ? "Hide image" : "Show image"}
|
||||
</button>
|
||||
</div>
|
||||
) : null}
|
||||
</AttachmentMedia>
|
||||
) : (
|
||||
<AttachmentMedia className="link-preview-media">
|
||||
<LinkPreviewLogo preview={preview} />
|
||||
</AttachmentMedia>
|
||||
)}
|
||||
<AttachmentContent>
|
||||
<div
|
||||
className="truncate text-xs font-medium leading-4 text-muted-foreground"
|
||||
data-link-preview-hostname=""
|
||||
>
|
||||
{getHostname(preview)}
|
||||
</div>
|
||||
<AttachmentTitle>{preview.title}</AttachmentTitle>
|
||||
</AttachmentContent>
|
||||
<AttachmentTrigger asChild>
|
||||
<a
|
||||
aria-label={`Open ${preview.provider} ${preview.typeLabel}: ${preview.title}`}
|
||||
href={preview.href}
|
||||
rel="noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<span className="sr-only">
|
||||
Open {preview.provider} {preview.typeLabel}: {preview.title}
|
||||
</span>
|
||||
</a>
|
||||
</AttachmentTrigger>
|
||||
</Attachment>
|
||||
{onRemove ? (
|
||||
<Button
|
||||
aria-label="Remove previews for everyone"
|
||||
|
||||
@@ -300,176 +300,104 @@ test("markdown tables overflow wide content and fill the message when narrow", a
|
||||
.toBeLessThanOrEqual(1);
|
||||
});
|
||||
|
||||
test("cardless short tweet preview omits show more", async ({ page }) => {
|
||||
const previewUrl = "https://x.com/jack/status/20";
|
||||
await page.setViewportSize({ width: 800, height: 700 });
|
||||
await page.goto("/");
|
||||
await page.getByTestId("channel-general").click();
|
||||
await page.getByTestId("message-input").fill(previewUrl);
|
||||
await page.getByTestId("send-message").click();
|
||||
|
||||
const preview = page
|
||||
.getByTestId("message-row")
|
||||
.last()
|
||||
.locator("[data-tweet-preview]");
|
||||
await expect(preview).toContainText("just setting up my twttr");
|
||||
await expect(preview.getByRole("button", { name: "Show more" })).toHaveCount(
|
||||
0,
|
||||
);
|
||||
});
|
||||
|
||||
test("cardless tweet preview clamps text and collapses its image", async ({
|
||||
test("link preview image geometry stays stable while loading", async ({
|
||||
page,
|
||||
}) => {
|
||||
const previewUrl = "https://x.com/buzz/status/1234567890";
|
||||
await page.setViewportSize({ width: 800, height: 900 });
|
||||
await page.goto("/");
|
||||
await page.getByTestId("channel-general").click();
|
||||
await page.getByTestId("message-input").fill(previewUrl);
|
||||
await page.getByTestId("send-message").click();
|
||||
const previewUrl = "https://github.com/block/buzz/pull/3246";
|
||||
|
||||
const preview = page
|
||||
.getByTestId("message-row")
|
||||
.last()
|
||||
.locator("[data-tweet-preview]");
|
||||
await expect(preview).toBeVisible();
|
||||
await expect(preview).toHaveCSS("border-left-width", "3px");
|
||||
await expect(preview.locator("[data-link-preview-hostname]")).toHaveText(
|
||||
"x.com",
|
||||
);
|
||||
for (const width of [800, 420]) {
|
||||
await page.setViewportSize({ width: 800, height: 700 });
|
||||
await page.goto("/");
|
||||
await page.getByTestId("channel-general").click();
|
||||
await page.setViewportSize({ width, height: 700 });
|
||||
await page.getByTestId("message-input").fill(previewUrl);
|
||||
await page.getByTestId("send-message").click();
|
||||
|
||||
const description = preview.locator('[data-slot="attachment-description"]');
|
||||
await expect(description).toHaveClass(/line-clamp-5/);
|
||||
expect(
|
||||
await description.evaluate((element) => element.clientHeight),
|
||||
).toBeLessThanOrEqual(100);
|
||||
const collapsedHeight = await description.evaluate(
|
||||
(element) => element.clientHeight,
|
||||
);
|
||||
await preview.getByRole("button", { name: "Show more" }).click();
|
||||
await expect(description).not.toHaveClass(/line-clamp-5/);
|
||||
await expect
|
||||
.poll(() => description.evaluate((element) => element.clientHeight))
|
||||
.toBeGreaterThan(collapsedHeight);
|
||||
await preview.getByRole("button", { name: "Show less" }).click();
|
||||
await expect(description).toHaveClass(/line-clamp-5/);
|
||||
const card = page
|
||||
.getByTestId("message-row")
|
||||
.last()
|
||||
.locator('[data-link-preview="github-pull-request"]');
|
||||
await expect(card).toHaveAttribute("data-image-state", "pending");
|
||||
await expect(card).toBeVisible();
|
||||
await expect(card.locator("[data-link-preview-thumbnail]")).toBeVisible();
|
||||
if (process.env.BUZZ_LINK_PREVIEW_SCREENSHOTS_DIR) {
|
||||
await card.screenshot({
|
||||
animations: "disabled",
|
||||
path: `${process.env.BUZZ_LINK_PREVIEW_SCREENSHOTS_DIR}/${width}-pending.png`,
|
||||
});
|
||||
}
|
||||
const pending = await card.evaluate((element) => ({
|
||||
height: element.getBoundingClientRect().height,
|
||||
textLeft: element
|
||||
.querySelector('[data-slot="attachment-content"]')
|
||||
?.getBoundingClientRect().left,
|
||||
thumbnailWidth: element
|
||||
.querySelector("[data-link-preview-thumbnail]")
|
||||
?.getBoundingClientRect().width,
|
||||
}));
|
||||
|
||||
const thumbnail = preview.locator("[data-link-preview-thumbnail]");
|
||||
await expect(thumbnail).toBeVisible();
|
||||
await preview.getByRole("button", { name: "Hide image" }).click();
|
||||
await expect(thumbnail).toHaveCount(0);
|
||||
await preview.getByRole("button", { name: "Show image" }).click();
|
||||
await expect(thumbnail).toBeVisible();
|
||||
await expect(card).toHaveAttribute("data-image-state", "image");
|
||||
if (process.env.BUZZ_LINK_PREVIEW_SCREENSHOTS_DIR) {
|
||||
await waitForAnimations(page);
|
||||
await card.screenshot({
|
||||
path: `${process.env.BUZZ_LINK_PREVIEW_SCREENSHOTS_DIR}/${width}-loaded.png`,
|
||||
});
|
||||
}
|
||||
const loaded = await card.evaluate((element) => ({
|
||||
height: element.getBoundingClientRect().height,
|
||||
textLeft: element
|
||||
.querySelector('[data-slot="attachment-content"]')
|
||||
?.getBoundingClientRect().left,
|
||||
thumbnailWidth: element
|
||||
.querySelector("[data-link-preview-thumbnail]")
|
||||
?.getBoundingClientRect().width,
|
||||
}));
|
||||
|
||||
expect(loaded.height).toBe(pending.height);
|
||||
expect(loaded.textLeft).toBe(pending.textLeft);
|
||||
expect(loaded.thumbnailWidth).toBe(pending.thumbnailWidth);
|
||||
expect(loaded.thumbnailWidth).toBe(width < 640 ? 64 : 107);
|
||||
}
|
||||
});
|
||||
|
||||
test("link preview image geometry stays stable in the inline variant while loading", async ({
|
||||
page,
|
||||
}) => {
|
||||
const previewUrl = "https://github.com/block/buzz/pull/3246?inline=1";
|
||||
await page.setViewportSize({ width: 800, height: 700 });
|
||||
await page.goto("/");
|
||||
await page.getByTestId("channel-general").click();
|
||||
await page.getByTestId("message-input").fill(previewUrl);
|
||||
await page.getByTestId("send-message").click();
|
||||
|
||||
const preview = page
|
||||
.getByTestId("message-row")
|
||||
.last()
|
||||
.locator('[data-link-preview="github-pull-request"]');
|
||||
await expect(preview).toHaveAttribute("data-link-preview-inline", "");
|
||||
await expect(preview).toHaveAttribute("data-image-state", "pending");
|
||||
await expect(preview).toHaveCSS("border-left-width", "3px");
|
||||
await expect(preview.locator("[data-link-preview-favicon]")).toBeVisible();
|
||||
const pendingImage = await preview
|
||||
.locator("[data-link-preview-thumbnail]")
|
||||
.boundingBox();
|
||||
|
||||
await expect(preview).toHaveAttribute("data-image-state", "image");
|
||||
const loadedImage = await preview
|
||||
.locator("[data-link-preview-thumbnail]")
|
||||
.boundingBox();
|
||||
expect(loadedImage).toEqual(pendingImage);
|
||||
expect(loadedImage?.width).toBe(390);
|
||||
expect(loadedImage?.height).toBeCloseTo(204, 0);
|
||||
await expect(preview.locator("[data-link-preview-hostname]")).toHaveText(
|
||||
"github.com",
|
||||
);
|
||||
await preview.getByRole("button", { name: "Hide image" }).click();
|
||||
await expect(preview.locator("[data-link-preview-thumbnail]")).toHaveCount(0);
|
||||
await preview.getByRole("button", { name: "Show image" }).click();
|
||||
await expect(preview.locator("[data-link-preview-thumbnail]")).toBeVisible();
|
||||
});
|
||||
|
||||
test("multiple unfurled link previews stack vertically", async ({ page }) => {
|
||||
const previewUrls = [
|
||||
"https://github.com/block/buzz/pull/3246?stack=1",
|
||||
"https://github.com/block/buzz/pull/3246?stack=2",
|
||||
"https://github.com/block/buzz/pull/3246?stack=3",
|
||||
];
|
||||
await page.setViewportSize({ width: 1218, height: 1000 });
|
||||
await page.goto("/");
|
||||
await page.getByTestId("channel-general").click();
|
||||
await page.getByTestId("message-input").fill(previewUrls.join(" "));
|
||||
await page.getByTestId("send-message").click();
|
||||
|
||||
const row = page.getByTestId("message-row").last();
|
||||
const list = row.locator("[data-link-preview-list]");
|
||||
const previews = list.locator("[data-link-preview-inline]");
|
||||
await expect(previews).toHaveCount(3);
|
||||
await expect(list).toHaveCSS("flex-direction", "column");
|
||||
|
||||
const boxes = await previews.evaluateAll((elements) =>
|
||||
elements.map((element) => {
|
||||
const rect = element.getBoundingClientRect();
|
||||
return { left: rect.left, top: rect.top };
|
||||
}),
|
||||
);
|
||||
expect(boxes[1]?.left).toBeCloseTo(boxes[0]?.left ?? 0, 0);
|
||||
expect(boxes[2]?.left).toBeCloseTo(boxes[0]?.left ?? 0, 0);
|
||||
expect(boxes[1]?.top).toBeGreaterThan(boxes[0]?.top ?? 0);
|
||||
expect(boxes[2]?.top).toBeGreaterThan(boxes[1]?.top ?? 0);
|
||||
await expect(
|
||||
row.getByRole("button", { name: "Remove previews for everyone" }),
|
||||
).toHaveCount(1);
|
||||
const removeButton = row.getByRole("button", {
|
||||
name: "Remove previews for everyone",
|
||||
});
|
||||
expect((await removeButton.boundingBox())?.y).toBeLessThan(
|
||||
(await previews.nth(1).boundingBox())?.y ?? 0,
|
||||
);
|
||||
});
|
||||
|
||||
test("link preview no-image collapse restores the inline text stack", async ({
|
||||
test("link preview no-image collapse restores the compact card", async ({
|
||||
page,
|
||||
}) => {
|
||||
const previewUrl = "https://github.com/block/buzz/pull/3246?inline=none";
|
||||
await page.setViewportSize({ width: 800, height: 700 });
|
||||
await page.goto("/");
|
||||
await page.getByTestId("channel-general").click();
|
||||
await page.getByTestId("message-input").fill(previewUrl);
|
||||
await page.getByTestId("send-message").click();
|
||||
|
||||
const preview = page
|
||||
.getByTestId("message-row")
|
||||
.last()
|
||||
.locator('[data-link-preview="github-pull-request"]');
|
||||
await expect(preview).toHaveAttribute("data-image-state", "pending");
|
||||
await expect(preview.locator("[data-link-preview-thumbnail]")).toBeVisible();
|
||||
const pendingHeight = await preview.evaluate(
|
||||
(element) => element.getBoundingClientRect().height,
|
||||
);
|
||||
await expect(preview).toHaveAttribute("data-image-state", "none");
|
||||
await expect(preview.locator("[data-link-preview-thumbnail]")).toHaveCount(0);
|
||||
await expect(preview.locator("[data-link-preview-hostname]")).toHaveText(
|
||||
"github.com",
|
||||
);
|
||||
await expect(preview.locator("[data-link-preview-favicon]")).toHaveCount(0);
|
||||
await expect(preview.locator("[data-link-preview-identity] svg")).toHaveCount(
|
||||
0,
|
||||
);
|
||||
expect(
|
||||
await preview.evaluate((element) => element.getBoundingClientRect().height),
|
||||
).toBeLessThan(pendingHeight);
|
||||
for (const width of [800, 420]) {
|
||||
await page.setViewportSize({ width: 800, height: 700 });
|
||||
await page.goto("/");
|
||||
await page.getByTestId("channel-general").click();
|
||||
await page.setViewportSize({ width, height: 700 });
|
||||
await page.getByTestId("message-input").fill(previewUrl);
|
||||
await page.getByTestId("send-message").click();
|
||||
|
||||
const card = page
|
||||
.getByTestId("message-row")
|
||||
.last()
|
||||
.locator('[data-link-preview="github-pull-request"]');
|
||||
await expect(card).toHaveAttribute("data-image-state", "pending");
|
||||
const pending = await card.evaluate((element) => ({
|
||||
height: element.getBoundingClientRect().height,
|
||||
textLeft: element
|
||||
.querySelector('[data-slot="attachment-content"]')
|
||||
?.getBoundingClientRect().left,
|
||||
}));
|
||||
|
||||
await expect(card).toHaveAttribute("data-image-state", "none");
|
||||
await expect(card.locator("[data-link-preview-thumbnail]")).toHaveCount(0);
|
||||
await expect(card.locator(".link-preview-media")).toBeVisible();
|
||||
const collapsed = await card.evaluate((element) => ({
|
||||
height: element.getBoundingClientRect().height,
|
||||
textLeft: element
|
||||
.querySelector('[data-slot="attachment-content"]')
|
||||
?.getBoundingClientRect().left,
|
||||
}));
|
||||
|
||||
expect(collapsed.height).toBeLessThan(pending.height);
|
||||
expect(collapsed.textLeft).toBeLessThan(pending.textLeft ?? 0);
|
||||
}
|
||||
});
|
||||
|
||||
test("supported link previews keep the message link visible", async ({
|
||||
@@ -490,9 +418,8 @@ test("supported link previews keep the message link visible", async ({
|
||||
).toBeVisible();
|
||||
const previewCard = row.locator('[data-link-preview="github-pull-request"]');
|
||||
await expect(previewCard).toBeVisible();
|
||||
await expect(previewCard).toHaveAttribute("data-link-preview-inline", "");
|
||||
await expect(previewCard).toHaveCSS("border-left-width", "3px");
|
||||
await expect(previewCard).toHaveCSS("border-top-left-radius", "0px");
|
||||
await expectCornerRadiusPx(previewCard, 16);
|
||||
await expectSmoothCorners(previewCard);
|
||||
});
|
||||
|
||||
test("send multiple messages in sequence", async ({ page }) => {
|
||||
|
||||
Reference in New Issue
Block a user