Added color palette to images

composeApp/build.gradle.kts

@@ -74,6 +74,8 @@ kotlin {
             implementation(libs.sqlite.bundled)
 
             implementation(libs.bundles.paging)
+
+            implementation(libs.bundles.kmpPalette)
         }
 
         commonTest.dependencies {

composeApp/src/commonMain/composeResources/values/strings.xml

@@ -50,6 +50,8 @@
 
     <string name="search_movie">Search Movie</string>
 
+    <string name="see_more">See More</string>
+
     <string-array name="themes">
         <item>Light theme</item>
         <item>Dark theme</item>

composeApp/src/commonMain/kotlin/com/vickbt/composeApp/ui/components/MovieCardDescription.kt

@@ -12,10 +12,7 @@ import androidx.compose.material3.Card
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
-import androidx.compose.runtime.getValue
-import androidx.compose.runtime.mutableStateOf
-import androidx.compose.runtime.remember
-import androidx.compose.runtime.setValue
+import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Brush
@@ -26,19 +23,38 @@ import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import coil3.compose.AsyncImage
+import com.kmpalette.loader.NetworkLoader
+import com.kmpalette.rememberDominantColorState
 import com.vickbt.composeApp.domain.models.MovieDetails
 import com.vickbt.composeApp.utils.loadImage
+import com.vickbt.shared.resources.Res
+import com.vickbt.shared.resources.see_more
+import io.ktor.http.Url
+import kotlinx.coroutines.Dispatchers
+import kotlinx.coroutines.IO
+import org.jetbrains.compose.resources.stringResource
 
 @Composable
 fun MovieCardDescription(
     modifier: Modifier = Modifier,
     movie: MovieDetails,
+    networkLoader: NetworkLoader,
     maxLine: Int = 3,
-    overFlowText: String = "See more",
+    overFlowText: String = stringResource(Res.string.see_more),
     onItemClick: (MovieDetails) -> Unit
 ) {
-    var dominantColor by remember { mutableStateOf(Color.DarkGray) }
-    var dominantTextColor by remember { mutableStateOf(Color.LightGray) }
+    val dominantColorState = rememberDominantColorState(
+        loader = networkLoader,
+        defaultColor = Color.DarkGray,
+        defaultOnColor = Color.LightGray,
+        coroutineContext = Dispatchers.IO
+    )
+
+    movie.backdropPath?.loadImage()?.let {
+        LaunchedEffect(it) {
+            dominantColorState.updateFrom(Url(it))
+        }
+    }
 
     Card(modifier = modifier.clickable { onItemClick(movie) }) {
         Box {
@@ -62,7 +78,7 @@ fun MovieCardDescription(
                     .align(Alignment.BottomCenter)
                     .background(
                         Brush.verticalGradient(
-                            listOf(Color.Transparent, dominantColor)
+                            listOf(Color.Transparent, dominantColorState.color)
                         )
                     )
             )
@@ -82,18 +98,16 @@ fun MovieCardDescription(
                     style = MaterialTheme.typography.titleMedium,
                     overflow = TextOverflow.Ellipsis,
                     textAlign = TextAlign.Start,
-                    color = dominantTextColor,
+                    color = dominantColorState.onColor,
                     lineHeight = 30.sp
                 )
 
-                movie.overview?.let {
-                    ExpandableText(
-                        modifier = Modifier.padding(bottom = 4.dp),
-                        text = it,
-                        overFlowText = overFlowText,
-                        minimizedMaxLines = maxLine
-                    )
-                }
+                ExpandableText(
+                    modifier = Modifier.padding(bottom = 4.dp),
+                    text = movie.overview,
+                    overFlowText = overFlowText,
+                    minimizedMaxLines = maxLine
+                )
             }
         }
     }

composeApp/src/commonMain/kotlin/com/vickbt/composeApp/ui/components/MovieCardLandscape.kt

@@ -19,10 +19,7 @@ import androidx.compose.material3.HorizontalDivider
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
-import androidx.compose.runtime.getValue
-import androidx.compose.runtime.mutableStateOf
-import androidx.compose.runtime.remember
-import androidx.compose.runtime.setValue
+import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Brush
@@ -33,6 +30,9 @@ import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import coil3.compose.AsyncImage
+import com.kmpalette.loader.NetworkLoader
+import com.kmpalette.loader.rememberNetworkLoader
+import com.kmpalette.rememberDominantColorState
 import com.vickbt.composeApp.domain.models.Movie
 import com.vickbt.composeApp.ui.components.ratingbar.RatingBar
 import com.vickbt.composeApp.ui.components.ratingbar.RatingBarStyle
@@ -43,16 +43,30 @@ import com.vickbt.composeApp.utils.getReleaseDate
 import com.vickbt.composeApp.utils.loadImage
 import com.vickbt.shared.resources.Res
 import com.vickbt.shared.resources.unknown_movie
+import io.ktor.http.Url
+import kotlinx.coroutines.Dispatchers
+import kotlinx.coroutines.IO
 import org.jetbrains.compose.resources.stringResource
 
 @Composable
 fun MovieCardLandscape(
     modifier: Modifier = Modifier,
     movie: Movie,
+    networkLoader: NetworkLoader = rememberNetworkLoader(),
     onClickItem: (Movie) -> Unit
 ) {
-    var dominantTextColor by remember { mutableStateOf(Color.LightGray) }
-    var dominantSubTextColor by remember { mutableStateOf(dominantTextColor) }
+    val dominantColorState = rememberDominantColorState(
+        loader = networkLoader,
+        defaultColor = Color.DarkGray,
+        defaultOnColor = Color.LightGray,
+        coroutineContext = Dispatchers.IO
+    )
+
+    movie.backdropPath?.loadImage()?.let {
+        LaunchedEffect(it) {
+            dominantColorState.updateFrom(Url(it))
+        }
+    }
 
     Card(
         modifier = modifier.clickable { onClickItem(movie) },
@@ -80,7 +94,7 @@ fun MovieCardLandscape(
                         Brush.verticalGradient(
                             listOf(
                                 Color.Transparent,
-                                Color.DarkGray
+                                dominantColorState.color
                             )
                         )
                     )
@@ -103,7 +117,7 @@ fun MovieCardLandscape(
                     style = MaterialTheme.typography.titleMedium,
                     overflow = TextOverflow.Ellipsis,
                     textAlign = TextAlign.Start,
-                    color = dominantTextColor
+                    color = dominantColorState.onColor
                 )
                 //endregion
 
@@ -131,7 +145,7 @@ fun MovieCardLandscape(
                                 .padding(horizontal = 4.dp)
                                 .width(1.dp)
                                 .height(13.dp),
-                            color = dominantSubTextColor
+                            color = dominantColorState.onColor
                         )
 
                         Text(
@@ -142,7 +156,7 @@ fun MovieCardLandscape(
                             style = MaterialTheme.typography.labelSmall,
                             overflow = TextOverflow.Ellipsis,
                             textAlign = TextAlign.Start,
-                            color = dominantSubTextColor
+                            color = dominantColorState.onColor
                         )
                     }
                 }

composeApp/src/commonMain/kotlin/com/vickbt/composeApp/ui/components/MovieCardPager.kt

@@ -18,10 +18,7 @@ import androidx.compose.material3.Card
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
-import androidx.compose.runtime.getValue
-import androidx.compose.runtime.mutableStateOf
-import androidx.compose.runtime.remember
-import androidx.compose.runtime.setValue
+import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Brush
@@ -33,6 +30,9 @@ import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import coil3.compose.AsyncImage
+import com.kmpalette.loader.NetworkLoader
+import com.kmpalette.loader.rememberNetworkLoader
+import com.kmpalette.rememberDominantColorState
 import com.vickbt.composeApp.domain.models.Movie
 import com.vickbt.composeApp.ui.components.ratingbar.RatingBar
 import com.vickbt.composeApp.ui.components.ratingbar.RatingBarStyle
@@ -41,16 +41,30 @@ import com.vickbt.composeApp.utils.getRating
 import com.vickbt.composeApp.utils.loadImage
 import com.vickbt.shared.resources.Res
 import com.vickbt.shared.resources.unknown_movie
+import io.ktor.http.Url
+import kotlinx.coroutines.Dispatchers
+import kotlinx.coroutines.IO
 import org.jetbrains.compose.resources.stringResource
 
 @Composable
 fun MovieCardPager(
     modifier: Modifier = Modifier,
     movie: Movie,
+    networkLoader: NetworkLoader = rememberNetworkLoader(),
     onItemClick: (Movie) -> Unit
 ) {
-    var dominantColor by remember { mutableStateOf(Color.DarkGray) }
-    var dominantTextColor by remember { mutableStateOf(Color.LightGray) }
+    val dominantColorState = rememberDominantColorState(
+        loader = networkLoader,
+        defaultColor = Color.DarkGray,
+        defaultOnColor = Color.LightGray,
+        coroutineContext = Dispatchers.IO
+    )
+
+    movie.backdropPath?.loadImage()?.let {
+        LaunchedEffect(it) {
+            dominantColorState.updateFrom(Url(it))
+        }
+    }
 
     Card(modifier = modifier.clickable { onItemClick(movie) }) {
         Box {
@@ -74,7 +88,7 @@ fun MovieCardPager(
                     .align(Alignment.BottomCenter)
                     .background(
                         Brush.verticalGradient(
-                            listOf(Color.Transparent, dominantColor)
+                            listOf(Color.Transparent, dominantColorState.color)
                         )
                     )
             )
@@ -95,7 +109,7 @@ fun MovieCardPager(
                     style = MaterialTheme.typography.titleMedium,
                     overflow = TextOverflow.Ellipsis,
                     textAlign = TextAlign.Start,
-                    color = dominantTextColor,
+                    color = dominantColorState.onColor,
                     lineHeight = 30.sp
                 )
 

composeApp/src/commonMain/kotlin/com/vickbt/composeApp/ui/components/appbars/DetailsAppBar.kt

@@ -24,10 +24,8 @@ import androidx.compose.material3.Text
 import androidx.compose.material3.TopAppBar
 import androidx.compose.material3.TopAppBarDefaults
 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 androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Brush
@@ -39,13 +37,18 @@ import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import coil3.compose.AsyncImage
+import com.kmpalette.loader.NetworkLoader
+import com.kmpalette.rememberDominantColorState
 import com.vickbt.composeApp.domain.models.MovieDetails
 import com.vickbt.composeApp.ui.components.collapsingToolbar.CollapsingToolbarScaffoldState
 import com.vickbt.composeApp.utils.DetailsUiState
 import com.vickbt.composeApp.utils.getMovieDuration
 import com.vickbt.composeApp.utils.loadImage
 import com.vickbt.shared.resources.Res
 import com.vickbt.shared.resources.unknown_movie
+import io.ktor.http.Url
+import kotlinx.coroutines.Dispatchers
+import kotlinx.coroutines.IO
 import org.jetbrains.compose.resources.stringResource
 
 @OptIn(ExperimentalMaterial3Api::class)
@@ -54,20 +57,29 @@ fun DetailsAppBar(
     modifier: Modifier = Modifier,
     collapsingScrollState: CollapsingToolbarScaffoldState,
     movieDetailsState: DetailsUiState,
+    networkLoader: NetworkLoader,
     onNavigationIconClick: () -> Unit,
     onShareIconClick: () -> Unit,
     onFavoriteIconClick: (MovieDetails, Boolean?) -> Unit
 ) {
     // Return progress on collapsing toolbar - 1.0f=Expanded, 0.0f=Collapsed
     val scrollProgress = collapsingScrollState.toolbarState.progress
 
-    val defaultDominantColor = MaterialTheme.colorScheme.surface
-    val defaultDominantTextColor = MaterialTheme.colorScheme.onSurface
-    var dominantColor by remember { mutableStateOf(defaultDominantColor) }
-    var dominantTextColor by remember { mutableStateOf(defaultDominantTextColor) }
+    val dominantColorState = rememberDominantColorState(
+        loader = networkLoader,
+        defaultColor = Color.DarkGray,
+        defaultOnColor = Color.LightGray,
+        coroutineContext = Dispatchers.IO
+    )
 
-    val movieDetails by remember { mutableStateOf(movieDetailsState.movieDetails) }
-    var isFavourite by remember { mutableStateOf(movieDetailsState.isFavorite) }
+    movieDetailsState.movieDetails?.backdropPath?.loadImage()?.let {
+        LaunchedEffect(it) {
+            dominantColorState.updateFrom(Url(it))
+        }
+    }
+
+    val movieDetails = movieDetailsState.movieDetails
+    var isFavourite = movieDetailsState.isFavorite
 
     val backgroundColor by animateColorAsState(
         targetValue = MaterialTheme.colorScheme.surface.copy(1 - scrollProgress)
@@ -95,7 +107,11 @@ fun DetailsAppBar(
                 .fillMaxWidth()
                 .height(210.dp)
                 .align(Alignment.BottomCenter)
-                .background(Brush.verticalGradient(listOf(Color.Transparent, dominantColor)))
+                .background(
+                    Brush.verticalGradient(
+                        listOf(Color.Transparent, dominantColorState.color)
+                    )
+                )
         )
 
         Column(
@@ -117,7 +133,7 @@ fun DetailsAppBar(
                 style = MaterialTheme.typography.titleMedium,
                 maxLines = 2,
                 overflow = TextOverflow.Ellipsis,
-                color = dominantTextColor,
+                color = dominantColorState.onColor,
                 fontSize = 32.sp,
                 textAlign = TextAlign.Start,
                 lineHeight = 30.sp
@@ -126,7 +142,7 @@ fun DetailsAppBar(
             Text(
                 modifier = Modifier,
                 text = movieDetails?.runtime?.getMovieDuration() ?: "",
-                color = dominantTextColor,
+                color = dominantColorState.onColor,
                 style = MaterialTheme.typography.bodyMedium,
                 fontSize = 14.sp
             )