fix : changed coil lib

mkw8263 · Sep 27, 2020 · c6c1eba · c6c1eba
1 parent 554851f
commit c6c1eba
Show file tree

Hide file tree

Showing 6 changed files with 50 additions and 23 deletions.
diff --git a/app/build.gradle b/app/build.gradle
@@ -81,7 +81,7 @@ dependencies {
     androidTestImplementation "com.google.dagger:hilt-android-testing:$versions.daggerHiltCoreVersion"
     kaptAndroidTest "com.google.dagger:hilt-compiler:$versions.daggerHiltCoreVersion"
 
-    implementation "jp.wasabeef.composable:coil:$versions.composableCoil"
+    implementation "dev.chrisbanes.accompanist:accompanist-coil:$versions.composableCoil"
 
     implementation "com.squareup.okhttp3:logging-interceptor:$versions.okhttpVersion"
     implementation "com.squareup.retrofit2:converter-gson:$versions.retrofitVersion"

diff --git a/app/src/main/java/com/mindev/themovie_compose/ui/main/MainUI.kt b/app/src/main/java/com/mindev/themovie_compose/ui/main/MainUI.kt
@@ -41,7 +41,7 @@ fun movieMain(viewModel: MainViewModel) {
                 Box(modifier = Modifier.weight(0.7f), children = { MovieUI(movieItems) })
                 Box(
                     modifier = Modifier.weight(0.2f),
-                    children = { PersonUI(personItems, viewModel) })
+                    children = { PersonUI(personItems) })
             }
         }
     }

diff --git a/app/src/main/java/com/mindev/themovie_compose/ui/movie/MovieUI.kt b/app/src/main/java/com/mindev/themovie_compose/ui/movie/MovieUI.kt
@@ -4,20 +4,23 @@ import android.content.Context
 import androidx.compose.foundation.*
 import androidx.compose.foundation.layout.*
 import androidx.compose.foundation.layout.RowScope.align
+import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material.Card
 import androidx.compose.material.ripple.RippleIndication
 import androidx.compose.runtime.Composable
 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.layout.ContentScale
 import androidx.compose.ui.platform.ContextAmbient
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.unit.dp
 import com.mindev.themovie_compose.ui.entity.MovieViewResult
 import com.mindev.themovie_compose.ui.main.MainMovieRouter
 import com.mindev.themovie_compose.ui.main.onClickMovieUI
-import jp.wasabeef.composable.coil.CoilImage
+import dev.chrisbanes.accompanist.coil.CoilImage
 import kotlinx.coroutines.ExperimentalCoroutinesApi
 
 @ExperimentalCoroutinesApi
