Fixes for inline image preview size in landscape mode

Author: QuantumBadger

src/main/assets/changelog-alpha.txt

@@ -1,4 +1,5 @@
 /Alpha 370 (2026-09-13)
+Fixes for inline image preview size in landscape mode
 Improved memory usage for inline image previews
 
 /Alpha 369 (2026-08-01)

src/main/assets/changelog.txt

@@ -1,4 +1,5 @@
 119/1.27
+Fixes for inline image preview size in landscape mode
 Improved memory usage for inline image previews
 
 118/1.26

src/main/java/org/quantumbadger/redreader/adapters/GroupedRecyclerViewAdapter.java

@@ -214,6 +214,18 @@ public void setPreloadWindow(
 		mPreloadWindow.addAll(newWindow);
 	}
 
+	/**
+	 * Notifies every item in the preload window that it is in the window, despite it having
+	 * been there already. Used when the amount of space available to display each item has
+	 * changed, as an item may need to reload what it has preloaded at a different size.
+	 */
+	public void refreshPreloadWindow() {
+
+		for(final Item<?> item : mPreloadWindow) {
+			item.onPreloadWindowChanged(true);
+		}
+	}
+
 	@NonNull
 	@Override
 	public RecyclerView.ViewHolder onCreateViewHolder(

src/main/java/org/quantumbadger/redreader/adapters/RedditListingManager.java

@@ -154,6 +154,17 @@ public void updatePreloadWindow() {
 				mLayoutManager.findLastVisibleItemPosition());
 	}
 
