@repzo/widget-react-native 1.2.1 → 1.3.0

package/lib/commonjs/ui/components/VoiceNote.js

@@ -0,0 +1,353 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.VoiceNote = VoiceNote;
+var _react = require("react");
+var _reactNative = require("react-native");
+var _voice = require("../../audio/voice.js");
+var _icons = require("./icons.js");
+var _theme = require("../styles/theme.js");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * A voice note (or any audio attachment) played inside the chat, laid out the
+ * way messaging apps do it: a play button beside a waveform the visitor can
+ * tap or drag to jump through the note, the time under it, and a speed chip
+ * once the note has been started. Only rendered when the app can play audio
+ * (see `src/audio/voice.ts`); otherwise audio stays a file row.
+ */
+
+const BAR_COUNT = 32;
+const BAR_WIDTH = 3;
+const BAR_MIN_HEIGHT = 4;
+const BAR_MAX_HEIGHT = 24;
+const BUTTON_SIZE = 36;
+const KNOB_SIZE = 12;
+const SPEEDS = [1, 1.5, 2];
+
+/**
+ * The player is only created once the visitor taps play. The whole thread
+ * renders at once, so a player per note would download every note in the
+ * conversation as soon as the chat opened.
+ */
+function VoiceNote(props) {
+  const [started, setStarted] = (0, _react.useState)(false);
+  if (started) return /*#__PURE__*/(0, _jsxRuntime.jsx)(ActiveVoiceNote, {
+    ...props
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(VoiceNoteLayout, {
+    ...props,
+    playing: false,
+    loading: false,
+    progress: 0,
+    time: null,
+    onToggle: () => setStarted(true)
+  });
+}
+
+/** A note that has been started: owns its player and plays on mount. */
+function ActiveVoiceNote(props) {
+  const {
+    url,
+    onError
+  } = props;
+  const {
+    player,
+    status
+  } = (0, _voice.useVoicePlayer)(url);
+  const [speedIndex, setSpeedIndex] = (0, _react.useState)(0);
+  const [scrub, setScrub] = (0, _react.useState)(null);
+  const [trackWidth, setTrackWidth] = (0, _react.useState)(0);
+  // Whether the visitor asked for playback, so a note still loading shows a
+  // spinner, and one they paused while it loaded doesn't.
+  const [wantsPlay, setWantsPlay] = (0, _react.useState)(true);
+  // This note's hold on playback: starting it pauses any other note.
+  const releasePlayback = (0, _react.useRef)(null);
+  const duration = Math.max(Number(status?.duration) || 0, 0);
+  const currentTime = Math.max(Number(status?.currentTime) || 0, 0);
+  const playing = !!status?.playing;
+  const finished = !!status?.didJustFinish || duration > 0 && currentTime >= duration - 0.1;
+  // `isLoaded` / `isBuffering` are compared strictly: a player that
+  // doesn't report them never gets a spinner that can't go away.
+  const loading = wantsPlay && !playing && (status?.isLoaded === false || status?.isBuffering === true);
+  const pause = () => {
+    setWantsPlay(false);
+    player.pause();
+  };
+  const start = () => {
+    releasePlayback.current?.();
+    releasePlayback.current = (0, _voice.claimVoicePlayback)(pause);
+    setWantsPlay(true);
+    player.play();
+  };
+
+  // The visitor tapped play on the idle note, which created this player.
+  // Neither callback changes for the player's lifetime.
+  (0, _react.useEffect)(() => {
+    start();
+    return () => releasePlayback.current?.();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  // The error is only on the status update that reports it (the next one
+  // clears it), so it is acted on as it arrives.
+  const error = status?.error;
+  (0, _react.useEffect)(() => {
+    if (error) onError();
+  }, [error, onError]);
+  const togglePlay = async () => {
+    if (playing || loading) {
+      pause();
+      return;
+    }
+    if (finished) await player.seekTo(0);
+    start();
+  };
+  const cycleSpeed = () => {
+    const next = (speedIndex + 1) % SPEEDS.length;
+    setSpeedIndex(next);
+    try {
+      player.setPlaybackRate(SPEEDS[next], 'high');
+    } catch {
+      // Some versions take no pitch-correction argument.
+      try {
+        player.setPlaybackRate(SPEEDS[next]);
+      } catch {
+        // Speed unsupported: the note keeps playing at 1×.
+      }
+    }
+  };
+
+  // The latest values for the (stable) PanResponder below.
+  const latest = (0, _react.useRef)({
+    trackWidth,
+    duration,
+    player
+  });
+  latest.current = {
+    trackWidth,
+    duration,
+    player
+  };
+  const ratioAt = x => {
+    const width = latest.current.trackWidth;
+    return width > 0 ? Math.min(1, Math.max(0, x / width)) : 0;
+  };
+  // Where the finger first touched the track. Later positions are that plus
+  // the drag distance: a move event's own `locationX` is measured from
+  // whatever view is under the finger, not from the track.
+  const startX = (0, _react.useRef)(0);
+  const pan = (0, _react.useRef)(_reactNative.PanResponder.create({
+    onStartShouldSetPanResponder: () => true,
+    onMoveShouldSetPanResponder: () => true,
+    onPanResponderGrant: event => {
+      startX.current = event.nativeEvent.locationX;
+      setScrub(ratioAt(startX.current));
+    },
+    onPanResponderMove: (_, gesture) => setScrub(ratioAt(startX.current + gesture.dx)),
+    onPanResponderRelease: (_, gesture) => {
+      const {
+        duration: length,
+        player: current
+      } = latest.current;
+      if (length > 0) void current.seekTo(ratioAt(startX.current + gesture.dx) * length);
+      setScrub(null);
+    },
+    onPanResponderTerminate: () => setScrub(null)
+  })).current;
+  const displayTime = scrub != null ? scrub * duration : playing ? currentTime : finished ? duration : currentTime || duration;
+  // The chip joins once the note was started, so an untouched note shows only its length.
+  const showSpeed = speedIndex > 0 || playing || currentTime > 0 && !finished;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(VoiceNoteLayout, {
+    ...props,
+    playing: playing,
+    loading: loading,
+    progress: scrub ?? (duration > 0 ? Math.min(1, currentTime / duration) : 0)
+    // Nothing to show until the player knows the note's length.
+    ,
+    time: duration > 0 ? (0, _voice.formatVoiceClock)(displayTime) : null,
+    onToggle: () => void togglePlay(),
+    track: {
+      panHandlers: pan.panHandlers,
+      onWidth: setTrackWidth
+    },
+    speed: showSpeed ? {
+      value: SPEEDS[speedIndex],
+      changed: speedIndex > 0,
+      onPress: cycleSpeed
+    } : null
+  });
+}
+function VoiceNoteLayout({
+  seed,
+  color,
+  onBrandBubble,
+  labels,
+  playing,
+  loading,
+  progress,
+  time,
+  onToggle,
+  track,
+  speed
+}) {
+  const accent = onBrandBubble ? _theme.palette.white : color;
+  const onAccent = onBrandBubble ? color : _theme.palette.white;
+  const trackColor = onBrandBubble ? (0, _theme.withAlpha)(_theme.palette.white, 0.4) : _theme.palette.disabled;
+  const subtle = onBrandBubble ? (0, _theme.withAlpha)(_theme.palette.white, 0.8) : _theme.palette.textMuted;
+  const levels = (0, _react.useMemo)(() => (0, _voice.voiceWaveformLevels)(seed, BAR_COUNT), [seed]);
+  const [trackWidth, setTrackWidth] = (0, _react.useState)(0);
+  const onTrackLayout = event => {
+    setTrackWidth(event.nativeEvent.layout.width);
+    track?.onWidth(event.nativeEvent.layout.width);
+  };
+
+  // Bar i's centre sits at this share of the track; the playhead travels the same span.
+  const barCentre = i => trackWidth > BAR_WIDTH ? (BAR_WIDTH / 2 + i * (trackWidth - BAR_WIDTH) / (BAR_COUNT - 1)) / trackWidth : i / (BAR_COUNT - 1);
+  const knobOffset = trackWidth > 0 ? Math.round(progress * (trackWidth - KNOB_SIZE)) : 0;
+  let icon = /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.PlayIcon, {
+    size: 14,
+    color: onAccent
+  });
+  if (loading) icon = /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ActivityIndicator, {
+    size: "small",
+    color: onAccent
+  });else if (playing) icon = /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.PauseIcon, {
+    size: 14,
+    color: onAccent
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: styles.root,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.row,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+        onPress: onToggle,
+        accessibilityRole: "button",
+        accessibilityLabel: playing || loading ? labels.pause : labels.play,
+        accessibilityState: {
+          busy: loading
+        },
+        hitSlop: 4,
+        style: ({
+          pressed
+        }) => [styles.playButton, {
+          backgroundColor: accent,
+          opacity: pressed ? 0.8 : 1
+        }],
+        children: icon
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.track,
+        onLayout: onTrackLayout,
+        ...track?.panHandlers,
+        children: [levels.map((level, i) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          // Touches land on the track itself, so their position is measured from its edge.
+          pointerEvents: "none",
+          style: [styles.bar, {
+            height: BAR_MIN_HEIGHT + level * (BAR_MAX_HEIGHT - BAR_MIN_HEIGHT),
+            backgroundColor: barCentre(i) <= progress ? accent : trackColor
+          }]
+        }, i)), trackWidth > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          pointerEvents: "none",
+          style: [styles.knob, {
+            backgroundColor: accent,
+            transform: [{
+              translateX: knobOffset
+            }]
+          }]
+        }) : null]
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.meta,
+      children: [time != null ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: [styles.time, {
+          color: subtle
+        }],
+        children: time
+      }) : null, speed ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+        onPress: speed.onPress,
+        accessibilityRole: "button",
+        accessibilityLabel: labels.speed,
+        hitSlop: 12,
+        style: ({
+          pressed
+        }) => [styles.speed, {
+          backgroundColor: speed.changed ? accent : trackColor,
+          opacity: pressed ? 0.6 : 1
+        }],
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
+          style: [styles.speedText, {
+            color: speed.changed ? onAccent : onBrandBubble ? _theme.palette.white : _theme.palette.text
+          }],
+          children: [speed.value, "\xD7"]
+        })
+      }) : null]
+    })]
+  });
+}
+const styles = _reactNative.StyleSheet.create({
+  // A timeline runs left to right in every language, so RTL doesn't mirror it
+  // (the touch position and the playhead stay in the same coordinates).
+  root: {
+    minWidth: 200,
+    direction: 'ltr'
+  },
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 10
+  },
+  playButton: {
+    width: BUTTON_SIZE,
+    height: BUTTON_SIZE,
+    borderRadius: BUTTON_SIZE / 2,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  track: {
+    flex: 1,
+    minWidth: 0,
+    height: BUTTON_SIZE,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between'
+  },
+  bar: {
+    width: BAR_WIDTH,
+    borderRadius: BAR_WIDTH / 2
+  },
+  knob: {
+    position: 'absolute',
+    left: 0,
+    width: KNOB_SIZE,
+    height: KNOB_SIZE,
+    borderRadius: KNOB_SIZE / 2
+  },
+  meta: {
+    minHeight: 18,
+    marginTop: -2,
+    marginLeft: BUTTON_SIZE + 10,
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 6
+  },
+  time: {
+    fontSize: _theme.fontSize.caption,
+    fontWeight: '500',
+    fontVariant: ['tabular-nums']
+  },
+  speed: {
+    minWidth: 30,
+    height: 18,
+    paddingHorizontal: 6,
+    borderRadius: 9,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  speedText: {
+    fontSize: 11,
+    fontWeight: '700',
+    fontVariant: ['tabular-nums']
+  }
+});
+//# sourceMappingURL=VoiceNote.js.map

package/lib/commonjs/ui/components/VoiceNote.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","require","_reactNative","_voice","_icons","_theme","_jsxRuntime","BAR_COUNT","BAR_WIDTH","BAR_MIN_HEIGHT","BAR_MAX_HEIGHT","BUTTON_SIZE","KNOB_SIZE","SPEEDS","VoiceNote","props","started","setStarted","useState","jsx","ActiveVoiceNote","VoiceNoteLayout","playing","loading","progress","time","onToggle","url","onError","player","status","useVoicePlayer","speedIndex","setSpeedIndex","scrub","setScrub","trackWidth","setTrackWidth","wantsPlay","setWantsPlay","releasePlayback","useRef","duration","Math","max","Number","currentTime","finished","didJustFinish","isLoaded","isBuffering","pause","start","current","claimVoicePlayback","play","useEffect","error","togglePlay","seekTo","cycleSpeed","next","length","setPlaybackRate","latest","ratioAt","x","width","min","startX","pan","PanResponder","create","onStartShouldSetPanResponder","onMoveShouldSetPanResponder","onPanResponderGrant","event","nativeEvent","locationX","onPanResponderMove","_","gesture","dx","onPanResponderRelease","onPanResponderTerminate","displayTime","showSpeed","formatVoiceClock","track","panHandlers","onWidth","speed","value","changed","onPress","seed","color","onBrandBubble","labels","accent","palette","white","onAccent","trackColor","withAlpha","disabled","subtle","textMuted","levels","useMemo","voiceWaveformLevels","onTrackLayout","layout","barCentre","i","knobOffset","round","icon","PlayIcon","size","ActivityIndicator","PauseIcon","jsxs","View","style","styles","root","children","row","Pressable","accessibilityRole","accessibilityLabel","accessibilityState","busy","hitSlop","pressed","playButton","backgroundColor","opacity","onLayout","map","level","pointerEvents","bar","height","knob","transform","translateX","meta","Text","speedText","text","StyleSheet","minWidth","direction","flexDirection","alignItems","gap","borderRadius","justifyContent","flex","position","left","minHeight","marginTop","marginLeft","fontSize","caption","fontWeight","fontVariant","paddingHorizontal"],"sourceRoot":"../../../../src","sources":["ui/components/VoiceNote.tsx"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/ui/components/ZoomableImage.js

@@ -0,0 +1,299 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MAX_ZOOM = exports.DOUBLE_TAP_ZOOM = void 0;
+exports.ZoomableImage = ZoomableImage;
+exports.clampView = clampView;
+exports.fittedSize = fittedSize;
+exports.zoomAround = zoomAround;
+var _react = require("react");
+var _reactNative = require("react-native");
+var _useReduceMotion = require("../hooks/use-reduce-motion.js");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * 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.
+ */
+
+const MAX_ZOOM = exports.MAX_ZOOM = 4;
+const DOUBLE_TAP_ZOOM = exports.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. */
+
+/** The size the image is drawn at with `contain`, before any zoom. */
+function fittedSize(box, image) {
+  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.
+ */
+function clampView(view, box, content) {
+  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.
+ */
+function zoomAround(start, scale, from, to) {
+  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
+  };
+}
+const centreOf = touches => ({
+  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 => touches.length < 2 ? 0 : Math.hypot(touches[0].pageX - touches[1].pageX, touches[0].pageY - touches[1].pageY);
+function ZoomableImage({
+  uri,
+  accessibilityLabel,
+  onLoad,
+  onError
+}) {
+  const reduceMotion = (0, _useReduceMotion.useReduceMotion)();
+  const [scale] = (0, _react.useState)(() => new _reactNative.Animated.Value(1));
+  const [x] = (0, _react.useState)(() => new _reactNative.Animated.Value(0));
+  const [y] = (0, _react.useState)(() => new _reactNative.Animated.Value(0));
+
+  // Gesture state, read by the (stable) PanResponder below.
+  const g = (0, _react.useRef)({
+    view: {
+      scale: 1,
+      x: 0,
+      y: 0
+    },
+    box: {
+      width: 0,
+      height: 0
+    },
+    // Where the box sits on screen, so touches can be measured from its centre.
+    origin: {
+      x: 0,
+      y: 0
+    },
+    image: null,
+    // The view, finger centre and finger spread when the current set of fingers went down.
+    start: {
+      view: {
+        scale: 1,
+        x: 0,
+        y: 0
+      },
+      centre: {
+        x: 0,
+        y: 0
+      },
+      spread: 0,
+      count: 0
+    },
+    moved: false,
+    grantedAt: 0,
+    lastTap: null,
+    reduceMotion: false,
+    native: false
+  }).current;
+  g.reduceMotion = reduceMotion;
+  const boxRef = (0, _react.useRef)(null);
+  const show = (view, animate) => {
+    g.view = view;
+    if (!animate || g.reduceMotion !== false) {
+      scale.setValue(view.scale);
+      x.setValue(view.x);
+      y.setValue(view.y);
+      return;
+    }
+    const spring = (value, toValue) => _reactNative.Animated.spring(value, {
+      toValue,
+      useNativeDriver: true,
+      bounciness: 0,
+      speed: 18
+    });
+    _reactNative.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, toValue) => _reactNative.Animated.spring(value, {
+      toValue,
+      useNativeDriver: true,
+      bounciness: 0,
+      speed: 18
+    });
+    _reactNative.Animated.parallel([settle(scale, g.view.scale), settle(x, g.view.x), settle(y, g.view.y)]).start();
+  };
+  const fromCentre = point => ({
+    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 => {
+    g.start = {
+      view: g.view,
+      centre: fromCentre(centreOf(touches)),
+      spread: spreadOf(touches),
+      count: touches.length
+    };
+  };
+  const pan = (0, _react.useRef)(_reactNative.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 => {
+      g.moved = false;
+      g.grantedAt = Date.now();
+      begin(event.nativeEvent.touches);
+    },
+    onPanResponderMove: (event, 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 => {
+      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 => {
+    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 => {
+    const source = event?.nativeEvent?.source;
+    if (source && source.width > 0 && source.height > 0) g.image = {
+      width: source.width,
+      height: source.height
+    };
+    onLoad();
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    ref: boxRef,
+    style: styles.box,
+    onLayout: onLayout,
+    ...pan.panHandlers,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.Image, {
+      source: {
+        uri
+      },
+      style: [styles.image, {
+        transform: [{
+          translateX: x
+        }, {
+          translateY: y
+        }, {
+          scale
+        }]
+      }],
+      resizeMode: "contain",
+      accessibilityLabel: accessibilityLabel,
+      accessibilityIgnoresInvertColors: true,
+      onLoad: handleLoad,
+      onError: onError
+    })
+  });
+}
+const styles = _reactNative.StyleSheet.create({
+  box: {
+    flex: 1,
+    overflow: 'hidden'
+  },
+  image: {
+    width: '100%',
+    height: '100%'
+  }
+});
+//# sourceMappingURL=ZoomableImage.js.map