Media Library UI

Relevant source files

The following files were used as context for generating this wiki page:

• apps/portal/pages/media/images.tsx
• apps/portal/pages/media/videos.tsx
• apps/portal/pages/media/workspace/[workspaceId]/index.tsx
• apps/portal/components/pagesComponents/_imagesScreen/pages/myImages/screenshotsContainer/ScreenshotsContainer.tsx
• apps/portal/app/services/screenshots.ts
• apps/portal/pages/video/[id].tsx
• apps/portal/components/pagesComponents/_imagesScreen/pages/workspace/WorkspaceItemsContainer.tsx
• apps/extensions/src/content/panel/screens/videoEditorScreen/VideoEditorScreen.tsx
• apps/portal/pages/media/shared.tsx
• apps/portal/pages/media/workspaces/manage.tsx
• apps/portal/i18n/locales/en.json

The Media Library is the central user interface within the Ever Rec platform for managing, organizing, and sharing all captured media, including images (screenshots) and videos. It provides both personal storage spaces ("My Images", "My Videos") and collaborative environments ("Workspaces"). Users can upload, view, edit, annotate, and share their content through a unified and feature-rich interface.

The library is built using Next.js and React, with Redux for state management. It is designed to be a comprehensive solution for handling all user-generated media, from initial capture to final sharing and collaboration. The UI is divided into distinct sections for personal media, shared items, trashed items, and collaborative workspaces, each with its own set of functionalities.

Sources: README.md:9-16, apps/portal/i18n/locales/en.json:110-116

Architecture and Data Flow

The Media Library UI is structured around a component-based architecture, with pages for different media contexts (personal, workspace, shared). Data fetching and state updates are primarily handled by Redux, which is populated by various service functions that interact with the backend API.

State Management

The application's state, particularly for media items, folders, and workspaces, is managed by Redux. Components dispatch actions, often through service functions, which then update the Redux store. Components subscribe to this store to re-render with new data.

• Key Redux Action Creator: PanelAC is used extensively to update the state, for example, PanelAC.setExplorerData, PanelAC.setActiveWorkspace, and PanelAC.setEditorImage.
• Data Fetching: Functions like getExplorerData in screenshots.ts and getExplorerDataVideo in videos.ts are responsible for fetching media files and folders from the API and populating the Redux store.

Sources: apps/portal/app/services/screenshots.ts:100-107, apps/portal/pages/media/workspace/[workspaceId]/index.tsx:100-111

Data Fetching Sequence

The following diagram illustrates the typical data flow when a user navigates to a media page, such as a workspace.

Sources: apps/portal/pages/media/workspace/[workspaceId]/index.tsx:75-111, apps/portal/app/services/screenshots.ts:75-121

Core UI Sections

The Media Library is organized into several main sections, accessible via the navigation sidebar.

Section	Description	Relevant Files
My Images	Displays all personal images (screenshots) uploaded by the user. Supports folder organization.	apps/portal/pages/media/images.tsx
My Videos	Displays all personal videos recorded or uploaded by the user. Supports folder organization.	apps/portal/pages/media/videos.tsx
Workspaces	Collaborative spaces where teams can share and manage images and videos. Each workspace has its own members, teams, folders, and items.	apps/portal/pages/media/workspace/[workspaceId]/index.tsx
Shared by Me	A view that aggregates all items the user has explicitly shared.	apps/portal/pages/media/shared.tsx
Trash	Contains all items (images, videos) that have been moved to the trash. Items can be restored or permanently deleted.	apps/portal/i18n/locales/en.json:198-216
Integrations	Page for managing integrations with third-party services like Google Drive, Slack, etc.	apps/portal/i18n/locales/en.json:217-285

Sources: apps/portal/i18n/locales/en.json:110-116, apps/portal/pages/media/shared.tsx:1-60

Key Components

The UI is built from a set of reusable and specialized React components.

Component Hierarchy for Workspace View

The following diagram shows the component structure of the main workspace page.

Sources: apps/portal/pages/media/workspace/[workspaceId]/index.tsx

Component Descriptions

