Show media buttons in overlay

jocmp · Feb 13, 2025 · a888d2e · a888d2e
1 parent 44372e8
commit a888d2e
Show file tree

Hide file tree

Showing 5 changed files with 91 additions and 53 deletions.
diff --git a/app/src/main/java/com/capyreader/app/ui/articles/list/PullToNextFeedBox.kt b/app/src/main/java/com/capyreader/app/ui/articles/list/PullToNextFeedBox.kt
@@ -1,5 +1,7 @@
 package com.capyreader.app.ui.articles.list
 
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.rounded.KeyboardArrowDown
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
@@ -25,6 +27,7 @@ fun PullToNextFeedBox(
         swipeEnabled = enabled,
         onTriggerThreshold = { triggerThreshold() },
         indicatorAlignment = Alignment.BottomCenter,
+        icon = Icons.Rounded.KeyboardArrowDown,
         modifier = modifier,
     ) {
         content()

diff --git a/app/src/main/java/com/capyreader/app/ui/articles/media/ArticleMediaView.kt b/app/src/main/java/com/capyreader/app/ui/articles/media/ArticleMediaView.kt
@@ -7,7 +7,10 @@ import androidx.compose.animation.fadeIn
 import androidx.compose.animation.fadeOut
 import androidx.compose.animation.shrinkVertically
 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.fillMaxHeight
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
@@ -64,9 +67,7 @@ fun ArticleMediaView(
         onDismissRequest = onDismissRequest,
         showOverlay = showOverlay,
         footer = {
-            if (caption != null) {
-                CaptionOverlay(caption)
-            }
+            CaptionOverlay(caption)
         }
     ) {
         ZoomableAsyncImage(
@@ -166,29 +167,43 @@ fun MediaScaffold(
 }
 
 @Composable
-private fun CaptionOverlay(text: String) {
-    Box(
-        Modifier
+private fun CaptionOverlay(text: String?) {
+    Column(
+        verticalArrangement = Arrangement.spacedBy(8.dp),
+        horizontalAlignment = if (isCompact()) {
+            Alignment.Start
+        } else {
+            Alignment.CenterHorizontally
+        },
+        modifier = Modifier
             .fillMaxWidth()
             .background(Color.Black.copy(alpha = 0.8f))
+            .padding(vertical = 8.dp, horizontal = 16.dp)
     ) {
-        Box(
-            Modifier
-                .align(
-                    if (isCompact()) {
-                        Alignment.TopStart
-                    } else {
-                        Alignment.TopCenter
-                    }
+        if (!text.isNullOrBlank()) {
+            Box(
+                Modifier
+                    .then(
+                        if (isCompact()) {
+                            Modifier.fillMaxWidth()
+                        } else {
+                            Modifier.widthIn(max = 600.dp)
+                        }
+                    )
+            ) {
+                Text(
+                    text,
+                    color = MediaColors.textColor,
+                    modifier = Modifier
+                        .padding(top = 8.dp)
                 )
-                .widthIn(max = 600.dp)
+            }
+        }
+        Row(
+            horizontalArrangement = Arrangement.spacedBy(8.dp),
         ) {
-            Text(
-                text,
-                color = MediaColors.textColor,
-                modifier = Modifier
-                    .padding(16.dp)
-            )
+            MediaSaveButton()
+            MediaShareButton()
         }
     }
 }

diff --git a/app/src/main/java/com/capyreader/app/ui/articles/media/MediaActionButton.kt b/app/src/main/java/com/capyreader/app/ui/articles/media/MediaActionButton.kt
@@ -2,35 +2,17 @@ package com.capyreader.app.ui.articles.media
 
 import androidx.annotation.StringRes
 import androidx.compose.foundation.BorderStroke
-import androidx.compose.foundation.background
-import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.size
-import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.rounded.Save
 import androidx.compose.material3.ButtonDefaults
 import androidx.compose.material3.Icon
 import androidx.compose.material3.OutlinedButton
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.vector.ImageVector
 import androidx.compose.ui.res.stringResource
-import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
-import com.capyreader.app.R
-
-@Composable
-fun SaveButton(
-    onClick: () -> Unit,
-) {
-    MediaActionButton(
-        onClick = onClick,
-        text = R.string.media_save,
-        icon = Icons.Rounded.Save,
-    )
-}
 
 @Composable
 fun MediaActionButton(
@@ -64,17 +46,3 @@ private fun borderStroke(): BorderStroke {
         color = MediaColors.buttonContentColor
     )
 }
-
-@Preview
-@Composable
-fun SaveButtonPreview() {
-    Box(
-        Modifier.background(Color.Cyan)
-    ) {
-        Box(
-            Modifier.background(Color.Black.copy(alpha = 0.8f)),
-        ) {
-            SaveButton { }
-        }
-    }
-}
diff --git a/app/src/main/java/com/capyreader/app/ui/articles/media/MediaSaveButton.kt b/app/src/main/java/com/capyreader/app/ui/articles/media/MediaSaveButton.kt
@@ -0,0 +1,36 @@
+package com.capyreader.app.ui.articles.media
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.rounded.Save
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.tooling.preview.Preview
+import com.capyreader.app.R
+
+@Composable
+fun MediaSaveButton() {
+    MediaActionButton(
+        onClick = {
+        },
+        text = R.string.media_save,
+        icon = Icons.Rounded.Save,
+    )
+}
+
+
+@Preview
+@Composable
+fun SaveButtonPreview() {
+    Box(
+        Modifier.background(Color.Cyan)
+    ) {
+        Box(
+            Modifier.background(Color.Black.copy(alpha = 0.8f)),
+        ) {
+            MediaSaveButton()
+        }
+    }
+}
diff --git a/app/src/main/java/com/capyreader/app/ui/articles/media/MediaShareButton.kt b/app/src/main/java/com/capyreader/app/ui/articles/media/MediaShareButton.kt
@@ -0,0 +1,16 @@
+package com.capyreader.app.ui.articles.media
+
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.rounded.Share
+import androidx.compose.runtime.Composable
+import com.capyreader.app.R
+
+@Composable
+fun MediaShareButton() {
+    MediaActionButton(
+        onClick = {
+        },
+        text = R.string.media_share,
+        icon = Icons.Rounded.Share,
+    )
+}