Web Interface - sureshfizzy/CineSync GitHub Wiki

CineSync Web Interface

CineSync features a modern, responsive web interface that provides complete control over your media library management. The web interface offers real-time monitoring, advanced file management, and comprehensive configuration options.

Accessing the Web Interface

Default URLs

  • Web UI: http://localhost:5173 (or your configured CINESYNC_UI_PORT)
  • API Server: http://localhost:8082 (or your configured CINESYNC_API_PORT)
  • WebDAV Server: http://localhost:8082/webdav/

Authentication

  • Default Credentials: admin / admin
  • JWT-Based Security: Secure token-based authentication
  • Configurable Access: Enable/disable authentication via CINESYNC_AUTH_ENABLED

Dashboard Overview

The dashboard provides a comprehensive overview of your media library with real-time statistics and monitoring.

📊 Key Statistics Cards

  • Total Files: Complete count of all media files in your library
  • Movies: Number of movies in your collection
  • TV Shows: Number of TV series in your collection
  • WebDAV Status: Current status of the WebDAV server
  • Storage Used: Total storage space utilized by your media
  • Total Folders: Number of organized folders in your library

📈 Real-Time Updates

  • Live Statistics: Dashboard updates automatically as files are processed
  • Processing Status: Real-time display of current processing activities
  • System Health: Monitor system resources and performance
  • Recent Activity: Track the latest media additions and changes

🎬 Recently Added Media

  • Smart Tracking: Automatic detection and display of recently added content
  • Metadata Display: Show titles, seasons, episodes, and file information
  • Quick Navigation: Direct links to media files and folders
  • Cleanup Controls: Remove outdated entries from recent media tracking

File Browser

The advanced file browser provides file management capabilities with intuitive navigation and powerful features.

Source Files Management

The source files view allows you to browse and manage your original media files before processing.

🗂️ Navigation Features

  • Breadcrumb Navigation: Easy navigation through folder hierarchies
  • Alphabet Filtering: Quick filtering by first letter (A-Z, #)
  • Search Functionality: Advanced search with real-time filtering
  • Folder Tree: Hierarchical folder structure display

📁 File Management Operations

  • File Operations: Copy, move, rename, and delete files and folders
  • Symlink Management: View and manage symbolic links
  • Download Support: Direct download of files through the web interface

🎯 Smart Features

  • Auto-Processing Toggle: Enable/disable automatic processing per folder
  • Content Detection: Automatic identification of media types
  • Metadata Display: Show file details, sizes, and modification dates
  • Preview Support: Quick preview of file information and metadata

🔍 Advanced Search

  • Real-Time Search: Instant search results as you type
  • Filter Options: Filter by file type, size, date, and content type
  • Regex Support: Advanced pattern matching for power users
  • Search History: Remember recent searches for quick access

Media Views & Metadata

CineSync provides rich media visualization with comprehensive metadata display and multiple viewing options.

🎬 Poster View

The poster view displays your media collection in an attractive grid layout with movie and TV show posters, making it easy to browse your library visually.

📽️ Movie Metadata

Detailed movie information including:

  • TMDb Integration: Complete movie details, cast, crew, and ratings
  • File Information: Technical details, file size, and quality
  • Collection Data: Movie franchise and collection information
  • Streaming Links: Direct access to media files

📺 TV Show Metadata

Comprehensive TV show details featuring:

  • Series Information: Show overview, ratings, and episode counts
  • Season Management: Organized season and episode structure
  • Episode Details: Individual episode information and metadata
  • Progress Tracking: View organization and processing status

🎭 Episode Cards

Individual episode cards provide:

  • Episode Thumbnails: Visual episode identification
  • Metadata Display: Episode titles, air dates, and descriptions
  • File Status: Processing and organization status indicators
  • Quick Actions: Direct access to episode files and operations

Metadata Management

🏷️ Set by ID

Manually set TMDB, IMDB, or TVDB IDs for precise content identification and metadata matching.

✏️ Modify Dialog

Edit and customize metadata, file names, and organization settings through intuitive dialog interfaces.

Settings Management

Comprehensive configuration management through an intuitive web interface.

⚙️ Configuration Categories

Core Settings

  • Source Directories: Configure multiple source directories
  • Destination Directory: Set the organized library destination
  • TMDb API Key: Configure metadata service access
  • Processing Options: Control file processing behavior

Media Organization

  • Layout Options: Choose between CineSync layout or source structure
  • Content Separation: Configure 4K, anime, and kids content separation
  • Resolution Handling: Set up resolution-based folder organization
  • Collection Management: Enable movie collection grouping

Automation Settings

  • Auto-Processing: Configure automatic file processing
  • Monitoring Intervals: Set real-time monitoring frequency
  • Processing Limits: Control parallel processing and resource usage
  • Cleanup Options: Configure automatic cleanup and maintenance

Processing & Automation

Monitor and control all media processing activities through the web interface.

📋 Jobs Management

The Jobs interface allows you to monitor and manage all processing tasks, view their status, and control automation workflows.

🔧 Services Management

The Services panel provides control over background services, monitoring capabilities, and system health status.

🤖 Auto-Processing Controls

  • Global Toggle: Enable/disable automatic processing system-wide
  • Content-Specific Controls: Separate controls for movies, TV shows, anime, and kids content
  • Processing Queue: View current and pending processing operations
  • Manual Processing: Trigger processing for specific files or folders

📊 Processing Monitoring

  • Real-Time Status: Live updates on processing activities
  • Progress Tracking: Visual progress indicators for ongoing operations
  • Error Handling: Display and manage processing errors
  • Performance Metrics: Monitor processing speed and system resources

🗃️ Database Management

  • Database Statistics: View database size and record counts
  • Export Functionality: Export media database for backup or analysis
  • Search Interface: Advanced database search and filtering
  • Cleanup Tools: Remove orphaned records and optimize database

File Operations

Advanced file operation tracking and management capabilities.

🔗 Symlink Creation

View and manage all created symbolic links with detailed information about source and destination paths.

📋 Operation Tracking

  • Processing History: Complete log of all file operations
  • Success/Failure Tracking: Monitor operation outcomes
  • Bulk Operations: Track batch processing activities
  • Error Analysis: Detailed error reporting and resolution

🔧 Management Tools

  • Retry Failed Operations: Reprocess failed files
  • Bulk Cleanup: Remove multiple failed or completed operations
  • Operation Filtering: Filter operations by status, type, or date
  • Export Reports: Generate operation reports for analysis

API Integration

The web interface is built on a comprehensive REST API that provides programmatic access to all CineSync functionality.

📡 Real-Time Communication

  • Server-Sent Events (SSE): Real-time updates for dashboard and monitoring
  • WebSocket Support: Live communication for processing updates
  • Event Streaming: Real-time notifications for file operations and changes

Mobile & Responsive Design

The web interface is fully responsive and optimized for mobile devices.

📱 Mobile Features

  • Touch-Friendly Interface: Optimized for touch navigation
  • Responsive Layout: Adapts to all screen sizes
  • Mobile File Management: Full file browser functionality on mobile
  • Quick Actions: Swipe gestures and touch controls

Troubleshooting

Common Issues

  • Connection Problems: Check API server status and network connectivity
  • Authentication Errors: Verify credentials and JWT token validity
  • Processing Issues: Monitor system resources and check error logs
  • Performance: Optimize database and adjust processing settings

Next Steps