Merge pull request #60 from shiv19/feat/custom-headers

Feat/custom headers
capacitor-community · May 20, 2024 · d3b5a0d · d3b5a0d
2 parents 68e8791 + 9fd6404
commit d3b5a0d
Show file tree

Hide file tree

Showing 119 changed files with 19,512 additions and 33 deletions.
diff --git a/README.md b/README.md
@@ -12,11 +12,11 @@
 <p align="left" style="font-size:47px">Start --></p>
 <br>
 <p align="left">
-I have been dedicated to developing and maintaining this plugin for many years since the inception of Ionic Capacitor. Now, at 73+ years old, and with my MacBook Pro becoming obsolete for running Capacitor 6 for iOS, I have made the decision to cease maintenance of the plugin. If anyone wishes to take ownership of this plugin, they are welcome to do so.  
+I have been dedicated to developing and maintaining this plugin for many years since the inception of Ionic Capacitor. Now, at 73+ years old, and with my MacBook Pro becoming obsolete for running Capacitor 6 for iOS, I have made the decision to cease maintenance of the plugin. If anyone wishes to take ownership of this plugin, they are welcome to do so.
 </p>
 <br>
 <p align="left">
-It has been a great honor to be part of this development journey alongside the developer community. I am grateful to see many of you following me on this path and incorporating the plugin into your applications. Your comments and suggestions have motivated me to continuously improve it.  
+It has been a great honor to be part of this development journey alongside the developer community. I am grateful to see many of you following me on this path and incorporating the plugin into your applications. Your comments and suggestions have motivated me to continuously improve it.
 </p>
 <br>
 <p align="left">
@@ -37,7 +37,7 @@ Capacitor community plugin for Web and Native Photo Viewer allowing to open full
 A picture can be acessed by image web url, base64 data or from internal device for iOS and Android.
 </p>
 <p align="left">
-- iOS 
+- iOS
 </p>
 <ul>
 <li><strong><code>file:///var/mobile/Media/DCIM/100APPLE/YOUR_IMAGE.JPG</code></strong></li>
@@ -146,9 +146,9 @@ buildscript {
     }
 }
 ...
-``` 
+```
 
