♻️ refactor: change params openPreview | improve GIF on iOS

android/src/main/java/com/margelo/nitro/multipleimagepicker/MultipleImagePicker.kt

@@ -26,8 +26,12 @@ class MultipleImagePicker : HybridMultipleImagePickerSpec() {
         pickerModule.openCrop(image, config, resolved, rejected)
     }
 
-    override fun openPreview(media: Array<MediaPreview>, config: NitroPreviewConfig) {
-        pickerModule.openPreview(media, config)
+    override fun openPreview(
+        media: Array<MediaPreview>,
+        index: Double,
+        config: NitroPreviewConfig
+    ) {
+        pickerModule.openPreview(media, index.toInt(), config)
     }
 
 }

android/src/main/java/com/margelo/nitro/multipleimagepicker/MultipleImagePickerImp.kt

@@ -1,11 +1,13 @@
 package com.margelo.nitro.multipleimagepicker
 
 import android.app.Activity
+import android.content.ContentResolver
 import android.content.Context
 import android.content.Intent
 import android.graphics.Color
 import android.net.Uri
 import androidx.core.content.ContextCompat
+import com.facebook.react.bridge.ActivityEventListener
 import com.facebook.react.bridge.BaseActivityEventListener
 import com.facebook.react.bridge.ColorPropConverter
 import com.facebook.react.bridge.ReactApplicationContext
@@ -17,9 +19,9 @@ import com.luck.picture.lib.basic.PictureSelector
 import com.luck.picture.lib.config.PictureMimeType
 import com.luck.picture.lib.config.SelectMimeType
 import com.luck.picture.lib.config.SelectModeConfig
+import com.luck.picture.lib.engine.ImageEngine
 import com.luck.picture.lib.engine.PictureSelectorEngine
 import com.luck.picture.lib.entity.LocalMedia
-import com.luck.picture.lib.interfaces.OnCustomLoadingListener
 import com.luck.picture.lib.interfaces.OnMediaEditInterceptListener
 import com.luck.picture.lib.interfaces.OnResultCallbackListener
 import com.luck.picture.lib.language.LanguageConfig
@@ -30,7 +32,6 @@ import com.luck.picture.lib.style.SelectMainStyle
 import com.luck.picture.lib.style.TitleBarStyle
 import com.luck.picture.lib.utils.DateUtils
 import com.luck.picture.lib.utils.DensityUtil
-import com.luck.picture.lib.utils.MediaUtils
 import com.yalantis.ucrop.UCrop
 import com.yalantis.ucrop.UCrop.Options
 import com.yalantis.ucrop.UCrop.REQUEST_CROP
@@ -98,8 +99,7 @@ class MultipleImagePickerImp(reactContext: ReactApplicationContext?) :
             .openGallery(chooseMode)
             .setImageEngine(imageEngine)
             .setSelectedData(dataList)
