@repzo/widget-react-native 1.2.2 → 1.3.0

package/src/ui/components/ZoomableImage.tsx

@@ -0,0 +1,250 @@
+/**
+ * An image the visitor can pinch to zoom, drag around once zoomed, and
+ * double-tap to zoom in on a spot (and again to zoom back out). Built on
+ * PanResponder and Animated, so it behaves the same on iOS and Android
+ * without a gesture library in the host app.
+ */
+
+import { useRef, useState } from 'react';
+import {
+  Animated,
+  PanResponder,
+  StyleSheet,
+  View,
+  type GestureResponderEvent,
+  type ImageLoadEventData,
+  type LayoutChangeEvent,
+  type NativeSyntheticEvent,
+} from 'react-native';
+
+import { useReduceMotion } from '../hooks/use-reduce-motion';
+
+export const MAX_ZOOM = 4;
+export const DOUBLE_TAP_ZOOM = 2.5;
+const DOUBLE_TAP_MS = 300;
+const DOUBLE_TAP_SLOP = 30;
+const TAP_SLOP = 10;
+
+/** Scale and offset (from the centre of the view) of the image. */
+export interface ZoomView {
+  scale: number;
+  x: number;
+  y: number;
+}
+
+interface Size {
+  width: number;
+  height: number;
+}
+
+/** The size the image is drawn at with `contain`, before any zoom. */
+export function fittedSize(box: Size, image: Size | null): Size {
+  if (!image || image.width <= 0 || image.height <= 0) return box;
+  const fit = Math.min(box.width / image.width, box.height / image.height);
+  return { width: image.width * fit, height: image.height * fit };
+}
+
+/**
+ * Keeps the image inside the screen: zoom between 1× and `MAX_ZOOM`, and no
+ * empty space past an edge the zoomed image is wider (or taller) than.
+ */
+export function clampView(view: ZoomView, box: Size, content: Size): ZoomView {
+  const scale = Math.min(MAX_ZOOM, Math.max(1, view.scale));
+  const maxX = Math.max(0, (content.width * scale - box.width) / 2);
+  const maxY = Math.max(0, (content.height * scale - box.height) / 2);
+  return {
+    scale,
+    x: Math.min(maxX, Math.max(-maxX, view.x)),
+    y: Math.min(maxY, Math.max(-maxY, view.y)),
+  };
+}
+
+/**
+ * The view at `scale` that keeps the spot that was under `from` (a point
+ * relative to the centre, in the `start` view) under `to`. Pinching zooms
+ * around the fingers this way, and moving them pans at the same time.
+ */
+export function zoomAround(start: ZoomView, scale: number, from: { x: number; y: number }, to: { x: number; y: number }): ZoomView {
+  const spotX = (from.x - start.x) / start.scale;
+  const spotY = (from.y - start.y) / start.scale;
+  return { scale, x: to.x - scale * spotX, y: to.y - scale * spotY };
+}
+
+interface Touch {
+  pageX: number;
+  pageY: number;
+}
+
+const centreOf = (touches: Touch[]) => ({
+  x: touches.reduce((sum, t) => sum + t.pageX, 0) / touches.length,
+  y: touches.reduce((sum, t) => sum + t.pageY, 0) / touches.length,
+});
+const spreadOf = (touches: Touch[]) =>
+  touches.length < 2 ? 0 : Math.hypot(touches[0].pageX - touches[1].pageX, touches[0].pageY - touches[1].pageY);
+
+export function ZoomableImage({
+  uri,
+  accessibilityLabel,
+  onLoad,
+  onError,
+}: {
+  uri: string;
+  accessibilityLabel: string;
+  onLoad: () => void;
+  onError: () => void;
+}) {
+  const reduceMotion = useReduceMotion();
+  const [scale] = useState(() => new Animated.Value(1));
+  const [x] = useState(() => new Animated.Value(0));
+  const [y] = useState(() => new Animated.Value(0));
+
+  // Gesture state, read by the (stable) PanResponder below.
+  const g = useRef({
+    view: { scale: 1, x: 0, y: 0 } as ZoomView,
+    box: { width: 0, height: 0 } as Size,
+    // Where the box sits on screen, so touches can be measured from its centre.
+    origin: { x: 0, y: 0 },
+    image: null as Size | null,
+    // The view, finger centre and finger spread when the current set of fingers went down.
+    start: { view: { scale: 1, x: 0, y: 0 } as ZoomView, centre: { x: 0, y: 0 }, spread: 0, count: 0 },
+    moved: false,
+    grantedAt: 0,
+    lastTap: null as { at: number; x: number; y: number } | null,
+    reduceMotion: false as boolean | null,
+    native: false,
+  }).current;
+  g.reduceMotion = reduceMotion;
+
+  const boxRef = useRef<View>(null);
+
+  const show = (view: ZoomView, animate: boolean) => {
+    g.view = view;
+    if (!animate || g.reduceMotion !== false) {
+      scale.setValue(view.scale);
+      x.setValue(view.x);
+      y.setValue(view.y);
+      return;
+    }
+    const spring = (value: Animated.Value, toValue: number) =>
+      Animated.spring(value, { toValue, useNativeDriver: true, bounciness: 0, speed: 18 });
+    Animated.parallel([spring(scale, view.scale), spring(x, view.x), spring(y, view.y)]).start();
+  };
+
+  // Hands the transform to the native driver as soon as the image is on
+  // screen. Until a native animation had run, Android (new architecture) didn't
+  // draw finger moves, so pinching only worked after a double tap.
+  const goNative = () => {
+    if (g.native) return;
+    g.native = true;
+    const settle = (value: Animated.Value, toValue: number) =>
+      Animated.spring(value, { toValue, useNativeDriver: true, bounciness: 0, speed: 18 });
+    Animated.parallel([settle(scale, g.view.scale), settle(x, g.view.x), settle(y, g.view.y)]).start();
+  };
+
+  const fromCentre = (point: { x: number; y: number }) => ({
+    x: point.x - g.origin.x - g.box.width / 2,
+    y: point.y - g.origin.y - g.box.height / 2,
+  });
+  const content = () => fittedSize(g.box, g.image);
+
+  const begin = (touches: Touch[]) => {
+    g.start = { view: g.view, centre: fromCentre(centreOf(touches)), spread: spreadOf(touches), count: touches.length };
+  };
+
+  const pan = useRef(
+    PanResponder.create({
+      onStartShouldSetPanResponder: () => true,
+      onMoveShouldSetPanResponder: () => true,
+      // Never hand the gesture over: nothing else in the full-screen viewer
+      // wants it, and giving it up at 1× ended a pinch as it started.
+      onPanResponderTerminationRequest: () => false,
+      onPanResponderGrant: (event: GestureResponderEvent) => {
+        g.moved = false;
+        g.grantedAt = Date.now();
+        begin(event.nativeEvent.touches);
+      },
+      onPanResponderMove: (event: GestureResponderEvent, gesture) => {
+        const touches = event.nativeEvent.touches;
+        if (touches.length === 0) return;
+        // A finger landed or lifted: carry on from where the image is now.
+        if (touches.length !== g.start.count) begin(touches);
+        if (Math.abs(gesture.dx) > TAP_SLOP || Math.abs(gesture.dy) > TAP_SLOP || touches.length > 1) {
+          g.moved = true;
+        }
+        const centre = fromCentre(centreOf(touches));
+        if (touches.length > 1 && g.start.spread > 0) {
+          // Past the limits while pinching, then springs back on release.
+          const zoom = Math.min(MAX_ZOOM * 1.25, Math.max(0.75, (g.start.view.scale * spreadOf(touches)) / g.start.spread));
+          show(zoomAround(g.start.view, zoom, g.start.centre, centre), false);
+        } else if (g.start.view.scale > 1) {
+          // One finger drags the zoomed image; at 1× there's nothing to drag.
+          const dragged = {
+            ...g.start.view,
+            x: g.start.view.x + centre.x - g.start.centre.x,
+            y: g.start.view.y + centre.y - g.start.centre.y,
+          };
+          show(clampView(dragged, g.box, content()), false);
+        }
+      },
+      onPanResponderRelease: (event: GestureResponderEvent) => {
+        const now = Date.now();
+        const { pageX, pageY } = event.nativeEvent;
+        const isTap = !g.moved && now - g.grantedAt < DOUBLE_TAP_MS;
+        const last = g.lastTap;
+        if (
+          isTap &&
+          last &&
+          now - last.at < DOUBLE_TAP_MS &&
+          Math.hypot(pageX - last.x, pageY - last.y) < DOUBLE_TAP_SLOP
+        ) {
+          g.lastTap = null;
+          // Zooming in keeps the tapped spot under the finger (as far as the edges allow).
+          const tapped = fromCentre({ x: pageX, y: pageY });
+          const target =
+            g.view.scale > 1.01
+              ? { scale: 1, x: 0, y: 0 }
+              : zoomAround({ scale: 1, x: 0, y: 0 }, DOUBLE_TAP_ZOOM, tapped, tapped);
+          show(clampView(target, g.box, content()), true);
+          return;
+        }
+        g.lastTap = isTap ? { at: now, x: pageX, y: pageY } : null;
+        show(clampView(g.view, g.box, content()), true);
+      },
+      onPanResponderTerminate: () => show(clampView(g.view, g.box, content()), true),
+    })
+  ).current;
+
+  const onLayout = (event: LayoutChangeEvent) => {
+    const { width, height } = event.nativeEvent.layout;
+    g.box = { width, height };
+    goNative();
+    boxRef.current?.measureInWindow?.((left, top) => {
+      g.origin = { x: left, y: top };
+    });
+  };
+
+  const handleLoad = (event: NativeSyntheticEvent<ImageLoadEventData>) => {
+    const source = event?.nativeEvent?.source;
+    if (source && source.width > 0 && source.height > 0) g.image = { width: source.width, height: source.height };
+    onLoad();
+  };
+
+  return (
+    <View ref={boxRef} style={styles.box} onLayout={onLayout} {...pan.panHandlers}>
+      <Animated.Image
+        source={{ uri }}
+        style={[styles.image, { transform: [{ translateX: x }, { translateY: y }, { scale }] }]}
+        resizeMode="contain"
+        accessibilityLabel={accessibilityLabel}
+        accessibilityIgnoresInvertColors
+        onLoad={handleLoad}
+        onError={onError}
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  box: { flex: 1, overflow: 'hidden' },
+  image: { width: '100%', height: '100%' },
+});

