Add Speaker component, configure Coil

JetBrains · Nov 25, 2024 · 99d3b66 · 99d3b66
1 parent b2f9dd1
commit 99d3b66
Show file tree

Hide file tree

Showing 6 changed files with 104 additions and 7 deletions.
diff --git a/gradle/libs.versions.toml b/gradle/libs.versions.toml
@@ -16,13 +16,13 @@ compose-android = "1.7.1"
 compose-multiplatform = "1.7.0"
 compose-hot-reload = "1.0.0-dev.28.3"
 
+coil = "3.0.3"
 exposed = "0.55.0"
 h2 = "2.2.224"
 hikaricp = "5.1.0"
-image-loader = "1.9.0"
 junit = "4.13.2"
 kotlinx-datetime = "0.6.1"
-ktor = "3.0.0"
+ktor = "3.0.1"
 android-svg = "1.4"
 logbackClassic = "1.5.6"
 markdown = "0.26.0"
@@ -65,6 +65,7 @@ ktor-client-js = { module = "io.ktor:ktor-client-js", version.ref = "ktor" }
 ktor-client-cio = { module = "io.ktor:ktor-client-cio", version.ref = "ktor" }
 ktor-client-core = { module = "io.ktor:ktor-client-core", version.ref = "ktor" }
 ktor-client-darwin = { module = "io.ktor:ktor-client-darwin", version.ref = "ktor" }
+ktor-client-okhttp = { module = "io.ktor:ktor-client-okhttp", version.ref = "ktor" }
 ktor-serialization-kotlinx-json = { module = "io.ktor:ktor-serialization-kotlinx-json", version.ref = "ktor" }
 ktor-client-content-negotiation = { module = "io.ktor:ktor-client-content-negotiation", version.ref = "ktor" }
 ktor-utils = { module = "io.ktor:ktor-utils", version.ref = "ktor" }
@@ -88,8 +89,9 @@ kotlinx-datetime = { module = "org.jetbrains.kotlinx:kotlinx-datetime", version.
 logback-classic = { module = "ch.qos.logback:logback-classic", version.ref = "logbackClassic" }
 
 # images
-image-loader = { module = "io.github.qdsfdhvh:image-loader", version.ref = "image-loader" }
 android-svg = { module = "com.caverock:androidsvg-aar", version.ref = "android-svg" }
+coil-compose = { module = "io.coil-kt.coil3:coil-compose", version.ref = "coil" }
+coil-network-ktor3 = { module = "io.coil-kt.coil3:coil-network-ktor3", version.ref = "coil" }
 
 [plugins]
 androidApplication = { id = "com.android.application", version.ref = "agp" }

diff --git a/shared/build.gradle.kts b/shared/build.gradle.kts
@@ -69,8 +69,6 @@ kotlin {
             implementation(libs.androidx.navigation.compose)
             implementation(libs.multiplatform.markdown.renderer.m3)
             implementation(libs.ktor.client.core)
-
-            api(libs.image.loader)
         }
 
         commonTest.dependencies {
@@ -83,15 +81,15 @@ kotlin {
             implementation(libs.androidx.work.runtime)
             implementation(libs.androidx.preference)
             implementation(libs.compose.ui.tooling.preview)
-            implementation(libs.ktor.client.cio)
+            implementation(libs.ktor.client.okhttp)
         }
 
         iosMain.dependencies {
             implementation(libs.ktor.client.darwin)
         }
 
         jvmMain.dependencies {
-            implementation(libs.ktor.client.cio)
+            implementation(libs.ktor.client.okhttp)
             implementation(compose.desktop.currentOs)
             implementation(libs.android.svg)
         }

diff --git a/ui-components-gallery/src/androidMain/AndroidManifest.xml b/ui-components-gallery/src/androidMain/AndroidManifest.xml
@@ -1,5 +1,7 @@
 <?xml version="1.0" encoding="utf-8"?>
 <manifest xmlns:android="http://schemas.android.com/apk/res/android">
+    <uses-permission android:name="android.permission.INTERNET"/>
+
     <application
         android:allowBackup="true"
         android:supportsRtl="true"

diff --git a/ui-components/build.gradle.kts b/ui-components/build.gradle.kts
@@ -31,6 +31,21 @@ kotlin {
             implementation(compose.material3)
             api(compose.components.resources)
             api(compose.components.uiToolingPreview)
+
+            implementation(libs.coil.compose)
+            implementation(libs.coil.network.ktor3)
+        }
+        jvmMain.dependencies {
+            implementation(libs.ktor.client.okhttp)
+        }
+        androidMain.dependencies {
+            implementation(libs.ktor.client.okhttp)
+        }
+        iosMain.dependencies {
+            implementation(libs.ktor.client.darwin)
+        }
+        jsMain.dependencies {
+            implementation(libs.ktor.client.js)
         }
     }
 }

