build video support

2026-03-28 09:30:26 -05:00
parent 32bcdc94fc
commit f235987b3a
7 changed files with 141 additions and 47 deletions
--- a/4
+++ b/4
@@ -25,8 +25,8 @@ RUN npm run build
 FROM node:20-alpine AS runtime
 WORKDIR /app

-# Tesseract OCR — English language data only (add more langs as needed)
-RUN apk add --no-cache tesseract-ocr tesseract-ocr-data-eng
+# Tesseract OCR + ffmpeg (for video metadata via ffprobe)
+RUN apk add --no-cache tesseract-ocr tesseract-ocr-data-eng ffmpeg

 # Install production deps only
 COPY backend/package*.json ./
--- a/backend/src/routes/memes.ts
+++ b/backend/src/routes/memes.ts
@@ -3,12 +3,16 @@ import type { MultipartFile } from '@fastify/multipart';
 import { v4 as uuidv4 } from 'uuid';
 import db, { UNSORTED_ID } from '../db.js';
 import { buildFilePath, deleteFile, getExtension } from '../services/storage.js';
-import { extractMeta, resizeImage, saveBuffer } from '../services/image.js';
+import { extractMeta, extractVideoMeta, resizeImage, saveBuffer } from '../services/image.js';
 import { extractText } from '../services/ocr.js';
 import { requireAuth } from '../auth.js';
 import type { ListQuery, UpdateBody, RescaleBody, MoveBody, Meme } from '../types.js';