@@ -54,7 +57,7 @@ fun MovieCardUI(movie: MovieViewResult, context: Context) = Card(
             .align(Alignment.CenterVertically)
     ) {
         Box(modifier = Modifier.align(alignment = Alignment.CenterHorizontally)) {
-            NetworkImage(movie)
+            MovieNetworkImage(movie)
         }
         Spacer(Modifier.preferredHeight(8.dp))
         Text(
@@ -69,7 +72,12 @@ fun MovieCardUI(movie: MovieViewResult, context: Context) = Card(
 }
 
 @Composable
-fun NetworkImage(entity: MovieViewResult) = CoilImage(
-    model = "https://image.tmdb.org/t/p/w500/" + entity.poster_path,
-    modifier = Modifier.preferredWidth(200.dp).height(200.dp),
+fun MovieNetworkImage(entity: MovieViewResult) = CoilImage(
+    data = "https://image.tmdb.org/t/p/w500/" + entity.poster_path,
+    contentScale = ContentScale.Crop,
+    modifier = Modifier.width(240.dp)
+        .height(240.dp)
+        .wrapContentSize(Alignment.Center)
+        .aspectRatio(1.0f)
+        .clip(CircleShape)
 )
diff --git a/app/src/main/java/com/mindev/themovie_compose/ui/movie/PersonUI.kt b/app/src/main/java/com/mindev/themovie_compose/ui/movie/PersonUI.kt
@@ -5,27 +5,28 @@ import androidx.compose.foundation.Text
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.*
 import androidx.compose.foundation.layout.RowScope.align
-import androidx.compose.material.MaterialTheme
+import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.material.ripple.RippleIndication
 import androidx.compose.runtime.Composable
 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.layout.ContentScale
 import androidx.compose.ui.platform.ContextAmbient
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.TextUnit
 import androidx.compose.ui.unit.dp
 import com.mindev.themovie_compose.ui.entity.MoviePersonView
 import com.mindev.themovie_compose.ui.main.MainMovieRouter
-import com.mindev.themovie_compose.ui.main.MainViewModel
 import com.mindev.themovie_compose.ui.main.onClickMovieUI
-import jp.wasabeef.composable.coil.CoilImage
+import dev.chrisbanes.accompanist.coil.CoilImage
 import kotlinx.coroutines.ExperimentalCoroutinesApi
 
 @ExperimentalCoroutinesApi
 @Composable
-fun PersonUI(personItems: List<MoviePersonView>, viewModel: MainViewModel) {
+fun PersonUI(personItems: List<MoviePersonView>) {
     val context = ContextAmbient.current
     ScrollableRow(modifier = Modifier.align(Alignment.Bottom).fillMaxWidth()) {
         personItems.map {
@@ -57,6 +58,11 @@ fun PersonUI(personItems: List<MoviePersonView>, viewModel: MainViewModel) {
 
 @Composable
 fun ProfileImage(entity: MoviePersonView) = CoilImage(
-    model = "https://image.tmdb.org/t/p/w200" + entity.profile_path,
-    modifier = Modifier.fillMaxWidth().wrapContentSize(Alignment.Center)
+    data = "https://image.tmdb.org/t/p/w200" + entity.profile_path,
+    contentScale = ContentScale.Crop,
+    modifier = Modifier.width(45.dp)
+        .height(45.dp)
+        .wrapContentSize(Alignment.Center)
+        .aspectRatio(1.0f)
+        .clip(CircleShape)
 )
diff --git a/app/src/main/java/com/mindev/themovie_compose/ui/profile/DetailPersonUI.kt b/app/src/main/java/com/mindev/themovie_compose/ui/profile/DetailPersonUI.kt
@@ -4,28 +4,42 @@ import androidx.compose.foundation.Box
 import androidx.compose.foundation.ScrollableRow
 import androidx.compose.foundation.Text
 import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.material.Divider
 import androidx.compose.material.Scaffold
 import androidx.compose.runtime.Composable
 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.layout.ContentScale
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.unit.TextUnit
 import androidx.compose.ui.unit.dp
 import com.mindev.themovie_compose.ui.entity.MoviePersonView
-import com.mindev.themovie_compose.ui.movie.ProfileImage
-import jp.wasabeef.composable.coil.CoilImage
+import dev.chrisbanes.accompanist.coil.CoilImage
+
+@Composable
+fun DetailProfileImage(path: String) = CoilImage(
+    data = "https://image.tmdb.org/t/p/w200$path",
+    contentScale = ContentScale.Crop,
+    modifier = Modifier.width(240.dp)
+        .height(240.dp)
+        .wrapContentSize(Alignment.Center)
+        .aspectRatio(1.0f)
+        .clip(CircleShape)
+)
 
 @Composable
 fun DetailPersonUI(data: MoviePersonView) {
-    Scaffold(modifier = Modifier.padding(top = 36.dp), backgroundColor = Color.Black) {
+    Scaffold(backgroundColor = Color.Black) {
         Column {
-            Box(modifier = Modifier.weight(0.2f)) {
-                ProfileImage(data)
+            Box(modifier = Modifier.weight(0.35f).align(alignment = Alignment.CenterHorizontally)) {
+                Spacer(modifier = Modifier.height(16.dp))
+                DetailProfileImage(data.profile_path)
             }
-            Divider()
-            Box(modifier = Modifier.weight(0.8f)) {
+            Box(modifier = Modifier.weight(0.65f)) {
+                Spacer(modifier = Modifier.height(24.dp))
                 MoviePersonBody(data)
             }
         }
@@ -44,7 +58,7 @@ fun MoviePersonBody(data: MoviePersonView) =
             data.known_for.map {
                 Column(horizontalAlignment = Alignment.CenterHorizontally) {
                     CoilImage(
-                        model = "https://image.tmdb.org/t/p/w500" + it.poster_path,
+                        data = "https://image.tmdb.org/t/p/w500" + it.poster_path,
                         modifier = Modifier.fillMaxWidth()
                             .wrapContentSize(Alignment.Center)
                             .width(120.dp)

diff --git a/dependencies.gradle b/dependencies.gradle
@@ -27,8 +27,7 @@ ext.versions = [
 
         coroutinesVersion       : '1.3.9',
 
-        accompanistCoilVersion  : '0.2.1',
-        composableCoil          : '1.0.0',
+        composableCoil          : '0.2.1',
         timberVersion           : '4.7.1',
 
         truthVersion            : '1.0.1',