@momo-kits/native-kits 0.162.1-debug → 0.162.1-gif.1-debug

package/compose/src/androidMain/kotlin/vn/momo/kits/fpsmonitor/FPSOverlayView.kt

@@ -0,0 +1,99 @@
+package vn.momo.kits.fpsmonitor
+
+import android.content.Context
+import android.view.Gravity
+import android.view.MotionEvent
+import android.view.ViewGroup
+import android.widget.FrameLayout
+import kotlin.math.abs
+
+class FPSOverlayView(context: Context) : FrameLayout(context) {
+    private val graphView = FPSGraphView(context)
+    private var downX = 0f
+    private var downY = 0f
+    private var startX = 0f
+    private var startY = 0f
+    private var dragging = false
+    private val touchSlop = 8.dp
+
+    init {
+        addView(
+            graphView,
+            LayoutParams(
+                ViewGroup.LayoutParams.WRAP_CONTENT,
+                ViewGroup.LayoutParams.WRAP_CONTENT,
+            ),
+        )
+        isClickable = true
+        isFocusable = false
+        alpha = 0.92f
+    }
+
+    override fun onInterceptTouchEvent(ev: MotionEvent): Boolean = true
+
+    override fun onTouchEvent(event: MotionEvent): Boolean {
+        when (event.actionMasked) {
+            MotionEvent.ACTION_DOWN -> {
+                downX = event.rawX
+                downY = event.rawY
+                startX = x
+                startY = y
+                dragging = false
+                return true
+            }
+
+            MotionEvent.ACTION_MOVE -> {
+                val deltaX = event.rawX - downX
+                val deltaY = event.rawY - downY
+                if (!dragging && (abs(deltaX) > touchSlop || abs(deltaY) > touchSlop)) {
+                    dragging = true
+                }
+                if (dragging) moveTo(startX + deltaX, startY + deltaY)
+                return true
+            }
+
+            MotionEvent.ACTION_UP, MotionEvent.ACTION_CANCEL -> {
+                if (!dragging) performClick()
+                dragging = false
+                return true
+            }
+        }
+        return super.onTouchEvent(event)
+    }
+
+    override fun performClick(): Boolean {
+        super.performClick()
+        graphView.toggleCollapse()
+        requestLayout()
+        post { moveTo(x, y) }
+        return true
+    }
+
+    fun updateMetrics(metrics: FPSMetrics) {
+        graphView.updateMetrics(metrics)
+    }
+
+    private fun moveTo(nextX: Float, nextY: Float) {
+        val parentView = parent as? ViewGroup
+        val maxX = ((parentView?.width ?: resources.displayMetrics.widthPixels) - width).coerceAtLeast(0)
+        val maxY = ((parentView?.height ?: resources.displayMetrics.heightPixels) - height).coerceAtLeast(0)
+        x = nextX.coerceIn(0f, maxX.toFloat())
+        y = nextY.coerceIn(0f, maxY.toFloat())
+    }
+
+    companion object {
+        fun defaultLayoutParams(): FrameLayout.LayoutParams {
+            return FrameLayout.LayoutParams(
+                ViewGroup.LayoutParams.WRAP_CONTENT,
+                ViewGroup.LayoutParams.WRAP_CONTENT,
+                Gravity.START or Gravity.TOP,
+            ).apply {
+                leftMargin = 10
+                topMargin = 100
+            }
+        }
+    }
+
+    private val Int.dp: Float
+        get() = this * resources.displayMetrics.density
+}

package/compose/src/commonMain/kotlin/vn/momo/kits/components/Image.kt

@@ -3,10 +3,9 @@ package vn.momo.kits.components
 import androidx.compose.foundation.border
 import androidx.compose.foundation.layout.BoxWithConstraints
 import androidx.compose.runtime.Composable
-import androidx.compose.runtime.getValue
-import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.remember
-import androidx.compose.runtime.setValue
+import androidx.compose.runtime.rememberUpdatedState
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.ColorFilter
@@ -17,7 +16,9 @@ import androidx.compose.ui.semantics.contentDescription
 import androidx.compose.ui.semantics.semantics
 import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.unit.dp
