$ show jxxghp/MoviePilot-Frontend
MoviePilot-Frontend is the Vue 3 + Vuetify 3 single-page application frontend for the MoviePilot media management server. It provides a comprehensive UI for managing media libraries, subscriptions, downloads, file organization, plugins, user settings, and system administration. The architecture is a modern SPA with Pinia state management, Vue Router, Axios-based API client, and extensive use of composables for reusable logic. It features a plugin system using Module Federation for remote component loading, PWA support with service worker caching and offline capabilities, and a distinctive glass/transparent theme system with WebGL-based fluid dynamics and ripple effects. The codebase is well-structured with over 120 test files, MSW mock handlers, and a strong emphasis on testability. It is actively maintained with frequent commits and a large community (310 stars, 250 forks).
The LLM identified 5 files worth highlighting for reuse:
A standalone SSE lifecycle manager implementing singleton pattern keyed by URL+listenerId. Manages EventSource creation, background tab close, reconnect with exponential backoff, listener registry, and status propagation (idle/connecting/open/error/closed). Can be extracted and reused in any project requiring robust SSE connections with automatic reconnection and lifecycle awareness.
Provides a confirm dialog via a simple function call, decoupled from any specific component. Uses the shared dialog system to open a confirmation prompt and returns a promise. Demonstrates a clean pattern for invoking UI interactions programmatically without tight coupling to template markup. Reusable in any Vue 3 application needing confirmation prompts.
Implements an algorithm to select optical rectangles for glass overlay rendering based on motion energy, visibility, and candidate filtering. Handles protocol exclusion (blob:, data:), dimension constraints, and fallback selection. Demonstrates non-obvious skill in computational geometry and performance optimization for real-time UI effects. Reusable for any overlay selection or viewport optimization problem.
A factory function that creates a Three.js-based fluid simulation with ping-pong render targets, quality levels (low/medium/high), and fallback to 8-bit targets. Manages shader uniforms, temporal displacement fields, and context loss recovery. Demonstrates advanced WebGL techniques for real-time visual effects. Reusable as a standalone fluid dynamics module for any Three.js project.
A permission checking utility with hierarchical categories (discovery, search, subscribe, manage) and feature-level keys. Provides functions like hasFeaturePermission, filterItemsByPermission, and normalizeUserPermissions. Pure logic with no Vue dependencies, making it reusable in any application needing role-based access control with a flexible permission model.