@iternio/react-native-auto-play 0.3.13 → 0.3.14

package/src/types/Image.ts

@@ -1,61 +1,26 @@
 import type { ImageSourcePropType } from 'react-native';
 import type { ThemedColor } from '../utils/NitroColor';
+import type { GlyphName } from './Glyphmap';
 
-/**
- * Augment this interface in your app to get type-safe glyph name autocompletion.
- *
- * @example
- * ```ts
- * // autoplay-glyphs.d.ts
- * import type { GlyphName } from './assets/symbolFont/Glyphmap';
- * declare module '@iternio/react-native-auto-play' {
- *   interface AutoPlayGlyphMap extends Record<GlyphName, number> {}
- * }
- * ```
- */
-// biome-ignore lint/suspicious/noEmptyInterface: must be an interface for declaration merging
-export interface AutoPlayGlyphMap {}
-
-/** Resolves to the augmented glyph name union, or falls back to `string` when not augmented. */
-export type GlyphMapKey = keyof AutoPlayGlyphMap extends never
-  ? string
-  : Extract<keyof AutoPlayGlyphMap, string>;
-
-type GlyphStyleFields = {
-  /**
-   * Sets the icon dark and light mode color or a single color for both.
-   * Defaults to white for dark mode and black for light mode if not specified.
-   * Might not get applied everywhere like MapTemplate buttons on Android.
-   */
-  color?: ThemedColor | string;
-
-  /**
-   * Sets the background color for dark and light mode or a single color for both
-   * Defaults to transparent if not specified.
-   */
-  backgroundColor?: ThemedColor | string;
-  fontScale?: number;
-};
-
-/** Glyph by name — looked up in the glyph map registered via {@link setIconFont}. */
-export type AutoGlyphByName = GlyphStyleFields & {
-  type: 'glyph';
-  /** Key in the glyph map passed to `setIconFont`. */
-  name: GlyphMapKey;
-  /** Optional override — if set, used instead of the map lookup. */
-  codepoint?: number;
-};
-
-/** Glyph by raw Unicode code point. */
-export type AutoGlyphByCodepoint = GlyphStyleFields & {
-  type: 'glyph';
-  codepoint: number;
-};
+export type AutoImage =
+  | {
+      name: GlyphName;
 
-export type AutoGlyph = AutoGlyphByName | AutoGlyphByCodepoint;
+      /**
+       * Sets the icon dark and light mode color or a single color for both.
+       * Defaults to white for dark mode and black for light mode if not specified.
+       * Might not get applied everywhere like MapTemplate buttons on Android.
+       */
+      color?: ThemedColor | string;
 
-export type AutoImage =
-  | AutoGlyph
+      /**
+       * Sets the background color for dark and light mode or a single color for both
+       * Defaults to transparent if not specified.
+       */
+      backgroundColor?: ThemedColor | string;
+      fontScale?: number;
+      type: 'glyph';
+    }
   | {
       image: ImageSourcePropType;
       /**

package/src/types/Maneuver.ts

@@ -1,6 +1,6 @@
 import type { ImageSourcePropType } from 'react-native';
 import type { ThemedColor } from '../utils/NitroColor';
-import type { AutoGlyphByCodepoint, AutoGlyphByName } from './Image';
+import type { GlyphName } from './Glyphmap';
 import type { TravelEstimates } from './Trip';
 
 export enum ManeuverType {
@@ -174,8 +174,15 @@ export interface PreferredLane extends Lane {
 }
 
 export type ManeuverImage =
-  | Pick<AutoGlyphByName, 'type' | 'name' | 'codepoint' | 'color'>
-  | Pick<AutoGlyphByCodepoint, 'type' | 'codepoint' | 'color'>
+  | {
+      name: GlyphName;
+      /**
+       * make sure to specify a color with a proper contrast ratio to cardBackgroundColor otherwise it might not get applied
+       * defaults to white/black for dark/light mode
+       */
+      color?: ThemedColor | string;
+      type: 'glyph';
+    }
   | {
       image: ImageSourcePropType;
       /**

package/src/utils/NitroImage.ts

@@ -1,69 +1,8 @@
 import { Image, type ImageResolvedAssetSource } from 'react-native';
+import { glyphMap } from '../types/Glyphmap';
 import type { AutoImage } from '../types/Image';
 import { type NitroColor, NitroColorUtil } from './NitroColor';
 
-let _iconFont: string | undefined;
-let _glyphMap: Record<string, number> | undefined;
-
-/**
- * Register the icon font and (optionally) a glyph map for name-based lookups.
- * Must be called **once** before creating any templates. Subsequent calls are ignored.
- *
- * The font name maps directly to a native font asset:
- * - **Android** — `res/font/<name>.ttf` (must be lowercase)
- * - **iOS** — `<name>.ttf` in the app bundle (registered via CoreText automatically)
- *
- * For cross-platform compatibility use lowercase with underscores only.
- *
- * @param name  Native font asset name (without extension).
- * @param glyphMap  Optional map of glyph names to Unicode code points.
- *                  When provided, glyphs can use `{ type: 'glyph', name: 'icon_name' }`.
- *
- * @example
- * ```ts
- * import { glyphMap } from './assets/Glyphmap';
- * setIconFont('material_symbols', glyphMap);
- * ```
- */
-export function setIconFont(name: string, glyphMap?: Record<string, number>): void {
-  if (_iconFont != null) {
-    return;
-  }
-  _iconFont = name;
-  _glyphMap = glyphMap;
-}
-
-function getIconFont(): string {
-  if (_iconFont == null) {
-    throw new Error(
-      'No icon font configured. Call setIconFont("your_font_name") before using glyph images.'
-    );
-  }
-  return _iconFont;
-}
-
-function resolveGlyph(image: Extract<AutoImage, { type: 'glyph' }>): number {
-  if ('name' in image && image.name !== undefined) {
-    if (image.codepoint !== undefined) {
-      return image.codepoint;
-    }
-    if (_glyphMap == null) {
-      throw new Error(
-        `Glyph name "${image.name}" used but no glyph map was provided to setIconFont().`
-      );
-    }
-    const cp = _glyphMap[image.name];
-    if (cp === undefined) {
-      throw new Error(`Glyph name "${image.name}" not found in the glyph map.`);
-    }
-    return cp;
-  }
-  if (image.codepoint !== undefined) {
-    return image.codepoint;
-  }
-  throw new Error('Glyph image must provide either `name` or `codepoint`.');
-}
-
 interface AssetImage extends ImageResolvedAssetSource {
   color?: NitroColor;
   packager_asset: boolean;
@@ -71,7 +10,6 @@ interface AssetImage extends ImageResolvedAssetSource {
 
 interface GlyphImage {
   glyph: number;
-  fontName: string;
   color: NitroColor;
   backgroundColor: NitroColor;
   fontScale?: number;
@@ -84,7 +22,8 @@ interface RemoteImage {
 }
 
 /**
- * NitroModules-compatible image types passed to native.
+ * we need to map the ButtonImage.name from GlyphName to
+ * the actual numeric value so we need a nitro specific type
  */
 export type NitroImage = GlyphImage | AssetImage | RemoteImage;
 
@@ -99,12 +38,12 @@ function convert(image?: AutoImage): NitroImage | undefined {
     const {
       color = { darkColor: 'white', lightColor: 'black' },
       fontScale,
+      name,
       backgroundColor = 'transparent',
     } = image;
 
     return {
-      glyph: resolveGlyph(image),
-      fontName: getIconFont(),
+      glyph: glyphMap[name],
       color: NitroColorUtil.convert(color),
       backgroundColor: NitroColorUtil.convert(backgroundColor),
       fontScale,