@ethora/chat-component-rn 26.10.9 → 26.10.11

package/lib/commonjs/components/Modals/FilePreviewModal/MediaViewer.js

@@ -0,0 +1,824 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _reactNativeSafeAreaContext = require("react-native-safe-area-context");
+var _reactNativeGestureHandler = require("react-native-gesture-handler");
+var _expoVideo = require("expo-video");
+var _reactRedux = require("react-redux");
+var _icons = require("../../../assets/icons");
+var _secureFileUrl = require("../../../helpers/secureFileUrl");
+var _videoCache = require("../../../helpers/videoCache");
+var _chatSettingsSlice = require("../../../roomStore/chatSettingsSlice");
+var _roomsSlice = require("../../../roomStore/roomsSlice");
+var _useT = require("../../../i18n/useT");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+/** @format */
+
+const WHITE = '#FFFFFF';
+const BAR_BACKGROUND = 'rgba(0, 0, 0, 0.45)';
+/** Drag (fraction of the height) or fling speed that closes the viewer. */
+const CLOSE_DISTANCE = 0.15;
+const CLOSE_VELOCITY = 900;
+/** Swipe (fraction of the width) or fling speed that turns the page. */
+const PAGE_DISTANCE = 0.25;
+const PAGE_VELOCITY = 700;
+/** A playing video takes the chrome away after this long without a touch. */
+const AUTO_HIDE_MS = 3000;
+const formatTime = seconds => {
+  const total = Math.max(0, Math.floor(seconds || 0));
+  const m = Math.floor(total / 60);
+  const s = total % 60;
+  return `${m}:${s < 10 ? '0' : ''}${s}`;
+};
+/**
+ * Full-screen photo / video viewer that behaves like Telegram's. A tap shows
+ * or hides everything but the media (a fade both ways); a drag up or down
+ * pulls the media off with the backdrop fading behind it, and a long enough
+ * drag or a fling closes the viewer; a sideways swipe turns the page in an
+ * album. The bottom bar carries Reply (where replies are on) and Delete (on
+ * one's own message). A video has its own controls in the chrome: tapping
+ * them works the player instead of hiding the chrome, and while it plays the
+ * chrome goes away by itself after a few seconds.
+ */
+const MediaViewer = ({
+  file,
+  onClose,
+  onPage,
+  onSave,
+  onReplyOpened
+}) => {
+  const t = (0, _useT.useT)();
+  const locale = (0, _useT.useUiLocale)();
+  const dispatch = (0, _reactRedux.useDispatch)();
+  const insets = (0, _reactNativeSafeAreaContext.useSafeAreaInsets)();
+  const {
+    width,
+    height
+  } = (0, _reactNative.useWindowDimensions)();
+  const appear = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
+  const dragX = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
+  const dragY = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
+  const chrome = (0, _react.useRef)(new _reactNative.Animated.Value(1)).current;
+  const [chromeVisible, setChromeVisible] = (0, _react.useState)(true);
+  const [bottomBarHeight, setBottomBarHeight] = (0, _react.useState)(0);
+  const closing = (0, _react.useRef)(false);
+  const axis = (0, _react.useRef)(null);
+  const pendingSlide = (0, _react.useRef)(0);
+  const playing = (0, _react.useRef)(false);
+  const hideTimer = (0, _react.useRef)(null);
+  const siblings = file.siblings ?? [];
+  const index = file.index ?? 0;
+  const hasPrev = siblings.length > 1 && index > 0;
+  const hasNext = siblings.length > 1 && index < siblings.length - 1;
+  const isVideo = (file.mimetype || '').startsWith('video/');
+  const source = file.source;
+  const canReply = !!source?.replyTo;
+  const canDelete = !!source?.own;
+  (0, _react.useEffect)(() => {
+    _reactNative.Animated.timing(appear, {
+      toValue: 1,
+      duration: 220,
+      useNativeDriver: true
+    }).start();
+  }, [appear]);
+
+  // ---- chrome ------------------------------------------------------------
+
+  const cancelAutoHide = (0, _react.useCallback)(() => {
+    if (hideTimer.current) {
+      clearTimeout(hideTimer.current);
+    }
+    hideTimer.current = null;
+  }, []);
+  const showChrome = (0, _react.useCallback)(visible => {
+    setChromeVisible(visible);
+    _reactNative.Animated.timing(chrome, {
+      toValue: visible ? 1 : 0,
+      duration: 180,
+      useNativeDriver: true
+    }).start();
+  }, [chrome]);
+  const scheduleAutoHide = (0, _react.useCallback)(() => {
+    cancelAutoHide();
+    if (!playing.current) {
+      return;
+    }
+    hideTimer.current = setTimeout(() => showChrome(false), AUTO_HIDE_MS);
+  }, [cancelAutoHide, showChrome]);
+  (0, _react.useEffect)(() => cancelAutoHide, [cancelAutoHide]);
+  const toggleChrome = () => {
+    const next = !chromeVisible;
+    showChrome(next);
+    if (next) {
+      scheduleAutoHide();
+    } else {
+      cancelAutoHide();
+    }
+  };
+  const handlePlayback = (0, _react.useCallback)(isPlaying => {
+    playing.current = isPlaying;
+    if (isPlaying) {
+      scheduleAutoHide();
+    } else {
+      cancelAutoHide();
+    }
+  }, [cancelAutoHide, scheduleAutoHide]);
+
+  // ---- close / page --------------------------------------------------------
+
+  const close = (0, _react.useCallback)((direction = 0) => {
+    if (closing.current) {
+      return;
+    }
+    closing.current = true;
+    cancelAutoHide();
+    const animations = [_reactNative.Animated.timing(appear, {
+      toValue: 0,
+      duration: 200,
+      useNativeDriver: true
+    })];
+    if (direction !== 0) {
+      animations.push(_reactNative.Animated.timing(dragY, {
+        toValue: direction * height,
+        duration: 200,
+        useNativeDriver: true
+      }));
+    }
+    _reactNative.Animated.parallel(animations).start(() => onClose());
+  }, [appear, cancelAutoHide, dragY, height, onClose]);
+  (0, _react.useEffect)(() => {
+    const sub = _reactNative.BackHandler.addEventListener('hardwareBackPress', () => {
+      close();
+      return true;
+    });
+    return () => sub.remove();
+  }, [close]);
+  const springBack = value => _reactNative.Animated.spring(value, {
+    toValue: 0,
+    useNativeDriver: true,
+    bounciness: 4
+  }).start();
+  const turnPage = (0, _react.useCallback)(direction => {
+    _reactNative.Animated.timing(dragX, {
+      toValue: -direction * width,
+      duration: 160,
+      useNativeDriver: true
+    }).start(() => {
+      pendingSlide.current = direction;
+      onPage?.(index + direction);
+    });
+  }, [dragX, index, onPage, width]);
+
+  // The new file mounts off-screen on the side it comes from, then slides in.
+  (0, _react.useEffect)(() => {
+    const direction = pendingSlide.current;
+    if (!direction) {
+      return;
+    }
+    pendingSlide.current = 0;
+    playing.current = false;
+    dragX.setValue(direction * width);
+    _reactNative.Animated.timing(dragX, {
+      toValue: 0,
+      duration: 180,
+      useNativeDriver: true
+    }).start();
+  }, [dragX, file.fileURL, width]);
+
+  // ---- gestures ------------------------------------------------------------
+
+  const latest = (0, _react.useRef)({
+    hasPrev,
+    hasNext,
+    width,
+    height,
+    close,
+    turnPage
+  });
+  latest.current = {
+    hasPrev,
+    hasNext,
+    width,
+    height,
+    close,
+    turnPage
+  };
+  const pageable = siblings.length > 1;
+  const pan = (0, _react.useMemo)(() => _reactNativeGestureHandler.Gesture.Pan().runOnJS(true).activeOffsetY([-12, 12]).activeOffsetX(pageable ? [-12, 12] : [-10000, 10000]).onStart(e => {
+    axis.current = pageable && Math.abs(e.translationX) > Math.abs(e.translationY) ? 'x' : 'y';
+  }).onUpdate(e => {
+    const l = latest.current;
+    if (axis.current === 'x') {
+      // Past the first or last file the page only gives a little.
+      const edge = e.translationX > 0 && !l.hasPrev || e.translationX < 0 && !l.hasNext;
+      dragX.setValue(edge ? e.translationX * 0.3 : e.translationX);
+    } else {
+      dragY.setValue(e.translationY);
+    }
+  }).onEnd(e => {
+    const l = latest.current;
+    if (axis.current === 'x') {
+      if ((e.translationX < -l.width * PAGE_DISTANCE || e.velocityX < -PAGE_VELOCITY) && l.hasNext) {
+        l.turnPage(1);
+      } else if ((e.translationX > l.width * PAGE_DISTANCE || e.velocityX > PAGE_VELOCITY) && l.hasPrev) {
+        l.turnPage(-1);
+      } else {
+        springBack(dragX);
+      }
+    } else if (Math.abs(e.translationY) > l.height * CLOSE_DISTANCE || Math.abs(e.velocityY) > CLOSE_VELOCITY) {
+      l.close(Math.sign(e.translationY || e.velocityY) || 1);
+    } else {
+      springBack(dragY);
+    }
+    axis.current = null;
+  }),
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [pageable]);
+
+  // ---- actions -------------------------------------------------------------
+
+  const handleReply = () => {
+    if (!source?.replyTo) {
+      return;
+    }
+    const target = source.replyTo;
+    close();
+    dispatch((0, _roomsSlice.setEditAction)({
+      isEdit: false
+    }));
+    dispatch((0, _roomsSlice.setActiveMessage)({
+      id: target.id,
+      chatJID: target.chatJID
+    }));
+    onReplyOpened?.();
+  };
+  const handleDelete = () => {
+    if (!source?.own) {
+      return;
+    }
+    const {
+      roomJid,
+      messageId
+    } = source;
+    close();
+    dispatch((0, _chatSettingsSlice.setDeleteModal)({
+      isDeleteModal: true,
+      roomJid,
+      messageId
+    }));
+  };
+
+  // ---- styles from the animated values -------------------------------------
+
+  const dragFade = dragY.interpolate({
+    inputRange: [-height / 2, 0, height / 2],
+    outputRange: [0.15, 1, 0.15],
+    extrapolate: 'clamp'
+  });
+  const dragShrink = dragY.interpolate({
+    inputRange: [-height, 0, height],
+    outputRange: [0.85, 1, 0.85],
+    extrapolate: 'clamp'
+  });
+  const backdropOpacity = _reactNative.Animated.multiply(appear, dragFade);
+  const mediaStyle = {
+    transform: [{
+      translateX: dragX
+    }, {
+      translateY: dragY
+    }, {
+      scale: _reactNative.Animated.multiply(appear.interpolate({
+        inputRange: [0, 1],
+        outputRange: [0.92, 1]
+      }), dragShrink)
+    }],
+    opacity: appear
+  };
+  // The chrome steps aside while the media is being dragged.
+  const chromeOpacity = _reactNative.Animated.multiply(_reactNative.Animated.multiply(chrome, appear), dragY.interpolate({
+    inputRange: [-60, 0, 60],
+    outputRange: [0, 1, 0],
+    extrapolate: 'clamp'
+  }));
+  const chromePointerEvents = chromeVisible ? 'box-none' : 'none';
+  const subtitle = [source?.timestamp ? new Date(source.timestamp).toLocaleString(locale, {
+    day: 'numeric',
+    month: 'short',
+    hour: '2-digit',
+    minute: '2-digit'
+  }) : null, siblings.length > 1 ? t('attachment.position', {
+    index: index + 1,
+    total: siblings.length
+  }) : null].filter(Boolean).join(' · ');
+  const showBottomBar = canReply || canDelete;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: _reactNative.StyleSheet.absoluteFill,
+    testID: "media-viewer",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.StatusBar, {
+      barStyle: "light-content",
+      hidden: !chromeVisible,
+      animated: true
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
+      style: [_reactNative.StyleSheet.absoluteFill, styles.backdrop, {
+        opacity: backdropOpacity
+      }]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeGestureHandler.GestureDetector, {
+      gesture: pan,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: _reactNative.StyleSheet.absoluteFill,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+          testID: "media-viewer-surface",
+          style: _reactNative.StyleSheet.absoluteFill,
+          onPress: toggleChrome,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
+            style: [_reactNative.StyleSheet.absoluteFill, mediaStyle],
+            pointerEvents: "none",
+            children: isVideo ? null : /*#__PURE__*/(0, _jsxRuntime.jsx)(ViewerImage, {
+              uri: file.fileURL
+            }, file.fileURL)
+          })
+        }), isVideo && /*#__PURE__*/(0, _jsxRuntime.jsx)(ViewerVideo, {
+          uri: (0, _secureFileUrl.withFileToken)(file.fileURL),
+          mimetype: file.mimetype,
+          mediaStyle: mediaStyle,
+          chromeOpacity: chromeOpacity,
+          chromePointerEvents: chromePointerEvents,
+          bottomOffset: (showBottomBar ? bottomBarHeight : insets.bottom) + 8,
+          outerGesture: pan,
+          onPlayback: handlePlayback,
+          onActivity: scheduleAutoHide
+        }, file.fileURL), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Animated.View, {
+          pointerEvents: chromePointerEvents,
+          style: [styles.topBar, {
+            paddingTop: insets.top + 6,
+            opacity: chromeOpacity
+          }],
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+            testID: "media-viewer-back",
+            accessibilityRole: "button",
+            accessibilityLabel: t('action.close'),
+            hitSlop: 12,
+            style: styles.iconButton,
+            onPress: () => close(),
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.BackIcon, {
+              color: WHITE
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+            style: styles.titleBlock,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+              numberOfLines: 1,
+              style: styles.title,
+              children: source?.senderName || t('modal.filePreview.title')
+            }), !!subtitle && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+              numberOfLines: 1,
+              style: styles.subtitle,
+              children: subtitle
+            })]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+            testID: "media-viewer-save",
+            accessibilityRole: "button",
+            accessibilityLabel: t('action.save'),
+            hitSlop: 12,
+            style: styles.iconButton,
+            onPress: onSave,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SaveIcon, {
+              color: WHITE
+            })
+          })]
+        }), showBottomBar && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Animated.View, {
+          pointerEvents: chromePointerEvents,
+          onLayout: e => setBottomBarHeight(e.nativeEvent.layout.height),
+          style: [styles.bottomBar, {
+            paddingBottom: insets.bottom + 8,
+            opacity: chromeOpacity
+          }],
+          children: [canReply ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+            testID: "media-viewer-reply",
+            accessibilityRole: "button",
+            accessibilityLabel: t('action.reply'),
+            hitSlop: 12,
+            style: styles.iconButton,
+            onPress: handleReply,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.ReplyIcon, {
+              color: WHITE
+            })
+          }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+            style: styles.iconButton
+          }), canDelete && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+            testID: "media-viewer-delete",
+            accessibilityRole: "button",
+            accessibilityLabel: t('action.delete'),
+            hitSlop: 12,
+            style: styles.iconButton,
+            onPress: handleDelete,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.DeleteIcon, {
+              fill: WHITE
+            })
+          })]
+        })]
+      })
+    })]
+  });
+};
+const ViewerImage = ({
+  uri
+}) => {
+  const [loaded, setLoaded] = (0, _react.useState)(false);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Image, {
+      source: {
+        uri: (0, _secureFileUrl.withFileToken)(uri)
+      },
+      style: _reactNative.StyleSheet.absoluteFill,
+      resizeMode: "contain",
+      onLoad: () => setLoaded(true),
+      onError: () => setLoaded(true)
+    }), !loaded && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: styles.center,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ActivityIndicator, {
+        color: WHITE
+      })
+    })]
+  });
+};
+/**
+ * The video page: the surface in the media layer, the play / pause button
+ * and the scrubber in the chrome layer. Streams when the server allows it
+ * and falls back to a downloaded copy (AVPlayer refuses servers that ignore
+ * byte ranges), which is also what a reopened video plays from.
+ */
+const ViewerVideo = ({
+  uri,
+  mimetype,
+  mediaStyle,
+  chromeOpacity,
+  chromePointerEvents,
+  bottomOffset,
+  outerGesture,
+  onPlayback,
+  onActivity
+}) => {
+  const t = (0, _useT.useT)();
+  const remote = (0, _videoCache.isRemoteUrl)(uri);
+  // What the player is given; null until we know where to play from.
+  const [source, setSource] = (0, _react.useState)(remote ? null : uri);
+  // null = not downloading, otherwise 0..1 (0 while the size is unknown).
+  const [progress, setProgress] = (0, _react.useState)(null);
+  const [failed, setFailed] = (0, _react.useState)(false);
+  const [isPlaying, setIsPlaying] = (0, _react.useState)(false);
+  const [time, setTime] = (0, _react.useState)(0);
+  const [duration, setDuration] = (0, _react.useState)(0);
+  const [scrubTime, setScrubTime] = (0, _react.useState)(null);
+  const [trackWidth, setTrackWidth] = (0, _react.useState)(0);
+  const ended = (0, _react.useRef)(false);
+  // Opens playing, like Telegram; a pause sticks across a fallback copy.
+  const wantsPlay = (0, _react.useRef)(true);
+  const downloadStarted = (0, _react.useRef)(false);
+  const mounted = (0, _react.useRef)(true);
+  (0, _react.useEffect)(() => () => {
+    mounted.current = false;
+  }, []);
+  const download = (0, _react.useCallback)(() => {
+    if (downloadStarted.current) {
+      return;
+    }
+    downloadStarted.current = true;
+    setProgress(0);
+    (0, _videoCache.downloadVideoToCache)(uri, mimetype, fraction => {
+      if (mounted.current) {
+        setProgress(fraction);
+      }
+    }).then(localUri => {
+      if (!mounted.current) {
+        return;
+      }
+      setProgress(null);
+      setSource(localUri);
+    }).catch(err => {
+      console.warn('video download failed', err);
+      if (!mounted.current) {
+        return;
+      }
+      setProgress(null);
+      setFailed(true);
+    });
+  }, [mimetype, uri]);
+  (0, _react.useEffect)(() => {
+    if (!remote) {
+      return;
+    }
+    let active = true;
+    (0, _videoCache.findCachedVideo)(uri, mimetype).then(cached => {
+      if (!active) {
+        return;
+      }
+      if (cached) {
+        setSource(cached);
+      } else if ((0, _videoCache.isStreamingUnsupported)(uri)) {
+        download();
+      } else {
+        setSource(uri);
+      }
+    });
+    return () => {
+      active = false;
+    };
+  }, [download, mimetype, remote, uri]);
+  const player = (0, _expoVideo.useVideoPlayer)(source, p => {
+    p.muted = false;
+    p.timeUpdateEventInterval = 0.25;
+    if (wantsPlay.current) {
+      p.play();
+    }
+  });
+  (0, _react.useEffect)(() => {
+    const subs = [player.addListener('playingChange', ({
+      isPlaying: next
+    }) => {
+      setIsPlaying(next);
+      onPlayback(next);
+    }), player.addListener('timeUpdate', ({
+      currentTime
+    }) => setTime(currentTime)), player.addListener('playToEnd', () => {
+      ended.current = true;
+    }), player.addListener('statusChange', event => {
+      if (event.status === 'readyToPlay') {
+        setDuration(player.duration || 0);
+        return;
+      }
+      if (event.status !== 'error') {
+        return;
+      }
+      if (source === uri && remote) {
+        (0, _videoCache.markStreamingUnsupported)(uri);
+        download();
+      } else {
+        setFailed(true);
+      }
+    })];
+    return () => subs.forEach(sub => sub.remove());
+  }, [download, onPlayback, player, remote, source, uri]);
+  (0, _react.useEffect)(() => () => onPlayback(false), [onPlayback]);
+  const togglePlay = () => {
+    onActivity();
+    if (isPlaying) {
+      wantsPlay.current = false;
+      player.pause();
+      return;
+    }
+    if (ended.current) {
+      ended.current = false;
+      player.currentTime = 0;
+    }
+    wantsPlay.current = true;
+    player.play();
+  };
+  const latest = (0, _react.useRef)({
+    trackWidth,
+    duration,
+    player,
+    onActivity
+  });
+  latest.current = {
+    trackWidth,
+    duration,
+    player,
+    onActivity
+  };
+  const timeAt = x => {
+    const l = latest.current;
+    if (l.trackWidth <= 0 || l.duration <= 0) {
+      return 0;
+    }
+    return Math.min(1, Math.max(0, x / l.trackWidth)) * l.duration;
+  };
+  const seek = seconds => {
+    const l = latest.current;
+    ended.current = false;
+    l.player.currentTime = seconds;
+    setTime(seconds);
+    l.onActivity();
+  };
+  const scrub = (0, _react.useMemo)(() => {
+    const drag = _reactNativeGestureHandler.Gesture.Pan().runOnJS(true).activeOffsetX([-2, 2]).onUpdate(e => setScrubTime(timeAt(e.x))).onEnd(e => seek(timeAt(e.x))).onFinalize(() => setScrubTime(null)).blocksExternalGesture(outerGesture);
+    const tap = _reactNativeGestureHandler.Gesture.Tap().runOnJS(true).onEnd(e => seek(timeAt(e.x))).blocksExternalGesture(outerGesture);
+    return _reactNativeGestureHandler.Gesture.Exclusive(drag, tap);
+  }, [outerGesture]);
+  const loading = progress !== null || source === null;
+  const shown = scrubTime ?? time;
+  const fraction = duration > 0 ? Math.min(1, shown / duration) : 0;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
+      style: [_reactNative.StyleSheet.absoluteFill, mediaStyle],
+      pointerEvents: "none",
+      children: !loading && !failed && /*#__PURE__*/(0, _jsxRuntime.jsx)(_expoVideo.VideoView, {
+        player: player,
+        style: _reactNative.StyleSheet.absoluteFill,
+        contentFit: "contain",
+        nativeControls: false,
+        surfaceType: "textureView"
+      })
+    }), failed ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.center,
+      pointerEvents: "none",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: styles.failedTitle,
+        children: t('video.cantPlay')
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: styles.failedHint,
+        children: t('video.cantPlayHint')
+      })]
+    }) : loading ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.center,
+      pointerEvents: "none",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: styles.playButton,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ActivityIndicator, {
+          color: WHITE
+        })
+      }), !!progress && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
+        style: styles.progress,
+        children: [Math.round(progress * 100), "%"]
+      })]
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
+        pointerEvents: chromePointerEvents,
+        style: [styles.center, {
+          opacity: chromeOpacity
+        }],
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+          testID: "media-viewer-play",
+          accessibilityRole: "button",
+          activeOpacity: 0.8,
+          style: styles.playButton,
+          onPress: togglePlay,
+          children: isPlaying ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.PauseIcon, {
+            width: 30,
+            height: 30,
+            color: WHITE
+          }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.PlayIcon, {
+            width: 30,
+            height: 30,
+            color: WHITE
+          })
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Animated.View, {
+        pointerEvents: chromePointerEvents,
+        style: [styles.scrubberRow, {
+          bottom: bottomOffset,
+          opacity: chromeOpacity
+        }],
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: styles.time,
+          children: formatTime(shown)
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeGestureHandler.GestureDetector, {
+          gesture: scrub,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+            testID: "media-viewer-scrubber",
+            style: styles.track,
+            onLayout: e => setTrackWidth(e.nativeEvent.layout.width),
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+              style: styles.trackLine,
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+                style: [styles.trackFill, {
+                  width: `${fraction * 100}%`
+                }]
+              })
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+              style: [styles.thumb, {
+                left: fraction * trackWidth - 7
+              }]
+            })]
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: styles.time,
+          children: formatTime(duration)
+        })]
+      })]
+    })]
+  });
+};
+const styles = _reactNative.StyleSheet.create({
+  backdrop: {
+    backgroundColor: '#000000'
+  },
+  center: {
+    ..._reactNative.StyleSheet.absoluteFill,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  topBar: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 8,
+    paddingBottom: 10,
+    backgroundColor: BAR_BACKGROUND
+  },
+  bottomBar: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    bottom: 0,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingHorizontal: 8,
+    paddingTop: 10,
+    backgroundColor: BAR_BACKGROUND
+  },
+  iconButton: {
+    width: 44,
+    height: 44,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  titleBlock: {
+    flex: 1,
+    alignItems: 'center',
+    paddingHorizontal: 8
+  },
+  title: {
+    color: WHITE,
+    fontSize: 16,
+    fontWeight: '600'
+  },
+  subtitle: {
+    color: 'rgba(255, 255, 255, 0.7)',
+    fontSize: 13,
+    marginTop: 2
+  },
+  playButton: {
+    width: 64,
+    height: 64,
+    borderRadius: 32,
+    backgroundColor: 'rgba(0, 0, 0, 0.55)',
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  progress: {
+    marginTop: 10,
+    color: WHITE,
+    fontSize: 13,
+    fontWeight: '600'
+  },
+  failedTitle: {
+    color: WHITE,
+    fontSize: 16,
+    fontWeight: '600'
+  },
+  failedHint: {
+    marginTop: 8,
+    color: 'rgba(255, 255, 255, 0.7)',
+    textAlign: 'center',
+    paddingHorizontal: 32
+  },
+  scrubberRow: {
+    position: 'absolute',
+    left: 12,
+    right: 12,
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 10
+  },
+  time: {
+    color: WHITE,
+    fontSize: 12,
+    fontVariant: ['tabular-nums'],
+    minWidth: 36,
+    textAlign: 'center'
+  },
+  track: {
+    flex: 1,
+    height: 32,
+    justifyContent: 'center'
+  },
+  trackLine: {
+    height: 3,
+    borderRadius: 1.5,
+    backgroundColor: 'rgba(255, 255, 255, 0.35)',
+    overflow: 'hidden'
+  },
+  trackFill: {
+    height: '100%',
+    backgroundColor: WHITE
+  },
+  thumb: {
+    position: 'absolute',
+    width: 14,
+    height: 14,
+    borderRadius: 7,
+    backgroundColor: WHITE
+  }
+});
+var _default = exports.default = MediaViewer;
+//# sourceMappingURL=MediaViewer.js.map