Add automatic GIF preview generation for videos
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
This commit is contained in:
92
Dockerfile
Normal file
92
Dockerfile
Normal file
@@ -0,0 +1,92 @@
|
||||
# ===========================================
|
||||
# Stage 1: Build Frontend
|
||||
# ===========================================
|
||||
FROM node:20-alpine AS frontend-builder
|
||||
|
||||
WORKDIR /app
|
||||
|
||||
# Copy workspace configuration files
|
||||
COPY package.json pnpm-lock.yaml pnpm-workspace.yaml ./
|
||||
COPY packages/frontend/package.json ./packages/frontend/
|
||||
|
||||
# Install pnpm and dependencies
|
||||
RUN npm install -g pnpm && \
|
||||
pnpm install --frozen-lockfile
|
||||
|
||||
# Copy frontend source code
|
||||
COPY packages/frontend ./packages/frontend
|
||||
|
||||
# Build frontend
|
||||
RUN cd packages/frontend && pnpm build
|
||||
|
||||
# ===========================================
|
||||
# Stage 2: Build Backend
|
||||
# ===========================================
|
||||
FROM node:20-alpine AS backend-builder
|
||||
|
||||
WORKDIR /app
|
||||
|
||||
# Copy workspace configuration files
|
||||
COPY package.json pnpm-lock.yaml pnpm-workspace.yaml ./
|
||||
COPY packages/backend/package.json ./packages/backend/
|
||||
|
||||
# Install pnpm and dependencies
|
||||
RUN npm install -g pnpm && \
|
||||
pnpm install --frozen-lockfile
|
||||
|
||||
# Copy backend source code
|
||||
COPY packages/backend ./packages/backend
|
||||
|
||||
# Generate Prisma client and build backend
|
||||
RUN cd packages/backend && \
|
||||
npx prisma generate && \
|
||||
pnpm build
|
||||
|
||||
# ===========================================
|
||||
# Stage 3: Production Runtime
|
||||
# ===========================================
|
||||
FROM node:20-alpine AS production
|
||||
|
||||
WORKDIR /app
|
||||
|
||||
# Install OpenSSL for Prisma compatibility, nginx for reverse proxy, and ffmpeg for video processing
|
||||
RUN apk add --no-cache openssl nginx ffmpeg
|
||||
|
||||
# Install pnpm globally
|
||||
RUN npm install -g pnpm
|
||||
|
||||
# Copy workspace configuration files
|
||||
COPY package.json pnpm-workspace.yaml pnpm-lock.yaml ./
|
||||
COPY packages/backend/package.json ./packages/backend/
|
||||
COPY packages/frontend/package.json ./packages/frontend/
|
||||
|
||||
# Install ALL dependencies (including Prisma CLI needed for migrations)
|
||||
RUN pnpm install --frozen-lockfile
|
||||
|
||||
# Copy backend build artifacts
|
||||
COPY --from=backend-builder /app/packages/backend/dist ./packages/backend/dist
|
||||
COPY --from=backend-builder /app/packages/backend/prisma ./packages/backend/prisma
|
||||
|
||||
# Copy Prisma generated client (in pnpm workspace structure)
|
||||
# We need to copy the entire .pnpm directory to preserve the Prisma client
|
||||
COPY --from=backend-builder /app/node_modules/.pnpm ./node_modules/.pnpm
|
||||
|
||||
# Copy frontend build artifacts
|
||||
COPY --from=frontend-builder /app/packages/frontend/dist ./packages/frontend/dist
|
||||
|
||||
# Create uploads directory
|
||||
RUN mkdir -p /app/packages/backend/uploads
|
||||
|
||||
# Copy nginx configuration
|
||||
COPY nginx.conf /etc/nginx/nginx.conf
|
||||
|
||||
# Copy startup script
|
||||
COPY docker-entrypoint.sh /app/docker-entrypoint.sh
|
||||
RUN chmod +x /app/docker-entrypoint.sh
|
||||
|
||||
# Expose frontend port
|
||||
EXPOSE 5173
|
||||
|
||||
# Set entrypoint
|
||||
CMD ["/app/docker-entrypoint.sh"]
|
||||
|
||||
Reference in New Issue
Block a user