@proulr/sdui-components 0.1.79 → 0.1.81

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@proulr/sdui-components",
-  "version": "0.1.79",
+  "version": "0.1.81",
   "type": "module",
   "main": "./src/renderer/index.ts",
   "types": "./src/renderer/index.ts",

package/src/renderer/blocks/SduiNativeAdBlock.tsx

@@ -1,5 +1,5 @@
-import React, { useEffect, useState } from 'react';
-import { StyleSheet, Text, View } from 'react-native';
+import React, { useEffect, useRef, useState } from 'react';
+import { AppState, type AppStateStatus, StyleSheet, Text, View } from 'react-native';
 import { LinearGradient } from 'expo-linear-gradient';
 import {
   DEFAULT_NATIVE_AD_ASPECT_RATIO,
@@ -12,6 +12,13 @@ import type { SduiBlockRenderProps } from './SduiPrimitiveBlocks';
 type NativeAdModule = typeof import('react-native-google-mobile-ads');
 type LoadedNativeAd = Awaited<ReturnType<NativeAdModule['NativeAd']['createForAdRequest']>>;
 
+/**
+ * Ao voltar do segundo plano o `NativeMediaView` do Android costuma renderizar
+ * em branco e o ad expira (~1h). Recarrega quando falhou antes ou está mais
+ * velho que isto; abaixo do limiar são só app-switches rápidos.
+ */
+const NATIVE_AD_RESUME_RELOAD_MS = 30_000;
+
 function resolveBlockWidth(props: Record<string, unknown>): number | undefined {
   if (typeof props.width === 'number' && props.width > 0) return props.width;
   return undefined;
@@ -42,6 +49,10 @@ export function SduiNativeAdBlock({ block }: SduiBlockRenderProps) {
   const [adsModule, setAdsModule] = useState<NativeAdModule | null>(null);
   const [nativeAd, setNativeAd] = useState<LoadedNativeAd | null>(null);
   const [failed, setFailed] = useState(false);
+  const [reloadToken, setReloadToken] = useState(0);
+
+  const loadedAtRef = useRef(0);
+  const failedRef = useRef(false);
 
   useEffect(() => {
     if (!catalog?.isEnabled()) return;
@@ -66,16 +77,22 @@ export function SduiNativeAdBlock({ block }: SduiBlockRenderProps) {
           return;
         }
 
+        loadedAtRef.current = Date.now();
+        failedRef.current = false;
+        setFailed(false);
         setNativeAd(ad);
       } catch {
-        if (!cancelled) setFailed(true);
+        if (!cancelled) {
+          failedRef.current = true;
+          setFailed(true);
+        }
       }
     })();
 
     return () => {
       cancelled = true;
     };
-  }, [catalog, placement]);
+  }, [catalog, placement, reloadToken]);
 
   useEffect(() => {
     if (!nativeAd) return;
@@ -84,6 +101,35 @@ export function SduiNativeAdBlock({ block }: SduiBlockRenderProps) {
     };
   }, [nativeAd]);
 
+  useEffect(() => {
+    if (!catalog?.isEnabled()) return;
+
+    let backgroundSince: number | null = null;
+
+    const subscription = AppState.addEventListener('change', (state: AppStateStatus) => {
+      if (state === 'active') {
+        if (backgroundSince === null) return;
+        const backgroundMs = Date.now() - backgroundSince;
+        backgroundSince = null;
+        if (backgroundMs < 3_000) return;
+        const stale =
+          loadedAtRef.current === 0 ||
+          Date.now() - loadedAtRef.current > NATIVE_AD_RESUME_RELOAD_MS;
+        if (failedRef.current || stale) {
+          setReloadToken((token) => token + 1);
+        }
+        return;
+      }
+      if (backgroundSince === null) {
+        backgroundSince = Date.now();
+      }
+    });
+
+    return () => {
+      subscription.remove();
+    };
+  }, [catalog]);
+
   if (!catalog?.isEnabled()) {
     return null;
   }

package/src/renderer/theme/chrome-glass.ts

@@ -4,7 +4,7 @@
  */
 
 /** Intensidade do frost — forte (estilo Telegram) p/ conteúdo não competir com o texto. */
-export const CHROME_GLASS_BLUR_INTENSITY = 60;
+export const CHROME_GLASS_BLUR_INTENSITY = 50;
 
 /**
  * Tint limpo (sem material cinza do system material).

package/src/renderer/theme/proulr-theme.ts

@@ -108,11 +108,12 @@ export const colors = {
   surfaceGlass: 'rgba(255,255,255,0.06)',
   /** Pílula / chrome sem BlurView — preto OLED. */
   chromePillBackground: 'rgba(0, 0, 0, 0.82)',
-  /** Overlay sobre BlurView — véu escuro no tom da marca (como o azul-escuro do
-   * Telegram): escurece o fundo p/ texto branco ler bem, mantendo o hue fuchsia. */
-  chromeGlassOverlay: 'rgba(10, 3, 15, 0.52)',
-  /** Véu escuro sobre glass de painéis grandes (drawer) — legibilidade do conteúdo. */
-  chromeGlassPanelVeil: 'rgba(20, 6, 25, 0.52)',
+  /** Overlay sobre BlurView — véu quase preto puxando pro fundo OLED (estilo
+   * Telegram): vidro escuro, com só um sussurro de fuchsia no hue. Opacidade
+   * alta escurece o conteúdo borrado sem matar o frost. */
+  chromeGlassOverlay: 'rgba(7, 4, 10, 0.64)',
+  /** Véu quase preto sobre glass de painéis grandes (drawer) — legibilidade máxima. */
+  chromeGlassPanelVeil: 'rgba(6, 3, 9, 0.7)',
   chromePillBorder: 'rgba(255, 255, 255, 0.08)',
   videoControlBackground: 'rgba(0,0,0,0.45)',
   videoTrackBackground: 'rgba(255,255,255,0.25)',