package/src/ui/screens/chat/ChatView.styles.ts

@@ -84,6 +84,11 @@ export const styles = StyleSheet.create({
     flexGrow: 1,
     justifyContent: 'center',
   },
+  // Placeholders sit at the bottom, where the newest messages will land.
+  messagesContentLoading: {
+    flexGrow: 1,
+    justifyContent: 'flex-end',
+  },
   emptyState: {
     alignItems: 'center',
     paddingHorizontal: spacing.xl,
@@ -117,13 +122,6 @@ export const styles = StyleSheet.create({
     fontSize: fontSize.meta,
     fontWeight: '600',
   },
-  stateText: {
-    textAlign: 'center',
-    paddingVertical: 40,
-    paddingHorizontal: spacing.xl,
-    color: palette.textSubtle,
-    fontSize: fontSize.meta,
-  },
   messageRow: {
     maxWidth: '100%',
   },

package/src/ui/screens/chat/ChatView.tsx

@@ -62,6 +62,7 @@ import { isHttpUrl, openExternalUrl } from '../../utils/safe-url';
 import { isPlayableAudio } from '../../../audio/voice';
 import { VoiceNote, type VoiceNoteLabels } from '../../components/VoiceNote';
 import { FileCard } from '../../components/FileCard';
+import { MessagesSkeleton } from '../../components/MessagesSkeleton';
 import { backDirection, isRTL } from '../../utils/rtl';
 import { styles } from './ChatView.styles';
 import type { ChatLabels, ChatViewProps } from './ChatView.types';
@@ -331,6 +332,7 @@ export function ChatView({
   const headerTextColor = contrastingTextColor(color);
   const onDarkHeader = headerTextColor === palette.white;
   const isEmptyThread = !loading && messages.length === 0;
+  const isLoadingThread = loading && messages.length === 0;
   const agentIsActive = agentOnline ?? isOnline;
   // "Waiting for a teammate" until someone replies: no teammate in the header
   // and the visitor spoke last (bot replies before that still count as waiting).
@@ -439,6 +441,7 @@ export function ChatView({
         contentContainerStyle={[
           styles.messagesContent,
           isEmptyThread && styles.messagesContentEmpty,
+          isLoadingThread && styles.messagesContentLoading,
         ]}
         keyboardShouldPersistTaps="handled"
         // Interactive dismissal drags the keyboard down under the finger while
@@ -455,9 +458,7 @@ export function ChatView({
           </Pressable>
         ) : null}
 
-        {loading && messages.length === 0 ? (
-          <Text style={styles.stateText}>{labels.loading}</Text>
-        ) : null}
+        {isLoadingThread ? <MessagesSkeleton color={color} label={labels.loading} /> : null}
 
         {isEmptyThread ? (
           <View style={styles.emptyState}>