-            .setSelectorUIStyle(style)
-            .apply {
+            .setSelectorUIStyle(style).apply {
                 if (isCrop) {
                     setCropOption(config.crop)
                     // Disabled force crop engine for multiple
@@ -126,8 +126,7 @@ class MultipleImagePickerImp(reactContext: ReactApplicationContext?) :
                 if (videoQuality != null && videoQuality != 1.0) {
                     setVideoQuality(if (videoQuality > 0.5) 1 else 0)
                 }
-            }
-            .setImageSpanCount(config.numberOfColumn?.toInt() ?: 3)
+            }.setImageSpanCount(config.numberOfColumn?.toInt() ?: 3)
             .setMaxSelectNum(maxSelect)
             .isDirectReturnSingle(true)
             .isSelectZoomAnim(true)
@@ -265,60 +264,19 @@ class MultipleImagePickerImp(reactContext: ReactApplicationContext?) :
 
     @ReactMethod
     fun openPreview(media: Array<MediaPreview>, config: NitroPreviewConfig) {
-        val imageEngine = GlideEngine.createGlideEngine()
 
-        val assets: ArrayList<LocalMedia> = arrayListOf()
-
-        val previewStyle = PictureSelectorStyle()
-        val titleBarStyle = TitleBarStyle()
-
-        previewStyle.windowAnimationStyle.setActivityEnterAnimation(R.anim.anim_modal_in)
-        previewStyle.windowAnimationStyle.setActivityExitAnimation(com.luck.picture.lib.R.anim.ps_anim_modal_out)
-        previewStyle.selectMainStyle.previewBackgroundColor = Color.BLACK
-
-        titleBarStyle.previewTitleBackgroundColor = Color.BLACK
-        previewStyle.titleBarStyle = titleBarStyle
-
-        media.forEach { mediaItem ->
-            var asset: LocalMedia? = null
-
-            mediaItem.path?.let { path ->
-                // network asset
-                if (path.startsWith("https://") || path.startsWith("http://")) {
-                    val localMedia = LocalMedia.create()
-                    localMedia.path = path
-                    localMedia.mimeType =
-                        if (mediaItem.type == ResultType.VIDEO) "video/mp4" else MediaUtils.getMimeTypeFromMediaHttpUrl(
-                            path
-                        ) ?: "image/jpg"
-                    asset = localMedia
-                } else {
-                    asset = LocalMedia.generateLocalMedia(appContext, path)
-                }
-            }
+        val imageEngine = GlideEngine.createGlideEngine()
 
-            asset?.let { assets.add(it) }
-        }
+        var list: ArrayList<LocalMedia> = arrayListOf()
 
         PictureSelector
             .create(currentActivity)
             .openPreview()
             .setImageEngine(imageEngine)
             .setLanguage(getLanguage(config.language))
-            .setSelectorUIStyle(previewStyle)
-            .isPreviewFullScreenMode(true)
-            .isAutoVideoPlay(true)
-            .setVideoPlayerEngine(ExoPlayerEngine())
-            .isVideoPauseResumePlay(true)
-            .setCustomLoadingListener(getCustomLoadingListener())
-            .startActivityPreview(config.index.toInt(), false, assets)
-    }
-
-    private fun getCustomLoadingListener(): OnCustomLoadingListener {
-        return OnCustomLoadingListener { context -> LoadingDialog(context) }
+            .startFragmentPreview(config.index.toInt(), false, list)
     }
 
-
     private fun getLanguage(language: Language): Int {
         return when (language) {
             Language.VI -> LanguageConfig.VIETNAM  // -> 🇻🇳 My country. Yeahhh
@@ -385,7 +343,9 @@ class MultipleImagePickerImp(reactContext: ReactApplicationContext?) :
                     0,
                     *ratioList.take(5).toTypedArray()
                 )
+
             }
+
         }
     }
 

example/src/index.tsx

