jocmp · jocmp · Jul 1, 2025 · Jul 1, 2025
diff --git a/app/build.gradle.kts b/app/build.gradle.kts
@@ -118,6 +118,7 @@ dependencies {
     implementation(libs.androidx.material.icons.extended)
     implementation(libs.androidx.material3)
     implementation(libs.androidx.material3.window.size)
+    implementation(libs.androidx.media3.datasource.okhttp)
     implementation(libs.androidx.navigation.compose)
     implementation(libs.androidx.paging.compose)
     implementation(libs.androidx.paging.runtime.ktx)

diff --git a/app/src/main/java/com/capyreader/app/ui/articles/audio/AudioEmbedView.kt b/app/src/main/java/com/capyreader/app/ui/articles/audio/AudioEmbedView.kt
@@ -0,0 +1,122 @@
+package com.capyreader.app.ui.articles.audio
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.aspectRatio
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Pause
+import androidx.compose.material.icons.filled.PlayArrow
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.MaterialTheme.colorScheme
+import androidx.compose.material3.Surface
+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.ui.Alignment.Companion.CenterVertically
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.text.style.TextOverflow
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import coil.compose.AsyncImage
+import com.capyreader.app.ui.theme.CapyTheme
+import com.jocmp.capy.Enclosure
+import com.jocmp.capy.articles.Podcast
+import java.net.URL
+
+@Composable
+fun AudioEmbedView(podcast: Podcast) {
+    var isPlaying by remember { mutableStateOf(false) }
+
+    Surface(
+        color = colorScheme.surfaceContainer,
+        modifier = Modifier
+            .height(84.dp)
+            .padding(vertical = 8.dp, horizontal = 16.dp)
+            .clip(RoundedCornerShape(8.dp))
+    ) {
+        Row(
+            verticalAlignment = CenterVertically,
+            horizontalArrangement = Arrangement.spacedBy(8.dp),
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(8.dp)
+        ) {
+            podcast.enclosure.itunesImage?.let {
+                AsyncImage(
+                    model = it,
+                    contentDescription = null,
+                    contentScale = ContentScale.Crop,
+                    modifier =
+                        Modifier
+                            .aspectRatio(1f)
+                            .background(colorScheme.surfaceContainer)
+                )
+            }
+
+            Column(
+                Modifier.weight(0.1f),
+            ) {
+                Text(
+                    podcast.feedName,
+                    maxLines = 1,
+                    overflow = TextOverflow.Ellipsis,
+                    style = MaterialTheme.typography.labelSmall,
+                )
+                Text(
+                    podcast.title,
+                    maxLines = 1,
+                    overflow = TextOverflow.Ellipsis,
+                    fontSize = 14.sp,
+                )
+            }
+
+            IconButton(
+                 isPlaying = !isPlaying },
+            ) {
+                Icon(
+                    imageVector = if (isPlaying) Icons.Default.Pause else Icons.Default.PlayArrow,
+                    contentDescription = if (isPlaying) "Pause" else "Play"
+                )
+            }
+        }
+    }
+}
+
+@Preview
+@Composable
+fun AudioEmbedViewPreview() {
+    CapyTheme {
+        Box(
+            Modifier.padding(16.dp)
+        ) {
+            AudioEmbedView(
+                podcast = Podcast(
+                    articleID = "123",
+                    title = "The movie and TV tech we actually want to use",
+                    feedName = "The Vergecast",
+                    enclosure = Enclosure(
+                        url = URL("https://example.com"),
+                        type = "audio/mpeg",
+                        itunesDurationSeconds = 3601,
+                        itunesImage = null,
+                    )
+                )
+            )
+        }
+    }
+}
diff --git a/app/src/main/java/com/capyreader/app/ui/articles/detail/ArticleView.kt b/app/src/main/java/com/capyreader/app/ui/articles/detail/ArticleView.kt
@@ -51,9 +51,11 @@ import com.capyreader.app.preferences.ArticleVerticalSwipe.NEXT_ARTICLE
 import com.capyreader.app.preferences.ArticleVerticalSwipe.OPEN_ARTICLE_IN_BROWSER
 import com.capyreader.app.preferences.ArticleVerticalSwipe.PREVIOUS_ARTICLE
 import com.capyreader.app.ui.articles.LocalFullContent
