Media Library — Scope & Build

Full scope, feature list, and downloadable source ZIP for the Media Library module.

Media Library Source (ZIP)

39 files · ~113 KB · page, 20 library components, 9 libs, 7 backend functions, 2 entities

Media Library — Scope & Feature Spec

Overview

The Media Library is the central hub of AuctionSnap — a searchable, sortable, drag-and-drop grid of every cataloged image. Images are grouped by lot (or category/subcategory), each tagged with a lot number, auction, AI-derived category/year/brand, estimates, and condition. From here you upload, organize, AI-process, edit, watermark, convert, compose, and export items — and launch the Camera Capture flow.

Primary Goal

Be the single working surface for an auction house's image inventory: bring images in (upload, scan, import), organize them into lots, enrich them with AI categorization + pricing, prepare them (crop, compose, watermark, convert), and get them out (download, CSV export, push to auction platforms).

Pages & Routes

  • PublicMediaLibrary — / (home) — the main Media Library grid. Also reused (via props) as the Not Sold Library (notSoldOnly) and per-auction filtered views (auctionFilter).
  • Trash — /Trash — soft-deleted items (recoverable).
  • CameraCapture — /CameraCapture — launched from the Media Library header.

Source Files (included in the ZIP)

Frontend — Page

  • src/pages/PublicMediaLibrary.jsx — the library grid, toolbar, bulk actions, filters, AI processing, export.

Frontend — Library Components (src/components/library/)

  • FileGridItem.jsx — one image tile (thumbnail, select, rename, lot badge, download/delete).
  • GroupedFileGrid.jsx — groups items by lot/category/subcategory with drag-and-drop reorder + cross-group move.
  • GroupingControls.jsx — toggle group-by (lot/category/subcategory) and sort mode.
  • ImageDetailModal.jsx — full detail editor (title, description, estimates, dimensions, consigner, comps, etc.).
  • CompPanel.jsx — eBay/sold-comps research panel for an item.
  • CopyImageButton.jsx — copy an image URL or watermarked blob to clipboard.
  • LotFieldsPanel.jsx — lot-level field editor.
  • BgRemoveModal.jsx — AI background removal (single or bulk).
  • CardCropReviewModal.jsx — AI card-box detection with manual corner correction + crop.
  • ImageComposerModal.jsx — multi-image canvas composer (drag, rotate, scale layers).
  • OptimizeAuctionFlowModal.jsx — optimal auction lineup builder.
  • LotBundleBuilderModal.jsx — build a multi-item lot bundle.
  • CombineImagesModal.jsx — combine multiple images into one.
  • AutoAssignLotsModal.jsx — auto-assign lot numbers to selected images.
  • ImportLotImagesModal.jsx — import images by lot ID from external sources.
  • NotSoldImportModal.jsx — import not-sold items from a spreadsheet.
  • CenterImagesModal.jsx — rotate & square (center) selected images.
  • AssignSectionModal.jsx — assign selected items to a category section.
  • SkipLotAssignModal.jsx — skip-lot assignment helper.
  • AiProcessingOverlay.jsx — full-screen AI processing progress overlay.

Frontend — Shared

  • src/components/DuplicateDetector.jsx — visual duplicate finder.
  • src/lib/MoveQueue.js — background move queue (move items between auctions).
  • src/lib/imageName.js — readable image filename generator.
  • src/lib/libraryGroup.js — category ranking + sport/brand grouping helpers.
  • src/lib/romanSort.js — roman-numeral + year-aware sorting.
  • src/lib/watermark.js — canvas watermark burner.
  • src/lib/dngConverter.js — DNG/RAW detection.
  • src/lib/batchOperations.js — aiProcessAllBatch pipeline.
  • src/lib/backgroundProcessor.js — generic background job runner.

Backend Functions

  • base44/functions/aiProcessAllServer/entry.ts — server-side batch categorize + price (analyze/price modes).
  • base44/functions/fixOrientationAll/entry.ts — bulk face-forward orientation fix.
  • base44/functions/cleanupDuplicates/entry.ts — find + remove exact duplicate images.
  • base44/functions/priceAllMissing/entry.ts — background price all items missing estimates.
  • base44/functions/fixFrontNameFromBack/entry.ts — fix front image names from back-image text.
  • base44/functions/uploadImage/entry.ts — upload a base64 image to storage.
  • base44/functions/onMediaLibraryCreate/entry.ts — entity-create trigger (kicks off AI processing).

Entities

  • base44/entities/MediaLibrary.jsonc — the stored image records.
  • base44/entities/Auction.jsonc — auction records (for the auction filter/move dropdown).

Features

1. Library Grid & Grouping

  • Group by — lot (default), category, or subcategory.
  • Sort — roman-numeral / year-aware lot ordering; front-before-back within a lot (by item_key + view_angle).
  • Drag-and-drop — reorder within a group (persists sort_order) and move an item between lots/categories.
  • Per-item tile — thumbnail, selection checkbox, inline rename, lot badge, download, delete.
  • Click a tile — opens the full Image Detail Modal.

