feat:video player, like button, and media fallbacks

Add VideoPlayer and LikeButton components with optimistic UI and /server endpoints for likes. Update media processor to emit WebP and JPEG fallbacks, store fallback URLs in the DB (migration + snapshot), add video placeholder asset, and relax CSP media-src for R2.
2025-10-14 18:31:55 +02:00
parent b4515d1d6a
commit 067e228393
19 changed files with 1252 additions and 233 deletions
--- a/logs/20251014-finds-implementation-log.md
+++ b/logs/20251014-finds-implementation-log.md
@@ -0,0 +1,186 @@
+# Serengo Finds Feature Implementation Log
+
+## Project Overview
+
+Serengo is a location-based social discovery platform where users can save, share, and discover memorable places with media, reviews, and precise location data.
+
+## Current Status: Phase 2A & 2C Complete + UI Integration ✅
+
+### What Serengo Currently Has:
+
+- Complete finds creation with photo uploads and location data
+- Interactive map with find markers and detailed previews
+- Responsive design with map/list view toggle
+- **NEW**: Modern WebP image processing with JPEG fallbacks
+- **NEW**: Full video support with custom VideoPlayer component
+- **NEW**: Like/unlike system with optimistic UI updates
+- R2 storage integration with enhanced media processing
+- Full database schema with proper relationships and social features
+- Type-safe API endpoints and error handling
+- Mobile-optimized UI with floating action button
+
+### Production Ready Features:
+
+- Create/view finds with photos, descriptions, and categories
+- Location-based filtering and discovery
+- Media carousel with navigation (supports images and videos)
+- **NEW**: Video playback with custom controls and fullscreen support
+- **NEW**: Like/unlike finds with real-time count updates
+- **NEW**: Animated like buttons with heart animations
+- Share functionality with clipboard copy
+- Real-time map markers with click-to-preview
+- Grid layout for find browsing
+
+---
+
+## Phase 2 Implementation Plan (Updated October 14, 2025)
+
+### Technical Requirements & Standards:
+
+- **Media Formats**: Use modern WebP for images, WebM/AV1 for videos
+- **UI Components**: Leverage existing SHADCN components for consistency
+- **Code Quality**: Follow Svelte 5 best practices with clean, reusable components
+- **POI Search**: Integrate Google Maps Places API for location search
+- **Type Safety**: Maintain strict TypeScript throughout
+
+### Phase 2A: Modern Media Support ✅ COMPLETE
+
+**Goal**: Upgrade to modern file formats and video support
+
+**Completed Tasks:**
+
+- [x] Update media processor to output WebP images (with JPEG fallback)
+- [x] Implement MP4 video processing with thumbnail generation
+- [x] Create reusable VideoPlayer component using SHADCN
+- [x] Enhanced database schema with fallback URL support
+- [x] Optimize compression settings for web delivery
+
+**Implementation Details:**
+
+- Updated `media-processor.ts` to generate both WebP and JPEG versions
+- Enhanced `findMedia` table with `fallbackUrl` and `fallbackThumbnailUrl` fields
+- Created `VideoPlayer.svelte` with custom controls, progress bar, and fullscreen support
+- Added video placeholder SVG for consistent UI
+- Maintained backward compatibility with existing media
+
+**Actual Effort**: ~12 hours
+
+### Phase 2B: Enhanced Location & POI Search (Priority: High)
+
+**Goal**: Google Maps integration for better location discovery
+
+**Tasks:**
+
+- [ ] Integrate Google Maps Places API for POI search
+- [ ] Create location search component with autocomplete
+- [ ] Add "Search nearby" functionality in CreateFindModal
+- [ ] Implement reverse geocoding for address display
+- [ ] Add place details (hours, ratings, etc.) from Google Places
+
+**Estimated Effort**: 12-15 hours
+
+### Phase 2C: Social Interactions ✅ COMPLETE
+
+**Goal**: Like system and user engagement
+
+**Completed Tasks:**
+
+- [x] Implement like/unlike API using existing findLike table
+- [x] Create reusable LikeButton component with animations
+- [x] Add like counts and user's liked status to find queries
+- [x] Add optimistic UI updates for instant feedback
+- [x] **COMPLETED**: Full UI integration into FindCard and FindPreview components
+- [x] **COMPLETED**: Updated all data interfaces to support like information
+- [x] **COMPLETED**: Enhanced media carousel with VideoPlayer component integration
+
+**Implementation Details:**
+
+- Created `/api/finds/[findId]/like` endpoints for POST (like) and DELETE (unlike)
+- Built `LikeButton.svelte` with optimistic UI updates and heart animations
+- Enhanced find queries to include like counts and user's liked status via SQL aggregation
+- Integrated LikeButton into both FindCard (list view) and FindPreview (modal view)
+- Updated VideoPlayer usage throughout the application for consistent video playback
+- Maintained type safety across all interfaces and data flows
+
+**Future Task:**
+
+- [ ] Build "My Liked Finds" collection page (moved to Phase 2G)
+
+**Actual Effort**: ~15 hours (including UI integration)
+
+### Phase 2D: Friends & Privacy System (Priority: Medium-High)
+
+**Goal**: Social connections and privacy controls
+
+**Tasks:**
+
+- [ ] Build friend request system (send/accept/decline)
+- [ ] Create Friends management page using SHADCN components
+- [ ] Implement friend search with user suggestions
+- [ ] Update find privacy logic to respect friendships
+- [ ] Add friend-specific find visibility filters
+
+**Estimated Effort**: 20-25 hours
+
+### Phase 2E: Advanced Filtering & Discovery (Priority: Medium)
+
+**Goal**: Better find discovery and organization
+
+**Tasks:**
+
+- [ ] Create FilterPanel component with category/distance/date filters
+- [ ] Implement text search through find titles/descriptions
+- [ ] Add sort options (recent, popular, nearest)
+- [ ] Build infinite scroll for find feeds
+- [ ] Add "Similar finds nearby" recommendations
+
+**Estimated Effort**: 15-18 hours
+
+### Phase 2F: Enhanced Sharing & Individual Pages (Priority: Medium)
+
+**Goal**: Better sharing and find discoverability
+
+**Tasks:**
+
+- [ ] Create individual find detail pages (`/finds/[id]`)
+- [ ] Add social media sharing with OpenGraph meta tags
+- [ ] Implement "Get Directions" integration with map apps
+- [ ] Build shareable find links with previews
+- [ ] Add "Copy link" functionality
+
+**Estimated Effort**: 12-15 hours
+
+---
+
+## Development Standards
+
+### Component Architecture:
+
+- Use composition pattern with reusable SHADCN components
+- Implement proper TypeScript interfaces for all props
+- Follow Svelte 5 runes pattern ($props, $derived, $effect)
+- Create clean separation between UI and business logic
+
+### Code Quality:
+
+- Maintain existing formatting (tabs, single quotes, 100 char width)
+- Use descriptive variable names and function signatures
+- Implement proper error boundaries and loading states
+- Add accessibility attributes (ARIA labels, keyboard navigation)
+
+### Performance:
+
+- Lazy load media content and heavy components
+- Implement proper caching strategies for API calls
+- Use virtual scrolling for long lists when needed
+- Optimize images/videos for web delivery
+
+**Total Phase 2 Estimated Effort**: 82-105 hours
+**Expected Timeline**: 8-10 weeks (part-time development)
+
+## Next Steps:
+
+1. Begin with Phase 2A (Modern Media Support) for immediate impact
+2. Implement Phase 2B (Google Maps POI) for better UX
+3. Add Phase 2C (Social Interactions) for user engagement
+4. Continue with remaining phases based on user feedback
--- a/logs/logboek.md
+++ b/logs/logboek.md
@@ -2,6 +2,34 @@

 ## Oktober 2025

