@prood/media

@prood/media is the brand image library: graded photographs and film, written alt text, blur placeholders and credits. It serves Prood's marketing, sign-in and docs pages. Merchant files are separate: see @prood/storage-s3.

InstallationCopy Anchor Link

Already a workspace dependency. Add the package to transpilePackages and allow its host for next/image:

import { mediaRemotePattern } from '@prood/media/remote-pattern'

const nextConfig = {
  transpilePackages: ['@prood/ui', '@prood/media'],
  images: { remotePatterns: [mediaRemotePattern] },
}

ImagesCopy Anchor Link

MediaImage wraps next/image. Pass a slug from the library and it fills in the URL, size, blur placeholder and alt text:

import { MediaImage } from '@prood/media/image'

<div className="relative aspect-[3/2]">
  <MediaImage slug="keys-door" fill sizes="(min-width: 768px) 50vw, 100vw" className="object-cover" />
</div>

Every other prop passes through to next/image, except src, alt, width, height and the placeholder props, which come from the library.

A fill image without sizes uses FULL_BLEED_SIZES, which allows for a landscape photo cropped to a tall viewport. Set sizes yourself for anything narrower than the viewport, and allow for the crop: on a 4:5 card, size for the card's height unless the source is portrait.

FilmCopy Anchor Link

MediaVideo plays a silent loop over its poster, with a wide cut for tablets and up and a portrait cut for phones. It includes the pause control, and reduced motion shows the poster alone:

import { MediaVideo } from '@prood/media/video'

<MediaVideo slug="hero-film" />

It's a client component. The other exports are getImage and getVideo for the raw entries, mediaCredits for the credits page and FULL_BLEED_SIZES, all from @prood/media.

Adding to the libraryCopy Anchor Link

Add the entry to packages/media/curation.json, with a crop if anything needs keeping out of frame, then run the build. It fetches from Pexels, applies the Prood grade from scripts/grade.mjs, uploads to R2 and writes src/library.json:

pnpm --filter @prood/media media:build

Related pagesCopy Anchor Link