Merge pull request #249 from DanicMa/custom-android-chrome-client

Custom android chrome client (allowing for file selection)
KevinnZou · Nov 5, 2024 · 3e95ced · 3e95ced
2 parents ab2ea16 + 1ee4041
commit 3e95ced
Show file tree

Hide file tree

Showing 10 changed files with 272 additions and 0 deletions.
diff --git a/sample/shared/src/androidMain/kotlin/com/kevinnzou/sample/FileChooseWebViewSample.android.kt b/sample/shared/src/androidMain/kotlin/com/kevinnzou/sample/FileChooseWebViewSample.android.kt
@@ -0,0 +1,121 @@
+package com.kevinnzou.sample
+
+import android.app.Activity
+import android.content.ActivityNotFoundException
+import android.content.Intent
+import android.net.Uri
+import android.webkit.ValueCallback
+import android.webkit.WebView
+import android.widget.Toast
+import androidx.activity.compose.rememberLauncherForActivityResult
+import androidx.activity.result.ActivityResult
+import androidx.activity.result.contract.ActivityResultContracts
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import com.multiplatform.webview.web.AccompanistWebChromeClient
+import com.multiplatform.webview.web.PlatformWebViewParams
+
+@Composable
+actual fun getPlatformWebViewParams(): PlatformWebViewParams? {
+    var fileChooserIntent by remember { mutableStateOf<Intent?>(null) }
+
+    val webViewChromeClient =
+        remember {
+            FileChoosableWebChromeClient(onShowFilePicker = { fileChooserIntent = it })
+        }
+
+    val launcher =
+        rememberLauncherForActivityResult(
+            contract = ActivityResultContracts.StartActivityForResult(),
+        ) { result: ActivityResult ->
+            if (result.resultCode != Activity.RESULT_OK) {
+                Toast.makeText(
+                    webViewChromeClient.context,
+                    "resultCode is not RESULT_OK (value: ${result.resultCode})",
+                    Toast.LENGTH_SHORT,
+                ).show()
+                webViewChromeClient.cancelFileChooser()
+                return@rememberLauncherForActivityResult
+            }
+
+            val intent = result.data
+            if (intent == null) {
+                Toast.makeText(
+                    webViewChromeClient.context,
+                    "result intent is null",
+                    Toast.LENGTH_SHORT,
+                ).show()
+                webViewChromeClient.cancelFileChooser()
+                return@rememberLauncherForActivityResult
+            }
+
+            val singleFile: Uri? = intent.data
+            val multiFiles: List<Uri>? = intent.getUris()
+
+            when {
+                singleFile != null -> webViewChromeClient.onReceiveFiles(arrayOf(singleFile))
+                multiFiles != null -> webViewChromeClient.onReceiveFiles(multiFiles.toTypedArray())
+                else -> {
+                    Toast.makeText(
+                        webViewChromeClient.context,
+                        "data and clipData is null",
+                        Toast.LENGTH_SHORT,
+                    ).show()
+                    webViewChromeClient.cancelFileChooser()
+                }
+            }
+        }
+
+    LaunchedEffect(key1 = fileChooserIntent) {
+        if (fileChooserIntent != null) {
+            try {
+                launcher.launch(fileChooserIntent)
+            } catch (e: ActivityNotFoundException) {
+                webViewChromeClient.cancelFileChooser()
+            }
+        }
+    }
+
+    return PlatformWebViewParams(chromeClient = webViewChromeClient)
+}
+
+private fun Intent.getUris(): List<Uri>? {
+    val clipData = clipData ?: return null
+    return (0 until clipData.itemCount).map { clipData.getItemAt(it).uri }
+}
+
+private class FileChoosableWebChromeClient(
+    private val onShowFilePicker: (Intent) -> Unit,
+) : AccompanistWebChromeClient() {
+    private var filePathCallback: ValueCallback<Array<Uri>>? = null
+
+    override fun onShowFileChooser(
+        webView: WebView?,
+        filePathCallback: ValueCallback<Array<Uri>>?,
+        fileChooserParams: FileChooserParams?,
+    ): Boolean {
+        this.filePathCallback = filePathCallback
+        val filePickerIntent = fileChooserParams?.createIntent()
+
+        if (filePickerIntent == null) {
+            cancelFileChooser()
+        } else {
+            onShowFilePicker(filePickerIntent)
+        }
+        return true
+    }
+
+    fun onReceiveFiles(uris: Array<Uri>) {
+        filePathCallback?.onReceiveValue(uris)
+        filePathCallback = null
+    }
+
+    fun cancelFileChooser() {
+        filePathCallback?.onReceiveValue(null)
+        filePathCallback = null
+    }
+}
diff --git a/sample/shared/src/commonMain/kotlin/com/kevinnzou/sample/FileChooseWebViewSample.kt b/sample/shared/src/commonMain/kotlin/com/kevinnzou/sample/FileChooseWebViewSample.kt
@@ -0,0 +1,73 @@
+package com.kevinnzou.sample
+
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.material.Icon
+import androidx.compose.material.IconButton
+import androidx.compose.material.MaterialTheme
+import androidx.compose.material.Text
+import androidx.compose.material.TopAppBar
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.ArrowBack
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.ui.Modifier
+import androidx.navigation.NavHostController
+import com.multiplatform.webview.util.KLogSeverity
+import com.multiplatform.webview.web.PlatformWebViewParams
+import com.multiplatform.webview.web.WebView
+import com.multiplatform.webview.web.rememberWebViewNavigator
+import com.multiplatform.webview.web.rememberWebViewStateWithHTMLFile
+
+/**
+ * Created By briandr97 2024/8/8
+ *
+ * Basic Sample for choose file in webview
+ */
+@Composable
+internal fun FileChooseWebViewSample(navHostController: NavHostController? = null) {
+    val webViewState = rememberWebViewStateWithHTMLFile(fileName = "fileChoose.html")
+    val webViewNavigator = rememberWebViewNavigator()
+    LaunchedEffect(Unit) {
+        webViewState.webSettings.apply {
+            zoomLevel = 1.0
+            logSeverity = KLogSeverity.Debug
+            androidWebSettings.apply {
+                isAlgorithmicDarkeningAllowed = true
+                safeBrowsingEnabled = true
+                allowFileAccess = false
+            }
+        }
+    }
+    MaterialTheme {
+        Column {
+            TopAppBar(
+                title = { Text(text = "Html Sample") },
+                navigationIcon = {
+                    IconButton(onClick = {
+                        navHostController?.popBackStack()
+                    }) {
+                        Icon(
+                            imageVector = Icons.Default.ArrowBack,
+                            contentDescription = "Back",
+                        )
+                    }
+                },
+            )
+
+            Box(Modifier.fillMaxSize()) {
+                WebView(
+                    state = webViewState,
+                    modifier = Modifier.fillMaxSize(),
+                    captureBackPresses = false,
+                    navigator = webViewNavigator,
+                    platformWebViewParams = getPlatformWebViewParams(),
+                )
+            }
+        }
+    }
+}
+
+@Composable
+expect fun getPlatformWebViewParams(): PlatformWebViewParams?
diff --git a/sample/shared/src/commonMain/kotlin/com/kevinnzou/sample/WebViewApp.kt b/sample/shared/src/commonMain/kotlin/com/kevinnzou/sample/WebViewApp.kt
@@ -50,6 +50,9 @@ internal fun WebViewApp() {
         composable("intercept") {
             InterceptRequestSample(controller)
         }
+        composable("file") {
+            FileChooseWebViewSample(controller)
+        }
     }
 }
 
