@ethora/chat-component-rn 26.5.10 → 26.5.12

package/src/components/Modals/FilePreviewModal/GViewWebView.tsx

@@ -0,0 +1,142 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { ActivityIndicator, StyleSheet, View } from 'react-native';
+import { WebView } from 'react-native-webview';
+
+interface GViewWebViewProps {
+  url: string;
+  onError?: () => void;
+}
+
+const MAX_ATTEMPTS = 6;
+const LOAD_BUDGET_MS = 8000;
+const ATTEMPT_TIMEOUT_MS = 3000;
+
+const RENDER_POLLER = `
+(function () {
+  if (window.__ethoraGviewProbe) { return; }
+  window.__ethoraGviewProbe = true;
+  var tries = 0;
+  function rendered() {
+    try {
+      var imgs = document.querySelectorAll('img');
+      for (var i = 0; i < imgs.length; i++) {
+        // naturalHeight is readable even for cross-origin images; gview's
+        // page images are tall, the preparing page has none.
+        if (imgs[i].naturalHeight > 80) { return true; }
+      }
+      // Some gview render paths paint pages into <canvas> instead.
+      var canvases = document.querySelectorAll('canvas');
+      for (var j = 0; j < canvases.length; j++) {
+        if (canvases[j].height > 80) { return true; }
+      }
+      var txt = ((document.body && document.body.innerText) || '').trim();
+      return txt.length > 80;
+    } catch (e) {
+      return false;
+    }
+  }
+  function tick() {
+    tries++;
+    if (rendered()) {
+      try {
+        window.ReactNativeWebView.postMessage(JSON.stringify({ rendered: true }));
+      } catch (e) {}
+      return;
+    }
+    if (tries < 40) { setTimeout(tick, 500); }
+  }
+  tick();
+})();
+true;
+`;
+
+const GViewWebView: React.FC<GViewWebViewProps> = ({ url, onError }) => {
+  const [attempt, setAttempt] = useState(0);
+  const [ready, setReady] = useState(false);
+  const readyRef = useRef(false);
+  const attemptRef = useRef(0);
+  const watchdog = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const viewerUrl = `https://docs.google.com/gview?embedded=true&url=${encodeURIComponent(
+    url
+  )}`;
+
+  const clearWatchdog = () => {
+    if (watchdog.current) {
+      clearTimeout(watchdog.current);
+      watchdog.current = null;
+    }
+  };
+
+  const giveUpAttempt = useCallback(() => {
+    if (readyRef.current) {return;}
+    if (attemptRef.current < MAX_ATTEMPTS - 1) {
+      attemptRef.current += 1;
+      setAttempt(attemptRef.current);
+    } else {
+      readyRef.current = true;
+      setReady(true);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (readyRef.current) {return;}
+    clearWatchdog();
+    watchdog.current = setTimeout(giveUpAttempt, LOAD_BUDGET_MS);
+    return clearWatchdog;
+  }, [attempt, giveUpAttempt]);
+
+  const handleLoadEnd = useCallback(() => {
+    if (readyRef.current) {return;}
+    clearWatchdog();
+    watchdog.current = setTimeout(giveUpAttempt, ATTEMPT_TIMEOUT_MS);
+  }, [giveUpAttempt]);
+
+  const handleMessage = useCallback((e: any) => {
+    let isRendered = false;
+    try {
+      isRendered = !!JSON.parse(e.nativeEvent.data)?.rendered;
+    } catch {
+      isRendered = false;
+    }
+    if (isRendered && !readyRef.current) {
+      clearWatchdog();
+      readyRef.current = true;
+      setReady(true);
+    }
+  }, []);
+
+  return (
+    <View style={styles.container}>
+      <WebView
+        key={attempt}
+        source={{ uri: viewerUrl }}
+        style={styles.webview}
+        originWhitelist={['*']}
+        injectedJavaScript={RENDER_POLLER}
+        onLoadEnd={handleLoadEnd}
+        onMessage={handleMessage}
+        onError={onError}
+        onHttpError={onError}
+      />
+      {!ready && (
+        <View style={styles.loadingOverlay} pointerEvents="none">
+          <ActivityIndicator size="large" />
+        </View>
+      )}
+    </View>
+  );
+};
+
+export default GViewWebView;
+
+const styles = StyleSheet.create({
+  container: { flex: 1, width: '100%', backgroundColor: '#fff' },
+  webview: { flex: 1, backgroundColor: '#fff' },
+  loadingOverlay: {
+    ...StyleSheet.absoluteFillObject,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: '#ffffff',
+  },
+});

package/src/components/Modals/FilePreviewModal/PdfView.tsx

@@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react';
 import { ActivityIndicator, Platform, StyleSheet, Text, View } from 'react-native';
 import { WebView } from 'react-native-webview';
 import * as FileSystem from 'expo-file-system/legacy';
+import GViewWebView from './GViewWebView';
 
 interface PdfViewerProps {
   pdfUrl: string;
@@ -40,24 +41,7 @@ const PdfViewer: React.FC<PdfViewerProps> = ({ pdfUrl }) => {
   }, [pdfUrl, isAndroid]);
 
   if (isAndroid) {
-    const gviewUrl = `https://docs.google.com/gview?embedded=true&url=${encodeURIComponent(
-      pdfUrl
-    )}`;
-    return (
-      <View style={styles.container}>
-        <WebView
-          source={{ uri: gviewUrl }}
-          style={styles.webview}
-          originWhitelist={['*']}
-          startInLoadingState
-          renderLoading={() => (
-            <View style={styles.center}>
-              <ActivityIndicator size="large" />
-            </View>
-          )}
-        />
-      </View>
-    );
+    return <GViewWebView url={pdfUrl} />;
   }
 
   if (error) {

package/src/components/Modals/ModalHeaderComponent.tsx

@@ -7,6 +7,7 @@ import {
 import { BackIcon, MoreIcon, QrIcon } from '../../assets/icons';
 import Button from '../styled/Button';
 import { Text } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 interface ModalHeaderComponentProps {
   handleCloseModal?: any;
@@ -21,8 +22,14 @@ const ModalHeaderComponent: React.FC<ModalHeaderComponentProps> = ({
   rightMenu,
   leftMenu,
 }) => {
+  // The library's full-screen modals are an absolute-fill overlay inside
+  // ModalBackground (NOT a native Modal), so the OS doesn't apply any
+  // status-bar inset automatically — we have to. SafeAreaProvider is
+  // mounted by ReduxWrapper, so this reads the live per-device inset
+  // (notch / Dynamic Island / nothing).
+  const insets = useSafeAreaInsets();
   return (
-    <HeaderContainer>
+    <HeaderContainer style={{ paddingTop: insets.top + 8 }}>
       <HeaderLeft>
         {leftMenu ? (
           leftMenu

package/src/components/Modals/styledModalComponents.tsx

@@ -72,10 +72,19 @@ export const HeaderContainer = styled.View`
   position: relative;
   top: 0;
   width: 100%;
-  padding: 2px 8px;
-  padding-top: 62px;
-  max-height: 24px;
-  min-height: 24px;
+  /* The previous incarnation had padding-top:62px (hard-coded status-bar
+   * offset) clamped to min/max-height:24px — content overflowed the
+   * visible band and the back arrow hugged the bottom edge. The earlier
+   * fix dropped the clamp but kept a hard-coded 56px top inset, which on
+   * top of this modal's absolute-fill overlay (no system inset is auto-
+   * applied) made the header eat far more space than it should.
+   *
+   * Now: compact 8px vertical padding here; the dynamic top inset for
+   * the status bar / Dynamic Island is supplied by ModalHeaderComponent
+   * via useSafeAreaInsets() — accurate per-device (~59px on a 16 Pro,
+   * 20px on an SE). Together that's status-bar + 8px above the back
+   * button and 8px below — properly sized and properly centered. */
+  padding: 8px 16px;
   background-color: #fff;
   border-bottom-width: 1px;
   border-bottom-color: #f0f0f0;

package/src/components/RoomComponents/styled/LastAudioMessage.tsx

@@ -3,58 +3,43 @@ import {
   LastRoomMessageContainer,
   LastRoomMessageName,
   LastRoomMessageText,
-  ShadeWrapper,
 } from './StyledRoomComponents';
 import { LastMessage } from '../../../types/types';
 import styled from 'styled-components/native';
-import { Text, View } from 'react-native';
+import { View } from 'react-native';
+import { PlayIcon } from '../../../assets/icons';
 
 interface LastMessageEmojiProps extends Pick<LastMessage, 'user' | 'body'> {}
 
 const PlayButton = styled.View`
-  position: absolute;
-  width: 8px;
-  height: 9px;
-  border-radius: 50%;
+  width: 20px;
+  height: 20px;
+  border-radius: 10px;
   display: flex;
   justify-content: center;
   align-items: center;
-  color: white;
-  font-size: 10px;
-  pointer-events: none;
-  z-index: 100;
+  background-color: #d8ecff;
+  margin-top: 1px;
 `;
 
-const PhotoContainer = styled.View`
-  position: relative;
-  width: 20px;
-  height: 20px;
-  overflow: hidden;
-  border-radius: 8px;
-  width: 20px;
-  height: 20px;
-  object-fit: cover;
-  pointer-events: none;
+const AudioRow = styled.View`
+  flex-direction: row;
+  align-items: center;
+  gap: 6px;
 `;
 
 const LastAudioMessage: FC<LastMessageEmojiProps> = ({ user, body }) => {
   return (
     <LastRoomMessageContainer>
-      <LastRoomMessageName>{user?.name ?? ''}</LastRoomMessageName>
-      <View
-        style={{
-          display: 'flex',
-          flexDirection: 'row',
-          gap: '4px',
-        }}
-      >
-        <PhotoContainer>
-          <ShadeWrapper>
-            <PlayButton><Text>▶</Text></PlayButton>
-          </ShadeWrapper>
-        </PhotoContainer>
-        <LastRoomMessageText>audio</LastRoomMessageText>
-      </View>
+      <LastRoomMessageName numberOfLines={1}>{user?.name ?? ''}</LastRoomMessageName>
+      <AudioRow>
+        <PlayButton>
+          <PlayIcon width={10} height={10} color="#1F2937" />
+        </PlayButton>
+        <LastRoomMessageText numberOfLines={1}>
+          {body?.trim() ? body : 'audio'}
+        </LastRoomMessageText>
+      </AudioRow>
     </LastRoomMessageContainer>
   );
 };