fix issue#9 & issue#10

CHANGELOG.md

@@ -1,3 +1,17 @@
+# 1.0.5 (2022-01-05)
+
+## Added Features
+
+ - Android add back press button on the three main fragments
+ - iOS add close button in the photo gallery page
+ - Link to a Vite React application
+
+## Bug fixes
+
+ - Update Readme for Android project issue#9
+ - Add a link to a Vite React application issue#10
+
+
 # 1.0.4 (2021-12-23)
 
 ## Added Features

README.md

@@ -54,60 +54,20 @@ npx cap sync
 
 ### Android
 
-- open the project `AndroidManifest.xml` and add the following to the application tag
+- on the `res` project folder open the `file_paths.xml` file and add
 
 ```xml
-    </application>
-        ...
-        <provider
-            android:name="androidx.core.content.FileProvider"
-            android:authorities="${applicationId}.provider"
-            android:exported="false"
-            android:grantUriPermissions="true">
-            <meta-data
-                android:name="android.support.FILE_PROVIDER_PATHS"
-                android:resource="@xml/file_paths"></meta-data>
-        </provider>
-        ...
-    </application>
-```
-as well the Internet permission
-```xml
-<manifest>
-    ...
-    <!-- Permissions -->
-    <uses-permission android:name="android.permission.INTERNET" />
-    ...
-</manifest>
-
-``` 
-
-- on the `res` project folder create a folder `xml`if it does not exist and create a `file_paths.xml` file containing
-
-```xml
-<?xml version="1.0" encoding="utf-8"?>
-<paths xmlns:android="http://schemas.android.com/apk/res/android">
-    <files-path
-        name="files"
-        path="."/>
-
-</paths>
+    <files-path name="files" path="."/>
 ```
 
 - open the `build.gradle (Project:android)` and make sure that `kotlin` is declared
 
 ```js
 ...
 buildscript {
-    ext.kotlin_version = '1.6.0'
-
-    repositories {
-        google()
-        jcenter()
-    }
+    ext.kotlin_version = '1.6.10'
     dependencies {
-        classpath 'com.android.tools.build:gradle:4.2.2'
-        classpath 'com.google.gms:google-services:4.3.3'
+        ...
         classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
     }
 }
@@ -186,6 +146,10 @@ npm run serve          // Web
 
 - [vue-photoviewer-app](https://github.com/jepiqueau/vue-photoviewer-app)
 
+### React
+
+- [vite-react-photoviewer-app](https://github.com/jepiqueau/vite-react-photoviewer-app)
+
 ## Usage
 
 - [In your Ionic/Vue App](https://github.com/capacitor-community/photoviewer/blob/master/docs/Ionic-Vue-Usage.md)

android/.settings/org.eclipse.buildship.core.prefs

@@ -5,7 +5,7 @@ connection.gradle.distribution=GRADLE_DISTRIBUTION(WRAPPER)
 connection.project.dir=
 eclipse.preferences.version=1
 gradle.user.home=
-java.home=/Library/Java/JavaVirtualMachines/adoptopenjdk-11.jdk/Contents/Home
+java.home=/Library/Java/JavaVirtualMachines/jdk-11.0.12.jdk/Contents/Home
 jvm.arguments=
 offline.mode=false
 override.workspace.settings=true

android/build.gradle

@@ -6,7 +6,7 @@ ext {
 }
 
 buildscript {
-    ext.kotlin_version = '1.6.0'
+    ext.kotlin_version = '1.6.10'
     repositories {
         google()
         jcenter()

android/src/main/java/com/getcapacitor/community/media/photoviewer/PhotoViewer.java

@@ -46,43 +46,37 @@ public void show(JSArray images, JSObject options) throws Exception {
     }
 
     private void createMainFragment(ArrayList<Image> imageList, JSObject options) throws Exception {
-        FrameLayout frameLayoutView = bridge.getActivity().findViewById(frameLayoutViewId);
-        if (frameLayoutView != null) {
-            throw new Exception("FrameLayout for PhotoViewer already exists");
-        } else {
-            try {
-                // Initialize a new FrameLayout as container for fragment
-                frameLayoutView = new FrameLayout(context);
-                frameLayoutView.setId(frameLayoutViewId);
-                FrameLayout.LayoutParams lp = new FrameLayout.LayoutParams(
-                    FrameLayout.LayoutParams.MATCH_PARENT,
-                    FrameLayout.LayoutParams.MATCH_PARENT
-                );
-                // Apply the Layout Parameters to frameLayout
-                frameLayoutView.setLayoutParams(lp);
-                // Add FrameLayout to bridge_layout_main
-                ((ViewGroup) bridge.getWebView().getParent()).addView(frameLayoutView);
-                final MainFragment mainFragment = new MainFragment();
-                mainFragment.setImageList(imageList);
-                mainFragment.setOptions(options);
+        try {
+            // Initialize a new FrameLayout as container for fragment
+            FrameLayout frameLayoutView = new FrameLayout(context);
+            frameLayoutView.setId(frameLayoutViewId);
+            FrameLayout.LayoutParams lp = new FrameLayout.LayoutParams(
+                FrameLayout.LayoutParams.MATCH_PARENT,
+                FrameLayout.LayoutParams.MATCH_PARENT
+            );
+            // Apply the Layout Parameters to frameLayout
+            frameLayoutView.setLayoutParams(lp);
+            // Add FrameLayout to bridge_layout_main
+            ((ViewGroup) bridge.getWebView().getParent()).addView(frameLayoutView);
+            final MainFragment mainFragment = new MainFragment();
+            mainFragment.setImageList(imageList);
+            mainFragment.setOptions(options);
 
-                bridge
-                    .getActivity()
-                    .getSupportFragmentManager()
-                    .beginTransaction()
-                    .replace(frameLayoutViewId, mainFragment, "mainfragment")
-                    .commit();
-            } catch (Exception e) {
-                throw new Exception(e.getMessage());
-            }
+            bridge
+                .getActivity()
+                .getSupportFragmentManager()
+                .beginTransaction()
+                .replace(frameLayoutViewId, mainFragment, "mainfragment")
+                .commit();
+        } catch (Exception e) {
+            throw new Exception(e.getMessage());
         }
     }
 
     private void createImageFragment(Image image, JSObject options) throws Exception {
-        FrameLayout frameLayoutView = bridge.getActivity().findViewById(frameLayoutViewId);
         try {
             // Initialize a new FrameLayout as container for fragment
-            frameLayoutView = new FrameLayout(context);
+            FrameLayout frameLayoutView = new FrameLayout(context);
             frameLayoutView.setId(frameLayoutViewId);
             FrameLayout.LayoutParams lp = new FrameLayout.LayoutParams(
                 FrameLayout.LayoutParams.MATCH_PARENT,

android/src/main/java/com/getcapacitor/community/media/photoviewer/fragments/GalleryFullscreenFragment.kt

@@ -1,14 +1,18 @@
 package com.getcapacitor.community.media.photoviewer.fragments
 
 import android.os.Bundle
+import android.view.KeyEvent
 import android.view.LayoutInflater
 import android.view.View
 import android.view.ViewGroup
+import android.widget.ImageButton
+import android.widget.RelativeLayout
 import androidx.fragment.app.DialogFragment
 import androidx.fragment.app.Fragment
 import androidx.viewpager2.adapter.FragmentStateAdapter
 import androidx.viewpager2.widget.ViewPager2
 import com.getcapacitor.JSObject
+import com.getcapacitor.community.media.photoviewer.R
 import com.getcapacitor.community.media.photoviewer.adapter.Image
 import com.getcapacitor.community.media.photoviewer.databinding.FragmentGalleryFullscreenBinding
 import com.getcapacitor.community.media.photoviewer.helper.DepthPageTransformer
@@ -61,7 +65,28 @@ class GalleryFullscreenFragment: DialogFragment() {
         curTransf = ZoomOutPageTransformer()
         if(transformer.equals("depth")) curTransf = DepthPageTransformer()
         viewPager.setPageTransformer(curTransf)
-        return binding.root
+        val view = binding.root
+        activity?.runOnUiThread( java.lang.Runnable {
+                view.isFocusableInTouchMode = true;
+                view.requestFocus();
+            view.setOnKeyListener(object: View.OnKeyListener {
+                override fun onKey(v: View?, keyCode: Int, event: KeyEvent): Boolean {
+                    // if the event is a key down event on the enter button
+                    if (event.action == KeyEvent.ACTION_DOWN &&
+                        keyCode == KeyEvent.KEYCODE_BACK
+                    ) {
+                        backPressed()
+                        return true
+                    }
+                    return false
+                }
+            })
+        })
+
+        return view
+    }
+    private fun backPressed() {
+        activity?.supportFragmentManager?.beginTransaction()?.remove(this)?.commit()
     }
 
     override fun onDestroyView() {

android/src/main/java/com/getcapacitor/community/media/photoviewer/fragments/MainFragment.kt

@@ -5,6 +5,7 @@ import android.content.Context
 import android.content.res.Configuration
 import android.os.Bundle
 import android.util.Log
+import android.view.KeyEvent
 import android.view.LayoutInflater
 import android.view.View
 import android.view.ViewGroup
@@ -49,6 +50,23 @@ class MainFragment : Fragment() , GalleryImageClickListener {
         if (container != null) {
             mContainer  = container
             val view: View = initializeView()
+            activity?.runOnUiThread( java.lang.Runnable {
+                view.isFocusableInTouchMode = true;
+                view.requestFocus();
+                view.setOnKeyListener(object: View.OnKeyListener {
+                    override fun onKey(v: View?, keyCode: Int, event: KeyEvent): Boolean {
+                        // if the event is a key down event on the enter button
+                        if (event.action == KeyEvent.ACTION_DOWN &&
+                            keyCode == KeyEvent.KEYCODE_BACK
+                        ) {
+                            backPressed()
+                            return true
+                        }
+                        return false
+                    }
+                })
+            })
+
             return view
         }
         return null
@@ -84,6 +102,9 @@ class MainFragment : Fragment() , GalleryImageClickListener {
 
         return binding.root
     }
+    private fun backPressed() {
+        activity?.supportFragmentManager?.beginTransaction()?.remove(this)?.commit();
+    }
 
     override fun onConfigurationChanged(newConfig: Configuration) {
         Log.d(TAG, "$$ onConfigurationChanged ${newConfig.orientation}")

android/src/main/res/layout/fragment_gallery_fullscreen.xml

@@ -8,10 +8,10 @@
         android:layout_width="match_parent"
         android:layout_height="match_parent"
         tools:context=".GalleryFullscreenFragment">
-        <androidx.viewpager2.widget.ViewPager2
-            android:id="@+id/viewPager"
-            android:layout_width="match_parent"
-            android:layout_height="match_parent"
-            android:background="@android:color/black" />
+            <androidx.viewpager2.widget.ViewPager2
+                android:id="@+id/viewPager"
+                android:layout_width="match_parent"
+                android:layout_height="match_parent"
+                android:background="@android:color/black" />
      </FrameLayout>
 </layout>

ios/Plugin/PhotoGallery/CollectionViewController.swift

@@ -47,6 +47,35 @@ class CollectionViewController: UIViewController {
 
         return mColView
     }()
+    lazy var mNavBar: UINavigationBar = { () -> UINavigationBar in
+
+        let navigationBar = UINavigationBar()
+        navigationBar.isTranslucent = true
+        navigationBar.setBackgroundImage(UIImage(), for: .default)
+        navigationBar.shadowImage = UIImage()
+        return navigationBar
+    }()
+    lazy var mClose: UIBarButtonItem = {
+        let bClose = UIBarButtonItem()
+        let image: UIImage?
+        if #available(iOS 13, *) {
+            let configuration = UIImage.SymbolConfiguration(scale: .large)
+            image = UIImage(systemName: "multiply.circle.fill",
+                            withConfiguration: configuration)
+            bClose.image = image
+        } else {
+
+            bClose.title = "Close"
+            let fontSize: CGFloat = 18
+            let font: UIFont = UIFont.boldSystemFont(ofSize: fontSize)
+            bClose.setTitleTextAttributes(
+                [NSAttributedString.Key.foregroundColor: UIColor.white,
+                 NSAttributedString.Key.font: font], for: .normal)
+        }
+        bClose.tintColor = .white
+        bClose.action = #selector(closeButtonTapped)
+        return bClose
+    }()
 
     // MARK: - Set-up imageList
 
@@ -115,6 +144,12 @@ class CollectionViewController: UIViewController {
         collectionView.bottomAnchor
             .constraint(equalTo: view.bottomAnchor)
             .isActive = true
+        let navigationItem = UINavigationItem()
+        navigationItem.rightBarButtonItem = mClose
+        mNavBar.setItems([navigationItem], animated: false)
+        mNavBar.frame = CGRect(x: 0, y: 35,
+                               width: view.frame.size.width, height: 64)
+        view.addSubview(mNavBar)
 
     }
 
@@ -169,6 +204,12 @@ class CollectionViewController: UIViewController {
         self.collectionView.gestureRecognizers?.removeAll()
     }
 
+    // MARK: - closeButtonTapped
+
+    @objc func closeButtonTapped() {
+        self.dismiss(animated: true, completion: nil)
+    }
+
     // MARK: - didSingleTap
 
     @objc