-import coil3.compose.AsyncImage
+import com.github.panpf.sketch.AsyncImage as SketchAsyncImage
+import com.github.panpf.sketch.PainterState
+import com.github.panpf.sketch.rememberAsyncImageState
 import vn.momo.kits.application.IsShowBaseLineDebug
 import vn.momo.kits.const.AppTheme
 import vn.momo.kits.const.Colors
@@ -73,6 +74,11 @@ private fun getHostFromUrl(url: String): String? {
     }
 }
 
+private fun isGifUrl(url: String): Boolean {
+    val path = url.substringBefore('#').substringBefore('?')
+    return path.endsWith(".gif", ignoreCase = true)
+}
+
 // Optimized query parameter appending
 private fun appendSizeQueryParam(url: String, value: String): String {
     val fragmentIndex = url.indexOf('#')
@@ -95,12 +101,14 @@ fun Image(
     modifier: Modifier = Modifier,
     options: Options? = null,
     loading: Boolean = true,
+    onLoadingChanged: (Boolean) -> Unit = {},
 ) {
     val imageOptions = remember(options) {
         options ?: Options()
     }
 
-    var imageState by remember { mutableStateOf(ImageState.Loading) }
+    val asyncImageState = rememberAsyncImageState()
+    val currentOnLoadingChanged = rememberUpdatedState(onLoadingChanged)
     val density = LocalDensity.current
 
     BoxWithConstraints(
@@ -121,26 +129,34 @@ fun Image(
                         processedUrl
                     }
                 }
-                else -> source
+                else -> source.toString()
             }
         }
 
