mirror of https://github.com/usememos/memos.git
fix: improve image preview dialog and live photo trigger
This commit is contained in:
boojack
parent
6b0487dcd8
commit
aafcc21ae6
|
|
@ -41,10 +41,11 @@ const MotionPhotoPreview = ({
|
|||
containerClassName={cn("max-w-full max-h-full", containerClassName)}
|
||||
mediaClassName={mediaClassName}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
<div
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
className={cn(
|
||||
"absolute rounded-full border border-border/45 bg-background/65 px-2.5 py-1 text-xs font-semibold tracking-wide text-foreground backdrop-blur-sm transition-colors hover:bg-background/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50",
|
||||
"absolute select-none rounded-full border border-border/45 bg-background/65 px-2.5 py-1 text-xs font-semibold tracking-wide text-foreground backdrop-blur-sm transition-colors hover:bg-background/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50",
|
||||
badgeClassName,
|
||||
)}
|
||||
onMouseEnter={() => setMotionActive(true)}
|
||||
|
|
@ -64,10 +65,16 @@ const MotionPhotoPreview = ({
|
|||
}
|
||||
}}
|
||||
onPointerCancel={() => setMotionActive(false)}
|
||||
onKeyDown={(event) => {
|
||||
if (event.key === "Enter" || event.key === " ") {
|
||||
event.preventDefault();
|
||||
setMotionActive((prev) => !prev);
|
||||
}
|
||||
}}
|
||||
aria-label="Hover or press to play live photo"
|
||||
>
|
||||
LIVE
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,8 +1,11 @@
|
|||
import { X } from "lucide-react";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { ChevronLeft, ChevronRight, X } from "lucide-react";
|
||||
import React, { useEffect, useMemo, useState } from "react";
|
||||
import MotionPhotoPreview from "@/components/MotionPhotoPreview";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Dialog, DialogContent } from "@/components/ui/dialog";
|
||||
import { Dialog, DialogContent, DialogTitle } from "@/components/ui/dialog";
|
||||
import { VisuallyHidden } from "@/components/ui/visually-hidden";
|
||||
import useMediaQuery from "@/hooks/useMediaQuery";
|
||||
import { cn } from "@/lib/utils";
|
||||
import type { PreviewMediaItem } from "@/utils/media-item";
|
||||
|
||||
interface Props {
|
||||
|
|
@ -14,115 +17,216 @@ interface Props {
|
|||
}
|
||||
|
||||
function PreviewImageDialog({ open, onOpenChange, imgUrls = [], items, initialIndex = 0 }: Props) {
|
||||
const sm = useMediaQuery("sm");
|
||||
const [currentIndex, setCurrentIndex] = useState(initialIndex);
|
||||
const previewItems =
|
||||
items ?? imgUrls.map((url) => ({ id: url, kind: "image" as const, sourceUrl: url, posterUrl: url, filename: "Image" }));
|
||||
const previewItems = useMemo(
|
||||
() => items ?? imgUrls.map((url) => ({ id: url, kind: "image" as const, sourceUrl: url, posterUrl: url, filename: "Image" })),
|
||||
[imgUrls, items],
|
||||
);
|
||||
|
||||
// Update current index when initialIndex prop changes
|
||||
useEffect(() => {
|
||||
setCurrentIndex(initialIndex);
|
||||
}, [initialIndex]);
|
||||
if (open) {
|
||||
setCurrentIndex(initialIndex);
|
||||
}
|
||||
}, [initialIndex, open]);
|
||||
|
||||
const itemCount = previewItems.length;
|
||||
const safeIndex = Math.max(0, Math.min(currentIndex, itemCount - 1));
|
||||
const currentItem = previewItems[safeIndex];
|
||||
const hasMultiple = itemCount > 1;
|
||||
const canGoPrevious = safeIndex > 0;
|
||||
const canGoNext = safeIndex < itemCount - 1;
|
||||
|
||||
// Handle keyboard navigation
|
||||
useEffect(() => {
|
||||
const handleKeyDown = (event: KeyboardEvent) => {
|
||||
if (!open) return;
|
||||
if (!open) {
|
||||
return;
|
||||
}
|
||||
|
||||
switch (event.key) {
|
||||
case "Escape":
|
||||
onOpenChange(false);
|
||||
break;
|
||||
case "ArrowRight":
|
||||
setCurrentIndex((prev) => Math.min(prev + 1, previewItems.length - 1));
|
||||
break;
|
||||
case "ArrowLeft":
|
||||
setCurrentIndex((prev) => Math.max(prev - 1, 0));
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
if (event.key === "Escape") {
|
||||
onOpenChange(false);
|
||||
return;
|
||||
}
|
||||
|
||||
if (event.key === "ArrowLeft") {
|
||||
setCurrentIndex((prev) => Math.max(prev - 1, 0));
|
||||
return;
|
||||
}
|
||||
|
||||
if (event.key === "ArrowRight") {
|
||||
setCurrentIndex((prev) => Math.min(prev + 1, itemCount - 1));
|
||||
}
|
||||
};
|
||||
|
||||
document.addEventListener("keydown", handleKeyDown);
|
||||
return () => document.removeEventListener("keydown", handleKeyDown);
|
||||
}, [open, onOpenChange]);
|
||||
}, [itemCount, onOpenChange, open]);
|
||||
|
||||
const handleClose = () => {
|
||||
onOpenChange(false);
|
||||
};
|
||||
if (!itemCount || !currentItem) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const handleBackdropClick = (event: React.MouseEvent<HTMLDivElement>) => {
|
||||
if (event.target === event.currentTarget) {
|
||||
handleClose();
|
||||
}
|
||||
};
|
||||
|
||||
// Return early if no images provided
|
||||
if (!previewItems.length) return null;
|
||||
|
||||
// Ensure currentIndex is within bounds
|
||||
const safeIndex = Math.max(0, Math.min(currentIndex, previewItems.length - 1));
|
||||
const currentItem = previewItems[safeIndex];
|
||||
const handleClose = () => onOpenChange(false);
|
||||
const handlePrevious = () => setCurrentIndex((prev) => Math.max(prev - 1, 0));
|
||||
const handleNext = () => setCurrentIndex((prev) => Math.min(prev + 1, itemCount - 1));
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent
|
||||
className="!w-[100vw] !h-[100vh] !max-w-[100vw] !max-h-[100vw] p-0 border-0 shadow-none bg-transparent [&>button]:hidden"
|
||||
showCloseButton={false}
|
||||
className="!h-[100vh] !w-[100vw] !max-h-[100vh] !max-w-[100vw] overflow-hidden border-0 bg-black/92 p-0 shadow-none"
|
||||
aria-describedby="image-preview-description"
|
||||
>
|
||||
{/* Close button */}
|
||||
<div className="fixed top-4 right-4 z-50">
|
||||
<Button
|
||||
onClick={handleClose}
|
||||
variant="secondary"
|
||||
size="icon"
|
||||
className="rounded-full bg-popover/20 hover:bg-popover/30 border-border/20 backdrop-blur-sm"
|
||||
aria-label="Close image preview"
|
||||
>
|
||||
<X className="h-4 w-4 text-popover-foreground" />
|
||||
</Button>
|
||||
<VisuallyHidden>
|
||||
<DialogTitle>{currentItem.filename || "Attachment preview"}</DialogTitle>
|
||||
</VisuallyHidden>
|
||||
|
||||
<div className="absolute inset-x-0 top-0 z-20 bg-linear-to-b from-black/70 via-black/35 to-transparent px-3 pb-6 pt-3 sm:px-5 sm:pt-4">
|
||||
<div className="flex items-start justify-between gap-3">
|
||||
<div className="min-w-0 text-white">
|
||||
<div className="truncate text-sm font-medium">{currentItem.filename || "Attachment"}</div>
|
||||
{hasMultiple && (
|
||||
<div className="mt-1 text-xs text-white/70">
|
||||
{safeIndex + 1} / {itemCount}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<Button
|
||||
type="button"
|
||||
onClick={handleClose}
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="shrink-0 rounded-full bg-white/10 text-white hover:bg-white/16 hover:text-white"
|
||||
aria-label="Close preview"
|
||||
>
|
||||
<X className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Image container */}
|
||||
<div className="w-full h-full flex items-center justify-center p-4 sm:p-8 overflow-auto" onClick={handleBackdropClick}>
|
||||
{currentItem.kind === "video" ? (
|
||||
<video
|
||||
key={currentItem.id}
|
||||
src={currentItem.sourceUrl}
|
||||
poster={currentItem.posterUrl}
|
||||
className="max-w-full max-h-full object-contain"
|
||||
controls
|
||||
autoPlay
|
||||
/>
|
||||
) : currentItem.kind === "motion" ? (
|
||||
<MotionPhotoPreview
|
||||
key={currentItem.id}
|
||||
posterUrl={currentItem.posterUrl}
|
||||
motionUrl={currentItem.motionUrl}
|
||||
alt={`Preview live photo ${safeIndex + 1} of ${previewItems.length}`}
|
||||
presentationTimestampUs={currentItem.presentationTimestampUs}
|
||||
badgeClassName="left-4 top-4"
|
||||
mediaClassName="max-h-[calc(100vh-2rem)] max-w-[calc(100vw-2rem)] object-contain sm:max-h-[calc(100vh-4rem)] sm:max-w-[calc(100vw-4rem)]"
|
||||
/>
|
||||
) : (
|
||||
<img
|
||||
src={currentItem.sourceUrl}
|
||||
alt={`Preview image ${safeIndex + 1} of ${previewItems.length}`}
|
||||
className="max-w-full max-h-full object-contain select-none"
|
||||
draggable={false}
|
||||
loading="eager"
|
||||
decoding="async"
|
||||
/>
|
||||
)}
|
||||
<div
|
||||
className="flex h-full w-full items-center justify-center px-3 pb-20 pt-16 sm:px-16 sm:pb-8 sm:pt-20"
|
||||
onClick={(event) => {
|
||||
if (event.target === event.currentTarget) {
|
||||
handleClose();
|
||||
}
|
||||
}}
|
||||
>
|
||||
<div className="flex max-h-full max-w-full items-center justify-center" onClick={(event) => event.stopPropagation()}>
|
||||
{currentItem.kind === "video" ? (
|
||||
<video
|
||||
key={currentItem.id}
|
||||
src={currentItem.sourceUrl}
|
||||
poster={currentItem.posterUrl}
|
||||
className="max-h-[calc(100vh-8rem)] max-w-[calc(100vw-1.5rem)] rounded-md object-contain sm:max-h-[calc(100vh-7rem)] sm:max-w-[calc(100vw-8rem)]"
|
||||
controls
|
||||
autoPlay
|
||||
playsInline
|
||||
/>
|
||||
) : currentItem.kind === "motion" ? (
|
||||
<MotionPhotoPreview
|
||||
key={currentItem.id}
|
||||
posterUrl={currentItem.posterUrl}
|
||||
motionUrl={currentItem.motionUrl}
|
||||
alt={`Preview live photo ${safeIndex + 1} of ${itemCount}`}
|
||||
presentationTimestampUs={currentItem.presentationTimestampUs}
|
||||
badgeClassName="left-3 top-3 sm:left-4 sm:top-4"
|
||||
mediaClassName="max-h-[calc(100vh-8rem)] max-w-[calc(100vw-1.5rem)] rounded-md object-contain sm:max-h-[calc(100vh-7rem)] sm:max-w-[calc(100vw-8rem)]"
|
||||
/>
|
||||
) : (
|
||||
<img
|
||||
src={currentItem.sourceUrl}
|
||||
alt={`Preview image ${safeIndex + 1} of ${itemCount}`}
|
||||
className="max-h-[calc(100vh-8rem)] max-w-[calc(100vw-1.5rem)] rounded-md object-contain select-none sm:max-h-[calc(100vh-7rem)] sm:max-w-[calc(100vw-8rem)]"
|
||||
draggable={false}
|
||||
loading="eager"
|
||||
decoding="async"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Screen reader description */}
|
||||
{hasMultiple && sm && (
|
||||
<>
|
||||
<NavButton
|
||||
side="left"
|
||||
disabled={!canGoPrevious}
|
||||
label="Previous item"
|
||||
onClick={handlePrevious}
|
||||
icon={<ChevronLeft className="h-5 w-5" />}
|
||||
/>
|
||||
<NavButton
|
||||
side="right"
|
||||
disabled={!canGoNext}
|
||||
label="Next item"
|
||||
onClick={handleNext}
|
||||
icon={<ChevronRight className="h-5 w-5" />}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
|
||||
{hasMultiple && !sm && (
|
||||
<div className="absolute inset-x-0 bottom-0 z-20 px-3 pb-3 pt-6">
|
||||
<div className="mx-auto flex max-w-xs items-center justify-between rounded-full bg-black/55 px-2 py-2 backdrop-blur-sm">
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={handlePrevious}
|
||||
disabled={!canGoPrevious}
|
||||
className="rounded-full px-3 text-white hover:bg-white/10 hover:text-white disabled:text-white/35"
|
||||
>
|
||||
Prev
|
||||
</Button>
|
||||
<div className="px-3 text-xs text-white/75">
|
||||
{safeIndex + 1} / {itemCount}
|
||||
</div>
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={handleNext}
|
||||
disabled={!canGoNext}
|
||||
className="rounded-full px-3 text-white hover:bg-white/10 hover:text-white disabled:text-white/35"
|
||||
>
|
||||
Next
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div id="image-preview-description" className="sr-only">
|
||||
Attachment preview dialog. Press Escape to close or click outside the media.
|
||||
Attachment preview dialog. Press Escape to close and use left or right arrow keys to switch items.
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
|
||||
interface NavButtonProps {
|
||||
side: "left" | "right";
|
||||
disabled: boolean;
|
||||
label: string;
|
||||
onClick: () => void;
|
||||
icon: React.ReactNode;
|
||||
}
|
||||
|
||||
const NavButton = ({ side, disabled, label, onClick, icon }: NavButtonProps) => (
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
disabled={disabled}
|
||||
onClick={onClick}
|
||||
aria-label={label}
|
||||
className={cn(
|
||||
"absolute top-1/2 z-20 hidden h-11 w-11 -translate-y-1/2 rounded-full bg-white/10 text-white backdrop-blur-sm hover:bg-white/16 hover:text-white disabled:opacity-25 sm:flex",
|
||||
side === "left" ? "left-4" : "right-4",
|
||||
)}
|
||||
>
|
||||
{icon}
|
||||
</Button>
|
||||
);
|
||||
|
||||
export default PreviewImageDialog;
|
||||
|
|
|
|||
Loading…
Reference in New Issue