DKBezeler

1import type { ReactNode } from 'react'
2 
3/* Display components for DKBezeler's baked outputs. Both are deliberately plain:
4 * the bake did the hard part, so a framed still is just an image and a framed clip
5 * is just a pair of videos. No dependencies, no client JS. */
6 
7export interface DKBezelImageProps {
8  /** The baked -framed.png. */
9  src: string
10  alt?: string
11  /** Intrinsic pixels of the baked PNG (dkbezeler prints them). Declaring them
12   *  reserves layout before the file arrives. */
13  width: number
14  height: number
15  /** Display width cap. The bake is transparent outside the device, so it sits on
16   *  any background. */
17  maxWidth?: number
18  className?: string
19  /** Render the image yourself (e.g. with next/image). */
20  renderImage?: (src: string, ctx: { alt: string; className: string }) => ReactNode
21}
22 
23export function DKBezelImage({ src, alt, width, height, maxWidth = 460, className, renderImage }: DKBezelImageProps) {
24  return (
25    <figure className={`dkbz-figure${className ? ` ${className}` : ''}`} style={{ maxWidth }}>
26      {renderImage ? (
27        renderImage(src, { alt: alt ?? '', className: 'dkbz-img' })
28      ) : (
29        <img src={src} alt={alt ?? ''} width={width} height={height} className="dkbz-img" loading="lazy" />
30      )}
31    </figure>
32  )
33}
34 
35export interface DKBezelVideoProps {
36  /** Base path of the baked pair: `${base}-light.mp4`, `${base}-dark.mp4` and the
37   *  matching .jpg posters, exactly as dkbezeler wrote them. */
38  base: string
39  /** Accessible label for the clip. */
40  alt?: string
41  /** Intrinsic pixels of the baked videos (dkbezeler prints them). Declares the
42   *  aspect ratio so the box holds its size before video metadata arrives (a bare
43   *  <video> is 300x150 until then, which costs CLS). */
44  width: number
45  height: number
46  maxWidth?: number
47  className?: string
48}
49 
50/**
51 * H.264 has no alpha, so the bake writes a light version and a dark version with
52 * corners matched to each theme's page background. Both render; CSS shows exactly one
53 * (`.dark` class convention, falling back to prefers-color-scheme). The hidden one
54 * is display:none, so it never fetches past metadata or plays.
55 */
56export function DKBezelVideo({ base, alt, width, height, maxWidth = 460, className }: DKBezelVideoProps) {
57  return (
58    <figure className={`dkbz-figure${className ? ` ${className}` : ''}`} style={{ maxWidth }}>
59      {(['light', 'dark'] as const).map((theme) => (
60        <video
61          key={theme}
62// … truncated