Fixes #3414: For v2.13, Handle zoom in media details view (#3422)

* MediaDetailFragment: add zoom feature

* fragment_media_detail: add SimpleDrawee for Scroll picture

* ZoomableActivity: activity which facilitates zoom in

* activity_zoomable: xml for zoom activity

* zoomControllers: controllers for handling gesture and zooming

* MediaDetailFragment: fixing name of image variable

* MediaDetailFragment: display as per the aspect ratio of image

* add zoom activity to AndroidManifest

* fix travis ci faliure

* fix resizing of image

app/src/main/AndroidManifest.xml

@@ -41,6 +41,9 @@
             android:excludeFromRecents="true"
             android:finishOnTaskLaunch="true" />
 
+        <activity
+            android:name=".media.ZoomableActivity" />
+
         <activity android:name=".auth.LoginActivity">
             <intent-filter>
                 <category android:name="android.intent.category.LAUNCHER" />

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

@@ -1,8 +1,10 @@
 package fr.free.nrw.commons.media;
 
 import android.annotation.SuppressLint;
+import android.graphics.drawable.Animatable;
 import android.app.AlertDialog;
 import android.content.Intent;
+import android.content.Context;
 import android.net.Uri;
 import android.os.Bundle;
 import android.text.Editable;
@@ -23,7 +25,10 @@
 
 import com.facebook.drawee.backends.pipeline.Fresco;
 import com.facebook.drawee.interfaces.DraweeController;
+import com.facebook.drawee.controller.BaseControllerListener;
+import com.facebook.drawee.controller.ControllerListener;
 import com.facebook.drawee.view.SimpleDraweeView;
+import com.facebook.imagepipeline.image.ImageInfo;
 import com.facebook.imagepipeline.request.ImageRequest;
 
 import org.apache.commons.lang3.StringUtils;
@@ -39,6 +44,7 @@
 import butterknife.BindView;
 import butterknife.ButterKnife;
 import butterknife.OnClick;
+import androidx.annotation.Nullable;
 import fr.free.nrw.commons.Media;
 import fr.free.nrw.commons.MediaDataExtractor;
 import fr.free.nrw.commons.R;
@@ -97,10 +103,8 @@ public static MediaDetailFragment forMedia(int index, boolean editable, boolean
 
     private int initialListTop = 0;
 
-    @BindView(R.id.mediaDetailImage)
+    @BindView(R.id.mediaDetailImageView)
     SimpleDraweeView image;
-    @BindView(R.id.mediaDetailSpacer)
-    MediaDetailSpacer spacer;
     @BindView(R.id.mediaDetailTitle)
     TextView title;
     @BindView(R.id.mediaDetailDesc)
@@ -197,36 +201,18 @@ && getParentFragment() instanceof MediaDetailPagerFragment) {
         // Progressively darken the image in the background when we scroll detail pane up
         scrollListener = this::updateTheDarkness;
         view.getViewTreeObserver().addOnScrollChangedListener(scrollListener);
-
-        // Layout layoutListener to size the spacer item relative to the available space.
-        // There may be a .... better way to do this.
-        layoutListener = new ViewTreeObserver.OnGlobalLayoutListener() {
-            private int currentHeight = -1;
-
-            @Override
-            public void onGlobalLayout() {
-                int viewHeight = view.getHeight();
-                //int textHeight = title.getLineHeight();
-                int paddingDp = 112;
-                float paddingPx = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, paddingDp, getResources().getDisplayMetrics());
-                int newHeight = viewHeight - Math.round(paddingPx);
-
-                if (newHeight != currentHeight) {
-                    currentHeight = newHeight;
-                    ViewGroup.LayoutParams params = spacer.getLayoutParams();
-                    params.height = newHeight;
-                    spacer.setLayoutParams(params);
-
-                    scrollView.scrollTo(0, initialListTop);
-                }
-            }
-        };
-        view.getViewTreeObserver().addOnGlobalLayoutListener(layoutListener);
         locale = getResources().getConfiguration().locale;
-
         return view;
     }
 
