@oxyhq/bloom 1.1.0 → 1.2.0

package/lib/commonjs/{zoomable-image-gallery/ZoomableImageGallery.js → zoomable-media-gallery/ZoomableMediaGallery.js}

@@ -3,10 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.ZoomableImageGallery = void 0;
+exports.default = exports.ZoomableMediaGallery = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
-var _expoImage = require("expo-image");
 var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
 var _reactNativeGestureHandler = require("react-native-gesture-handler");
 var _tokens = require("../styles/tokens.js");
@@ -15,11 +14,43 @@ var _portal = require("../portal");
 var _useInteractionState = require("../hooks/use-interaction-state.js");
 var _index2 = require("../icons/index.js");
 var _webViewStyle = require("../styles/web-view-style.js");
+var _MediaSurface = require("../media-flight/MediaSurface.js");
 var _index3 = require("../image-aspect-ratio-cache/index.js");
 var _constants = require("./constants.js");
 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); }
-const AnimatedImage = _reactNativeReanimated.default.createAnimatedComponent(_expoImage.Image);
+/**
+ * The still-frame URI of an item: the image itself, or a video's poster.
+ * `undefined` for a video with no poster — there is nothing to probe, size
+ * against or show in the strip, and every caller below handles that.
+ */
+function posterUri(item) {
+  return item.kind === 'video' ? item.poster : item.uri;
+}
+
+/** The aspect ratio already known for an item, from the shared probe cache. */
+function cachedRatio(item) {
+  const uri = posterUri(item);
+  return uri === undefined ? undefined : (0, _index3.getAspectRatio)(uri);
+}
+
+/**
+ * A stable React key. An image is identified by its URI; a video is not (its
+ * player is an object with no URL), which is why `GalleryVideo` carries an
+ * explicit `id`. The index is folded in so a post repeating one image still
+ * pages correctly.
+ */
+function mediaKey(item, index) {
+  return item.kind === 'video' ? `video-${item.id}-${index}` : `image-${item.uri}-${index}`;
+}
+
+/**
+ * What the share sheet is handed. A poster is not what "share this video"
+ * means, so a video shares its own `shareUrl` or nothing at all.
+ */
+function shareUri(item) {
+  return item.kind === 'video' ? item.shareUrl : item.uri;
+}
 
 // Web-only interaction hints (no-ops on native): the zoom surfaces are
 // tap-to-dismiss (`cursor: pointer`) and must not select text or drag the
