🚀 Images Width(size) option

* Changes the width of the image with corresponding corner roundness and aspect ratio Part-of: #69
2025-01-10 12:09:44 +02:00 · 2025-01-10 12:09:44 +02:00 · 76a1cc6f96
commit 76a1cc6f96
parent cea9da6082
15 changed files with 79 additions and 7 deletions
--- a/app/src/main/java/ua/acclorite/book_story/presentation/core/constants/DataStoreConstants.kt
+++ b/app/src/main/java/ua/acclorite/book_story/presentation/core/constants/DataStoreConstants.kt
@ -51,6 +51,7 @@ object DataStoreConstants {
    val IMAGES = booleanPreferencesKey("images")
    val IMAGES_CORNERS_ROUNDNESS = intPreferencesKey("images_corners_roundness")
    val IMAGES_ALIGNMENT = stringPreferencesKey("images_alignment")
+    val IMAGES_WIDTH = doublePreferencesKey("images_width")

    // Browse settings
    val BROWSE_FILES_STRUCTURE = stringPreferencesKey("browse_files_structure")
--- a/app/src/main/java/ua/acclorite/book_story/presentation/reader/ReaderContent.kt
+++ b/app/src/main/java/ua/acclorite/book_story/presentation/reader/ReaderContent.kt
@ -59,6 +59,7 @@ fun ReaderContent(
    images: Boolean,
    imagesCornersRoundness: Dp,
    imagesAlignment: ReaderImagesAlignment,
+    imagesWidth: Float,
    fontFamily: FontWithName,
    lineHeight: TextUnit,
    fontStyle: FontStyle,
@ -127,6 +128,7 @@ fun ReaderContent(
            images = images,
            imagesCornersRoundness = imagesCornersRoundness,
            imagesAlignment = imagesAlignment,
+            imagesWidth = imagesWidth,
            fontFamily = fontFamily,
            lineHeight = lineHeight,
            fontStyle = fontStyle,
--- a/app/src/main/java/ua/acclorite/book_story/presentation/reader/ReaderLayout.kt
+++ b/app/src/main/java/ua/acclorite/book_story/presentation/reader/ReaderLayout.kt
@ -52,6 +52,7 @@ fun ReaderLayout(
    images: Boolean,
    imagesCornersRoundness: Dp,
    imagesAlignment: ReaderImagesAlignment,
+    imagesWidth: Float,
    fontFamily: FontWithName,
    lineHeight: TextUnit,
    fontStyle: FontStyle,
@ -170,6 +171,7 @@ fun ReaderLayout(
                                entry = entry,
                                imagesCornersRoundness = imagesCornersRoundness,
                                imagesAlignment = imagesAlignment,
+                                imagesWidth = imagesWidth,
                                fontFamily = fontFamily,
                                fontColor = fontColor,
                                lineHeight = lineHeight,
--- a/app/src/main/java/ua/acclorite/book_story/presentation/reader/ReaderLayoutText.kt
+++ b/app/src/main/java/ua/acclorite/book_story/presentation/reader/ReaderLayoutText.kt
@ -22,6 +22,7 @@ fun LazyItemScope.ReaderLayoutText(
    entry: ReaderText,
    imagesCornersRoundness: Dp,
    imagesAlignment: ReaderImagesAlignment,
+    imagesWidth: Float,
    fontFamily: FontWithName,
    fontColor: Color,
    lineHeight: TextUnit,
@ -47,7 +48,8 @@ fun LazyItemScope.ReaderLayoutText(
                entry = entry,
                sidePadding = sidePadding,
                imagesCornersRoundness = imagesCornersRoundness,
-                imagesAlignment = imagesAlignment
+                imagesAlignment = imagesAlignment,
+                imagesWidth = imagesWidth
            )
        }

--- a/app/src/main/java/ua/acclorite/book_story/presentation/reader/ReaderLayoutTextImage.kt
+++ b/app/src/main/java/ua/acclorite/book_story/presentation/reader/ReaderLayoutTextImage.kt
@ -9,6 +9,7 @@ import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
+import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.unit.Dp
 import ua.acclorite.book_story.domain.reader.ReaderImagesAlignment
 import ua.acclorite.book_story.domain.reader.ReaderText
@ -18,7 +19,8 @@ fun LazyItemScope.ReaderLayoutTextImage(
    entry: ReaderText.Image,
    sidePadding: Dp,
    imagesCornersRoundness: Dp,
-    imagesAlignment: ReaderImagesAlignment
+    imagesAlignment: ReaderImagesAlignment,
+    imagesWidth: Float
 ) {
    Box(
        modifier = Modifier
@ -31,9 +33,12 @@ fun LazyItemScope.ReaderLayoutTextImage(
        contentAlignment = imagesAlignment.alignment
    ) {
        Image(
-            modifier = Modifier.clip(RoundedCornerShape(imagesCornersRoundness)),
+            modifier = Modifier
+                .clip(RoundedCornerShape(imagesCornersRoundness))
+                .fillMaxWidth(imagesWidth),
            bitmap = entry.imageBitmap,
-            contentDescription = null
+            contentDescription = null,
+            contentScale = ContentScale.FillWidth
        )
    }
 }
--- a/app/src/main/java/ua/acclorite/book_story/presentation/reader/ReaderScaffold.kt
+++ b/app/src/main/java/ua/acclorite/book_story/presentation/reader/ReaderScaffold.kt
@ -63,6 +63,7 @@ fun ReaderScaffold(
    images: Boolean,
    imagesCornersRoundness: Dp,
    imagesAlignment: ReaderImagesAlignment,
+    imagesWidth: Float,
    fontFamily: FontWithName,
    lineHeight: TextUnit,
    fontStyle: FontStyle,
@ -158,6 +159,7 @@ fun ReaderScaffold(
            images = images,
            imagesCornersRoundness = imagesCornersRoundness,
            imagesAlignment = imagesAlignment,
+            imagesWidth = imagesWidth,
            fontFamily = fontFamily,
            lineHeight = lineHeight,
            fontStyle = fontStyle,
--- a/app/src/main/java/ua/acclorite/book_story/presentation/settings/reader/images/ImagesSubcategory.kt
+++ b/app/src/main/java/ua/acclorite/book_story/presentation/settings/reader/images/ImagesSubcategory.kt
@ -12,6 +12,7 @@ import ua.acclorite.book_story.presentation.settings.components.SettingsSubcateg
 import ua.acclorite.book_story.presentation.settings.reader.images.components.ImagesAlignmentOption
 import ua.acclorite.book_story.presentation.settings.reader.images.components.ImagesCornersRoundnessOption
 import ua.acclorite.book_story.presentation.settings.reader.images.components.ImagesOption
+import ua.acclorite.book_story.presentation.settings.reader.images.components.ImagesWidthOption

 fun LazyListScope.ImagesSubcategory(
    titleColor: @Composable () -> Color = { MaterialTheme.colorScheme.primary },
@ -36,5 +37,9 @@ fun LazyListScope.ImagesSubcategory(
        item {
            ImagesAlignmentOption()
        }
+
+        item {
+            ImagesWidthOption()
+        }
    }
 }
--- a/app/src/main/java/ua/acclorite/book_story/presentation/settings/reader/images/components/ImagesCornersRoundnessOption.kt
+++ b/app/src/main/java/ua/acclorite/book_story/presentation/settings/reader/images/components/ImagesCornersRoundnessOption.kt
@ -19,7 +19,7 @@ fun ImagesCornersRoundnessOption() {
        SliderWithTitle(
            value = state.value.imagesCornersRoundness to "pt",
            fromValue = 0,
-            toValue = 16,
+            toValue = 24,
            title = stringResource(id = R.string.images_corners_roundness_option),
            onValueChange = {
                mainModel.onEvent(
--- a/app/src/main/java/ua/acclorite/book_story/presentation/settings/reader/images/components/ImagesWidthOption.kt
+++ b/app/src/main/java/ua/acclorite/book_story/presentation/settings/reader/images/components/ImagesWidthOption.kt
@ -0,0 +1,30 @@
+package ua.acclorite.book_story.presentation.settings.reader.images.components
+
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.res.stringResource
+import androidx.hilt.navigation.compose.hiltViewModel
+import androidx.lifecycle.compose.collectAsStateWithLifecycle
+import ua.acclorite.book_story.R
+import ua.acclorite.book_story.presentation.core.components.settings.SliderWithTitle
+import ua.acclorite.book_story.ui.main.MainEvent
+import ua.acclorite.book_story.ui.main.MainModel
+import ua.acclorite.book_story.ui.theme.ExpandingTransition
+
+@Composable
+fun ImagesWidthOption() {
+    val mainModel = hiltViewModel<MainModel>()
+    val state = mainModel.state.collectAsStateWithLifecycle()
+
+    ExpandingTransition(visible = state.value.images) {
+        SliderWithTitle(
+            value = state.value.imagesWidth to "%",
+            toValue = 100,
+            title = stringResource(id = R.string.images_width_option),
+            onValueChange = {
+                mainModel.onEvent(
+                    MainEvent.OnChangeImagesWidth(it)
+                )
+            }
+        )
+    }
+}
--- a/app/src/main/java/ua/acclorite/book_story/ui/main/MainEvent.kt
+++ b/app/src/main/java/ua/acclorite/book_story/ui/main/MainEvent.kt
@ -53,4 +53,5 @@ sealed class MainEvent {
    data class OnChangeImages(val value: Boolean) : MainEvent()
    data class OnChangeImagesCornersRoundness(val value: Int) : MainEvent()
    data class OnChangeImagesAlignment(val value: String) : MainEvent()
+    data class OnChangeImagesWidth(val value: Float) : MainEvent()
 }
--- a/app/src/main/java/ua/acclorite/book_story/ui/main/MainModel.kt
+++ b/app/src/main/java/ua/acclorite/book_story/ui/main/MainModel.kt
@ -447,6 +447,14 @@ class MainModel @Inject constructor(
                    it.copy(imagesAlignment = this.toImagesAlignment())
                }
            )
+
+            is MainEvent.OnChangeImagesWidth -> handleDatastoreUpdate(
+                key = DataStoreConstants.IMAGES_WIDTH,
+                value = event.value.toDouble(),
+                updateState = {
+                    it.copy(imagesWidth = this.toFloat())
+                }
+            )
        }
    }

--- a/app/src/main/java/ua/acclorite/book_story/ui/main/MainState.kt
+++ b/app/src/main/java/ua/acclorite/book_story/ui/main/MainState.kt
@ -98,6 +98,7 @@ data class MainState(
    val images: Boolean = provideDefaultValue { true },
    val imagesCornersRoundness: Int = provideDefaultValue { 8 },
    val imagesAlignment: ReaderImagesAlignment = provideDefaultValue { ReaderImagesAlignment.START },
+    val imagesWidth: Float = provideDefaultValue { 0.8f },

    // Browse Settings
    val browseFilesStructure: BrowseFilesStructure = provideDefaultValue {
@ -327,6 +328,10 @@ data class MainState(
                    imagesAlignment = provideValue(
                        IMAGES_ALIGNMENT, convert = { toImagesAlignment() }
                    ) { imagesAlignment },
+
+                    imagesWidth = provideValue(
+                        IMAGES_WIDTH, convert = { toFloat() }
+                    ) { imagesWidth },
                )
            }
        }
--- a/app/src/main/java/ua/acclorite/book_story/ui/reader/ReaderScreen.kt
+++ b/app/src/main/java/ua/acclorite/book_story/ui/reader/ReaderScreen.kt
@ -184,8 +184,14 @@ data class ReaderScreen(val bookId: Int) : Screen, Parcelable {
                ReaderTextAlignment.END -> Alignment.End
            }
        }
-        val imagesCornersRoundness = remember(mainState.value.imagesCornersRoundness) {
-            (mainState.value.imagesCornersRoundness * 3).dp
+        val imagesWidth = remember(mainState.value.imagesWidth) {
+            mainState.value.imagesWidth.coerceAtLeast(0.01f)
+        }
+        val imagesCornersRoundness = remember(
+            mainState.value.imagesCornersRoundness,
+            mainState.value.imagesWidth
+        ) {
+            (mainState.value.imagesCornersRoundness * 3 * imagesWidth).dp
        }

        val layoutDirection = LocalLayoutDirection.current
@ -343,6 +349,7 @@ data class ReaderScreen(val bookId: Int) : Screen, Parcelable {
            images = mainState.value.images,
            imagesCornersRoundness = imagesCornersRoundness,
            imagesAlignment = mainState.value.imagesAlignment,
+            imagesWidth = imagesWidth,
            fontFamily = fontFamily,
            lineHeight = lineHeight,
            fontStyle = fontStyle,
--- a/app/src/main/res/values-uk/strings.xml
+++ b/app/src/main/res/values-uk/strings.xml
@ -201,6 +201,7 @@
    <string name="images_option_desc">Показувати зображення разом із написами до них</string>
    <string name="images_corners_roundness_option">Округлість кутків</string>
    <string name="images_alignment_option">Розташування</string>
+    <string name="images_width_option">Розмір</string>

    <!-- Browse -->
    <string name="browse_files_structure_option">Структура файлів</string>
--- a/app/src/main/res/values/strings.xml
+++ b/app/src/main/res/values/strings.xml
@ -256,6 +256,7 @@
    <string name="images_option_desc">Display images along with their captions</string>
    <string name="images_corners_roundness_option">Corners roundness</string>
    <string name="images_alignment_option">Alignment</string>
+    <string name="images_width_option">Size</string>

    <!-- Browse -->
    <string name="browse_files_structure_option">Files structure</string>