Update Jetpack Compose to 2024.09.00 (#39)

* Update Compose dependencies
* Restore look-and-feel of SeekBar
* Use new ripple API
* Remove obsolete workaround
* Fix indentation
* Rework IconButton
* Switch to androidx.lifecycle.compose.LocalLifecycleOwner
* Update changelog
* Update to AGP 8.5.2
* Fix text alignment in SeekButton
* Support API level 21

CHANGELOG.md

@@ -9,6 +9,12 @@
 > - 🏠 Internal
 > - 💅 Polish
 
+## Unreleased
+
+* 💥 Updated to Jetpack Compose version 1.7.0 ([BOM](https://developer.android.com/jetpack/compose/bom) 2024.09.00).
+* 💥 Changed `colors` parameter in `IconButton` and `LiveButton` to be an `IconButtonColors`.
+* 🚀 Added support for Android Lollipop (API 21), to align with the THEOplayer Android SDK.
+
 ## v1.8.0 (2024-09-06)
 
 * 🚀 Added support for THEOplayer 8.0.

app/build.gradle.kts

@@ -9,7 +9,7 @@ android {
 
     defaultConfig {
         applicationId = "com.theoplayer.android.ui.demo"
-        minSdk = 24
+        minSdk = 21
         targetSdk = 33
         versionCode = 1
         versionName = "1.0"
@@ -45,7 +45,7 @@ android {
         compose = true
     }
     composeOptions {
-        kotlinCompilerExtensionVersion = "1.4.3"
+        kotlinCompilerExtensionVersion = "1.5.15"
     }
     packaging {
         resources {
@@ -58,7 +58,7 @@ dependencies {
     implementation(platform(libs.androidx.compose.bom))
 
     implementation(libs.androidx.ktx)
-    implementation(libs.androidx.lifecycle.runtime)
+    implementation(libs.androidx.lifecycle.compose)
     implementation(libs.androidx.activity.compose)
     implementation(libs.androidx.appcompat)
     implementation(libs.androidx.compose.ui.ui)

gradle/libs.versions.toml

@@ -1,14 +1,14 @@
 [versions]
-gradle = "8.3.2"
-kotlin-gradle-plugin = "1.8.10"
+gradle = "8.5.2"
+kotlin-gradle-plugin = "1.9.25"
 ktx = "1.13.1"
-lifecycle-runtime = "2.8.4"
-activity-compose = "1.9.1"
+lifecycle-compose = "2.8.5"
+activity-compose = "1.9.2"
 appcompat = "1.7.0"
-compose-bom = "2024.06.00"
+compose-bom = "2024.09.00"
 junit4 = "4.13.2"
 playServices-castFramework = "21.5.0"
-ui-test-junit4 = "1.6.8" # ...not in BOM for some reason?
+ui-test-junit4 = "1.7.0" # ...not in BOM for some reason?
 androidx-junit = "1.2.1"
 androidx-espresso = "3.6.1"
 androidx-mediarouter = "1.7.0"
@@ -17,7 +17,7 @@ theoplayer = "7.11.0"
 
 [libraries]
 androidx-ktx = { group = "androidx.core", name = "core-ktx", version.ref = "ktx" }
-androidx-lifecycle-runtime = { group = "androidx.lifecycle", name = "lifecycle-runtime-ktx", version.ref = "lifecycle-runtime" }
+androidx-lifecycle-compose = { group = "androidx.lifecycle", name = "lifecycle-runtime-compose", version.ref = "lifecycle-compose" }
 androidx-activity-compose = { group = "androidx.activity", name = "activity-compose", version.ref = "activity-compose" }
 androidx-appcompat = { group = "androidx.appcompat", name = "appcompat", version.ref = "appcompat" }
 androidx-compose-bom = { group = "androidx.compose", name = "compose-bom", version.ref = "compose-bom" }

gradle/wrapper/gradle-wrapper.properties

@@ -1,6 +1,6 @@
 #Mon Nov 20 16:01:06 CET 2023
 distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
-distributionUrl=https\://services.gradle.org/distributions/gradle-8.4-bin.zip
+distributionUrl=https\://services.gradle.org/distributions/gradle-8.7-bin.zip
 zipStoreBase=GRADLE_USER_HOME
 zipStorePath=wrapper/dists

ui/build.gradle.kts

@@ -23,7 +23,7 @@ android {
     compileSdk = 34
 
     defaultConfig {
-        minSdk = 24
+        minSdk = 21
 
         testInstrumentationRunner = "androidx.test.runner.AndroidJUnitRunner"
         vectorDrawables {
@@ -51,7 +51,7 @@ android {
         compose = true
     }
     composeOptions {
-        kotlinCompilerExtensionVersion = "1.4.3"
+        kotlinCompilerExtensionVersion = "1.5.15"
     }
     packaging {
         resources {
@@ -71,7 +71,7 @@ dependencies {
     implementation(platform(libs.androidx.compose.bom))
 
     implementation(libs.androidx.ktx)
-    implementation(libs.androidx.lifecycle.runtime)
+    implementation(libs.androidx.lifecycle.compose)
     implementation(libs.androidx.activity.compose)
     implementation(libs.androidx.appcompat)
     implementation(libs.androidx.compose.ui.ui)

ui/src/main/java/com/theoplayer/android/ui/ErrorDisplay.kt

@@ -25,9 +25,7 @@ import androidx.compose.ui.unit.dp
 fun ErrorDisplay(
     modifier: Modifier = Modifier,
 ) {
-    val error = Player.current?.error
-
-    error?.let { it ->
+    Player.current?.error?.let { error ->
         Row(
             modifier = modifier,
             horizontalArrangement = Arrangement.spacedBy(8.dp)
@@ -50,7 +48,7 @@ fun ErrorDisplay(
                     )
                 }
                 Text(
-                    text = "${it.message}"
+                    text = "${error.message}"
                 )
             }
         }

ui/src/main/java/com/theoplayer/android/ui/IconButton.kt

@@ -1,19 +1,29 @@
 package com.theoplayer.android.ui
 
+import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
 import androidx.compose.foundation.interaction.Interaction
 import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.defaultMinSize
+import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.material3.ButtonColors
-import androidx.compose.material3.ButtonDefaults
-import androidx.compose.material3.IconButton
+import androidx.compose.material3.IconButtonColors
+import androidx.compose.material3.IconButtonDefaults
 import androidx.compose.material3.LocalContentColor
-import androidx.compose.material3.TextButton
+import androidx.compose.material3.minimumInteractiveComponentSize
+import androidx.compose.material3.ripple
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.runtime.remember
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.semantics.Role
 import androidx.compose.ui.unit.dp
 
 /**
@@ -40,57 +50,46 @@ fun IconButton(
     onClick: () -> Unit,
     modifier: Modifier = Modifier,
     enabled: Boolean = true,
-    colors: ButtonColors = IconButtonDefaults.iconButtonColors(),
+    colors: IconButtonColors = IconButtonDefaults.iconButtonColors(),
     contentPadding: PaddingValues = PaddingValues(0.dp),
     interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
     content: @Composable () -> Unit
 ) {
-    TextButton(
+    Box(
         modifier = modifier
+            .minimumInteractiveComponentSize()
             .defaultMinSize(
                 minWidth = IconButtonSize,
                 minHeight = IconButtonSize
+            )
+            .padding(contentPadding)
+            .clip(CircleShape)
+            .background(color = colors.containerColor(enabled))
+            .clickable(
+                onClick = onClick,
+                enabled = enabled,
+                role = Role.Button,
+                interactionSource = interactionSource,
+                indication = ripple(bounded = false)
             ),
-        shape = androidx.compose.material3.IconButtonDefaults.filledShape,
-        enabled = enabled,
-        colors = colors,
-        contentPadding = contentPadding,
-        interactionSource = interactionSource,
-        onClick = onClick,
-        content = { content() }
-    )
+        contentAlignment = Alignment.Center
+    ) {
+        val contentColor = colors.contentColor(enabled)
+        CompositionLocalProvider(LocalContentColor provides contentColor, content = content)
+    }
 }
 
-private const val DisabledIconOpacity = 0.38f
 private val IconButtonSize = 40.dp
 
-/**
- * Contains the default values used by icon buttons.
- */
-object IconButtonDefaults {
-    /**
-     * Creates a [ButtonColors] that represents the default colors used in a [IconButton].
-     *
-     * Equivalent to [androidx.compose.material3.IconButtonDefaults.iconButtonColors],
-     * but as [ButtonColors] instead of [androidx.compose.material3.IconButtonColors].
-     *
-     * @param containerColor the container color of this icon button when enabled.
-     * @param contentColor the content color of this icon button when enabled.
-     * @param disabledContainerColor the container color of this icon button when not enabled.
-     * @param disabledContentColor the content color of this icon button when not enabled.
-     */
-    @Composable
-    fun iconButtonColors(
-        containerColor: Color = Color.Transparent,
-        contentColor: Color = LocalContentColor.current,
-        disabledContainerColor: Color = Color.Transparent,
-        disabledContentColor: Color = contentColor.copy(alpha = DisabledIconOpacity)
-    ): ButtonColors {
-        return ButtonDefaults.textButtonColors(
-            containerColor = containerColor,
-            contentColor = contentColor,
-            disabledContainerColor = disabledContainerColor,
-            disabledContentColor = disabledContentColor
-        )
-    }
-}
+private fun IconButtonColors.containerColor(enabled: Boolean): Color =
+    if (enabled) containerColor else disabledContainerColor
+
+private fun IconButtonColors.contentColor(enabled: Boolean): Color =
+    if (enabled) contentColor else disabledContentColor
+
+internal fun IconButtonColors.toButtonColors() = ButtonColors(
+    containerColor = containerColor,
+    contentColor = contentColor,
+    disabledContainerColor = disabledContainerColor,
+    disabledContentColor = disabledContentColor
+)

ui/src/main/java/com/theoplayer/android/ui/LiveButton.kt

@@ -8,6 +8,8 @@ import androidx.compose.material.icons.rounded.Circle
 import androidx.compose.material3.ButtonColors
 import androidx.compose.material3.ButtonDefaults
 import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButtonColors
+import androidx.compose.material3.IconButtonDefaults
 import androidx.compose.material3.Text
 import androidx.compose.material3.TextButton
 import androidx.compose.runtime.Composable
@@ -35,7 +37,7 @@ import com.theoplayer.android.ui.theme.THEOplayerTheme
 fun LiveButton(
     modifier: Modifier = Modifier,
     contentPadding: PaddingValues = ButtonDefaults.TextButtonContentPadding,
-    colors: ButtonColors = IconButtonDefaults.iconButtonColors(),
+    colors: IconButtonColors = IconButtonDefaults.iconButtonColors(),
     liveThreshold: Double = 10.0,
     live: @Composable RowScope.() -> Unit = {
         Icon(
@@ -63,7 +65,7 @@ fun LiveButton(
         TextButton(
             modifier = modifier,
             contentPadding = contentPadding,
-            colors = colors,
+            colors = colors.toButtonColors(),
             onClick = {
                 player.player?.let {
                     it.currentTime = Double.POSITIVE_INFINITY