-const ALLOWED_MIMES = new Set(['image/jpeg', 'image/png', 'image/gif', 'image/webp']);
+const ALLOWED_MIMES = new Set([
+  'image/jpeg', 'image/png', 'image/gif', 'image/webp',
+  'video/mp4', 'video/webm', 'video/quicktime',
+]);
+const VIDEO_MIMES = new Set(['video/mp4', 'video/webm', 'video/quicktime']);

 function getMemeTags(memeId: string): string[] {
  return (
@@ -143,7 +147,10 @@ export async function memesRoutes(app: FastifyInstance) {
    const filePath = buildFilePath(id, ext);

    await saveBuffer(buffer, filePath);
-    const meta = await extractMeta(filePath);
+    const isVideo = VIDEO_MIMES.has(mimeType);
+    const meta = isVideo
+      ? await extractVideoMeta(filePath, mimeType)
+      : await extractMeta(filePath);

    const fields = file.fields as Record<string, { value: string }>;
    const title = fields.title?.value ?? file.filename ?? 'Untitled';
@@ -160,10 +167,12 @@ export async function memesRoutes(app: FastifyInstance) {

    if (tagsRaw) setMemeTags(id, tagsRaw.split(','));

-    // Fire OCR in the background — doesn't block the upload response
-    extractText(filePath, mimeType).then((text) => {
-      if (text) db.prepare('UPDATE memes SET ocr_text = ? WHERE id = ?').run(text, id);
-    });
+    // OCR only makes sense for images
+    if (!isVideo) {
+      extractText(filePath, mimeType).then((text) => {
+        if (text) db.prepare('UPDATE memes SET ocr_text = ? WHERE id = ?').run(text, id);
+      });
+    }

    return reply.status(201).send(getMemeById(id));
  });
--- a/backend/src/services/image.ts
+++ b/backend/src/services/image.ts
@@ -1,7 +1,11 @@
 import sharp from 'sharp';
 import fs from 'fs';
+import { execFile } from 'child_process';
+import { promisify } from 'util';
 import { absolutePath, ensureDir } from './storage.js';

+const execFileAsync = promisify(execFile);
+
 export interface ImageMeta {
  width: number;
  height: number;
@@ -29,6 +33,30 @@ export async function extractMeta(filePath: string): Promise<ImageMeta> {
  };
 }

+export async function extractVideoMeta(filePath: string, mimeType: string): Promise<ImageMeta> {
+  const abs = absolutePath(filePath);
+  const stat = fs.statSync(abs);
+  try {
+    const { stdout } = await execFileAsync('ffprobe', [
+      '-v', 'quiet',
+      '-print_format', 'json',
+      '-show_streams',
+      abs,
+    ]);
+    const data = JSON.parse(stdout);
+    const video = (data.streams as any[])?.find((s) => s.codec_type === 'video');
+    return {
+      width: video?.width ?? 1280,
+      height: video?.height ?? 720,
+      mimeType,
+      size: stat.size,
+    };
+  } catch {
+    // ffprobe unavailable or failed — use safe defaults
+    return { width: 1280, height: 720, mimeType, size: stat.size };
+  }
+}
+
 export async function saveBuffer(buffer: Buffer, destRelPath: string): Promise<void> {
  ensureDir(destRelPath);
  const abs = absolutePath(destRelPath);
--- a/backend/src/services/storage.ts
+++ b/backend/src/services/storage.ts
@@ -44,6 +44,9 @@ export function getExtension(mimeType: string): string {
    'image/png': 'png',
    'image/gif': 'gif',
    'image/webp': 'webp',
+    'video/mp4': 'mp4',
+    'video/webm': 'webm',
+    'video/quicktime': 'mov',
  };
  return map[mimeType] ?? 'jpg';
 }
--- a/frontend/src/components/MemeCard.tsx
+++ b/frontend/src/components/MemeCard.tsx
@@ -1,5 +1,5 @@
-import { useState } from 'react';
-import { Share2, Eye, Layers } from 'lucide-react';
+import { useState, useRef, useEffect } from 'react';
+import { Share2, Eye, Layers, Play } from 'lucide-react';
 import type { Meme } from '../api/client';
 import { api } from '../api/client';

@@ -9,9 +9,38 @@ interface Props {
  onShare: (meme: Meme) => void;
 }

+function isVideo(mimeType: string) {
+  return mimeType.startsWith('video/');
+}
+
 export function MemeCard({ meme, onOpen, onShare }: Props) {
  const [loaded, setLoaded] = useState(false);
  const [hovered, setHovered] = useState(false);
+  const videoRef = useRef<HTMLVideoElement>(null);
+
+  // Autoplay video when it enters the viewport; pause when it leaves
+  useEffect(() => {
+    if (!isVideo(meme.mime_type) || !videoRef.current) return;
+
+    const el = videoRef.current;
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          el.play().catch(() => {});
+        } else {
+          el.pause();
+        }
+      },
+      { threshold: 0.25 }
+    );
+
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [meme.mime_type]);
+
+  const aspectPad = meme.width && meme.height
+    ? `${(meme.height / meme.width) * 100}%`
+    : '56.25%'; // 16:9 fallback

  return (
    <div
@@ -20,25 +49,46 @@ export function MemeCard({ meme, onOpen, onShare }: Props) {
      onMouseLeave={() => setHovered(false)}
      onClick={() => onOpen(meme)}
    >
-      {/* Image */}
-      <img
-        src={api.imageUrl(meme.file_path)}
-        alt={meme.title}
-        loading="lazy"
-        onLoad={() => setLoaded(true)}
-        className={`w-full block transition-all duration-500 ${
-          loaded ? 'opacity-100' : 'opacity-0'
-        } ${hovered ? 'scale-[1.02]' : 'scale-100'} transition-transform duration-300`}
-      />
-
      {/* Skeleton while loading */}
      {!loaded && (
        <div
-          className="absolute inset-0 bg-zinc-800 animate-pulse"
-          style={{ paddingTop: `${(meme.height / meme.width) * 100}%` }}
+          className="w-full bg-zinc-800 animate-pulse"
+          style={{ paddingTop: aspectPad }}
        />
      )}

+      {isVideo(meme.mime_type) ? (
+        <video
+          ref={videoRef}
+          src={api.imageUrl(meme.file_path)}
+          muted
+          loop
+          playsInline
+          onLoadedMetadata={() => setLoaded(true)}
+          className={`w-full block transition-all duration-500 ${
+            loaded ? 'opacity-100' : 'opacity-0 absolute inset-0'
+          } ${hovered ? 'scale-[1.02]' : 'scale-100'} transition-transform duration-300`}
+        />
+      ) : (
+        <img
+          src={api.imageUrl(meme.file_path)}
+          alt={meme.title}
+          loading="lazy"
+          onLoad={() => setLoaded(true)}
+          className={`w-full block transition-all duration-500 ${
+            loaded ? 'opacity-100' : 'opacity-0 absolute inset-0'
+          } ${hovered ? 'scale-[1.02]' : 'scale-100'} transition-transform duration-300`}
+        />
+      )}
+
+      {/* Video badge */}
+      {isVideo(meme.mime_type) && loaded && !hovered && (
+        <div className="absolute top-2 left-2 flex items-center gap-1 px-1.5 py-0.5 rounded bg-zinc-900/80 text-zinc-400">
+          <Play size={10} className="fill-zinc-400" />
+          <span className="text-xs">video</span>
+        </div>
+      )}
+
      {/* Hover overlay */}
      <div
        className={`absolute inset-0 bg-gradient-to-t from-zinc-950/90 via-zinc-950/40 to-transparent transition-opacity duration-200 ${
@@ -67,20 +117,14 @@ export function MemeCard({ meme, onOpen, onShare }: Props) {

          <div className="flex gap-2">
            <button
-              onClick={(e) => {
-                e.stopPropagation();
-                onOpen(meme);
-              }}
+              onClick={(e) => { e.stopPropagation(); onOpen(meme); }}
              className="flex items-center gap-1 text-xs px-2 py-1 rounded-lg bg-white/10 hover:bg-white/20 text-white transition-colors"
            >
              <Eye size={12} />
              View
            </button>
            <button
-              onClick={(e) => {
-                e.stopPropagation();
-                onShare(meme);
-              }}
+              onClick={(e) => { e.stopPropagation(); onShare(meme); }}
              className="flex items-center gap-1 text-xs px-2 py-1 rounded-lg bg-accent/30 hover:bg-accent/50 text-purple-200 transition-colors"
            >
              <Share2 size={12} />
@@ -90,10 +134,7 @@ export function MemeCard({ meme, onOpen, onShare }: Props) {
        </div>
      </div>

-      {/* Child indicator */}
-      {/* (shown from parent detail) — not needed on card itself */}
-
-      {/* Dimensions badge */}
+      {/* Dimensions / resolution badge */}
      <div className="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity">
        <span className="text-xs px-1.5 py-0.5 rounded bg-zinc-900/80 text-zinc-400">
          {meme.width}×{meme.height}
--- a/frontend/src/components/MemeDetail.tsx
+++ b/frontend/src/components/MemeDetail.tsx
@@ -119,7 +119,7 @@ export function MemeDetail({ memeId, onClose }: Props) {
                </button>
              )
            )}
-            {isAdmin && !meme.parent_id && (
+            {isAdmin && !meme.parent_id && !meme.mime_type.startsWith('video/') && (
              <button
                onClick={() => setShowRescale(true)}
                className="flex items-center gap-1 text-sm px-3 py-1.5 rounded-lg bg-zinc-800 hover:bg-zinc-700 text-zinc-300 transition-colors"
@@ -147,15 +147,28 @@ export function MemeDetail({ memeId, onClose }: Props) {

        {/* Body */}
        <div className="flex flex-col md:flex-row flex-1 overflow-hidden">
-          {/* Image panel */}
+          {/* Image / video panel */}
          <div className="flex-1 flex items-center justify-center bg-zinc-950 p-4 overflow-hidden">
            {displayMeme && (
-              <img
-                key={displayMeme.id}
-                src={api.imageUrl(displayMeme.file_path)}
-                alt={displayMeme.title}
-                className="max-w-full max-h-full object-contain rounded-lg animate-fade-in"
-              />
+              displayMeme.mime_type.startsWith('video/') ? (
+                <video
+                  key={displayMeme.id}
+                  src={api.imageUrl(displayMeme.file_path)}
+                  controls
+                  autoPlay
+                  loop
+                  muted
+                  playsInline
+                  className="max-w-full max-h-full rounded-lg animate-fade-in"
+                />
+              ) : (
+                <img
+                  key={displayMeme.id}
+                  src={api.imageUrl(displayMeme.file_path)}
+                  alt={displayMeme.title}
+                  className="max-w-full max-h-full object-contain rounded-lg animate-fade-in"
+                />
+              )
            )}
          </div>

--- a/frontend/src/components/UploadModal.tsx
+++ b/frontend/src/components/UploadModal.tsx
@@ -7,7 +7,7 @@ interface Props {
  defaultCollectionId?: number;
 }

-const ALLOWED = ['image/jpeg', 'image/png', 'image/gif', 'image/webp'];
+const ALLOWED = ['image/jpeg', 'image/png', 'image/gif', 'image/webp', 'video/mp4', 'video/webm', 'video/quicktime'];

 export function UploadModal({ onClose, defaultCollectionId }: Props) {
  const [files, setFiles] = useState<File[]>([]);
@@ -88,11 +88,11 @@ export function UploadModal({ onClose, defaultCollectionId }: Props) {
              Drag & drop images here, or{' '}
              <span className="text-accent">browse files</span>
            </p>
-            <p className="text-xs text-zinc-600 mt-1">JPG, PNG, GIF, WebP — max 100 MB each</p>
+            <p className="text-xs text-zinc-600 mt-1">JPG, PNG, GIF, WebP, MP4, WebM — max 100 MB each</p>
            <input
              ref={inputRef}
              type="file"
-              accept="image/jpeg,image/png,image/gif,image/webp"
+              accept="image/jpeg,image/png,image/gif,image/webp,video/mp4,video/webm,video/quicktime"
              multiple
              className="hidden"
              onChange={(e) => e.target.files && addFiles(e.target.files)}