Fixes #3679: Issues with new media details UI (#3697)

app/src/main/java/fr/free/nrw/commons/media/MediaDetailFragment.java

@@ -7,6 +7,7 @@ import android.annotation.SuppressLint;
 import android.app.AlertDialog;
 import android.content.Context;
 import android.content.Intent;
+import android.content.res.Configuration;
 import android.graphics.drawable.Animatable;
 import android.net.Uri;
 import android.os.Bundle;
@@ -101,6 +102,8 @@ public class MediaDetailFragment extends CommonsDaggerSupportFragment {
 
     @BindView(R.id.mediaDetailImageView)
     SimpleDraweeView image;
+    @BindView(R.id.mediaDetailImageViewLandscape)
+    SimpleDraweeView imageLandscape;
     @BindView(R.id.mediaDetailImageViewSpacer)
     LinearLayout imageSpacer;
     @BindView(R.id.mediaDetailTitle)
@@ -144,10 +147,14 @@ public class MediaDetailFragment extends CommonsDaggerSupportFragment {
      * However unlike categories depictions is multi-lingual
      * Ex: key: en value: monument
      */
+    private ImageInfo imageInfoCache;
+    private int oldWidthOfImageView;
+    private int newWidthOfImageView;
     private Depictions depictions;
     private boolean categoriesLoaded = false;
     private boolean categoriesPresent = false;
     private boolean depictionLoaded = false;
+    private boolean heightVerifyingBoolean = true; // helps in maintaining aspect ratio
     private ViewTreeObserver.OnGlobalLayoutListener layoutListener; // for layout stuff, only used once!
 
     //Had to make this class variable, to implement various onClicks, which access the media, also I fell why make separate variables when one can serve the purpose
@@ -238,12 +245,49 @@ public class MediaDetailFragment extends CommonsDaggerSupportFragment {
                 @Override
                 public void onGlobalLayout() {
                     scrollView.getViewTreeObserver().removeOnGlobalLayoutListener(this);
+                    if (getResources().getConfiguration().orientation == Configuration.ORIENTATION_LANDSCAPE) {
+                        imageLandscape.setVisibility(VISIBLE);
+                    }
+                    oldWidthOfImageView = scrollView.getWidth();
                     displayMediaDetails();
                 }
             }
         );
     }
 
