sinvo/docmost
1
0
Fork 0
mirror of https://github.com/docmost/docmost.git synced 2026-08-28 17:27:06 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: close on click outside; smaller icon size

Browse Source
This commit is contained in:
Philipinho
2026-08-26 02:16:54 +01:00
parent 56474e5b70
commit b61a1667b7
1 changed files with 20 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/client/src/features/editor/components/common/lightbox-view.tsx
+20 -8
View File
@@ -4,8 +4,6 @@ import Lightbox, { type Slide } from "yet-another-react-lightbox";
import type { LightboxRequest } from "@/features/editor/atoms/editor-atoms"; import type { LightboxRequest } from "@/features/editor/atoms/editor-atoms";
import { getFileUrl } from "@/lib/config.ts"; import { getFileUrl } from "@/lib/config.ts";
import "yet-another-react-lightbox/styles.css"; import "yet-another-react-lightbox/styles.css";
import "yet-another-react-lightbox/plugins/captions.css";
import Captions from "yet-another-react-lightbox/plugins/captions";
import Download from "yet-another-react-lightbox/plugins/download"; import Download from "yet-another-react-lightbox/plugins/download";
import Fullscreen from "yet-another-react-lightbox/plugins/fullscreen"; import Fullscreen from "yet-another-react-lightbox/plugins/fullscreen";
import Video from "yet-another-react-lightbox/plugins/video"; import Video from "yet-another-react-lightbox/plugins/video";
@@ -53,13 +51,11 @@ function getFilename(src: string) {
function getMedia(rawSrc: string, type?: string, alt?: string): Slide { function getMedia(rawSrc: string, type?: string, alt?: string): Slide {
const src = getFileUrl(rawSrc); const src = getFileUrl(rawSrc);
const filename = getFilename(rawSrc); const filename = getFilename(rawSrc);
const caption = alt || filename;
if (type === "video") { if (type === "video") {
return { return {
type: "video", type: "video",
sources: [{ src, type: getVideoMimeType(rawSrc) }], sources: [{ src, type: getVideoMimeType(rawSrc) }],
title: caption,
download: { url: src, filename }, download: { url: src, filename },
}; };
} else { } else {
@@ -67,7 +63,6 @@ function getMedia(rawSrc: string, type?: string, alt?: string): Slide {
type: "image", type: "image",
src, src,
alt: alt || undefined, alt: alt || undefined,
title: caption,
download: { url: src, filename }, download: { url: src, filename },
}; };
} }
@@ -124,6 +119,11 @@ export default function LightboxView({
const [pageSlides, setPageSlides] = useState<Slide[]>([]); const [pageSlides, setPageSlides] = useState<Slide[]>([]);
const [loadedMediaKey, setLoadedMediaKey] = useState<string | null>(null); const [loadedMediaKey, setLoadedMediaKey] = useState<string | null>(null);
const [isFullscreen, setIsFullscreen] = useState(false);
useEffect(() => {
if (!open) setIsFullscreen(false);
}, [open]);
useEffect(() => { useEffect(() => {
if (!open) return; if (!open) return;
@@ -161,9 +161,21 @@ export default function LightboxView({
close={onClose} close={onClose}
index={index} index={index}
slides={slides} slides={slides}
plugins={[Captions, Download, Fullscreen, Video, Zoom]} plugins={[Download, Fullscreen, Video, Zoom]}
styles={{ container: { backgroundColor: "rgba(0, 0, 0, 0.8)" } }} styles={{
captions={{ descriptionTextAlign: "center" }} container: { backgroundColor: "rgba(0, 0, 0, 0.8)" },
icon: { width: 24, height: 24 },
toolbar: {
margin: 8,
borderRadius: 8,
backgroundColor: "rgba(0, 0, 0, 0.5)",
},
}}
controller={{ closeOnBackdropClick: !isFullscreen }}
on={{
enterFullscreen: () => setIsFullscreen(true),
exitFullscreen: () => setIsFullscreen(false),
}}
video={{ controls: true, playsInline: true }} video={{ controls: true, playsInline: true }}
zoom={{ zoom={{
scrollToZoom: true, scrollToZoom: true,