+	/**
+	 * As {@link #updatePreloadWindow()}, except that every item in the window is notified,
+	 * rather than only those which have entered or left it. Should be called when the size
+	 * of the list changes, for example due to the screen being rotated.
+	 */
+	public void refreshPreloadWindow() {
+		General.checkThisIsUIThread();
+		updatePreloadWindow();
+		mAdapter.refreshPreloadWindow();
+	}
+
 	public void clearPreloadWindow() {
 		General.checkThisIsUIThread();
 		mAdapter.setPreloadWindow(-1, -1);

src/main/java/org/quantumbadger/redreader/fragments/PostListingFragment.java

@@ -123,6 +123,10 @@ public class PostListingFragment extends RRFragment
 	private final PostListingManager mPostListingManager;
 	private final RecyclerView mRecyclerView;
 
+	// The size the list was at when the preload window was last recalculated
+	private int mLastListWidth = -1;
+	private int mLastListHeight = -1;
+
 	private final View mOuter;
 
 	private RedditIdAndType mAfter = null;
@@ -240,7 +244,7 @@ public void onScrolled(
 		// Scrolling isn't the only thing which changes what's on screen -- posts being
 		// added, posts being hidden, and the screen being rotated all do too
 		mRecyclerView.getViewTreeObserver().addOnGlobalLayoutListener(
-				mPostListingManager::updatePreloadWindow);
+				this::onListLayout);
 
 		General.setLayoutMatchParent(mRecyclerView);
 
@@ -411,6 +415,25 @@ public Bundle onSaveInstanceState() {
 		return bundle;
 	}
 
+	private void onListLayout() {
+
+		final int width = mRecyclerView.getWidth();
+		final int height = mRecyclerView.getHeight();
+
+		if(width == mLastListWidth && height == mLastListHeight) {
+			mPostListingManager.updatePreloadWindow();
+			return;
+		}
+
+		mLastListWidth = width;
+		mLastListHeight = height;
+
+		// Each post now has a different amount of space to display its image preview in, so
+		// the previews which are already loaded may be at the wrong resolution. This happens
+		// when the screen is rotated, which doesn't rebind any of the posts on it.
+		mPostListingManager.refreshPreloadWindow();
+	}
+
 	public void cancel() {
 
 		if(mRequest != null) {

src/main/java/org/quantumbadger/redreader/reddit/prepared/InlinePreviewLoader.java

@@ -79,26 +79,48 @@ public interface Listener {
 	}
 
 	/**
-	 * The preview image to show for a post, together with the size of the box it will be
-	 * displayed in.
+	 * The preview image to show for a post, together with the size of the image itself and
+	 * the size of the box to decode it into.
 	 */
 	public static final class PreviewDetails {
 
 		@NonNull public final UriString url;
+
+		// The size of the image itself, which determines the shape of the area it is
+		// displayed in
+		public final int imageWidthPx;
+		public final int imageHeightPx;
+
+		// The bounds the image is decoded within, which limit the memory it uses. These
+		// are not the size it is displayed at, which is only known once the view
+		// displaying it is measured.
 		public final int boxWidthPx;
 		public final int boxHeightPx;
 
 		private PreviewDetails(
 				@NonNull final UriString url,
+				final int imageWidthPx,
+				final int imageHeightPx,
 				final int boxWidthPx,
 				final int boxHeightPx) {
 
 			this.url = url;
+			this.imageWidthPx = imageWidthPx;
+			this.imageHeightPx = imageHeightPx;
 			this.boxWidthPx = boxWidthPx;
 			this.boxHeightPx = boxHeightPx;
 		}
 	}
 
+	/**
+	 * The maximum height, in pixels, which an inline preview may take up, given the height
+	 * of the area it is displayed in. Taller images are letterboxed into this height, so
+	 * that a post never takes up so much of the list that it is hard to scroll past.
+	 */
+	public static int getMaxPreviewHeightPx(final int displayAreaHeightPx) {
+		return Math.max(1, (Math.max(400, displayAreaHeightPx) * 7) / 8);
+	}
+
 	/**
 	 * Returns null if there is no inline preview to show for this post.
 	 */
@@ -115,23 +137,38 @@ public static PreviewDetails calculatePreviewDetails(
 		final Rect windowVisibleDisplayFrame
 				= DisplayUtils.getWindowVisibleDisplayFrame(activity);
 
-		final int screenWidth
-				= Math.min(1080, Math.max(720, windowVisibleDisplayFrame.width()));
-		final int screenHeight
-				= Math.min(2000, Math.max(400, windowVisibleDisplayFrame.height()));
+		final int windowWidth = Math.max(1, windowVisibleDisplayFrame.width());
+
+		// Bounded to keep the memory used by each preview reasonable
+		final int boxWidth = Math.min(1080, Math.max(720, windowWidth));
 
 		final RedditParsedPost.ImagePreviewDetails preview
-				= post.src.getPreview(screenWidth, 0);
+				= post.src.getPreview(boxWidth, 0);
 
 		if(preview == null || preview.width < 10 || preview.height < 10) {
 			return null;
 		}
 
-		final int boundedImageHeight = Math.max(1, Math.min(
-				(screenHeight * 2) / 3,
-				(int)(((long)preview.height * screenWidth) / preview.width)));
-
-		return new PreviewDetails(preview.url, screenWidth, boundedImageHeight);
+		// A preview is displayed at the width of the post, which is normally the width of
+		// the window, so scaling the height limit by the same factor as the width gives the
+		// height to decode within. This is only an estimate of the size the image will be
+		// displayed at, as the list is not necessarily as large as the window: the post is
+		// narrower in the two pane tablet layout, and shorter wherever there is a toolbar.
+		// Both make this an overestimate, which costs a little memory but never quality.
+		final int maxBoxHeight = Math.max(1, (int)(
+				((long)getMaxPreviewHeightPx(windowVisibleDisplayFrame.height()) * boxWidth)
+						/ windowWidth));
+
+		final int boxHeight = Math.max(1, Math.min(
+				maxBoxHeight,
+				(int)(((long)preview.height * boxWidth) / preview.width)));
+
+		return new PreviewDetails(
+				preview.url,
+				preview.width,
+				preview.height,
+				boxWidth,
+				boxHeight);
 	}
 
 	@NonNull private final BaseActivity mActivity;
@@ -259,13 +296,17 @@ private void startLoad(@NonNull final PreviewDetails details) {
 
 		final int generation = ++mGeneration;
 
-		mBitmap = null;
-		mError = null;
-		mState = State.LOADING;
 		mLoadedForWidthPx = details.boxWidthPx;
 		mLoadedForHeightPx = details.boxHeightPx;
 
-		notifyListener();
+		// When reloading at a higher resolution, keep showing the image we already have
+		// until the new one is ready, rather than flashing up a loading spinner
+		if(mState != State.LOADED || mBitmap == null) {
+			mBitmap = null;
+			mError = null;
+			mState = State.LOADING;
+			notifyListener();
+		}
 
 		mRequest = new CacheRequest(
 				details.url,
@@ -305,6 +346,13 @@ private void onLoadFailed(final int generation, @NonNull final RRError error) {
 		}
 
 		mRequest = null;
+
+		if(mState == State.LOADED && mBitmap != null) {
+			// A reload at a higher resolution failed -- keep showing the lower resolution
+			// image, which is much better than showing an error in its place
+			return;
+		}
+
 		mBitmap = null;
 		mError = error;
 		mState = State.FAILED;

src/main/java/org/quantumbadger/redreader/views/InlinePreviewHolderView.java

@@ -0,0 +1,132 @@
+/*******************************************************************************
+ * This file is part of RedReader.
+ *
+ * RedReader is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * RedReader is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with RedReader.  If not, see <http://www.gnu.org/licenses/>.
+ ******************************************************************************/
+
+package org.quantumbadger.redreader.views;
+
+import android.content.Context;
+import android.graphics.Rect;
+import android.util.AttributeSet;
+import android.view.ViewParent;
+import android.widget.FrameLayout;
+
+import androidx.annotation.NonNull;
+import androidx.annotation.Nullable;
+import androidx.recyclerview.widget.RecyclerView;
+
+import org.quantumbadger.redreader.reddit.prepared.InlinePreviewLoader;
+
+/**
+ * Displays an inline image preview at the aspect ratio of the image itself, except where
+ * that would make it taller than {@link InlinePreviewLoader#getMaxPreviewHeightPx(int)},
+ * in which case it is limited to that height and the image is letterboxed within it.
+ *
+ * <p>The height is calculated during measurement, rather than when the preview is attached,
+ * so that it is always based on the space this view has actually been given -- both the
+ * width it is being measured against, and the height of the list it is in. Neither can be
+ * known in advance: the list may take up only part of the screen, as it does in the two
+ * pane tablet layout, and the screen can be rotated without the posts on it being rebound.
+ */
+public final class InlinePreviewHolderView extends FrameLayout {
+
+	private final Rect mWindowVisibleDisplayFrame = new Rect();
+
+	private int mImageWidthPx;
+	private int mImageHeightPx;
+
+	public InlinePreviewHolderView(@NonNull final Context context) {
+		super(context);
+	}
+
+	public InlinePreviewHolderView(
+			@NonNull final Context context,
+			@Nullable final AttributeSet attrs) {
+		super(context, attrs);
+	}
+
+	public InlinePreviewHolderView(
+			@NonNull final Context context,
+			@Nullable final AttributeSet attrs,
+			final int defStyleAttr) {
+		super(context, attrs, defStyleAttr);
+	}
+
+	/**
+	 * Sets the size of the image to be displayed. Only the ratio between the two values is
+	 * used -- the image is displayed at the width of this view, whatever that turns out to
+	 * be. Pass zero for both when there is no image to display.
+	 */
+	public void setImageSize(final int widthPx, final int heightPx) {
+
+		if(widthPx == mImageWidthPx && heightPx == mImageHeightPx) {
+			return;
+		}
+
+		mImageWidthPx = widthPx;
+		mImageHeightPx = heightPx;
+
+		requestLayout();
+	}
+
+	/**
+	 * The height of the list this view is in, which is the space actually available to
+	 * display a post. Falls back to the height of the window if the list hasn't been laid
+	 * out yet, or if this view isn't in one.
+	 */
+	private int getDisplayAreaHeightPx() {
+
+		ViewParent parent = getParent();
+
+		while(parent != null) {
+
+			if(parent instanceof RecyclerView) {
+
+				final int height = ((RecyclerView)parent).getHeight();
+
+				if(height > 0) {
+					return height;
+				}
+
+				break;
+			}
+
+			parent = parent.getParent();
+		}
+
+		getWindowVisibleDisplayFrame(mWindowVisibleDisplayFrame);
+
+		return mWindowVisibleDisplayFrame.height();
+	}
+
+	@Override
+	protected void onMeasure(final int widthMeasureSpec, final int heightMeasureSpec) {
+
+		if(mImageWidthPx < 1 || mImageHeightPx < 1) {
+			super.onMeasure(widthMeasureSpec, heightMeasureSpec);
+			return;
+		}
+
+		final int width = MeasureSpec.getSize(widthMeasureSpec);
+
+		final int height = Math.max(1, Math.min(
+				InlinePreviewLoader.getMaxPreviewHeightPx(getDisplayAreaHeightPx()),
+				(int)(((long)width * mImageHeightPx) / mImageWidthPx)));
+
+		super.onMeasure(
+				MeasureSpec.makeMeasureSpec(width, MeasureSpec.EXACTLY),
+				MeasureSpec.makeMeasureSpec(height, MeasureSpec.EXACTLY));
+	}
+}

src/main/java/org/quantumbadger/redreader/views/RedditPostView.java

@@ -77,7 +77,7 @@ public final class RedditPostView extends FlingableItemView
 	@NonNull private final LinearLayout mCommentsButton;
 	@NonNull private final TextView mCommentsText;
 	@NonNull private final LinearLayout mPostErrors;
-	@NonNull private final FrameLayout mImagePreviewHolder;
+	@NonNull private final InlinePreviewHolderView mImagePreviewHolder;
 	@NonNull private final ImageView mImagePreviewImageView;
 	@NonNull private final ConstraintLayout mImagePreviewPlayOverlay;
 	@NonNull private final LinearLayout mImagePreviewOuter;
@@ -514,18 +514,14 @@ private void attachInlinePreview(@NonNull final RedditPreparedPost post) {
 		final InlinePreviewLoader loader = post.getInlinePreviewLoader(mActivity);
 
 		if(details == null || loader == null) {
+			mImagePreviewHolder.setImageSize(0, 0);
 			mImagePreviewOuter.setVisibility(GONE);
 			mImagePreviewLoadingSpinner.setVisibility(GONE);
 			setBottomMargin(false);
 			return;
 		}
 
-		final ConstraintLayout.LayoutParams imagePreviewLayoutParams
-				= (ConstraintLayout.LayoutParams)mImagePreviewHolder.getLayoutParams();
-
-		imagePreviewLayoutParams.dimensionRatio
-				= details.boxWidthPx + ":" + details.boxHeightPx;
-		mImagePreviewHolder.setLayoutParams(imagePreviewLayoutParams);
+		mImagePreviewHolder.setImageSize(details.imageWidthPx, details.imageHeightPx);
 
 		mImagePreviewOuter.setVisibility(VISIBLE);
 		setBottomMargin(true);