@@ -83,6 +86,12 @@ fun MainScreen(controller: NavController) {
         }) {
             Text("Intercept Request Sample", fontSize = 18.sp)
         }
+        Spacer(modifier = Modifier.height(20.dp))
+        Button(onClick = {
+            controller.navigate("file")
+        }) {
+            Text("File Choose Sample", fontSize = 18.sp)
+        }
     }
 }
 

diff --git a/sample/shared/src/commonMain/resources/assets/fileChoose.html b/sample/shared/src/commonMain/resources/assets/fileChoose.html
@@ -0,0 +1,25 @@
+<html>
+<head>
+    <header>
+        <meta name='viewport'
+              content='width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no'>
+    </header>
+    <link rel="stylesheet" type="text/css" href="styles.css">
+    <title>Compose WebView Multiplatform</title>
+</head>
+<body>
+<h1>Compose WebView Multiplatform</h1>
+<div>
+    <text>image: </text>
+    <input type="file" multiple name="image" id="imageChoose" accept="image/*">
+</div>
+<div>
+    <text>video: </text>
+    <input type="file" multiple name="video" id="videoChoose" accept="video/*">
+</div>
+<div>
+    <text>audio: </text>
+    <input type="file" multiple name="audio" id="audioChoose" accept="audio/*">
+</div>
+</body>
+</html>
diff --git a/sample/shared/src/desktopMain/kotlin/com/kevinnzou/sample/FileChooseWebViewSample.desktop.kt b/sample/shared/src/desktopMain/kotlin/com/kevinnzou/sample/FileChooseWebViewSample.desktop.kt
@@ -0,0 +1,7 @@
+package com.kevinnzou.sample
+
+import androidx.compose.runtime.Composable
+import com.multiplatform.webview.web.PlatformWebViewParams
+
+@Composable
+actual fun getPlatformWebViewParams(): PlatformWebViewParams? = null
diff --git a/sample/shared/src/iosMain/kotlin/com/kevinnzou/sample/FileChooseWebViewSample.ios.kt b/sample/shared/src/iosMain/kotlin/com/kevinnzou/sample/FileChooseWebViewSample.ios.kt
@@ -0,0 +1,7 @@
+package com.kevinnzou.sample
+
+import androidx.compose.runtime.Composable
+import com.multiplatform.webview.web.PlatformWebViewParams
+
+@Composable
+actual fun getPlatformWebViewParams(): PlatformWebViewParams? = null
diff --git a/webview/src/androidMain/kotlin/com/multiplatform/webview/web/WebView.android.kt b/webview/src/androidMain/kotlin/com/multiplatform/webview/web/WebView.android.kt
@@ -2,6 +2,8 @@ package com.multiplatform.webview.web
 
 import android.content.Context
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.Immutable
+import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
 import com.multiplatform.webview.jsbridge.WebViewJsBridge
 
