Media Management

Sitepins provide a robust media management system that allows users to manage images, videos, and other assets stored within their Git repositories.

Media Manager Interface

The media manager is accessible via the media/ route within a project. It provides a visual interface for:

• File Listing: Displays all supported media files in the current directory.
• Sorting: Supports sorting by Name (A-Z, Z-A), Created Date, and Updated Date.
• Search: Real-time searching of media files by name or path.
• Pagination: Efficiently handles large media libraries using configurable pagination limits.

Integration with Git Providers

The media manager uses the useGitProvider hook to interact with either GitHub or GitLab, depending on the project’s configuration.

// src/app/[orgId]/[projectId]/media/[...path]/page.tsx
const { data: trees } = provider === "Gitlab" ? useGetGitLabTreesQuery(...) : useGetGitHubTreesQuery(...);

Media Detection Logic

Sitepins uses a utility function to identify supported media types based on file extensions.

// src/lib/utils/check-media-file.ts
export function checkMedia(filepath: string): boolean {
  const mediaExtensions = [".webp", ".svg", ".jpg", ".jpeg", ".png", ".gif", ".bmp", ".mp3", ".wav", ".mp4", ".avi", ".mov"];
  return mediaExtensions.some(ext => filepath.toLowerCase().endsWith(ext));
}

Metadata & Caching

For advanced sorting (like Created/Updated dates), Sitepins leverages a metadata cache (gitMeta) stored in Redux.

• GitHub: Uses commit dates from the GitHub API.
• GitLab: Uses the GitLab commits API to fetch file history.

The cache is enriched as the user navigates the media folders, ensuring a fast and responsive experience even when metadata fetching is required.