@momo-kits/native-kits 0.163.1-beta.9 → 0.163.1-sp.1-debug

package/compose/src/commonMain/kotlin/vn/momo/kits/utils/Resources.kt

@@ -0,0 +1,55 @@
+package vn.momo.kits.utils
+
+import androidx.compose.runtime.*
+import org.jetbrains.compose.resources.DrawableResource
+import org.jetbrains.compose.resources.InternalResourceApi
+import org.jetbrains.compose.resources.ResourceItem
+import org.jetbrains.compose.resources.readResourceBytes
+@OptIn(InternalResourceApi::class)
+@Composable
+internal fun readJson(name: String): String {
+    val path = name.plus(".json")
+    val candidatePaths = listOf(
+        path,
+        "composeResources/vn.momo.compose.resources/$path",
+    )
+
+    val jsonContent by rememberState(path, { "" }) {
+        val cached = resourceCache.getOrPut(path) {
+            var content = ""
+            for (candidate in candidatePaths) {
+                try {
+                    content = readResourceBytes(candidate).decodeToString()
+                    break
+                } catch (_: Exception) {
+                    // try next candidate
+                }
+            }
+            ResourceCache.JSON(content)
+        } as ResourceCache.JSON
+
+        cached.json
+    }
+
+    return jsonContent
+}
+
+
+private val resourceCache = mutableMapOf<String, ResourceCache>()
+
+private sealed interface ResourceCache {
+    class JSON(val json: String) : ResourceCache
+}
+
+@Composable
+fun <T> rememberState(
+    key: Any,
+    getDefault: () -> T,
+    block: suspend () -> T
+): MutableState<T> {
+    val state = remember(key) { mutableStateOf(getDefault()) }
+    LaunchedEffect(key) {
+        state.value = block()
+    }
+    return state
+}

package/compose/src/commonMain/kotlin/vn/momo/kits/utils/Tracking.kt

@@ -0,0 +1,15 @@
+package vn.momo.kits.utils
+
+import androidx.compose.runtime.Composable
+import vn.momo.kits.application.LocalComponentInformation
+
+@Composable
+internal fun getComponentId(
+    componentName: String? = null,
+    accessibilityLabel: String? = null,
+): String {
+    val componentInformation = LocalComponentInformation.current
+    if (accessibilityLabel != null) return accessibilityLabel
+    if (componentInformation?.componentId != null) return componentInformation.componentId
+    return ""
+}

package/compose/src/commonMain/kotlin/vn/momo/kits/utils/Utils.kt

