From 4a8e1ce7b08c8fef7095e8e51b6044ce836f71e1 Mon Sep 17 00:00:00 2001
From: akesi seli <andongue.nena@gmail.com>
Date: Fri, 15 Nov 2024 08:51:41 +0100
Subject: [PATCH] feat: add button to reveal images in timelines (#106)

---
 .../core/commonui/lemmyui/PostCardImage.kt    | 87 +++++++++++++++++--
 1 file changed, 78 insertions(+), 9 deletions(-)

diff --git a/core/commonui/lemmyui/src/commonMain/kotlin/com/livefast/eattrash/raccoonforlemmy/core/commonui/lemmyui/PostCardImage.kt b/core/commonui/lemmyui/src/commonMain/kotlin/com/livefast/eattrash/raccoonforlemmy/core/commonui/lemmyui/PostCardImage.kt
index 056b69c80..3335b00b9 100644
--- a/core/commonui/lemmyui/src/commonMain/kotlin/com/livefast/eattrash/raccoonforlemmy/core/commonui/lemmyui/PostCardImage.kt
+++ b/core/commonui/lemmyui/src/commonMain/kotlin/com/livefast/eattrash/raccoonforlemmy/core/commonui/lemmyui/PostCardImage.kt
@@ -4,19 +4,37 @@ import androidx.compose.animation.core.InfiniteRepeatableSpec
 import androidx.compose.animation.core.animateFloat
 import androidx.compose.animation.core.rememberInfiniteTransition
 import androidx.compose.animation.core.tween
+import androidx.compose.foundation.border
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.heightIn
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Visibility
+import androidx.compose.material.icons.filled.VisibilityOff
 import androidx.compose.material3.CircularProgressIndicator
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
 import androidx.compose.material3.MaterialTheme
 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
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.FilterQuality
 import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
+import com.livefast.eattrash.raccoonforlemmy.core.appearance.theme.Spacing
 import com.livefast.eattrash.raccoonforlemmy.core.commonui.components.CustomImage
 import com.livefast.eattrash.raccoonforlemmy.core.l10n.messages.LocalStrings
 import com.livefast.eattrash.raccoonforlemmy.core.utils.compose.onClick
@@ -32,22 +50,38 @@ fun PostCardImage(
     blurred: Boolean = false,
     onImageClick: ((String) -> Unit)? = null,
     onDoubleClick: (() -> Unit)? = null,
-    onLongClick: (() -> Unit)? = null,
 ) {
-    if (imageUrl.isNotEmpty()) {
+    if (imageUrl.isEmpty()) {
+        return
+    }
+    var revealing by remember { mutableStateOf(!blurred) }
+
+    Box(
+        modifier =
+            modifier
+                .fillMaxWidth()
+                .heightIn(min = minHeight, max = maxHeight)
+                .onClick(
+                    onDoubleClick = onDoubleClick ?: {},
+                ),
+    ) {
         CustomImage(
             modifier =
-                modifier.fillMaxWidth()
-                    .heightIn(min = minHeight, max = maxHeight)
-                    .onClick(
-                        onClick = { onImageClick?.invoke(imageUrl) },
-                        onDoubleClick = onDoubleClick ?: {},
-                        onLongClick = onLongClick ?: {},
+                Modifier
+                    .fillMaxSize()
+                    .then(
+                        if (onImageClick != null) {
+                            Modifier.clickable {
+                                onImageClick(imageUrl)
+                            }
+                        } else {
+                            Modifier
+                        },
                     ),
             url = imageUrl,
             quality = FilterQuality.Low,
             autoload = autoLoadImages,
-            blurred = blurred,
+            blurred = !revealing,
             loadButtonContent = loadButtonContent,
             contentScale = ContentScale.FillWidth,
             onFailure = {
@@ -80,5 +114,40 @@ fun PostCardImage(
                 )
             },
         )
+        Row(
+            modifier =
+                Modifier.align(Alignment.BottomEnd).padding(
+                    bottom = Spacing.xxs,
+                    end = Spacing.xs,
+                ),
+        ) {
+            val iconModifier =
+                Modifier
+                    .border(
+                        width = Dp.Hairline,
+                        color = MaterialTheme.colorScheme.onBackground,
+                        shape = CircleShape,
+                    ).padding(2.5.dp)
+                    .clip(CircleShape)
+            if (blurred) {
+                IconButton(
+                    onClick = {
+                        revealing = !revealing
+                    },
+                ) {
+                    Icon(
+                        modifier = iconModifier,
+                        imageVector =
+                            if (revealing) {
+                                Icons.Default.VisibilityOff
+                            } else {
+                                Icons.Default.Visibility
+                            },
+                        contentDescription = null,
+                        tint = MaterialTheme.colorScheme.onBackground,
+                    )
+                }
+            }
+        }
     }
 }