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

package/README.md

@@ -304,49 +304,7 @@ When using build variants, Android Studio may not be aware of the selected varia
 To work around this and allow for debugging or enhancing the Android Automotive-specific implementation, you can temporarily set the automotive flags in your `gradle.properties` file or your default `.env` file before running a Gradle sync.
 
 ## Icons
-The library does **not** bundle any icon font — the consuming app must provide one.
-
-### Setup
-
-1. Add a `.ttf` font file to your native projects:
-   - **iOS** — add `<name>.ttf` to your app bundle (no `UIAppFonts` entry needed — the library registers it via CoreText automatically).
-   - **Android** — place `<name>.ttf` in `res/font/`.
-
-   For cross-platform compatibility use **lowercase names with underscores only** (e.g. `material_symbols`).
-
-2. Register the font and an optional glyph map at startup:
-
-   ```ts
-   import { setIconFont } from '@iternio/react-native-auto-play';
-   import { glyphMap } from './assets/Glyphmap';
-
-   setIconFont('material_symbols', glyphMap);
-   ```
-
-3. Use glyph images by name or code point:
-
-   ```ts
-   { type: 'glyph', name: 'directions_car' }
-   { type: 'glyph', codepoint: 0xe531 }
-   ```
-
-`setIconFont` must be called once before the first glyph is used (subsequent calls are ignored). If no font is registered, the library throws an error when a glyph image is rendered.
-
-### Type-safe glyph names
-
-To get autocompletion and type checking for glyph names, create a declaration file in your app (e.g. `autoplay-glyphs.d.ts`):
-
-```ts
-import type { GlyphName } from './assets/Glyphmap';
-
-declare module '@iternio/react-native-auto-play' {
-  interface AutoPlayGlyphMap extends Record<GlyphName, number> {}
-}
-```
-
-Without this augmentation, `name` accepts any `string`. With it, only keys from your glyph map are allowed and you get full autocompletion.
-
-The example app uses [Material Symbols](https://fonts.google.com/icons). See `apps/example/assets/symbolFont/` for the glyph map generation script.
+The library is using [Material Symbols](https://fonts.google.com/icons) for iconography. The font is bundled with the library, so no extra setup is required. You can use these icons on both Android Auto and CarPlay.
 
 It is also possible to use custom bundled images (e.g. PNG, WEBP or Vector Drawables). Make sure to add them to your native projects.
 - iOS: Add to your `Images.xcassets`

package/ReactNativeAutoPlay.podspec

@@ -25,6 +25,10 @@ Pod::Spec.new do |s|
   # react helpers like RCTConvert
   s.public_header_files = Array(s.attributes_hash['public_header_files']) + ["ios/ReactHelpers/*.h"]
 
+  s.resource_bundles = {
+    "ReactNativeAutoPlay" => ['ios/Assets/**/*.ttf']
+  }
+  
   s.pod_target_xcconfig = {
     # C++ compiler flags, mainly for folly.
     "GCC_PREPROCESSOR_DEFINITIONS" => "$(inherited) FOLLY_NO_CONFIG FOLLY_CFG_NO_COROUTINES"

package/android/src/main/java/com/margelo/nitro/swe/iternio/reactnativeautoplay/utils/SymbolFont.kt

@@ -10,36 +10,39 @@ import android.graphics.Typeface
 import androidx.car.app.CarContext
 import androidx.core.content.res.ResourcesCompat
 import androidx.core.graphics.createBitmap
-import com.margelo.nitro.swe.iternio.reactnativeautoplay.BuildConfig
+import androidx.core.graphics.drawable.IconCompat
 import com.margelo.nitro.swe.iternio.reactnativeautoplay.GlyphImage
+import com.margelo.nitro.swe.iternio.reactnativeautoplay.NitroImage
+import com.margelo.nitro.swe.iternio.reactnativeautoplay.BuildConfig
+import com.margelo.nitro.swe.iternio.reactnativeautoplay.R
+import com.margelo.nitro.swe.iternio.reactnativeautoplay.template.Parser
 
 object SymbolFont {
-    private var cachedFontName: String? = null
-    private var cachedTypeface: Typeface? = null
+    const val TAG = "SymbolFont"
 
-    private fun loadTypeface(context: Context, fontName: String): Typeface? {
-        if (fontName == cachedFontName) return cachedTypeface
-        val id = context.resources.getIdentifier(
-            fontName.lowercase(), "font", context.packageName
-        )
-        if (id == 0) return null
-        val tf = ResourcesCompat.getFont(context, id) ?: return null
-        cachedFontName = fontName
-        cachedTypeface = tf
-        return tf
+    private var typeface: Typeface? = null
+
+    private fun loadFont(context: Context) {
+        if (typeface != null) {
+            return
+        }
+
+        typeface = ResourcesCompat.getFont(context, R.font.materialsymbolsoutlined_regular)
     }
 
     private fun imageFromGlyph(
         context: Context,
-        glyphImage: GlyphImage,
+        glyph: Double,
         color: Int,
         backgroundColor: Int,
         cornerRadius: Float = 8f, //TODO: make accessible and add it to GlyphImage.cacheKey
+        fontScale: Float,
     ): Bitmap? {
-        val font =
-            loadTypeface(context, glyphImage.fontName) ?: run {
-                return null
-            }
+        loadFont(context)
+
+        val font = typeface ?: run {
+            return null
+        }
 
         val virtualScreenDensity = context.resources.displayMetrics.density
         val scale = BuildConfig.SCALE_FACTOR * virtualScreenDensity
@@ -56,8 +59,6 @@ object SymbolFont {
         }
         canvas.drawRoundRect(rectF, cornerRadius, cornerRadius, paint)
 
-        val fontScale = (glyphImage.fontScale ?: 1.0).toFloat()
-
         // Setup text paint
         paint.reset()
         paint = Paint().apply {
@@ -69,7 +70,7 @@ object SymbolFont {
         }
 
         // Get the character from codepoint
-        val codepoint = glyphImage.glyph.toInt()
+        val codepoint = glyph.toInt()
         val text = String(Character.toChars(codepoint))
 
         // Measure text
@@ -93,13 +94,13 @@ object SymbolFont {
             return bitmap
         }
 
-        bitmap =
-            imageFromGlyph(
-                context = context,
-                glyphImage = image,
-                color = image.color.get(context),
-                backgroundColor = image.backgroundColor.get(context),
-            )
+        bitmap = imageFromGlyph(
+            context = context,
+            glyph = image.glyph,
+            color = image.color.get(context),
+            backgroundColor = image.backgroundColor.get(context),
+            fontScale = (image.fontScale ?: 1.0).toFloat()
+        )
 
         bitmap?.let {
             BitmapCache.put(context, image, it)
@@ -107,4 +108,4 @@ object SymbolFont {
 
         return bitmap
     }
-}
+}

package/ios/utils/SymbolFont.swift

@@ -9,65 +9,67 @@ import CoreText
 import UIKit
 
 class SymbolFont {
-    private static var cachedFontName: String?
-    private static var cachedPSName: String?
+    private static let defaultCanvasSize = 32
 
-    private static func loadFont(named fontName: String) -> String? {
-        if fontName == cachedFontName {
-            return cachedPSName
-        }
+    private static var isRegistered = false
+    private static var fontName: String?
 
-        guard let url = Bundle.main.url(forResource: fontName, withExtension: "ttf") else {
-            print("[AutoPlay] \(fontName).ttf not found in the app bundle — glyph images will not render.")
-            return nil
+    static func loadFont() {
+        let podBundle = Bundle(for: SymbolFont.self)
+
+        guard
+            let bundleURL = podBundle.url(
+                forResource: "ReactNativeAutoPlay",
+                withExtension: "bundle"
+            ),
+            let resourceBundle = Bundle(url: bundleURL),
+            let fontURL = resourceBundle.url(
+                forResource: "MaterialSymbolsOutlined-Regular",
+                withExtension: "ttf"
+            )
+        else {
+            return
         }
 
-        guard let fontData = try? Data(contentsOf: url) as CFData,
+        guard let fontData = try? Data(contentsOf: fontURL) as CFData,
             let provider = CGDataProvider(data: fontData),
             let font = CGFont(provider)
         else {
-            return nil
+            return
         }
 
         var error: Unmanaged<CFError>?
         CTFontManagerRegisterGraphicsFont(font, &error)
-        // Ignore already-registered errors (e.g. hot reload)
-
-        guard let psName = font.fullName as? String else {
-            return nil
+        if let error = error?.takeUnretainedValue() {
+            print("Failed to register font: \(error)")
         }
-
-        cachedFontName = fontName
-        cachedPSName = psName
-        return psName
-    }
-
-    private static func uiFont(for glyphImage: GlyphImage, size: CGFloat, fontScale: CGFloat) -> UIFont? {
-        let pointSize = size * fontScale
-
-        guard let psName = loadFont(named: glyphImage.fontName) else {
-            return nil
+        else {
+            print("Font \(font.fullName as String? ?? "unknown") registered")
         }
 
-        return UIFont(name: psName, size: pointSize)
+        SymbolFont.fontName = font.fullName as? String
+        SymbolFont.isRegistered = true
     }
 
     // creates a single color UIImage
     static func imageFromGlyph(
-        glyphImage: GlyphImage,
+        glyph: Double,
         foregroundColor: UIColor,
         backgroundColor: UIColor,
         size: CGFloat,
         fontScale: CGFloat
     ) -> UIImage? {
-        guard let font = uiFont(for: glyphImage, size: size, fontScale: fontScale) else {
-            return nil
+        if !SymbolFont.isRegistered {
+            SymbolFont.loadFont()
         }
 
-        guard let scalar = UnicodeScalar(UInt32(glyphImage.glyph)) else {
+        guard let fontName = SymbolFont.fontName,
+            let font = UIFont(name: fontName, size: size * fontScale)
+        else {
             return nil
         }
-        let codepoint = String(Character(scalar))
+
+        let codepoint = String(UnicodeScalar(UInt32(glyph))!)
         let canvasSize = CGSize(width: size, height: size)
         let rect = CGRect(origin: .zero, size: canvasSize)
 
@@ -97,14 +99,14 @@ class SymbolFont {
         let y = (canvasSize.height - textSize.height) / 2
         attrString.draw(at: CGPoint(x: x, y: y))
 
-        let uiImage = UIGraphicsGetImageFromCurrentImageContext()
+        let image = UIGraphicsGetImageFromCurrentImageContext()
         UIGraphicsEndImageContext()
 
-        return uiImage
+        return image
     }
 
     static func imageFromGlyph(
-        glyphImage: GlyphImage,
+        glyph: Double,
         size: CGFloat,
         foregroundColor: NitroColor,
         backgroundColor: NitroColor,
@@ -113,7 +115,7 @@ class SymbolFont {
     ) -> UIImage? {
         guard
             let lightImage = imageFromGlyph(
-                glyphImage: glyphImage,
+                glyph: glyph,
                 foregroundColor: Parser.doubleToColor(
                     value: foregroundColor.lightColor
                 ),
@@ -124,7 +126,7 @@ class SymbolFont {
                 fontScale: fontScale
             ),
             let darkImage = imageFromGlyph(
-                glyphImage: glyphImage,
+                glyph: glyph,
                 foregroundColor: Parser.doubleToColor(
                     value: foregroundColor.darkColor
                 ),
@@ -165,8 +167,6 @@ class SymbolFont {
     ) -> UIImage? {
         guard let image else { return nil }
 
-        let fontScale = image.fontScale ?? 1.0
-
         if noImageAsset {
             let foregroundColor = Parser.doubleToColor(
                 value: traitCollection.userInterfaceStyle == .light
@@ -180,21 +180,21 @@ class SymbolFont {
             )
 
             return SymbolFont.imageFromGlyph(
-                glyphImage: image,
+                glyph: image.glyph,
                 foregroundColor: foregroundColor,
                 backgroundColor: backgroundColor,
                 size: size,
-                fontScale: fontScale
+                fontScale: image.fontScale ?? 1.0
             )
         }
 
         return SymbolFont.imageFromGlyph(
-            glyphImage: image,
+            glyph: image.glyph,
             size: size,
             foregroundColor: image.color,
             backgroundColor: image.backgroundColor,
-            fontScale: fontScale,
+            fontScale: image.fontScale ?? 1.0,
             traitCollection: traitCollection
-        )
+        )!
     }
 }

package/lib/HybridAutoPlay.d.ts

@@ -0,0 +1,2 @@
+import type { AutoPlay } from './specs/AutoPlay.nitro';
+export declare const HybridAutoPlay: AutoPlay;

package/lib/HybridAutoPlay.js

@@ -0,0 +1,2 @@
+import { NitroModules } from 'react-native-nitro-modules';
+export const HybridAutoPlay = NitroModules.createHybridObject('AutoPlay');

package/lib/hooks/useIsAutoPlayFocused.d.ts

@@ -0,0 +1,7 @@
+/**
+ * A hook to determine if the CarPlay/Android Auto screen is currently focused (visible).
+ *
+ * @param moduleName The name of the module to listen to.
+ * @returns `true` if the screen is focused, `false` otherwise.
+ */
+export declare function useIsAutoPlayFocused(moduleName: string): boolean;

package/lib/hooks/useIsAutoPlayFocused.js

@@ -0,0 +1,20 @@
+import { useEffect, useState } from 'react';
+import { HybridAutoPlay } from '..';
+/**
+ * A hook to determine if the CarPlay/Android Auto screen is currently focused (visible).
+ *
+ * @param moduleName The name of the module to listen to.
+ * @returns `true` if the screen is focused, `false` otherwise.
+ */
+export function useIsAutoPlayFocused(moduleName) {
+    const [isFocused, setIsFocused] = useState(false);
+    useEffect(() => {
+        const remove = HybridAutoPlay.addListenerRenderState(moduleName, (state) => {
+            setIsFocused(state === 'didAppear');
+        });
+        return () => {
+            remove();
+        };
+    }, [moduleName]);
+    return isFocused;
+}

package/lib/hybrid/HybridVoice.d.ts

@@ -0,0 +1,12 @@
+import type { VoiceInputOptions, VoiceInputResult } from '../types/Voice';
+type StartVoiceInput = {
+    (options: VoiceInputOptions & Required<Pick<VoiceInputOptions, 'onChunk'>>): Promise<void>;
+    (options?: Omit<VoiceInputOptions, 'onChunk'>): Promise<VoiceInputResult>;
+};
+export declare const HybridVoice: {
+    hasVoiceInputPermission: () => boolean;
+    requestVoiceInputPermission: () => Promise<boolean>;
+    startVoiceInput: StartVoiceInput;
+    stopVoiceInput: () => void;
+};
+export {};

package/lib/hybrid/HybridVoice.js

@@ -0,0 +1,13 @@
+import { NitroModules } from 'react-native-nitro-modules';
+const _native = NitroModules.createHybridObject('Voice');
+const startVoiceInput = (async (options) => {
+    const { onChunk, silenceThresholdMs, maxDurationMs, listeningText, preferSpeechToText } = options ?? {};
+    const result = await _native.startVoiceInput(silenceThresholdMs, maxDurationMs, listeningText, preferSpeechToText, onChunk);
+    return onChunk !== undefined ? undefined : result;
+});
+export const HybridVoice = {
+    hasVoiceInputPermission: () => _native.hasVoiceInputPermission(),
+    requestVoiceInputPermission: () => _native.requestVoiceInputPermission(),
+    startVoiceInput,
+    stopVoiceInput: () => _native.stopVoiceInput(),
+};

package/lib/hybrid.d.ts

@@ -0,0 +1,2 @@
+import type { AutoPlay as NitroAutoPlay } from './specs/AutoPlay.nitro';
+export declare const HybridAutoPlay: NitroAutoPlay;

package/lib/hybrid.js

@@ -0,0 +1,2 @@
+import { NitroModules } from 'react-native-nitro-modules';
+export const HybridAutoPlay = NitroModules.createHybridObject('AutoPlay');

package/lib/index.d.ts

@@ -43,4 +43,3 @@ export * from './types/Trip';
 export type { AlertPriority, NavigationAlert as Alert, NavigationAlertAction as AlertAction, } from './utils/NitroAlert';
 export type { ThemedColor } from './utils/NitroColor';
 export type { GridButton } from './utils/NitroGrid';
-export { setIconFont } from './utils/NitroImage';

package/lib/index.js

@@ -45,4 +45,3 @@ export * from './types/SignInMethod';
 export * from './types/Telemetry';
 export * from './types/Text';
 export * from './types/Trip';
-export { setIconFont } from './utils/NitroImage';

package/lib/specs/AutomotivePermissionRequestTemplate.d.ts

@@ -0,0 +1,11 @@
+import type { HybridObject } from 'react-native-nitro-modules';
+import type { NitroAutomotivePermissionRequestTemplateConfig } from '../templates/AutomotivePermissionRequestTemplate';
+import type { NitroTemplateConfig } from './AutoPlay.nitro';
+interface AutomotivePermissionRequestTemplateConfig extends NitroTemplateConfig, NitroAutomotivePermissionRequestTemplateConfig {
+}
+export interface AutomotivePermissionRequestTemplate extends HybridObject<{
+    android: 'kotlin';
+}> {
+    createAutomotivePermissionRequestTemplate(config: AutomotivePermissionRequestTemplateConfig): void;
+}
+export {};

package/lib/specs/AutomotivePermissionRequestTemplate.js

@@ -0,0 +1 @@
+export {};

package/lib/specs/AutomotivePermissionRequestTemplate.nitro.d.ts

@@ -0,0 +1,11 @@
+import type { HybridObject } from 'react-native-nitro-modules';
+import type { NitroAutomotivePermissionRequestTemplateConfig } from '../templates/AutomotivePermissionRequestTemplate';
+import type { NitroTemplateConfig } from './AutoPlay.nitro';
+interface AutomotivePermissionRequestTemplateConfig extends NitroTemplateConfig, NitroAutomotivePermissionRequestTemplateConfig {
+}
+export interface AutomotivePermissionRequestTemplate extends HybridObject<{
+    android: 'kotlin';
+}> {
+    createAutomotivePermissionRequestTemplate(config: AutomotivePermissionRequestTemplateConfig): void;
+}
+export {};

package/lib/specs/AutomotivePermissionRequestTemplate.nitro.js

@@ -0,0 +1 @@
+export {};

package/lib/specs/Voice.nitro.d.ts

@@ -0,0 +1,51 @@
+import type { HybridObject } from 'react-native-nitro-modules';
+import type { VoiceInputChunk, VoiceInputResult } from '../types/Voice';
+export interface Voice extends HybridObject<{
+    android: 'kotlin';
+    ios: 'swift';
+}> {
+    /**
+     * Returns true if all permissions required for voice input are granted.
+     * On iOS: checks both microphone and speech recognition authorization.
+     * On Android: checks RECORD_AUDIO permission.
+     */
+    hasVoiceInputPermission(): boolean;
+    /**
+     * Request all permissions required for voice input.
+     * On iOS: requests microphone permission then speech recognition authorization.
+     * On Android: requests RECORD_AUDIO via car context when connected, otherwise
+     * via the React Native application context.
+     * Returns true only if all required permissions were granted.
+     */
+    requestVoiceInputPermission(): Promise<boolean>;
+    /**
+     * Start an in-app voice session.
+     *
+     * When preferSpeechToText is true:
+     *   iOS — streams audio buffers into SFSpeechRecognizer during recording;
+     *          onChunk fires with partial transcription results; resolves with
+     *          { transcription } or falls back to { audio } if unavailable.
+     *   Android — checks SpeechRecognizer availability upfront; if available it
+     *              owns the mic and streams partial results via onChunk; if not
+     *              available falls back to PCM recording.
+     *
+     * When preferSpeechToText is false (default):
+     *   Both platforms record raw PCM; onChunk fires with audio chunks;
+     *   resolves with { audio }.
+     *
+     * @param silenceThresholdMs  ms of silence before auto-stop (default 1500)
+     * @param maxDurationMs       hard cap on recording duration (default 10000)
+     * @param listeningText       iOS only — text shown on CPVoiceControlTemplate
+     * @param preferSpeechToText  request STT transcription instead of raw PCM
+     * @param onChunk             optional streaming callback; when set the
+     *                            promise resolves with an empty VoiceInputResult
+     */
+    startVoiceInput(silenceThresholdMs?: number, maxDurationMs?: number, listeningText?: string, preferSpeechToText?: boolean, onChunk?: (chunk: VoiceInputChunk) => void): Promise<VoiceInputResult>;
+    /**
+     * Stop the active voice session early.
+     * For PCM mode: resolves startVoiceInput with audio captured so far.
+     * For STT mode: finalises the recognition request.
+     * No-op if no session is active.
+     */
+    stopVoiceInput(): void;
+}

package/lib/specs/Voice.nitro.js

@@ -0,0 +1 @@
+export {};

package/lib/templates/AutomotivePermissionRequestTemplate.d.ts

@@ -0,0 +1,23 @@
+import type { CustomActionButtonAndroid } from '../types/Button';
+import type { AutoText } from '../types/Text';
+import { type NitroAction } from '../utils/NitroAction';
+import { type HeaderActions, Template, type TemplateConfig } from './Template';
+export interface NitroAutomotivePermissionRequestTemplateConfig extends TemplateConfig {
+    headerActions?: Array<NitroAction>;
+    title: AutoText;
+    actions: Array<NitroAction>;
+}
+export type AutomotivePermissionRequestTemplateConfig = Omit<NitroAutomotivePermissionRequestTemplateConfig, 'headerActions' | 'buttons'> & {
+    /**
+     * action buttons, usually at the the top right on Android and a top bar on iOS
+     */
+    headerActions?: HeaderActions<AutomotivePermissionRequestTemplate>;
+    actions: [CustomActionButtonAndroid<AutomotivePermissionRequestTemplate>] | [
+        CustomActionButtonAndroid<AutomotivePermissionRequestTemplate>,
+        CustomActionButtonAndroid<AutomotivePermissionRequestTemplate>
+    ];
+};
+export declare class AutomotivePermissionRequestTemplate extends Template<AutomotivePermissionRequestTemplateConfig, HeaderActions<AutomotivePermissionRequestTemplate>> {
+    private template;
+    constructor(config: AutomotivePermissionRequestTemplateConfig);
+}

package/lib/templates/AutomotivePermissionRequestTemplate.js

@@ -0,0 +1,18 @@
+import { NitroModules } from 'react-native-nitro-modules';
+import { NitroActionUtil } from '../utils/NitroAction';
+import { Template, } from './Template';
+const HybridAutomotivePermissionRequestTemplate = NitroModules.createHybridObject('AutomotivePermissionRequestTemplate');
+export class AutomotivePermissionRequestTemplate extends Template {
+    template = this;
+    constructor(config) {
+        super(config);
+        const { headerActions, actions, ...rest } = config;
+        const nitroConfig = {
+            ...rest,
+            id: this.id,
+            headerActions: NitroActionUtil.convert(this.template, headerActions),
+            actions: NitroActionUtil.convert(this.template, actions),
+        };
+        HybridAutomotivePermissionRequestTemplate.createAutomotivePermissionRequestTemplate(nitroConfig);
+    }
+}