mirror of
https://github.com/pacnpal/thrilltrack-explorer.git
synced 2025-12-24 01:51:13 -05:00
122 lines
2.9 KiB
Markdown
122 lines
2.9 KiB
Markdown
# 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
|