+    @OnClick(R.id.mediaDetailImageView)
+    public void launchZoomActivity(View view) {
+        Context ctx = view.getContext();
+        ctx.startActivity(
+                new Intent(ctx,ZoomableActivity.class).setData(Uri.parse(media.getImageUrl()))
+        );
+    }
+
     @Override
     public void onResume() {
         super.onResume();
@@ -255,6 +241,26 @@ private void displayMediaDetails() {
         compositeDisposable.add(disposable);
     }
 
+    private void updateAspectRatio(ImageInfo imageInfo) {
+        if (imageInfo != null) {
+            int finalHeight = (scrollView.getWidth()*imageInfo.getHeight()) / imageInfo.getWidth();
+            ViewGroup.LayoutParams params = image.getLayoutParams();
+            params.height = finalHeight;
+            image.setLayoutParams(params);
+        }
+    }
+
+    private final ControllerListener aspectRatioListener = new BaseControllerListener<ImageInfo>() {
+        @Override
+        public void onIntermediateImageSet(String id, @Nullable ImageInfo imageInfo) {
+            updateAspectRatio(imageInfo);
+        }
+        @Override
+        public void onFinalImageSet(String id, @Nullable ImageInfo imageInfo, @Nullable Animatable animatable) {
+            updateAspectRatio(imageInfo);
+        }
+    };
+
     /**
      * Uses two image sources.
      * - low resolution thumbnail is shown initially
@@ -264,6 +270,7 @@ private void setupImageView() {
         DraweeController controller = Fresco.newDraweeControllerBuilder()
                 .setLowResImageRequest(ImageRequest.fromUri(media.getThumbUrl()))
                 .setImageRequest(ImageRequest.fromUri(media.getImageUrl()))
+                .setControllerListener(aspectRatioListener)
                 .setOldController(image.getController())
                 .build();
         image.setController(controller);

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

@@ -0,0 +1,64 @@
+package fr.free.nrw.commons.media;
+
+import androidx.annotation.NonNull;
+import androidx.annotation.Nullable;
+import androidx.appcompat.app.AppCompatActivity;
+import butterknife.BindView;
+import butterknife.ButterKnife;
+import fr.free.nrw.commons.R;
+import fr.free.nrw.commons.media.zoomControllers.zoomable.DoubleTapGestureListener;
+import fr.free.nrw.commons.media.zoomControllers.zoomable.ZoomableDraweeView;
+import timber.log.Timber;
+
+import android.graphics.Bitmap;
+import android.graphics.BitmapFactory;
+import android.net.Uri;
+import android.os.Bundle;
+import com.facebook.drawee.backends.pipeline.Fresco;
+import com.facebook.drawee.interfaces.DraweeController;
+import android.view.LayoutInflater;
+import android.view.View;
+import android.view.ViewGroup;
+
+import com.facebook.drawee.view.SimpleDraweeView;
+import com.github.chrisbanes.photoview.PhotoView;
+
+import java.io.InputStream;
+import java.net.HttpURLConnection;
+import java.net.URL;
+
+public class ZoomableActivity extends AppCompatActivity {
+    private Uri imageUri;
+
+    @BindView(R.id.zoomable)
+    ZoomableDraweeView photo;
+
+    @Override
+    protected void onCreate(Bundle savedInstanceState) {
+        super.onCreate(savedInstanceState);
+
+        imageUri = getIntent().getData();
+        if (null == imageUri) {
+            throw new IllegalArgumentException("No data to display");
+        }
+        Timber.d("URl = " + imageUri);
+
+        setContentView(R.layout.activity_zoomable);
+        ButterKnife.bind(this);
+        init();
+    }
+
+    private void init() {
+        if( imageUri != null ) {
+            photo.setAllowTouchInterceptionWhileZoomed(true);
+            photo.setIsLongpressEnabled(false);
+            photo.setTapListener(new DoubleTapGestureListener(photo));
+            DraweeController controller = Fresco.newDraweeControllerBuilder()
+                    .setUri(imageUri)
+                    .build();
+            photo.setController(controller);
+        }
+    }
+
+
+}