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>
Changes:
- Fills disappear in reverse order (last-in, first-out)
- Strokes undraw using reverse dasharray animation
- Diagonals undraw with reverse 0.3s stagger
- Circle undraws slower (2s) like it drew
- Background still fades out smoothly after undraw completes
Animation now perfectly mirrors itself!
Co-authored-by: Cursor <cursoragent@cursor.com>
- Reduce opacity from 0.95 to 0.85 (85% transparent)
- Hover state: 0.95 for subtle feedback
- More glassmorphic appearance with background showing through
- Better matches design system glass aesthetic
Co-authored-by: Cursor <cursoragent@cursor.com>
Header Layout Changes:
- Move navigation buttons next to logo on left side (40px gap)
- Remove centered navigation positioning
- Add profile dropdown after search on right side
Profile Dropdown Features:
- Shows user avatar, name 'Dorian', and chevron icon
- Glassmorphic dropdown menu with our button styles
- Menu items: Profile, Settings, Sign Out
- Icons for each menu item
- Smooth slide-down animation
- Click outside to close
- Desktop only (hidden on mobile)
- Uses same glass effect as nav buttons
Responsive:
- Mobile shows simple avatar without dropdown
- Search button hidden on mobile
- Nav stays in mobile bottom bar
Co-authored-by: Cursor <cursoragent@cursor.com>
Android PWA Requirements:
- Add mobile-web-app-capable meta tag for Android
- Add application-name meta tag
- Add prefer_related_applications: false to manifest
- Add explicit icon sizes (192x192, 512x512) for both any and maskable
- Add orientation: any for flexible display
- Add lang and dir to manifest for proper localization
- Add ?source=pwa to start_url for analytics
- Add crossorigin="use-credentials" to manifest link
- Add proper service worker registration in main.ts
- Add vite-plugin-pwa/client types to env.d.ts
This ensures Android recognizes it as a full PWA instead of creating a shortcut
Co-authored-by: Cursor <cursoragent@cursor.com>
- Move god-bless-bitcoin-backdrop.jpg to public/images/ folder
- Update content store to use /images/ path instead of /assets/images/
- Files in public/ are served directly in production builds
- Fixes broken banner image on production server
Co-authored-by: Cursor <cursoragent@cursor.com>
- Update app-icon.svg with new gradient strokes and circle element
- Update logo.svg with matching design improvements and gradient borders
- Increase film title size to 20px (text-xl) with bold weight on desktop
- Keep 16px (text-base) with semibold weight on mobile for better proportions
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>
- Added custom fonts 'Blade Knight' and 'Coligra' for a unique aesthetic
- Updated background color and styling for body and app components
- Improved content card design with glass morphism effects and hover states
- Enhanced mobile navigation with a floating glass effect and updated button styles
- Adjusted header layout for better responsiveness and visual appeal
Co-authored-by: Cursor <cursoragent@cursor.com>
- Updated content card width from 140/180px to 200/280px for improved visibility
- Changed image class to use 'object-contain' and added background color for better aesthetics
- Introduced a gradient background for the header with dynamic styles based on scroll position
- Added new CSS classes for header gradient effects and improved backdrop filter for a modern look
Co-authored-by: Cursor <cursoragent@cursor.com>
- Reduced card width from 200/280px to 140/180px
- Increased gap between cards from 8px to 32px (gap-8)
- Added vertical padding (py-4) to content rows
- Made title text smaller and responsive
- Hide description on mobile for cleaner look
Co-authored-by: Cursor <cursoragent@cursor.com>
- Updated film data to use 21 locally downloaded images
- All posters and backdrops now served from /public/images/films/
- No external CDN dependencies for core films
- Includes Bitcoin docs, dramas, and independent films
- Images: webp, png, jpeg formats (optimized)
Co-authored-by: Cursor <cursoragent@cursor.com>
- Downloaded 15 film posters and backdrops from CloudFront CDN
- Updated film data to use local images where available
- Remaining films still use CDN URLs
- Images saved in public/images/films/ directory
Co-authored-by: Cursor <cursoragent@cursor.com>
- Replaced placeholder content with 20 real IndeeHub films
- All films now use IndeeHub's CloudFront CDN for images
- Added actual film titles, descriptions, and metadata
- Reduced hero section height (60vh/65vh) for better fold usage
- Content starts higher on page with more visible films
Films include:
- Bitcoin documentaries: God Bless Bitcoin, Bitcoiners, Hard Money
- Dramas: The Things We Carry, Kismet, Clemont, Bender
- Economics: Bitcoin: End of Money, Menger Notes, Housing Bubble
- Plus shorts and independent films
Images served from d1yvaqj97q119b.cloudfront.net
Co-authored-by: Cursor <cursoragent@cursor.com>
- Made header transparent on scroll for premium Netflix-style look
- Added browser console script to download all IndeeHub images
- Created Python script for batch image downloading
- Added shell script for curl-based downloads
The header now starts fully transparent and transitions to semi-transparent
black with blur when scrolling, creating a floating navigation effect.
Download scripts will extract all film posters, backdrops, and metadata
from IndeeHub.studio screening room.
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>
