Problem: GIFs were created successfully but not displaying in the dictionary listing.
Root cause: WordCard component was using raw relative URLs for GIF images:
- Before: src={gifMedia.url} → Browser requested from frontend domain
- After: src={getVideoUrl(gifMedia.url)} → Correctly requests from backend
Changes:
- Import getVideoUrl helper from videoPlaylist.ts
- Use getVideoUrl() to convert relative GIF URLs to absolute backend URLs
- Add null check to handle cases where getVideoUrl returns null
This matches the pattern used in VideoUpload.tsx which was already working correctly.
Result: GIF previews now display properly in dictionary word cards.
Co-Authored-By: Auggie
Backend changes:
- Add ffmpeg to Docker image for video processing
- Create gifGenerator utility with high-quality palette-based GIF generation
- Update Prisma schema: Add GIF to MediaKind enum
- Auto-generate 300px GIF preview (10fps, 3sec) on video upload
- Add POST /api/terms/:id/media/:mediaId/regenerate-gif endpoint for admins
- Update delete endpoint to cascade delete GIFs when video is deleted
- GIF generation uses ffmpeg with palette optimization for quality
Frontend changes:
- Update MediaKind enum to include GIF
- Display animated GIF previews in dictionary word cards
- Show 'No preview' icon for videos without GIF
- Add 'Regenerate GIF' button in admin video upload UI
- Display both video and GIF side-by-side in admin panel
- Visual indicator when GIF preview is available
Features:
- Automatic GIF generation on video upload (non-blocking)
- Manual GIF regeneration from admin panel
- GIF preview in dictionary listing for better UX
- Fallback to video icon when no GIF available
- Proper cleanup: GIFs deleted when parent video is deleted
Technical details:
- GIFs stored in /uploads/gifs/
- Uses two-pass ffmpeg encoding with palette for quality
- Configurable fps, width, duration, start time
- Error handling: video upload succeeds even if GIF fails
Co-Authored-By: Auggie
- Fixed API_URL in WordDetailModal.tsx to use explicit undefined check
- This completes the Docker deployment fix for all frontend components
- Word info modal now works correctly in Docker via nginx proxy
- All 4 locations now use consistent environment-aware URL pattern:
* api.ts (API client)
* videoPlaylist.ts (video URLs)
* VideoUpload.tsx (admin video upload)
* WordDetailModal.tsx (word info modal)
Fixes: Word info click feature in Docker deployment
Co-Authored-By: Auggie
- Fixed API client to respect empty VITE_API_URL for same-origin requests
- Fixed video URL construction in videoPlaylist.ts
- Fixed video URL construction in VideoUpload.tsx
- All three files now use explicit undefined check instead of || operator
- Enables proper same-origin requests via nginx proxy in Docker
Co-Authored-By: Auggie
- Extract word type color logic into shared wordTypeColors.ts utility
- Update TokenTray to use centralized color utility
- Remove duplicate color logic from WordCard and SortableToken
- Add color legend to Layout header for better UX
- Simplify Znakopis page component
- Implemented Znakopis page with document and sentence CRUD operations
- Added backend routes for documents and sentences
- Created UI components for sentence editing and display
- Added sentence store for state management
- Integrated select component for document selection
- Updated README with Phase 3 completion status
- Removed obsolete fix-colors.md file
- Add custom favicon.ico to replace default Vite icon
- Reorder WordCard action buttons (Dodaj on left, Info on right)
- Add white circular background to sidebar logo for better visibility
- Update CSS color variables to use proper indigo color scheme with HSL values
- Implement backend API for term CRUD operations
- Add frontend dictionary page with search and filtering
- Integrate shadcn/ui components (Dialog)
- Create term management UI with add/edit/delete functionality
- Update database seed with initial terms
- Add API client for term operations
- Complete Phase 2 of development plan
- Implement JWT-based authentication with login/logout
- Add user management routes and middleware
- Create admin panel for managing words and categories
- Add authentication store and API client
- Update database schema with User model
- Configure CORS and authentication middleware
- Add login page and protected routes
- Add detailed implementation plan (main-plan.md)
- Add professional README with project overview
- Include original specifications and screenshots
- Document technology stack and architecture
- Provide setup and deployment instructions
