Task/union type image resource video preview

core/design/build.gradle.kts

@@ -17,9 +17,10 @@ dependencies {
 
     val composeBom = platform(libs.compose.bom)
     implementation(composeBom)
-    implementation(libs.bundles.compose)
-    implementation(libs.androidx.core.ktx)
     implementation(libs.androidx.appcompat)
+    implementation(libs.androidx.core.ktx)
+    implementation(libs.bundles.compose)
+    implementation(libs.coil.compose)
 
     androidTestImplementation(libs.bundles.compose.androidTest)
     androidTestImplementation(composeBom)

core/design/src/main/kotlin/edu/stanford/spezi/core/design/component/ImageResource.kt

@@ -10,7 +10,7 @@ import javax.annotation.concurrent.Immutable
  * This is useful to abstract the image resource type and use it in a composable function. The identifier can be used for tests.
  * @see ImageResource.Vector
  * @see ImageResource.Drawable
- * @see ImageResourceIcon
+ * @see ImageResourceComposable
  */
 @Immutable
 sealed class ImageResource {

core/design/src/main/kotlin/edu/stanford/spezi/core/design/component/ImageResourceComposable.kt

@@ -0,0 +1,116 @@
+package edu.stanford.spezi.core.design.component
+
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.ThumbUp
+import androidx.compose.material3.CircularProgressIndicator
+import androidx.compose.material3.Icon
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.tooling.preview.PreviewParameter
+import androidx.compose.ui.tooling.preview.PreviewParameterProvider
+import coil.compose.AsyncImagePainter
+import coil.compose.SubcomposeAsyncImage
+import edu.stanford.spezi.core.design.theme.Colors
+import edu.stanford.spezi.core.design.theme.SpeziTheme
+import edu.stanford.spezi.core.design.theme.ThemePreviews
+import edu.stanford.spezi.core.utils.extensions.imageResourceIdentifier
+
+/**
+ * Composable function to display an icon using an [ImageResource].
+ */
+@Composable
+fun ImageResourceComposable(
+    imageResource: ImageResource,
+    contentDescription: String,
+    modifier: Modifier = Modifier,
+    tint: Color = Colors.primary,
+) {
+    val imageModifier = modifier.then(Modifier.imageResourceIdentifier(imageResource.identifier))
+    when (imageResource) {
+        is ImageResource.Vector -> {
+            Icon(
+                imageVector = imageResource.image,
+                contentDescription = contentDescription,
+                tint = tint,
+                modifier = imageModifier
+            )
+        }
+
+        is ImageResource.Drawable -> {
+            Icon(
+                painter = painterResource(id = imageResource.resId),
+                contentDescription = contentDescription,
+                tint = tint,
+                modifier = imageModifier,
+            )
+        }
+
+        is ImageResource.Remote -> {
+            SubcomposeAsyncImage(
+                model = imageResource.url,
+                modifier = modifier,
+                contentDescription = contentDescription,
+            ) {
+                val state = painter.state
+                val painter = painter
+                if (state is AsyncImagePainter.State.Loading) {
+                    Box(Modifier.matchParentSize()) {
+                        CircularProgressIndicator(
+                            Modifier
+                                .align(Alignment.Center),
+                            color = Colors.primary
+                        )
+                    }
+                }
+
+                if (state is AsyncImagePainter.State.Error) {
+                    Box(Modifier.matchParentSize()) {
+                        Text("Error loading image", Modifier.align(Alignment.Center))
+                    }
+                }
+
+                if (state is AsyncImagePainter.State.Success) {
+                    Box(
+                        modifier = Modifier.matchParentSize(),
+                        contentAlignment = Alignment.Center
+                    ) {
+                        Image(
+                            modifier = Modifier.fillMaxSize(),
+                            painter = painter,
+                            contentDescription = contentDescription,
+                            contentScale = ContentScale.Crop,
+                        )
+                    }
+                }
+            }
+        }
+    }
+}
+
+@ThemePreviews
+@Composable
+private fun ImageResourceComposablePreview(
+    @PreviewParameter(ImageResourceProvider::class) imageResource: ImageResource,
+) {
+    SpeziTheme(isPreview = true) {
+        ImageResourceComposable(
+            imageResource = imageResource,
+            contentDescription = "Icon"
+        )
+    }
+}
+
+private class ImageResourceProvider : PreviewParameterProvider<ImageResource> {
+    override val values: Sequence<ImageResource> = sequenceOf(
+        ImageResource.Vector(Icons.Default.ThumbUp),
+        ImageResource.Drawable(android.R.drawable.ic_menu_camera),
+    )
+}

modules/contact/src/main/kotlin/edu/stanford/spezi/modules/contact/ContactComposable.kt

@@ -25,7 +25,7 @@ import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.PreviewParameter
 import androidx.compose.ui.tooling.preview.PreviewParameterProvider
 import edu.stanford.spezi.core.design.component.ImageResource
-import edu.stanford.spezi.core.design.component.ImageResourceIcon
+import edu.stanford.spezi.core.design.component.ImageResourceComposable
 import edu.stanford.spezi.core.design.component.StringResource
 import edu.stanford.spezi.core.design.theme.Sizes
 import edu.stanford.spezi.core.design.theme.Spacings
@@ -77,7 +77,7 @@ fun ContactComposable(contact: Contact, modifier: Modifier = Modifier) {
                 verticalAlignment = Alignment.CenterVertically
             ) {
                 val image = contact.image ?: ImageResource.Vector(Icons.Default.AccountBox)
-                ImageResourceIcon(
+                ImageResourceComposable(
                     imageResource = image,
                     contentDescription = stringResource(R.string.profile_picture),
                     modifier = Modifier

modules/education/src/main/java/edu/stanford/spezi/modules/education/videos/component/ExpandableVideoSection.kt

@@ -3,7 +3,6 @@ package edu.stanford.spezi.modules.education.videos.component
 import androidx.compose.animation.AnimatedVisibility
 import androidx.compose.animation.expandVertically
 import androidx.compose.animation.shrinkVertically
-import androidx.compose.foundation.Image
 import androidx.compose.foundation.background
 import androidx.compose.foundation.border
 import androidx.compose.foundation.clickable
@@ -13,7 +12,6 @@ import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.ColumnScope
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.aspectRatio
-import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
@@ -24,7 +22,6 @@ import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.KeyboardArrowDown
 import androidx.compose.material.icons.filled.KeyboardArrowUp
 import androidx.compose.material.icons.filled.PlayArrow
-import androidx.compose.material3.CircularProgressIndicator
 import androidx.compose.material3.Icon
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
@@ -35,13 +32,12 @@ import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.tooling.preview.PreviewParameter
 import androidx.compose.ui.tooling.preview.PreviewParameterProvider
 import androidx.compose.ui.unit.dp
-import coil.compose.AsyncImagePainter
-import coil.compose.SubcomposeAsyncImage
 import edu.stanford.spezi.core.design.component.DefaultElevatedCard
+import edu.stanford.spezi.core.design.component.ImageResource
+import edu.stanford.spezi.core.design.component.ImageResourceComposable
 import edu.stanford.spezi.core.design.component.RectangleShimmerEffect
 import edu.stanford.spezi.core.design.component.VerticalSpacer
 import edu.stanford.spezi.core.design.component.height
@@ -154,74 +150,51 @@ private fun VideoItem(video: Video, onVideoClick: () -> Unit) {
 
         VerticalSpacer(height = Spacings.small)
 
-        SubcomposeAsyncImage(
+        Box(
             modifier = Modifier
                 .clickable { onVideoClick() }
                 .height(IMAGE_HEIGHT.dp)
                 .padding(Spacings.small)
-                .fillMaxWidth(),
-            model = video.thumbnailUrl,
-
-            contentDescription = "Video thumbnail",
+                .fillMaxWidth()
         ) {
-            val state = painter.state
-            val painter = painter
-            if (state is AsyncImagePainter.State.Loading) {
-                Box(Modifier.matchParentSize()) {
-                    CircularProgressIndicator(
-                        Modifier
-                            .align(Alignment.Center)
-                    )
-                }
-            }
-
-            if (state is AsyncImagePainter.State.Error) {
-                Box(Modifier.matchParentSize()) {
-                    Text("Error loading image", Modifier.align(Alignment.Center))
-                }
-            }
+            ImageResourceComposable(
+                imageResource = ImageResource.Remote(video.thumbnailUrl),
+                contentDescription = "Video thumbnail",
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .aspectRatio(ASPECT_16_9)
+                    .border(Sizes.Border.medium, Colors.primary),
+            )
 
-            if (state is AsyncImagePainter.State.Success) {
-                Box(
-                    modifier = Modifier
-                        .fillMaxWidth()
-                        .aspectRatio(ASPECT_16_9)
-                        .border(Sizes.Border.medium, Colors.primary),
-                    contentAlignment = Alignment.Center
-                ) {
-                    Image(
-                        modifier = Modifier.fillMaxSize(),
-                        painter = painter,
-                        contentDescription = "Video thumbnail",
-                        contentScale = ContentScale.Crop,
+            Box(
+                modifier = Modifier
+                    .align(Alignment.Center)
+                    .background(
+                        color = Colors.primary,
+                        shape = CircleShape
                     )
-                    Box(
-                        modifier = Modifier
-                            .align(Alignment.Center)
-                            .background(
-                                color = Colors.primary,
-                                shape = CircleShape
-                            )
-                            .padding(Spacings.medium)
-                    ) {
-                        Icon(
-                            imageVector = Icons.Default.PlayArrow,
-                            contentDescription = "Play button",
-                            modifier = Modifier
-                                .align(Alignment.Center)
-                                .size(Sizes.Icon.medium),
-                            tint = Colors.onPrimary
-                        )
-                    }
-                }
+                    .padding(Spacings.medium)
+            ) {
+                Icon(
+                    imageVector = Icons.Default.PlayArrow,
+                    contentDescription = "Play button",
+                    modifier = Modifier
+                        .align(Alignment.Center)
+                        .size(Sizes.Icon.medium),
+                    tint = Colors.onPrimary
+                )
             }
         }
     }
 }
 
 @Composable
 fun LoadingVideoCard() {
-    VideoElevatedCard(modifier = Modifier.fillMaxWidth().padding(bottom = Spacings.medium)) {
+    VideoElevatedCard(
+        modifier = Modifier
+            .fillMaxWidth()
+            .padding(bottom = Spacings.medium)
+    ) {
         Column(
             modifier = Modifier.padding(Spacings.medium),
             verticalArrangement = Arrangement.spacedBy(Spacings.large + Spacings.medium)