Flixorui/flixor beta1.0

Beta1.0

on GitHub

🌐 Platforms

• Web Application - Modern browser-based client (React + Vite)
• macOS Native App - Swift/SwiftUI desktop application with MPV player integration
• Mobile App (iOS/Android) - React Native + Expo cross-platform mobile application

🎯 Core Features

Authentication & Server Management

• Plex.tv OAuth authentication flow
• Multiple Plex server support
• Server selection and switching
• Backend URL configuration for mobile/remote access
• Automatic session management and token refresh
• Secure token storage (AsyncStorage on mobile, localStorage on web)

Home Screen

• Netflix-style hero banner with automatic content rotation
  • Randomly selected from trending or Plex library
  • Auto-playing trailers (muted) from Plex extras or YouTube
  • Backdrop images with title logos (TMDB sourced)
  • Play, More Info, and Add to Watchlist quick actions
• Continue Watching - Resume in-progress movies and TV episodes
  • Progress bars showing watch completion
  • Smart episode thumbnails for TV shows
  • Automatic progress sync with Plex
• Multiple content rows:
  • Popular on Plex (TMDB trending)
  • Trending Now
  • Recently Added
  • Genre-specific rows (Drama, Action, Documentary, Children's, Music, History, Reality, Animation, Suspense)
  • Watchlist (Plex.tv synced)
  • Trakt integration rows (Trending, Popular, Recommendations, History)
• Dynamic filtering - Filter by All/Movies/TV Shows
• Smart prefetching - Background loading of likely next screens

Library Management

• Grid and list views with ultra-fast rendering
  • Optimized for large libraries (1000+ items)
  • FlashList on mobile for performance
  • Smooth scrolling with image lazy-loading
• Advanced search and filtering:
  • Full-text search across titles
  • Filter by genre, year, rating, resolution
  • Sort by title, release date, recently added, rating
• Collections support - Browse Plex collections
• Library sections - Movies, TV Shows, separate views
• Pagination - Efficient loading for massive libraries

Content Details Screen

• Rich metadata display:
  • High-resolution backdrop and poster images
  • Title with logo overlay (TMDB sourced)
  • Plot overview and synopsis
  • Cast and crew with headshots
  • Genres, release year, runtime, content rating
  • IMDb and Rotten Tomatoes ratings
  • Technical specifications (resolution, codec, audio, file size)
• Smart content discovery:
  • Recommendations (TMDB based)
  • Similar titles
  • Related content from same franchise
• Media versions - Select between different qualities/editions (4K, HD, different audio tracks)
• Audio and subtitle track selection
• Season and episode browser for TV shows:
  • Season selector dropdown
  • Episode list with thumbnails and descriptions
  • Watch progress indicators per episode
  • "On Deck" / Continue Watching for shows
• Trailer preview - Auto-play trailers from Plex or YouTube
• Quality badges - 4K, HDR, Dolby Vision, Atmos
• Watch actions:
  • Play (direct stream or transcode)
  • Add to Watchlist (Plex.tv and Trakt sync)
  • Mark as Watched
  • Open in Plex web (fallback)
• TMDB ↔ Plex mapping - Automatic mapping between TMDB content and local Plex library
  • GUID-based matching (TMDB, IMDb, TVDB)
  • Title and year fallback matching
  • "Plex" badge when content available locally
  • "No local source" indicator for unavailable content

Video Player

Web Player:

• Built-in browser playback:
  • HLS.js and DASH.js streaming
  • Direct stream and transcode support
  • HTML5 video controls
• Fullscreen mode
• Picture-in-Picture (Element PiP) - Watch while browsing
• Subtitle support - Multiple subtitle tracks with selection
• Audio track selection - Switch between audio streams
• Custom video controls - Seek, play/pause, volume
• Keyboard shortcuts - Space, arrow keys, F for fullscreen

macOS Player:

• Native MPV integration via libmpv
  • Hardware-accelerated video decoding
  • Metal rendering pipeline
  • Superior format support (4K HDR, Dolby Vision, TrueHD Atmos)
• Advanced playback controls:
  • Keyboard navigation (Space, arrows, Esc)
  • Seek bar with thumbnail previews
  • Volume control
• Subtitle rendering with ASS/SSA support
• Audio passthrough for high-quality audio

Mobile Player:

• Expo AV video player
• Touch gesture controls
• Fullscreen and landscape support
• Screen orientation lock
• Progress tracking and resume

Search

• Global search across all content
• Real-time search as you type
• Search history with recent queries
• Type filtering - Search movies, shows, or both
• TMDB integration - Search external content beyond Plex library

New & Hot / Trending

• Coming Soon - Upcoming movie releases
• Everyone's Watching - Trending content this week
• Top 10 Shows - Most popular TV shows
• Top 10 Movies - Most popular movies
• Custom tabs for content categories
• Backdrop previews for all content

Watchlist Management

• My List screen with all watchlisted content
• Plex.tv watchlist sync
• Trakt watchlist integration
• Add/remove from list on any content screen
• Grid view with progress indicators

Settings & Configuration

Web:

• Plex server management (add/remove/switch)
• TMDB API key configuration
• Trakt account linking
• Image quality preferences
• Backend URL configuration

macOS:

• Server connection settings
• Backend URL configuration
• Playback preferences
• Keyboard shortcut customization

Mobile:

• Backend URL configuration
• Server selection
• Account management
• Logout functionality
• App version info

Person/Cast Pages

• Actor/Director profiles with biography
• Filmography - All movies and shows featuring the person
• TMDB sourced data
• Browse by person - Click cast member to see their content

Browse/Explore Modals

• Genre browsing - Deep dive into genre collections
• Plex directory navigation - Browse Plex folder structures
• Dynamic loading - Infinite scroll through large collections

🔧 Technical Features

Performance Optimizations

• Image optimization and caching:
  • Sharp-based image proxy with WebP conversion
  • Width/height parameters for responsive images
  • CDN-style caching headers
  • TMDB image CDN integration
• API request caching with 15-minute TTL
• Request deduplication - Prevent duplicate simultaneous requests
• Rate limiting on backend
• Lazy loading for images and content rows
• Virtual scrolling on mobile (FlashList)
• Database indexing for fast queries

Backend Architecture

• Express.js REST API
• SQLite database with TypeORM
• Session management with connect-typeorm
• JWT authentication
• Image proxy service with transformation (sharp)
• Plex API aggregation - Single backend for multiple Plex servers
• CORS support for cross-origin requests
• Compression middleware for responses
• Security headers via Helmet
• Winston logging for debugging

External Integrations

• TMDB (The Movie Database):
  • Trending movies and TV shows
  • Detailed metadata (cast, crew, synopsis)
  • Recommendations and similar titles
  • Images (backdrops, posters, logos)
  • Trailers and videos
  • External IDs (IMDb, TVDB)
• Trakt.tv:
  • OAuth authentication
  • Watchlist sync
  • Trending and popular content
  • Watch history tracking
  • Personalized recommendations
• Plex.tv:
  • OAuth authentication
  • Server discovery
  • Watchlist sync
  • User profiles
• Plex Media Server:
  • Library scanning
  • Metadata retrieval
  • Direct stream URLs
  • Transcode requests
  • Continue watching / On Deck
  • Collections
  • Search

Error Handling & Resilience

• Retry logic with exponential backoff (mobile)
• Graceful degradation - App works with partial data
• Error boundaries - Prevent crashes from bad data
• Automatic logout on persistent backend failures (mobile)
• Fallback content - Placeholder images and data
• Connection timeout handling (10 seconds)

Cross-Platform State Management

• React Context for web
• Zustand-like stores for mobile (TopBarStore)
• AsyncStorage for mobile persistence
• localStorage for web persistence
• Shared API client architecture

🎨 UI/UX Features

Design Language

• Netflix-inspired interface with dark theme
• Gradient backgrounds (warm red + cool teal accents)
• Glass morphism effects on cards and modals
• Smooth animations and transitions
• Skeleton loaders for perceived performance
• Responsive layouts - Mobile, tablet, desktop
• Accessibility support - ARIA labels, keyboard navigation

Navigation

Web:

• React Router with browser history
• Deep linking support
• Back/forward navigation

macOS:

• Native SwiftUI navigation
• Keyboard shortcuts (arrow keys, Esc, Space)
• Tab-based navigation

Mobile:

• React Navigation with native animations
• Bottom tab bar (Home, New & Hot, Library, My Netflix)
• Stack navigation within tabs
• Shared element transitions

Interactive Elements

• Hover effects on cards (web/macOS)
• Haptic feedback on interactions (mobile)
• Pull to refresh (mobile)
• Swipe gestures (mobile)
• Animated scroll headers - Collapse/expand on scroll
• Filter pills with smooth show/hide animations

Content Cards

• Landscape cards - Backdrop-style for rows
• Portrait cards - Poster-style for grids
• Progress overlays - Visual watch progress
• Quality badges - 4K, HDR, etc. overlays
• Availability indicators - Plex vs. external content
• Hover overlays with actions (web/macOS)

📱 Platform-Specific Features

Web Only

• Docker containerization with docker-compose
• Responsive design (mobile browser support)
• Browser picture-in-picture
• Service worker (PWA potential)
• Keyboard shortcuts
• Mouse hover interactions

macOS Only

• Native menu bar
• MPV player with hardware acceleration
• Metal rendering pipeline
• macOS-native keyboard shortcuts
• Window management
• Spotlight integration potential
• Native notifications

Mobile Only

• Touch gesture controls
• Haptic feedback
• Screen orientation handling
• Safe area insets (notch support)
• Background audio playback

🚀 Developer Features

Development Workflow

• Hot module replacement (Vite + Expo)
• TypeScript throughout for type safety
• Concurrent development scripts (dev:all)
• Path aliases (@/components, @/services, etc.)
• ESLint and code formatting
• Git hooks potential (pre-commit, pre-push)

Build & Deploy

• Vite production builds with code splitting
• Expo EAS build for mobile apps
• Docker images for backend + frontend
• Environment variables for configuration
• Minification and optimization
• Source maps for debugging

Logging & Debugging

• Console logging with prefixes ([Home], [Player], etc.)
• Winston backend logging with levels
• Request/response logging
• Error stack traces
• TMDB API debug logs

📊 Data Management

Caching Strategy

• In-memory cache (node-cache) - 15-minute TTL
• Browser cache for images
• API response caching with deduplication
• Prefetch likely next screens

Database

• SQLite with TypeORM
• User accounts table
• Server configurations table
• Session storage table
• Watchlist sync (future)
• Watch history (future)

Session Management

• Express sessions with SQLite store
• JWT tokens for API authentication
• Refresh token support (future)
• Multi-device session handling

🔐 Security Features

• HTTPS enforcement (production)
• Secure token storage
• CORS policies with allowed origins
• Helmet security headers
• Rate limiting per IP
• SQL injection prevention (TypeORM parameterization)
• XSS protection via React/Vue escaping
• Session expiration and rotation
• No credentials in source (.env files, .gitignore)

🎬 Media Format Support

Video Codecs

• H.264, H.265/HEVC
• VP9, AV1 (web browser dependent)
• MPEG-2, MPEG-4
• 4K, HDR, Dolby Vision (macOS MPV)

Audio Codecs

• AAC, MP3, Opus
• AC3, E-AC3 (Dolby Digital)
• TrueHD, Atmos (macOS passthrough)
• DTS, DTS-HD

Containers

• MP4, MKV, AVI
• WebM (web)
• MOV, M4V

Subtitles

• SRT, VTT (web)
• ASS, SSA (macOS MPV)
• Embedded and external subtitles
• Multiple subtitle track selection

Streaming Protocols

• HLS (HTTP Live Streaming)
• DASH (Dynamic Adaptive Streaming)
• Direct file streaming
• Plex transcode streams

📈 Future Enhancement Potential

• Offline downloads (mobile)
• User profiles with separate watchlists
• Social features - Share watchlists, watch parties
• Smart recommendations - ML-based suggestions
• Parental controls - Content rating filters
• Multi-language support - i18n
• Advanced statistics - Watch time, most-watched genres
• Chromecast support
• AirPlay support
• DLNA support
• Voice search (mobile)
• Widget support (iOS/Android home screens)

🏆 Why Choose Flixor?

✅ Beautiful, familiar Netflix-style UI
✅ Works everywhere - Web, macOS, iOS, Android (TV coming soon)
✅ Blazing fast - Optimized rendering and caching
✅ Rich metadata - TMDB + Trakt + Plex integration
✅ Open source - Self-hosted, no subscriptions
✅ Privacy-focused - Your data stays on your server
✅ Active development - Regular updates and improvements