@controleonline/ui-common 1.2.79 → 1.2.81

package/src/react/components/UserAvatar.js

@@ -5,6 +5,15 @@ import {getGravatarUrl, getUserInitials} from '../utils/userAvatar';
 
 const normalizeUrl = value => String(value || '').trim();
 
+const isGravatarUrl = uri =>
+  /gravatar\.com\/avatar\//i.test(String(uri || ''));
+
+const isBackendDownloadUrl = uri =>
+  /\/files\/[^/?#]+\/download/i.test(String(uri || ''));
+
+/** Session cache: gravatar URL → true (ok) | false (missing). Avoids repeat probes. */
+const gravatarProbeCache = new Map();
+
 const readSessionToken = () => {
   if (typeof localStorage === 'undefined' || !localStorage?.getItem) {
     return '';
@@ -18,51 +27,119 @@ const readSessionToken = () => {
   }
 };
 
+/**
+ * Probe Gravatar (d=404) via fetch BEFORE exposing URL to <Image>.
+ * Browser "Failed to load resource" for <img> 404 is avoided; XHR 404 is
+ * expected once per unique hash and cached for the session.
+ */
+const probeGravatar = async url => {
+  if (gravatarProbeCache.has(url)) {
+    return gravatarProbeCache.get(url);
+  }
+
+  try {
+    let response = await fetch(url, {
+      method: 'HEAD',
+      mode: 'cors',
+      cache: 'force-cache',
+    });
+    if (response.status === 405 || response.status === 501) {
+      response = await fetch(url, {
+        method: 'GET',
+        mode: 'cors',
+        cache: 'force-cache',
+      });
+    }
+    const ok = response.ok;
+    gravatarProbeCache.set(url, ok);
+    return ok;
+  } catch {
+    gravatarProbeCache.set(url, false);
+    return false;
+  }
+};
+
+/**
+ * Resolve display URI.
+ * - Backend /files/.../download on web: authenticated blob fetch.
+ * - Gravatar (d=404) on web: probe first; never set <img src> on expected 404.
+ * - Other URLs / native: pass through (native Image onError handles 404).
+ */
 const useDisplayUri = uri => {
-  const [displayUri, setDisplayUri] = useState(normalizeUrl(uri));
+  const [displayUri, setDisplayUri] = useState('');
+  const [resolved, setResolved] = useState(false);
 
   useEffect(() => {
     let cancelled = false;
     let objectUrl = '';
     const next = normalizeUrl(uri);
 
+    setResolved(false);
+    setDisplayUri('');
+
     const run = async () => {
       if (!next) {
-        setDisplayUri('');
+        if (!cancelled) {
+          setDisplayUri('');
+          setResolved(true);
+        }
         return;
       }
 
-      const isBackendDownload = /\/files\/[^/?#]+\/download/i.test(next);
       const token = readSessionToken();
 
-      if (!isBackendDownload || Platform.OS !== 'web' || !token) {
-        setDisplayUri(next);
+      // Authenticated backend download on web
+      if (isBackendDownloadUrl(next) && Platform.OS === 'web' && token) {
+        try {
+          const headers = {
+            Accept: '*/*',
+            'API-TOKEN': token,
+          };
+          const host =
+            normalizeUrl(APP_ENV?.DOMAIN) ||
+            (typeof location !== 'undefined' ? location.host : '');
+          if (host) {
+            headers['App-Domain'] = host;
+          }
+
+          const response = await fetch(next, {method: 'GET', headers});
+          if (!response.ok) {
+            if (!cancelled) {
+              setDisplayUri('');
+              setResolved(true);
+            }
+            return;
+          }
+
+          const blob = await response.blob();
+          objectUrl = URL.createObjectURL(blob);
+          if (!cancelled) {
+            setDisplayUri(objectUrl);
+            setResolved(true);
+          }
+        } catch {
+          if (!cancelled) {
+            setDisplayUri('');
+            setResolved(true);
+          }
+        }
         return;
       }
 
-      try {
-        const headers = {
-          Accept: '*/*',
-          'API-TOKEN': token,
-        };
-        const host =
-          normalizeUrl(APP_ENV?.DOMAIN) ||
-          (typeof location !== 'undefined' ? location.host : '');
-        if (host) {
-          headers['App-Domain'] = host;
-        }
-
-        const response = await fetch(next, {method: 'GET', headers});
-        if (!response.ok) {
-          if (!cancelled) setDisplayUri(next);
-          return;
+      // Gravatar d=404: probe on web so <img> never receives a known-missing URL
+      if (isGravatarUrl(next) && Platform.OS === 'web') {
+        const ok = await probeGravatar(next);
+        if (!cancelled) {
+          setDisplayUri(ok ? next : '');
+          setResolved(true);
         }
+        return;
+      }
 
-        const blob = await response.blob();
-        objectUrl = URL.createObjectURL(blob);
-        if (!cancelled) setDisplayUri(objectUrl);
-      } catch {
-        if (!cancelled) setDisplayUri(next);
+      // Default: use as-is (native, or non-special web URLs)
+      if (!cancelled) {
+        setDisplayUri(next);
+        setResolved(true);
       }
     };
 
@@ -74,7 +151,7 @@ const useDisplayUri = uri => {
     };
   }, [uri]);
 
-  return displayUri;
+  return {displayUri, resolved};
 };
 
 const UserAvatar = ({
@@ -104,7 +181,22 @@ const UserAvatar = ({
   }, [sources]);
 
   const currentSource = sources[sourceIndex];
-  const displayUri = useDisplayUri(currentSource);
+  const {displayUri, resolved} = useDisplayUri(currentSource);
+
+  // After probe resolves empty for gravatar/backend → try next source or initials
+  useEffect(() => {
+    if (!currentSource || !resolved || displayUri) {
+      return;
+    }
+    if (
+      isGravatarUrl(currentSource) ||
+      isBackendDownloadUrl(currentSource)
+    ) {
+      setSourceIndex(index =>
+        index + 1 < sources.length ? index + 1 : index,
+      );
+    }
+  }, [currentSource, displayUri, resolved, sources.length]);
 
   const containerStyle = [
     styles.container,