@amazon-devices/expo-image 2.0.1758683737

package/src/utils/AssetSourceResolver.web.ts

@@ -0,0 +1,88 @@
+import { Platform } from 'expo-modules-core';
+import { PixelRatio } from 'react-native';
+import { PackagerAsset } from 'react-native/Libraries/Image/AssetRegistry';
+
+export type ResolvedAssetSource = {
+  __packager_asset: boolean;
+  width?: number;
+  height?: number;
+  uri: string;
+  scale: number;
+};
+
+// Returns the Metro dev server-specific asset location.
+function getScaledAssetPath(asset): string {
+  const scale = AssetSourceResolver.pickScale(asset.scales, PixelRatio.get());
+  const scaleSuffix = scale === 1 ? '' : '@' + scale + 'x';
+  const type = !asset.type ? '' : `.${asset.type}`;
+  if (__DEV__) {
+    return asset.httpServerLocation + '/' + asset.name + scaleSuffix + type;
+  } else {
+    return asset.httpServerLocation.replace(/\.\.\//g, '_') + '/' + asset.name + scaleSuffix + type;
+  }
+}
+
+export default class AssetSourceResolver {
+  serverUrl: string;
+  // where the jsbundle is being run from
+  // NOTE(EvanBacon): Never defined on web.
+  jsbundleUrl?: string | null;
+  // the asset to resolve
+  asset: PackagerAsset;
+
+  constructor(
+    serverUrl: string | undefined | null,
+    jsbundleUrl: string | undefined | null,
+    asset: PackagerAsset
+  ) {
+    this.serverUrl = serverUrl || 'https://expo.dev';
+    this.jsbundleUrl = null;
+    this.asset = asset;
+  }
+
+  // Always true for web runtimes
+  isLoadedFromServer(): boolean {
+    return true;
+  }
+
+  // Always false for web runtimes
+  isLoadedFromFileSystem(): boolean {
+    return false;
+  }
+
+  defaultAsset(): ResolvedAssetSource {
+    return this.assetServerURL();
+  }
+
+  /**
+   * @returns absolute remote URL for the hosted asset.
+   */
+  assetServerURL(): ResolvedAssetSource {
+    const fromUrl = new URL(getScaledAssetPath(this.asset), this.serverUrl);
+    fromUrl.searchParams.set('platform', Platform.OS);
+    fromUrl.searchParams.set('hash', this.asset.hash);
+    return this.fromSource(
+      // Relative on web
+      fromUrl.toString().replace(fromUrl.origin, '')
+    );
+  }
+
+  fromSource(source: string): ResolvedAssetSource {
+    return {
+      __packager_asset: true,
+      width: this.asset.width ?? undefined,
+      height: this.asset.height ?? undefined,
+      uri: source,
+      scale: AssetSourceResolver.pickScale(this.asset.scales, PixelRatio.get()),
+    };
+  }
+
+  static pickScale(scales: number[], deviceScale: number): number {
+    for (let i = 0; i < scales.length; i++) {
+      if (scales[i] >= deviceScale) {
+        return scales[i];
+      }
+    }
+    return scales[scales.length - 1] || 1;
+  }
+}

package/src/utils/blurhash/base83.ts

@@ -0,0 +1,104 @@
+const digitCharacters = [
+  '0',
+  '1',
+  '2',
+  '3',
+  '4',
+  '5',
+  '6',
+  '7',
+  '8',
+  '9',
+  'A',
+  'B',
+  'C',
+  'D',
+  'E',
+  'F',
+  'G',
+  'H',
+  'I',
+  'J',
+  'K',
+  'L',
+  'M',
+  'N',
+  'O',
+  'P',
+  'Q',
+  'R',
+  'S',
+  'T',
+  'U',
+  'V',
+  'W',
+  'X',
+  'Y',
+  'Z',
+  'a',
+  'b',
+  'c',
+  'd',
+  'e',
+  'f',
+  'g',
+  'h',
+  'i',
+  'j',
+  'k',
+  'l',
+  'm',
+  'n',
+  'o',
+  'p',
+  'q',
+  'r',
+  's',
+  't',
+  'u',
+  'v',
+  'w',
+  'x',
+  'y',
+  'z',
+  '#',
+  '$',
+  '%',
+  '*',
+  '+',
+  ',',
+  '-',
+  '.',
+  ':',
+  ';',
+  '=',
+  '?',
+  '@',
+  '[',
+  ']',
+  '^',
+  '_',
+  '{',
+  '|',
+  '}',
+  '~',
+];
+
+export const decode83 = (str: string) => {
+  let value = 0;
+  for (let i = 0; i < str.length; i++) {
+    const c = str[i];
+    const digit = digitCharacters.indexOf(c);
+    value = value * 83 + digit;
+  }
+  return value;
+};
+
+export const encode83 = (n: number, length: number): string => {
+  let result = '';
+  for (let i = 1; i <= length; i++) {
+    const digit = (Math.floor(n) / Math.pow(83, length - i)) % 83;
+    result += digitCharacters[Math.floor(digit)];
+  }
+  return result;
+};

package/src/utils/blurhash/decode.ts

@@ -0,0 +1,114 @@
+import { decode83 } from './base83';
+import { ValidationError } from './error';
+import { sRGBToLinear, signPow, linearTosRGB } from './utils';
+
+/**
+ * Returns an error message if invalid or undefined if valid
+ * @param blurhash
+ */
+const validateBlurhash = (blurhash: string) => {
+  if (!blurhash || blurhash.length < 6) {
+    throw new ValidationError('The blurhash string must be at least 6 characters');
+  }
+
+  const sizeFlag = decode83(blurhash[0]);
+  const numY = Math.floor(sizeFlag / 9) + 1;
+  const numX = (sizeFlag % 9) + 1;
+
+  if (blurhash.length !== 4 + 2 * numX * numY) {
+    throw new ValidationError(
+      `blurhash length mismatch: length is ${blurhash.length} but it should be ${
+        4 + 2 * numX * numY
+      }`
+    );
+  }
+};
+
+export const isBlurhashValid = (blurhash: string): { result: boolean; errorReason?: string } => {
+  try {
+    validateBlurhash(blurhash);
+  } catch (error) {
+    return { result: false, errorReason: error.message };
+  }
+
+  return { result: true };
+};
+
+const decodeDC = (value: number) => {
+  const intR = value >> 16;
+  const intG = (value >> 8) & 255;
+  const intB = value & 255;
+  return [sRGBToLinear(intR), sRGBToLinear(intG), sRGBToLinear(intB)];
+};
+
+const decodeAC = (value: number, maximumValue: number) => {
+  const quantR = Math.floor(value / (19 * 19));
+  const quantG = Math.floor(value / 19) % 19;
+  const quantB = value % 19;
+
+  const rgb = [
+    signPow((quantR - 9) / 9, 2.0) * maximumValue,
+    signPow((quantG - 9) / 9, 2.0) * maximumValue,
+    signPow((quantB - 9) / 9, 2.0) * maximumValue,
+  ];
+
+  return rgb;
+};
+
+const decode = (blurhash: string, width: number, height: number, punch?: number) => {
+  validateBlurhash(blurhash);
+
+  punch = (punch || 1) | 1;
+
+  const sizeFlag = decode83(blurhash[0]);
+  const numY = Math.floor(sizeFlag / 9) + 1;
+  const numX = (sizeFlag % 9) + 1;
+
+  const quantisedMaximumValue = decode83(blurhash[1]);
+  const maximumValue = (quantisedMaximumValue + 1) / 166;
+
+  const colors = new Array(numX * numY);
+
+  for (let i = 0; i < colors.length; i++) {
+    if (i === 0) {
+      const value = decode83(blurhash.substring(2, 6));
+      colors[i] = decodeDC(value);
+    } else {
+      const value = decode83(blurhash.substring(4 + i * 2, 6 + i * 2));
+      colors[i] = decodeAC(value, maximumValue * punch);
+    }
+  }
+
+  const bytesPerRow = width * 4;
+  const pixels = new Uint8ClampedArray(bytesPerRow * height);
+
+  for (let y = 0; y < height; y++) {
+    for (let x = 0; x < width; x++) {
+      let r = 0;
+      let g = 0;
+      let b = 0;
+
+      for (let j = 0; j < numY; j++) {
+        for (let i = 0; i < numX; i++) {
+          const basis = Math.cos((Math.PI * x * i) / width) * Math.cos((Math.PI * y * j) / height);
+          const color = colors[i + j * numX];
+          r += color[0] * basis;
+          g += color[1] * basis;
+          b += color[2] * basis;
+        }
+      }
+
+      const intR = linearTosRGB(r);
+      const intG = linearTosRGB(g);
+      const intB = linearTosRGB(b);
+
+      pixels[4 * x + 0 + y * bytesPerRow] = intR;
+      pixels[4 * x + 1 + y * bytesPerRow] = intG;
+      pixels[4 * x + 2 + y * bytesPerRow] = intB;
+      pixels[4 * x + 3 + y * bytesPerRow] = 255; // alpha
+    }
+  }
+  return pixels;
+};
+
+export default decode;

package/src/utils/blurhash/error.ts

@@ -0,0 +1,7 @@
+export class ValidationError extends Error {
+  constructor(message: string) {
+    super(message);
+    this.name = 'ValidationError';
+    this.message = message;
+  }
+}

package/src/utils/blurhash/useBlurhash.tsx

@@ -0,0 +1,81 @@
+// adapted from https://gist.github.com/ngbrown/d62eb518753378eb0a9bf02bb4723235
+// modified from https://gist.github.com/WorldMaker/a3cbe0059acd827edee568198376b95a
+// https://github.com/woltapp/react-blurhash/issues/3
+
+import { useEffect, useState, useMemo } from 'react';
+
+import decode from './decode';
+import { isBlurhashString } from '../resolveSources';
+
+const DEFAULT_SIZE = {
+  width: 32,
+  height: 32,
+};
+
+// We scale up the canvas to avoid an irritating visual glitch when animating in Chrome.
+const scaleRatio = 10;
+
+export function useBlurhash(
+  blurhash: { uri?: string; width?: number; height?: number } | undefined | null,
+  punch: number = 1
+) {
+  punch = punch || 1;
+
+  const [uri, setUri] = useState<string | null>(null);
+
+  useEffect(() => {
+    let isCanceled = false;
+
+    if (!blurhash || !blurhash.uri || !isBlurhashString(blurhash.uri)) return;
+
+    const pixels = decode(
+      blurhash.uri,
+      blurhash?.width ?? DEFAULT_SIZE.width,
+      blurhash?.height ?? DEFAULT_SIZE.height,
+      punch
+    );
+
+    const canvas = document.createElement('canvas');
+    const upscaledCanvas = document.createElement('canvas');
+    canvas.width = blurhash?.width ?? DEFAULT_SIZE.width;
+    canvas.height = blurhash?.height ?? DEFAULT_SIZE.height;
+    upscaledCanvas.width = (blurhash?.width ?? DEFAULT_SIZE.width) * scaleRatio;
+    upscaledCanvas.height = (blurhash?.height ?? DEFAULT_SIZE.height) * scaleRatio;
+    const context = canvas.getContext('2d');
+    if (!context) {
+      console.warn('Failed to decode blurhash');
+      return;
+    }
+    const imageData = context.createImageData(canvas.width, canvas.height);
+    imageData.data.set(pixels);
+    context.putImageData(imageData, 0, 0);
+    const upscaledContext = upscaledCanvas.getContext('2d');
+    if (!upscaledContext) {
+      console.warn('Failed to decode blurhash');
+      return;
+    }
+    upscaledContext.scale(scaleRatio, scaleRatio);
+    upscaledContext.drawImage(canvas, 0, 0);
+    upscaledCanvas.toBlob((blob) => {
+      if (!isCanceled) {
+        setUri((oldUrl) => {
+          if (oldUrl) {
+            URL.revokeObjectURL(oldUrl);
+          }
+          return blob ? URL.createObjectURL(blob) : oldUrl;
+        });
+      }
+    });
+
+    return function cleanupBlurhash() {
+      isCanceled = true;
+      setUri((oldUrl) => {
+        if (oldUrl) {
+          URL.revokeObjectURL(oldUrl);
+        }
+        return null;
+      });
+    };
+  }, [blurhash?.uri, blurhash?.height, blurhash?.width, punch]);
+  return useMemo(() => (uri ? { uri } : null), [uri]);
+}

package/src/utils/blurhash/utils.ts

@@ -0,0 +1,21 @@
+export const sRGBToLinear = (value: number) => {
+  const v = value / 255;
+  if (v <= 0.04045) {
+    return v / 12.92;
+  } else {
+    return Math.pow((v + 0.055) / 1.055, 2.4);
+  }
+};
+
+export const linearTosRGB = (value: number) => {
+  const v = Math.max(0, Math.min(1, value));
+  if (v <= 0.0031308) {
+    return Math.trunc(v * 12.92 * 255 + 0.5);
+  } else {
+    return Math.trunc((1.055 * Math.pow(v, 1 / 2.4) - 0.055) * 255 + 0.5);
+  }
+};
+
+export const sign = (n: number) => (n < 0 ? -1 : 1);
+
+export const signPow = (val: number, exp: number) => sign(val) * Math.pow(Math.abs(val), exp);

package/src/utils/resolveAssetSource.tsx

@@ -0,0 +1,3 @@
+import resolveAssetSource from 'react-native/Libraries/Image/resolveAssetSource';
+
+export default resolveAssetSource;

package/src/utils/resolveAssetSource.web.ts

@@ -0,0 +1,40 @@
+import { getAssetByID } from 'react-native/Libraries/Image/AssetRegistry';
+
+import AssetSourceResolver, { ResolvedAssetSource } from './AssetSourceResolver.web';
+
+let _customSourceTransformer;
+
+export function setCustomSourceTransformer(
+  transformer: (resolver: AssetSourceResolver) => ResolvedAssetSource
+): void {
+  _customSourceTransformer = transformer;
+}
+
+/**
+ * `source` is either a number (opaque type returned by require('./foo.png'))
+ * or an `ImageSource` like { uri: '<http location || file path>' }
+ */
+export default function resolveAssetSource(source: any): ResolvedAssetSource | undefined {
+  if (typeof source === 'object') {
+    return source;
+  }
+
+  const asset = getAssetByID(source);
+  if (!asset) {
+    return undefined;
+  }
+
+  const resolver = new AssetSourceResolver('https://expo.dev', null, asset);
+  if (_customSourceTransformer) {
+    return _customSourceTransformer(resolver);
+  }
+  return resolver.defaultAsset();
+}
+
+Object.defineProperty(resolveAssetSource, 'setCustomSourceTransformer', {
+  get() {
+    return setCustomSourceTransformer;
+  },
+});
+
+export const { pickScale } = AssetSourceResolver;

package/src/utils/resolveHashString.tsx

@@ -0,0 +1,36 @@
+import { ImageSource } from '../Image.types';
+
+type ImageHashType = 'blurhash' | 'thumbhash';
+
+function hashToUri(type: ImageHashType, hash: string): string {
+  const encodedBlurhash = encodeURI(hash).replace(/#/g, '%23').replace(/\?/g, '%3F');
+  return `${type}:/${encodedBlurhash}`;
+}
+
+/**
+ * Converts a blurhash string (`blurhash:/<hash>/<width>/<height>` or <hash>/<width>/<height>) into an `ImageSource`.
+ *
+ * @return An ImageSource representing the provided blurhash.
+ * */
+export function resolveBlurhashString(str: string): ImageSource {
+  const [blurhash, width, height] = str.replace(/^blurhash:\//, '').split('/');
+  return {
+    uri: hashToUri('blurhash', blurhash),
+    width: parseInt(width, 10) || 16,
+    height: parseInt(height, 10) || 16,
+  };
+}
+
+/**
+ * Converts a thumbhash string (`thumbhash:/<hash>` or `<hash>`) into an `ImageSource`.
+ *
+ * @return An ImageSource representing the provided thumbhash.
+ * */
+export function resolveThumbhashString(str: string): ImageSource {
+  // ThumbHash may contain slashes that could break the url when the slash is at the beginning.
+  // We replace slashes with backslashes to make sure we don't break the url's path.
+  const thumbhash = str.replace(/^thumbhash:\//, '').replace(/\//g, '\\');
+  return {
+    uri: hashToUri('thumbhash', thumbhash),
+  };
+}

package/src/utils/resolveHashString.web.tsx

@@ -0,0 +1,33 @@
+import { ImageSource } from '../Image.types';
+
+/**
+ * Converts a string in blurhash format (`blurhash:/<hash>/<width>/<height>`
+ * or <hash>/<width>/<height>) into an `ImageSource`.
+ * Note: The blurhash:/ uri scheme is removed, because for backward compatibility reasons,
+ * strings without a scheme are assumed to be `blurhash` by default.
+ *
+ * @return An ImageSource representing the provided blurhash.
+ * */
+export function resolveBlurhashString(str: string): ImageSource {
+  const [blurhash, width, height] = str.replace(/^blurhash:\//, '').split('/');
+  return {
+    uri: blurhash,
+    width: parseInt(width, 10) || 16,
+    height: parseInt(height, 10) || 16,
+  };
+}
+
+/**
+ * Converts a string in thumbhash format (`thumbhash:/<hash>` or `<hash>`)
+ * into an `ImageSource`.
+ * Note: Unlike the `resolveBlurhashString` the `thumbhash:/` scheme has to be present,
+ * as the scheme has to be explicitly stated to be interpreted a `thumbhash` source.
+ *
+ * @return An ImageSource representing the provided thumbhash.
+ * */
+export function resolveThumbhashString(str: string): ImageSource {
+  const hash = str.replace(/^thumbhash:\//, '');
+  return {
+    uri: 'thumbhash:/' + hash,
+  };
+}

package/src/utils/resolveSources.tsx

@@ -0,0 +1,48 @@
+import resolveAssetSource from './resolveAssetSource';
+import { resolveBlurhashString, resolveThumbhashString } from './resolveHashString';
+import { ImageNativeProps, ImageProps, ImageSource } from '../Image.types';
+
+export function isBlurhashString(str: string): boolean {
+  return /^(blurhash:\/)?[\w#$%*+,\-.:;=?@[\]^_{}|~]+(\/[\d.]+)*$/.test(str);
+}
+
+// Base64 strings will be recognized as blurhash by default (to keep compatibility),
+// interpret as thumbhash only if correct uri scheme is provided
+export function isThumbhashString(str: string): boolean {
+  return str.startsWith('thumbhash:/');
+}
+
+function resolveSource(source?: ImageSource | string | number | null): ImageSource | null {
+  if (typeof source === 'string') {
+    if (isBlurhashString(source)) {
+      return resolveBlurhashString(source);
+    } else if (isThumbhashString(source)) {
+      return resolveThumbhashString(source);
+    }
+    return { uri: source };
+  }
+  if (typeof source === 'number') {
+    return resolveAssetSource(source);
+  }
+  if (typeof source === 'object' && (source?.blurhash || source?.thumbhash)) {
+    const { blurhash, thumbhash, ...restSource } = source;
+    const resolved = thumbhash
+      ? resolveThumbhashString(thumbhash)
+      : resolveBlurhashString(blurhash as string);
+    return {
+      ...resolved,
+      ...restSource,
+    };
+  }
+  return source ?? null;
+}
+
+/**
+ * Resolves provided `source` prop to an array of objects expected by the native implementation.
+ */
+export function resolveSources(sources?: ImageProps['source']): ImageNativeProps['source'] {
+  if (Array.isArray(sources)) {
+    return sources.map(resolveSource).filter(Boolean) as ImageSource[];
+  }
+  return [resolveSource(sources)].filter(Boolean) as ImageSource[];
+}