# 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