@@ -0,0 +1,105 @@
+package vn.momo.kits.utils
+
+import androidx.compose.foundation.layout.WindowInsets
+import androidx.compose.foundation.layout.asPaddingValues
+import androidx.compose.foundation.layout.systemBars
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.composed
+import androidx.compose.ui.draw.drawBehind
+import androidx.compose.ui.geometry.Offset
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.platform.LocalDensity
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.min
+import vn.momo.kits.const.AppNavigationBar
+import vn.momo.kits.const.AppStatusBar
+import vn.momo.kits.platform.getPlatformName
+import kotlin.math.abs
+
+
+internal fun Modifier.bottomBorder(strokeWidth: Dp, color: Color) = composed(
+    factory = {
+        val density = LocalDensity.current
+        val strokeWidthPx = density.run { strokeWidth.toPx() }
+        if (strokeWidth > 0.dp) {
+            Modifier.drawBehind {
+                val width = size.width
+                val height = size.height - strokeWidthPx / 2
+
+                drawLine(
+                    color = color,
+                    start = Offset(x = 0f, y = height),
+                    end = Offset(x = width, y = height),
+                    strokeWidth = strokeWidthPx
+                )
+            }
+        } else {
+            Modifier
+        }
+    }
+)
+
+fun <T> Boolean.ifTrue(trueCase: T, falseCase: T): T = if (this) trueCase else falseCase
+fun <T> String.ifNotNull(trueCase: T, falseCase: T): T =
+    if (this.isBlank()) falseCase else trueCase
+
+fun formatNumberToMoney(number: Long, currency: String = "đ"): String {
+    if (number == 0L) {
+        return "0$currency"
+    }
+    val array = mutableListOf<Char>()
+    var result = ""
+    var isNegative = false
+
+    if (number < 0) {
+        isNegative = true
+    }
+    val numberString = abs(number).toString() // Convert to Int to avoid decimal places
+    if (numberString.length < 3) {
+        return numberString + currency
+    }
+    var count = 0
+    for (i in numberString.length - 1 downTo 0) {
+        count += 1
+        array.add(numberString[i])
+        if (count == 3 && i >= 1) {
+            array.add('.')
+            count = 0
+        }
+    }
+
+    for (i in array.size - 1 downTo 0) {
+        result += array[i]
+    }
+
+    if (isNegative) {
+        result = "-$result"
+    }
+
+    return result + currency
+}
+
+@Composable
+fun getAppStatusBarHeight(): Dp {
+    return if (AppStatusBar.current == 0.dp) {
+        WindowInsets.systemBars.asPaddingValues().calculateTopPadding()
+    } else {
+        AppStatusBar.current
+    }
+}
+
+@Composable
+internal fun getNavigationBarHeight(): Dp {
+    return if (AppNavigationBar.current == 0.dp) {
+        val systemBottomPadding = WindowInsets.systemBars.asPaddingValues().calculateBottomPadding()
+        if (getPlatformName() == "iOS") {
+            min(systemBottomPadding, 21.dp)
+        } else {
+            systemBottomPadding
+        }
+    } else {
+        AppNavigationBar.current
+    }
+}

package/compose/src/iosMain/kotlin/vn/momo/kits/navigation/ScrollToTop.ios.kt

@@ -0,0 +1,32 @@
+package vn.momo.kits.navigation
+
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.DisposableEffect
+import platform.Foundation.NSNotification
+import platform.Foundation.NSNotificationCenter
+import platform.Foundation.NSOperationQueue
+import platform.darwin.NSObjectProtocol
+
+private const val STATUS_BAR_TAPPED_NOTIFICATION = "statusBarSelected"
+
+@Composable
+internal actual fun RegisterScrollToTop(callback: (() -> Unit)?) {
+    val maxApi = LocalMaxApi.current
+    DisposableEffect(callback) {
+        val token: NSObjectProtocol? = if (callback != null) {
+            NSNotificationCenter.defaultCenter.addObserverForName(
+                name = STATUS_BAR_TAPPED_NOTIFICATION,
+                `object` = null,
+                queue = NSOperationQueue.mainQueue,
+            ) { _: NSNotification? ->
+                runCatching { callback() }.onFailure {
+                    maxApi?.logFile("[ScrollToTop] callback threw: ${it.message}") {}
+
+                }
+            }
+        } else null
+        onDispose {
+            token?.let { NSNotificationCenter.defaultCenter.removeObserver(it) }
+        }
+    }
+}

package/compose/src/iosMain/kotlin/vn/momo/kits/platform/OsFontScale.ios.kt

