@blotch/angular-lynx-native 22.2.3 → 22.2.4

package/README.md

@@ -16,7 +16,7 @@ An ejected project (`ios/` or `android/` with a `.angular-lynx-ejected` marker,
 
 Both are one full-screen `LynxView` running `main.lynx.bundle`; Angular Router does all navigation inside it. Bundles and assets load from inside the app, so RSpeedy's default asset prefix (`/static/...`) works with no configuration. The `LynxView` sits inside the safe area, so CSS `env(safe-area-inset-*)` is 0 in it.
 
-Both send the same global props, which the runtime's services read: `platform`, `theme` (again whenever the phone switches between light and dark), `appLocale` (the phone's language as a BCP 47 tag), `isNotchScreen`, and the safe-area insets `safeAreaTop`, `safeAreaBottom`, `safeAreaLeft` and `safeAreaRight`. Lynx Explorer sends `theme` and `isNotchScreen` too, but no `appLocale`. See [`templates/android/README.md`](templates/android/README.md) for the Android shell's details.
+Both send the same global props, which the runtime's services read: `platform`, `theme` (again whenever the phone switches between light and dark), `appLocale` (the phone's language as a BCP 47 tag), `isNotchScreen`, the safe-area insets `safeAreaTop`, `safeAreaBottom`, `safeAreaLeft` and `safeAreaRight`, `osVersion` (which Lynx leaves out of the main thread's `SystemInfo`), and the accessibility settings `reduceMotion`, `reduceTransparency` (iOS only) and `increaseContrast`, again whenever the user changes one. Lynx Explorer sends `theme` and `isNotchScreen` too, but no `appLocale`, `osVersion` or accessibility settings. See [`templates/android/README.md`](templates/android/README.md) for the Android shell's details.
 
 Both link Lynx's XElement library, which holds `<input>`, `<textarea>`, `<overlay>`, `<svg>`, `<blur-view>`, `<viewpager>`, `<refresh>`, the `<scroll-coordinator>` family, `<webview>` and `<video>`. Lynx's core doesn't include these, and a host that doesn't register them renders nothing for those tags (on Android, nothing after them either). XElement's AnimaX and Markdown elements are left out: the runtime doesn't support them.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blotch/angular-lynx-native",
-  "version": "22.2.3",
+  "version": "22.2.4",
   "description": "Builds AngularLynx apps into iOS and Android binaries",
   "homepage": "https://github.com/Blotch-Smart-Frames/AngularLynx#readme",
   "bugs": {

package/templates/android/app/src/main/java/dev/angularlynx/shell/MainActivity.kt

@@ -1,8 +1,15 @@
 package dev.angularlynx.shell
 
+import android.app.UiModeManager
 import android.content.res.Configuration
+import android.database.ContentObserver
+import android.os.Build
 import android.os.Bundle
+import android.os.Handler
+import android.os.Looper
+import android.provider.Settings
 import android.util.Log
+import android.view.accessibility.AccessibilityManager
 import android.widget.FrameLayout
 import androidx.activity.ComponentActivity
 import androidx.activity.OnBackPressedCallback
@@ -31,6 +38,16 @@ class MainActivity : ComponentActivity(), ShellModule.Host {
     private var safeArea = Insets.NONE
     private var hasCutout = false
 
+    // Sends the accessibility settings again when the user changes one while
+    // the app is open: Remove animations (the animator duration scale), the
+    // contrast level (Android 14) and high contrast text (Android 16). The
+    // contrast listeners are kept as Any so the class loads on older Androids.
+    private val animationScaleObserver = object : ContentObserver(Handler(Looper.getMainLooper())) {
+        override fun onChange(selfChange: Boolean) = sendGlobalProps()
+    }
+    private var contrastListener: Any? = null
+    private var highContrastTextListener: Any? = null
+
     // Disabled until the Angular app enables it (see ShellModule), so by
     // default back leaves the app like any other root screen.
     private val backHandler = object : OnBackPressedCallback(false) {
@@ -90,6 +107,23 @@ class MainActivity : ComponentActivity(), ShellModule.Host {
         }
         setContentView(container)
 
+        contentResolver.registerContentObserver(
+            Settings.Global.getUriFor(Settings.Global.ANIMATOR_DURATION_SCALE),
+            false,
+            animationScaleObserver,
+        )
+        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.UPSIDE_DOWN_CAKE) {
+            val listener = UiModeManager.ContrastChangeListener { sendGlobalProps() }
+            getSystemService(UiModeManager::class.java).addContrastChangeListener(mainExecutor, listener)
+            contrastListener = listener
+        }
+        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.BAKLAVA) {
+            val listener = AccessibilityManager.HighContrastTextStateChangeListener { sendGlobalProps() }
+            getSystemService(AccessibilityManager::class.java)
+                .addHighContrastTextStateChangeListener(mainExecutor, listener)
+            highContrastTextListener = listener
+        }
+
         onBackPressedDispatcher.addCallback(this, backHandler)
         // Sent before the bundle loads, so the app starts with the theme and
         // the language. The insets follow once the window reports them.
@@ -110,11 +144,16 @@ class MainActivity : ComponentActivity(), ShellModule.Host {
         lynxView.updateGlobalProps(globalProps(newConfig))
     }
 
+    private fun sendGlobalProps() {
+        lynxView.updateGlobalProps(globalProps(resources.configuration))
+    }
+
     /**
      * The global props the runtime reads: `theme` (LynxTheme), `isNotchScreen`
-     * (LynxSafeArea) and `appLocale` (LynxLocale), plus the safe-area insets
-     * in dp. The iOS shell sends the same keys, and Lynx Explorer sends theme
-     * and isNotchScreen too.
+     * (LynxSafeArea), `appLocale` (LynxLocale), the accessibility settings
+     * (LynxAccessibilitySettings) and `osVersion` (LynxSystemInfo), plus the
+     * safe-area insets in dp. The iOS shell sends the same keys, and Lynx
+     * Explorer sends theme and isNotchScreen too.
      */
     private fun globalProps(config: Configuration): Map<String, Any> {
         val density = resources.displayMetrics.density
@@ -127,12 +166,32 @@ class MainActivity : ComponentActivity(), ShellModule.Host {
             "safeAreaBottom" to safeArea.bottom / density,
             "safeAreaLeft" to safeArea.left / density,
             "safeAreaRight" to safeArea.right / density,
+            // Lynx builds the main thread's SystemInfo, where Angular runs,
+            // without the OS version, so LynxSystemInfo reads it from here.
+            "osVersion" to Build.VERSION.RELEASE,
+            // Lynx has no API for these. Android has no Reduce Transparency.
+            "reduceMotion" to reduceMotion(),
+            "increaseContrast" to increaseContrast(),
         )
         // The user's language as a BCP 47 tag, such as "fr-FR".
         ConfigurationCompat.getLocales(config)[0]?.let { props["appLocale"] = it.toLanguageTag() }
         return props
     }
 
+    // Settings > Accessibility > Remove animations sets the animator
+    // duration scale to 0, as does turning animations off in the developer
+    // options.
+    private fun reduceMotion(): Boolean =
+        Settings.Global.getFloat(contentResolver, Settings.Global.ANIMATOR_DURATION_SCALE, 1f) == 0f
+
+    // Medium or high contrast (Android 14), or high contrast text (Android 16):
+    // the closest Android has to iOS's Increase Contrast.
+    private fun increaseContrast(): Boolean =
+        (Build.VERSION.SDK_INT >= Build.VERSION_CODES.UPSIDE_DOWN_CAKE &&
+            getSystemService(UiModeManager::class.java).contrast > 0f) ||
+            (Build.VERSION.SDK_INT >= Build.VERSION_CODES.BAKLAVA &&
+                getSystemService(AccessibilityManager::class.java).isHighContrastTextEnabled)
+
     // Lynx pauses timers and animations in the background and fires the
     // page's visibility events from these.
     override fun onResume() {
@@ -146,6 +205,17 @@ class MainActivity : ComponentActivity(), ShellModule.Host {
     }
 
     override fun onDestroy() {
+        contentResolver.unregisterContentObserver(animationScaleObserver)
+        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.UPSIDE_DOWN_CAKE) {
+            (contrastListener as UiModeManager.ContrastChangeListener?)?.let {
+                getSystemService(UiModeManager::class.java).removeContrastChangeListener(it)
+            }
+        }
+        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.BAKLAVA) {
+            (highContrastTextListener as AccessibilityManager.HighContrastTextStateChangeListener?)?.let {
+                getSystemService(AccessibilityManager::class.java).removeHighContrastTextStateChangeListener(it)
+            }
+        }
         lynxView.destroy()
         super.onDestroy()
     }

package/templates/ios/App/LynxViewController.swift

@@ -39,6 +39,21 @@ final class LynxViewController: UIViewController {
         controller.lynxView?.updateGlobalProps(with: controller.globalProps())
       }
     }
