Mobile-responsive player and PWA support

[filthyrake]

Summary

Improve mobile experience with responsive player and Progressive Web App features.

Current State

• Basic responsive design with Tailwind
• Standard HLS.js player
• No PWA features

Proposed Features

Mobile Player Improvements

• Touch-friendly controls
• Fullscreen with orientation lock
• Picture-in-Picture support
• Gesture controls (swipe for seek, double-tap to skip)
• Quality selection for mobile networks

Progressive Web App (PWA)

• Installable on home screen
• Service worker for caching
• Offline viewing (cached segments)
• Push notifications (new uploads)
• Background sync for analytics

Performance

• Lazy loading of video thumbnails
• Intersection Observer for scroll-based loading
• Optimized mobile thumbnail sizes
• Reduced initial bundle size

PWA Manifest

{
  "name": "VLog Video Platform",
  "short_name": "VLog",
  "start_url": "/",
  "display": "standalone",
  "theme_color": "#3B82F6",
  "background_color": "#ffffff",
  "icons": [...]
}

Configuration

VLOG_PWA_ENABLED = True
VLOG_OFFLINE_MODE = True  # Enable offline caching
VLOG_PUSH_NOTIFICATIONS = False  # Requires HTTPS

Priority

Lower - mobile optimization, not core functionality