@@ -0,0 +1,66 @@
+package vn.momo.kits.platform
+
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.CompositionLocalProvider
+import androidx.compose.runtime.DisposableEffect
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.ui.platform.LocalDensity
+import androidx.compose.ui.unit.Density
+import kotlinx.cinterop.ExperimentalForeignApi
+import kotlinx.cinterop.ObjCAction
+import platform.Foundation.NSNotification
+import platform.Foundation.NSNotificationCenter
+import platform.Foundation.NSSelectorFromString
+import platform.UIKit.UIContentSizeCategoryDidChangeNotification
+import platform.UIKit.UIFont
+import platform.UIKit.UIFontTextStyleBody
+import platform.darwin.NSObject
+
+// Compose MP iOS reads LocalDensity.fontScale once at ComposeUIViewController creation and does not
+// recompose it when UIContentSizeCategory changes (Android tracks Configuration.fontScale live). We
+// observe the notification and override LocalDensity.fontScale so scaleSize() recomposes live. The
+// formula matches the SwiftUI kit (UIFont body point size / 17) so both iOS surfaces scale alike.
+private const val DEFAULT_BODY_POINT_SIZE = 17.0
+
+private fun currentOsFontScale(): Float =
+    (UIFont.preferredFontForTextStyle(UIFontTextStyleBody).pointSize / DEFAULT_BODY_POINT_SIZE).toFloat()
+
+@OptIn(ExperimentalForeignApi::class)
+@Composable
+actual fun ProvideOsFontScale(content: @Composable () -> Unit) {
+    val osFontScale = remember { mutableStateOf(currentOsFontScale()) }
+
+    val listener = remember {
+        object : NSObject() {
+            @Suppress("unused")
+            @ObjCAction
+            fun contentSizeChanged(arg: NSNotification) {
+                osFontScale.value = currentOsFontScale()
+            }
+        }
+    }
+
+    DisposableEffect(Unit) {
+        NSNotificationCenter.defaultCenter.addObserver(
+            observer = listener,
+            selector = NSSelectorFromString(listener::contentSizeChanged.name + ":"),
+            name = UIContentSizeCategoryDidChangeNotification,
+            `object` = null,
+        )
+        onDispose {
+            NSNotificationCenter.defaultCenter.removeObserver(
+                observer = listener,
+                name = UIContentSizeCategoryDidChangeNotification,
+                `object` = null,
+            )
+        }
+    }
+
+    val density = LocalDensity.current
+    CompositionLocalProvider(
+        LocalDensity provides Density(density.density, osFontScale.value),
+    ) {
+        content()
+    }
+}

package/compose/src/iosMain/kotlin/vn/momo/kits/platform/Platform.ios.kt