+
+    // Send the accessibility settings again when the user changes one while
+    // the app is open, so the components adapt at once.
+    for name in [
+      UIAccessibility.reduceMotionStatusDidChangeNotification,
+      UIAccessibility.reduceTransparencyStatusDidChangeNotification,
+      UIAccessibility.darkerSystemColorsStatusDidChangeNotification,
+    ] {
+      NotificationCenter.default.addObserver(
+        self, selector: #selector(accessibilitySettingsDidChange), name: name, object: nil)
+    }
+  }
+
+  @objc private func accessibilitySettingsDidChange() {
+    lynxView?.updateGlobalProps(with: globalProps())
   }
 
   @available(iOS, deprecated: 17.0, message: "registerForTraitChanges in viewDidLoad replaces it")
@@ -80,9 +95,10 @@ final class LynxViewController: UIViewController {
   }
 
   /// The global props the runtime reads: `theme` (LynxTheme), `isNotchScreen`
-  /// (LynxSafeArea) and `appLocale` (LynxLocale), plus the safe-area insets.
-  /// The Android shell sends the same keys, and Lynx Explorer sends theme and
-  /// isNotchScreen too.
+  /// (LynxSafeArea), `appLocale` (LynxLocale), the accessibility settings
+  /// (LynxAccessibilitySettings) and `osVersion` (LynxSystemInfo), plus the
+  /// safe-area insets. The Android shell sends the same keys, and Lynx
+  /// Explorer sends theme and isNotchScreen too.
   private func globalProps() -> LynxTemplateData {
     let insets = view.safeAreaInsets
     var props: [String: Any] = [
@@ -96,6 +112,16 @@ final class LynxViewController: UIViewController {
       "isNotchScreen": insets.top > 20 || insets.bottom > 0 || insets.left > 0
         || insets.right > 0,
       "theme": traitCollection.userInterfaceStyle == .dark ? "Dark" : "Light",
+      // Lynx has no API for these. The glass components adapt what they draw
+      // to them, and follow Reduce Motion in their own animations.
+      "reduceMotion": UIAccessibility.isReduceMotionEnabled,
+      "reduceTransparency": UIAccessibility.isReduceTransparencyEnabled,
+      // Increase Contrast.
+      "increaseContrast": UIAccessibility.isDarkerSystemColorsEnabled,
+      // Lynx builds the main thread's SystemInfo, where Angular runs, without
+      // the OS version, so LynxSystemInfo reads it from here. The glass
+      // components need it: blur-view draws Liquid Glass only from iOS 26.
+      "osVersion": UIDevice.current.systemVersion,
     ]
     // The user's first language as a BCP 47 tag, such as "fr-FR". iOS
     // restarts the app when the language changes, so there's no update to send.