Component	Description	Location
WorkspaceItemsContainer	Renders a grid of images and videos within a workspace. It uses react-infinite-scroll-component to efficiently display a large number of items.	apps/portal/components/pagesComponents/_imagesScreen/pages/workspace/WorkspaceItemsContainer.tsx
VideoItem	A card component that displays a thumbnail and metadata for an image or video. It also includes a context menu for actions like renaming, moving, and deleting.	apps/portal/components/pagesComponents/_imagesScreen/pages/myVideos/VideoItem/VideoItem.tsx
FolderItem	Represents a folder in the UI, showing its name, color, and providing actions through a context menu.	apps/portal/components/pagesComponents/_imagesScreen/components/folderItem/FolderItem.tsx
SCHeader	The main header for media pages, containing a search bar, user profile information, and context-specific buttons like "Invite Members".	apps/portal/pages/media/workspace/[workspaceId]/index.tsx:206
SortingDropDown	A dropdown menu to sort items by date or name.	apps/portal/components/pagesComponents/_imagesScreen/components/SortingDropDown.tsx
FilterDropdown	A dropdown to filter workspace items by team.	apps/portal/components/pagesComponents/_imagesScreen/pages/workspace/WorkspaceItemsContainer.tsx:210
VideoEditorScreen	A comprehensive screen for viewing and editing a single video, including a player, chapter editor, and management tools.	apps/extensions/src/content/panel/screens/videoEditorScreen/VideoEditorScreen.tsx
SingleVideoPage	The public or private page for viewing a single video, which includes the video player, chapters, and comments.	apps/portal/pages/video/[id].tsx

Features and Functionality

Media Upload

Users can upload images and videos to their personal library or a workspace.

• Methods: Uploads can be initiated via drag-and-drop or a file selection dialog.
• Workspace Upload Logic: In a workspace, uploadWorkspaceImageFile and uploadWorkspaceVideoFile are called. Upon success, the Redux state for activeWorkspace is updated to include the new item, triggering a UI update.

The flow for uploading a file to a workspace is as follows:

Sources: apps/portal/pages/media/workspace/[workspaceId]/index.tsx:243-277

Item Management

Users have a range of actions they can perform on individual media items and folders, typically accessed via a context menu on each item.

• Title Editing: The useInitImageVideoItem hook provides logic for in-place editing of item titles. It manages the local state of the title and calls an updateTitle function on blur to persist the changes.
• Moving Items: Items can be moved between folders. In workspaces, this is handled by WorkspaceItemsFolderModal.
• Deletion and Restoration: Items can be moved to the trash using moveRestoreTrash and permanently deleted or restored from the trash view.
• Sharing: A shareable link can be generated for any item using getShareLink.
• Permissions (Workspaces): The useWorkspaceItemsPermission hook determines if a user canEditItem or canViewItem based on their role and team affiliations within the workspace.

Sources: apps/portal/hooks/useInitImageVideoItem.tsx, apps/portal/app/services/screenshots.ts:221-238, apps/portal/pages/media/workspace/[workspaceId]/index.tsx:128-135

Video Editing and Viewing

The platform provides a detailed view for individual videos, which includes advanced features like chapter management.

• Video Player: Uses PlyrPlayer for video playback.
• Chapters: The VideoChapters component allows users to create, edit, and navigate through video chapters. The useVideoChapters hook manages the state of chapters, including adding new chapters based on the video's current timestamp and saving changes.
• Trimming: The useManageVideoData hook and VideoSlider component provide functionality to trim videos. This involves slicing the array of blob chunks and using fix-webm-duration to create a new, shorter video file.

Sources: apps/extensions/src/content/panel/screens/videoEditorScreen/VideoEditorScreen.tsx, apps/portal/components/pagesComponents/_videoEditorScreen/chapters/VideoChapters/VideoChapters.tsx, apps/extensions/src/content/panel/hooks/useManageVideoData.ts:88-120

Workspace Management

Workspaces are the core of collaboration in the Media Library.

• Workspace Settings: Admins can manage workspace settings from /media/workspace/[workspaceId]/settings, including renaming the workspace.
• Team Management: The WorkspaceTeamsModal allows admins to create teams and manage members.
• Member Invitations: The InviteMembersModal is used to invite new users to the workspace.

Sources: apps/portal/pages/media/workspace/[workspaceId]/settings/index.tsx, apps/portal/pages/media/workspaces/manage.tsx