@novahelm/media

Media components and server-side image processing for NovaHelm — optimized React components for images, video, and galleries, plus Sharp-based processing with variant generation, blur placeholders, and EXIF stripping.

Quick Start

pnpm add @novahelm/media

Components

import { NovaImage, NovaVideo, NovaGallery } from "@novahelm/media";

// Optimized image with blur placeholder
<NovaImage
  src="/uploads/photo.jpg"
  alt="A photo"
  width={800}
  height={600}
  blurDataUrl="data:image/jpeg;base64,..."
/>

// Video player
<NovaVideo src="/uploads/demo.mp4" poster="/uploads/poster.jpg" />

// Image gallery with lightbox
<NovaGallery images={mediaRecords} columns={3} />

Responsive Images

import { ResponsiveImage } from "@novahelm/media";

<ResponsiveImage
  src="/uploads/hero.jpg"
  alt="Hero"
  sizes="(max-width: 768px) 100vw, 50vw"
  variants={mediaRecord.variants}
/>

Server-Side Processing

Import from @novahelm/media/server (or the main entry) for Sharp-based processing:

import {
  processImage,
  generateVariants,
  generateBlurDataUrl,
  getImageMetadata,
  stripExif,
  DEFAULT_VARIANTS,
} from "@novahelm/media";

// Process and optimize an image
const result = await processImage(buffer, {
  maxWidth: 2000,
  quality: 85,
  format: "webp",
});

// Generate multiple size variants (thumbnail, small, medium, large)
const variants = await generateVariants(buffer, DEFAULT_VARIANTS);

// Generate a tiny blur placeholder for instant loading
const blurDataUrl = await generateBlurDataUrl(buffer);

// Read image metadata (dimensions, format, color space)
const meta = await getImageMetadata(buffer);

// Strip EXIF data for privacy
const clean = await stripExif(buffer);

API Reference

| Export | Description | |--------|-------------| | NovaImage | Optimized image component with blur placeholder | | NovaVideo | Video player component | | NovaGallery | Image gallery with lightbox | | ResponsiveImage | Responsive <picture> with srcset from variants | | processImage(buf, opts) | Resize, convert, optimize an image | | generateVariants(buf, presets) | Generate multiple size variants | | generateBlurDataUrl(buf) | Create base64 blur placeholder | | getImageMetadata(buf) | Read dimensions, format, color info | | stripExif(buf) | Remove EXIF metadata | | DEFAULT_VARIANTS | Built-in variant presets (thumbnail, small, medium, large) |