-- open the `build.gradle (Module: android.app)` and do the following 
+- open the `build.gradle (Module: android.app)` and do the following
 
     - after `apply plugin: 'com.android.application'` add
         ```
@@ -236,17 +236,40 @@ npm run serve          // Web
 
 ### iOS and Android
 
-- In `Gallery` mode (Image Array with more than one Image): 
+- In `Gallery` mode (Image Array with more than one Image):
     - make a `tap` will select the image and go fullscreen
     - In Fulscreen
         - `tap` will hide the share and exit buttons and open the window for other gestures.
-        - `double tap` to zoom in and out  
+        - `double tap` to zoom in and out
         - `pinch` with your two fingers
         - `tap` will show the share and exit buttons and leave the window for other gestures.
         - `double tap` will hide the buttons and zoom in straightforward (iOS only)
 - In `One Image` mode (Image Array with one Image only):
     - `pinch-zoom` and `pan` with your two fingers
     - `double-tap` to zoom directly to the maximum zoom
+- You can pass customHeaders in the options object to let the plugin pass those headers to the http request for the image. For example:
+
+```ts
+PhotoViewer.show({
+  images: [
+    {
+      url: 'https://picsum.photos/id/237/200/300',
+      title: 'Title'
+    },
+    {
+      url: 'https://picsum.photos/id/238/200/300',
+      title: 'Title'
+    },
+  ],
+  options: {
+    customHeaders: {
+      accept: 'image/jpeg, image/png, image/gif, image/webp, image/svg+xml, image/*;q=0.8, */*;q=0.5',
+      cookie: 'session=foo;',
+    },
+  },
+  mode: 'slider'
+})
+```
 
 
 ## Dependencies

diff --git a/android/.settings/org.eclipse.buildship.core.prefs b/android/.settings/org.eclipse.buildship.core.prefs
@@ -10,4 +10,4 @@ jvm.arguments=
 offline.mode=false
 override.workspace.settings=true
 show.console.view=true
-show.executions.view=true
+show.executions.view=true
diff --git a/android/local.properties b/android/local.properties
@@ -4,5 +4,5 @@
 # Location of the SDK. This is only used by Gradle.
 # For customization when using a Version Control System, please read the
 # header note.
-#Sat Feb 20 08:43:32 CET 2021
+#Wed May 08 13:27:51 NZST 2024
 sdk.dir=/Users/queaujeanpierre/Library/Android/sdk
diff --git a/.../java/com/getcapacitor/community/media/photoviewer/fragments/GalleryFullscreenFragment.kt b/.../java/com/getcapacitor/community/media/photoviewer/fragments/GalleryFullscreenFragment.kt
@@ -28,6 +28,7 @@ class GalleryFullscreenFragment: DialogFragment() {
     private var bShare: Boolean = true
     private var bTitle: Boolean = true
     private var maxZoomScale: Double = 3.0
+    private var customHeaders: JSObject = JSObject()
     private var compressionQuality: Double = 0.8
     private lateinit var viewPager: ViewPager2
     private lateinit var curTransf: ViewPager2.PageTransformer
@@ -54,6 +55,8 @@ class GalleryFullscreenFragment: DialogFragment() {
             .getDouble("compressionquality")
         if(this.options.has("backgroundcolor")) backgroundColor = this.options
             .getString("backgroundcolor").toString()
+        if (this.options.has("customHeaders")) customHeaders = this.options
+                .getJSObject("customHeaders")!!
     }
 
     override fun onCreateView(
@@ -121,7 +124,7 @@ class GalleryFullscreenFragment: DialogFragment() {
         override fun createFragment(position: Int): Fragment {
             val image: Image = imageList.get(position)
             return ScreenSlidePageFragment.getInstance(image, mode, position, bShare, bTitle, maxZoomScale,
-                compressionQuality, backgroundColor)
+                compressionQuality, backgroundColor, customHeaders)
 
         }
     }

diff --git a/...oid/src/main/java/com/getcapacitor/community/media/photoviewer/fragments/ImageFragment.kt b/...oid/src/main/java/com/getcapacitor/community/media/photoviewer/fragments/ImageFragment.kt
@@ -19,6 +19,8 @@ import android.widget.Toast
 import androidx.fragment.app.Fragment
 import com.bumptech.glide.Glide
 import com.bumptech.glide.load.engine.DiskCacheStrategy
+import com.bumptech.glide.load.model.GlideUrl
+import com.bumptech.glide.load.model.LazyHeaders
 import com.getcapacitor.JSObject
 import com.getcapacitor.community.media.photoviewer.Notifications.NotificationCenter
 import com.getcapacitor.community.media.photoviewer.R
@@ -37,6 +39,7 @@ class ImageFragment : Fragment() {
     private var imageFragmentBinding: ImageFragmentBinding? = null
     private var bShare: Boolean = true
     private var maxZoomScale: Double = 3.0
+    private var customHeaders: JSObject = JSObject()
     private var compressionQuality: Double = 0.8
     private var backgroundColor: String = "black"
     private lateinit var appId: String
@@ -71,6 +74,8 @@ class ImageFragment : Fragment() {
             .getDouble("compressionquality")
         if(this.options.has("backgroundcolor")) backgroundColor = this.options
             .getString("backgroundcolor").toString()
+        if (this.options.has("customHeaders")) customHeaders = this.options
+            .getJSObject("customHeaders")!!
     }
     override fun onCreateView(
         inflater: LayoutInflater, container: ViewGroup?,
@@ -159,9 +164,15 @@ class ImageFragment : Fragment() {
         val toBeLoaded = image.url?.let { mImageToBeLoaded.getToBeLoaded(it) }
 
         if (toBeLoaded is String) {
-            // load image from http
+            // load image from url
+            val lazyHeaders = LazyHeaders.Builder()
+            for (key in customHeaders.keys()) {
+                customHeaders.getString(key)?.let { lazyHeaders.addHeader(key, it) }
+            }
+            val glideUrl = GlideUrl(toBeLoaded, lazyHeaders.build())
             GlideApp.with(appContext)
-                .load(toBeLoaded)
+                .asBitmap()
+                .load(glideUrl)
                 .fitCenter()
                 .diskCacheStrategy(DiskCacheStrategy.ALL)
                 .into(ivTouchImage)

diff --git a/...in/java/com/getcapacitor/community/media/photoviewer/fragments/ScreenSlidePageFragment.kt b/...in/java/com/getcapacitor/community/media/photoviewer/fragments/ScreenSlidePageFragment.kt
@@ -6,10 +6,8 @@ import android.net.Uri
 import android.os.Build
 import android.os.Build.VERSION.SDK_INT
 import android.os.Bundle
-import android.os.Environment
 import android.os.Parcelable
 import android.util.Log
-import android.view.KeyEvent
 import android.view.LayoutInflater
 import android.view.View
 import android.view.ViewGroup
@@ -23,6 +21,9 @@ import androidx.core.view.isVisible
 import androidx.fragment.app.DialogFragment
 import androidx.fragment.app.Fragment
 import com.bumptech.glide.load.engine.DiskCacheStrategy
+import com.bumptech.glide.load.model.GlideUrl
+import com.bumptech.glide.load.model.LazyHeaders
+import com.getcapacitor.JSObject
 import com.getcapacitor.community.media.photoviewer.Notifications.NotificationCenter
 import com.getcapacitor.community.media.photoviewer.R
 import com.getcapacitor.community.media.photoviewer.adapter.Image
@@ -49,6 +50,8 @@ class ScreenSlidePageFragment() : Fragment(), CallbackListener {
     var maxZoomScale: Double = 3.0
     var compressionQuality: Double = 0.8
     var backgroundColor: String = "black"
+    var customHeaders: JSObject = JSObject()
+
     companion object {
         const val ARG_IMAGE = "image"
         const val ARG_MODE = "mode"
@@ -58,6 +61,7 @@ class ScreenSlidePageFragment() : Fragment(), CallbackListener {
         const val ARG_MAXZOOMSCALE = "maxzoomscale"
         const val ARG_COMPRESSIONQUALITY = "compressionquality"
         const val ARG_BACKGROUNDCOLOR = "backgroundcolor"
+        const val ARG_CUSTOMHEADERS = "customHeaders"
 
         inline fun <reified T : Parcelable> Bundle.parcelable(key: String): T? = when {
             SDK_INT >= 33 -> getParcelable(key, T::class.java)
@@ -66,7 +70,7 @@ class ScreenSlidePageFragment() : Fragment(), CallbackListener {
 
         fun getInstance(image: Image, mode: String, imageIndex: Int, bShare: Boolean,
                         bTitle: Boolean, maxZoomScale: Double, compressionQuality: Double,
-                        backgroundColor: String): Fragment {
+                        backgroundColor: String, customHeaders: JSObject): Fragment {
             val screenSlidePageFragment = ScreenSlidePageFragment()
             val bundle = Bundle()
             bundle.putParcelable(ARG_IMAGE, image)
@@ -77,6 +81,7 @@ class ScreenSlidePageFragment() : Fragment(), CallbackListener {
             bundle.putDouble(ARG_MAXZOOMSCALE, maxZoomScale)
             bundle.putDouble(ARG_COMPRESSIONQUALITY, compressionQuality)
             bundle.putString(ARG_BACKGROUNDCOLOR, backgroundColor)
+            bundle.putString(ARG_CUSTOMHEADERS, customHeaders.toString())
             screenSlidePageFragment.arguments = bundle
             return screenSlidePageFragment
         }
@@ -105,6 +110,7 @@ class ScreenSlidePageFragment() : Fragment(), CallbackListener {
         maxZoomScale = requireArguments().getDouble(ARG_MAXZOOMSCALE)
         compressionQuality = requireArguments().getDouble(ARG_COMPRESSIONQUALITY)
         backgroundColor= requireArguments().getString(ARG_BACKGROUNDCOLOR).toString()
+        customHeaders = JSObject(requireArguments().getString(ARG_CUSTOMHEADERS))
         appContext = this.requireContext()
         appId = appContext.getPackageName()
         rlFullscreen = binding.rlFullscreenImage
@@ -123,9 +129,14 @@ class ScreenSlidePageFragment() : Fragment(), CallbackListener {
         val toBeLoaded = image.url?.let { mImageToBeLoaded.getToBeLoaded(it) }
 
         if (toBeLoaded is String) {
-            // load image from http
+            // load image from url
+            val lazyHeaders = LazyHeaders.Builder()
+            for (key in customHeaders.keys()) {
+                customHeaders.getString(key)?.let { lazyHeaders.addHeader(key, it) }
+            }
+            val glideUrl = GlideUrl(toBeLoaded, lazyHeaders.build())
             GlideApp.with(appContext)
-                .load(toBeLoaded)
+                .load(glideUrl)
                 .fitCenter()
                 .diskCacheStrategy(DiskCacheStrategy.ALL)
                 .into(ivFullscreenImage)

diff --git a/docs/API.md b/docs/API.md
@@ -150,6 +150,7 @@ Get the internal image path list
 | **`backgroundcolor`**    | <code>string</code>                                   | Background Color ["white", "ivory", "lightgrey", "darkgrey", "grey", "dimgrey", "black"] (default "black") |
 | **`divid`**              | <code>string</code>                                   | Div HTML Element Id (Web only) (default 'photoviewer-container')                                           |
 | **`movieoptions`**       | <code><a href="#movieoptions">MovieOptions</a></code> | Movie Options iOS only                                                                                     |
+| **`customHeaders`**      | <code>{ [key: string]: string; }</code>               | Custom Headers                                                                                             |
 
 
 #### MovieOptions

diff --git a/example/.browserslistrc b/example/.browserslistrc
@@ -0,0 +1,16 @@
+# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
+# For additional information regarding the format and rule options, please see:
+# https://github.com/browserslist/browserslist#queries
+
+# For the full list of supported browsers by the Angular framework, please see:
+# https://angular.io/guide/browser-support
+
+# You can see what browsers were selected by your queries by running:
+#   npx browserslist
+
+Chrome >=79
+ChromeAndroid >=79
+Firefox >=70
+Edge >=79
+Safari >=14
+iOS >=14
diff --git a/example/.editorconfig b/example/.editorconfig
@@ -0,0 +1,16 @@
+# Editor configuration, see https://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.ts]
+quote_type = single
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false
diff --git a/example/.eslintrc.json b/example/.eslintrc.json
@@ -0,0 +1,46 @@
+{
+  "root": true,
+  "ignorePatterns": ["projects/**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts"],
+      "parserOptions": {
+        "project": ["tsconfig.json"],
+        "createDefaultProgram": true
+      },
+      "extends": [
+        "plugin:@angular-eslint/recommended",
+        "plugin:@angular-eslint/template/process-inline-templates"
+      ],
+      "rules": {
+        "@angular-eslint/component-class-suffix": [
+          "error",
+          {
+            "suffixes": ["Page", "Component"]
+          }
+        ],
+        "@angular-eslint/component-selector": [
+          "error",
+          {
+            "type": "element",
+            "prefix": "app",
+            "style": "kebab-case"
+          }
+        ],
+        "@angular-eslint/directive-selector": [
+          "error",
+          {
+            "type": "attribute",
+            "prefix": "app",
+            "style": "camelCase"
+          }
+        ]
+      }
+    },
+    {
+      "files": ["*.html"],
+      "extends": ["plugin:@angular-eslint/template/recommended"],
+      "rules": {}
+    }
+  ]
+}