feat(blocks): add context-driven media library
Provide a reusable image and video library with folders, filters, search, pagination, favorites, upload targets, detail preview, contextual actions, and single or multi-select picker flows. Keep persistence, upload, storage, and reference resolution behind MediaProvider's MediaAdapter; export the block and register its English and Simplified Chinese catalogs. Include adapter-bound UI coverage.
This commit is contained in:
Maofeng
@@ -44,6 +44,9 @@
|
||||
"./layout": "./src/blocks/layout/index.ts",
|
||||
"./layout/locales": "./src/blocks/layout/locales/catalogs.ts",
|
||||
"./layout/locales/*": "./src/blocks/layout/locales/*.ts",
|
||||
"./media": "./src/blocks/media/index.ts",
|
||||
"./media/locales": "./src/blocks/media/locales/catalogs.ts",
|
||||
"./media/locales/*": "./src/blocks/media/locales/*.ts",
|
||||
"./navigation": "./src/blocks/navigation/index.ts",
|
||||
"./navigation/locales": "./src/blocks/navigation/locales/catalogs.ts",
|
||||
"./navigation/locales/*": "./src/blocks/navigation/locales/*.ts",
|
||||
|
||||
@@ -0,0 +1,35 @@
|
||||
import * as React from "react"
|
||||
|
||||
import type { MediaAdapter, MediaNotice } from "./types"
|
||||
|
||||
interface MediaContextValue {
|
||||
adapter: MediaAdapter
|
||||
notify?: (notice: MediaNotice) => void
|
||||
}
|
||||
|
||||
const MediaContext = React.createContext<MediaContextValue | null>(null)
|
||||
|
||||
export interface MediaProviderProps {
|
||||
adapter: MediaAdapter
|
||||
children: React.ReactNode
|
||||
notify?: (notice: MediaNotice) => void
|
||||
}
|
||||
|
||||
/** Supplies all persistence and transport dependencies for the media blocks. */
|
||||
export function MediaProvider({
|
||||
adapter,
|
||||
children,
|
||||
notify,
|
||||
}: MediaProviderProps) {
|
||||
const value = React.useMemo(() => ({ adapter, notify }), [adapter, notify])
|
||||
|
||||
return <MediaContext.Provider value={value}>{children}</MediaContext.Provider>
|
||||
}
|
||||
|
||||
export function useMedia(): MediaContextValue {
|
||||
const value = React.useContext(MediaContext)
|
||||
if (!value) {
|
||||
throw new Error("Media blocks must be rendered inside a MediaProvider.")
|
||||
}
|
||||
return value
|
||||
}
|
||||
@@ -0,0 +1,59 @@
|
||||
export interface MediaDimensions {
|
||||
height: number
|
||||
width: number
|
||||
}
|
||||
|
||||
const METADATA_TIMEOUT_MS = 10_000
|
||||
|
||||
function waitForDimensions(
|
||||
file: File,
|
||||
element: HTMLImageElement | HTMLVideoElement,
|
||||
successEvent: "load" | "loadedmetadata"
|
||||
): Promise<MediaDimensions | undefined> {
|
||||
return new Promise((resolve) => {
|
||||
const objectUrl = URL.createObjectURL(file)
|
||||
let settled = false
|
||||
const timeout = window.setTimeout(finish, METADATA_TIMEOUT_MS)
|
||||
|
||||
function finish(dimensions?: MediaDimensions) {
|
||||
if (settled) return
|
||||
settled = true
|
||||
window.clearTimeout(timeout)
|
||||
URL.revokeObjectURL(objectUrl)
|
||||
resolve(dimensions)
|
||||
}
|
||||
|
||||
element.addEventListener(
|
||||
successEvent,
|
||||
() => {
|
||||
const width =
|
||||
element instanceof HTMLVideoElement
|
||||
? element.videoWidth
|
||||
: element.naturalWidth
|
||||
const height =
|
||||
element instanceof HTMLVideoElement
|
||||
? element.videoHeight
|
||||
: element.naturalHeight
|
||||
finish(width > 0 && height > 0 ? { height, width } : undefined)
|
||||
},
|
||||
{ once: true }
|
||||
)
|
||||
element.addEventListener("error", () => finish(), { once: true })
|
||||
element.src = objectUrl
|
||||
})
|
||||
}
|
||||
|
||||
/** Reads intrinsic dimensions before an adapter uploads an image or video. */
|
||||
export function readMediaDimensions(
|
||||
file: File
|
||||
): Promise<MediaDimensions | undefined> {
|
||||
if (file.type.startsWith("image/")) {
|
||||
return waitForDimensions(file, new Image(), "load")
|
||||
}
|
||||
if (file.type.startsWith("video/")) {
|
||||
const video = document.createElement("video")
|
||||
video.preload = "metadata"
|
||||
return waitForDimensions(file, video, "loadedmetadata")
|
||||
}
|
||||
return Promise.resolve(undefined)
|
||||
}
|
||||
@@ -0,0 +1,112 @@
|
||||
import * as React from "react"
|
||||
import { useTranslate } from "@workspace/i18n"
|
||||
import { Button } from "@workspace/ui/components/button"
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@workspace/ui/components/dialog"
|
||||
import { Input } from "@workspace/ui/components/input"
|
||||
import {
|
||||
InputGroup,
|
||||
InputGroupAddon,
|
||||
InputGroupInput,
|
||||
InputGroupText,
|
||||
} from "@workspace/ui/components/input-group"
|
||||
|
||||
import { mediaMessages } from "./messages"
|
||||
|
||||
export interface MediaFolderDialogProps {
|
||||
description: string
|
||||
initialName?: string
|
||||
lockedSuffix?: string
|
||||
maxLength?: number
|
||||
open: boolean
|
||||
pending?: boolean
|
||||
title: string
|
||||
onOpenChange: (open: boolean) => void
|
||||
onSubmit: (name: string) => void
|
||||
}
|
||||
|
||||
export function MediaFolderDialog({
|
||||
description,
|
||||
initialName = "",
|
||||
lockedSuffix,
|
||||
maxLength = 50,
|
||||
open,
|
||||
pending,
|
||||
title,
|
||||
onOpenChange,
|
||||
onSubmit,
|
||||
}: MediaFolderDialogProps) {
|
||||
const t = useTranslate()
|
||||
const [name, setName] = React.useState(initialName)
|
||||
|
||||
React.useEffect(() => {
|
||||
if (open) setName(initialName)
|
||||
}, [initialName, open])
|
||||
|
||||
const normalizedName = name.trim()
|
||||
const input = (
|
||||
<Input
|
||||
autoFocus
|
||||
value={name}
|
||||
maxLength={maxLength}
|
||||
placeholder={t(mediaMessages.folderNamePlaceholder)}
|
||||
aria-label={t(mediaMessages.folderName)}
|
||||
onChange={(event) => setName(event.target.value)}
|
||||
/>
|
||||
)
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent>
|
||||
<form
|
||||
className="contents"
|
||||
onSubmit={(event) => {
|
||||
event.preventDefault()
|
||||
if (normalizedName) onSubmit(normalizedName)
|
||||
}}
|
||||
>
|
||||
<DialogHeader>
|
||||
<DialogTitle>{title}</DialogTitle>
|
||||
<DialogDescription>{description}</DialogDescription>
|
||||
</DialogHeader>
|
||||
{lockedSuffix ? (
|
||||
<InputGroup>
|
||||
<InputGroupInput
|
||||
autoFocus
|
||||
value={name}
|
||||
maxLength={maxLength}
|
||||
placeholder={t(mediaMessages.folderNamePlaceholder)}
|
||||
aria-label={t(mediaMessages.folderName)}
|
||||
onChange={(event) => setName(event.target.value)}
|
||||
/>
|
||||
<InputGroupAddon align="inline-end">
|
||||
<InputGroupText>{lockedSuffix}</InputGroupText>
|
||||
</InputGroupAddon>
|
||||
</InputGroup>
|
||||
) : (
|
||||
input
|
||||
)}
|
||||
<DialogFooter>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
disabled={pending}
|
||||
onClick={() => onOpenChange(false)}
|
||||
>
|
||||
{t(mediaMessages.cancel)}
|
||||
</Button>
|
||||
<Button type="submit" disabled={!normalizedName || pending}>
|
||||
{pending ? t(mediaMessages.saving) : t(mediaMessages.save)}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,26 @@
|
||||
export { MediaProvider, useMedia } from "./context"
|
||||
export type { MediaProviderProps } from "./context"
|
||||
export { MediaLibrary } from "./media-library"
|
||||
export type { MediaLibraryProps } from "./media-library"
|
||||
export { MediaPickerDialog } from "./media-picker-dialog"
|
||||
export type { MediaPickerDialogProps } from "./media-picker-dialog"
|
||||
export { defaultMediaReference, formatMediaFileSize } from "./utils"
|
||||
export { readMediaDimensions } from "./dimensions"
|
||||
export type { MediaDimensions } from "./dimensions"
|
||||
export type {
|
||||
CreateMediaFolderInput,
|
||||
MediaAdapter,
|
||||
MediaAsset,
|
||||
MediaAssetPage,
|
||||
MediaAssetQuery,
|
||||
MediaFilter,
|
||||
MediaFolder,
|
||||
MediaFolderSelection,
|
||||
MediaId,
|
||||
MediaKind,
|
||||
MediaNotice,
|
||||
MediaSelectionMode,
|
||||
MediaStorageTarget,
|
||||
MediaUploadInput,
|
||||
UpdateMediaFolderInput,
|
||||
} from "./types"
|
||||
@@ -0,0 +1,4 @@
|
||||
import type { mediaMessages } from "../messages"
|
||||
import type { BlockMessageCatalog } from "../../../i18n/catalogs"
|
||||
|
||||
export type MediaMessageCatalog = BlockMessageCatalog<typeof mediaMessages>
|
||||
@@ -0,0 +1,66 @@
|
||||
import type { MediaMessageCatalog } from "./catalogs"
|
||||
|
||||
export const locale = "en"
|
||||
export const languageTag = "en-US"
|
||||
export const messages = {
|
||||
"blocks.media.actions.cancel": "Cancel",
|
||||
"blocks.media.actions.copyInformation": "Copy information",
|
||||
"blocks.media.actions.copyLink": "Copy link",
|
||||
"blocks.media.actions.copyName": "Copy name",
|
||||
"blocks.media.actions.delete": "Delete",
|
||||
"blocks.media.actions.details": "View details",
|
||||
"blocks.media.actions.favorite": "Favorite",
|
||||
"blocks.media.actions.loadMore": "Load more",
|
||||
"blocks.media.actions.moveToFolder": "Move to folder",
|
||||
"blocks.media.actions.rename": "Rename",
|
||||
"blocks.media.actions.retry": "Try again",
|
||||
"blocks.media.actions.save": "Save",
|
||||
"blocks.media.actions.saving": "Saving…",
|
||||
"blocks.media.actions.select": "Select",
|
||||
"blocks.media.actions.selectFolder": "Select folder {name}",
|
||||
"blocks.media.actions.unfavorite": "Unfavorite",
|
||||
"blocks.media.actions.upload": "Upload",
|
||||
"blocks.media.actions.viewOriginal": "View original",
|
||||
"blocks.media.copy.failed": "Copy failed. Check browser clipboard permissions.",
|
||||
"blocks.media.deleteAsset.description": "This media item will no longer appear in the library.",
|
||||
"blocks.media.deleteAsset.title": "Delete media",
|
||||
"blocks.media.deleteFolder.description": "This folder and its child folders will be deleted. Their media items will become unclassified.",
|
||||
"blocks.media.deleteFolder.title": "Delete folder",
|
||||
"blocks.media.details.dimensions": "Dimensions",
|
||||
"blocks.media.details.fileName": "File name",
|
||||
"blocks.media.details.noDimensions": "Unknown",
|
||||
"blocks.media.details.size": "Size",
|
||||
"blocks.media.details.type": "Type",
|
||||
"blocks.media.details.uploadedAt": "Uploaded",
|
||||
"blocks.media.empty.description": "Upload images or videos to manage them here.",
|
||||
"blocks.media.empty.title": "No media",
|
||||
"blocks.media.emptySearch.description": "No media files match your search.",
|
||||
"blocks.media.filters.all": "All media",
|
||||
"blocks.media.filters.favorite": "Favorites",
|
||||
"blocks.media.filters.image": "Images",
|
||||
"blocks.media.filters.unclassified": "Unclassified",
|
||||
"blocks.media.filters.video": "Videos",
|
||||
"blocks.media.folders.classification": "Folders only organize media in this library and do not change file URLs.",
|
||||
"blocks.media.folders.create": "New folder",
|
||||
"blocks.media.folders.empty": "No folders yet. Create one.",
|
||||
"blocks.media.folders.name": "Folder name",
|
||||
"blocks.media.folders.newChild": "New child folder",
|
||||
"blocks.media.folders.placeholder": "Enter a folder name",
|
||||
"blocks.media.folders.rename": "Rename folder",
|
||||
"blocks.media.folders.title": "Folders",
|
||||
"blocks.media.load.error": "Unable to load media",
|
||||
"blocks.media.loading": "Loading media…",
|
||||
"blocks.media.picker.description": "Choose an uploaded image or video from the media library.",
|
||||
"blocks.media.picker.selectedCount": "{count} selected",
|
||||
"blocks.media.picker.title": "Select media",
|
||||
"blocks.media.picker.useSelected": "Use selected media",
|
||||
"blocks.media.renameMedia.description": "This changes the display name without changing the file or its URL.",
|
||||
"blocks.media.renameMedia.title": "Rename media",
|
||||
"blocks.media.search": "Search media files",
|
||||
"blocks.media.title": "Media library",
|
||||
"blocks.media.upload.chooseStorage": "Choose cloud storage",
|
||||
"blocks.media.upload.cloud": "Upload to cloud",
|
||||
"blocks.media.upload.error": "Unable to upload media.",
|
||||
"blocks.media.upload.server": "Upload to server",
|
||||
"blocks.media.upload.success": "{count} media files uploaded.",
|
||||
} as const satisfies MediaMessageCatalog
|
||||
@@ -0,0 +1,66 @@
|
||||
import type { MediaMessageCatalog } from "./catalogs"
|
||||
|
||||
export const locale = "zh-Hans"
|
||||
export const languageTag = "zh-CN"
|
||||
export const messages = {
|
||||
"blocks.media.actions.cancel": "取消",
|
||||
"blocks.media.actions.copyInformation": "复制媒体信息",
|
||||
"blocks.media.actions.copyLink": "复制链接",
|
||||
"blocks.media.actions.copyName": "复制名称",
|
||||
"blocks.media.actions.delete": "删除",
|
||||
"blocks.media.actions.details": "查看详情",
|
||||
"blocks.media.actions.favorite": "收藏",
|
||||
"blocks.media.actions.loadMore": "加载更多",
|
||||
"blocks.media.actions.moveToFolder": "移动到目录",
|
||||
"blocks.media.actions.rename": "重命名",
|
||||
"blocks.media.actions.retry": "重新加载",
|
||||
"blocks.media.actions.save": "保存",
|
||||
"blocks.media.actions.saving": "正在保存…",
|
||||
"blocks.media.actions.select": "选择",
|
||||
"blocks.media.actions.selectFolder": "选择目录：{name}",
|
||||
"blocks.media.actions.unfavorite": "取消收藏",
|
||||
"blocks.media.actions.upload": "上传",
|
||||
"blocks.media.actions.viewOriginal": "查看原文件",
|
||||
"blocks.media.copy.failed": "复制失败，请检查浏览器剪贴板权限。",
|
||||
"blocks.media.deleteAsset.description": "该媒体将不再显示在媒体库中。",
|
||||
"blocks.media.deleteAsset.title": "删除媒体",
|
||||
"blocks.media.deleteFolder.description": "该目录及其子目录将被删除，其中的媒体会变为未分类。",
|
||||
"blocks.media.deleteFolder.title": "删除目录",
|
||||
"blocks.media.details.dimensions": "尺寸",
|
||||
"blocks.media.details.fileName": "文件名称",
|
||||
"blocks.media.details.noDimensions": "未知",
|
||||
"blocks.media.details.size": "大小",
|
||||
"blocks.media.details.type": "类型",
|
||||
"blocks.media.details.uploadedAt": "上传时间",
|
||||
"blocks.media.empty.description": "上传图片或视频后，可在这里统一管理。",
|
||||
"blocks.media.empty.title": "暂无媒体",
|
||||
"blocks.media.emptySearch.description": "没有找到匹配的媒体文件。",
|
||||
"blocks.media.filters.all": "全部媒体",
|
||||
"blocks.media.filters.favorite": "收藏",
|
||||
"blocks.media.filters.image": "图片",
|
||||
"blocks.media.filters.unclassified": "未分类",
|
||||
"blocks.media.filters.video": "视频",
|
||||
"blocks.media.folders.classification": "目录仅用于媒体库内分类，不会改变文件链接。",
|
||||
"blocks.media.folders.create": "新建目录",
|
||||
"blocks.media.folders.empty": "暂无目录，点击新建。",
|
||||
"blocks.media.folders.name": "目录名称",
|
||||
"blocks.media.folders.newChild": "新建子目录",
|
||||
"blocks.media.folders.placeholder": "输入目录名称",
|
||||
"blocks.media.folders.rename": "重命名目录",
|
||||
"blocks.media.folders.title": "目录",
|
||||
"blocks.media.load.error": "无法加载媒体",
|
||||
"blocks.media.loading": "正在加载媒体…",
|
||||
"blocks.media.picker.description": "从媒体库中选择已上传的图片或视频。",
|
||||
"blocks.media.picker.selectedCount": "已选择 {count} 项",
|
||||
"blocks.media.picker.title": "选择媒体",
|
||||
"blocks.media.picker.useSelected": "使用所选媒体",
|
||||
"blocks.media.renameMedia.description": "仅修改展示名称，不会改变文件或已有链接。",
|
||||
"blocks.media.renameMedia.title": "修改媒体名称",
|
||||
"blocks.media.search": "搜索媒体文件",
|
||||
"blocks.media.title": "媒体库",
|
||||
"blocks.media.upload.chooseStorage": "选择云端存储",
|
||||
"blocks.media.upload.cloud": "上传到云端",
|
||||
"blocks.media.upload.error": "无法上传媒体文件。",
|
||||
"blocks.media.upload.server": "上传到服务器",
|
||||
"blocks.media.upload.success": "已上传 {count} 个媒体文件。",
|
||||
} as const satisfies MediaMessageCatalog
|
||||
@@ -0,0 +1,251 @@
|
||||
import * as React from "react"
|
||||
import {
|
||||
ClipboardCopyIcon,
|
||||
CloudUploadIcon,
|
||||
CopyIcon,
|
||||
FolderIcon,
|
||||
FolderInputIcon,
|
||||
HeartIcon,
|
||||
InfoIcon,
|
||||
LinkIcon,
|
||||
PencilIcon,
|
||||
Trash2Icon,
|
||||
UploadIcon,
|
||||
} from "lucide-react"
|
||||
import { useTranslate } from "@workspace/i18n"
|
||||
import {
|
||||
ContextMenu,
|
||||
ContextMenuContent,
|
||||
ContextMenuGroup,
|
||||
ContextMenuItem,
|
||||
ContextMenuLabel,
|
||||
ContextMenuSeparator,
|
||||
ContextMenuSub,
|
||||
ContextMenuSubContent,
|
||||
ContextMenuSubTrigger,
|
||||
ContextMenuTrigger,
|
||||
} from "@workspace/ui/components/context-menu"
|
||||
|
||||
import { useMedia } from "./context"
|
||||
import { mediaMessages } from "./messages"
|
||||
import type {
|
||||
MediaAsset,
|
||||
MediaFolder,
|
||||
MediaId,
|
||||
MediaStorageTarget,
|
||||
} from "./types"
|
||||
import { formatMediaFileSize, getMediaFolderPath } from "./utils"
|
||||
|
||||
export interface MediaContextMenuProps {
|
||||
asset?: MediaAsset
|
||||
children: React.ReactElement
|
||||
folders: readonly MediaFolder[]
|
||||
storageTargets: readonly MediaStorageTarget[]
|
||||
onDelete: (asset: MediaAsset) => void
|
||||
onDetails: (asset: MediaAsset) => void
|
||||
onFavorite: (asset: MediaAsset) => void
|
||||
onMove: (asset: MediaAsset, folderId: MediaId | null) => void
|
||||
onRename: (asset: MediaAsset) => void
|
||||
onUpload: (target: MediaStorageTarget) => void
|
||||
}
|
||||
|
||||
export function MediaContextMenu({
|
||||
asset,
|
||||
children,
|
||||
folders,
|
||||
storageTargets,
|
||||
onDelete,
|
||||
onDetails,
|
||||
onFavorite,
|
||||
onMove,
|
||||
onRename,
|
||||
onUpload,
|
||||
}: MediaContextMenuProps) {
|
||||
const { adapter, notify } = useMedia()
|
||||
const t = useTranslate()
|
||||
const resolveUrl = React.useCallback(
|
||||
(item: MediaAsset) => adapter.resolveUrl?.(item) ?? item.url,
|
||||
[adapter]
|
||||
)
|
||||
const localTargets = storageTargets.filter(
|
||||
(target) => target.kind === "local"
|
||||
)
|
||||
const cloudTargets = storageTargets.filter(
|
||||
(target) => target.kind === "cloud"
|
||||
)
|
||||
const runAfterClose = (action: VoidFunction) => window.setTimeout(action)
|
||||
|
||||
const copy = async (text: string, successMessage: string) => {
|
||||
try {
|
||||
await navigator.clipboard.writeText(text)
|
||||
notify?.({ message: successMessage, tone: "success" })
|
||||
} catch {
|
||||
notify?.({ message: t(mediaMessages.copyFailed), tone: "error" })
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<ContextMenu>
|
||||
<ContextMenuTrigger render={children} />
|
||||
<ContextMenuContent>
|
||||
{asset ? (
|
||||
<>
|
||||
<ContextMenuItem
|
||||
onClick={() => runAfterClose(() => onDetails(asset))}
|
||||
>
|
||||
<InfoIcon />
|
||||
{t(mediaMessages.details)}
|
||||
</ContextMenuItem>
|
||||
<ContextMenuItem onClick={() => onFavorite(asset)}>
|
||||
<HeartIcon
|
||||
className={asset.favorite ? "fill-current" : undefined}
|
||||
/>
|
||||
{asset.favorite
|
||||
? t(mediaMessages.unfavorite)
|
||||
: t(mediaMessages.favoriteAction)}
|
||||
</ContextMenuItem>
|
||||
<ContextMenuSub>
|
||||
<ContextMenuSubTrigger>
|
||||
<FolderInputIcon />
|
||||
{t(mediaMessages.moveToFolder)}
|
||||
</ContextMenuSubTrigger>
|
||||
<ContextMenuSubContent>
|
||||
<ContextMenuItem
|
||||
disabled={asset.folderId === null}
|
||||
onClick={() => onMove(asset, null)}
|
||||
>
|
||||
<FolderIcon />
|
||||
{t(mediaMessages.unclassified)}
|
||||
</ContextMenuItem>
|
||||
{folders.map((folder) => (
|
||||
<ContextMenuItem
|
||||
key={folder.id}
|
||||
disabled={asset.folderId === folder.id}
|
||||
onClick={() => onMove(asset, folder.id)}
|
||||
>
|
||||
<FolderIcon />
|
||||
{getMediaFolderPath(folder, folders)}
|
||||
</ContextMenuItem>
|
||||
))}
|
||||
</ContextMenuSubContent>
|
||||
</ContextMenuSub>
|
||||
<ContextMenuItem
|
||||
onClick={() => runAfterClose(() => onRename(asset))}
|
||||
>
|
||||
<PencilIcon />
|
||||
{t(mediaMessages.rename)}
|
||||
</ContextMenuItem>
|
||||
<ContextMenuSeparator />
|
||||
<ContextMenuItem
|
||||
onClick={() => void copy(asset.name, t(mediaMessages.copyName))}
|
||||
>
|
||||
<CopyIcon />
|
||||
{t(mediaMessages.copyName)}
|
||||
</ContextMenuItem>
|
||||
<ContextMenuItem
|
||||
onClick={() =>
|
||||
void copy(resolveUrl(asset), t(mediaMessages.copyLink))
|
||||
}
|
||||
>
|
||||
<LinkIcon />
|
||||
{t(mediaMessages.copyLink)}
|
||||
</ContextMenuItem>
|
||||
<ContextMenuItem
|
||||
onClick={() =>
|
||||
void copy(
|
||||
[
|
||||
`${t(mediaMessages.fileName)}: ${asset.name}`,
|
||||
`${t(mediaMessages.type)}: ${asset.mimeType}`,
|
||||
`${t(mediaMessages.size)}: ${formatMediaFileSize(asset.sizeBytes)}`,
|
||||
`${t(mediaMessages.uploadedAt)}: ${new Date(asset.createdAt).toLocaleString()}`,
|
||||
`${t(mediaMessages.copyLink)}: ${resolveUrl(asset)}`,
|
||||
].join("\n"),
|
||||
t(mediaMessages.copyInformation)
|
||||
)
|
||||
}
|
||||
>
|
||||
<ClipboardCopyIcon />
|
||||
{t(mediaMessages.copyInformation)}
|
||||
</ContextMenuItem>
|
||||
<ContextMenuSeparator />
|
||||
<ContextMenuItem
|
||||
variant="destructive"
|
||||
onClick={() => runAfterClose(() => onDelete(asset))}
|
||||
>
|
||||
<Trash2Icon />
|
||||
{t(mediaMessages.delete)}
|
||||
</ContextMenuItem>
|
||||
</>
|
||||
) : (
|
||||
<UploadItems
|
||||
cloudTargets={cloudTargets}
|
||||
localTargets={localTargets}
|
||||
onUpload={onUpload}
|
||||
/>
|
||||
)}
|
||||
</ContextMenuContent>
|
||||
</ContextMenu>
|
||||
)
|
||||
}
|
||||
|
||||
function UploadItems({
|
||||
cloudTargets,
|
||||
localTargets,
|
||||
onUpload,
|
||||
}: {
|
||||
cloudTargets: readonly MediaStorageTarget[]
|
||||
localTargets: readonly MediaStorageTarget[]
|
||||
onUpload: (target: MediaStorageTarget) => void
|
||||
}) {
|
||||
const t = useTranslate()
|
||||
return (
|
||||
<>
|
||||
{localTargets.map((target) => (
|
||||
<UploadTargetItem key={target.id} target={target} onUpload={onUpload} />
|
||||
))}
|
||||
{cloudTargets.length > 1 ? (
|
||||
<>
|
||||
{localTargets.length > 0 && <ContextMenuSeparator />}
|
||||
<ContextMenuGroup>
|
||||
<ContextMenuLabel>
|
||||
{t(mediaMessages.chooseStorage)}
|
||||
</ContextMenuLabel>
|
||||
{cloudTargets.map((target) => (
|
||||
<UploadTargetItem
|
||||
key={target.id}
|
||||
target={target}
|
||||
onUpload={onUpload}
|
||||
/>
|
||||
))}
|
||||
</ContextMenuGroup>
|
||||
</>
|
||||
) : (
|
||||
cloudTargets.map((target) => (
|
||||
<UploadTargetItem
|
||||
key={target.id}
|
||||
target={target}
|
||||
onUpload={onUpload}
|
||||
/>
|
||||
))
|
||||
)}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
function UploadTargetItem({
|
||||
target,
|
||||
onUpload,
|
||||
}: {
|
||||
target: MediaStorageTarget
|
||||
onUpload: (target: MediaStorageTarget) => void
|
||||
}) {
|
||||
const t = useTranslate()
|
||||
return (
|
||||
<ContextMenuItem onClick={() => onUpload(target)}>
|
||||
{target.kind === "local" ? <UploadIcon /> : <CloudUploadIcon />}
|
||||
{target.kind === "local"
|
||||
? t(mediaMessages.serverUpload)
|
||||
: `${t(mediaMessages.cloudUpload)}: ${target.label}`}
|
||||
</ContextMenuItem>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,191 @@
|
||||
import * as React from "react"
|
||||
import {
|
||||
ExternalLinkIcon,
|
||||
FilmIcon,
|
||||
HeartIcon,
|
||||
ImageIcon,
|
||||
Trash2Icon,
|
||||
} from "lucide-react"
|
||||
import { useTranslate } from "@workspace/i18n"
|
||||
import { Button } from "@workspace/ui/components/button"
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@workspace/ui/components/dialog"
|
||||
import { Separator } from "@workspace/ui/components/separator"
|
||||
import { cn } from "@workspace/ui/lib/utils"
|
||||
|
||||
import { mediaMessages } from "./messages"
|
||||
import type { MediaAsset } from "./types"
|
||||
import { formatMediaFileSize } from "./utils"
|
||||
|
||||
export interface MediaDetailDialogProps {
|
||||
asset?: MediaAsset
|
||||
deletePending?: boolean
|
||||
favoritePending?: boolean
|
||||
open: boolean
|
||||
resolveUrl: (asset: MediaAsset) => string
|
||||
onDelete: (asset: MediaAsset) => void
|
||||
onFavorite: (asset: MediaAsset) => void
|
||||
onOpenChange: (open: boolean) => void
|
||||
}
|
||||
|
||||
export function MediaDetailDialog({
|
||||
asset,
|
||||
deletePending,
|
||||
favoritePending,
|
||||
open,
|
||||
resolveUrl,
|
||||
onDelete,
|
||||
onFavorite,
|
||||
onOpenChange,
|
||||
}: MediaDetailDialogProps) {
|
||||
const t = useTranslate()
|
||||
const [zoom, setZoom] = React.useState(1)
|
||||
const imageSource = asset?.kind === "image" ? resolveUrl(asset) : undefined
|
||||
|
||||
React.useEffect(() => setZoom(1), [imageSource, open])
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="max-h-[calc(100dvh-2rem)] overflow-y-auto sm:max-w-2xl">
|
||||
<DialogHeader>
|
||||
<DialogTitle>{t(mediaMessages.details)}</DialogTitle>
|
||||
<DialogDescription className="truncate">
|
||||
{asset?.name}
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
{asset && (
|
||||
<>
|
||||
<div className="grid max-h-[55dvh] min-h-56 place-items-center overflow-hidden rounded-lg bg-muted/50">
|
||||
{asset.kind === "image" ? (
|
||||
<img
|
||||
src={imageSource}
|
||||
alt={asset.name}
|
||||
draggable={false}
|
||||
className="max-h-[55dvh] max-w-full touch-none object-contain select-none"
|
||||
style={{ transform: `scale(${zoom})` }}
|
||||
onWheel={(event) => {
|
||||
event.preventDefault()
|
||||
setZoom((current) =>
|
||||
Math.min(4, Math.max(1, current - event.deltaY / 400))
|
||||
)
|
||||
}}
|
||||
onDoubleClick={() => setZoom(1)}
|
||||
/>
|
||||
) : (
|
||||
<video
|
||||
src={resolveUrl(asset)}
|
||||
controls
|
||||
preload="metadata"
|
||||
className="max-h-[55dvh] max-w-full bg-black object-contain"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex min-w-0 items-center gap-2">
|
||||
{asset.kind === "image" ? (
|
||||
<ImageIcon className="size-4 shrink-0" />
|
||||
) : (
|
||||
<FilmIcon className="size-4 shrink-0" />
|
||||
)}
|
||||
<strong className="truncate">{asset.name}</strong>
|
||||
</div>
|
||||
|
||||
<dl className="grid grid-cols-2 gap-x-6 gap-y-4 sm:grid-cols-[repeat(3,minmax(0,1fr))_auto]">
|
||||
<MediaMetadata
|
||||
label={t(mediaMessages.type)}
|
||||
value={asset.mimeType}
|
||||
/>
|
||||
<MediaMetadata
|
||||
label={t(mediaMessages.size)}
|
||||
value={formatMediaFileSize(asset.sizeBytes)}
|
||||
/>
|
||||
<MediaMetadata
|
||||
label={t(mediaMessages.dimensions)}
|
||||
value={
|
||||
asset.width && asset.height
|
||||
? `${asset.width} × ${asset.height}`
|
||||
: t(mediaMessages.noDimensions)
|
||||
}
|
||||
/>
|
||||
<MediaMetadata
|
||||
label={t(mediaMessages.fileName)}
|
||||
value={asset.name}
|
||||
/>
|
||||
<MediaMetadata
|
||||
label={t(mediaMessages.uploadedAt)}
|
||||
value={new Date(asset.createdAt).toLocaleString()}
|
||||
/>
|
||||
</dl>
|
||||
|
||||
<Separator />
|
||||
|
||||
<DialogFooter className="flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
disabled={favoritePending}
|
||||
onClick={() => onFavorite(asset)}
|
||||
>
|
||||
<HeartIcon
|
||||
className={asset.favorite ? "fill-current" : undefined}
|
||||
/>
|
||||
{asset.favorite
|
||||
? t(mediaMessages.unfavorite)
|
||||
: t(mediaMessages.favoriteAction)}
|
||||
</Button>
|
||||
<div className="flex flex-col gap-2 sm:flex-row">
|
||||
<Button
|
||||
nativeButton={false}
|
||||
variant="outline"
|
||||
render={
|
||||
<a
|
||||
href={resolveUrl(asset)}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
/>
|
||||
}
|
||||
>
|
||||
<ExternalLinkIcon />
|
||||
{t(mediaMessages.viewOriginal)}
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
variant="destructive"
|
||||
disabled={deletePending}
|
||||
onClick={() => onDelete(asset)}
|
||||
>
|
||||
<Trash2Icon />
|
||||
{t(mediaMessages.delete)}
|
||||
</Button>
|
||||
</div>
|
||||
</DialogFooter>
|
||||
</>
|
||||
)}
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
|
||||
function MediaMetadata({
|
||||
label,
|
||||
value,
|
||||
}: {
|
||||
label: string
|
||||
value: React.ReactNode
|
||||
}) {
|
||||
return (
|
||||
<div className="min-w-0">
|
||||
<dt className="text-xs text-muted-foreground">{label}</dt>
|
||||
<dd className={cn("mt-1 font-medium wrap-break-word tabular-nums")}>
|
||||
{value}
|
||||
</dd>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,102 @@
|
||||
import { CheckIcon, FilmIcon, HeartIcon } from "lucide-react"
|
||||
import { useTranslate } from "@workspace/i18n"
|
||||
import { cn } from "@workspace/ui/lib/utils"
|
||||
|
||||
import { mediaMessages } from "./messages"
|
||||
import type { MediaAsset } from "./types"
|
||||
|
||||
export interface MediaGridProps {
|
||||
activeId?: MediaAsset["id"]
|
||||
assets: readonly MediaAsset[]
|
||||
resolveUrl: (asset: MediaAsset) => string
|
||||
selectedIds: ReadonlySet<MediaAsset["id"]>
|
||||
onActivate: (asset: MediaAsset) => void
|
||||
onDetails: (asset: MediaAsset) => void
|
||||
onToggle?: (asset: MediaAsset) => void
|
||||
}
|
||||
|
||||
export function MediaGrid({
|
||||
activeId,
|
||||
assets,
|
||||
resolveUrl,
|
||||
selectedIds,
|
||||
onActivate,
|
||||
onDetails,
|
||||
onToggle,
|
||||
}: MediaGridProps) {
|
||||
const t = useTranslate()
|
||||
|
||||
return (
|
||||
<div className="columns-2 gap-3 p-3 sm:columns-3 lg:columns-4 2xl:columns-5">
|
||||
{assets.map((asset) => {
|
||||
const selected = selectedIds.has(asset.id)
|
||||
const active = activeId === asset.id
|
||||
|
||||
return (
|
||||
<button
|
||||
key={asset.id}
|
||||
type="button"
|
||||
data-media-id={asset.id}
|
||||
aria-label={`${t(mediaMessages.select)} ${asset.name}`}
|
||||
aria-pressed={selected}
|
||||
onClick={() => {
|
||||
onActivate(asset)
|
||||
onToggle?.(asset)
|
||||
}}
|
||||
onDoubleClick={() => onDetails(asset)}
|
||||
className={cn(
|
||||
"group relative mb-3 block w-full break-inside-avoid overflow-hidden rounded-lg bg-muted text-left ring-offset-2 ring-offset-background transition-shadow outline-none focus-visible:ring-3 focus-visible:ring-ring",
|
||||
(active || selected) && "ring-2 ring-primary"
|
||||
)}
|
||||
>
|
||||
{asset.kind === "image" ? (
|
||||
<img
|
||||
src={resolveUrl(asset)}
|
||||
alt={asset.name}
|
||||
loading="lazy"
|
||||
className="block min-h-24 w-full bg-muted object-cover"
|
||||
style={
|
||||
asset.width && asset.height
|
||||
? { aspectRatio: `${asset.width} / ${asset.height}` }
|
||||
: undefined
|
||||
}
|
||||
/>
|
||||
) : (
|
||||
<div
|
||||
className="relative aspect-video min-h-28 bg-black"
|
||||
style={
|
||||
asset.width && asset.height
|
||||
? { aspectRatio: `${asset.width} / ${asset.height}` }
|
||||
: undefined
|
||||
}
|
||||
>
|
||||
<video
|
||||
src={resolveUrl(asset)}
|
||||
muted
|
||||
preload="metadata"
|
||||
className="size-full object-cover"
|
||||
/>
|
||||
<span className="absolute inset-0 grid place-items-center bg-black/10">
|
||||
<FilmIcon className="size-8 text-white drop-shadow-md" />
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<span className="absolute inset-x-0 bottom-0 flex items-end justify-between gap-2 bg-linear-to-t from-black/75 to-transparent px-2 pt-8 pb-2 text-white opacity-0 transition-opacity group-hover:opacity-100 group-focus-visible:opacity-100">
|
||||
<span className="min-w-0 truncate text-xs">{asset.name}</span>
|
||||
{asset.favorite && (
|
||||
<HeartIcon className="size-3.5 shrink-0 fill-current" />
|
||||
)}
|
||||
</span>
|
||||
|
||||
{selected && (
|
||||
<span className="absolute top-2 right-2 grid size-6 place-items-center rounded-full bg-primary text-primary-foreground shadow">
|
||||
<CheckIcon className="size-4" strokeWidth={3} />
|
||||
</span>
|
||||
)}
|
||||
</button>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,828 @@
|
||||
import * as React from "react"
|
||||
import {
|
||||
ChevronDownIcon,
|
||||
CloudIcon,
|
||||
CloudUploadIcon,
|
||||
FolderPlusIcon,
|
||||
LoaderCircleIcon,
|
||||
SearchIcon,
|
||||
UploadIcon,
|
||||
} from "lucide-react"
|
||||
import { useTranslate } from "@workspace/i18n"
|
||||
import {
|
||||
AlertDialog,
|
||||
AlertDialogAction,
|
||||
AlertDialogCancel,
|
||||
AlertDialogContent,
|
||||
AlertDialogDescription,
|
||||
AlertDialogFooter,
|
||||
AlertDialogHeader,
|
||||
AlertDialogTitle,
|
||||
} from "@workspace/ui/components/alert-dialog"
|
||||
import { Button } from "@workspace/ui/components/button"
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuGroup,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuLabel,
|
||||
DropdownMenuTrigger,
|
||||
} from "@workspace/ui/components/dropdown-menu"
|
||||
import {
|
||||
Empty,
|
||||
EmptyContent,
|
||||
EmptyDescription,
|
||||
EmptyMedia,
|
||||
EmptyTitle,
|
||||
} from "@workspace/ui/components/empty"
|
||||
import { Input } from "@workspace/ui/components/input"
|
||||
import { ScrollArea } from "@workspace/ui/components/scroll-area"
|
||||
import { cn } from "@workspace/ui/lib/utils"
|
||||
|
||||
import { useMedia } from "./context"
|
||||
import { MediaContextMenu } from "./media-context-menu"
|
||||
import { MediaDetailDialog } from "./media-detail"
|
||||
import { MediaFolderDialog } from "./folder-dialog"
|
||||
import { MediaGrid } from "./media-grid"
|
||||
import { mediaMessages } from "./messages"
|
||||
import { MediaFilterTabs, MediaSidebar } from "./sidebar"
|
||||
import type {
|
||||
MediaAsset,
|
||||
MediaFilter,
|
||||
MediaFolder,
|
||||
MediaFolderSelection,
|
||||
MediaId,
|
||||
MediaKind,
|
||||
MediaSelectionMode,
|
||||
MediaStorageTarget,
|
||||
} from "./types"
|
||||
import {
|
||||
defaultMediaReference,
|
||||
getMediaFolderPath,
|
||||
isMediaFile,
|
||||
mediaKindForFile,
|
||||
MEDIA_ACCEPT,
|
||||
splitMediaName,
|
||||
} from "./utils"
|
||||
|
||||
const PAGE_SIZE = 40
|
||||
const EMPTY_ASSETS: readonly MediaAsset[] = []
|
||||
const EMPTY_FOLDERS: readonly MediaFolder[] = []
|
||||
const DEFAULT_STORAGE_TARGET: MediaStorageTarget = {
|
||||
id: "local",
|
||||
kind: "local",
|
||||
label: "Local storage",
|
||||
}
|
||||
|
||||
type FolderDialogState =
|
||||
| { mode: "create"; parentId: MediaId | null }
|
||||
| { folder: MediaFolder; mode: "rename" }
|
||||
|
||||
export interface MediaLibraryProps extends Omit<
|
||||
React.ComponentProps<"section">,
|
||||
"onChange"
|
||||
> {
|
||||
allowedKinds?: readonly MediaKind[]
|
||||
footer?: React.ReactNode
|
||||
selectedAssets?: readonly MediaAsset[]
|
||||
selectionMode?: MediaSelectionMode
|
||||
onSelectionChange?: (assets: readonly MediaAsset[]) => void
|
||||
}
|
||||
|
||||
export function MediaLibrary({
|
||||
allowedKinds,
|
||||
className,
|
||||
footer,
|
||||
selectedAssets = EMPTY_ASSETS,
|
||||
selectionMode = "none",
|
||||
onSelectionChange,
|
||||
...props
|
||||
}: MediaLibraryProps) {
|
||||
const { adapter, notify } = useMedia()
|
||||
const t = useTranslate()
|
||||
const inputRef = React.useRef<HTMLInputElement>(null)
|
||||
const uploadTargetRef = React.useRef(DEFAULT_STORAGE_TARGET)
|
||||
const assetRequestId = React.useRef(0)
|
||||
const foldersRequestId = React.useRef(0)
|
||||
const targetsRequestId = React.useRef(0)
|
||||
const [filter, setFilter] = React.useState<MediaFilter>(
|
||||
allowedKinds?.length === 1 ? allowedKinds[0] : "all"
|
||||
)
|
||||
const [folder, setFolder] = React.useState<MediaFolderSelection>()
|
||||
const [keyword, setKeyword] = React.useState("")
|
||||
const deferredKeyword = React.useDeferredValue(keyword.trim())
|
||||
const [assets, setAssets] = React.useState<readonly MediaAsset[]>([])
|
||||
const [assetPage, setAssetPage] = React.useState(1)
|
||||
const [hasNextPage, setHasNextPage] = React.useState(false)
|
||||
const [assetError, setAssetError] = React.useState<Error>()
|
||||
const [isLoadingAssets, setIsLoadingAssets] = React.useState(true)
|
||||
const [isLoadingMore, setIsLoadingMore] = React.useState(false)
|
||||
const [folders, setFolders] = React.useState<readonly MediaFolder[]>([])
|
||||
const [storageTargets, setStorageTargets] = React.useState<
|
||||
readonly MediaStorageTarget[]
|
||||
>([DEFAULT_STORAGE_TARGET])
|
||||
const [activeAsset, setActiveAsset] = React.useState<MediaAsset>()
|
||||
const [contextAsset, setContextAsset] = React.useState<MediaAsset>()
|
||||
const [detailOpen, setDetailOpen] = React.useState(false)
|
||||
const [deleteTarget, setDeleteTarget] = React.useState<MediaAsset>()
|
||||
const [folderDeleteTarget, setFolderDeleteTarget] =
|
||||
React.useState<MediaFolder>()
|
||||
const [renameTarget, setRenameTarget] = React.useState<MediaAsset>()
|
||||
const [folderDialog, setFolderDialog] = React.useState<FolderDialogState>()
|
||||
const [pendingOperation, setPendingOperation] = React.useState<string>()
|
||||
|
||||
const allowedKindsKey = allowedKinds?.join(",") ?? ""
|
||||
const selectedIds = React.useMemo(
|
||||
() => new Set(selectedAssets.map((asset) => asset.id)),
|
||||
[selectedAssets]
|
||||
)
|
||||
const resolveUrl = React.useCallback(
|
||||
(asset: MediaAsset) => adapter.resolveUrl?.(asset) ?? asset.url,
|
||||
[adapter]
|
||||
)
|
||||
|
||||
React.useEffect(() => {
|
||||
if (
|
||||
(filter === "image" || filter === "video") &&
|
||||
allowedKinds &&
|
||||
!allowedKinds.includes(filter)
|
||||
) {
|
||||
setFilter(allowedKinds.length === 1 ? allowedKinds[0] : "all")
|
||||
}
|
||||
}, [allowedKinds, allowedKindsKey, filter])
|
||||
|
||||
const reportError = React.useCallback(
|
||||
(error: unknown, fallback: string) => {
|
||||
const message =
|
||||
error instanceof Error && error.message ? error.message : fallback
|
||||
notify?.({ message, tone: "error" })
|
||||
},
|
||||
[notify]
|
||||
)
|
||||
|
||||
const refreshFolders = React.useCallback(async () => {
|
||||
const requestId = foldersRequestId.current + 1
|
||||
foldersRequestId.current = requestId
|
||||
try {
|
||||
const nextFolders = await adapter.listFolders()
|
||||
if (foldersRequestId.current === requestId) setFolders(nextFolders)
|
||||
} catch (error) {
|
||||
if (foldersRequestId.current === requestId) {
|
||||
reportError(error, t(mediaMessages.loadError))
|
||||
}
|
||||
}
|
||||
}, [adapter, reportError, t])
|
||||
|
||||
const refreshStorageTargets = React.useCallback(async () => {
|
||||
if (!adapter.listStorageTargets) return
|
||||
const requestId = targetsRequestId.current + 1
|
||||
targetsRequestId.current = requestId
|
||||
try {
|
||||
const targets = await adapter.listStorageTargets()
|
||||
if (targetsRequestId.current === requestId) {
|
||||
setStorageTargets(targets.length ? targets : [DEFAULT_STORAGE_TARGET])
|
||||
}
|
||||
} catch (error) {
|
||||
if (targetsRequestId.current === requestId) {
|
||||
reportError(error, t(mediaMessages.loadError))
|
||||
}
|
||||
}
|
||||
}, [adapter, reportError, t])
|
||||
|
||||
const refreshAssets = React.useCallback(async () => {
|
||||
const requestId = assetRequestId.current + 1
|
||||
assetRequestId.current = requestId
|
||||
setIsLoadingAssets(true)
|
||||
setAssetError(undefined)
|
||||
try {
|
||||
const page = await adapter.listAssets({
|
||||
allowedKinds,
|
||||
filter,
|
||||
folder,
|
||||
keyword: deferredKeyword,
|
||||
page: 1,
|
||||
pageSize: PAGE_SIZE,
|
||||
})
|
||||
if (assetRequestId.current !== requestId) return
|
||||
setAssets(page.assets)
|
||||
setAssetPage(1)
|
||||
setHasNextPage(page.hasNextPage)
|
||||
} catch (error) {
|
||||
if (assetRequestId.current !== requestId) return
|
||||
setAssets([])
|
||||
setAssetError(
|
||||
error instanceof Error ? error : new Error(t(mediaMessages.loadError))
|
||||
)
|
||||
} finally {
|
||||
if (assetRequestId.current === requestId) setIsLoadingAssets(false)
|
||||
}
|
||||
}, [
|
||||
adapter,
|
||||
allowedKinds,
|
||||
allowedKindsKey,
|
||||
deferredKeyword,
|
||||
filter,
|
||||
folder,
|
||||
t,
|
||||
])
|
||||
|
||||
React.useEffect(() => {
|
||||
void refreshFolders()
|
||||
void refreshStorageTargets()
|
||||
}, [refreshFolders, refreshStorageTargets])
|
||||
|
||||
React.useEffect(() => {
|
||||
void refreshAssets()
|
||||
}, [refreshAssets])
|
||||
|
||||
const loadMore = async () => {
|
||||
if (isLoadingMore || !hasNextPage) return
|
||||
const nextPage = assetPage + 1
|
||||
setIsLoadingMore(true)
|
||||
try {
|
||||
const page = await adapter.listAssets({
|
||||
allowedKinds,
|
||||
filter,
|
||||
folder,
|
||||
keyword: deferredKeyword,
|
||||
page: nextPage,
|
||||
pageSize: PAGE_SIZE,
|
||||
})
|
||||
setAssets((current) => [...current, ...page.assets])
|
||||
setAssetPage(nextPage)
|
||||
setHasNextPage(page.hasNextPage)
|
||||
} catch (error) {
|
||||
reportError(error, t(mediaMessages.loadError))
|
||||
} finally {
|
||||
setIsLoadingMore(false)
|
||||
}
|
||||
}
|
||||
|
||||
const runOperation = async <Value,>(
|
||||
name: string,
|
||||
operation: () => Promise<Value>,
|
||||
onSuccess?: (value: Value) => void
|
||||
): Promise<{ ok: false } | { ok: true; value: Value }> => {
|
||||
setPendingOperation(name)
|
||||
try {
|
||||
const value = await operation()
|
||||
onSuccess?.(value)
|
||||
return { ok: true, value }
|
||||
} catch (error) {
|
||||
reportError(error, t(mediaMessages.loadError))
|
||||
return { ok: false }
|
||||
} finally {
|
||||
setPendingOperation(undefined)
|
||||
}
|
||||
}
|
||||
|
||||
const requestUpload = (target: MediaStorageTarget) => {
|
||||
uploadTargetRef.current = target
|
||||
inputRef.current?.click()
|
||||
}
|
||||
|
||||
const uploadFiles = async (files: readonly File[]) => {
|
||||
const acceptedFiles = files.filter(isMediaFile)
|
||||
if (!acceptedFiles.length) {
|
||||
reportError(
|
||||
new Error(t(mediaMessages.uploadError)),
|
||||
t(mediaMessages.uploadError)
|
||||
)
|
||||
return
|
||||
}
|
||||
if (
|
||||
allowedKinds &&
|
||||
acceptedFiles.some((file) => {
|
||||
const kind = mediaKindForFile(file)
|
||||
return !kind || !allowedKinds.includes(kind)
|
||||
})
|
||||
) {
|
||||
reportError(
|
||||
new Error(t(mediaMessages.uploadError)),
|
||||
t(mediaMessages.uploadError)
|
||||
)
|
||||
return
|
||||
}
|
||||
|
||||
const uploaded = await runOperation(
|
||||
"upload",
|
||||
() =>
|
||||
adapter.upload({
|
||||
files: acceptedFiles,
|
||||
folderId:
|
||||
folder !== "unclassified" &&
|
||||
(typeof folder === "string" || typeof folder === "number")
|
||||
? folder
|
||||
: undefined,
|
||||
target: uploadTargetRef.current,
|
||||
}),
|
||||
(nextAssets) => setActiveAsset(nextAssets[0])
|
||||
)
|
||||
if (!uploaded.ok) return
|
||||
notify?.({
|
||||
message: t(mediaMessages.uploadSuccess, {
|
||||
count: uploaded.value.length,
|
||||
}),
|
||||
tone: "success",
|
||||
})
|
||||
await Promise.all([refreshAssets(), refreshFolders()])
|
||||
}
|
||||
|
||||
const toggleSelection = (asset: MediaAsset) => {
|
||||
if (selectionMode === "none") return
|
||||
if (selectionMode === "single") {
|
||||
onSelectionChange?.(selectedIds.has(asset.id) ? [] : [asset])
|
||||
return
|
||||
}
|
||||
onSelectionChange?.(
|
||||
selectedIds.has(asset.id)
|
||||
? selectedAssets.filter((item) => item.id !== asset.id)
|
||||
: [...selectedAssets, asset]
|
||||
)
|
||||
}
|
||||
|
||||
const updateFavorite = async (asset: MediaAsset) => {
|
||||
const updated = await runOperation("favorite", () =>
|
||||
adapter.updateFavorite(asset.id, !asset.favorite)
|
||||
)
|
||||
if (!updated.ok) return
|
||||
setActiveAsset((current) =>
|
||||
current?.id === updated.value.id ? updated.value : current
|
||||
)
|
||||
setContextAsset(updated.value)
|
||||
onSelectionChange?.(
|
||||
selectedAssets.map((item) =>
|
||||
item.id === updated.value.id ? updated.value : item
|
||||
)
|
||||
)
|
||||
await refreshAssets()
|
||||
}
|
||||
|
||||
const moveAsset = async (asset: MediaAsset, folderId: MediaId | null) => {
|
||||
const updated = await runOperation("move", () =>
|
||||
adapter.moveAsset(asset.id, folderId)
|
||||
)
|
||||
if (!updated.ok) return
|
||||
setActiveAsset((current) =>
|
||||
current?.id === updated.value.id ? updated.value : current
|
||||
)
|
||||
setContextAsset(updated.value)
|
||||
onSelectionChange?.(
|
||||
selectedAssets.map((item) =>
|
||||
item.id === updated.value.id ? updated.value : item
|
||||
)
|
||||
)
|
||||
await Promise.all([refreshAssets(), refreshFolders()])
|
||||
}
|
||||
|
||||
const saveFolder = async (name: string) => {
|
||||
if (!folderDialog) return
|
||||
const saved = await runOperation("folder", () =>
|
||||
folderDialog.mode === "create"
|
||||
? adapter.createFolder({ name, parentId: folderDialog.parentId })
|
||||
: adapter.updateFolder({
|
||||
id: folderDialog.folder.id,
|
||||
name,
|
||||
parentId: folderDialog.folder.parentId,
|
||||
})
|
||||
)
|
||||
if (!saved.ok) return
|
||||
if (folderDialog.mode === "create") {
|
||||
setFilter("all")
|
||||
setFolder(saved.value.id)
|
||||
}
|
||||
setFolderDialog(undefined)
|
||||
await Promise.all([refreshAssets(), refreshFolders()])
|
||||
}
|
||||
|
||||
const saveRename = async (baseName: string) => {
|
||||
if (!renameTarget) return
|
||||
const { extension } = splitMediaName(renameTarget.name)
|
||||
const updated = await runOperation("rename", () =>
|
||||
adapter.renameAsset(renameTarget.id, `${baseName}${extension}`)
|
||||
)
|
||||
if (!updated.ok) return
|
||||
setActiveAsset((current) =>
|
||||
current?.id === updated.value.id ? updated.value : current
|
||||
)
|
||||
setContextAsset(updated.value)
|
||||
setRenameTarget(undefined)
|
||||
await refreshAssets()
|
||||
}
|
||||
|
||||
const deleteAsset = async () => {
|
||||
if (!deleteTarget) return
|
||||
const deleted = deleteTarget
|
||||
const result = await runOperation("deleteAsset", () =>
|
||||
adapter.deleteAsset(deleted.id)
|
||||
)
|
||||
if (!result.ok) return
|
||||
if (activeAsset?.id === deleted.id) {
|
||||
setActiveAsset(undefined)
|
||||
setDetailOpen(false)
|
||||
}
|
||||
if (selectedIds.has(deleted.id)) {
|
||||
onSelectionChange?.(
|
||||
selectedAssets.filter((asset) => asset.id !== deleted.id)
|
||||
)
|
||||
}
|
||||
setDeleteTarget(undefined)
|
||||
await Promise.all([refreshAssets(), refreshFolders()])
|
||||
}
|
||||
|
||||
const deleteFolder = async () => {
|
||||
if (!folderDeleteTarget) return
|
||||
const deleted = folderDeleteTarget
|
||||
const result = await runOperation("deleteFolder", () =>
|
||||
adapter.deleteFolder(deleted.id)
|
||||
)
|
||||
if (!result.ok) return
|
||||
if (folder === deleted.id) setFolder("unclassified")
|
||||
setFolderDeleteTarget(undefined)
|
||||
await Promise.all([refreshAssets(), refreshFolders()])
|
||||
}
|
||||
|
||||
const showFilter = (nextFilter: MediaFilter) => {
|
||||
setFilter(nextFilter)
|
||||
setFolder(undefined)
|
||||
}
|
||||
const showFolder = (nextFolder: MediaFolderSelection) => {
|
||||
setFolder(nextFolder)
|
||||
setFilter("all")
|
||||
}
|
||||
const showDetails = (asset: MediaAsset) => {
|
||||
setActiveAsset(asset)
|
||||
setDetailOpen(true)
|
||||
}
|
||||
const selectContextAsset = (event: React.MouseEvent<HTMLElement>) => {
|
||||
const target =
|
||||
event.target instanceof Element
|
||||
? event.target.closest<HTMLElement>("[data-media-id]")
|
||||
: null
|
||||
const asset = assets.find(
|
||||
(item) => String(item.id) === target?.dataset.mediaId
|
||||
)
|
||||
setContextAsset(asset)
|
||||
if (asset) setActiveAsset(asset)
|
||||
}
|
||||
|
||||
const currentFolder =
|
||||
typeof folder === "string" || typeof folder === "number"
|
||||
? folders.find((item) => item.id === folder)
|
||||
: undefined
|
||||
const searchPlaceholder = currentFolder
|
||||
? `${t(mediaMessages.search)}: ${getMediaFolderPath(currentFolder, folders)}`
|
||||
: t(mediaMessages.search)
|
||||
const localTarget =
|
||||
storageTargets.find((target) => target.kind === "local") ??
|
||||
DEFAULT_STORAGE_TARGET
|
||||
const cloudTargets = storageTargets.filter(
|
||||
(target) => target.kind === "cloud"
|
||||
)
|
||||
const renameName = splitMediaName(renameTarget?.name ?? "")
|
||||
const isUploading = pendingOperation === "upload"
|
||||
|
||||
return (
|
||||
<>
|
||||
<section
|
||||
className={cn(
|
||||
"grid min-h-0 overflow-hidden rounded-lg border bg-background md:grid-cols-[14rem_minmax(0,1fr)]",
|
||||
footer && "grid-rows-[minmax(0,1fr)_auto]",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<MediaSidebar
|
||||
filter={filter}
|
||||
folder={folder}
|
||||
folders={folders}
|
||||
allowedKinds={allowedKinds}
|
||||
onFilterChange={showFilter}
|
||||
onFolderChange={showFolder}
|
||||
onCreateFolder={(parentId) =>
|
||||
setFolderDialog({ mode: "create", parentId })
|
||||
}
|
||||
onRenameFolder={(item) =>
|
||||
setFolderDialog({ folder: item, mode: "rename" })
|
||||
}
|
||||
onDeleteFolder={setFolderDeleteTarget}
|
||||
className="hidden min-h-0 md:flex"
|
||||
/>
|
||||
<main className="flex min-h-0 min-w-0 flex-col">
|
||||
<div className="flex min-h-14 items-center gap-2 border-b p-2">
|
||||
<label className="relative min-w-0 flex-1">
|
||||
<SearchIcon className="pointer-events-none absolute start-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
|
||||
<Input
|
||||
value={keyword}
|
||||
placeholder={searchPlaceholder}
|
||||
className="ps-9"
|
||||
onChange={(event) => setKeyword(event.target.value)}
|
||||
/>
|
||||
</label>
|
||||
<Button
|
||||
type="button"
|
||||
size="icon"
|
||||
variant="outline"
|
||||
className="md:hidden"
|
||||
aria-label={t(mediaMessages.createFolder)}
|
||||
onClick={() =>
|
||||
setFolderDialog({ mode: "create", parentId: null })
|
||||
}
|
||||
>
|
||||
<FolderPlusIcon />
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
disabled={isUploading}
|
||||
onClick={() => requestUpload(localTarget)}
|
||||
>
|
||||
{isUploading && uploadTargetRef.current.id === localTarget.id ? (
|
||||
<LoaderCircleIcon className="animate-spin" />
|
||||
) : (
|
||||
<UploadIcon />
|
||||
)}
|
||||
<span className="hidden sm:inline">
|
||||
{t(mediaMessages.serverUpload)}
|
||||
</span>
|
||||
</Button>
|
||||
{cloudTargets.length === 1 && (
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
disabled={isUploading}
|
||||
onClick={() => requestUpload(cloudTargets[0])}
|
||||
>
|
||||
<CloudUploadIcon />
|
||||
<span className="hidden sm:inline">
|
||||
{t(mediaMessages.cloudUpload)}
|
||||
</span>
|
||||
</Button>
|
||||
)}
|
||||
{cloudTargets.length > 1 && (
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger
|
||||
render={
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
disabled={isUploading}
|
||||
/>
|
||||
}
|
||||
>
|
||||
{isUploading && uploadTargetRef.current.kind === "cloud" ? (
|
||||
<LoaderCircleIcon className="animate-spin" />
|
||||
) : (
|
||||
<CloudUploadIcon />
|
||||
)}
|
||||
<span className="hidden sm:inline">
|
||||
{t(mediaMessages.cloudUpload)}
|
||||
</span>
|
||||
<ChevronDownIcon data-icon="inline-end" />
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuGroup>
|
||||
<DropdownMenuLabel>
|
||||
{t(mediaMessages.chooseStorage)}
|
||||
</DropdownMenuLabel>
|
||||
{cloudTargets.map((target) => (
|
||||
<DropdownMenuItem
|
||||
key={target.id}
|
||||
onClick={() => requestUpload(target)}
|
||||
>
|
||||
<CloudIcon />
|
||||
{target.label}
|
||||
</DropdownMenuItem>
|
||||
))}
|
||||
</DropdownMenuGroup>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
)}
|
||||
<input
|
||||
ref={inputRef}
|
||||
type="file"
|
||||
multiple
|
||||
accept={
|
||||
allowedKinds?.length === 1 && allowedKinds[0] === "image"
|
||||
? "image/*"
|
||||
: MEDIA_ACCEPT
|
||||
}
|
||||
className="sr-only"
|
||||
onChange={(event) => {
|
||||
const files = Array.from(event.target.files ?? [])
|
||||
if (files.length) void uploadFiles(files)
|
||||
event.target.value = ""
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<MediaFilterTabs
|
||||
filter={filter}
|
||||
folder={folder}
|
||||
folders={folders}
|
||||
allowedKinds={allowedKinds}
|
||||
onFilterChange={showFilter}
|
||||
onFolderChange={showFolder}
|
||||
/>
|
||||
<ScrollArea className="min-h-0 flex-1">
|
||||
<MediaContextMenu
|
||||
asset={contextAsset}
|
||||
folders={folders}
|
||||
storageTargets={storageTargets}
|
||||
onUpload={requestUpload}
|
||||
onDetails={showDetails}
|
||||
onFavorite={(asset) => void updateFavorite(asset)}
|
||||
onRename={setRenameTarget}
|
||||
onMove={(asset, folderId) => void moveAsset(asset, folderId)}
|
||||
onDelete={setDeleteTarget}
|
||||
>
|
||||
<div
|
||||
className="min-h-full"
|
||||
onContextMenuCapture={selectContextAsset}
|
||||
>
|
||||
{isLoadingAssets ? (
|
||||
<MediaEmpty
|
||||
icon={<LoaderCircleIcon className="animate-spin" />}
|
||||
title={t(mediaMessages.loading)}
|
||||
/>
|
||||
) : assetError ? (
|
||||
<MediaEmpty
|
||||
description={assetError.message}
|
||||
title={t(mediaMessages.loadError)}
|
||||
action={
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => void refreshAssets()}
|
||||
>
|
||||
{t(mediaMessages.retry)}
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
) : assets.length ? (
|
||||
<>
|
||||
<MediaGrid
|
||||
assets={assets}
|
||||
activeId={activeAsset?.id}
|
||||
selectedIds={selectedIds}
|
||||
resolveUrl={resolveUrl}
|
||||
onActivate={setActiveAsset}
|
||||
onToggle={
|
||||
selectionMode === "none" ? undefined : toggleSelection
|
||||
}
|
||||
onDetails={showDetails}
|
||||
/>
|
||||
{hasNextPage && (
|
||||
<div className="flex justify-center p-4 pt-1">
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
disabled={isLoadingMore}
|
||||
onClick={() => void loadMore()}
|
||||
>
|
||||
{isLoadingMore && (
|
||||
<LoaderCircleIcon className="animate-spin" />
|
||||
)}
|
||||
{t(mediaMessages.loadMore)}
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<MediaEmpty
|
||||
icon={<UploadIcon />}
|
||||
title={t(mediaMessages.emptyTitle)}
|
||||
description={
|
||||
deferredKeyword
|
||||
? t(mediaMessages.emptySearchDescription)
|
||||
: t(mediaMessages.emptyDescription)
|
||||
}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</MediaContextMenu>
|
||||
</ScrollArea>
|
||||
</main>
|
||||
{footer && (
|
||||
<footer className="col-span-full border-t bg-background p-3">
|
||||
{footer}
|
||||
</footer>
|
||||
)}
|
||||
</section>
|
||||
|
||||
<MediaDetailDialog
|
||||
asset={activeAsset}
|
||||
open={detailOpen}
|
||||
resolveUrl={resolveUrl}
|
||||
favoritePending={pendingOperation === "favorite"}
|
||||
deletePending={pendingOperation === "deleteAsset"}
|
||||
onOpenChange={setDetailOpen}
|
||||
onFavorite={(asset) => void updateFavorite(asset)}
|
||||
onDelete={setDeleteTarget}
|
||||
/>
|
||||
<MediaFolderDialog
|
||||
open={Boolean(renameTarget)}
|
||||
title={t(mediaMessages.renameMedia)}
|
||||
description={t(mediaMessages.renameMediaDescription)}
|
||||
initialName={renameName.baseName}
|
||||
maxLength={255 - renameName.extension.length}
|
||||
lockedSuffix={renameName.extension}
|
||||
pending={pendingOperation === "rename"}
|
||||
onOpenChange={(open) => !open && setRenameTarget(undefined)}
|
||||
onSubmit={(name) => void saveRename(name)}
|
||||
/>
|
||||
<MediaFolderDialog
|
||||
open={Boolean(folderDialog)}
|
||||
title={t(
|
||||
folderDialog?.mode === "rename"
|
||||
? mediaMessages.renameFolder
|
||||
: mediaMessages.createFolder
|
||||
)}
|
||||
description={t(mediaMessages.folderOnlyClassifies)}
|
||||
initialName={
|
||||
folderDialog?.mode === "rename" ? folderDialog.folder.name : ""
|
||||
}
|
||||
pending={pendingOperation === "folder"}
|
||||
onOpenChange={(open) => !open && setFolderDialog(undefined)}
|
||||
onSubmit={(name) => void saveFolder(name)}
|
||||
/>
|
||||
<MediaConfirmDialog
|
||||
open={Boolean(deleteTarget)}
|
||||
pending={pendingOperation === "deleteAsset"}
|
||||
title={t(mediaMessages.deleteAssetTitle)}
|
||||
description={t(mediaMessages.deleteAssetDescription)}
|
||||
onOpenChange={(open) => !open && setDeleteTarget(undefined)}
|
||||
onConfirm={() => void deleteAsset()}
|
||||
/>
|
||||
<MediaConfirmDialog
|
||||
open={Boolean(folderDeleteTarget)}
|
||||
pending={pendingOperation === "deleteFolder"}
|
||||
title={t(mediaMessages.deleteFolderTitle)}
|
||||
description={t(mediaMessages.deleteFolderDescription)}
|
||||
onOpenChange={(open) => !open && setFolderDeleteTarget(undefined)}
|
||||
onConfirm={() => void deleteFolder()}
|
||||
/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
function MediaEmpty({
|
||||
action,
|
||||
description,
|
||||
icon,
|
||||
title,
|
||||
}: {
|
||||
action?: React.ReactNode
|
||||
description?: string
|
||||
icon?: React.ReactNode
|
||||
title: string
|
||||
}) {
|
||||
return (
|
||||
<Empty className="min-h-72">
|
||||
<EmptyContent>
|
||||
{icon && <EmptyMedia variant="icon">{icon}</EmptyMedia>}
|
||||
<EmptyTitle>{title}</EmptyTitle>
|
||||
{description && <EmptyDescription>{description}</EmptyDescription>}
|
||||
{action}
|
||||
</EmptyContent>
|
||||
</Empty>
|
||||
)
|
||||
}
|
||||
|
||||
function MediaConfirmDialog({
|
||||
description,
|
||||
open,
|
||||
pending,
|
||||
title,
|
||||
onConfirm,
|
||||
onOpenChange,
|
||||
}: {
|
||||
description: string
|
||||
open: boolean
|
||||
pending: boolean
|
||||
title: string
|
||||
onConfirm: VoidFunction
|
||||
onOpenChange: (open: boolean) => void
|
||||
}) {
|
||||
const t = useTranslate()
|
||||
return (
|
||||
<AlertDialog open={open} onOpenChange={onOpenChange}>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>{title}</AlertDialogTitle>
|
||||
<AlertDialogDescription>{description}</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel disabled={pending}>
|
||||
{t(mediaMessages.cancel)}
|
||||
</AlertDialogCancel>
|
||||
<AlertDialogAction
|
||||
variant="destructive"
|
||||
disabled={pending}
|
||||
onClick={onConfirm}
|
||||
>
|
||||
{t(mediaMessages.delete)}
|
||||
</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,101 @@
|
||||
import * as React from "react"
|
||||
import { useTranslate } from "@workspace/i18n"
|
||||
import { Button } from "@workspace/ui/components/button"
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@workspace/ui/components/dialog"
|
||||
|
||||
import { useMedia } from "./context"
|
||||
import { MediaLibrary } from "./media-library"
|
||||
import { mediaMessages } from "./messages"
|
||||
import type { MediaAsset, MediaKind } from "./types"
|
||||
import { defaultMediaReference } from "./utils"
|
||||
|
||||
const EMPTY_SELECTION: readonly MediaAsset[] = []
|
||||
|
||||
export interface MediaPickerDialogProps {
|
||||
allowedKinds?: readonly MediaKind[]
|
||||
initialSelection?: readonly MediaAsset[]
|
||||
multiple?: boolean
|
||||
open: boolean
|
||||
onConfirm: (assets: readonly MediaAsset[]) => void
|
||||
onOpenChange: (open: boolean) => void
|
||||
}
|
||||
|
||||
export function MediaPickerDialog({
|
||||
allowedKinds,
|
||||
initialSelection = EMPTY_SELECTION,
|
||||
multiple = false,
|
||||
open,
|
||||
onConfirm,
|
||||
onOpenChange,
|
||||
}: MediaPickerDialogProps) {
|
||||
const { adapter } = useMedia()
|
||||
const t = useTranslate()
|
||||
const [selected, setSelected] =
|
||||
React.useState<readonly MediaAsset[]>(initialSelection)
|
||||
|
||||
React.useEffect(() => {
|
||||
if (open) setSelected(initialSelection)
|
||||
}, [initialSelection, open])
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent
|
||||
className="flex h-[min(88dvh,54rem)] max-h-[calc(100dvh-2rem)] flex-col gap-3 p-4 sm:max-w-[min(94vw,86rem)]"
|
||||
showCloseButton={false}
|
||||
>
|
||||
<DialogHeader className="sr-only">
|
||||
<DialogTitle>{t(mediaMessages.selectMedia)}</DialogTitle>
|
||||
<DialogDescription>
|
||||
{t(mediaMessages.selectMediaDescription)}
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<MediaLibrary
|
||||
allowedKinds={allowedKinds}
|
||||
selectionMode={multiple ? "multiple" : "single"}
|
||||
selectedAssets={selected}
|
||||
onSelectionChange={setSelected}
|
||||
className="min-h-0 flex-1"
|
||||
footer={
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
<span className="text-sm text-muted-foreground">
|
||||
{t(mediaMessages.selectedCount, { count: selected.length })}
|
||||
</span>
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={() => onOpenChange(false)}
|
||||
>
|
||||
{t(mediaMessages.cancel)}
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
disabled={selected.length === 0}
|
||||
onClick={() => {
|
||||
onConfirm(
|
||||
selected.map((asset) => {
|
||||
const url =
|
||||
adapter.resolveReference?.(asset) ??
|
||||
defaultMediaReference(asset)
|
||||
return url === asset.url ? asset : { ...asset, url }
|
||||
})
|
||||
)
|
||||
onOpenChange(false)
|
||||
}}
|
||||
>
|
||||
{t(mediaMessages.useSelected)}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,158 @@
|
||||
// @vitest-environment jsdom
|
||||
|
||||
import type { ReactNode } from "react"
|
||||
import {
|
||||
cleanup,
|
||||
fireEvent,
|
||||
render,
|
||||
screen,
|
||||
waitFor,
|
||||
} from "@testing-library/react"
|
||||
import { afterEach, describe, expect, it, vi } from "vitest"
|
||||
import { I18nProvider } from "@workspace/i18n"
|
||||
|
||||
import { MediaProvider } from "./context"
|
||||
import { MediaLibrary } from "./media-library"
|
||||
import { MediaPickerDialog } from "./media-picker-dialog"
|
||||
import type { MediaAdapter, MediaAsset } from "./types"
|
||||
import {
|
||||
defaultMediaReference,
|
||||
getMediaFolderPath,
|
||||
splitMediaName,
|
||||
} from "./utils"
|
||||
|
||||
const imageAsset: MediaAsset = {
|
||||
createdAt: "2026-08-01T00:00:00Z",
|
||||
favorite: false,
|
||||
folderId: null,
|
||||
height: 600,
|
||||
id: "image-1",
|
||||
kind: "image",
|
||||
mimeType: "image/png",
|
||||
name: "product.png",
|
||||
sizeBytes: 1024,
|
||||
url: "/media/product.png",
|
||||
width: 800,
|
||||
}
|
||||
|
||||
function createAdapter(): MediaAdapter {
|
||||
return {
|
||||
createFolder: vi.fn(async ({ name, parentId }) => ({
|
||||
id: name,
|
||||
name,
|
||||
parentId,
|
||||
})),
|
||||
deleteAsset: vi.fn(async () => undefined),
|
||||
deleteFolder: vi.fn(async () => undefined),
|
||||
listAssets: vi.fn(async () => ({
|
||||
assets: [imageAsset],
|
||||
hasNextPage: false,
|
||||
})),
|
||||
listFolders: vi.fn(async () => []),
|
||||
listStorageTargets: vi.fn(async () => [
|
||||
{ id: "local", kind: "local" as const, label: "Local" },
|
||||
]),
|
||||
moveAsset: vi.fn(async () => imageAsset),
|
||||
renameAsset: vi.fn(async () => imageAsset),
|
||||
updateFavorite: vi.fn(async () => imageAsset),
|
||||
updateFolder: vi.fn(async ({ id, name, parentId }) => ({
|
||||
id,
|
||||
name,
|
||||
parentId,
|
||||
})),
|
||||
upload: vi.fn(async () => [imageAsset]),
|
||||
}
|
||||
}
|
||||
|
||||
function MediaTestProvider({
|
||||
adapter,
|
||||
children,
|
||||
}: {
|
||||
adapter: MediaAdapter
|
||||
children: ReactNode
|
||||
}) {
|
||||
return (
|
||||
<I18nProvider locale="en">
|
||||
<MediaProvider adapter={adapter}>{children}</MediaProvider>
|
||||
</I18nProvider>
|
||||
)
|
||||
}
|
||||
|
||||
describe("media blocks", () => {
|
||||
afterEach(cleanup)
|
||||
|
||||
it("loads and uploads media only through the provider adapter", async () => {
|
||||
const adapter = createAdapter()
|
||||
const { container } = render(
|
||||
<MediaTestProvider adapter={adapter}>
|
||||
<MediaLibrary />
|
||||
</MediaTestProvider>
|
||||
)
|
||||
|
||||
expect(await screen.findByRole("img", { name: "product.png" })).toBeTruthy()
|
||||
const fileInput =
|
||||
container.querySelector<HTMLInputElement>('input[type="file"]')
|
||||
expect(fileInput).not.toBeNull()
|
||||
|
||||
fireEvent.change(fileInput!, {
|
||||
target: {
|
||||
files: [new File(["image"], "new-image.png", { type: "image/png" })],
|
||||
},
|
||||
})
|
||||
|
||||
await waitFor(() => expect(adapter.upload).toHaveBeenCalledOnce())
|
||||
expect(adapter.upload).toHaveBeenCalledWith(
|
||||
expect.objectContaining({
|
||||
files: expect.arrayContaining([expect.any(File)]),
|
||||
target: expect.objectContaining({ id: "local" }),
|
||||
})
|
||||
)
|
||||
})
|
||||
|
||||
it("returns image picker selections with an intrinsic-size reference URL", async () => {
|
||||
const adapter = createAdapter()
|
||||
const onConfirm = vi.fn()
|
||||
render(
|
||||
<MediaTestProvider adapter={adapter}>
|
||||
<MediaPickerDialog
|
||||
open
|
||||
onOpenChange={() => undefined}
|
||||
onConfirm={onConfirm}
|
||||
/>
|
||||
</MediaTestProvider>
|
||||
)
|
||||
|
||||
const image = await screen.findByRole("img", { name: "product.png" })
|
||||
fireEvent.click(image.closest("button")!)
|
||||
await waitFor(() =>
|
||||
expect(
|
||||
(
|
||||
screen.getByRole("button", {
|
||||
name: "Use selected media",
|
||||
}) as HTMLButtonElement
|
||||
).disabled
|
||||
).toBe(false)
|
||||
)
|
||||
fireEvent.click(screen.getByRole("button", { name: "Use selected media" }))
|
||||
|
||||
expect(onConfirm).toHaveBeenCalledWith([
|
||||
expect.objectContaining({ url: "/media/product.png?w=800&h=600" }),
|
||||
])
|
||||
})
|
||||
|
||||
it("builds stable media references and folder paths", () => {
|
||||
expect(defaultMediaReference(imageAsset)).toBe(
|
||||
"/media/product.png?w=800&h=600"
|
||||
)
|
||||
expect(splitMediaName("archive.tar.gz")).toEqual({
|
||||
baseName: "archive.tar",
|
||||
extension: ".gz",
|
||||
})
|
||||
expect(
|
||||
getMediaFolderPath({ id: "child", name: "Shoes", parentId: "root" }, [
|
||||
{ id: "root", name: "Products", parentId: null },
|
||||
{ id: "child", name: "Shoes", parentId: "root" },
|
||||
])
|
||||
).toBe("Products / Shoes")
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,166 @@
|
||||
import type { MessageDescriptor } from "@workspace/i18n"
|
||||
|
||||
export const mediaMessages = {
|
||||
allMedia: { id: "blocks.media.filters.all", message: "All media" },
|
||||
cancel: { id: "blocks.media.actions.cancel", message: "Cancel" },
|
||||
chooseStorage: {
|
||||
id: "blocks.media.upload.chooseStorage",
|
||||
message: "Choose cloud storage",
|
||||
},
|
||||
cloudUpload: {
|
||||
id: "blocks.media.upload.cloud",
|
||||
message: "Upload to cloud",
|
||||
},
|
||||
copyFailed: {
|
||||
id: "blocks.media.copy.failed",
|
||||
message: "Copy failed. Check browser clipboard permissions.",
|
||||
},
|
||||
copyInformation: {
|
||||
id: "blocks.media.actions.copyInformation",
|
||||
message: "Copy information",
|
||||
},
|
||||
copyLink: { id: "blocks.media.actions.copyLink", message: "Copy link" },
|
||||
copyName: { id: "blocks.media.actions.copyName", message: "Copy name" },
|
||||
createFolder: {
|
||||
id: "blocks.media.folders.create",
|
||||
message: "New folder",
|
||||
},
|
||||
delete: { id: "blocks.media.actions.delete", message: "Delete" },
|
||||
deleteAssetDescription: {
|
||||
id: "blocks.media.deleteAsset.description",
|
||||
message: "This media item will no longer appear in the library.",
|
||||
},
|
||||
deleteAssetTitle: {
|
||||
id: "blocks.media.deleteAsset.title",
|
||||
message: "Delete media",
|
||||
},
|
||||
deleteFolderDescription: {
|
||||
id: "blocks.media.deleteFolder.description",
|
||||
message:
|
||||
"This folder and its child folders will be deleted. Their media items will become unclassified.",
|
||||
},
|
||||
deleteFolderTitle: {
|
||||
id: "blocks.media.deleteFolder.title",
|
||||
message: "Delete folder",
|
||||
},
|
||||
details: { id: "blocks.media.actions.details", message: "View details" },
|
||||
dimensions: { id: "blocks.media.details.dimensions", message: "Dimensions" },
|
||||
emptyDescription: {
|
||||
id: "blocks.media.empty.description",
|
||||
message: "Upload images or videos to manage them here.",
|
||||
},
|
||||
emptySearchDescription: {
|
||||
id: "blocks.media.emptySearch.description",
|
||||
message: "No media files match your search.",
|
||||
},
|
||||
emptyTitle: { id: "blocks.media.empty.title", message: "No media" },
|
||||
favorite: { id: "blocks.media.filters.favorite", message: "Favorites" },
|
||||
favoriteAction: { id: "blocks.media.actions.favorite", message: "Favorite" },
|
||||
fileName: { id: "blocks.media.details.fileName", message: "File name" },
|
||||
folder: { id: "blocks.media.folders.title", message: "Folders" },
|
||||
folderName: {
|
||||
id: "blocks.media.folders.name",
|
||||
message: "Folder name",
|
||||
},
|
||||
folderNamePlaceholder: {
|
||||
id: "blocks.media.folders.placeholder",
|
||||
message: "Enter a folder name",
|
||||
},
|
||||
folderOnlyClassifies: {
|
||||
id: "blocks.media.folders.classification",
|
||||
message:
|
||||
"Folders only organize media in this library and do not change file URLs.",
|
||||
},
|
||||
image: { id: "blocks.media.filters.image", message: "Images" },
|
||||
library: { id: "blocks.media.title", message: "Media library" },
|
||||
loadError: {
|
||||
id: "blocks.media.load.error",
|
||||
message: "Unable to load media",
|
||||
},
|
||||
loadMore: { id: "blocks.media.actions.loadMore", message: "Load more" },
|
||||
loading: { id: "blocks.media.loading", message: "Loading media…" },
|
||||
moveToFolder: {
|
||||
id: "blocks.media.actions.moveToFolder",
|
||||
message: "Move to folder",
|
||||
},
|
||||
newChildFolder: {
|
||||
id: "blocks.media.folders.newChild",
|
||||
message: "New child folder",
|
||||
},
|
||||
noDimensions: { id: "blocks.media.details.noDimensions", message: "Unknown" },
|
||||
noFolders: {
|
||||
id: "blocks.media.folders.empty",
|
||||
message: "No folders yet. Create one.",
|
||||
},
|
||||
rename: { id: "blocks.media.actions.rename", message: "Rename" },
|
||||
renameFolder: {
|
||||
id: "blocks.media.folders.rename",
|
||||
message: "Rename folder",
|
||||
},
|
||||
renameMedia: {
|
||||
id: "blocks.media.renameMedia.title",
|
||||
message: "Rename media",
|
||||
},
|
||||
renameMediaDescription: {
|
||||
id: "blocks.media.renameMedia.description",
|
||||
message:
|
||||
"This changes the display name without changing the file or its URL.",
|
||||
},
|
||||
retry: { id: "blocks.media.actions.retry", message: "Try again" },
|
||||
save: { id: "blocks.media.actions.save", message: "Save" },
|
||||
saving: { id: "blocks.media.actions.saving", message: "Saving…" },
|
||||
search: { id: "blocks.media.search", message: "Search media files" },
|
||||
select: { id: "blocks.media.actions.select", message: "Select" },
|
||||
selectFolder: {
|
||||
id: "blocks.media.actions.selectFolder",
|
||||
message: "Select folder {name}",
|
||||
},
|
||||
selectMedia: {
|
||||
id: "blocks.media.picker.title",
|
||||
message: "Select media",
|
||||
},
|
||||
selectMediaDescription: {
|
||||
id: "blocks.media.picker.description",
|
||||
message: "Choose an uploaded image or video from the media library.",
|
||||
},
|
||||
selectedCount: {
|
||||
id: "blocks.media.picker.selectedCount",
|
||||
message: "{count} selected",
|
||||
},
|
||||
serverUpload: {
|
||||
id: "blocks.media.upload.server",
|
||||
message: "Upload to server",
|
||||
},
|
||||
size: { id: "blocks.media.details.size", message: "Size" },
|
||||
type: { id: "blocks.media.details.type", message: "Type" },
|
||||
uploadedAt: {
|
||||
id: "blocks.media.details.uploadedAt",
|
||||
message: "Uploaded",
|
||||
},
|
||||
unclassified: {
|
||||
id: "blocks.media.filters.unclassified",
|
||||
message: "Unclassified",
|
||||
},
|
||||
unfavorite: {
|
||||
id: "blocks.media.actions.unfavorite",
|
||||
message: "Unfavorite",
|
||||
},
|
||||
upload: { id: "blocks.media.actions.upload", message: "Upload" },
|
||||
uploadError: {
|
||||
id: "blocks.media.upload.error",
|
||||
message: "Unable to upload media.",
|
||||
},
|
||||
uploadSuccess: {
|
||||
id: "blocks.media.upload.success",
|
||||
message: "{count} media files uploaded.",
|
||||
},
|
||||
useSelected: {
|
||||
id: "blocks.media.picker.useSelected",
|
||||
message: "Use selected media",
|
||||
},
|
||||
video: { id: "blocks.media.filters.video", message: "Videos" },
|
||||
viewOriginal: {
|
||||
id: "blocks.media.actions.viewOriginal",
|
||||
message: "View original",
|
||||
},
|
||||
} as const satisfies Record<string, MessageDescriptor>
|
||||
@@ -0,0 +1,399 @@
|
||||
import * as React from "react"
|
||||
import {
|
||||
ChevronRightIcon,
|
||||
FilmIcon,
|
||||
FolderIcon,
|
||||
FolderOpenIcon,
|
||||
HeartIcon,
|
||||
ImagesIcon,
|
||||
LibraryIcon,
|
||||
MoreHorizontalIcon,
|
||||
PencilIcon,
|
||||
PlusIcon,
|
||||
Trash2Icon,
|
||||
UnlinkIcon,
|
||||
} from "lucide-react"
|
||||
import { useTranslate } from "@workspace/i18n"
|
||||
import { Button } from "@workspace/ui/components/button"
|
||||
import {
|
||||
Collapsible,
|
||||
CollapsibleContent,
|
||||
CollapsibleTrigger,
|
||||
} from "@workspace/ui/components/collapsible"
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuTrigger,
|
||||
} from "@workspace/ui/components/dropdown-menu"
|
||||
import { cn } from "@workspace/ui/lib/utils"
|
||||
|
||||
import { mediaMessages } from "./messages"
|
||||
import type {
|
||||
MediaFilter,
|
||||
MediaFolder,
|
||||
MediaFolderSelection,
|
||||
MediaId,
|
||||
MediaKind,
|
||||
} from "./types"
|
||||
import {
|
||||
getChildMediaFolders,
|
||||
getMediaFolderDepth,
|
||||
getMediaFolderPath,
|
||||
} from "./utils"
|
||||
|
||||
const filters = [
|
||||
{ icon: LibraryIcon, message: mediaMessages.allMedia, value: "all" },
|
||||
{ icon: ImagesIcon, message: mediaMessages.image, value: "image" },
|
||||
{ icon: FilmIcon, message: mediaMessages.video, value: "video" },
|
||||
{ icon: HeartIcon, message: mediaMessages.favorite, value: "favorite" },
|
||||
] as const satisfies readonly {
|
||||
icon: React.ComponentType<{ className?: string }>
|
||||
message: (typeof mediaMessages)[keyof typeof mediaMessages]
|
||||
value: MediaFilter
|
||||
}[]
|
||||
|
||||
export interface MediaSidebarProps {
|
||||
allowedKinds?: readonly MediaKind[]
|
||||
className?: string
|
||||
filter: MediaFilter
|
||||
folder: MediaFolderSelection
|
||||
folders: readonly MediaFolder[]
|
||||
onCreateFolder: (parentId: MediaId | null) => void
|
||||
onDeleteFolder: (folder: MediaFolder) => void
|
||||
onFilterChange: (filter: MediaFilter) => void
|
||||
onFolderChange: (folder: MediaFolderSelection) => void
|
||||
onRenameFolder: (folder: MediaFolder) => void
|
||||
}
|
||||
|
||||
function visibleFilters(allowedKinds?: readonly MediaKind[]) {
|
||||
return filters.filter(
|
||||
(filter) =>
|
||||
filter.value === "all" ||
|
||||
filter.value === "favorite" ||
|
||||
!allowedKinds ||
|
||||
allowedKinds.includes(filter.value)
|
||||
)
|
||||
}
|
||||
|
||||
export function MediaSidebar({
|
||||
allowedKinds,
|
||||
className,
|
||||
filter,
|
||||
folder,
|
||||
folders,
|
||||
onCreateFolder,
|
||||
onDeleteFolder,
|
||||
onFilterChange,
|
||||
onFolderChange,
|
||||
onRenameFolder,
|
||||
}: MediaSidebarProps) {
|
||||
const t = useTranslate()
|
||||
const rootFolders = getChildMediaFolders(folders, null)
|
||||
|
||||
return (
|
||||
<aside
|
||||
className={cn(
|
||||
"flex min-h-0 flex-col border-e bg-muted/15 py-3",
|
||||
className
|
||||
)}
|
||||
>
|
||||
<h2 className="px-4 py-2 text-sm font-semibold">
|
||||
{t(mediaMessages.library)}
|
||||
</h2>
|
||||
<nav aria-label={t(mediaMessages.library)} className="px-3">
|
||||
<ul className="space-y-1">
|
||||
{visibleFilters(allowedKinds).map(({ icon, message, value }) => (
|
||||
<li key={value}>
|
||||
<SidebarButton
|
||||
active={folder === undefined && filter === value}
|
||||
icon={icon}
|
||||
label={t(message)}
|
||||
onClick={() => onFilterChange(value)}
|
||||
/>
|
||||
</li>
|
||||
))}
|
||||
<li>
|
||||
<SidebarButton
|
||||
active={folder === "unclassified"}
|
||||
icon={UnlinkIcon}
|
||||
label={t(mediaMessages.unclassified)}
|
||||
onClick={() => onFolderChange("unclassified")}
|
||||
/>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<div className="mt-4 flex min-h-0 flex-1 flex-col border-t pt-3">
|
||||
<div className="flex items-center px-4 py-1">
|
||||
<h3 className="text-xs font-medium text-muted-foreground">
|
||||
{t(mediaMessages.folder)}
|
||||
</h3>
|
||||
<Button
|
||||
type="button"
|
||||
size="icon-xs"
|
||||
variant="ghost"
|
||||
className="ms-auto"
|
||||
aria-label={t(mediaMessages.createFolder)}
|
||||
onClick={() => onCreateFolder(null)}
|
||||
>
|
||||
<PlusIcon />
|
||||
</Button>
|
||||
</div>
|
||||
<nav
|
||||
aria-label={t(mediaMessages.folder)}
|
||||
className="min-h-0 overflow-y-auto px-3"
|
||||
>
|
||||
{rootFolders.length ? (
|
||||
<ul className="space-y-1">
|
||||
{rootFolders.map((rootFolder) => (
|
||||
<FolderItem
|
||||
key={rootFolder.id}
|
||||
folder={rootFolder}
|
||||
folders={folders}
|
||||
depth={0}
|
||||
activeFolder={folder}
|
||||
onSelect={onFolderChange}
|
||||
onCreateFolder={onCreateFolder}
|
||||
onRename={onRenameFolder}
|
||||
onDelete={onDeleteFolder}
|
||||
/>
|
||||
))}
|
||||
</ul>
|
||||
) : (
|
||||
<button
|
||||
type="button"
|
||||
className="w-full px-3 py-4 text-start text-xs text-muted-foreground hover:text-foreground"
|
||||
onClick={() => onCreateFolder(null)}
|
||||
>
|
||||
{t(mediaMessages.noFolders)}
|
||||
</button>
|
||||
)}
|
||||
</nav>
|
||||
</div>
|
||||
</aside>
|
||||
)
|
||||
}
|
||||
|
||||
export function MediaFilterTabs({
|
||||
allowedKinds,
|
||||
filter,
|
||||
folder,
|
||||
folders,
|
||||
onFilterChange,
|
||||
onFolderChange,
|
||||
}: Omit<
|
||||
MediaSidebarProps,
|
||||
"className" | "onCreateFolder" | "onDeleteFolder" | "onRenameFolder"
|
||||
>) {
|
||||
const t = useTranslate()
|
||||
|
||||
return (
|
||||
<div className="flex gap-1 overflow-x-auto border-b p-2 md:hidden">
|
||||
{visibleFilters(allowedKinds).map(({ icon: Icon, message, value }) => (
|
||||
<button
|
||||
key={value}
|
||||
type="button"
|
||||
aria-pressed={folder === undefined && filter === value}
|
||||
onClick={() => onFilterChange(value)}
|
||||
className={cn(
|
||||
"flex h-8 shrink-0 items-center gap-1.5 rounded-lg px-3 text-xs",
|
||||
folder === undefined && filter === value
|
||||
? "bg-primary text-primary-foreground"
|
||||
: "bg-muted"
|
||||
)}
|
||||
>
|
||||
<Icon className="size-3.5" />
|
||||
{t(message)}
|
||||
</button>
|
||||
))}
|
||||
<select
|
||||
aria-label={t(mediaMessages.folder)}
|
||||
className="h-8 max-w-40 rounded-lg border bg-background px-2 text-xs outline-none"
|
||||
value={
|
||||
folder === undefined
|
||||
? ""
|
||||
: folder === "unclassified"
|
||||
? "unclassified"
|
||||
: String(folder)
|
||||
}
|
||||
onChange={(event) => {
|
||||
const next = event.target.value
|
||||
onFolderChange(
|
||||
next === ""
|
||||
? undefined
|
||||
: next === "unclassified"
|
||||
? "unclassified"
|
||||
: (folders.find((item) => String(item.id) === next)?.id ?? next)
|
||||
)
|
||||
}}
|
||||
>
|
||||
<option value="">{t(mediaMessages.allMedia)}</option>
|
||||
<option value="unclassified">{t(mediaMessages.unclassified)}</option>
|
||||
{folders.map((item) => (
|
||||
<option key={item.id} value={item.id}>
|
||||
{" ".repeat(getMediaFolderDepth(item, folders))}
|
||||
{getMediaFolderPath(item, folders)}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function SidebarButton({
|
||||
active,
|
||||
icon: Icon,
|
||||
label,
|
||||
onClick,
|
||||
}: {
|
||||
active: boolean
|
||||
icon: React.ComponentType<{ className?: string }>
|
||||
label: string
|
||||
onClick: VoidFunction
|
||||
}) {
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
aria-pressed={active}
|
||||
onClick={onClick}
|
||||
className={cn(
|
||||
"flex h-9 w-full items-center gap-2 rounded-lg px-3 text-start text-sm transition-colors outline-none hover:bg-muted focus-visible:ring-3 focus-visible:ring-ring/30",
|
||||
active && "bg-primary text-primary-foreground hover:bg-primary"
|
||||
)}
|
||||
>
|
||||
<Icon className="size-4" />
|
||||
{label}
|
||||
</button>
|
||||
)
|
||||
}
|
||||
|
||||
function FolderItem({
|
||||
folder,
|
||||
folders,
|
||||
depth,
|
||||
activeFolder,
|
||||
onSelect,
|
||||
onCreateFolder,
|
||||
onRename,
|
||||
onDelete,
|
||||
}: {
|
||||
folder: MediaFolder
|
||||
folders: readonly MediaFolder[]
|
||||
depth: number
|
||||
activeFolder: MediaFolderSelection
|
||||
onSelect: (folder: MediaFolderSelection) => void
|
||||
onCreateFolder: (parentId: MediaId | null) => void
|
||||
onRename: (folder: MediaFolder) => void
|
||||
onDelete: (folder: MediaFolder) => void
|
||||
}) {
|
||||
const t = useTranslate()
|
||||
const children = getChildMediaFolders(folders, folder.id)
|
||||
const [open, setOpen] = React.useState(true)
|
||||
const hasChildren = children.length > 0
|
||||
const active = activeFolder === folder.id
|
||||
const Folder = active || (hasChildren && open) ? FolderOpenIcon : FolderIcon
|
||||
|
||||
return (
|
||||
<li>
|
||||
<Collapsible open={open} onOpenChange={setOpen}>
|
||||
<div
|
||||
className={cn(
|
||||
"group flex h-9 items-center rounded-lg transition-colors hover:bg-muted",
|
||||
active && "bg-secondary text-secondary-foreground"
|
||||
)}
|
||||
>
|
||||
{hasChildren ? (
|
||||
<CollapsibleTrigger
|
||||
render={
|
||||
<button
|
||||
type="button"
|
||||
className="group/folder-toggle relative ms-2 grid size-7 shrink-0 place-items-center rounded-md outline-none hover:bg-muted-foreground/10 focus-visible:ring-3 focus-visible:ring-ring/30"
|
||||
aria-label={folder.name}
|
||||
/>
|
||||
}
|
||||
>
|
||||
<Folder className="size-4 transition-opacity group-hover/folder-toggle:opacity-0 group-focus-visible/folder-toggle:opacity-0" />
|
||||
<ChevronRightIcon
|
||||
className={cn(
|
||||
"absolute size-4 opacity-0 transition-[rotate,opacity] group-hover/folder-toggle:opacity-100 group-focus-visible/folder-toggle:opacity-100",
|
||||
open && "rotate-90"
|
||||
)}
|
||||
/>
|
||||
</CollapsibleTrigger>
|
||||
) : (
|
||||
<span className="ms-2 grid size-7 shrink-0 place-items-center">
|
||||
<Folder className="size-4" />
|
||||
</span>
|
||||
)}
|
||||
<button
|
||||
type="button"
|
||||
aria-label={t(mediaMessages.selectFolder, { name: folder.name })}
|
||||
className="flex min-w-0 flex-1 items-center gap-2 self-stretch py-0 ps-1 pe-1.5 text-start text-sm outline-none focus-visible:ring-3 focus-visible:ring-ring/30"
|
||||
onClick={() => onSelect(folder.id)}
|
||||
>
|
||||
<span className="min-w-0 flex-1 truncate">{folder.name}</span>
|
||||
{(folder.assetCount ?? 0) > 0 && (
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{folder.assetCount}
|
||||
</span>
|
||||
)}
|
||||
</button>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger
|
||||
render={
|
||||
<Button
|
||||
type="button"
|
||||
size="icon-xs"
|
||||
variant="ghost"
|
||||
className="me-1 opacity-0 group-hover:opacity-100 aria-expanded:opacity-100"
|
||||
aria-label={folder.name}
|
||||
/>
|
||||
}
|
||||
>
|
||||
<MoreHorizontalIcon />
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
{depth < 2 && (
|
||||
<DropdownMenuItem onClick={() => onCreateFolder(folder.id)}>
|
||||
<PlusIcon />
|
||||
{t(mediaMessages.newChildFolder)}
|
||||
</DropdownMenuItem>
|
||||
)}
|
||||
<DropdownMenuItem onClick={() => onRename(folder)}>
|
||||
<PencilIcon />
|
||||
{t(mediaMessages.rename)}
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem
|
||||
variant="destructive"
|
||||
onClick={() => onDelete(folder)}
|
||||
>
|
||||
<Trash2Icon />
|
||||
{t(mediaMessages.delete)}
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
{hasChildren && (
|
||||
<CollapsibleContent>
|
||||
<ul className="mt-1 space-y-1 ps-4">
|
||||
{children.map((child) => (
|
||||
<FolderItem
|
||||
key={child.id}
|
||||
folder={child}
|
||||
folders={folders}
|
||||
depth={depth + 1}
|
||||
activeFolder={activeFolder}
|
||||
onSelect={onSelect}
|
||||
onCreateFolder={onCreateFolder}
|
||||
onRename={onRename}
|
||||
onDelete={onDelete}
|
||||
/>
|
||||
))}
|
||||
</ul>
|
||||
</CollapsibleContent>
|
||||
)}
|
||||
</Collapsible>
|
||||
</li>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,94 @@
|
||||
export type MediaId = number | string
|
||||
export type MediaKind = "image" | "video"
|
||||
export type MediaFilter = "all" | MediaKind | "favorite"
|
||||
export type MediaFolderSelection = MediaId | "unclassified" | undefined
|
||||
export type MediaSelectionMode = "multiple" | "none" | "single"
|
||||
|
||||
export interface MediaAsset {
|
||||
createdAt: Date | number | string
|
||||
favorite: boolean
|
||||
folderId: MediaId | null
|
||||
height?: number | null
|
||||
id: MediaId
|
||||
kind: MediaKind
|
||||
mimeType: string
|
||||
name: string
|
||||
sizeBytes: number
|
||||
updatedAt?: Date | number | string
|
||||
url: string
|
||||
width?: number | null
|
||||
}
|
||||
|
||||
export interface MediaFolder {
|
||||
assetCount?: number
|
||||
createdAt?: Date | number | string
|
||||
id: MediaId
|
||||
name: string
|
||||
parentId: MediaId | null
|
||||
sortOrder?: number
|
||||
updatedAt?: Date | number | string
|
||||
}
|
||||
|
||||
export interface MediaStorageTarget {
|
||||
id: string
|
||||
kind: "cloud" | "local"
|
||||
label: string
|
||||
}
|
||||
|
||||
export interface MediaAssetQuery {
|
||||
allowedKinds?: readonly MediaKind[]
|
||||
filter: MediaFilter
|
||||
folder: MediaFolderSelection
|
||||
keyword: string
|
||||
page: number
|
||||
pageSize: number
|
||||
}
|
||||
|
||||
export interface MediaAssetPage {
|
||||
assets: readonly MediaAsset[]
|
||||
hasNextPage: boolean
|
||||
}
|
||||
|
||||
export interface CreateMediaFolderInput {
|
||||
name: string
|
||||
parentId: MediaId | null
|
||||
}
|
||||
|
||||
export interface UpdateMediaFolderInput extends CreateMediaFolderInput {
|
||||
id: MediaId
|
||||
}
|
||||
|
||||
export interface MediaUploadInput {
|
||||
files: readonly File[]
|
||||
folderId?: MediaId
|
||||
target: MediaStorageTarget
|
||||
}
|
||||
|
||||
/**
|
||||
* The host application owns all persistence and transport. This adapter can
|
||||
* be backed by a database API, direct-to-object-storage uploads, or mocks.
|
||||
*/
|
||||
export interface MediaAdapter {
|
||||
createFolder(input: CreateMediaFolderInput): Promise<MediaFolder>
|
||||
deleteAsset(id: MediaId): Promise<void>
|
||||
deleteFolder(id: MediaId): Promise<void>
|
||||
listAssets(query: MediaAssetQuery): Promise<MediaAssetPage>
|
||||
listFolders(): Promise<readonly MediaFolder[]>
|
||||
listStorageTargets?(): Promise<readonly MediaStorageTarget[]>
|
||||
moveAsset(id: MediaId, folderId: MediaId | null): Promise<MediaAsset>
|
||||
renameAsset(id: MediaId, name: string): Promise<MediaAsset>
|
||||
updateFavorite(id: MediaId, favorite: boolean): Promise<MediaAsset>
|
||||
updateFolder(input: UpdateMediaFolderInput): Promise<MediaFolder>
|
||||
upload(input: MediaUploadInput): Promise<readonly MediaAsset[]>
|
||||
|
||||
/** Resolves a stored media URL for rendering or opening the source file. */
|
||||
resolveUrl?(asset: MediaAsset): string
|
||||
|
||||
/** Produces the URL returned by MediaPickerDialog. */
|
||||
resolveReference?(asset: MediaAsset): string
|
||||
}
|
||||
|
||||
export interface MediaNotice {
|
||||
message: string
|
||||
tone: "error" | "success"
|
||||
}
|
||||
@@ -0,0 +1,106 @@
|
||||
import type { MediaAsset, MediaFolder, MediaId } from "./types"
|
||||
|
||||
export const MEDIA_ACCEPT =
|
||||
"image/png,image/jpeg,image/webp,image/gif,video/mp4,video/webm,video/ogg,video/quicktime"
|
||||
|
||||
export function formatMediaFileSize(bytes: number): string {
|
||||
if (bytes < 1024) return `${bytes} B`
|
||||
if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`
|
||||
return `${(bytes / 1024 / 1024).toFixed(1)} MB`
|
||||
}
|
||||
|
||||
export function isMediaFile(file: File): boolean {
|
||||
return file.type.startsWith("image/") || file.type.startsWith("video/")
|
||||
}
|
||||
|
||||
export function mediaKindForFile(file: File): MediaAsset["kind"] | undefined {
|
||||
if (file.type.startsWith("image/")) return "image"
|
||||
if (file.type.startsWith("video/")) return "video"
|
||||
return undefined
|
||||
}
|
||||
|
||||
export function getChildMediaFolders(
|
||||
folders: readonly MediaFolder[],
|
||||
parentId: MediaId | null
|
||||
): MediaFolder[] {
|
||||
return folders
|
||||
.filter((folder) => folder.parentId === parentId)
|
||||
.sort(
|
||||
(left, right) =>
|
||||
(left.sortOrder ?? 0) - (right.sortOrder ?? 0) ||
|
||||
left.name.localeCompare(right.name)
|
||||
)
|
||||
}
|
||||
|
||||
export function getMediaFolderPath(
|
||||
folder: MediaFolder,
|
||||
folders: readonly MediaFolder[]
|
||||
): string {
|
||||
const names = [folder.name]
|
||||
const seen = new Set<MediaId>([folder.id])
|
||||
let current = folder
|
||||
|
||||
while (current.parentId !== null) {
|
||||
const parent = folders.find((item) => item.id === current.parentId)
|
||||
if (!parent || seen.has(parent.id)) break
|
||||
seen.add(parent.id)
|
||||
names.unshift(parent.name)
|
||||
current = parent
|
||||
}
|
||||
|
||||
return names.join(" / ")
|
||||
}
|
||||
|
||||
export function getMediaFolderDepth(
|
||||
folder: MediaFolder,
|
||||
folders: readonly MediaFolder[]
|
||||
): number {
|
||||
let depth = 0
|
||||
const seen = new Set<MediaId>([folder.id])
|
||||
let current = folder
|
||||
|
||||
while (current.parentId !== null) {
|
||||
const parent = folders.find((item) => item.id === current.parentId)
|
||||
if (!parent || seen.has(parent.id)) break
|
||||
seen.add(parent.id)
|
||||
depth += 1
|
||||
current = parent
|
||||
}
|
||||
|
||||
return depth
|
||||
}
|
||||
|
||||
export function splitMediaName(name: string) {
|
||||
const extensionIndex = name.lastIndexOf(".")
|
||||
if (extensionIndex <= 0 || extensionIndex === name.length - 1) {
|
||||
return { baseName: name, extension: "" }
|
||||
}
|
||||
|
||||
return {
|
||||
baseName: name.slice(0, extensionIndex),
|
||||
extension: name.slice(extensionIndex),
|
||||
}
|
||||
}
|
||||
|
||||
export function defaultMediaReference(asset: MediaAsset): string {
|
||||
if (
|
||||
asset.kind !== "image" ||
|
||||
!asset.width ||
|
||||
!asset.height ||
|
||||
asset.width <= 0 ||
|
||||
asset.height <= 0
|
||||
) {
|
||||
return asset.url
|
||||
}
|
||||
|
||||
const hashIndex = asset.url.indexOf("#")
|
||||
const url = hashIndex === -1 ? asset.url : asset.url.slice(0, hashIndex)
|
||||
const hash = hashIndex === -1 ? "" : asset.url.slice(hashIndex)
|
||||
const separator = url.includes("?")
|
||||
? url.endsWith("?") || url.endsWith("&")
|
||||
? ""
|
||||
: "&"
|
||||
: "?"
|
||||
|
||||
return `${url}${separator}w=${asset.width}&h=${asset.height}${hash}`
|
||||
}
|
||||
Reference in New Issue
Block a user