@graphcommerce/image 10.1.0-canary.36 → 10.1.0-canary.39

package/CHANGELOG.md

@@ -1,5 +1,37 @@
 # Change Log
 
+## 10.1.0-canary.39
+
+### Minor Changes
+
+- [#2652](https://github.com/graphcommerce-org/graphcommerce/pull/2652) [`cd21a97`](https://github.com/graphcommerce-org/graphcommerce/commit/cd21a97c705ced2d051351a2860780f9ba173d4b) - Let a Storyblok video asset show a poster.
+
+  A `<video>` paints nothing until it has buffered enough for its first frame, and nothing at all when autoplay is blocked (iOS Low Power Mode) — so an autoplaying video banner starts out black, and can stay black. `Asset` now takes a `poster` prop, rendered as `<video poster>`.
+
+  Storyblok's own `type: asset` has no room for a poster, so `assetWithPoster()` is added to read the convention of an asset value carrying an extra `poster` key:
+
+  ```jsonc
+  {
+    "fieldtype": "asset",
+    "id": 1,
+    "filename": "…",
+    "poster": { "filename": "…" },
+  }
+  ```
+
+  Keeping the poster beside the asset rather than nesting both under a wrapper means a custom field type storing that shape is a drop-in for a plain asset field: existing content stays valid and `value.filename` keeps working for consumers that ignore the poster. The narrowing is unavoidable — Storyblok has no JSONSchema for custom field types, so its type generator emits `unknown` for them.
+
+  ```tsx
+  const { asset, poster } = assetWithPoster(blok.asset)
+  return asset && <Asset asset={asset} poster={poster} />
+  ```
+
+  `@graphcommerce/image` gains `imageUrl(src, { width, quality })`, which builds an optimized URL outside of a React tree — for the places that need a bare URL string rather than an `<Image>`, such as `<video poster>`, a CSS `background-image` or an `og:image`. It routes through the configured loader exactly like `<Image>` does, so the bytes are served and cached by your own deployment rather than fetched from the origin host by every visitor, which matters when the origin meters bandwidth. `width` is snapped up to the nearest configured size, since the optimizer rejects any width outside `imageSizes`/`deviceSizes`. ([@bramvanderholst](https://github.com/bramvanderholst))
+
+## 10.1.0-canary.38
+
+## 10.1.0-canary.37
+
 ## 10.1.0-canary.36
 
 ## 10.1.0-canary.35

package/config/config.ts

@@ -130,3 +130,44 @@ export function customLoader({ src }: ImageLoaderProps): string {
       '\nRead more: https://nextjs.org/docs/messages/next-image-missing-loader',
   )
 }
+
+const urlLoaders = {
+  default: defaultLoader,
+  imgix: imgixLoader,
+  cloudinary: cloudinaryLoader,
+  akamai: akamaiLoader,
+}
+
+/**
+ * Build an optimized image URL outside of a React tree, for the places that
+ * need a bare URL string rather than an `<Image>` — `<video poster>`, a CSS
+ * `background-image`, an `og:image`.
+ *
+ * Routes through the configured loader exactly like `<Image>` does, so the
+ * bytes are served and cached by your own deployment rather than fetched from
+ * the origin host by every visitor. That matters when the origin meters
+ * bandwidth.
+ *
+ * `width` is snapped up to the nearest configured size: the optimizer rejects
+ * any width outside `imageSizes`/`deviceSizes` with a 400. Format is negotiated
+ * by the optimizer on the request's `Accept` header and can't be pinned here.
+ *
+ * Returns `src` untouched under a `custom` loader, which exists only as a
+ * per-`<Image>` prop and so can't be resolved from here.
+ */
+export function imageUrl(src: string, options: { width: number; quality?: number }): string {
+  const { width, quality = 75 } = options
+  if (configLoader === 'custom') return src
+
+  const config =
+    (process.env.__NEXT_IMAGE_OPTS as unknown as ImageConfigComplete) || imageConfigDefault
+  const allSizes = [...configImageSizes, ...configDeviceSizes].sort((a, b) => a - b)
+  const snapped = allSizes.find((size) => size >= width) ?? allSizes[allSizes.length - 1]
+
+  return (urlLoaders[configLoader] ?? defaultLoader)({
+    config: { ...config, allSizes },
+    src,
+    width: snapped,
+    quality,
+  })
+}

package/index.ts

@@ -1 +1,2 @@
 export * from './components/Image'
+export { imageUrl } from './config/config'

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/image",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "10.1.0-canary.36",
+  "version": "10.1.0-canary.39",
   "sideEffects": false,
   "scripts": {
     "dev": "tsc -W"
@@ -18,10 +18,10 @@
     }
   },
   "peerDependencies": {
-    "@graphcommerce/eslint-config-pwa": "^10.1.0-canary.36",
-    "@graphcommerce/framer-utils": "^10.1.0-canary.36",
-    "@graphcommerce/prettier-config-pwa": "^10.1.0-canary.36",
-    "@graphcommerce/typescript-config-pwa": "^10.1.0-canary.36",
+    "@graphcommerce/eslint-config-pwa": "^10.1.0-canary.39",
+    "@graphcommerce/framer-utils": "^10.1.0-canary.39",
+    "@graphcommerce/prettier-config-pwa": "^10.1.0-canary.39",
+    "@graphcommerce/typescript-config-pwa": "^10.1.0-canary.39",
     "@mui/material": "^7.0.0",
     "next": "*",
     "react": "^19.2.0",