@@ -62,7 +93,7 @@ function NavArrow({
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
     onPress: onPress,
     accessibilityRole: "button",
-    accessibilityLabel: isLeft ? 'Previous image' : 'Next image',
+    accessibilityLabel: isLeft ? 'Previous item' : 'Next item',
     hitSlop: 8,
     onHoverIn: onHoverIn,
     onHoverOut: onHoverOut,
@@ -77,7 +108,7 @@ function NavArrow({
   });
 }
 /**
- * Resolve `cornerRadius` against the size an image is actually rendered at, so
+ * Resolve `cornerRadius` against the size an item is actually rendered at, so
  * `'circle'` stays a circle at every fitted size (and through the open/close
  * animation, which scales this same box).
  */
@@ -86,26 +117,42 @@ function resolveCornerRadius(cornerRadius, fit) {
 }
 
 /**
- * Fullscreen, swipeable image viewer that replicates the profile avatar's
- * measured-origin zoom transition (`ZoomableAvatar`) for rectangular post media:
+ * Fullscreen, swipeable MEDIA viewer — images and consumer-owned videos in one
+ * pager — replicating the profile avatar's measured-origin zoom transition
+ * (`ZoomableAvatar`) for rectangular post media:
  *
  * - Open/close feel is identical to the avatar (same spring configs, web
  *   timing/easing, blur backdrop, and the measure-origin technique). The viewer
  *   renders through the Bloom `Portal` on BOTH platforms (RN's `Modal` is not
  *   used on native — on the New Architecture / Fabric Android its host views
  *   mount full-screen but never composite, leaving the viewer invisible).
- * - The OPENING (tapped) image animates from its measured rect to a centered,
+ * - The OPENING (tapped) item animates from its measured rect to a centered,
  *   aspect-ratio-preserving fit within {@link FIT_FRACTION} of the screen. Once
  *   the open animation settles, a horizontal paging `ScrollView` mounts seeded at
- *   the tapped index so the user can swipe between every image in the post.
+ *   the tapped index so the user can swipe between every item in the post.
  * - Gesture disambiguation: the pager owns horizontal swipes; a vertical-only
  *   `Gesture.Pan` (`activeOffsetY` + `failOffsetX`) owns drag-to-dismiss, so the
  *   two never fight.
+ *
+ * ## Video, and why it does not restart
+ *
+ * A video page is fed by a `VideoPlayer` the CONSUMER created and owns. Bloom
+ * never creates or destroys one: expo-video keeps the player OBJECT separate
+ * from the `VideoView` that shows it, and one player may feed several views, so
+ * handing the same player to this gallery moves a playing video into fullscreen
+ * without re-opening the stream. Exactly ONE view is mounted per opening — the
+ * active page's — while every other page and every strip tile renders the still
+ * (`MediaPoster`). The single unavoidable swap is the pre-pager open surface
+ * handing over to the pager's active page once the open animation settles.
+ *
+ * `expo-video` is an OPTIONAL peer loaded through `media-flight/expo-video-module`.
+ * Without it a video page degrades to its poster, once, with a dev warning.
  */
-const ZoomableImageGalleryInner = /*#__PURE__*/_react.default.forwardRef(({
+const ZoomableMediaGalleryInner = /*#__PURE__*/_react.default.forwardRef(({
   measureThumb,
   cornerRadius = _constants.DEFAULT_CORNER_RADIUS,
-  indicatorVariant = 'dots'
+  indicatorVariant = 'dots',
+  videoControls = false
 }, ref) => {
   const {
     width: SCREEN_WIDTH,
@@ -113,17 +160,17 @@ const ZoomableImageGalleryInner = /*#__PURE__*/_react.default.forwardRef(({
   } = (0, _reactNative.useWindowDimensions)();
   const radiusFor = (0, _react.useCallback)(fit => resolveCornerRadius(cornerRadius, fit), [cornerRadius]);
   const [isOpen, setIsOpen] = (0, _react.useState)(false);
-  // Once true, the swipeable pager is mounted and the single open-image hidden.
+  // Once true, the swipeable pager is mounted and the single open-surface hidden.
   const [pagerReady, setPagerReady] = (0, _react.useState)(false);
-  const [images, setImages] = (0, _react.useState)([]);
+  const [items, setItems] = (0, _react.useState)([]);
   const [activeIndex, setActiveIndex] = (0, _react.useState)(0);
-  // Whether the active image is currently pinched/double-tapped past its base
+  // Whether the active media is currently pinched/double-tapped past its base
   // size. Drives the pan-while-zoomed gesture, disables the pager's horizontal
-  // paging + the dismiss drag so a pan moves the zoomed image instead.
+  // paging + the dismiss drag so a pan moves the zoomed media instead.
   const [isZoomed, setIsZoomed] = (0, _react.useState)(false);
-  // Aspect ratio of the OPENING image (drives the open-animation fit box).
+  // Aspect ratio of the OPENING item (drives the open-animation fit box).
   const [openRatio, setOpenRatio] = (0, _react.useState)(_index3.DEFAULT_ASPECT_RATIO);
-  // Per-image aspect ratios for the pager pages (index-aligned with `images`).
+  // Per-item aspect ratios for the pager pages (index-aligned with `items`).
   const [pageRatios, setPageRatios] = (0, _react.useState)({});
 
   // Native `Share` is always available; web exposes a share button only when the
@@ -137,7 +184,7 @@ const ZoomableImageGalleryInner = /*#__PURE__*/_react.default.forwardRef(({
   const translateY = (0, _reactNativeReanimated.useSharedValue)(0);
   const opacity = (0, _reactNativeReanimated.useSharedValue)(0);
 
-  // Zoom transform of the active image, kept SEPARATE from the open/close +
+  // Zoom transform of the active media, kept SEPARATE from the open/close +
   // dismiss-drag transform above (reusing those would collide two meanings).
   // `zoom*` are the live/persisted values; `baseZoomScale` is captured at pinch
   // start and `savedZoomTranslate*` at pan start for incremental bookkeeping.
@@ -148,14 +195,14 @@ const ZoomableImageGalleryInner = /*#__PURE__*/_react.default.forwardRef(({
   const savedZoomTranslateX = (0, _reactNativeReanimated.useSharedValue)(0);
   const savedZoomTranslateY = (0, _reactNativeReanimated.useSharedValue)(0);
 
-  // Origin (offset from screen center) of the tapped image.
+  // Origin (offset from screen center) of the tapped item.
   const originX = (0, _reactNativeReanimated.useSharedValue)(0);
   const originY = (0, _reactNativeReanimated.useSharedValue)(0);
   const startX = (0, _reactNativeReanimated.useSharedValue)(0);
   const startY = (0, _reactNativeReanimated.useSharedValue)(0);
   // Per-drag baseline captured at pan start (transient).
   const startScale = (0, _reactNativeReanimated.useSharedValue)(1);
-  // Persistent scale of the open-image at its thumbnail origin (thumbWidth /
+  // Persistent scale of the open-surface at its thumbnail origin (thumbWidth /
   // fittedWidth). The open animation grows from this to 1; the close animation
   // shrinks back to it. Never overwritten by the drag gesture.
   const originScale = (0, _reactNativeReanimated.useSharedValue)(1);
@@ -210,9 +257,9 @@ const ZoomableImageGalleryInner = /*#__PURE__*/_react.default.forwardRef(({
     setActiveIndex(prev => prev === next ? prev : next);
   }, []);
 
-  // Snap the active image back to its un-zoomed baseline (no animation) and clear
-  // all zoom bookkeeping. Called on every path that changes the active page so a
-  // freshly-viewed image always starts un-zoomed.
+  // Snap the active media back to its un-zoomed baseline (no animation) and
+  // clear all zoom bookkeeping. Called on every path that changes the active
+  // page so a freshly-viewed item always starts un-zoomed.
   const resetZoom = (0, _react.useCallback)(() => {
     zoomScale.value = 1;
     zoomTranslateX.value = 0;
@@ -230,7 +277,7 @@ const ZoomableImageGalleryInner = /*#__PURE__*/_react.default.forwardRef(({
   }), [SCREEN_WIDTH, SCREEN_HEIGHT]);
 
   // Largest width/height for `ratio` that fits inside `fitBox` without cropping
-  // (contain), never exceeding the image's own resolution: filling the viewport
+  // (contain), never exceeding the media's own resolution: filling the viewport
   // with a 512px avatar or a small thumbnail just renders it soft. `uri` is what
   // lets us look the intrinsic size up; without it (not measured yet) the fit
   // box wins and the clamp applies on the next frame.
@@ -253,18 +300,24 @@ const ZoomableImageGalleryInner = /*#__PURE__*/_react.default.forwardRef(({
     };
   }, [fitBox]);
 
-  // Fitted size of the single open-image for the CURRENT page. On open this is
-  // the opened image's fit (active index == opened index, ratio == `openRatio`);
-  // after swiping it tracks the viewed image so the collapse-on-dismiss renders
-  // and flies back the image actually on screen.
+  // Fitted size of the single open-surface for the CURRENT page. On open this is
+  // the opened item's fit (active index == opened index, ratio == `openRatio`);
+  // after swiping it tracks the viewed item so the collapse-on-dismiss renders
+  // and flies back the media actually on screen.
+  const activeItem = items[activeIndex];
   const activeRatio = pageRatios[activeIndex] ?? openRatio;
-  const activeUri = images[activeIndex]?.uri;
+  const activeUri = activeItem === undefined ? undefined : posterUri(activeItem);
   const activeFit = (0, _react.useMemo)(() => fitForRatio(activeRatio, activeUri), [fitForRatio, activeRatio, activeUri]);
 
-  // Alt text (accessibility description) of the image currently on screen, shown
+  // Alt text (accessibility description) of the item currently on screen, shown
   // as a caption at the bottom of the viewer (Bluesky-style lightbox footer).
-  const activeAlt = images[activeIndex]?.alt?.trim() || undefined;
+  const activeAlt = activeItem?.alt?.trim() || undefined;
+
+  // Probe and cache the ratio of the page at `index`. A video with no poster has
+  // nothing to probe — it keeps whatever ratio the consumer declared, or the
+  // gallery default — so this is a no-op rather than a guess.
   const ensureRatio = (0, _react.useCallback)((index, uri) => {
+    if (uri === undefined) return;
     const cached = (0, _index3.getAspectRatio)(uri);
     if (cached !== undefined) {
       setPageRatios(prev => prev[index] === cached ? prev : {
@@ -292,7 +345,7 @@ const ZoomableImageGalleryInner = /*#__PURE__*/_react.default.forwardRef(({
     opacity.value = 0;
   }, [opacity, scale, translateX, translateY]);
 
-  // Fly the (possibly dragged) image back toward `target` — the rect of the
+  // Fly the (possibly dragged) media back toward `target` — the rect of the
   // thumbnail currently being viewed — shrinking to its footprint. Uses the
   // EXACT same close spring (native) / timing (web) as the avatar transition.
   const flyBackTo = (0, _react.useCallback)(target => {
@@ -358,13 +411,13 @@ const ZoomableImageGalleryInner = /*#__PURE__*/_react.default.forwardRef(({
     // fly-back from an already-moving image.
     if (dismissingRef.current) return;
     dismissingRef.current = true;
-    // Collapse the pager back to the single open-image so the fly-back animates
-    // one image (the current one) rather than the whole scrolled strip.
+    // Collapse the pager back to the single open-surface so the fly-back
+    // animates one item (the current one) rather than the whole scrolled strip.
     setPagerReady(false);
     const index = activeIndexRef.current;
-    const current = images[index];
-    // Recompute the fly-back target from the CURRENT image: the live rect of its
-    // thumbnail + the same fitted box (`activeFit`) the open-image is rendered
+    const current = items[index];
+    // Recompute the fly-back target from the CURRENT item: the live rect of its
+    // thumbnail + the same fitted box (`activeFit`) the open-surface is rendered
     // at, using the same screen-center math as `open`. Falls back to a center
     // fade-out when the thumbnail can't be measured.
     if (measureThumb && current) {
@@ -384,7 +437,7 @@ const ZoomableImageGalleryInner = /*#__PURE__*/_react.default.forwardRef(({
       return;
     }
     fadeOutCenter();
-  }, [activeFit, fadeOutCenter, flyBackTo, images, measureThumb, SCREEN_HEIGHT, SCREEN_WIDTH]);
+  }, [activeFit, fadeOutCenter, flyBackTo, items, measureThumb, SCREEN_HEIGHT, SCREEN_WIDTH]);
 
   // Reveal the swipeable pager once the open animation has settled. The index it
   // lands on is `activeIndexRef` (set synchronously in `open`), seated by the
@@ -392,30 +445,32 @@ const ZoomableImageGalleryInner = /*#__PURE__*/_react.default.forwardRef(({
   const revealPager = (0, _react.useCallback)(() => {
     setPagerReady(true);
   }, []);
-  const open = (0, _react.useCallback)((nextImages, index, rect) => {
-    if (isOpen || nextImages.length === 0) return;
+  const open = (0, _react.useCallback)((nextItems, index, rect) => {
+    if (isOpen || nextItems.length === 0) return;
     dismissingRef.current = false;
-    const safeIndex = Math.min(Math.max(index, 0), nextImages.length - 1);
-    const target = nextImages[safeIndex];
+    const safeIndex = Math.min(Math.max(index, 0), nextItems.length - 1);
+    const target = nextItems[safeIndex];
     if (!target) return;
-    const knownRatio = target.aspectRatio ?? (0, _index3.getAspectRatio)(target.uri);
+    const targetUri = posterUri(target);
+    const knownRatio = target.aspectRatio ?? cachedRatio(target);
     const ratio = knownRatio ?? _index3.DEFAULT_ASPECT_RATIO;
-    setImages(nextImages);
+    setItems(nextItems);
     setActiveIndexBoth(safeIndex);
     setOpenRatio(ratio);
     // Seed every page whose ratio is already known (consumer-provided metadata
     // or a previously-cached probe) so swiping never hits the same snap — only
-    // a genuinely-unknown image falls through to `ensureRatio`'s async probe.
+    // a genuinely-unknown item falls through to `ensureRatio`'s async probe.
     const initialRatios = {};
-    nextImages.forEach((img, i) => {
-      const r = img.aspectRatio ?? (0, _index3.getAspectRatio)(img.uri);
+    nextItems.forEach((item, i) => {
+      const r = item.aspectRatio ?? cachedRatio(item);
       if (r !== undefined) initialRatios[i] = r;
     });
     setPageRatios(initialRatios);
 
-    // Resolve the opening ratio if it was not yet known, then re-fit.
-    if (knownRatio === undefined) {
-      void (0, _index3.fetchAspectRatio)(target.uri).then(resolved => {
+    // Resolve the opening ratio if it was not yet known, then re-fit. A video
+    // with no poster has nothing to probe and keeps the default.
+    if (knownRatio === undefined && targetUri !== undefined) {
+      void (0, _index3.fetchAspectRatio)(targetUri).then(resolved => {
         setOpenRatio(resolved);
         setPageRatios(prev => ({
           ...prev,
@@ -424,11 +479,11 @@ const ZoomableImageGalleryInner = /*#__PURE__*/_react.default.forwardRef(({
       });
     }
 
-    // The open-image box is rendered at its FINAL fitted size; the open
+    // The open-surface box is rendered at its FINAL fitted size; the open
     // animation grows it from the thumbnail's footprint (scale < 1) up to 1,
     // mirroring the avatar's small→big scale. The initial scale is the ratio
     // of the thumbnail width to the fitted width.
-    const fitted = fitForRatio(ratio, target.uri);
+    const fitted = fitForRatio(ratio, targetUri);
     const centerX = SCREEN_WIDTH / 2;
     const centerY = SCREEN_HEIGHT / 2;
     if (rect && rect.width > 0) {
@@ -528,7 +583,7 @@ const ZoomableImageGalleryInner = /*#__PURE__*/_react.default.forwardRef(({
     opacity: opacity.value
   }), [opacity]);
 
-  // The single open-image animates from origin → fitted center.
+  // The single open-surface animates from origin → fitted center.
   const openImageStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => ({
     transform: [{
       translateX: translateX.value
@@ -568,7 +623,7 @@ const ZoomableImageGalleryInner = /*#__PURE__*/_react.default.forwardRef(({
   // close fly-back target). Shared by `onMomentumScrollEnd` (native) and `onScroll`
   // (web, where paging may not fire a reliable momentum-end).
   const updateIndexFromOffset = (0, _react.useCallback)(offsetX => {
-    const lastIndex = images.length - 1;
+    const lastIndex = items.length - 1;
     if (lastIndex < 0) return;
     const next = Math.min(Math.max(Math.round(offsetX / SCREEN_WIDTH), 0), lastIndex);
     if (next === activeIndexRef.current) return;
@@ -576,16 +631,16 @@ const ZoomableImageGalleryInner = /*#__PURE__*/_react.default.forwardRef(({
     // the page scrolling away).
     resetZoom();
     setActiveIndexBoth(next);
-    const img = images[next];
-    if (img) ensureRatio(next, img.uri);
-  }, [ensureRatio, images, resetZoom, setActiveIndexBoth, SCREEN_WIDTH]);
+    const item = items[next];
+    if (item) ensureRatio(next, posterUri(item));
+  }, [ensureRatio, items, resetZoom, setActiveIndexBoth, SCREEN_WIDTH]);
 
   // Programmatically page to `index` (arrow buttons, keyboard, thumbnail taps).
   // Clamps into range and lets the existing scroll handlers own the index/ratio
   // state-sync — this only triggers the scroll. No-op until the pager is mounted.
   const pageTo = (0, _react.useCallback)(index => {
     if (!pagerReady) return;
-    const lastIndex = images.length - 1;
+    const lastIndex = items.length - 1;
     if (lastIndex < 0) return;
     const clamped = Math.min(Math.max(index, 0), lastIndex);
     resetZoom();
@@ -594,7 +649,7 @@ const ZoomableImageGalleryInner = /*#__PURE__*/_react.default.forwardRef(({
       y: 0,
       animated: true
     });
-  }, [images.length, pagerReady, resetZoom, SCREEN_WIDTH]);
+  }, [items.length, pagerReady, resetZoom, SCREEN_WIDTH]);
   const onPagerScroll = (0, _react.useCallback)(event => {
     updateIndexFromOffset(event.nativeEvent.contentOffset.x);
   }, [updateIndexFromOffset]);
@@ -715,10 +770,12 @@ const ZoomableImageGalleryInner = /*#__PURE__*/_react.default.forwardRef(({
   // pinch + pan-while-zoomed.
   const activePageGesture = (0, _react.useMemo)(() => _reactNativeGestureHandler.Gesture.Simultaneous(tapGesture, pinchGesture, panWhileZoomedGesture), [tapGesture, pinchGesture, panWhileZoomedGesture]);
 
-  // Share the active image's URI: the OS share sheet on native; the Web Share API
-  // on supporting browsers (the button is only rendered where it exists).
+  // Share the active item's URI: the OS share sheet on native; the Web Share API
+  // on supporting browsers (the button is only rendered where it exists). A
+  // video shares its own `shareUrl`; its poster is not what "share this" means.
   const handleShare = (0, _react.useCallback)(async () => {
-    const uri = images[activeIndexRef.current]?.uri;
+    const item = items[activeIndexRef.current];
+    const uri = item === undefined ? undefined : shareUri(item);
     if (!uri) return;
     try {
       if (_reactNative.Platform.OS === 'web') {
@@ -736,9 +793,9 @@ const ZoomableImageGalleryInner = /*#__PURE__*/_react.default.forwardRef(({
       // A user-cancelled share sheet rejects (AbortError on web) — that's
       // expected, not a failure. Anything else is a real error worth surfacing.
       if (err instanceof Error && err.name === 'AbortError') return;
-      if (typeof console !== 'undefined' && console.error) console.error('Image share failed:', err);
+      if (typeof console !== 'undefined' && console.error) console.error('Media share failed:', err);
     }
-  }, [images]);
+  }, [items]);
 
   // Keyboard navigation (web only), scoped to the open lifetime like Dialog.web's
   // Escape handler. Reads the live index from the ref so it need not re-subscribe
@@ -766,7 +823,7 @@ const ZoomableImageGalleryInner = /*#__PURE__*/_react.default.forwardRef(({
       style: _reactNative.StyleSheet.absoluteFill,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Backdrop, {
         onPress: handleDismiss,
-        accessibilityLabel: "Close image viewer",
+        accessibilityLabel: "Close media viewer",
         progress: opacity
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeGestureHandler.GestureDetector, {
         gesture: panGesture,
@@ -776,23 +833,22 @@ const ZoomableImageGalleryInner = /*#__PURE__*/_react.default.forwardRef(({
             height: SCREEN_HEIGHT
           }, webUserSelectNoneStyle],
           pointerEvents: "box-none",
-          children: [!pagerReady && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+          children: [!pagerReady && activeItem !== undefined && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
             onPress: handleDismiss,
             style: webPointerStyle,
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(AnimatedImage, {
-              source: {
-                uri: images[activeIndex]?.uri
-              },
-              contentFit: "contain",
-              style: [{
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
+              style: [styles.mediaBox, {
                 width: activeFit.width,
                 height: activeFit.height,
                 borderRadius: radiusFor(activeFit)
               }, openImageStyle],
-              transition: 0,
-              ...(_reactNative.Platform.OS === 'web' ? {
-                draggable: false
-              } : {})
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_MediaSurface.MediaSurface, {
+                content: activeItem,
+                contentFit: "contain",
+                nativeControls: videoControls,
+                accessibilityLabel: activeItem.alt,
+                style: _reactNative.StyleSheet.absoluteFill
+              })
             })
           }), pagerReady && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
             style: [_reactNative.StyleSheet.absoluteFill, pagerContainerStyle],
@@ -815,73 +871,71 @@ const ZoomableImageGalleryInner = /*#__PURE__*/_react.default.forwardRef(({
               } : {}),
               scrollEventThrottle: 16,
               style: _reactNative.StyleSheet.absoluteFill,
-              children: images.map((img, idx) => {
-                const ratio = pageRatios[idx] ?? (0, _index3.getAspectRatio)(img.uri) ?? _index3.DEFAULT_ASPECT_RATIO;
-                const fit = fitForRatio(ratio, img.uri);
+              children: items.map((item, idx) => {
+                const uri = posterUri(item);
+                const ratio = pageRatios[idx] ?? cachedRatio(item) ?? item.aspectRatio ?? _index3.DEFAULT_ASPECT_RATIO;
+                const fit = fitForRatio(ratio, uri);
                 // Only the active page is zoomable + gesture-wrapped (double-tap
-                // / single-tap dismiss / pinch / pan). Off-screen pages stay a
-                // plain image; the active image handles its own tap-to-dismiss
-                // through the gesture, so it isn't wrapped in a Pressable.
+                // / single-tap dismiss / pinch / pan). It is also the ONLY page
+                // that mounts a real media surface: an off-screen page renders
+                // the still, because a second `VideoView` on the same player is
+                // exactly the duplicate surface this package exists to avoid.
+                // The active media handles its own tap-to-dismiss through the
+                // gesture, so it isn't wrapped in a Pressable.
                 if (idx === activeIndex) {
                   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
                     // The page fills the screen ON TOP of the backdrop (the
                     // pager below it needs pointer events to swipe), so a
-                    // press on the empty area around the image can never
+                    // press on the empty area around the media can never
                     // reach the backdrop — the page dismisses it itself.
-                    // Same outcome as tapping the image, which already
+                    // Same outcome as tapping the media, which already
                     // dismisses through `singleTapDismissGesture`.
                     onPress: handleDismiss,
-                    accessibilityLabel: "Close image viewer",
+                    accessibilityLabel: "Close media viewer",
                     style: [styles.page, {
                       width: SCREEN_WIDTH,
                       height: SCREEN_HEIGHT
                     }, webPointerStyle],
                     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeGestureHandler.GestureDetector, {
                       gesture: activePageGesture,
-                      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(AnimatedImage, {
-                        source: {
-                          uri: img.uri
-                        },
-                        contentFit: "contain",
-                        style: [{
+                      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
+                        style: [styles.mediaBox, {
                           width: fit.width,
                           height: fit.height,
                           borderRadius: radiusFor(fit)
                         }, zoomImageStyle],
-                        transition: 0,
-                        ...(_reactNative.Platform.OS === 'web' ? {
-                          draggable: false
-                        } : {})
+                        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_MediaSurface.MediaSurface, {
+                          content: item,
+                          contentFit: "contain",
+                          nativeControls: videoControls,
+                          accessibilityLabel: item.alt,
+                          style: _reactNative.StyleSheet.absoluteFill
+                        })
                       })
                     })
-                  }, `${img.uri}-${idx}`);
+                  }, mediaKey(item, idx));
                 }
                 return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
                   onPress: handleDismiss,
-                  accessibilityLabel: "Close image viewer",
+                  accessibilityLabel: "Close media viewer",
                   style: [styles.page, {
                     width: SCREEN_WIDTH,
                     height: SCREEN_HEIGHT
                   }],
-                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_expoImage.Image, {
-                    source: {
-                      uri: img.uri
-                    },
+                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_MediaSurface.MediaPoster, {
+                    content: item,
                     contentFit: "contain",
+                    accessibilityLabel: item.alt,
                     style: {
                       width: fit.width,
                       height: fit.height,
                       borderRadius: radiusFor(fit)
-                    },
-                    transition: 0,
-                    ...(_reactNative.Platform.OS === 'web' ? {
-                      draggable: false
-                    } : {})
+                    }
                   })
-                }, `${img.uri}-${idx}`);
+                }, mediaKey(item, idx));
               })
             })
-          }), pagerReady && images.length > 1 && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNativeReanimated.default.View, {
+          }), pagerReady && items.length > 1 && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNativeReanimated.default.View, {
             style: [styles.indicatorWrap, backdropStyle],
             pointerEvents: "box-none",
             children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
@@ -889,47 +943,41 @@ const ZoomableImageGalleryInner = /*#__PURE__*/_react.default.forwardRef(({
               pointerEvents: "none",
               children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
                 style: styles.counterText,
-                children: `${activeIndex + 1} / ${images.length}`
+                children: `${activeIndex + 1} / ${items.length}`
               })
             }), indicatorVariant === 'thumbnails' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
               horizontal: true,
               showsHorizontalScrollIndicator: false,
               style: styles.thumbStripScroll,
               contentContainerStyle: styles.thumbStripContent,
-              children: images.map((img, idx) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+              children: items.map((item, idx) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
                 onPress: () => pageTo(idx),
                 accessibilityRole: "button",
-                accessibilityLabel: `Go to image ${idx + 1} of ${images.length}`,
+                accessibilityLabel: `Go to item ${idx + 1} of ${items.length}`,
                 style: [styles.thumbTile, idx === activeIndex ? styles.thumbTileActive : styles.thumbTileInactive, webPointerStyle],
-                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_expoImage.Image, {
-                  source: {
-                    uri: img.uri
-                  },
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_MediaSurface.MediaPoster, {
+                  content: item,
                   contentFit: "cover",
-                  style: styles.thumbTileImage,
-                  transition: 0,
-                  ...(_reactNative.Platform.OS === 'web' ? {
-                    draggable: false
-                  } : {})
+                  style: styles.thumbTileImage
                 })
-              }, `thumb-${img.uri}-${idx}`))
+              }, `thumb-${mediaKey(item, idx)}`))
             }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
               style: styles.dotsRow,
               pointerEvents: "none",
-              children: images.map((img, idx) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+              children: items.map((item, idx) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
                 style: [styles.dot, idx === activeIndex ? styles.dotActive : styles.dotInactive]
-              }, `dot-${img.uri}-${idx}`))
+              }, `dot-${mediaKey(item, idx)}`))
             })]
-          }), _reactNative.Platform.OS === 'web' && pagerReady && images.length > 1 && activeIndex > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(NavArrow, {
+          }), _reactNative.Platform.OS === 'web' && pagerReady && items.length > 1 && activeIndex > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(NavArrow, {
             direction: "left",
             onPress: () => pageTo(activeIndex - 1)
-          }), _reactNative.Platform.OS === 'web' && pagerReady && images.length > 1 && activeIndex < images.length - 1 && /*#__PURE__*/(0, _jsxRuntime.jsx)(NavArrow, {
+          }), _reactNative.Platform.OS === 'web' && pagerReady && items.length > 1 && activeIndex < items.length - 1 && /*#__PURE__*/(0, _jsxRuntime.jsx)(NavArrow, {
             direction: "right",
             onPress: () => pageTo(activeIndex + 1)
           }), canShare && pagerReady && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
             onPress: handleShare,
             accessibilityRole: "button",
-            accessibilityLabel: "Share image",
+            accessibilityLabel: "Share media",
             hitSlop: 8,
             style: [styles.shareButton, webPointerStyle],
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.ArrowOutOfBox_Stroke2_Corner0_Rounded, {
@@ -937,7 +985,7 @@ const ZoomableImageGalleryInner = /*#__PURE__*/_react.default.forwardRef(({
               size: "md"
             })
           }), activeAlt ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
-            style: [styles.altCaptionWrap, images.length > 1 && styles.altCaptionWrapWithIndicator, backdropStyle],
+            style: [styles.altCaptionWrap, items.length > 1 && styles.altCaptionWrapWithIndicator, backdropStyle],
             pointerEvents: "none",
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
               style: styles.altCaptionPill,
@@ -964,8 +1012,8 @@ const ZoomableImageGalleryInner = /*#__PURE__*/_react.default.forwardRef(({
     children: renderContent()
   });
 });
-ZoomableImageGalleryInner.displayName = 'ZoomableImageGallery';
-const ZoomableImageGallery = exports.ZoomableImageGallery = ZoomableImageGalleryInner;
+ZoomableMediaGalleryInner.displayName = 'ZoomableMediaGallery';
+const ZoomableMediaGallery = exports.ZoomableMediaGallery = ZoomableMediaGalleryInner;
 const styles = _reactNative.StyleSheet.create({
   modalContainer: {
     justifyContent: 'center',
@@ -1008,6 +1056,12 @@ const styles = _reactNative.StyleSheet.create({
     justifyContent: 'center',
     alignItems: 'center'
   },
+  // The box the media is painted into. `overflow: hidden` is what makes the
+  // box's corner radius clip a VIDEO — an image would round on its own, a
+  // platform video surface will not.
+  mediaBox: {
+    overflow: 'hidden'
+  },
   indicatorWrap: {
     position: 'absolute',
     bottom: 48,
@@ -1143,5 +1197,5 @@ const styles = _reactNative.StyleSheet.create({
     lineHeight: 18
   }
 });
-var _default = exports.default = ZoomableImageGallery;
-//# sourceMappingURL=ZoomableImageGallery.js.map
+var _default = exports.default = ZoomableMediaGallery;
+//# sourceMappingURL=ZoomableMediaGallery.js.map