@@ -17,6 +19,7 @@ actual fun ActualWebView(
     webViewJsBridge: WebViewJsBridge?,
     onCreated: (NativeWebView) -> Unit,
     onDispose: (NativeWebView) -> Unit,
+    platformWebViewParams: PlatformWebViewParams?,
     factory: (WebViewFactoryParam) -> NativeWebView,
 ) {
     AccompanistWebView(
@@ -27,6 +30,8 @@ actual fun ActualWebView(
         webViewJsBridge,
         onCreated = onCreated,
         onDispose = onDispose,
+        client = platformWebViewParams?.client ?: remember { AccompanistWebViewClient() },
+        chromeClient = platformWebViewParams?.chromeClient ?: remember { AccompanistWebChromeClient() },
         factory = { factory(WebViewFactoryParam(it)) },
     )
 }
@@ -36,3 +41,9 @@ actual data class WebViewFactoryParam(val context: Context)
 
 /** Default WebView factory for Android. */
 actual fun defaultWebViewFactory(param: WebViewFactoryParam) = android.webkit.WebView(param.context)
+
+@Immutable
+actual data class PlatformWebViewParams(
+    val client: AccompanistWebViewClient? = null,
+    val chromeClient: AccompanistWebChromeClient? = null,
+)
diff --git a/webview/src/commonMain/kotlin/com/multiplatform/webview/web/WebView.kt b/webview/src/commonMain/kotlin/com/multiplatform/webview/web/WebView.kt
@@ -39,6 +39,7 @@ fun WebView(
     webViewJsBridge: WebViewJsBridge? = null,
     onCreated: () -> Unit = {},
     onDispose: () -> Unit = {},
+    platformWebViewParams: PlatformWebViewParams? = null,
 ) {
     WebView(
         state = state,
@@ -48,6 +49,7 @@ fun WebView(
         webViewJsBridge = webViewJsBridge,
         onCreated = { _ -> onCreated() },
         onDispose = { _ -> onDispose() },
+        platformWebViewParams = platformWebViewParams,
     )
 }
 
@@ -74,6 +76,7 @@ fun WebView(
     webViewJsBridge: WebViewJsBridge? = null,
     onCreated: (NativeWebView) -> Unit = {},
     onDispose: (NativeWebView) -> Unit = {},
+    platformWebViewParams: PlatformWebViewParams? = null,
     factory: ((WebViewFactoryParam) -> NativeWebView)? = null,
 ) {
     val webView = state.webView
@@ -154,6 +157,7 @@ fun WebView(
         webViewJsBridge = webViewJsBridge,
         onCreated = onCreated,
         onDispose = onDispose,
+        platformWebViewParams = platformWebViewParams,
         factory = factory ?: ::defaultWebViewFactory,
     )
 
@@ -179,6 +183,14 @@ fun WebView(
  */
 expect class WebViewFactoryParam
 
+/**
+ * Platform specific parameters given to the WebView composable function:
+ *   - On Android, this contains an optional `AccompanistWebViewClient` and `AccompanistWebChromeClient`
+ *   - On iOS, this is currently unused
+ *   - On Desktop, this is currently unused
+ */
+expect class PlatformWebViewParams
+
 /**
  * Platform specific default WebView factory function. This can be called from
  * a custom factory function for any platforms that don't need to be customized.
@@ -197,5 +209,6 @@ expect fun ActualWebView(
     webViewJsBridge: WebViewJsBridge? = null,
     onCreated: (NativeWebView) -> Unit = {},
     onDispose: (NativeWebView) -> Unit = {},
+    platformWebViewParams: PlatformWebViewParams? = null,
     factory: (WebViewFactoryParam) -> NativeWebView = ::defaultWebViewFactory,
 )
diff --git a/webview/src/desktopMain/kotlin/com/multiplatform/webview/web/WebView.desktop.kt b/webview/src/desktopMain/kotlin/com/multiplatform/webview/web/WebView.desktop.kt
@@ -24,6 +24,7 @@ actual fun ActualWebView(
     webViewJsBridge: WebViewJsBridge?,
     onCreated: (NativeWebView) -> Unit,
     onDispose: (NativeWebView) -> Unit,
+    platformWebViewParams: PlatformWebViewParams?,
     factory: (WebViewFactoryParam) -> NativeWebView,
 ) {
     DesktopWebView(
@@ -54,6 +55,8 @@ actual class WebViewFactoryParam(
     val requestContext: CefRequestContext get() = createModifiedRequestContext(webSettings)
 }
 
+actual class PlatformWebViewParams
+
 /** Default WebView factory for Desktop. */
 actual fun defaultWebViewFactory(param: WebViewFactoryParam): NativeWebView =
     when (val content = param.state.content) {

diff --git a/webview/src/iosMain/kotlin/com/multiplatform/webview/web/WebView.ios.kt b/webview/src/iosMain/kotlin/com/multiplatform/webview/web/WebView.ios.kt
@@ -30,6 +30,7 @@ actual fun ActualWebView(
     webViewJsBridge: WebViewJsBridge?,
     onCreated: (NativeWebView) -> Unit,
     onDispose: (NativeWebView) -> Unit,
+    platformWebViewParams: PlatformWebViewParams?,
     factory: (WebViewFactoryParam) -> NativeWebView,
 ) {
     IOSWebView(
@@ -47,6 +48,8 @@ actual fun ActualWebView(
 /** iOS WebView factory parameters: configuration created from WebSettings. */
 actual data class WebViewFactoryParam(val config: WKWebViewConfiguration)
 
+actual class PlatformWebViewParams
+
 /** Default WebView factory for iOS. */
 @OptIn(ExperimentalForeignApi::class)
 actual fun defaultWebViewFactory(param: WebViewFactoryParam) = WKWebView(frame = CGRectZero.readValue(), configuration = param.config)