@ethora/chat-component-rn 26.5.11 → 26.5.13

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

@@ -240,6 +240,30 @@ const FilePreviewModal: React.FC<FilePreviewModalProps> = ({
         );
       case activeFile.mimetype.startsWith('video/'):
         return <ModalVideo uri={activeFile.fileURL} />;
+      case activeFile.mimetype.includes('application/octet-stream'):
+        return (
+          <View
+            style={{
+              width: '100%',
+              padding: 20,
+              gap: 12,
+              backgroundColor: '#FFF8ED',
+              borderRadius: 16,
+            }}
+          >
+            <Text style={{ fontSize: 16, fontWeight: '600' }}>
+              Voice message
+            </Text>
+            <AudioMessage
+              src={activeFile.fileURL}
+              mimeType={activeFile.mimetype}
+              fileName={activeFile.fileName}
+              originalName={activeFile.originalName}
+              duration={activeFile.duration}
+              waveForm={activeFile.waveForm}
+            />
+          </View>
+        );
       // Mirrors the MediaMessage heuristic: treat octet-stream voicemails
       // with audio-shaped filenames / URLs as audio so the preview shows
       // the player instead of an "Unsupported" card. Customer-reported
@@ -247,7 +271,12 @@ const FilePreviewModal: React.FC<FilePreviewModalProps> = ({
       case isLikelyAudio(
         activeFile.mimetype,
         activeFile.fileName,
-        activeFile.fileURL
+        activeFile.fileURL,
+        {
+          duration: activeFile.duration,
+          waveForm: activeFile.waveForm,
+          originalName: activeFile.originalName,
+        }
       ):
         return (
           <View
@@ -261,11 +290,18 @@ const FilePreviewModal: React.FC<FilePreviewModalProps> = ({
           >
             <Text style={{ fontSize: 16, fontWeight: '600' }}>
               {ensureFilenameHasExtension(
-                activeFile.fileName,
+                activeFile.originalName || activeFile.fileName,
                 activeFile.mimetype
               )}
             </Text>
-            <AudioMessage src={activeFile.fileURL} />
+            <AudioMessage
+              src={activeFile.fileURL}
+              mimeType={activeFile.mimetype}
+              fileName={activeFile.fileName}
+              originalName={activeFile.originalName}
+              duration={activeFile.duration}
+              waveForm={activeFile.waveForm}
+            />
           </View>
         );
       case activeFile.mimetype === 'application/pdf':

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/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>
   );
 };