diff --git a/ui-components/src/commonMain/kotlin/org/jetbrains/kotlinconf/ui/Gallery.kt b/ui-components/src/commonMain/kotlin/org/jetbrains/kotlinconf/ui/Gallery.kt
@@ -36,6 +36,7 @@ fun GalleryApp() {
                 SectionTitlePreview()
                 ServiceEventsPreview()
                 SettingsItemPreview()
+                SpeakerPreview()
                 SwitcherItemPreview()
                 SwitcherPreview()
                 TogglePreview()

diff --git a/ui-components/src/commonMain/kotlin/org/jetbrains/kotlinconf/ui/components/Speaker.kt b/ui-components/src/commonMain/kotlin/org/jetbrains/kotlinconf/ui/components/Speaker.kt
@@ -0,0 +1,79 @@
+package org.jetbrains.kotlinconf.ui.components
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.shape.RoundedCornerShape
+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.layout.ContentScale
+import androidx.compose.ui.unit.dp
+import coil3.compose.AsyncImage
+import kotlinconfapp.ui_components.generated.resources.Res
+import kotlinconfapp.ui_components.generated.resources.kodee_emotion_positive
+import org.jetbrains.compose.resources.painterResource
+import org.jetbrains.compose.ui.tooling.preview.Preview
+import org.jetbrains.kotlinconf.ui.theme.KotlinConfTheme
+import org.jetbrains.kotlinconf.ui.theme.PreviewHelper
+
+@Composable
+fun Speaker(
+    name: String,
+    title: String,
+    photoUrl: String,
+    modifier: Modifier = Modifier,
+) {
+    Row(
+        modifier = modifier.padding(12.dp),
+        horizontalArrangement = Arrangement.spacedBy(12.dp),
+        verticalAlignment = Alignment.CenterVertically,
+    ) {
+        AsyncImage(
+            model = photoUrl,
+            contentDescription = null,
+            modifier = Modifier
+                .clip(RoundedCornerShape(8.dp))
+                .size(96.dp)
+                .background(KotlinConfTheme.colors.tileBackground),
+            contentScale = ContentScale.Crop,
+            placeholder = painterResource(Res.drawable.kodee_emotion_positive),
+            error = painterResource(Res.drawable.kodee_emotion_positive),
+        )
+        Column {
+            StyledText(
+                text = name,
+                style = KotlinConfTheme.typography.h3,
+                color = KotlinConfTheme.colors.primaryText,
+            )
+            Spacer(modifier = Modifier.size(6.dp))
+            StyledText(
+                text = title,
+                style = KotlinConfTheme.typography.text2,
+                color = KotlinConfTheme.colors.secondaryText,
+            )
+        }
+    }
+}
+
+@Preview
+@Composable
+internal fun SpeakerPreview() {
+    PreviewHelper {
+        Speaker(
+            name = "John Doe",
+            title = "Whatever Role Name at That Company",
+            photoUrl = "bad bad url",
+        )
+        Speaker(
+            name = "John Doe",
+            title = "Whatever Role Name at That Company",
+            photoUrl = "https://kotlinconf.com/static/sebastian-aigner-ffc95c92c3b7ade7d25a738c40015a68.png",
+        )
+    }
+}