@@ -0,0 +1,207 @@
+package vn.momo.kits.platform
+
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.WindowInsets
+import androidx.compose.foundation.layout.asPaddingValues
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.systemBars
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.CompositionLocalProvider
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.rememberUpdatedState
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.ExperimentalComposeUiApi
+import androidx.compose.ui.InternalComposeUiApi
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.backhandler.LocalCompatNavigationEventDispatcherOwner
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.NativePaint
+import androidx.compose.ui.graphics.toArgb
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.viewinterop.UIKitInteropProperties
+import androidx.compose.ui.viewinterop.UIKitView
+import cocoapods.lottie_ios.CompatibleAnimation
+import cocoapods.lottie_ios.CompatibleAnimationKeypath
+import cocoapods.lottie_ios.CompatibleAnimationView
+import kotlinx.cinterop.ExperimentalForeignApi
+import kotlinx.cinterop.get
+import kotlinx.cinterop.memScoped
+import androidx.navigationevent.NavigationEventDispatcher
+import androidx.navigationevent.NavigationEventDispatcherOwner
+import org.jetbrains.skia.FilterBlurMode
+import org.jetbrains.skia.MaskFilter
+import platform.Foundation.NSBundle
+import platform.UIKit.UIColor
+import platform.UIKit.UIDevice
+import platform.UIKit.UIScreen
+
+actual fun getPlatformName(): String = "iOS"
+
+@OptIn(ExperimentalForeignApi::class)
+@Composable
+actual fun getScreenDimensions(): ScreenDimension = memScoped {
+    val config = UIScreen.mainScreen.bounds.ptr[0]
+    return ScreenDimension(
+        config.size.width.toInt(),
+        config.size.height.toInt()
+    )
+}
+
+actual fun NativePaint.setMaskFilter(blurRadius: Float) {
+    this.maskFilter = MaskFilter.makeBlur(FilterBlurMode.NORMAL, blurRadius / 2, true)
+}
+
+@Composable
+actual fun getStatusBarHeight(): Dp {
+    return WindowInsets.systemBars.asPaddingValues().calculateTopPadding()
+}
+
+@Composable
+actual fun BackHandler(enabled: Boolean, onBack: () -> Unit) {
+}
+
+@OptIn(InternalComposeUiApi::class)
+@Composable
+actual fun ProvideNavigationEventDispatcherOwner(content: @Composable () -> Unit) {
+    val navigationEventDispatcherOwner = remember {
+        object : NavigationEventDispatcherOwner {
+            override val navigationEventDispatcher = NavigationEventDispatcher().apply {
+                isEnabled = false
+            }
+        }
+    }
+
+    CompositionLocalProvider(
+        LocalCompatNavigationEventDispatcherOwner provides navigationEventDispatcherOwner,
+        content = content
+    )
+}
+
+@Composable
+actual fun getScreenHeight(): Dp {
+    return getScreenDimensions().height.dp
+}
+
+actual fun getOSVersion(): OSVersion = OSVersion.IOS(
+    major = UIDevice.currentDevice.systemVersion.substringBefore(".").toIntOrNull() ?: 0
+)
+
+@OptIn(ExperimentalForeignApi::class, ExperimentalComposeUiApi::class)
+@Composable
+actual fun LottieAnimation(
+    path: String,
+    tintColor: Color?,
+    bgColor: Color?,
+    placedAsOverlay: Boolean,
+    iterations: Int,
+    isPlaying: Boolean,
+    onEvent: ((String) -> Unit)?,
+    modifier: Modifier,
+    useCompose: Boolean
+) {
+    if (useCompose) {
+        ComposeLottieAnimation(path, tintColor, bgColor, iterations, isPlaying, onEvent, modifier)
+        return
+    }
+
+    val loopCount = if (iterations == LottieIterateForever) -1.0 else iterations.toDouble()
+
+    var animation by remember { mutableStateOf<CompatibleAnimation?>(null) }
+    val animationView = remember { mutableStateOf<CompatibleAnimationView?>(null) }
+
+    LaunchedEffect(Unit) {
+        animation = CompatibleAnimation(name = "compose-resources/composeResources/vn.momo.compose.resources/".plus(path), subdirectory = null, NSBundle.mainBundle)
+    }
+
+    val currentOnEvent by rememberUpdatedState(onEvent)
+
+    LaunchedEffect(isPlaying) {
+        currentOnEvent?.invoke(if (isPlaying) LottieEvent.Start else LottieEvent.Pause)
+    }
+
+    LaunchedEffect(animationView.value, isPlaying) {
+        val view = animationView.value ?: return@LaunchedEffect
+        if (isPlaying) {
+            view.playWithCompletion(completion = { finished -> if (finished) currentOnEvent?.invoke(LottieEvent.Finish) })
+        } else {
+            view.pause()
+        }
+    }
+
+    when (val value = animation) {
+        null -> {
+            Box(modifier)
+        }
+
+        else -> {
+            Box(modifier) {
+                UIKitView(
+                    modifier = Modifier.fillMaxSize(),
+                    properties = UIKitInteropProperties(placedAsOverlay = placedAsOverlay),
+                    factory = {
+                        CompatibleAnimationView(value).apply {
+                            translatesAutoresizingMaskIntoConstraints = true
+
+                            setBackgroundColor(bgColor?.toUIColor() ?: UIColor.clearColor)
+
+                            setLoopAnimationCount(loopCount)
+                            setAnimationSpeed(1.0)
+
+                            if (tintColor != null) {
+                                val uiColor = tintColor.toUIColor()
+                                setColorValue(uiColor,
+                                    CompatibleAnimationKeypath("**.Fill 1.Color")
+                                )
+                                setColorValue(uiColor, CompatibleAnimationKeypath("**.Fill.Color"))
+                                setColorValue(uiColor, CompatibleAnimationKeypath("**.Color"))
+                                setColorValue(uiColor, CompatibleAnimationKeypath("**.Stroke 1.Color"))
+                                setColorValue(uiColor, CompatibleAnimationKeypath("**.Stroke.Color"))
+                            }
+
+                            animationView.value = this
+                        }
+                    },
+
+                    update = { view ->
+                        view.setBackgroundColor(bgColor?.toUIColor() ?: UIColor.clearColor)
+                        view.setLoopAnimationCount(loopCount)
+
+                        if (tintColor != null) {
+                            val uiColor = tintColor.toUIColor()
+
+                            view.setColorValue(uiColor, CompatibleAnimationKeypath("**.Fill 1.Color"))
+                            view.setColorValue(uiColor, CompatibleAnimationKeypath("**.Fill.Color"))
+                            view.setColorValue(uiColor, CompatibleAnimationKeypath("**.Color"))
+                            view.setColorValue(uiColor, CompatibleAnimationKeypath("**.Stroke 1.Color"))
+                            view.setColorValue(uiColor, CompatibleAnimationKeypath("**.Stroke.Color"))
+                        }
+                    }
+                )
+            }
+        }
+    }
+}
+
+fun Color.toUIColor(): UIColor {
+    val argb = this.toArgb()
+
+    val a = ((argb shr 24) and 0xFF) / 255.0
+    val r = ((argb shr 16) and 0xFF) / 255.0
+    val g = ((argb shr 8) and 0xFF) / 255.0
+    val b = (argb and 0xFF) / 255.0
+
+    return UIColor(
+        red = r,
+        green = g,
+        blue = b,
+        alpha = a
+    )
+}
+
+actual fun NativePaint.setColor(color: Color){
+    this.color = color.toArgb()
+}