@@ -76,16 +76,7 @@ export default function App() {
   }
 
   const onPressImage = (_: Result, index: number) => {
-    openPreview(
-      [
-        {
-          path: 'https://images.unsplash.com/photo-1733863200891-22bba4483644?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxmZWF0dXJlZC1waG90b3MtZmVlZHw0fHx8ZW58MHx8fHx8',
-          type: 'image',
-        } as MediaPreview,
-        ...images,
-      ],
-      { index, backgroundColor: 'red' }
-    )
+    openPreview(images, index, {})
   }
 
   const onPicker = async () => {

ios/HybridMultipleImagePicker+Preview.swift

@@ -6,14 +6,12 @@
 //
 
 import HXPhotoPicker
-import Kingfisher
 
 extension HybridMultipleImagePicker {
-    func openPreview(media: [MediaPreview], config: NitroPreviewConfig) throws {
+    func openPreview(media: [MediaPreview], index: Double, config: NitroPreviewConfig) throws {
         var previewConfig = HXPhotoPicker.PhotoBrowser.Configuration()
         previewConfig.showDelete = false
 
-        let index = config.index
         var assets: [PhotoAsset] = []
 
         previewConfig.tintColor = .white
@@ -30,8 +28,8 @@ extension HybridMultipleImagePicker {
                 asset = .init(localIdentifier: localIdentifier)
 
                 // auto play gif
-                if let filePath = mediaItem.path, asset?.isGifAsset == true,
-                   let url = URL(string: filePath)
+                if let filePath = mediaItem.path,
+                   let url = URL(string: filePath), isGifFile(url) == true
                 {
                     asset = .init(.init(imageURL: url))
                 }
@@ -62,6 +60,8 @@ extension HybridMultipleImagePicker {
             }
         }
 
+        if Int(index) > assets.count - 1 { return }
+
         DispatchQueue.main.async {
             HXPhotoPicker.PhotoBrowser.show(
                 assets,

ios/Utils.swift

@@ -6,6 +6,7 @@
 //
 
 import MobileCoreServices
+import UniformTypeIdentifiers
 
 func isImage(_ urlString: String) -> Bool {
     guard let url = URL(string: urlString),
@@ -18,3 +19,18 @@ func isImage(_ urlString: String) -> Bool {
 
     return UTTypeConformsTo(uti, kUTTypeImage)
 }
+
+func isGifFile(_ url: URL) -> Bool {
+    // Kiểm tra phần mở rộng
+    if url.pathExtension.lowercased() == "gif" {
+        return true
+    }
+
+    // Kiểm tra UTI
+    let fileExtension = url.pathExtension as CFString
+    guard let uti = UTTypeCreatePreferredIdentifierForTag(kUTTagClassFilenameExtension, fileExtension, nil)?.takeRetainedValue() else {
+        return false
+    }
+
+    return UTTypeConformsTo(uti, kUTTypeGIF)
+}

nitrogen/generated/android/c++/JHybridMultipleImagePickerSpec.cpp

@@ -109,8 +109,8 @@ namespace margelo::nitro::multipleimagepicker {
     static const auto method = _javaPart->getClass()->getMethod<void(jni::alias_ref<jni::JString> /* image */, jni::alias_ref<JNitroCropConfig> /* config */, jni::alias_ref<JFunc_void_CropResult::javaobject> /* resolved */, jni::alias_ref<JFunc_void_double::javaobject> /* rejected */)>("openCrop");
     method(_javaPart, jni::make_jstring(image), JNitroCropConfig::fromCpp(config), JFunc_void_CropResult::fromCpp(resolved), JFunc_void_double::fromCpp(rejected));
   }
-  void JHybridMultipleImagePickerSpec::openPreview(const std::vector<MediaPreview>& media, const NitroPreviewConfig& config) {
-    static const auto method = _javaPart->getClass()->getMethod<void(jni::alias_ref<jni::JArrayClass<JMediaPreview>> /* media */, jni::alias_ref<JNitroPreviewConfig> /* config */)>("openPreview");
+  void JHybridMultipleImagePickerSpec::openPreview(const std::vector<MediaPreview>& media, double index, const NitroPreviewConfig& config) {
+    static const auto method = _javaPart->getClass()->getMethod<void(jni::alias_ref<jni::JArrayClass<JMediaPreview>> /* media */, double /* index */, jni::alias_ref<JNitroPreviewConfig> /* config */)>("openPreview");
     method(_javaPart, [&]() {
       size_t __size = media.size();
       jni::local_ref<jni::JArrayClass<JMediaPreview>> __array = jni::JArrayClass<JMediaPreview>::newArray(__size);
@@ -119,7 +119,7 @@ namespace margelo::nitro::multipleimagepicker {
         __array->setElement(__i, *JMediaPreview::fromCpp(__element));
       }
       return __array;
-    }(), JNitroPreviewConfig::fromCpp(config));
+    }(), index, JNitroPreviewConfig::fromCpp(config));
   }
 
 } // namespace margelo::nitro::multipleimagepicker

nitrogen/generated/android/c++/JHybridMultipleImagePickerSpec.hpp

@@ -53,7 +53,7 @@ namespace margelo::nitro::multipleimagepicker {
     // Methods
     void openPicker(const NitroConfig& config, const std::function<void(const std::vector<Result>& /* result */)>& resolved, const std::function<void(double /* reject */)>& rejected) override;
     void openCrop(const std::string& image, const NitroCropConfig& config, const std::function<void(const CropResult& /* result */)>& resolved, const std::function<void(double /* reject */)>& rejected) override;
-    void openPreview(const std::vector<MediaPreview>& media, const NitroPreviewConfig& config) override;
+    void openPreview(const std::vector<MediaPreview>& media, double index, const NitroPreviewConfig& config) override;
 
   private:
     friend HybridBase;

nitrogen/generated/android/c++/JNitroPreviewConfig.hpp

@@ -12,7 +12,6 @@
 
 #include "JLanguage.hpp"
 #include "Language.hpp"
-#include <optional>
 
 namespace margelo::nitro::multipleimagepicker {
 
@@ -32,16 +31,10 @@ namespace margelo::nitro::multipleimagepicker {
     [[maybe_unused]]
     NitroPreviewConfig toCpp() const {
       static const auto clazz = javaClassStatic();
-      static const auto fieldIndex = clazz->getField<double>("index");
-      double index = this->getFieldValue(fieldIndex);
       static const auto fieldLanguage = clazz->getField<JLanguage>("language");
       jni::local_ref<JLanguage> language = this->getFieldValue(fieldLanguage);
-      static const auto fieldBackgroundColor = clazz->getField<jni::JDouble>("backgroundColor");
-      jni::local_ref<jni::JDouble> backgroundColor = this->getFieldValue(fieldBackgroundColor);
       return NitroPreviewConfig(
-        index,
-        language->toCpp(),
-        backgroundColor != nullptr ? std::make_optional(backgroundColor->value()) : std::nullopt
+        language->toCpp()
       );
     }
 
@@ -52,9 +45,7 @@ namespace margelo::nitro::multipleimagepicker {
     [[maybe_unused]]
     static jni::local_ref<JNitroPreviewConfig::javaobject> fromCpp(const NitroPreviewConfig& value) {
       return newInstance(
-        value.index,
-        JLanguage::fromCpp(value.language),
-        value.backgroundColor.has_value() ? jni::JDouble::valueOf(value.backgroundColor.value()) : nullptr
+        JLanguage::fromCpp(value.language)
       );
     }
   };

nitrogen/generated/android/kotlin/com/margelo/nitro/multipleimagepicker/HybridMultipleImagePickerSpec.kt

@@ -65,7 +65,7 @@ abstract class HybridMultipleImagePickerSpec: HybridObject() {
 
   @DoNotStrip
   @Keep
-  abstract fun openPreview(media: Array<MediaPreview>, config: NitroPreviewConfig): Unit
+  abstract fun openPreview(media: Array<MediaPreview>, index: Double, config: NitroPreviewConfig): Unit
 
   private external fun initHybrid(): HybridData
 

nitrogen/generated/android/kotlin/com/margelo/nitro/multipleimagepicker/NitroPreviewConfig.kt

@@ -17,7 +17,5 @@ import com.margelo.nitro.core.*
 @DoNotStrip
 @Keep
 data class NitroPreviewConfig(
-  val index: Double,
-  val language: Language,
-  val backgroundColor: Double?
+  val language: Language
 )

nitrogen/generated/ios/c++/HybridMultipleImagePickerSpecSwift.hpp

@@ -115,8 +115,8 @@ namespace margelo::nitro::multipleimagepicker {
     inline void openCrop(const std::string& image, const NitroCropConfig& config, const std::function<void(const CropResult& /* result */)>& resolved, const std::function<void(double /* reject */)>& rejected) override {
       _swiftPart.openCrop(image, config, resolved, rejected);
     }
-    inline void openPreview(const std::vector<MediaPreview>& media, const NitroPreviewConfig& config) override {
-      _swiftPart.openPreview(media, config);
+    inline void openPreview(const std::vector<MediaPreview>& media, double index, const NitroPreviewConfig& config) override {
+      _swiftPart.openPreview(media, std::forward<decltype(index)>(index), config);
     }
 
   private:

nitrogen/generated/ios/swift/HybridMultipleImagePickerSpec.swift

@@ -34,5 +34,5 @@ public protocol HybridMultipleImagePickerSpec: AnyObject, HybridObjectSpec {
   // Methods
   func openPicker(config: NitroConfig, resolved: @escaping ((_ result: [Result]) -> Void), rejected: @escaping ((_ reject: Double) -> Void)) throws -> Void
   func openCrop(image: String, config: NitroCropConfig, resolved: @escaping ((_ result: CropResult) -> Void), rejected: @escaping ((_ reject: Double) -> Void)) throws -> Void
-  func openPreview(media: [MediaPreview], config: NitroPreviewConfig) throws -> Void
+  func openPreview(media: [MediaPreview], index: Double, config: NitroPreviewConfig) throws -> Void
 }

nitrogen/generated/ios/swift/HybridMultipleImagePickerSpecCxx.swift

@@ -147,9 +147,9 @@ public class HybridMultipleImagePickerSpecCxx {
   }
 
   @inline(__always)
-  public func openPreview(media: bridge.std__vector_MediaPreview_, config: NitroPreviewConfig) -> Void {
+  public func openPreview(media: bridge.std__vector_MediaPreview_, index: Double, config: NitroPreviewConfig) -> Void {
     do {
-      try self.__implementation.openPreview(media: media.map({ __item in __item }), config: config)
+      try self.__implementation.openPreview(media: media.map({ __item in __item }), index: index, config: config)
       return 
     } catch {
       let __message = "\(error.localizedDescription)"

nitrogen/generated/ios/swift/NitroPreviewConfig.swift

@@ -18,27 +18,10 @@ public extension NitroPreviewConfig {
   /**
    * Create a new instance of `NitroPreviewConfig`.
    */
-  init(index: Double, language: Language, backgroundColor: Double?) {
-    self.init(index, language, { () -> bridge.std__optional_double_ in
-      if let __unwrappedValue = backgroundColor {
-        return bridge.create_std__optional_double_(__unwrappedValue)
-      } else {
-        return .init()
-      }
-    }())
+  init(language: Language) {
+    self.init(language)
   }
 
-  var index: Double {
-    @inline(__always)
-    get {
-      return self.__index
-    }
-    @inline(__always)
-    set {
-      self.__index = newValue
-    }
-  }
-
   var language: Language {
     @inline(__always)
     get {
@@ -49,21 +32,4 @@ public extension NitroPreviewConfig {
       self.__language = newValue
     }
   }
-
-  var backgroundColor: Double? {
-    @inline(__always)
-    get {
-      return self.__backgroundColor.value
-    }
-    @inline(__always)
-    set {
-      self.__backgroundColor = { () -> bridge.std__optional_double_ in
-        if let __unwrappedValue = newValue {
-          return bridge.create_std__optional_double_(__unwrappedValue)
-        } else {
-          return .init()
-        }
-      }()
-    }
-  }
 }

nitrogen/generated/shared/c++/HybridMultipleImagePickerSpec.hpp

@@ -69,7 +69,7 @@ namespace margelo::nitro::multipleimagepicker {
       // Methods
       virtual void openPicker(const NitroConfig& config, const std::function<void(const std::vector<Result>& /* result */)>& resolved, const std::function<void(double /* reject */)>& rejected) = 0;
       virtual void openCrop(const std::string& image, const NitroCropConfig& config, const std::function<void(const CropResult& /* result */)>& resolved, const std::function<void(double /* reject */)>& rejected) = 0;
-      virtual void openPreview(const std::vector<MediaPreview>& media, const NitroPreviewConfig& config) = 0;
+      virtual void openPreview(const std::vector<MediaPreview>& media, double index, const NitroPreviewConfig& config) = 0;
 
     protected:
       // Hybrid Setup