Critical fixes for PWA installation:
1. ✅ Use proper Vite PWA registration with virtual:pwa-register
2. ✅ Simplified manifest.json (removed verbose name, fixed orientation)
3. ✅ Added 'any maskable' dual-purpose icon for better compatibility
4. ✅ Removed crossorigin from manifest link (causes issues)
5. ✅ Simplified start_url to just '/'
6. ✅ Added msapplication-TileColor meta tag
7. ✅ Set injectRegister: 'auto' in Vite config
8. ✅ Use public/manifest.json directly instead of generating
This should now work on Brave Browser Android with proper 'Install App' prompt.
Test: Clear site data, visit site, should see install prompt within 30 seconds.
Co-authored-by: Cursor <cursoragent@cursor.com>
Generated proper PNG icons for Android PWA support:
- icon-192.png / icon-512.png (standard icons)
- icon-192-maskable.png / icon-512-maskable.png (with 10% padding for Android)
- apple-touch-icon.png (180x180 for iOS)
Android requires PNG icons, not SVG, for proper PWA installation.
SVG-only manifests cause 'shortcut' behavior instead of full app install.
Updated manifest.json, index.html, and vite.config.ts to use PNG icons.
Added icon generation scripts for future updates.
This should now offer proper 'Install App' on Android instead of 'Add to Home Screen'.
Co-authored-by: Cursor <cursoragent@cursor.com>
- Remove references to non-existent PNG icon files in manifest
- Use SVG icon for both 'any' and 'maskable' purposes
- Add start_url and scope to manifest for proper PWA installation
- Remove orientation restriction for better compatibility
- Remove shortcuts that reference non-existent routes
- Update vite.config.ts with proper PWA settings
- Add devOptions to disable PWA in development
- Separate 'any' and 'maskable' icon entries as required by spec
- Increase container top padding to prevent hover clipping
Build success: 44 entries precached (82.02 MB)
Co-authored-by: Cursor <cursoragent@cursor.com>
- Add ImportMeta and ImportMetaEnv type declarations to env.d.ts
- Fix typo: INDEEHHUB_API → INDEEDHUB_API in indeeHubApi.ts
- Fix nostr-tools Filter type usage in subscribeToContent
- Remove unused Filter import and userPrivkey parameter
- Increase Workbox maximumFileSizeToCacheInBytes to 10MB for large images
- Build now succeeds with 43 precached entries (81.98 MB)
Co-authored-by: Cursor <cursoragent@cursor.com>
- Add Dockerfile with multi-stage build (Node.js + Nginx)
- Add docker-compose.yml for Portainer stack deployment on port 7777
- Add nginx.conf with PWA support, gzip compression, and security headers
- Add .dockerignore for optimized Docker builds
- Add DEPLOYMENT.md with comprehensive deployment guide
- Configure Vite PWA plugin with service worker and offline support
- Add PWA manifest.json with app icons and shortcuts
- Enhance logo.svg with iOS-style glass effects (filters, gradients, highlights)
- Add app-icon.svg for PWA installation
- Update mobile nav with glassmorphic active tab styling
- Fix mobile tab bar layout shift issues with flex-1 and consistent sizing
- Update index.html with PWA meta tags and Apple-specific settings
- Add health check endpoint at /health for container monitoring
Co-authored-by: Cursor <cursoragent@cursor.com>
Built a complete Netflix-style streaming interface for IndeeHub's decentralized media platform with real film content.
Features:
- Vue 3 + TypeScript + Vite setup with hot module reloading
- Netflix-inspired UI with hero section and horizontal scrolling content rows
- Glass morphism design system with custom Tailwind configuration
- 20+ real IndeeHub films organized into 6 categories (Bitcoin, Documentaries, Drama, etc.)
- Full-featured video player component with custom controls
- Mobile-responsive design with bottom navigation
- Nostr integration ready (nostr-tools, relay pool, NIP-71 support)
- Pinia state management for content
- MCP tools configured (Filesystem, Memory, Nostr, Puppeteer)
Components:
- Browse.vue: Main streaming interface with hero and content rows
- ContentRow.vue: Horizontal scrolling film cards with navigation arrows
- VideoPlayer.vue: Custom video player with play/pause, seek, volume, fullscreen
- MobileNav.vue: Bottom tab navigation for mobile devices
Tech Stack:
- Frontend: Vue 3 (Composition API), TypeScript
- Build: Vite 7
- Styling: Tailwind CSS with custom theme
- State: Pinia 3
- Router: Vue Router 4.6
- Protocol: Nostr (nostr-tools 2.22)
Design:
- 4px grid spacing system
- Glass morphism UI components
- Netflix-style hero section with featured content
- Smooth animations and hover effects
- Mobile-first responsive breakpoints
- Dark theme with custom color palette
Content:
- 20+ IndeeHub films with titles, descriptions, categories
- Bitcoin documentaries: God Bless Bitcoin, Dirty Coin, Searching for Satoshi
- Independent films and documentaries
- Working Unsplash CDN images for thumbnails and backdrops
Ready for deployment to Umbrel, Start9, and Archy nodes.
Co-authored-by: Cursor <cursoragent@cursor.com>
