mirror of
https://github.com/usememos/memos.git
synced 2026-01-04 15:34:15 +08:00
refactor: simplify memo-metadata components
This commit is contained in:
Johnny
parent
d7284fe867
commit
be1b758d30
18 changed files with 506 additions and 331 deletions
|
|
@ -34,12 +34,11 @@ const LocationMarker = (props: MarkerProps) => {
|
|||
// Call the parent onChange function.
|
||||
props.onChange(e.latlng);
|
||||
},
|
||||
locationfound() {},
|
||||
locationfound() { },
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (!initializedRef.current) {
|
||||
map.attributionControl.setPrefix("");
|
||||
map.locate();
|
||||
initializedRef.current = true;
|
||||
}
|
||||
|
|
@ -247,7 +246,7 @@ const LeafletMap = (props: MapProps) => {
|
|||
isDark ? "https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png" : "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
|
||||
}
|
||||
/>
|
||||
<LocationMarker position={position} readonly={props.readonly} onChange={props.onChange ? props.onChange : () => {}} />
|
||||
<LocationMarker position={position} readonly={props.readonly} onChange={props.onChange ? props.onChange : () => { }} />
|
||||
<MapControls position={props.latlng} />
|
||||
<MapCleanup />
|
||||
</MapContainer>
|
||||
|
|
|
|||
116
web/src/components/MemoEditor/components/AttachmentItemCard.tsx
Normal file
116
web/src/components/MemoEditor/components/AttachmentItemCard.tsx
Normal file
|
|
@ -0,0 +1,116 @@
|
|||
import { ChevronDownIcon, ChevronUpIcon, FileIcon, Loader2Icon, XIcon } from "lucide-react";
|
||||
import type { FC } from "react";
|
||||
import type { AttachmentItem } from "@/components/memo-metadata/types";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { formatFileSize, getFileTypeLabel } from "@/utils/format";
|
||||
|
||||
interface AttachmentItemCardProps {
|
||||
item: AttachmentItem;
|
||||
onRemove?: () => void;
|
||||
onMoveUp?: () => void;
|
||||
onMoveDown?: () => void;
|
||||
canMoveUp?: boolean;
|
||||
canMoveDown?: boolean;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
const AttachmentItemCard: FC<AttachmentItemCardProps> = ({
|
||||
item,
|
||||
onRemove,
|
||||
onMoveUp,
|
||||
onMoveDown,
|
||||
canMoveUp = true,
|
||||
canMoveDown = true,
|
||||
className,
|
||||
}) => {
|
||||
const { category, filename, thumbnailUrl, mimeType, size, isLocal } = item;
|
||||
const fileTypeLabel = getFileTypeLabel(mimeType);
|
||||
const fileSizeLabel = size ? formatFileSize(size) : undefined;
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
"relative flex items-center gap-1.5 px-1.5 py-1 rounded border border-transparent hover:border-border hover:bg-accent/20 transition-all",
|
||||
className,
|
||||
)}
|
||||
>
|
||||
<div className="flex-shrink-0 w-6 h-6 rounded overflow-hidden bg-muted/40 flex items-center justify-center">
|
||||
{category === "image" && thumbnailUrl ? (
|
||||
<img src={thumbnailUrl} alt="" className="w-full h-full object-cover" />
|
||||
) : (
|
||||
<FileIcon className="w-3.5 h-3.5 text-muted-foreground" />
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex-1 min-w-0 flex flex-col sm:flex-row sm:items-baseline gap-0.5 sm:gap-1.5">
|
||||
<span className="text-xs font-medium truncate" title={filename}>
|
||||
{filename}
|
||||
</span>
|
||||
|
||||
<div className="flex items-center gap-1 text-[11px] text-muted-foreground shrink-0">
|
||||
{isLocal && (
|
||||
<>
|
||||
<Loader2Icon className="w-2.5 h-2.5 animate-spin" />
|
||||
<span className="text-muted-foreground/50">•</span>
|
||||
</>
|
||||
)}
|
||||
<span>{fileTypeLabel}</span>
|
||||
{fileSizeLabel && (
|
||||
<>
|
||||
<span className="text-muted-foreground/50 hidden sm:inline">•</span>
|
||||
<span className="hidden sm:inline">{fileSizeLabel}</span>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex-shrink-0 flex items-center gap-0.5">
|
||||
{onMoveUp && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={onMoveUp}
|
||||
disabled={!canMoveUp}
|
||||
className={cn(
|
||||
"p-0.5 rounded hover:bg-accent active:bg-accent transition-colors touch-manipulation",
|
||||
!canMoveUp && "opacity-20 cursor-not-allowed hover:bg-transparent",
|
||||
)}
|
||||
title="Move up"
|
||||
aria-label="Move attachment up"
|
||||
>
|
||||
<ChevronUpIcon className="w-3 h-3 text-muted-foreground" />
|
||||
</button>
|
||||
)}
|
||||
|
||||
{onMoveDown && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={onMoveDown}
|
||||
disabled={!canMoveDown}
|
||||
className={cn(
|
||||
"p-0.5 rounded hover:bg-accent active:bg-accent transition-colors touch-manipulation",
|
||||
!canMoveDown && "opacity-20 cursor-not-allowed hover:bg-transparent",
|
||||
)}
|
||||
title="Move down"
|
||||
aria-label="Move attachment down"
|
||||
>
|
||||
<ChevronDownIcon className="w-3 h-3 text-muted-foreground" />
|
||||
</button>
|
||||
)}
|
||||
|
||||
{onRemove && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={onRemove}
|
||||
className="p-0.5 rounded hover:bg-destructive/10 active:bg-destructive/10 transition-colors ml-0.5 touch-manipulation"
|
||||
title="Remove"
|
||||
aria-label="Remove attachment"
|
||||
>
|
||||
<XIcon className="w-3 h-3 text-muted-foreground hover:text-destructive" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default AttachmentItemCard;
|
||||
|
|
@ -0,0 +1,81 @@
|
|||
import { PaperclipIcon } from "lucide-react";
|
||||
import type { FC } from "react";
|
||||
import type { LocalFile } from "@/components/memo-metadata/types";
|
||||
import { toAttachmentItems } from "@/components/memo-metadata/types";
|
||||
import type { Attachment } from "@/types/proto/api/v1/attachment_service_pb";
|
||||
import AttachmentItemCard from "./AttachmentItemCard";
|
||||
|
||||
interface AttachmentListV2Props {
|
||||
attachments: Attachment[];
|
||||
localFiles?: LocalFile[];
|
||||
onAttachmentsChange?: (attachments: Attachment[]) => void;
|
||||
onRemoveLocalFile?: (previewUrl: string) => void;
|
||||
}
|
||||
|
||||
const AttachmentListV2: FC<AttachmentListV2Props> = ({ attachments, localFiles = [], onAttachmentsChange, onRemoveLocalFile }) => {
|
||||
if (attachments.length === 0 && localFiles.length === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const items = toAttachmentItems(attachments, localFiles);
|
||||
|
||||
const handleMoveUp = (index: number) => {
|
||||
if (index === 0 || !onAttachmentsChange) return;
|
||||
|
||||
const newAttachments = [...attachments];
|
||||
[newAttachments[index - 1], newAttachments[index]] = [newAttachments[index], newAttachments[index - 1]];
|
||||
onAttachmentsChange(newAttachments);
|
||||
};
|
||||
|
||||
const handleMoveDown = (index: number) => {
|
||||
if (index === attachments.length - 1 || !onAttachmentsChange) return;
|
||||
|
||||
const newAttachments = [...attachments];
|
||||
[newAttachments[index], newAttachments[index + 1]] = [newAttachments[index + 1], newAttachments[index]];
|
||||
onAttachmentsChange(newAttachments);
|
||||
};
|
||||
|
||||
const handleRemoveAttachment = (name: string) => {
|
||||
if (onAttachmentsChange) {
|
||||
onAttachmentsChange(attachments.filter((attachment) => attachment.name !== name));
|
||||
}
|
||||
};
|
||||
|
||||
const handleRemoveItem = (item: (typeof items)[0]) => {
|
||||
if (item.isLocal) {
|
||||
onRemoveLocalFile?.(item.id);
|
||||
} else {
|
||||
handleRemoveAttachment(item.id);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="w-full rounded-lg border border-border bg-muted/20 overflow-hidden">
|
||||
<div className="flex items-center gap-1.5 px-2 py-1.5 border-b border-border bg-muted/30">
|
||||
<PaperclipIcon className="w-3.5 h-3.5 text-muted-foreground" />
|
||||
<span className="text-xs font-medium text-muted-foreground">Attachments ({items.length})</span>
|
||||
</div>
|
||||
|
||||
<div className="p-1 sm:p-1.5 flex flex-col gap-0.5">
|
||||
{items.map((item) => {
|
||||
const isLocalFile = item.isLocal;
|
||||
const attachmentIndex = isLocalFile ? -1 : attachments.findIndex((a) => a.name === item.id);
|
||||
|
||||
return (
|
||||
<AttachmentItemCard
|
||||
key={item.id}
|
||||
item={item}
|
||||
onRemove={() => handleRemoveItem(item)}
|
||||
onMoveUp={!isLocalFile ? () => handleMoveUp(attachmentIndex) : undefined}
|
||||
onMoveDown={!isLocalFile ? () => handleMoveDown(attachmentIndex) : undefined}
|
||||
canMoveUp={!isLocalFile && attachmentIndex > 0}
|
||||
canMoveDown={!isLocalFile && attachmentIndex < attachments.length - 1}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default AttachmentListV2;
|
||||
|
|
@ -1,35 +1,30 @@
|
|||
import type { FC } from "react";
|
||||
import { AttachmentList, LocationDisplay, RelationList } from "@/components/memo-metadata";
|
||||
import { useEditorContext } from "../state";
|
||||
import type { EditorMetadataProps } from "../types";
|
||||
import AttachmentListV2 from "./AttachmentListV2";
|
||||
import LocationDisplayV2 from "./LocationDisplayV2";
|
||||
import RelationListV2 from "./RelationListV2";
|
||||
|
||||
export const EditorMetadata: FC<EditorMetadataProps> = () => {
|
||||
const { state, actions, dispatch } = useEditorContext();
|
||||
|
||||
return (
|
||||
<div className="w-full flex flex-col gap-2">
|
||||
{state.metadata.location && (
|
||||
<LocationDisplay
|
||||
mode="edit"
|
||||
location={state.metadata.location}
|
||||
onRemove={() => dispatch(actions.setMetadata({ location: undefined }))}
|
||||
/>
|
||||
)}
|
||||
|
||||
<AttachmentList
|
||||
mode="edit"
|
||||
<AttachmentListV2
|
||||
attachments={state.metadata.attachments}
|
||||
localFiles={state.localFiles}
|
||||
onAttachmentsChange={(attachments) => dispatch(actions.setMetadata({ attachments }))}
|
||||
onRemoveLocalFile={(previewUrl) => dispatch(actions.removeLocalFile(previewUrl))}
|
||||
/>
|
||||
|
||||
<RelationList
|
||||
mode="edit"
|
||||
<RelationListV2
|
||||
relations={state.metadata.relations}
|
||||
currentMemoName=""
|
||||
onRelationsChange={(relations) => dispatch(actions.setMetadata({ relations }))}
|
||||
/>
|
||||
|
||||
{state.metadata.location && (
|
||||
<LocationDisplayV2 location={state.metadata.location} onRemove={() => dispatch(actions.setMetadata({ location: undefined }))} />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -0,0 +1,48 @@
|
|||
import { MapPinIcon, XIcon } from "lucide-react";
|
||||
import type { FC } from "react";
|
||||
import { cn } from "@/lib/utils";
|
||||
import type { Location } from "@/types/proto/api/v1/memo_service_pb";
|
||||
|
||||
interface LocationDisplayV2Props {
|
||||
location: Location;
|
||||
onRemove?: () => void;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
const LocationDisplayV2: FC<LocationDisplayV2Props> = ({ location, onRemove, className }) => {
|
||||
const displayText = location.placeholder || `${location.latitude.toFixed(6)}, ${location.longitude.toFixed(6)}`;
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
"relative flex items-center gap-1.5 px-1.5 py-1 rounded border border-border bg-background hover:bg-accent/20 transition-all w-full",
|
||||
className,
|
||||
)}
|
||||
>
|
||||
<MapPinIcon className="w-3.5 h-3.5 shrink-0 text-muted-foreground" />
|
||||
|
||||
<div className="flex items-center gap-1.5 min-w-0 flex-1">
|
||||
<span className="text-xs font-medium truncate" title={displayText}>
|
||||
{displayText}
|
||||
</span>
|
||||
<span className="text-[11px] text-muted-foreground shrink-0 hidden sm:inline">
|
||||
{location.latitude.toFixed(4)}°, {location.longitude.toFixed(4)}°
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{onRemove && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={onRemove}
|
||||
className="p-0.5 rounded hover:bg-destructive/10 active:bg-destructive/10 transition-colors touch-manipulation shrink-0 ml-auto"
|
||||
title="Remove"
|
||||
aria-label="Remove location"
|
||||
>
|
||||
<XIcon className="w-3 h-3 text-muted-foreground hover:text-destructive" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default LocationDisplayV2;
|
||||
|
|
@ -0,0 +1,64 @@
|
|||
import { LinkIcon, XIcon } from "lucide-react";
|
||||
import type { FC } from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
import { extractMemoIdFromName } from "@/helpers/resource-names";
|
||||
import { cn } from "@/lib/utils";
|
||||
import type { MemoRelation_Memo } from "@/types/proto/api/v1/memo_service_pb";
|
||||
|
||||
interface RelationItemCardProps {
|
||||
memo: MemoRelation_Memo;
|
||||
onRemove?: () => void;
|
||||
parentPage?: string;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
const RelationItemCard: FC<RelationItemCardProps> = ({ memo, onRemove, parentPage, className }) => {
|
||||
const memoId = extractMemoIdFromName(memo.name);
|
||||
|
||||
if (onRemove) {
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
"relative flex items-center gap-1.5 px-1.5 py-1 rounded border border-transparent hover:border-border hover:bg-accent/20 transition-all",
|
||||
className,
|
||||
)}
|
||||
>
|
||||
<LinkIcon className="w-3.5 h-3.5 shrink-0 text-muted-foreground" />
|
||||
<span className="text-xs font-medium truncate flex-1" title={memo.snippet}>
|
||||
{memo.snippet}
|
||||
</span>
|
||||
|
||||
<div className="flex-shrink-0 flex items-center gap-0.5">
|
||||
<button
|
||||
type="button"
|
||||
onClick={onRemove}
|
||||
className="p-0.5 rounded hover:bg-destructive/10 active:bg-destructive/10 transition-colors touch-manipulation"
|
||||
title="Remove"
|
||||
aria-label="Remove relation"
|
||||
>
|
||||
<XIcon className="w-3 h-3 text-muted-foreground hover:text-destructive" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Link
|
||||
className={cn(
|
||||
"relative flex items-center gap-1.5 px-1.5 py-1 rounded border border-transparent hover:border-border hover:bg-accent/20 transition-all",
|
||||
className,
|
||||
)}
|
||||
to={`/${memo.name}`}
|
||||
viewTransition
|
||||
state={{ from: parentPage }}
|
||||
>
|
||||
<span className="text-[10px] font-mono px-1 py-0.5 rounded bg-muted/50 text-muted-foreground shrink-0">{memoId.slice(0, 6)}</span>
|
||||
<span className="text-xs truncate flex-1" title={memo.snippet}>
|
||||
{memo.snippet}
|
||||
</span>
|
||||
</Link>
|
||||
);
|
||||
};
|
||||
|
||||
export default RelationItemCard;
|
||||
62
web/src/components/MemoEditor/components/RelationListV2.tsx
Normal file
62
web/src/components/MemoEditor/components/RelationListV2.tsx
Normal file
|
|
@ -0,0 +1,62 @@
|
|||
import { create } from "@bufbuild/protobuf";
|
||||
import { LinkIcon } from "lucide-react";
|
||||
import type { FC } from "react";
|
||||
import { useEffect, useState } from "react";
|
||||
import { memoServiceClient } from "@/connect";
|
||||
import type { Memo, MemoRelation } from "@/types/proto/api/v1/memo_service_pb";
|
||||
import { MemoRelation_MemoSchema } from "@/types/proto/api/v1/memo_service_pb";
|
||||
import RelationItemCard from "./RelationItemCard";
|
||||
|
||||
interface RelationListV2Props {
|
||||
relations: MemoRelation[];
|
||||
onRelationsChange?: (relations: MemoRelation[]) => void;
|
||||
}
|
||||
|
||||
const RelationListV2: FC<RelationListV2Props> = ({ relations, onRelationsChange }) => {
|
||||
const [referencingMemos, setReferencingMemos] = useState<Memo[]>([]);
|
||||
|
||||
useEffect(() => {
|
||||
(async () => {
|
||||
if (relations.length > 0) {
|
||||
const requests = relations.map(async (relation) => {
|
||||
return await memoServiceClient.getMemo({ name: relation.relatedMemo!.name });
|
||||
});
|
||||
const list = await Promise.all(requests);
|
||||
setReferencingMemos(list);
|
||||
} else {
|
||||
setReferencingMemos([]);
|
||||
}
|
||||
})();
|
||||
}, [relations]);
|
||||
|
||||
const handleDeleteRelation = (memoName: string) => {
|
||||
if (onRelationsChange) {
|
||||
onRelationsChange(relations.filter((relation) => relation.relatedMemo?.name !== memoName));
|
||||
}
|
||||
};
|
||||
|
||||
if (referencingMemos.length === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="w-full rounded-lg border border-border bg-muted/20 overflow-hidden">
|
||||
<div className="flex items-center gap-1.5 px-2 py-1.5 border-b border-border bg-muted/30">
|
||||
<LinkIcon className="w-3.5 h-3.5 text-muted-foreground" />
|
||||
<span className="text-xs font-medium text-muted-foreground">Relations ({referencingMemos.length})</span>
|
||||
</div>
|
||||
|
||||
<div className="p-1 sm:p-1.5 flex flex-col gap-0.5">
|
||||
{referencingMemos.map((memo) => (
|
||||
<RelationItemCard
|
||||
key={memo.name}
|
||||
memo={create(MemoRelation_MemoSchema, { name: memo.name, snippet: memo.snippet })}
|
||||
onRemove={() => handleDeleteRelation(memo.name)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default RelationListV2;
|
||||
|
|
@ -1,8 +1,13 @@
|
|||
// UI components for MemoEditor
|
||||
|
||||
export { default as AttachmentItemCard } from "./AttachmentItemCard";
|
||||
export { default as AttachmentListV2 } from "./AttachmentListV2";
|
||||
export * from "./EditorContent";
|
||||
export * from "./EditorMetadata";
|
||||
export * from "./EditorToolbar";
|
||||
export { FocusModeExitButton, FocusModeOverlay } from "./FocusModeOverlay";
|
||||
export { LinkMemoDialog } from "./LinkMemoDialog";
|
||||
export { LocationDialog } from "./LocationDialog";
|
||||
export { default as LocationDisplayV2 } from "./LocationDisplayV2";
|
||||
export { default as RelationItemCard } from "./RelationItemCard";
|
||||
export { default as RelationListV2 } from "./RelationListV2";
|
||||
|
|
|
|||
|
|
@ -127,7 +127,7 @@ const MemoEditorImpl: React.FC<MemoEditorProps> = ({
|
|||
*/}
|
||||
<div
|
||||
className={cn(
|
||||
"group relative w-full flex flex-col justify-between items-start bg-card px-4 pt-3 pb-1 rounded-lg border border-border",
|
||||
"group relative w-full flex flex-col justify-between items-start bg-card px-4 pt-3 pb-1 rounded-lg border border-border gap-2",
|
||||
FOCUS_MODE_STYLES.transition,
|
||||
state.ui.isFocusMode && cn(FOCUS_MODE_STYLES.container.base, FOCUS_MODE_STYLES.container.spacing),
|
||||
className,
|
||||
|
|
|
|||
|
|
@ -29,9 +29,9 @@ const MemoBody: React.FC<MemoBodyProps> = ({ compact, onContentClick, onContentD
|
|||
onDoubleClick={onContentDoubleClick}
|
||||
compact={memo.pinned ? false : compact} // Always show full content when pinned
|
||||
/>
|
||||
{memo.location && <LocationDisplay mode="view" location={memo.location} />}
|
||||
<AttachmentList mode="view" attachments={memo.attachments} />
|
||||
<RelationList mode="view" relations={referencedMemos} currentMemoName={memo.name} parentPage={parentPage} />
|
||||
<AttachmentList attachments={memo.attachments} />
|
||||
<RelationList relations={referencedMemos} currentMemoName={memo.name} parentPage={parentPage} />
|
||||
{memo.location && <LocationDisplay location={memo.location} />}
|
||||
<MemoReactionListView memo={memo} reactions={memo.reactions} />
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,96 +1,32 @@
|
|||
import { FileIcon, XIcon } from "lucide-react";
|
||||
import { cn } from "@/lib/utils";
|
||||
import type { AttachmentItem, DisplayMode } from "./types";
|
||||
import type { AttachmentItem } from "./types";
|
||||
|
||||
interface AttachmentCardProps {
|
||||
item: AttachmentItem;
|
||||
mode: DisplayMode;
|
||||
onRemove?: () => void;
|
||||
mode: "view";
|
||||
onClick?: () => void;
|
||||
className?: string;
|
||||
showThumbnail?: boolean;
|
||||
}
|
||||
|
||||
const AttachmentCard = ({ item, mode, onRemove, onClick, className, showThumbnail = true }: AttachmentCardProps) => {
|
||||
const { category, filename, thumbnailUrl, sourceUrl } = item;
|
||||
const isMedia = category === "image" || category === "video";
|
||||
const AttachmentCard = ({ item, onClick, className }: AttachmentCardProps) => {
|
||||
const { category, filename, sourceUrl } = item;
|
||||
|
||||
// Editor mode - compact badge style with optional thumbnail
|
||||
if (mode === "edit") {
|
||||
if (category === "image") {
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
"relative inline-flex items-center gap-1.5 px-2 h-7 rounded-md border text-secondary-foreground text-xs transition-colors",
|
||||
"border-border bg-background hover:bg-accent",
|
||||
className,
|
||||
)}
|
||||
>
|
||||
{showThumbnail && category === "image" && thumbnailUrl ? (
|
||||
<img src={thumbnailUrl} alt={filename} className="w-5 h-5 shrink-0 object-cover rounded" />
|
||||
) : (
|
||||
<FileIcon className="w-3.5 h-3.5 shrink-0 text-muted-foreground" />
|
||||
)}
|
||||
<span className="truncate max-w-40">{filename}</span>
|
||||
{onRemove && (
|
||||
<button
|
||||
type="button"
|
||||
className="shrink-0 rounded hover:bg-accent transition-colors p-0.5"
|
||||
onPointerDown={(e) => {
|
||||
e.stopPropagation();
|
||||
}}
|
||||
onMouseDown={(e) => {
|
||||
e.stopPropagation();
|
||||
}}
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
onRemove();
|
||||
}}
|
||||
>
|
||||
<XIcon className="w-3 h-3 text-muted-foreground hover:text-foreground" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
<img
|
||||
src={sourceUrl}
|
||||
alt={filename}
|
||||
className={cn("w-full h-full object-cover rounded-lg cursor-pointer", className)}
|
||||
onClick={onClick}
|
||||
loading="lazy"
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
// View mode - specialized rendering for media
|
||||
if (isMedia) {
|
||||
if (category === "image") {
|
||||
return (
|
||||
<img
|
||||
className={cn("cursor-pointer h-full w-auto rounded-lg border border-border/60 object-contain transition-colors", className)}
|
||||
src={thumbnailUrl}
|
||||
onError={(e) => {
|
||||
const target = e.target as HTMLImageElement;
|
||||
// Fallback to source URL if thumbnail fails
|
||||
if (target.src.includes("?thumbnail=true")) {
|
||||
target.src = sourceUrl;
|
||||
}
|
||||
}}
|
||||
onClick={onClick}
|
||||
decoding="async"
|
||||
loading="lazy"
|
||||
alt={filename}
|
||||
/>
|
||||
);
|
||||
} else if (category === "video") {
|
||||
return (
|
||||
<video
|
||||
className={cn(
|
||||
"cursor-pointer h-full w-auto rounded-lg border border-border/60 object-contain bg-muted transition-colors",
|
||||
className,
|
||||
)}
|
||||
preload="metadata"
|
||||
crossOrigin="anonymous"
|
||||
src={sourceUrl}
|
||||
controls
|
||||
/>
|
||||
);
|
||||
}
|
||||
if (category === "video") {
|
||||
return <video src={sourceUrl} className={cn("w-full h-full object-cover rounded-lg", className)} controls preload="metadata" />;
|
||||
}
|
||||
|
||||
// View mode - non-media files (will be handled by parent component for proper file card display)
|
||||
return null;
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -1,46 +1,22 @@
|
|||
import { closestCenter, DndContext, type DragEndEvent, MouseSensor, TouchSensor, useSensor, useSensors } from "@dnd-kit/core";
|
||||
import { arrayMove, SortableContext, verticalListSortingStrategy } from "@dnd-kit/sortable";
|
||||
import { useState } from "react";
|
||||
import type { Attachment } from "@/types/proto/api/v1/attachment_service_pb";
|
||||
import { getAttachmentType, getAttachmentUrl } from "@/utils/attachment";
|
||||
import MemoAttachment from "../MemoAttachment";
|
||||
import PreviewImageDialog from "../PreviewImageDialog";
|
||||
import AttachmentCard from "./AttachmentCard";
|
||||
import SortableItem from "./SortableItem";
|
||||
import type { AttachmentItem, BaseMetadataProps, LocalFile } from "./types";
|
||||
import { separateMediaAndDocs, toAttachmentItems } from "./types";
|
||||
|
||||
interface AttachmentListProps extends BaseMetadataProps {
|
||||
interface AttachmentListProps {
|
||||
attachments: Attachment[];
|
||||
onAttachmentsChange?: (attachments: Attachment[]) => void;
|
||||
localFiles?: LocalFile[];
|
||||
onRemoveLocalFile?: (previewUrl: string) => void;
|
||||
}
|
||||
|
||||
const AttachmentList = ({ attachments, mode, onAttachmentsChange, localFiles = [], onRemoveLocalFile }: AttachmentListProps) => {
|
||||
const sensors = useSensors(useSensor(MouseSensor), useSensor(TouchSensor));
|
||||
const AttachmentList = ({ attachments }: AttachmentListProps) => {
|
||||
const [previewImage, setPreviewImage] = useState<{ open: boolean; urls: string[]; index: number }>({
|
||||
open: false,
|
||||
urls: [],
|
||||
index: 0,
|
||||
});
|
||||
|
||||
const handleDeleteAttachment = (name: string) => {
|
||||
if (onAttachmentsChange) {
|
||||
onAttachmentsChange(attachments.filter((attachment) => attachment.name !== name));
|
||||
}
|
||||
};
|
||||
|
||||
const handleDragEnd = (event: DragEndEvent) => {
|
||||
const { active, over } = event;
|
||||
|
||||
if (over && active.id !== over.id && onAttachmentsChange) {
|
||||
const oldIndex = attachments.findIndex((attachment) => attachment.name === active.id);
|
||||
const newIndex = attachments.findIndex((attachment) => attachment.name === over.id);
|
||||
onAttachmentsChange(arrayMove(attachments, oldIndex, newIndex));
|
||||
}
|
||||
};
|
||||
|
||||
const handleImageClick = (imgUrl: string, mediaAttachments: Attachment[]) => {
|
||||
const imgUrls = mediaAttachments
|
||||
.filter((attachment) => getAttachmentType(attachment) === "image/*")
|
||||
|
|
@ -49,56 +25,15 @@ const AttachmentList = ({ attachments, mode, onAttachmentsChange, localFiles = [
|
|||
setPreviewImage({ open: true, urls: imgUrls, index });
|
||||
};
|
||||
|
||||
// Editor mode: Display all items as compact badges with drag-and-drop
|
||||
if (mode === "edit") {
|
||||
if (attachments.length === 0 && localFiles.length === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const items = toAttachmentItems(attachments, localFiles);
|
||||
// Only uploaded attachments support reordering (stable server IDs)
|
||||
const sortableIds = attachments.map((a) => a.name);
|
||||
|
||||
const handleRemoveItem = (item: AttachmentItem) => {
|
||||
if (item.isLocal) {
|
||||
onRemoveLocalFile?.(item.id);
|
||||
} else {
|
||||
handleDeleteAttachment(item.id);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
|
||||
<SortableContext items={sortableIds} strategy={verticalListSortingStrategy}>
|
||||
<div className="w-full flex flex-row justify-start flex-wrap gap-2 max-h-[50vh] overflow-y-auto">
|
||||
{items.map((item) => (
|
||||
<div key={item.id}>
|
||||
{/* Uploaded items are wrapped in SortableItem for drag-and-drop */}
|
||||
{!item.isLocal ? (
|
||||
<SortableItem id={item.id} className="flex items-center gap-1.5 min-w-0">
|
||||
<AttachmentCard item={item} mode="edit" onRemove={() => handleRemoveItem(item)} showThumbnail />
|
||||
</SortableItem>
|
||||
) : (
|
||||
/* Local items render directly without sorting capability */
|
||||
<div className="flex items-center gap-1.5 min-w-0">
|
||||
<AttachmentCard item={item} mode="edit" onRemove={() => handleRemoveItem(item)} showThumbnail />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</SortableContext>
|
||||
</DndContext>
|
||||
);
|
||||
}
|
||||
|
||||
// View mode: Split items into media gallery and document list
|
||||
const items = toAttachmentItems(attachments, []);
|
||||
const { media: mediaItems, docs: docItems } = separateMediaAndDocs(items);
|
||||
|
||||
if (attachments.length === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Media Gallery */}
|
||||
{mediaItems.length > 0 && (
|
||||
<div className="w-full flex flex-row justify-start overflow-auto gap-2">
|
||||
{mediaItems.map((item) => (
|
||||
|
|
@ -116,18 +51,15 @@ const AttachmentList = ({ attachments, mode, onAttachmentsChange, localFiles = [
|
|||
</div>
|
||||
)}
|
||||
|
||||
{/* Document Files */}
|
||||
{docItems.length > 0 && (
|
||||
<div className="w-full flex flex-row justify-start overflow-auto gap-2">
|
||||
{docItems.map((item) => {
|
||||
// Find original attachment for MemoAttachment component
|
||||
const attachment = attachments.find((a) => a.name === item.id);
|
||||
return attachment ? <MemoAttachment key={item.id} attachment={attachment} /> : null;
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Image Preview Dialog */}
|
||||
<PreviewImageDialog
|
||||
open={previewImage.open}
|
||||
onOpenChange={(open) => setPreviewImage((prev) => ({ ...prev, open }))}
|
||||
|
|
|
|||
|
|
@ -1,18 +1,17 @@
|
|||
import { LatLng } from "leaflet";
|
||||
import { MapPinIcon, XIcon } from "lucide-react";
|
||||
import { MapPinIcon } from "lucide-react";
|
||||
import { useState } from "react";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { Location } from "@/types/proto/api/v1/memo_service_pb";
|
||||
import type { Location } from "@/types/proto/api/v1/memo_service_pb";
|
||||
import LeafletMap from "../LeafletMap";
|
||||
import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover";
|
||||
import { BaseMetadataProps } from "./types";
|
||||
|
||||
interface LocationDisplayProps extends BaseMetadataProps {
|
||||
interface LocationDisplayProps {
|
||||
location?: Location;
|
||||
onRemove?: () => void;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
const LocationDisplay = ({ location, mode, onRemove, className }: LocationDisplayProps) => {
|
||||
const LocationDisplay = ({ location, className }: LocationDisplayProps) => {
|
||||
const [popoverOpen, setPopoverOpen] = useState<boolean>(false);
|
||||
|
||||
if (!location) {
|
||||
|
|
@ -26,12 +25,11 @@ const LocationDisplay = ({ location, mode, onRemove, className }: LocationDispla
|
|||
<PopoverTrigger asChild>
|
||||
<div
|
||||
className={cn(
|
||||
"w-auto max-w-full flex flex-row gap-2",
|
||||
"w-auto max-w-full flex flex-row gap-2 cursor-pointer",
|
||||
"relative inline-flex items-center gap-1.5 px-2 h-7 rounded-md border border-border bg-background hover:bg-accent text-secondary-foreground text-xs transition-colors",
|
||||
mode === "view" && "cursor-pointer",
|
||||
className,
|
||||
)}
|
||||
onClick={mode === "view" ? () => setPopoverOpen(true) : undefined}
|
||||
onClick={() => setPopoverOpen(true)}
|
||||
>
|
||||
<span className="shrink-0 text-muted-foreground">
|
||||
<MapPinIcon className="w-3.5 h-3.5" />
|
||||
|
|
@ -40,24 +38,6 @@ const LocationDisplay = ({ location, mode, onRemove, className }: LocationDispla
|
|||
[{location.latitude.toFixed(2)}°, {location.longitude.toFixed(2)}°]
|
||||
</span>
|
||||
<span className="text-nowrap truncate">{displayText}</span>
|
||||
{onRemove && (
|
||||
<button
|
||||
className="shrink-0 rounded hover:bg-accent transition-colors p-0.5"
|
||||
onPointerDown={(e) => {
|
||||
e.stopPropagation();
|
||||
}}
|
||||
onMouseDown={(e) => {
|
||||
e.stopPropagation();
|
||||
}}
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
onRemove();
|
||||
}}
|
||||
>
|
||||
<XIcon className="w-3 h-3 text-muted-foreground hover:text-foreground" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent align="start">
|
||||
|
|
|
|||
|
|
@ -1,55 +1,17 @@
|
|||
import { LinkIcon, XIcon } from "lucide-react";
|
||||
import { Link } from "react-router-dom";
|
||||
import { extractMemoIdFromName } from "@/helpers/resource-names";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { MemoRelation_Memo } from "@/types/proto/api/v1/memo_service_pb";
|
||||
import { DisplayMode } from "./types";
|
||||
import type { MemoRelation_Memo } from "@/types/proto/api/v1/memo_service_pb";
|
||||
|
||||
interface RelationCardProps {
|
||||
memo: MemoRelation_Memo;
|
||||
mode: DisplayMode;
|
||||
onRemove?: () => void;
|
||||
parentPage?: string;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
const RelationCard = ({ memo, mode, onRemove, parentPage, className }: RelationCardProps) => {
|
||||
const RelationCard = ({ memo, parentPage, className }: RelationCardProps) => {
|
||||
const memoId = extractMemoIdFromName(memo.name);
|
||||
|
||||
// Editor mode: Badge with remove
|
||||
if (mode === "edit") {
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
"relative inline-flex items-center gap-1.5 px-2 h-7 rounded-md border border-border bg-background text-secondary-foreground text-xs transition-colors hover:bg-accent",
|
||||
className,
|
||||
)}
|
||||
>
|
||||
<LinkIcon className="w-3.5 h-3.5 shrink-0 text-muted-foreground" />
|
||||
<span className="truncate max-w-[160px]">{memo.snippet}</span>
|
||||
{onRemove && (
|
||||
<button
|
||||
className="shrink-0 rounded hover:bg-accent transition-colors p-0.5"
|
||||
onPointerDown={(e) => {
|
||||
e.stopPropagation();
|
||||
}}
|
||||
onMouseDown={(e) => {
|
||||
e.stopPropagation();
|
||||
}}
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
onRemove();
|
||||
}}
|
||||
>
|
||||
<XIcon className="w-3 h-3 text-muted-foreground hover:text-foreground" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// View mode: Navigable link with ID and snippet
|
||||
return (
|
||||
<Link
|
||||
className={cn(
|
||||
|
|
@ -58,9 +20,7 @@ const RelationCard = ({ memo, mode, onRemove, parentPage, className }: RelationC
|
|||
)}
|
||||
to={`/${memo.name}`}
|
||||
viewTransition
|
||||
state={{
|
||||
from: parentPage,
|
||||
}}
|
||||
state={{ from: parentPage }}
|
||||
>
|
||||
<span className="text-[10px] opacity-60 leading-4 border border-border font-mono px-1 rounded-full mr-1">{memoId.slice(0, 6)}</span>
|
||||
<span className="truncate">{memo.snippet}</span>
|
||||
|
|
|
|||
|
|
@ -1,31 +1,27 @@
|
|||
import { create } from "@bufbuild/protobuf";
|
||||
import { LinkIcon, MilestoneIcon } from "lucide-react";
|
||||
import { useEffect, useState } from "react";
|
||||
import { memoServiceClient } from "@/connect";
|
||||
import { useState } from "react";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { Memo, MemoRelation, MemoRelation_MemoSchema, MemoRelation_Type } from "@/types/proto/api/v1/memo_service_pb";
|
||||
import type { MemoRelation } from "@/types/proto/api/v1/memo_service_pb";
|
||||
import { MemoRelation_Type } from "@/types/proto/api/v1/memo_service_pb";
|
||||
import { useTranslate } from "@/utils/i18n";
|
||||
import MetadataCard from "./MetadataCard";
|
||||
import RelationCard from "./RelationCard";
|
||||
import { BaseMetadataProps } from "./types";
|
||||
|
||||
interface RelationListProps extends BaseMetadataProps {
|
||||
interface RelationListProps {
|
||||
relations: MemoRelation[];
|
||||
currentMemoName?: string;
|
||||
onRelationsChange?: (relations: MemoRelation[]) => void;
|
||||
parentPage?: string;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
function RelationList({ relations, currentMemoName, mode, onRelationsChange, parentPage, className }: RelationListProps) {
|
||||
function RelationList({ relations, currentMemoName, parentPage, className }: RelationListProps) {
|
||||
const t = useTranslate();
|
||||
const [referencingMemos, setReferencingMemos] = useState<Memo[]>([]);
|
||||
const [selectedTab, setSelectedTab] = useState<"referencing" | "referenced">("referencing");
|
||||
|
||||
// Get referencing and referenced relations
|
||||
const referencingRelations = relations.filter(
|
||||
(relation) =>
|
||||
relation.type === MemoRelation_Type.REFERENCE &&
|
||||
(mode === "edit" || relation.memo?.name === currentMemoName) &&
|
||||
relation.memo?.name === currentMemoName &&
|
||||
relation.relatedMemo?.name !== currentMemoName,
|
||||
);
|
||||
|
||||
|
|
@ -36,60 +32,14 @@ function RelationList({ relations, currentMemoName, mode, onRelationsChange, par
|
|||
relation.relatedMemo?.name === currentMemoName,
|
||||
);
|
||||
|
||||
// Fetch full memo details for editor mode
|
||||
useEffect(() => {
|
||||
if (mode === "edit") {
|
||||
(async () => {
|
||||
if (referencingRelations.length > 0) {
|
||||
const requests = referencingRelations.map(async (relation) => {
|
||||
return await memoServiceClient.getMemo({ name: relation.relatedMemo!.name });
|
||||
});
|
||||
const list = await Promise.all(requests);
|
||||
setReferencingMemos(list);
|
||||
} else {
|
||||
setReferencingMemos([]);
|
||||
}
|
||||
})();
|
||||
}
|
||||
}, [mode, relations]);
|
||||
|
||||
const handleDeleteRelation = (memoName: string) => {
|
||||
if (onRelationsChange) {
|
||||
onRelationsChange(relations.filter((relation) => relation.relatedMemo?.name !== memoName));
|
||||
}
|
||||
};
|
||||
|
||||
// Editor mode: Simple badge list
|
||||
if (mode === "edit") {
|
||||
if (referencingMemos.length === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="w-full flex flex-row gap-2 flex-wrap">
|
||||
{referencingMemos.map((memo) => (
|
||||
<RelationCard
|
||||
key={memo.name}
|
||||
memo={create(MemoRelation_MemoSchema, { name: memo.name, snippet: memo.snippet })}
|
||||
mode="edit"
|
||||
onRemove={() => handleDeleteRelation(memo.name)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// View mode: Tabbed card with bidirectional relations
|
||||
if (referencingRelations.length === 0 && referencedRelations.length === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
// Auto-select tab based on which has content
|
||||
const activeTab = referencingRelations.length === 0 ? "referenced" : selectedTab;
|
||||
|
||||
return (
|
||||
<MetadataCard className={className}>
|
||||
{/* Tabs */}
|
||||
<div className="w-full flex flex-row justify-start items-center mb-1 gap-3 opacity-60">
|
||||
{referencingRelations.length > 0 && (
|
||||
<button
|
||||
|
|
@ -119,20 +69,18 @@ function RelationList({ relations, currentMemoName, mode, onRelationsChange, par
|
|||
)}
|
||||
</div>
|
||||
|
||||
{/* Referencing List */}
|
||||
{activeTab === "referencing" && referencingRelations.length > 0 && (
|
||||
<div className="w-full flex flex-col justify-start items-start">
|
||||
{referencingRelations.map((relation) => (
|
||||
<RelationCard key={relation.relatedMemo!.name} memo={relation.relatedMemo!} mode="view" parentPage={parentPage} />
|
||||
<RelationCard key={relation.relatedMemo!.name} memo={relation.relatedMemo!} parentPage={parentPage} />
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Referenced List */}
|
||||
{activeTab === "referenced" && referencedRelations.length > 0 && (
|
||||
<div className="w-full flex flex-col justify-start items-start">
|
||||
{referencedRelations.map((relation) => (
|
||||
<RelationCard key={relation.memo!.name} memo={relation.memo!} mode="view" parentPage={parentPage} />
|
||||
<RelationCard key={relation.memo!.name} memo={relation.memo!} parentPage={parentPage} />
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -1,25 +0,0 @@
|
|||
import { useSortable } from "@dnd-kit/sortable";
|
||||
import { CSS } from "@dnd-kit/utilities";
|
||||
|
||||
interface Props {
|
||||
id: string;
|
||||
className: string;
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
const SortableItem: React.FC<Props> = ({ id, className, children }: Props) => {
|
||||
const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id });
|
||||
|
||||
const style = {
|
||||
transform: CSS.Transform.toString(transform),
|
||||
transition,
|
||||
};
|
||||
|
||||
return (
|
||||
<div ref={setNodeRef} style={style} {...attributes} {...listeners} className={className}>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SortableItem;
|
||||
|
|
@ -1,4 +1,3 @@
|
|||
export { default as AttachmentCard } from "./AttachmentCard";
|
||||
export { default as AttachmentList } from "./AttachmentList";
|
||||
export { default as LocationDisplay } from "./LocationDisplay";
|
||||
|
||||
|
|
@ -8,5 +7,5 @@ export { default as RelationCard } from "./RelationCard";
|
|||
export { default as RelationList } from "./RelationList";
|
||||
|
||||
// Types
|
||||
export type { AttachmentItem, BaseMetadataProps, DisplayMode, FileCategory, LocalFile } from "./types";
|
||||
export type { AttachmentItem, FileCategory, LocalFile } from "./types";
|
||||
export { attachmentToItem, fileToItem, filterByCategory, separateMediaAndDocs, toAttachmentItems } from "./types";
|
||||
|
|
|
|||
75
web/src/utils/format.ts
Normal file
75
web/src/utils/format.ts
Normal file
|
|
@ -0,0 +1,75 @@
|
|||
export function formatFileSize(bytes: number): string {
|
||||
if (bytes === 0) return "0 B";
|
||||
if (bytes < 0) return "Invalid size";
|
||||
|
||||
const units = ["B", "KB", "MB", "GB", "TB"];
|
||||
const k = 1024;
|
||||
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
||||
const size = bytes / Math.pow(k, i);
|
||||
const formatted = i === 0 ? size.toString() : size.toFixed(1);
|
||||
|
||||
return `${formatted} ${units[i]}`;
|
||||
}
|
||||
|
||||
export function getFileTypeLabel(mimeType: string): string {
|
||||
if (!mimeType) return "File";
|
||||
|
||||
const [category, subtype] = mimeType.split("/");
|
||||
|
||||
const specialCases: Record<string, string> = {
|
||||
"application/pdf": "PDF",
|
||||
"application/zip": "ZIP",
|
||||
"application/x-zip-compressed": "ZIP",
|
||||
"application/json": "JSON",
|
||||
"application/xml": "XML",
|
||||
"text/plain": "TXT",
|
||||
"text/html": "HTML",
|
||||
"text/css": "CSS",
|
||||
"text/javascript": "JS",
|
||||
"application/javascript": "JS",
|
||||
};
|
||||
|
||||
if (specialCases[mimeType]) {
|
||||
return specialCases[mimeType];
|
||||
}
|
||||
|
||||
if (category === "image") {
|
||||
const imageTypes: Record<string, string> = {
|
||||
jpeg: "JPEG",
|
||||
jpg: "JPEG",
|
||||
png: "PNG",
|
||||
gif: "GIF",
|
||||
webp: "WebP",
|
||||
svg: "SVG",
|
||||
"svg+xml": "SVG",
|
||||
bmp: "BMP",
|
||||
ico: "ICO",
|
||||
};
|
||||
return imageTypes[subtype] || subtype.toUpperCase();
|
||||
}
|
||||
|
||||
if (category === "video") {
|
||||
const videoTypes: Record<string, string> = {
|
||||
mp4: "MP4",
|
||||
webm: "WebM",
|
||||
ogg: "OGG",
|
||||
avi: "AVI",
|
||||
mov: "MOV",
|
||||
quicktime: "MOV",
|
||||
};
|
||||
return videoTypes[subtype] || subtype.toUpperCase();
|
||||
}
|
||||
|
||||
if (category === "audio") {
|
||||
const audioTypes: Record<string, string> = {
|
||||
mp3: "MP3",
|
||||
mpeg: "MP3",
|
||||
wav: "WAV",
|
||||
ogg: "OGG",
|
||||
webm: "WebM",
|
||||
};
|
||||
return audioTypes[subtype] || subtype.toUpperCase();
|
||||
}
|
||||
|
||||
return subtype ? subtype.toUpperCase() : category.toUpperCase();
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue