Scope Reader photo viewer swiping to gallery images

WordPress/src/main/java/org/wordpress/android/ui/reader/ReaderActivityLauncher.kt

@@ -436,15 +436,17 @@ object ReaderActivityLauncher {
     }
 
     @JvmStatic
+    @JvmOverloads
     @Suppress("LongParameterList")
     fun showReaderPhotoViewer(
         context: Context,
         imageUrl: String,
-        content: String,
+        content: String?,
         sourceView: View?,
         imageOptions: EnumSet<PhotoViewerOption>,
         startX: Int,
-        startY: Int
+        startY: Int,
+        galleryImageUrls: ArrayList<String>? = null
     ) {
         if (TextUtils.isEmpty(imageUrl)) {
             return
@@ -460,6 +462,12 @@ object ReaderActivityLauncher {
         if (!TextUtils.isEmpty(content)) {
             intent.putExtra(ReaderConstants.ARG_CONTENT, content)
         }
+        if (!galleryImageUrls.isNullOrEmpty()) {
+            intent.putStringArrayListExtra(
+                ReaderConstants.ARG_GALLERY_IMAGE_URLS,
+                galleryImageUrls
+            )
+        }
 
         if (context is Activity && sourceView != null) {
             val options =

WordPress/src/main/java/org/wordpress/android/ui/reader/ReaderConstants.java

@@ -49,6 +49,7 @@ public class ReaderConstants {
     static final String ARG_IS_GALLERY = "is_gallery";
     static final String ARG_POST_LIST_TYPE = "post_list_type";
     static final String ARG_CONTENT = "content";
+    static final String ARG_GALLERY_IMAGE_URLS = "gallery_image_urls";
     static final String ARG_IS_SINGLE_POST = "is_single_post";
     static final String ARG_IS_RELATED_POST = "is_related_post";
     static final String ARG_SEARCH_QUERY = "search_query";

WordPress/src/main/java/org/wordpress/android/ui/reader/ReaderGalleryDetector.kt

@@ -0,0 +1,110 @@
+package org.wordpress.android.ui.reader
+
+import android.webkit.WebView
+import org.json.JSONArray
+import org.json.JSONException
+import org.wordpress.android.util.AppLog
+import org.wordpress.android.util.AppLog.T
+
+/**
+ * Detects whether a tapped image belongs to a gallery in a Reader
+ * post WebView, and returns the gallery's image URLs if so.
+ */
+class ReaderGalleryDetector {
+    /**
+     * Evaluates JS in [webView] to determine whether the image at
+     * [imageUrl] is inside a gallery. Calls [callback] with the
+     * gallery's image URLs, or null if the image is not in a gallery.
+     */
+    fun detectGallery(
+        webView: WebView,
+        imageUrl: String,
+        callback: (ArrayList<String>?) -> Unit
+    ) {
+        val js = buildDetectionJs(imageUrl)
+        webView.evaluateJavascript(js) { result ->
+            callback(parseResult(result))
+        }
+    }
+
+    /**
+     * Builds a JavaScript snippet that finds the tapped image in the
+     * DOM by matching its URL pathname, walks up to the nearest
+     * gallery container, and returns a JSON array of all image URLs
+     * in that gallery. The [imageUrl] is escaped to prevent
+     * injection before being interpolated into the script.
+     */
+    private fun buildDetectionJs(imageUrl: String): String {
+        val safeUrl = imageUrl
+            .replace("\\", "\\\\")
+            .replace("'", "\\'")
+            .replace("\n", "")
+            .replace("\r", "")
+        return """
+            (function() {
+                try {
+                    var tp = new URL('$safeUrl').pathname;
+                    var strip = function(p) {
+                        return p.replace(/-\d+x\d+(\.[^.]+)${'$'}/, '${'$'}1');
+                    };
+                    var sel = '.wp-block-gallery,.tiled-gallery,'
+                        + '.gallery,.blocks-gallery-grid';
+                    var imgs = document.querySelectorAll('img');
+                    for (var i = 0; i < imgs.length; i++) {
+                        try {
+                            var p = new URL(imgs[i].src).pathname;
+                            if (p === tp || strip(p) === strip(tp)) {
+                                var g = imgs[i].closest(sel);
+                                if (!g) return null;
+                                var urls = [];
+                                var gi = g.querySelectorAll('img');
+                                for (var j = 0; j < gi.length; j++) {
+                                    if (gi[j].src
+                                        && gi[j].src.startsWith('http'))
+                                        urls.push(gi[j].src);
+                                }
+                                return JSON.stringify(urls);
+                            }
+                        } catch(e) {}
+                    }
+                    return null;
+                } catch(e) { return null; }
+            })()
+        """.trimIndent()
+    }
+
+    /**
+     * Parses the JSON string [result] returned by the gallery
+     * detection JavaScript. Returns the list of image URLs when
+     * the gallery contains more than one image, or null if the
+     * result is empty, not valid JSON, or a single-image gallery.
+     */
+    private fun parseResult(result: String?): ArrayList<String>? {
+        if (result.isNullOrEmpty() || result == "null") return null
+        return try {
+            val json = if (result.startsWith("\"") && result.endsWith("\"")) {
+                result
+                    .substring(1, result.length - 1)
+                    .replace("\\\"", "\"")
+                    .replace("\\\\", "\\")
+            } else {
+                result
+            }
+            val array = JSONArray(json)
+            // Single-image galleries fall back to all-images behavior
+            // so the viewer shows more context rather than a lone image.
+            if (array.length() <= 1) {
+                null
+            } else {
+                val urls = ArrayList<String>(array.length())
+                for (i in 0 until array.length()) {
+                    urls.add(array.getString(i))
+                }
+                urls
+            }
+        } catch (e: JSONException) {
+            AppLog.e(T.READER, "Failed to parse gallery URLs: $e")
+            null
+        }
+    }
+}

WordPress/src/main/java/org/wordpress/android/ui/reader/ReaderPhotoViewerActivity.java

@@ -25,10 +25,13 @@
 import org.wordpress.android.ui.reader.views.ReaderPhotoView.PhotoViewListener;
 import org.wordpress.android.util.AniUtils;
 import org.wordpress.android.util.AppLog;
+import org.wordpress.android.util.UrlUtils;
 import org.wordpress.android.widgets.WPViewPager;
 import org.wordpress.android.widgets.WPViewPagerTransformer;
 import org.wordpress.android.widgets.WPViewPagerTransformer.TransformType;
 
+import java.util.ArrayList;
+
 /**
  * Full-screen photo viewer - uses a ViewPager to enable scrolling between images in a blog
  * post, but also supports viewing a single image
@@ -39,6 +42,7 @@
     private boolean mIsPrivate;
     private boolean mIsGallery;
     private String mContent;
+    private ArrayList<String> mGalleryImageUrls;
     private WPViewPager mViewPager;
     private PhotoPagerAdapter mAdapter;
     private TextView mTxtTitle;
@@ -63,11 +67,17 @@
             mIsPrivate = savedInstanceState.getBoolean(ReaderConstants.ARG_IS_PRIVATE);
             mIsGallery = savedInstanceState.getBoolean(ReaderConstants.ARG_IS_GALLERY);
             mContent = savedInstanceState.getString(ReaderConstants.ARG_CONTENT);
+            mGalleryImageUrls = savedInstanceState.getStringArrayList(
+                    ReaderConstants.ARG_GALLERY_IMAGE_URLS
+            );
         } else if (getIntent() != null) {
             mInitialImageUrl = getIntent().getStringExtra(ReaderConstants.ARG_IMAGE_URL);
             mIsPrivate = getIntent().getBooleanExtra(ReaderConstants.ARG_IS_PRIVATE, false);
             mIsGallery = getIntent().getBooleanExtra(ReaderConstants.ARG_IS_GALLERY, false);
             mContent = getIntent().getStringExtra(ReaderConstants.ARG_CONTENT);
+            mGalleryImageUrls = getIntent().getStringArrayListExtra(
+                    ReaderConstants.ARG_GALLERY_IMAGE_URLS
+            );
         }
 
         mToolbar = findViewById(R.id.toolbar);
@@ -93,24 +103,79 @@
     }
 
     private void loadImageList() {
-        // content will be empty when viewing a single image, otherwise content is HTML
-        // so parse images from it
         final ReaderImageList imageList;
-        if (TextUtils.isEmpty(mContent)) {
+        if (mGalleryImageUrls != null && !mGalleryImageUrls.isEmpty()) {
+            // gallery-scoped: only show images from the tapped gallery
+            imageList = new ReaderImageList(mIsPrivate);
+            for (String url : mGalleryImageUrls) {
+                imageList.addImageUrl(url);
+            }
+            // The initial URL may be the full-size variant while the
+            // gallery contains a resized version (e.g. image.jpg vs
+            // image-800x600.jpg). Find the matching gallery URL so the
+            // pager starts on the right image without adding a duplicate.
+            if (!TextUtils.isEmpty(mInitialImageUrl)
+                    && !imageList.hasImageUrl(mInitialImageUrl)) {
+                String match = findSizeSuffixMatch(
+                        mInitialImageUrl, mGalleryImageUrls
+                );
+                if (match != null) {
+                    mInitialImageUrl = match;
+                }
+            }
+        } else if (TextUtils.isEmpty(mContent)) {
+            // content will be empty when viewing a single image
             imageList = new ReaderImageList(mIsPrivate);
         } else {
-            int minImageWidth = mIsGallery ? ReaderConstants.MIN_GALLERY_IMAGE_WIDTH : 0;
-            imageList = new ReaderImageScanner(mContent, mIsPrivate).getImageList(0, minImageWidth);
+            // parse all images from post HTML
+            int minImageWidth = mIsGallery
+                    ? ReaderConstants.MIN_GALLERY_IMAGE_WIDTH : 0;
+            imageList = new ReaderImageScanner(mContent, mIsPrivate)
+                    .getImageList(0, minImageWidth);
         }
 
         // make sure initial image is in the list
-        if (!TextUtils.isEmpty(mInitialImageUrl) && !imageList.hasImageUrl(mInitialImageUrl)) {
+        if (!TextUtils.isEmpty(mInitialImageUrl)
+                && !imageList.hasImageUrl(mInitialImageUrl)) {
             imageList.addImageUrl(0, mInitialImageUrl);
         }
 
         getAdapter().setImageList(imageList, mInitialImageUrl);
     }
 
+    /**
+     * Finds a gallery URL that matches the given URL after stripping
+     * WordPress size suffixes (e.g. -800x600) from pathnames.
+     */
+    @Nullable
+    private static String findSizeSuffixMatch(
+            @NonNull String targetUrl,
+            @NonNull ArrayList<String> galleryUrls
+    ) {
+        String basePath = stripSizeSuffix(
+                UrlUtils.removeQuery(targetUrl)
+        );
+        for (String galleryUrl : galleryUrls) {
+            String galleryBase = stripSizeSuffix(
+                    UrlUtils.removeQuery(galleryUrl)
+            );
+            if (basePath.equals(galleryBase)) {
+                return galleryUrl;
+            }
+        }
+        return null;
+    }
+
+    /**
+     * Strips WordPress size suffixes (e.g. -800x600) from a URL.
+     * Keep in sync with the JS counterpart in
+     * {@code ReaderPostDetailFragment.buildGalleryDetectionJs}.
+     */
+    @NonNull
+    private static String stripSizeSuffix(@NonNull String url) {
+        return url.replaceAll("-\\d+x\\d+(\\.[^.]+)$", "$1");
+    }
+
     private void showToolbar() {
         if (!isFinishing()) {
             mFadeHandler.removeCallbacks(mFadeOutRunnable);
@@ -191,6 +256,12 @@
         outState.putBoolean(ReaderConstants.ARG_IS_PRIVATE, mIsPrivate);
         outState.putBoolean(ReaderConstants.ARG_IS_GALLERY, mIsGallery);
         outState.putString(ReaderConstants.ARG_CONTENT, mContent);
+        if (mGalleryImageUrls != null) {
+            outState.putStringArrayList(
+                    ReaderConstants.ARG_GALLERY_IMAGE_URLS,
+                    mGalleryImageUrls
+            );
+        }
 
         super.onSaveInstanceState(outState);
     }

WordPress/src/main/java/org/wordpress/android/ui/reader/ReaderPostDetailFragment.kt

@@ -1459,6 +1459,52 @@ class ReaderPostDetailFragment : ViewPagerFragment(),
         return true
     }
 
+    private val galleryDetector = ReaderGalleryDetector()
+
+    private fun showPhotoViewerWithGalleryCheck(
+        imageUrl: String,
+        sourceView: View,
+        startX: Int,
+        startY: Int
+    ) {
+        if (!isAdded || imageUrl.isEmpty() || !imageUrl.startsWith("http")) {
+            return
+        }
+        galleryDetector.detectGallery(readerWebView, imageUrl) { galleryUrls ->
+            if (!isAdded) return@detectGallery
+            if (galleryUrls != null) {
+                showPhotoViewerForGallery(imageUrl, sourceView, startX, startY, galleryUrls)
+            } else {
+                showPhotoViewer(imageUrl, sourceView, startX, startY)
+            }
+        }
+    }
+
+    private fun showPhotoViewerForGallery(
+        imageUrl: String,
+        sourceView: View,
+        startX: Int,
+        startY: Int,
+        galleryUrls: ArrayList<String>
+    ) {
+        val isPrivatePost = viewModel.post?.isPrivate == true
+        val options = EnumSet.noneOf(PhotoViewerOption::class.java)
+        if (isPrivatePost) {
+            options.add(PhotoViewerOption.IS_PRIVATE_IMAGE)
+        }
+
+        ReaderActivityLauncher.showReaderPhotoViewer(
+            requireActivity(),
+            imageUrl,
+            null,
+            sourceView,
+            options,
+            startX,
+            startY,
+            galleryUrls
+        )
+    }
+
     /*
      * post slugs resolution to IDs has completed
      */
@@ -1890,7 +1936,8 @@ class ReaderPostDetailFragment : ViewPagerFragment(),
 
     override fun onImageUrlClick(imageUrl: String, view: View, x: Int, y: Int): Boolean {
         readerTracker.track(AnalyticsTracker.Stat.READER_ARTICLE_IMAGE_TAPPED)
-        return showPhotoViewer(imageUrl, view, x, y)
+        showPhotoViewerWithGalleryCheck(imageUrl, view, x, y)
+        return true
     }
 
     override fun onFileDownloadClick(fileUrl: String?): Boolean {