0bb1bcc5f9
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>
79 lines
1.9 KiB
Markdown
79 lines
1.9 KiB
Markdown
# IndeeHub Content Integration Guide
|
|
|
|
## Getting Real Film Data
|
|
|
|
Since the screening room at https://indeehub.studio/screening-room?type=film is behind authentication, you have a few options:
|
|
|
|
### Option 1: Export Data from IndeeHub Studio
|
|
1. Log into https://indeehub.studio
|
|
2. Navigate to the screening room
|
|
3. Export film data (titles, descriptions, image URLs)
|
|
4. Provide the data and I'll integrate it
|
|
|
|
### Option 2: API Integration (Recommended)
|
|
If IndeeHub has an API:
|
|
|
|
```typescript
|
|
// Update src/utils/indeeHubApi.ts with:
|
|
- Your API endpoint
|
|
- Authentication method (NIP-98 Nostr auth)
|
|
- Real data fetching logic
|
|
```
|
|
|
|
### Option 3: Manual Data Entry
|
|
Create a file with your film data:
|
|
|
|
```json
|
|
{
|
|
"films": [
|
|
{
|
|
"id": "film-1",
|
|
"title": "Your Film Title",
|
|
"description": "Film description",
|
|
"thumbnailUrl": "https://your-cdn.com/thumbnail.jpg",
|
|
"backdropUrl": "https://your-cdn.com/backdrop.jpg",
|
|
"type": "film",
|
|
"duration": 120,
|
|
"releaseYear": 2024,
|
|
"rating": "PG-13",
|
|
"creator": {
|
|
"name": "Creator Name",
|
|
"npub": "npub1..."
|
|
},
|
|
"categories": ["Drama", "Independent"]
|
|
}
|
|
]
|
|
}
|
|
```
|
|
|
|
## What I've Set Up
|
|
|
|
1. **Data Structure** (`src/utils/indeeHubApi.ts`)
|
|
- Film interface matching your needs
|
|
- API utility functions
|
|
- Mock data fallback
|
|
|
|
2. **Browse View** (`src/views/Browse.vue`)
|
|
- Netflix-inspired layout
|
|
- Content rows
|
|
- Hero section
|
|
|
|
3. **Ready for Real Data**
|
|
- Just replace mock data with real IndeeHub content
|
|
- Update API endpoints
|
|
- Add authentication
|
|
|
|
## Next Steps
|
|
|
|
Please provide:
|
|
- [ ] Film data (JSON export or API details)
|
|
- [ ] Image URLs or access to image CDN
|
|
- [ ] Authentication method for IndeeHub API
|
|
- [ ] Any specific IndeeHub branding guidelines
|
|
|
|
Then I can:
|
|
- ✅ Integrate real content
|
|
- ✅ Set up proper image loading
|
|
- ✅ Configure authentication
|
|
- ✅ Match IndeeHub's exact design
|