YourSelfHosted/memos
1
0
Fork 0
mirror of https://github.com/usememos/memos.git synced 2025-06-05 22:09:59 +02:00
Code Issues Packages Projects Releases Wiki Activity

chore: update resource view

Browse Source
This commit is contained in:
Johnny
2025-03-05 23:08:44 +08:00
parent 92a44e26b9
commit c668073cf3
1 changed files with 18 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
web/src/components/MemoResourceListView.tsx
View File

@@ -1,9 +1,9 @@
import { memo } from "react";
import { Resource } from "@/types/proto/api/v1/resource_service";
import { cn } from "@/utils";
import { getResourceType, getResourceUrl } from "@/utils/resource";
import MemoResource from "./MemoResource";
import showPreviewImageDialog from "./PreviewImageDialog";
import SquareDiv from "./kit/SquareDiv";
const MemoResourceListView = ({ resources = [] }: { resources: Resource[] }) => {
const mediaResources: Resource[] = [];
@@ -27,14 +27,14 @@ const MemoResourceListView = ({ resources = [] }: { resources: Resource[] }) =>
showPreviewImageDialog(imgUrls, index);
};
const MediaCard = ({ resource }: { resource: Resource }) => {
const MediaCard = ({ resource, className }: { resource: Resource; className?: string }) => {
const type = getResourceType(resource);
const resourceUrl = getResourceUrl(resource);
if (type === "image/*") {
return (
<img
className="cursor-pointer min-h-full w-auto object-cover"
className={cn("cursor-pointer h-full w-auto rounded-lg border dark:border-zinc-800 object-contain hover:opacity-80", className)}
src={resource.externalLink ? resourceUrl : resourceUrl + "?thumbnail=true"}
onClick={() => handleImageClick(resourceUrl)}
decoding="async"
@@ -44,7 +44,10 @@ const MemoResourceListView = ({ resources = [] }: { resources: Resource[] }) =>
} else if (type === "video/*") {
return (
<video
className="cursor-pointer w-full h-full object-contain bg-zinc-100 dark:bg-zinc-800"
className={cn(
"cursor-pointer h-full w-auto rounded-lg border dark:border-zinc-800 object-contain bg-zinc-100 dark:bg-zinc-800",
className,
)}
preload="metadata"
crossOrigin="anonymous"
src={resourceUrl}
@@ -57,37 +60,31 @@ const MemoResourceListView = ({ resources = [] }: { resources: Resource[] }) =>
};
const MediaList = ({ resources = [] }: { resources: Resource[] }) => {
if (resources.length === 0) return <></>;
if (resources.length === 1) {
const resource = mediaResources[0];
return (
<div className="max-w-full flex justify-center items-center border dark:border-zinc-800 rounded overflow-hidden hide-scrollbar hover:shadow-md">
<MediaCard resource={mediaResources[0]} />
<div className="max-w-full flex flex-col justify-start items-start overflow-hidden hide-scrollbar">
<MediaCard className="max-h-64" resource={resource} />
<span className="max-w-full text-xs pl-1 text-gray-400 dark:text-zinc-500 truncate">{resource.filename}</span>
</div>
);
}
const cards = resources.map((resource) => (
<SquareDiv
key={resource.name}
className="flex justify-center items-center border dark:border-zinc-900 rounded overflow-hidden hide-scrollbar hover:shadow-md"
>
<MediaCard resource={resource} />
</SquareDiv>
<div key={resource.name} className="max-w-[70%] flex flex-col justify-start items-start shrink-0">
<MediaCard className="max-h-64" resource={resource} />
<span className="max-w-full text-xs pl-1 text-gray-400 dark:text-zinc-500 truncate">{resource.filename}</span>
</div>
));
if (resources.length === 2 || resources.length === 4) {
return <div className="w-full grid gap-2 grid-cols-2">{cards}</div>;
}
return <div className="w-full grid gap-2 grid-cols-2 sm:grid-cols-3">{cards}</div>;
return <div className="w-full flex flex-row justify-start overflow-auto gap-2">{cards}</div>;
};
const OtherList = ({ resources = [] }: { resources: Resource[] }) => {
if (resources.length === 0) return <></>;
return (
<div className="w-full flex flex-row justify-start flex-wrap gap-2">
<div className="w-full flex flex-row justify-start overflow-auto gap-2">
{otherResources.map((resource) => (
<MemoResource key={resource.name} resource={resource} />
))}
@@ -97,7 +94,7 @@ const MemoResourceListView = ({ resources = [] }: { resources: Resource[] }) =>
return (
<>
<MediaList resources={mediaResources} />
{mediaResources.length > 0 && <MediaList resources={mediaResources} />}
<OtherList resources={otherResources} />
</>
);