+    @Override
+    public void onConfigurationChanged(Configuration newConfig) {
+        super.onConfigurationChanged(newConfig);
+        scrollView.getViewTreeObserver().addOnGlobalLayoutListener(
+            new OnGlobalLayoutListener() {
+                @Override
+                public void onGlobalLayout() {
+                    if (scrollView.getWidth() != oldWidthOfImageView) {
+                        if (newWidthOfImageView == 0) {
+                            newWidthOfImageView = scrollView.getWidth();
+                            updateAspectRatio(newWidthOfImageView);
+                        }
+                        scrollView.getViewTreeObserver().removeOnGlobalLayoutListener(this);
+                    }
+                }
+            }
+        );
+        // check orientation
+        if (getResources().getConfiguration().orientation == Configuration.ORIENTATION_LANDSCAPE) {
+            imageLandscape.setVisibility(VISIBLE);
+        } else if (newConfig.orientation == Configuration.ORIENTATION_PORTRAIT) {
+            imageLandscape.setVisibility(GONE);
+        }
+        // ensuring correct aspect ratio for landscape mode
+        if (heightVerifyingBoolean) {
+            updateAspectRatio(newWidthOfImageView);
+            heightVerifyingBoolean = false;
+        } else {
+            updateAspectRatio(oldWidthOfImageView);
+            heightVerifyingBoolean = true;
+        }
+    }
+
     private void displayMediaDetails() {
         //Always load image from Internet to allow viewing the desc, license, and cats
         setupImageView();
@@ -262,29 +306,31 @@ public class MediaDetailFragment extends CommonsDaggerSupportFragment {
      * The imageSpacer is Basically a transparent overlay for the SimpleDraweeView
      * which holds the image to be displayed( moreover this image is out of
      * the scroll view )
-     * @param imageInfo used to calculate height of the ImageSpacer
+     * @param scrollWidth the current width of the scrollView
      */
-    private void updateAspectRatio(ImageInfo imageInfo) {
+    private void updateAspectRatio(int scrollWidth) {
-        if (imageInfo != null) {
+        if (imageInfoCache != null) {
-            int screenWidth = scrollView.getWidth();
+            int finalHeight = (scrollWidth*imageInfoCache.getHeight()) / imageInfoCache.getWidth();
-            int finalHeight = (screenWidth*imageInfo.getHeight()) / imageInfo.getWidth();
             ViewGroup.LayoutParams params = image.getLayoutParams();
             ViewGroup.LayoutParams spacerParams = imageSpacer.getLayoutParams();
             params.height = finalHeight;
             spacerParams.height = finalHeight;
             image.setLayoutParams(params);
             imageSpacer.setLayoutParams(spacerParams);
+            imageLandscape.setLayoutParams(params);
         }
     }
 
     private final ControllerListener aspectRatioListener = new BaseControllerListener<ImageInfo>() {
         @Override
         public void onIntermediateImageSet(String id, @Nullable ImageInfo imageInfo) {
-            updateAspectRatio(imageInfo);
+            imageInfoCache = imageInfo;
+            updateAspectRatio(scrollView.getWidth());
         }
         @Override
         public void onFinalImageSet(String id, @Nullable ImageInfo imageInfo, @Nullable Animatable animatable) {
-            updateAspectRatio(imageInfo);
+            imageInfoCache = imageInfo;
+            updateAspectRatio(scrollView.getWidth());
         }
     };
 
@@ -300,7 +346,14 @@ public class MediaDetailFragment extends CommonsDaggerSupportFragment {
                 .setControllerListener(aspectRatioListener)
                 .setOldController(image.getController())
                 .build();
+        DraweeController controllerLandscape = Fresco.newDraweeControllerBuilder()
+            .setLowResImageRequest(ImageRequest.fromUri(media.getThumbUrl()))
+            .setImageRequest(ImageRequest.fromUri(media.getImageUrl()))
+            .setControllerListener(aspectRatioListener)
+            .setOldController(imageLandscape.getController())
+            .build();
         image.setController(controller);
+        imageLandscape.setController(controllerLandscape);
     }
 
     @Override

app/src/main/res/layout/fragment_media_detail.xml

@@ -40,13 +40,24 @@
             <!-- Placeholder. Height gets set at runtime based on container size; the initial value is a hack to keep
                  the detail info offscreen until it's placed properly. May be a better way to do this. -->
 
-            <LinearLayout
+            <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
                 android:layout_width="match_parent"
-                android:layout_height="@dimen/dimen_250"
+                android:layout_height="wrap_content" >
-                android:orientation="vertical"
+
-                android:background="@android:color/transparent"
+                <com.facebook.drawee.view.SimpleDraweeView
-                android:id="@+id/mediaDetailImageViewSpacer"
+                    android:id="@+id/mediaDetailImageViewLandscape"
-                />
+                    android:layout_width="match_parent"
+                    android:layout_height="@dimen/dimen_250"
+                    app:actualImageScaleType="none"
+                    android:visibility="gone" />
+
+                <LinearLayout
+                    android:layout_width="match_parent"
+                    android:layout_height="@dimen/dimen_250"
+                    android:orientation="vertical"
+                    android:id="@+id/mediaDetailImageViewSpacer" />
+
+            </FrameLayout>
 
             <LinearLayout
                 android:layout_width="match_parent"
@@ -54,8 +65,6 @@
                 android:background="?attr/mainBackground"
                 android:orientation="vertical">
 
-
-
                 <LinearLayout
                     android:layout_width="match_parent"
                     android:layout_height="wrap_content"