Merge pull request #928 from Corvus400/bug/fix_export_image_display_c…

…orruption_profile_card_when_small_phone 🔧 This addresses the case where the image of the ProfileCard used for sharing on SNS etc. is corrupted in some cases.
DroidKaigi · Sep 3, 2024 · 7896b10 · 7896b10
2 parents 27e8386 + b2e607b
commit 7896b10
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 27 deletions.
diff --git a/...onMain/kotlin/io/github/droidkaigi/confsched/profilecard/component/CaptureableCardBack.kt b/...onMain/kotlin/io/github/droidkaigi/confsched/profilecard/component/CaptureableCardBack.kt
@@ -5,6 +5,7 @@ import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
@@ -18,6 +19,8 @@ import androidx.compose.ui.graphics.graphicsLayer
 import androidx.compose.ui.graphics.layer.GraphicsLayer
 import androidx.compose.ui.graphics.layer.drawLayer
 import androidx.compose.ui.graphics.rememberGraphicsLayer
+import androidx.compose.ui.platform.LocalDensity
+import androidx.compose.ui.unit.Density
 import androidx.compose.ui.unit.dp
 import co.touchlab.kermit.Logger
 import coil3.compose.AsyncImagePainter
@@ -58,19 +61,26 @@ internal fun BackgroundCapturableCardBack(
                 }
             },
     ) {
-        FlipCardBack(
-            uiState,
-            qrCodeImagePainter,
-            modifier = Modifier
-                .size(width = 300.dp, height = 380.dp)
-                .border(
-                    3.dp,
-                    Color.Black,
-                    RoundedCornerShape(8.dp),
-                )
-                .graphicsLayer {
-                    rotationY = 180f
-                },
-        )
+        CompositionLocalProvider(
+            LocalDensity provides Density(
+                density = 1f,
+                fontScale = 1f,
+            ),
+        ) {
+            FlipCardBack(
+                uiState,
+                qrCodeImagePainter,
+                modifier = Modifier
+                    .size(width = 300.dp, height = 380.dp)
+                    .border(
+                        3.dp,
+                        Color.Black,
+                        RoundedCornerShape(8.dp),
+                    )
+                    .graphicsLayer {
+                        rotationY = 180f
+                    },
+            )
+        }
     }
 }
diff --git a/...nMain/kotlin/io/github/droidkaigi/confsched/profilecard/component/CaptureableCardFront.kt b/...nMain/kotlin/io/github/droidkaigi/confsched/profilecard/component/CaptureableCardFront.kt
@@ -5,6 +5,7 @@ import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
@@ -16,6 +17,8 @@ import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.ImageBitmap
 import androidx.compose.ui.graphics.layer.drawLayer
 import androidx.compose.ui.graphics.rememberGraphicsLayer
+import androidx.compose.ui.platform.LocalDensity
+import androidx.compose.ui.unit.Density
 import androidx.compose.ui.unit.dp
 import co.touchlab.kermit.Logger
 import coil3.compose.AsyncImagePainter
@@ -56,16 +59,23 @@ internal fun BackgroundCapturableCardFront(
                 }
             },
     ) {
-        FlipCardFront(
-            uiState,
-            profileImagePainter,
-            modifier = Modifier
-                .size(width = 300.dp, height = 380.dp)
-                .border(
-                    3.dp,
-                    Color.Black,
-                    RoundedCornerShape(8.dp),
-                ),
-        )
+        CompositionLocalProvider(
+            LocalDensity provides Density(
+                density = 1f,
+                fontScale = 1f,
+            ),
+        ) {
+            FlipCardFront(
+                uiState,
+                profileImagePainter,
+                modifier = Modifier
+                    .size(width = 300.dp, height = 380.dp)
+                    .border(
+                        3.dp,
+                        Color.Black,
+                        RoundedCornerShape(8.dp),
+                    ),
+            )
+        }
     }
 }
diff --git a/...c/commonMain/kotlin/io/github/droidkaigi/confsched/profilecard/component/ShareableCard.kt b/...c/commonMain/kotlin/io/github/droidkaigi/confsched/profilecard/component/ShareableCard.kt
@@ -24,7 +24,6 @@ import androidx.compose.ui.graphics.layer.GraphicsLayer
 import androidx.compose.ui.graphics.layer.drawLayer
 import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.unit.IntSize
-import androidx.compose.ui.unit.dp
 import coil3.compose.AsyncImagePainter
 import com.preat.peekaboo.image.picker.toImageBitmap
 import io.github.droidkaigi.confsched.designsystem.theme.KaigiTheme
@@ -96,6 +95,7 @@ private fun ShareableCardContent(
     val offsetYBackPx = 76f
     val offsetXFrontPx = -136f
     val offsetYFrontPx = -61f
+    val verticalPaddingPx = 30f
 
     val density = LocalDensity.current
 
@@ -108,7 +108,7 @@ private fun ShareableCardContent(
             )
             .background(LocalProfileCardTheme.current.primaryColor),
     ) {
-        Box(modifier = Modifier.padding(vertical = 30.dp)) {
+        Box(modifier = Modifier.padding(vertical = with(density) { verticalPaddingPx.toDp() })) {
             backImage?.let {
                 Image(
                     bitmap = it,