package/gradle/libs.versions.toml

@@ -0,0 +1,69 @@
+[versions]
+android-compileSdk = "36"
+android-minSdk = "24"
+android-targetSdk = "36"
+ktor-version = "3.0.0-rc-1"
+coroutines = "1.9.0"
+kotlin = "2.3.10"
+kSerialize = "1.7.1"
+compose = "1.10.3"
+navigation-multiplatform = "2.9.2"
+coil3-multiplatform = "3.0.0-alpha10"
+androidGradlePlugin = "8.13.2"
+r8 = "8.9.35"
+kotlinx-datetime = "0.7.1"
+airbnb-lottie = "5.2.0"
+compottie = "2.1.0"
+androidx-activity = "1.9.1"
+androidx-appcompat = "1.7.0"
+material = "1.10.0"
+maxapi = "0.1.1"
+vanniktechMavenPublish = "0.34.0"
+kits = "0.159.1-beta.7"
+nativemaxapi = "0.0.6"
+gif-image = "0.1.2"
+
+[libraries]
+ktor-client-core = { group = "io.ktor", name = "ktor-client-core", version.ref = "ktor-version" }
+ktor-client-darwin = { group = "io.ktor", name = "ktor-client-darwin", version.ref = "ktor-version" }
+ktor-client-okhttp = { group = "io.ktor", name = "ktor-client-okhttp", version.ref = "ktor-version" }
+jetbrains-coroutines-android = { group = "org.jetbrains.kotlinx", name = "kotlinx-coroutines-android", version.ref = "coroutines" }
+jetbrains-coroutines-core = { group = "org.jetbrains.kotlinx", name = "kotlinx-coroutines-core", version.ref = "coroutines" }
+jetbrains-coroutines-test = { group = "org.jetbrains.kotlinx", name = "kotlinx-coroutines-test", version.ref = "coroutines" }
+jetbrains-serialization = { group = "org.jetbrains.kotlinx", name = "kotlinx-serialization", version.ref = "kSerialize" }
+jetbrains-serialization-json = { group = "org.jetbrains.kotlinx", name = "kotlinx-serialization-json", version.ref = "kSerialize" }
+kotlinx-datetime = { group = "org.jetbrains.kotlinx", name = "kotlinx-datetime", version.ref = "kotlinx-datetime" }
+compose-ui-backhandler = { module = "org.jetbrains.compose.ui:ui-backhandler", version.ref = "compose" }
+navigation-multiplatform = { module = "org.jetbrains.androidx.navigation:navigation-compose", version.ref = "navigation-multiplatform" }
+coil-multiplatform-core = { module = "io.coil-kt.coil3:coil-core", version.ref = "coil3-multiplatform" }
+coil-multiplatform-compose = { module = "io.coil-kt.coil3:coil-compose", version.ref = "coil3-multiplatform" }
+coil-multiplatform-network-ktor = { module = "io.coil-kt.coil3:coil-network-ktor3", version.ref = "coil3-multiplatform" }
+r8 = { module = "com.android.tools:r8", version.ref = "r8" }
+airbnb-lottie = { group = "com.airbnb.android", name = "lottie-compose", version.ref = "airbnb-lottie" }
+# AI-GENERATED START
+# Depend on compottie-core (not the `compottie` umbrella). The umbrella drags in the
+# separate `keight` umbrella artifact, which collides with `keight-core` on the
+# `findRoot__at__ScriptRuntime` symbol (duplicate symbol at the iOS `ld` link of
+# shared.framework). compottie-core pulls only `keight-core` (which declares
+# keight.js.JsAny, so the earlier unlinked-symbol error stays fixed too).
+compottie = { module = "io.github.alexzhirkevich:compottie-core", version.ref = "compottie" }
+# AI-GENERATED END
+native-max-api = { group = "vn.momo.maxapi", name = "NativeMaxApi", version.ref = "nativemaxapi" }
+kits = { module = "vn.momo.kits:kits", version.ref = "kits" }
+androidx-appcompat = { module = "androidx.appcompat:appcompat", version.ref = "androidx-appcompat" }
+androidx-activity-compose = { module = "androidx.activity:activity-compose", version.ref = "androidx-activity" }
+material = { module = "com.google.android.material:material", version.ref = "material" }
+
+gif-image = { module = "vn.momo.kits:gif-image", version.ref = "gif-image" }
+[plugins]
+jetbrains-kotlin-jvm = { id = "org.jetbrains.kotlin.jvm", version.ref = "kotlin" }
+jetbrains-kotlin-android = { id = "org.jetbrains.kotlin.android", version.ref = "kotlin" }
+jetbrains-kotlin-parcelize = { id = "org.jetbrains.kotlin.plugin.parcelize", version.ref = "kotlin" }
+jetbrains-kotlin-cocoapods = { id = "org.jetbrains.kotlin.native.cocoapods", version.ref = "kotlin" }
+jetbrains-kotlin-multiplatform = { id = "org.jetbrains.kotlin.multiplatform", version.ref = "kotlin" }
+jetbrains-kotlin-serialization = { id = "org.jetbrains.kotlin.plugin.serialization", version.ref = "kotlin" }
+kotlin-compose-compiler = { id = "org.jetbrains.kotlin.plugin.compose", version.ref = "kotlin" }
+compose = { id = "org.jetbrains.compose", version.ref = "compose" }
+android-library = { id = "com.android.library", version.ref = "androidGradlePlugin" }
+android-application = { id = "com.android.application", version.ref = "androidGradlePlugin" }
+vanniktech-mavenPublish = { id = "com.vanniktech.maven.publish", version.ref = "vanniktechMavenPublish" }

