feat(video): explicit fullscreen button, simplify download pill sizing

- VideoBubble: add a Maximize2 fullscreen button at the top-right of
  the inline player (mirrors the download pill on the left), so the
  user explicitly opts into fullscreen instead of any tile click being
  promoted to one. Removed the outer onClick that opened fullscreen
  on any tap.
- AttachmentDownloadPill: drop the adaptive (cqw-based) sizing branch
  and the corresponding 'adaptive' prop. The pill is now a uniform
  30px tall in every host (album tile, single image, video tile),
  matching the design without needing query containers on parents.
- AlbumBubble: remove the now-unused 'adaptive' prop and the
  containerType: inline-size hook that supported it.
This commit is contained in:
TerryM
2026-05-30 01:21:35 +08:00
parent 6b42981419
commit 92e6ce9dd8
3 changed files with 19 additions and 44 deletions

View File

@@ -12,14 +12,6 @@ type AttachmentDownloadPillProps = {
attachment: Attachment;
leadingLabel?: string;
className?: string;
/**
* When true, the pill scales with its container's width via container-query
* units (clamped to a min/max). The host element must establish a query
* container (e.g. `style={{ containerType: "inline-size" }}`). Use this on
* album tiles so the pill shrinks on small thumbnails. Defaults to a fixed
* size for standalone images/videos.
*/
adaptive?: boolean;
};
export function AttachmentDownloadPill({
@@ -27,7 +19,6 @@ export function AttachmentDownloadPill({
attachment,
leadingLabel,
className = "absolute left-2 top-2",
adaptive = false,
}: AttachmentDownloadPillProps) {
const { t } = useI18n();
const { showToast } = useToast();
@@ -39,7 +30,6 @@ export function AttachmentDownloadPill({
setIsDownloading(true);
try {
await downloadAttachment(postId, attachment.id, attachment.filename);
showToast(t("downloadOk"));
} catch {
showToast(t("downloadFail"), "error");
} finally {
@@ -47,42 +37,28 @@ export function AttachmentDownloadPill({
}
};
// Fixed default vs. container-query-driven adaptive sizing (clamped).
const fontCls = adaptive ? "text-[clamp(10px,5cqw,12px)]" : "text-[12px]";
const squareCls = adaptive
? "h-[clamp(22px,11cqw,30px)] w-[clamp(22px,11cqw,30px)]"
: "h-[30px] w-[30px]";
const iconCls = adaptive
? "h-[clamp(13px,6.5cqw,18px)] w-[clamp(13px,6.5cqw,18px)]"
: "h-[18px] w-[18px]";
const textBoxCls = adaptive
? "h-[clamp(22px,11cqw,30px)] px-[clamp(6px,3cqw,10px)]"
: "h-[30px] px-2.5";
return (
<button
type="button"
onClick={handleDownload}
disabled={isDownloading}
className={`group z-10 inline-flex overflow-hidden rounded-full bg-black/80 ${fontCls} text-white shadow-lg ring-1 ring-inset ring-white/20 backdrop-blur-md transition hover:bg-black/90 disabled:cursor-wait ${className}`}
className={`group z-10 inline-flex overflow-hidden rounded-full bg-black/80 text-[12px] text-white shadow-lg ring-1 ring-inset ring-white/20 backdrop-blur-md transition hover:bg-black/90 disabled:cursor-wait ${className}`}
aria-label={
isDownloading ? t("downloading") : `Download ${attachment.filename}`
}
aria-busy={isDownloading}
>
<span
className={`flex ${squareCls} items-center justify-center bg-[#545454]/50 transition group-hover:bg-[#545454]/70`}
>
<span className="flex h-[30px] w-[30px] items-center justify-center bg-[#545454]/50 transition group-hover:bg-[#545454]/70">
{isDownloading ? (
<LoaderCircle
className={`${iconCls} animate-spin`}
className="h-[18px] w-[18px] animate-spin"
strokeWidth={2.3}
/>
) : (
<DownloadCloudIcon className={iconCls} />
<DownloadCloudIcon className="h-[18px] w-[18px]" />
)}
</span>
<span className={`flex ${textBoxCls} items-center gap-0.5`}>
<span className="flex h-[30px] items-center gap-0.5 px-2.5">
{isDownloading ? (
t("downloading")
) : (