-        AsyncImage(
+        SketchAsyncImage(
             modifier = Modifier.matchParentSize(),
-            model = urlToLoad,
+            uri = urlToLoad,
+            state = asyncImageState,
             contentDescription = null,
             contentScale = imageOptions.contentScale,
             alignment = imageOptions.alignment,
             colorFilter = imageOptions.colorFilter,
             alpha = imageOptions.alpha,
-            onLoading = { imageState = ImageState.Loading },
-            onSuccess = { imageState = ImageState.Success },
-            onError = { imageState = ImageState.Error },
         )
 
-        when (imageState) {
-            ImageState.Loading -> if (loading) Skeleton()
-            ImageState.Error -> {
+        val isLoading = when (asyncImageState.painterState) {
+            is PainterState.Success,
+            is PainterState.Error -> false
+            else -> true
+        }
+
+        LaunchedEffect(isLoading) {
+            currentOnLoadingChanged.value(isLoading)
+        }
+
+        when (asyncImageState.painterState) {
+            is PainterState.Success -> {}
+            is PainterState.Error -> {
                 val theme = AppTheme.current
                 Icon(
                     source = "media_fail",
@@ -148,7 +164,7 @@ fun Image(
                     modifier = Modifier.align(Alignment.Center)
                 )
             }
-            ImageState.Success -> {}
+            else -> if (loading) Skeleton()
         }
     }
 }
@@ -156,7 +172,7 @@ fun Image(
 // Extracted URL processing logic for better performance
 private fun processImageUrl(url: String, maxWidth: androidx.compose.ui.unit.Dp, density: androidx.compose.ui.unit.Density): String {
     val host = getHostFromUrl(url)
-    return if (host != null && supportedDomains.contains(host)) {
+    return if (!isGifUrl(url) && host != null && supportedDomains.contains(host)) {
         val widthPx = with(density) { maxWidth.roundToPx() }
         val pixelRatio = density.density
         val pixelFitForWidth = widthPx * pixelRatio
@@ -185,4 +201,4 @@ fun Image(
         colorFilter = colorFilter,
         alpha = alpha,
     )
-}
+}

package/compose/src/commonMain/kotlin/vn/momo/kits/navigation/Navigation.kt

@@ -13,6 +13,7 @@ import vn.momo.kits.navigation.component.HeaderBackProps
 import vn.momo.kits.navigation.component.HeaderRight
 import vn.momo.kits.navigation.component.HeaderTitle
 import vn.momo.kits.navigation.component.HeaderType
+import vn.momo.kits.navigation.component.TitlePosition
 
 class Navigation(
     val id: Int = -1,
@@ -28,6 +29,7 @@ class Navigation(
         hiddenBack: Boolean? = null,
         headerBackProps: HeaderBackProps? = null,
         headerTitle: HeaderTitle? = null,
+        titlePosition: TitlePosition? = null,
         headerRight: HeaderRight? = null,
         headerType: HeaderType? = null,
         scrollData: ScrollData? = null,
@@ -43,6 +45,7 @@ class Navigation(
                 hiddenBack = hiddenBack ?: options.hiddenBack,
                 headerBackProps = headerBackProps ?: options.headerBackProps,
                 headerTitle = headerTitle ?: options.headerTitle,
+                titlePosition = titlePosition ?: options.titlePosition,
                 headerRight = headerRight ?: options.headerRight,
                 headerType = headerType ?: options.headerType,
                 scrollData = scrollData ?: options.scrollData,
@@ -77,6 +80,7 @@ data class NavigationOptions(
     val hiddenBack: Boolean = false,
     val headerBackProps: HeaderBackProps = HeaderBackProps(),
     val headerTitle: HeaderTitle = HeaderTitle.Default("Stack"),
+    val titlePosition: TitlePosition = TitlePosition.LEFT,
     val headerRight: HeaderRight = HeaderRight.Toolkit(),
     val headerType: HeaderType = HeaderType.Default(),
     val scrollData: ScrollData = ScrollData(),

package/compose/src/commonMain/kotlin/vn/momo/kits/navigation/StackScreen.kt

@@ -376,7 +376,7 @@ fun SearchAnimated(
     val minTopPadding = AppStatusBar.current
     val maxTopPadding = AppStatusBar.current + HEADER_HEIGHT.dp
     val minStartPadding = Spacing.M
-    val maxStartPadding = if (options.hiddenBack) Spacing.M else 52.dp
+    val maxStartPadding = if (options.hiddenBack) Spacing.M else 48.dp // button back: size + left +right = 28 + 12 + 8 = 48
     val minEndPadding = Spacing.M
     val maxEndPadding = headerRightWidthDp + if (options.headerRight is HeaderRight.None) Spacing.M else Spacing.M * 2
 

package/compose/src/commonMain/kotlin/vn/momo/kits/navigation/bottomtab/BottomTab.kt

@@ -9,9 +9,12 @@ import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.WindowInsets
+import androidx.compose.foundation.layout.asPaddingValues
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.ime
 import androidx.compose.foundation.layout.padding
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
@@ -29,7 +32,6 @@ import vn.momo.kits.navigation.LocalNavigator
 import vn.momo.kits.navigation.NavigationOptions
 import vn.momo.kits.navigation.StackScreen
 import vn.momo.kits.navigation.component.HeaderType
-import vn.momo.kits.platform.getScreenHeight
 
 private var bottomTabOptionItems : MutableList<NavigationOptions?> = mutableListOf()
 fun setBottomTabOption(index: Int, options: NavigationOptions){
@@ -51,6 +53,8 @@ fun BottomTab(
     val navigation = LocalNavigation.current
     val navigator = LocalNavigator.current
     val navController = rememberNavController()
+    val keyboardBottomPadding = WindowInsets.ime.asPaddingValues().calculateBottomPadding()
+    val shouldShowBottomTab = keyboardBottomPadding == 0.dp
 
     bottomTabOptionItems = items.mapIndexed { index, item ->
         item.options ?: NavigationOptions()
@@ -63,10 +67,16 @@ fun BottomTab(
         )
     }
 
-    Box(modifier = Modifier.fillMaxWidth().height(getScreenHeight()), contentAlignment = Alignment.BottomCenter) {
+    Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.BottomCenter) {
         Box(modifier = Modifier
             .fillMaxSize()
-            .padding(bottom = BOTTOM_TAB_BAR_HEIGHT.dp + AppNavigationBar.current)
+            .padding(
+                bottom = if (shouldShowBottomTab) {
+                    BOTTOM_TAB_BAR_HEIGHT.dp + AppNavigationBar.current
+                } else {
+                    0.dp
+                }
+            )
         ) {
             NavHost(
                 navController = navController,
@@ -125,20 +135,22 @@ fun BottomTab(
                 }
             }
         }
-        Column {
-            BottomTabBar(
-                items = items,
-                floatingButton = floatingButton,
-                navController = navController,
-                onTabSelected = {
-                    val currentRoute = navController.currentBackStackEntry?.destination?.route
-                    val targetRoute = "option$it"
-                    if (currentRoute != targetRoute){
-                        navController.navigate(targetRoute)
+        if (shouldShowBottomTab) {
+            Column {
+                BottomTabBar(
+                    items = items,
+                    floatingButton = floatingButton,
+                    navController = navController,
+                    onTabSelected = {
+                        val currentRoute = navController.currentBackStackEntry?.destination?.route
+                        val targetRoute = "option$it"
+                        if (currentRoute != targetRoute) {
+                            navController.navigate(targetRoute)
+                        }
                     }
-                }
-            )
-            Spacer(modifier = Modifier.fillMaxWidth().height(AppNavigationBar.current + Spacing.S).background(AppTheme.current.colors.background.surface))
+                )
+                Spacer(modifier = Modifier.fillMaxWidth().height(AppNavigationBar.current + Spacing.S).background(AppTheme.current.colors.background.surface))
+            }
         }
     }
 }

package/compose/src/commonMain/kotlin/vn/momo/kits/navigation/component/Header.kt

@@ -6,7 +6,6 @@ import androidx.compose.foundation.border
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.layout.RowScope
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
@@ -23,6 +22,7 @@ import androidx.compose.ui.graphics.Brush
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.layout.onGloballyPositioned
 import androidx.compose.ui.platform.LocalDensity
+import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import vn.momo.kits.components.Icon
@@ -44,6 +44,7 @@ import vn.momo.kits.navigation.getInputSearchType
 
 const val HEADER_HEIGHT = 52
 enum class InputSearchType { None, Header, Animated }
+enum class TitlePosition { LEFT, CENTER }
 
 @Composable
 fun Header(onBackHandler: (() -> Unit)? = null) {
@@ -76,6 +77,13 @@ fun Header(onBackHandler: (() -> Unit)? = null) {
         AppTheme.current.colors.background.surface
 
     if (options.headerType == HeaderType.None) return
+
+    val titlePosition = options.titlePosition
+    val titleColor = headerColor.tintIconColor
+        .copy(alpha = if (inputSearchType == InputSearchType.Animated) 1f - animatedAlpha else 1f)
+    // Centered title needs a full-width overlay to stay screen-centered, not boxed between back button and header right.
+    val centerTitle = titlePosition == TitlePosition.CENTER && options.headerTitle is HeaderTitle.Default
+
     Box(
         Modifier.height(AppStatusBar.current + HEADER_HEIGHT.dp)
             .fillMaxWidth()
@@ -101,20 +109,40 @@ fun Header(onBackHandler: (() -> Unit)? = null) {
                         onBackHandler?.invoke() ?: navigator.onBackSafe {  }
                     }
                 )
-                Spacer(Modifier.width(Spacing.M))
+                Spacer(Modifier.width(Spacing.S))
             }
 
-            HeaderContent(
-                options.headerTitle,
-                headerColor.tintIconColor
-                    .copy(alpha = if (inputSearchType == InputSearchType.Animated) 1f - animatedAlpha else 1f)
-            )
+            if (centerTitle) {
+                Spacer(Modifier.weight(1f))
+            } else {
+                HeaderContent(
+                    headerTitle = options.headerTitle,
+                    tintIconColor = titleColor,
+                    titlePosition = titlePosition,
+                    modifier = Modifier.weight(1f)
+                )
+            }
             Box(Modifier.onGloballyPositioned {
                 if(headerRightWidthPx.intValue != it.size.width) headerRightWidthPx.intValue = it.size.width
             }){
                 HeaderRight(options.headerRight, options.tintColor, headerColor)
             }
         }
+        if (centerTitle) {
+            Box(
+                modifier = Modifier.height(HEADER_HEIGHT.dp)
+                    .fillMaxWidth()
+                    .padding(horizontal = Spacing.M),
+                contentAlignment = Alignment.Center
+            ) {
+                HeaderContent(
+                    headerTitle = options.headerTitle,
+                    tintIconColor = titleColor,
+                    titlePosition = titlePosition,
+                    modifier = Modifier.fillMaxWidth()
+                )
+            }
+        }
         VerticalShadow(opacity)
     }
 }
@@ -140,15 +168,23 @@ private fun BackButton(borderColor: Color, backgroundButton: Color, tintIconColo
 }
 
 @Composable
-fun RowScope.HeaderContent(headerTitle: HeaderTitle, tintIconColor: Color){
+fun HeaderContent(
+    headerTitle: HeaderTitle,
+    tintIconColor: Color,
+    titlePosition: TitlePosition = TitlePosition.LEFT,
+    modifier: Modifier = Modifier,
+){
     Box(
-        Modifier.weight(1f)
+        modifier = modifier,
+        contentAlignment = if (titlePosition == TitlePosition.CENTER) Alignment.Center else Alignment.CenterStart
     ) {
         when (headerTitle){
             is HeaderTitle.Default -> {
                 HeaderTitle(
                     title = headerTitle.title,
-                    color = tintIconColor
+                    color = tintIconColor,
+                    modifier = Modifier.fillMaxWidth(fraction = if (titlePosition == TitlePosition.CENTER) 0.5f else 1f),
+                    textAlign = if (titlePosition == TitlePosition.CENTER) TextAlign.Center else TextAlign.Start
                 )
             }
             is HeaderTitle.Journey -> {}

package/compose/src/commonMain/kotlin/vn/momo/kits/navigation/component/HeaderTitle.kt

@@ -16,11 +16,13 @@ import vn.momo.kits.modifier.setAutomationId
 fun HeaderTitle(
     title: String = "",
     color: Color? = null,
+    modifier: Modifier = Modifier.fillMaxWidth(),
+    textAlign: TextAlign = TextAlign.Start,
 ) {
     Text(
-        modifier = Modifier.fillMaxWidth().zIndex(1f).setAutomationId("title_navigation_header"),
+        modifier = modifier.zIndex(1f).setAutomationId("title_navigation_header"),
         text = title,
-        textAlign = TextAlign.Start,
+        textAlign = textAlign,
         style = Typography.actionSBold.copy(
             fontSize = 15.sp,
             lineHeight = 22.sp,

package/gradle/libs.versions.toml

@@ -21,6 +21,7 @@ maxapi = "0.1.1"
 vanniktechMavenPublish = "0.34.0"
 kits = "0.159.1-beta.7"
 nativemaxapi = "0.0.6"
+sketch = "4.4.0"
 
 [libraries]
 ktor-client-core = { group = "io.ktor", name = "ktor-client-core", version.ref = "ktor-version" }
@@ -53,6 +54,10 @@ androidx-appcompat = { module = "androidx.appcompat:appcompat", version.ref = "a
 androidx-activity-compose = { module = "androidx.activity:activity-compose", version.ref = "androidx-activity" }
 material = { module = "com.google.android.material:material", version.ref = "material" }
 
+sketch-compose = { module = "io.github.panpf.sketch4:sketch-compose", version.ref = "sketch" }
+sketch-http = { module = "io.github.panpf.sketch4:sketch-http", version.ref = "sketch" }
+sketch-animated-core = { module = "io.github.panpf.sketch4:sketch-animated-core", version.ref = "sketch" }
+sketch-animated-gif = { module = "io.github.panpf.sketch4:sketch-animated-gif", version.ref = "sketch" }
 [plugins]
 jetbrains-kotlin-jvm = { id = "org.jetbrains.kotlin.jvm", version.ref = "kotlin" }
 jetbrains-kotlin-android = { id = "org.jetbrains.kotlin.android", version.ref = "kotlin" }

package/gradle.properties

@@ -18,7 +18,7 @@ kotlin.apple.xcodeCompatibility.nowarn=true
 name="ComposeKits"
 group=vn.momo.kits
 artifact.id=kits
-version=0.162.1
+version=0.162.1-beta.7
 
 repo=GitLab
 url=https://gitlab.mservice.com.vn/api/v4/projects/5400/packages/maven