2. Search & Filters

  • Text search — matches title or filename.
  • Filter panel — by date range (today/week/month/all), auction, lot number, type (category), image name.
  • Quick-select buttons — Select All, Select Unknown (uncategorized), Select Assigned (has lot number).

3. Upload

  • Image upload — JPG/PNG/WebP/HEIC/HEIF/DNG/RAW; HEIC auto-converted to JPG.
  • Auto lot numbering — rolling 4-digit sequence (starts at 0800), never reuses numbers from trashed items.
  • Folder upload — webkitdirectory input for bulk folder ingestion.
  • Import Lot IDs — import images by external lot ID.
  • Not-Sold spreadsheet import — imports not-sold items (shown only in the Not Sold Library).

4. Bulk Actions (on selection)

  • Download — single (watermarked JPG) or multiple (ZIP of watermarked JPGs); optional trash-after-download.
  • Assign Lot — bulk-assign a lot number to selected items.
  • Unassign — clear lot numbers.
  • Move to auction — background move queue (survives navigation).
  • Assign Section — bulk assign category section.
  • Auto-Assign Lots — AI-assisted lot assignment.
  • Delete — soft-delete (move to trash) in batches of 5.
  • Remove BG — AI background removal (single or bulk).
  • Review & Crop — AI card-box detection + manual corner correction.
  • Create Lot — build a multi-item lot bundle.
  • Combine Images — merge multiple images into one.
  • Rotate & Square — center/square selected images.
  • Compose — multi-layer image composer.
  • Convert Format — convert selected to JPG/PNG/WebP with quality presets (Low/Med/High/Max); live conversion log.
  • Watermark — bake "www.awinrauction.com Lot #N" into selected images; live watermark log.

5. AI Processing

  • AI Process (All or Selected) — two-phase server pipeline:
    • Phase 1: Categorize — sport/year/brand/item_type via aiProcessAllServer (analyze mode).
    • Phase 2: Price — eBay comps + estimates via aiProcessAllServer (price mode).
  • Live progress — step label, current/total bar, and a scrollable log.
  • Safety limits — stops after 300 calls or 5 consecutive errors per phase.
  • onMediaLibraryCreate trigger — new uploads auto-kick AI processing server-side.

6. Image Editing & Preparation

  • Image Detail Modal — edit title, description, category, sub_category, item_type, year, brand, condition, estimates, dimensions, weight, consigner, origin, creator, style period, materials, lot reference, location, buy-now/reserve, quantity, shipping, notes, and comps.
  • Comp Panel — eBay/sold-comps research for an item.
  • Copy Image — copy URL or watermarked blob to clipboard.
  • Background removal, card crop review, image composer, center/square, combine, lot bundle builder — all available per-item or bulk.

7. Export

  • CSV/Excel export — one row per lot, up to 4 image files, with all lot fields (title, description, estimates, condition, consigner, dimensions, weight, category, origin, etc.). Exports selected or all.
  • Bulk download — watermarked ZIP preserving the grid's lot order.
  • Push to auction — via the move queue and downstream auction-builder pages.

8. Duplicate & Orientation Tools

  • Find Duplicates — visual duplicate detector modal.
  • Clean Dups — find + remove exact duplicate images (keeps oldest).
  • Face Forward — bulk AI orientation fix (rotates images upright, permanently).
  • Fix Names from Back — uses back-image text to fix front-image names.

9. Background Move Queue

  • MoveQueue — moving items between auctions is queued and processed in the background with a live counter; optimistically hides moved items until the move completes.

Data Flow

Upload / Camera Capture / Import
  → MediaLibrary.create (lot_number, auction_name, source)
  → onMediaLibraryCreate trigger → aiProcessAllServer (categorize + price)
  → Media Library grid (grouped, sorted, searchable)
  → Bulk actions (download, watermark, convert, compose, move, delete)
  → Export (CSV / ZIP) or push to auction

Known Behaviors / Decisions

  • Lots use a rolling 4-digit sequence starting at 0800; trashed numbers are never reused.
  • Not-sold items (not_sold=true) are hidden from the main library and shown only in the Not Sold Library.
  • Watermark is only burned on download/export when a lot number exists.
  • The grid keeps flat list order in sync with the displayed group order so ZIP downloads preserve arrangement.
  • Soft-delete (is_deleted) is used instead of hard delete — items go to Trash and are recoverable.

Dependencies

  • Entities: MediaLibrary, Auction
  • Backend functions: aiProcessAllServer, fixOrientationAll, cleanupDuplicates, priceAllMissing, fixFrontNameFromBack, uploadImage, onMediaLibraryCreate
  • Integrations: Core.UploadFile
  • Libs: MoveQueue, imageName, libraryGroup, romanSort, watermark, dngConverter, batchOperations, backgroundProcessor
  • Packages: jszip, xlsx, heic2any, react-query, react-router-dom, lucide-react, shadcn/ui