+import com.capyreader.app.ui.articles.audio.AudioEmbedView
 import com.capyreader.app.ui.components.WebViewState
 import com.capyreader.app.ui.components.pullrefresh.SwipeRefresh
 import com.jocmp.capy.Article
+import com.jocmp.capy.articles.podcast
 import org.koin.compose.koinInject
 
 @OptIn(ExperimentalMaterial3Api::class)
@@ -97,6 +99,11 @@ fun ArticleView(
         bottomScrollBehavior = bottomScrollBehavior,
         enableBottomBar = enableBottomBar,
         topToolbarPreference = topToolbarPreference,
+        audioPlayer = {
+            article.podcast()?.let {
+                AudioEmbedView(podcast = it)
+            }
+        },
         topBar = {
             ArticleTopBar(
                 scrollBehavior = topToolbarPreference.scrollBehavior,
@@ -169,11 +176,13 @@ fun ArticleView(
     }
 }
 
+@OptIn(ExperimentalMaterial3Api::class)
 @Composable
 private fun ArticleViewScaffold(
     topBar: @Composable () -> Unit,
     enableBottomBar: Boolean,
     bottomBar: @Composable () -> Unit,
+    audioPlayer: @Composable () -> Unit,
     reader: @Composable () -> Unit,
     bottomScrollBehavior: BottomAppBarScrollBehavior,
     topToolbarPreference: ToolbarPreferences,
@@ -206,13 +215,19 @@ private fun ArticleViewScaffold(
                 topBar()
             }
 
-            if (enableBottomBar) {
-                Box(
-                    Modifier
-                        .align(Alignment.BottomStart)
-                        .fillMaxWidth()
-                ) {
-                    bottomBar()
+            Column(
+                Modifier
+                    .align(Alignment.BottomStart)
+            ) {
+                audioPlayer()
+
+                if (enableBottomBar) {
+                    Box(
+                        Modifier
+                            .fillMaxWidth()
+                    ) {
+                        bottomBar()
+                    }
                 }
             }
         }

diff --git a/capy/src/main/java/com/jocmp/capy/articles/ArticlePodcastExt.kt b/capy/src/main/java/com/jocmp/capy/articles/ArticlePodcastExt.kt
@@ -0,0 +1,9 @@
+package com.jocmp.capy.articles
+
+import com.jocmp.capy.Article
+
+fun Article.podcast(): Podcast? {
+    val enclosure = enclosures.firstOrNull { it.type.startsWith("audio/") } ?: return null
+
+    return Podcast(articleID = id, title = title, feedName = feedName, enclosure = enclosure)
+}
diff --git a/capy/src/main/java/com/jocmp/capy/articles/Podcast.kt b/capy/src/main/java/com/jocmp/capy/articles/Podcast.kt
@@ -0,0 +1,10 @@
+package com.jocmp.capy.articles
+<
9E88
br>
+import com.jocmp.capy.Enclosure
+
+data class Podcast(
+    val articleID: String,
+    val title: String,
+    val feedName: String,
+    val enclosure: Enclosure
+)
diff --git a/gradle/libs.versions.toml b/gradle/libs.versions.toml
@@ -7,6 +7,7 @@ kotlin = "2.1.0"
 ksp = "2.1.0-1.0.29"
 androidx-lifecycle-runtime = "2.9.1"
 androidx-adaptive = "1.1.0"
+media3 = "1.7.1"
 mockk = "1.14.2"
 navigation-compose = "2.9.0"
 okhttp = "4.12.0"
@@ -33,6 +34,7 @@ androidx-material = { module = "com.google.android.material:material", version =
 androidx-material-icons-extended = { module = "androidx.compose.material:material-icons-extended" }
 androidx-material3 = { module = "androidx.compose.material3:material3", version = "1.3.2" }
 androidx-material3-window-size = { module = "androidx.compose.material3:material3-window-size-class-android", version = "1.3.2" }
+androidx-media3-datasource-okhttp = { module = "androidx.media3:media3-datasource-okhttp", version.ref = "media3" }
 androidx-navigation-compose = { module = "androidx.navigation:navigation-compose", version.ref = "navigation-compose" }
 androidx-paging-compose = { module = "androidx.paging:paging-compose", version.ref = "paging-compose" }
 androidx-paging-runtime-ktx = { module = "androidx.paging:paging-runtime-ktx", version.ref = "androidx-paging" }