@repzo/widget-react-native 1.2.1 → 1.3.0

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

@@ -0,0 +1,349 @@
+"use strict";
+
+/**
+ * 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.
+ */
+
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { ActivityIndicator, PanResponder, Pressable, StyleSheet, Text, View } from 'react-native';
+import { claimVoicePlayback, formatVoiceClock, useVoicePlayer, voiceWaveformLevels } from "../../audio/voice.js";
+import { PauseIcon, PlayIcon } from "./icons.js";
+import { fontSize, palette, withAlpha } from "../styles/theme.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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.
+ */
+export function VoiceNote(props) {
+  const [started, setStarted] = useState(false);
+  if (started) return /*#__PURE__*/_jsx(ActiveVoiceNote, {
+    ...props
+  });
+  return /*#__PURE__*/_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
+  } = useVoicePlayer(url);
+  const [speedIndex, setSpeedIndex] = useState(0);
+  const [scrub, setScrub] = useState(null);
+  const [trackWidth, setTrackWidth] = 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] = useState(true);
+  // This note's hold on playback: starting it pauses any other note.
+  const releasePlayback = 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 = 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.
+  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;
+  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 = 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 = useRef(0);
+  const pan = useRef(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__*/_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 ? 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 ? palette.white : color;
+  const onAccent = onBrandBubble ? color : palette.white;
+  const trackColor = onBrandBubble ? withAlpha(palette.white, 0.4) : palette.disabled;
+  const subtle = onBrandBubble ? withAlpha(palette.white, 0.8) : palette.textMuted;
+  const levels = useMemo(() => voiceWaveformLevels(seed, BAR_COUNT), [seed]);
+  const [trackWidth, setTrackWidth] = 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__*/_jsx(PlayIcon, {
+    size: 14,
+    color: onAccent
+  });
+  if (loading) icon = /*#__PURE__*/_jsx(ActivityIndicator, {
+    size: "small",
+    color: onAccent
+  });else if (playing) icon = /*#__PURE__*/_jsx(PauseIcon, {
+    size: 14,
+    color: onAccent
+  });
+  return /*#__PURE__*/_jsxs(View, {
+    style: styles.root,
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: styles.row,
+      children: [/*#__PURE__*/_jsx(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__*/_jsxs(View, {
+        style: styles.track,
+        onLayout: onTrackLayout,
+        ...track?.panHandlers,
+        children: [levels.map((level, i) => /*#__PURE__*/_jsx(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__*/_jsx(View, {
+          pointerEvents: "none",
+          style: [styles.knob, {
+            backgroundColor: accent,
+            transform: [{
+              translateX: knobOffset
+            }]
+          }]
+        }) : null]
+      })]
+    }), /*#__PURE__*/_jsxs(View, {
+      style: styles.meta,
+      children: [time != null ? /*#__PURE__*/_jsx(Text, {
+        style: [styles.time, {
+          color: subtle
+        }],
+        children: time
+      }) : null, speed ? /*#__PURE__*/_jsx(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__*/_jsxs(Text, {
+          style: [styles.speedText, {
+            color: speed.changed ? onAccent : onBrandBubble ? palette.white : palette.text
+          }],
+          children: [speed.value, "\xD7"]
+        })
+      }) : null]
+    })]
+  });
+}
+const styles = 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: 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/module/ui/components/VoiceNote.js.map

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

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

@@ -0,0 +1,291 @@
+"use strict";
+
+/**
+ * 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 } from 'react-native';
+import { useReduceMotion } from "../hooks/use-reduce-motion.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+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. */
+
+/** The size the image is drawn at with `contain`, before any zoom. */
+export 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.
+ */
+export 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.
+ */
+export 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);
+export function ZoomableImage({
+  uri,
+  accessibilityLabel,
+  onLoad,
+  onError
+}) {
+  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
+    },
+    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 = 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) => 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, toValue) => 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: 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 = 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 => {
+      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__*/_jsx(View, {
+    ref: boxRef,
+    style: styles.box,
+    onLayout: onLayout,
+    ...pan.panHandlers,
+    children: /*#__PURE__*/_jsx(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 = StyleSheet.create({
+  box: {
+    flex: 1,
+    overflow: 'hidden'
+  },
+  image: {
+    width: '100%',
+    height: '100%'
+  }
+});
+//# sourceMappingURL=ZoomableImage.js.map