package/gradle/wrapper/gradle-wrapper.properties

@@ -0,0 +1,8 @@
+#Thu Jul 31 17:05:40 ICT 2025
+distributionBase=GRADLE_USER_HOME
+distributionPath=wrapper/dists
+distributionUrl=https\://services.gradle.org/distributions/gradle-8.14.1-bin.zip
+networkTimeout=10000
+validateDistributionUrl=true
+zipStoreBase=GRADLE_USER_HOME
+zipStorePath=wrapper/dists

package/gradle.properties

@@ -0,0 +1,26 @@
+#Kotlin
+kotlin.code.style=official
+kotlin.daemon.jvmargs=-Xmx6144M
+
+#Gradle
+org.gradle.jvmargs=-Xmx8192M -Dfile.encoding=UTF-8
+org.gradle.configuration-cache=false
+org.gradle.caching=true
+
+#Android
+android.nonTransitiveRClass=true
+android.useAndroidX=true
+
+#KMP
+kotlin.apple.xcodeCompatibility.nowarn=true
+
+# Publishing
+name="ComposeKits"
+group=vn.momo.kits
+artifact.id=kits
+version=0.163.1-sp.1
+
+repo=GitLab
+url=https://gitlab.mservice.com.vn/api/v4/projects/5400/packages/maven
+gitlab.user=upload_packages
+gitlab.password=gldt-CtTSGmzz57sUL9cnjdaQ