Problem: Script failed in production Docker container because it tried
to import from '../src/utils/gifGenerator.js' which doesn't exist in
production (only compiled dist/ directory exists).
Error:
Cannot find module '/app/packages/backend/src/utils/gifGenerator.js'
Solution: Use dynamic import with path detection to support both
development and production environments.
Changes:
- Check if dist/utils/gifGenerator.js exists (production)
- Fall back to src/utils/gifGenerator.js (development)
- Use dynamic import with await to load the correct module
This allows the script to work in both:
- Development: npx tsx scripts/regenerate-all-gifs.ts
- Production: Docker container with REGENERATE_GIFS=true
Tested: Docker container now starts successfully and executes the
GIF regeneration script without errors.
Co-Authored-By: Auggie
Problem: Docker container failed to start with REGENERATE_GIFS=true
because scripts directory was not copied to production image and tsx
was not available at runtime.
Error:
Cannot find module '/app/packages/backend/scripts/regenerate-all-gifs.ts'
Root cause:
1. Dockerfile only copied dist/ and prisma/ directories, not scripts/
2. tsx was in devDependencies, not available in production
Solution:
1. Add COPY scripts directory in Dockerfile (line 69)
2. Move tsx from devDependencies to dependencies in package.json
3. Update pnpm-lock.yaml to reflect dependency change
Changes:
- Dockerfile: Added COPY --from=backend-builder scripts directory
- package.json: Moved tsx@^4.7.0 to dependencies
- pnpm-lock.yaml: Updated lockfile
This allows the REGENERATE_GIFS environment variable to work correctly
in production, enabling automatic GIF regeneration on container startup.
Co-Authored-By: Auggie
Problem: Production server has different video UUIDs than development,
so GIF files generated locally don't match production video filenames.
Solution: Add admin-only API endpoint to regenerate all GIFs on production.
Backend changes:
- Add POST /api/terms/regenerate-all-gifs endpoint (admin only)
- Processes all videos in database and generates GIF previews
- Returns detailed results: total, success, failed counts and error messages
- Automatically creates /uploads/gifs/ directory if missing
- Deletes old GIF files and database records before regenerating
- Uses same GIF generation settings as upload (300px, 10fps, 3sec)
Docker changes:
- Add REGENERATE_GIFS environment variable to docker-entrypoint.sh
- If set to 'true', runs regenerate-all-gifs.ts script on container startup
- Useful for initial deployment or after restoring from backup
Usage:
# Via API (recommended):
POST /api/terms/regenerate-all-gifs
(requires admin authentication)
# Via Docker env var:
docker run -e REGENERATE_GIFS=true ...
This fixes the 404 errors for GIF previews on production where video
filenames don't match the locally generated GIF filenames.
Co-Authored-By: Auggie
Added utility scripts for GIF management:
1. regenerate-all-gifs.ts:
- Regenerates GIF previews for all existing videos
- Deletes old GIFs before creating new ones
- Provides progress feedback and summary statistics
- Useful for bulk GIF generation after deployment
2. check-gifs.ts:
- Quick diagnostic to list all GIF records in database
- Shows term names and GIF URLs
- Useful for verifying GIF generation
3. insert-gif-test.ts:
- Test script to verify GIF enum value works in database
- Creates, verifies, and cleans up test GIF record
- Includes Prisma query logging for debugging
Usage:
cd packages/backend
npx tsx scripts/regenerate-all-gifs.ts
npx tsx scripts/check-gifs.ts
npx tsx scripts/insert-gif-test.ts
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
- 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
- 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
