# PHASE 7: Media & Photos

**Status:** ⬜ Not Started  
**Estimated Time:** 8-10 hours  
**Priority:** HIGH  
**Depends On:** Phase 1 (Foundation)  
**Blocks:** Phase 12 (Pages Migration)

---

## 🎯 Goal

Migrate photo upload and management from Supabase Storage to Django + CloudFlare Images.

---

## 📋 Tasks

### Task 7.1: Photos Service (3 hours)

**File:** `src/services/photos/photosService.ts`

```typescript
class PhotosService extends BaseService {
  // GET /photos/
  async getPhotos(filters?: PhotoFilters): Promise<PaginatedResponse<Photo>>
  
  // GET /photos/{id}/
  async getPhoto(id: string): Promise<Photo>
  
  // POST /photos/upload/
  async uploadPhoto(file: File, metadata: PhotoMetadata): Promise<Photo>
  
  // PATCH /photos/{id}/
  async updatePhoto(id: string, data: Partial<PhotoData>): Promise<Photo>
  
  // DELETE /photos/{id}/
  async deletePhoto(id: string): Promise<void>
  
  // GET /photos/?entity_type={type}&entity_id={id}
  async getEntityPhotos(entityType: string, entityId: string): Promise<Photo[]>
  
  // POST /photos/cloudflare-upload-url/
  async getUploadUrl(): Promise<{ uploadUrl: string; imageId: string }>
}
```

#### Checklist
- [ ] Create `photosService.ts`
- [ ] Handle CloudFlare upload workflow
- [ ] Create types and mappers
- [ ] Handle photo metadata properly

---

### Task 7.2: Update Photo Upload Components (3 hours)

**Files:**
- `src/components/upload/PhotoUpload.tsx`
- `src/components/upload/UppyPhotoUpload.tsx`
- `src/components/upload/EntityMultiImageUploader.tsx`

#### New Upload Flow
1. Get CloudFlare upload URL from Django
2. Upload file directly to CloudFlare
3. Send CloudFlare image ID + metadata to Django
4. Django creates Photo record

#### Checklist
- [ ] Replace Supabase Storage with CloudFlare
- [ ] Update upload workflow
- [ ] Handle upload errors
- [ ] Test single photo upload
- [ ] Test batch photo uploads

---

### Task 7.3: Update Photo Management (2 hours)

**Files:**
- `src/components/upload/PhotoManagementDialog.tsx`
- `src/components/upload/EntityPhotoGallery.tsx`

#### Checklist
- [ ] Replace photo queries with `photosService`
- [ ] Update caption editing
- [ ] Update photo deletion
- [ ] Test photo gallery display
- [ ] Test photo management operations

---

### Task 7.4: Update Photo Display Components (2 hours)

**Files:**
- `src/components/rides/RecentPhotosPreview.tsx`
- Various entity detail pages with photo galleries

#### Checklist
- [ ] Replace all Supabase Storage URLs with CloudFlare URLs
- [ ] Update image optimization parameters
- [ ] Test responsive images
- [ ] Verify lazy loading works

---

## 🎯 Success Criteria

- [ ] Zero `supabase.storage` calls
- [ ] All photo uploads go through CloudFlare
- [ ] Photo metadata saved to Django
- [ ] Photo galleries work
- [ ] Photo captions can be updated
- [ ] Photos can be deleted
- [ ] Image URLs are CloudFlare URLs

---

## ⏭️ Next Phase

**Phase 8:** Search & Discovery