🐛 bug: preview and thumbnail on Android, solved file://

baronha · baronha · commit 16e91aff3451 · 2024-12-17T16:38:36.000+07:00
diff --git a/android/src/main/java/com/margelo/nitro/multipleimagepicker/CameraEngine.kt b/android/src/main/java/com/margelo/nitro/multipleimagepicker/CameraEngine.kt
@@ -28,7 +28,7 @@ class CameraEngine(
         camera.setRecordVideoMaxSecond(config.videoMaximumDuration?.toInt() ?: 60)
         camera.setCameraAroundState(config.cameraDevice == CameraDevice.FRONT)
         camera.setOutputPathDir(getSandboxCameraOutputPath())
-        
+
         config.color?.let {
             val primaryColor = ColorPropConverter.getColor(it, appContext)
             camera.setCaptureLoadingColor(primaryColor)
diff --git a/android/src/main/java/com/margelo/nitro/multipleimagepicker/MultipleImagePickerImp.kt b/android/src/main/java/com/margelo/nitro/multipleimagepicker/MultipleImagePickerImp.kt
@@ -92,7 +92,6 @@ class MultipleImagePickerImp(reactContext: ReactApplicationContext?) :
             .setImageEngine(imageEngine)
             .setSelectedData(dataList)
             .setSelectorUIStyle(style)
-
             .apply {
                 if (isCrop) {
                     setCropOption(config.crop)
@@ -129,6 +128,7 @@ class MultipleImagePickerImp(reactContext: ReactApplicationContext?) :
                     setCameraInterceptListener(CameraEngine(appContext, cameraConfig))
                 }
             }
+            .setVideoThumbnailListener(VideoThumbnailEngine(getVideoThumbnailDir()))
             .setImageSpanCount(config.numberOfColumn?.toInt() ?: 3)
             .setMaxSelectNum(maxSelect)
             .isDirectReturnSingle(true)
@@ -307,7 +307,7 @@ class MultipleImagePickerImp(reactContext: ReactApplicationContext?) :
             .setLanguage(getLanguage(config.language))
             .setSelectorUIStyle(previewStyle)
             .isPreviewFullScreenMode(true)
-            .isAutoVideoPlay(true)
+            .isAutoVideoPlay(config.videoAutoPlay == true)
             .setVideoPlayerEngine(ExoPlayerEngine())
             .isVideoPauseResumePlay(true)
             .setCustomLoadingListener(getCustomLoadingListener())
@@ -334,6 +334,7 @@ class MultipleImagePickerImp(reactContext: ReactApplicationContext?) :
             .setCameraInterceptListener(CameraEngine(appContext, config))
             .isQuickCapture(true)
             .isOriginalControl(true)
+            .setVideoThumbnailListener(VideoThumbnailEngine(getVideoThumbnailDir()))
             .apply {
                 if (config.crop != null) {
                     setCropEngine(CropEngine(cropOption))
@@ -372,6 +373,15 @@ class MultipleImagePickerImp(reactContext: ReactApplicationContext?) :
         }
     }
 
+    private fun getVideoThumbnailDir(): String {
+        val externalFilesDir: File? = appContext.getExternalFilesDir("")
+        val customFile = File(externalFilesDir?.absolutePath, "Thumbnail")
+        if (!customFile.exists()) {
+            customFile.mkdirs()
+        }
+        return customFile.absolutePath + File.separator
+    }
+
 
     private fun getLanguage(language: Language): Int {
         return when (language) {
@@ -571,16 +581,22 @@ class MultipleImagePickerImp(reactContext: ReactApplicationContext?) :
             if (item.mimeType.startsWith("video/")) ResultType.VIDEO else ResultType.IMAGE
 
         var path = item.path
-
         var width: Double = item.width.toDouble()
         var height: Double = item.height.toDouble()
 
+        val thumbnail = item.videoThumbnailPath?.let {
+            if (!it.startsWith("file://")) "file://$it" else it
+        }
+
         if (item.isCut) {
             path = "file://${item.cutPath}"
             width = item.cropImageWidth.toDouble()
             height = item.cropImageHeight.toDouble()
         }
 
+        if (!path.startsWith("file://") && !path.startsWith("content://") && type == ResultType.IMAGE)
+            path = "file://$path"
+
         val media = Result(
             localIdentifier = item.id.toString(),
             width,
@@ -595,7 +611,7 @@ class MultipleImagePickerImp(reactContext: ReactApplicationContext?) :
             path,
             type,
             fileName = item.fileName,
-            thumbnail = item.videoThumbnailPath,
+            thumbnail = thumbnail,
             duration = item.duration.toDouble()
         )
 
diff --git a/android/src/main/java/com/margelo/nitro/multipleimagepicker/VideoThumbnailEngine.kt b/android/src/main/java/com/margelo/nitro/multipleimagepicker/VideoThumbnailEngine.kt
@@ -0,0 +1,52 @@
+package com.margelo.nitro.multipleimagepicker
+
+import android.content.Context
+import android.graphics.Bitmap
+import android.graphics.drawable.Drawable
+import com.bumptech.glide.Glide
+import com.bumptech.glide.request.target.CustomTarget
+import com.bumptech.glide.request.transition.Transition
+import com.luck.picture.lib.interfaces.OnKeyValueResultCallbackListener
+import com.luck.picture.lib.interfaces.OnVideoThumbnailEventListener
+import com.luck.picture.lib.utils.PictureFileUtils
+import java.io.ByteArrayOutputStream
+import java.io.File
+import java.io.FileOutputStream
+import java.io.IOException
+
+
+class VideoThumbnailEngine(private val targetPath: String) : OnVideoThumbnailEventListener {
+    override fun onVideoThumbnail(
+        context: Context, videoPath: String, call: OnKeyValueResultCallbackListener
+    ) {
+        Glide.with(context).asBitmap().sizeMultiplier(0.6f).load(videoPath)
+            .into(object : CustomTarget<Bitmap?>() {
+                override fun onResourceReady(
+                    resource: Bitmap, transition: Transition<in Bitmap?>?
+                ) {
+                    val stream = ByteArrayOutputStream()
+                    resource.compress(Bitmap.CompressFormat.JPEG, 60, stream)
+                    var fos: FileOutputStream? = null
+                    var result: String? = null
+                    try {
+                        val targetFile =
+                            File(targetPath, "thumbnails_" + System.currentTimeMillis() + ".jpg")
+                        fos = FileOutputStream(targetFile)
+                        fos.write(stream.toByteArray())
+                        fos.flush()
+                        result = targetFile.absolutePath
+                    } catch (e: IOException) {
+                        e.printStackTrace()
+                    } finally {
+                        PictureFileUtils.close(fos)
+                        PictureFileUtils.close(stream)
+                    }
+                    call.onCallback(videoPath, result)
+                }
+
+                override fun onLoadCleared(placeholder: Drawable?) {
+                    call.onCallback(videoPath, "")
+                }
+            })
+    }
+}
diff --git a/example/src/index.tsx b/example/src/index.tsx
@@ -93,20 +93,16 @@ export default function App() {
     }
   }
 
+  console.log('images: ', images)
+
   const onCamera = async () => {
     try {
-      const response = await openCamera({
-        mediaType: 'all',
-        videoMaximumDuration: 5,
-        color: 'black',
-      })
+      const response = await openCamera()
 
       setImages((prev) => {
         return [response as Result, ...prev]
       })
 
-      console.log('camera response: ', response)
-
       layoutEffect()
     } catch (e) {
       console.log('e: ', e)
@@ -115,7 +111,6 @@ export default function App() {
 
   const onCrop = async () => {
     try {
-      console.log('images: ', images)
       const response = await openCropper(images[0].path, {
         ratio: [
           { title: 'Instagram', width: 1, height: 1 },
@@ -188,7 +183,6 @@ export default function App() {
                   width={WIDTH - 6}
                   sourceKey={'path'}
                   videoKey={'type'}
-                  prefixPath={Platform.OS === 'ios' ? 'file://' : ''}
                   conditionCheckVideo={'video'}
                   videoURLKey={'thumbnail'}
                   showDelete
diff --git a/ios/HybridMultipleImagePicker+Camera.swift b/ios/HybridMultipleImagePicker+Camera.swift
@@ -87,7 +87,7 @@ extension HybridMultipleImagePicker {
 
                     let thumbnail = getVideoThumbnail(from: url.absoluteString, in: 1)
 
-                    var result = CameraResult(path: url.absoluteString,
+                    var result = CameraResult(path: "file://\(url.absoluteString)",
                                               type: ResultType.video,
                                               width: nil,
                                               height: nil,
diff --git a/ios/HybridMultipleImagePicker+Preview.swift b/ios/HybridMultipleImagePicker+Preview.swift
@@ -15,7 +15,7 @@ extension HybridMultipleImagePicker {
         var assets: [PhotoAsset] = []
 
         previewConfig.tintColor = .white
-        previewConfig.videoPlayType = .auto
+        previewConfig.videoPlayType = config.videoAutoPlay == true ? .auto : .normal
         previewConfig.livePhotoPlayType = .auto
 
         previewConfig.languageType = setLocale(language: config.language)
diff --git a/ios/HybridMultipleImagePicker+Result.swift b/ios/HybridMultipleImagePicker+Result.swift
@@ -32,7 +32,7 @@ extension HybridMultipleImagePicker {
                       parentFolderName: nil,
                       creationDate: creationDate > 0 ? Double(creationDate) : nil,
                       crop: false,
-                      path: url.absoluteString,
+                      path: "file://\(url.absoluteString)",
                       type: type,
                       duration: asset.videoDuration,
                       thumbnail: thumbnail,
diff --git a/ios/PHAsset+Thumbnail.swift b/ios/PHAsset+Thumbnail.swift
@@ -10,7 +10,9 @@ import Photos
 extension PHAsset {
     func getVideoAssetThumbnail(from moviePath: String, in seconds: Double) -> String? {
         if mediaType == .video {
-            return getVideoThumbnail(from: moviePath, in: seconds)
+            if let path = getVideoThumbnail(from: moviePath, in: seconds) {
+                return "file://\(path)"
+            }
         }
 
         return nil
diff --git a/nitrogen/generated/android/c++/JNitroPreviewConfig.hpp b/nitrogen/generated/android/c++/JNitroPreviewConfig.hpp
@@ -12,6 +12,7 @@
 
 #include "JLanguage.hpp"
 #include "Language.hpp"
+#include <optional>
 
 namespace margelo::nitro::multipleimagepicker {
 
@@ -33,8 +34,11 @@ namespace margelo::nitro::multipleimagepicker {
       static const auto clazz = javaClassStatic();
       static const auto fieldLanguage = clazz->getField<JLanguage>("language");
       jni::local_ref<JLanguage> language = this->getFieldValue(fieldLanguage);
+      static const auto fieldVideoAutoPlay = clazz->getField<jni::JBoolean>("videoAutoPlay");
+      jni::local_ref<jni::JBoolean> videoAutoPlay = this->getFieldValue(fieldVideoAutoPlay);
       return NitroPreviewConfig(
-        language->toCpp()
+        language->toCpp(),
+        videoAutoPlay != nullptr ? std::make_optional(static_cast<bool>(videoAutoPlay->value())) : std::nullopt
       );
     }
 
@@ -45,7 +49,8 @@ namespace margelo::nitro::multipleimagepicker {
     [[maybe_unused]]
     static jni::local_ref<JNitroPreviewConfig::javaobject> fromCpp(const NitroPreviewConfig& value) {
       return newInstance(
-        JLanguage::fromCpp(value.language)
+        JLanguage::fromCpp(value.language),
+        value.videoAutoPlay.has_value() ? jni::JBoolean::valueOf(value.videoAutoPlay.value()) : nullptr
       );
     }
   };
diff --git a/nitrogen/generated/android/kotlin/com/margelo/nitro/multipleimagepicker/NitroPreviewConfig.kt b/nitrogen/generated/android/kotlin/com/margelo/nitro/multipleimagepicker/NitroPreviewConfig.kt
@@ -17,5 +17,6 @@ import com.margelo.nitro.core.*
 @DoNotStrip
 @Keep
 data class NitroPreviewConfig(
-  val language: Language
+  val language: Language,
+  val videoAutoPlay: Boolean?
 )
diff --git a/nitrogen/generated/ios/swift/NitroPreviewConfig.swift b/nitrogen/generated/ios/swift/NitroPreviewConfig.swift
@@ -18,8 +18,14 @@ public extension NitroPreviewConfig {
   /**
    * Create a new instance of `NitroPreviewConfig`.
    */
-  init(language: Language) {
-    self.init(language)
+  init(language: Language, videoAutoPlay: Bool?) {
+    self.init(language, { () -> bridge.std__optional_bool_ in
+      if let __unwrappedValue = videoAutoPlay {
+        return bridge.create_std__optional_bool_(__unwrappedValue)
+      } else {
+        return .init()
+      }
+    }())
   }
 
   var language: Language {
@@ -32,4 +38,21 @@ public extension NitroPreviewConfig {
       self.__language = newValue
     }
   }
+  
+  var videoAutoPlay: Bool? {
+    @inline(__always)
+    get {
+      return self.__videoAutoPlay.value
+    }
+    @inline(__always)
+    set {
+      self.__videoAutoPlay = { () -> bridge.std__optional_bool_ in
+        if let __unwrappedValue = newValue {
+          return bridge.create_std__optional_bool_(__unwrappedValue)
+        } else {
+          return .init()
+        }
+      }()
+    }
+  }
 }
diff --git a/nitrogen/generated/shared/c++/NitroPreviewConfig.hpp b/nitrogen/generated/shared/c++/NitroPreviewConfig.hpp
@@ -22,6 +22,7 @@
 namespace margelo::nitro::multipleimagepicker { enum class Language; }
 
 #include "Language.hpp"
+#include <optional>
 
 namespace margelo::nitro::multipleimagepicker {
 
@@ -31,9 +32,10 @@ namespace margelo::nitro::multipleimagepicker {
   struct NitroPreviewConfig {
   public:
     Language language     SWIFT_PRIVATE;
+    std::optional<bool> videoAutoPlay     SWIFT_PRIVATE;
 
   public:
-    explicit NitroPreviewConfig(Language language): language(language) {}
+    explicit NitroPreviewConfig(Language language, std::optional<bool> videoAutoPlay): language(language), videoAutoPlay(videoAutoPlay) {}
   };
 
 } // namespace margelo::nitro::multipleimagepicker
@@ -48,12 +50,14 @@ namespace margelo::nitro {
     static inline NitroPreviewConfig fromJSI(jsi::Runtime& runtime, const jsi::Value& arg) {
       jsi::Object obj = arg.asObject(runtime);
       return NitroPreviewConfig(
-        JSIConverter<Language>::fromJSI(runtime, obj.getProperty(runtime, "language"))
+        JSIConverter<Language>::fromJSI(runtime, obj.getProperty(runtime, "language")),
+        JSIConverter<std::optional<bool>>::fromJSI(runtime, obj.getProperty(runtime, "videoAutoPlay"))
       );
     }
     static inline jsi::Value toJSI(jsi::Runtime& runtime, const NitroPreviewConfig& arg) {
       jsi::Object obj(runtime);
       obj.setProperty(runtime, "language", JSIConverter<Language>::toJSI(runtime, arg.language));
+      obj.setProperty(runtime, "videoAutoPlay", JSIConverter<std::optional<bool>>::toJSI(runtime, arg.videoAutoPlay));
       return obj;
     }
     static inline bool canConvert(jsi::Runtime& runtime, const jsi::Value& value) {
@@ -62,6 +66,7 @@ namespace margelo::nitro {
       }
       jsi::Object obj = value.getObject(runtime);
       if (!JSIConverter<Language>::canConvert(runtime, obj.getProperty(runtime, "language"))) return false;
+      if (!JSIConverter<std::optional<bool>>::canConvert(runtime, obj.getProperty(runtime, "videoAutoPlay"))) return false;
       return true;
     }
   };
diff --git a/src/index.ts b/src/index.ts
@@ -22,7 +22,7 @@ import {
   CameraResult,
   Language,
 } from './types'
-import { CropError } from './types/error'
+import { CropError, CameraError } from './types/error'
 
 const Picker = NitroModules.createHybridObject<MultipleImagePicker>(
   'MultipleImagePicker'
@@ -95,10 +95,11 @@ export async function openCropper(
 export function openPreview(
   media: MediaPreview[] | Result[],
   index: number = 0,
-  conf: PreviewConfig
+  conf?: PreviewConfig
 ): void {
   const config: PreviewConfig = {
-    language: conf.language ?? 'system',
+    language: conf?.language ?? 'system',
+    videoAutoPlay: true,
     ...conf,
   }
 
@@ -145,7 +146,7 @@ export async function openCamera(config?: CameraConfig): Promise<CameraResult> {
       (result: CameraResult) => {
         resolved(result)
       },
-      (error: number) => {
+      (error: CameraError) => {
         rejected(error)
       }
     )
diff --git a/src/types/error.ts b/src/types/error.ts
@@ -5,3 +5,7 @@ export enum MultipleImagePickerError {
 export enum CropError {
   INVALID_IMAGE = 0,
 }
+
+export enum CameraError {
+  INVALID_OUTPUT_FILE = 1,
+}
diff --git a/src/types/preview.ts b/src/types/preview.ts
@@ -4,6 +4,13 @@ import { ResultType } from './result'
 // PREVIEW
 export type NitroPreviewConfig = {
   language: Language
+
+  /**
+   * Auto play video when open preview.
+   *
+   * @platform iOS, Android
+   */
+  videoAutoPlay?: boolean
 }
 
 export interface PreviewConfig

Original file line number	Diff line number	Diff line change
`@@ -17,5 +17,6 @@ import com.margelo.nitro.core.*`
`17`	`17`	`@DoNotStrip`
`18`	`18`	`@Keep`
`19`	`19`	`data class NitroPreviewConfig(`
`20`		`- val language: Language`
	`20`	`+ val language: Language,`
	`21`	`+ val videoAutoPlay: Boolean?`
`21`	`22`	`)`