+### 14 Oktober 2025 (Maandag) - 8 uren
+
+**Werk uitgevoerd:**
+
+- **Phase 2A & 2C: Modern Media + Social Features**
+- Video support met custom VideoPlayer component geïmplementeerd
+- WebP image processing met JPEG fallbacks toegevoegd
+- Like/unlike systeem met optimistic UI updates
+- Database schema uitgebreid met fallback media URLs
+- LikeButton component met animaties ontwikkeld
+- API endpoints voor like functionality (/api/finds/[findId]/like)
+- Media processor uitgebreid voor moderne formaten
+- CSP headers bijgewerkt voor video support
+- Volledige UI integratie in FindCard en FindPreview componenten
+
+**Commits:** Nog niet gecommit (staged changes)
+
+**Details:**
+
+- Complete video playback systeem met custom controls
+- Modern WebP/JPEG image processing pipeline
+- Social interaction systeem met real-time like counts
+- Enhanced media carousel met video support
+- Type-safe interfaces voor alle nieuwe functionaliteit
+- Backward compatibility behouden voor bestaande media
+
+---
+
 ### 13 Oktober 2025 (Zondag) - 4 uren

 **Werk uitgevoerd:**
@@ -210,9 +238,9 @@

 ## Totaal Overzicht

-**Totale geschatte uren:** 47 uren
-**Werkdagen:** 8 dagen
-**Gemiddelde uren per dag:** 5.9 uur
+**Totale geschatte uren:** 55 uren
+**Werkdagen:** 9 dagen
+**Gemiddelde uren per dag:** 6.1 uur

 ### Project Milestones:

@@ -224,6 +252,7 @@
 6. **7 Okt**: SEO, PWA en performance optimalisaties
 7. **10 Okt**: Finds feature en media upload systeem
 8. **13 Okt**: API architectuur verbetering
+9. **14 Okt**: Modern media support en social interactions

 ### Hoofdfunctionaliteiten geïmplementeerd:

@@ -242,3 +271,7 @@
 - [x] Cloudflare R2 storage integratie
 - [x] Signed URLs voor veilige media toegang
 - [x] API architectuur verbetering
+- [x] Video support met custom VideoPlayer component
+- [x] WebP image processing met JPEG fallbacks
+- [x] Like/unlike systeem met real-time updates
+- [x] Social interactions en animated UI components