🚀 Images Corners Roundness option

* Lets user change the roundness of corners of images

Part-of: #69

app/src/main/java/ua/acclorite/book_story/presentation/core/constants/DataStoreConstants.kt

@@ -48,7 +48,8 @@ object DataStoreConstants {
     val HIGHLIGHTED_READING = booleanPreferencesKey("highlighted_reading")
     val HIGHLIGHTED_READING_THICKNESS = intPreferencesKey("highlighted_reading_thickness")
     val CHAPTER_TITLE_ALIGNMENT = stringPreferencesKey("chapter_title_alignment")
-    val SHOW_IMAGES = booleanPreferencesKey("show_images")
+    val IMAGES = booleanPreferencesKey("images")
+    val IMAGES_CORNERS_ROUNDNESS = intPreferencesKey("images_corners_roundness")
 
     // Browse settings
     val BROWSE_FILES_STRUCTURE = stringPreferencesKey("browse_files_structure")

app/src/main/java/ua/acclorite/book_story/presentation/reader/ReaderContent.kt

@@ -55,7 +55,8 @@ fun ReaderContent(
     bottomBarPadding: Dp,
     backgroundColor: Color,
     fontColor: Color,
-    showImages: Boolean,
+    images: Boolean,
+    imagesCornersRoundness: Dp,
     fontFamily: FontWithName,
     lineHeight: TextUnit,
     fontStyle: FontStyle,
@@ -121,7 +122,8 @@ fun ReaderContent(
             bottomBarPadding = bottomBarPadding,
             backgroundColor = backgroundColor,
             fontColor = fontColor,
-            showImages = showImages,
+            images = images,
+            imagesCornersRoundness = imagesCornersRoundness,
             fontFamily = fontFamily,
             lineHeight = lineHeight,
             fontStyle = fontStyle,

app/src/main/java/ua/acclorite/book_story/presentation/reader/ReaderLayout.kt

@@ -48,7 +48,8 @@ fun ReaderLayout(
     sidePadding: Dp,
     backgroundColor: Color,
     fontColor: Color,
-    showImages: Boolean,
+    images: Boolean,
+    imagesCornersRoundness: Dp,
     fontFamily: FontWithName,
     lineHeight: TextUnit,
     fontStyle: FontStyle,
@@ -155,7 +156,7 @@ fun ReaderLayout(
                 key = { index, entry -> index }
             ) { index, entry ->
                 when {
-                    !showImages && entry is ReaderText.Image -> return@itemsIndexed
+                    !images && entry is ReaderText.Image -> return@itemsIndexed
                     else -> {
                         SpacedItem(
                             index = index,
@@ -165,6 +166,7 @@ fun ReaderLayout(
                                 activity = activity,
                                 showMenu = showMenu,
                                 entry = entry,
+                                imagesCornersRoundness = imagesCornersRoundness,
                                 fontFamily = fontFamily,
                                 fontColor = fontColor,
                                 lineHeight = lineHeight,

app/src/main/java/ua/acclorite/book_story/presentation/reader/ReaderLayoutText.kt

@@ -19,6 +19,7 @@ fun LazyItemScope.ReaderLayoutText(
     activity: ComponentActivity,
     showMenu: Boolean,
     entry: ReaderText,
+    imagesCornersRoundness: Dp,
     fontFamily: FontWithName,
     fontColor: Color,
     lineHeight: TextUnit,
@@ -42,7 +43,8 @@ fun LazyItemScope.ReaderLayoutText(
         is ReaderText.Image -> {
             ReaderLayoutTextImage(
                 entry = entry,
-                sidePadding = sidePadding
+                sidePadding = sidePadding,
+                imagesCornersRoundness = imagesCornersRoundness
             )
         }
 

app/src/main/java/ua/acclorite/book_story/presentation/reader/ReaderLayoutTextImage.kt

@@ -4,8 +4,10 @@ import androidx.compose.foundation.Image
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.lazy.LazyItemScope
+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.ReaderText
@@ -13,7 +15,8 @@ import ua.acclorite.book_story.domain.reader.ReaderText
 @Composable
 fun LazyItemScope.ReaderLayoutTextImage(
     entry: ReaderText.Image,
-    sidePadding: Dp
+    sidePadding: Dp,
+    imagesCornersRoundness: Dp
 ) {
     Image(
         modifier = Modifier
@@ -22,6 +25,7 @@ fun LazyItemScope.ReaderLayoutTextImage(
                 fadeOutSpec = null
             )
             .padding(horizontal = sidePadding)
+            .clip(RoundedCornerShape(imagesCornersRoundness))
             .fillMaxWidth(),
         bitmap = entry.imageBitmap,
         contentDescription = null,

app/src/main/java/ua/acclorite/book_story/presentation/reader/ReaderScaffold.kt

@@ -59,7 +59,8 @@ fun ReaderScaffold(
     bottomBarPadding: Dp,
     backgroundColor: Color,
     fontColor: Color,
-    showImages: Boolean,
+    images: Boolean,
+    imagesCornersRoundness: Dp,
     fontFamily: FontWithName,
     lineHeight: TextUnit,
     fontStyle: FontStyle,
@@ -152,7 +153,8 @@ fun ReaderScaffold(
             sidePadding = sidePadding,
             backgroundColor = backgroundColor,
             fontColor = fontColor,
-            showImages = showImages,
+            images = images,
+            imagesCornersRoundness = imagesCornersRoundness,
             fontFamily = fontFamily,
             lineHeight = lineHeight,
             fontStyle = fontStyle,

app/src/main/java/ua/acclorite/book_story/presentation/settings/reader/images/ImagesSubcategory.kt

@@ -9,7 +9,8 @@ import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.res.stringResource
 import ua.acclorite.book_story.R
 import ua.acclorite.book_story.presentation.settings.components.SettingsSubcategory
-import ua.acclorite.book_story.presentation.settings.reader.images.components.ShowImagesOption
+import ua.acclorite.book_story.presentation.settings.reader.images.components.ImagesCornersRoundnessOption
+import ua.acclorite.book_story.presentation.settings.reader.images.components.ImagesOption
 
 fun LazyListScope.ImagesSubcategory(
     titleColor: @Composable () -> Color = { MaterialTheme.colorScheme.primary },
@@ -24,7 +25,11 @@ fun LazyListScope.ImagesSubcategory(
         showDivider = showDivider
     ) {
         item {
-            ShowImagesOption()
+            ImagesOption()
+        }
+
+        item {
+            ImagesCornersRoundnessOption()
         }
     }
 }

app/src/main/java/ua/acclorite/book_story/presentation/settings/reader/images/components/ImagesCornersRoundnessOption.kt

@@ -0,0 +1,31 @@
+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 ImagesCornersRoundnessOption() {
+    val mainModel = hiltViewModel<MainModel>()
+    val state = mainModel.state.collectAsStateWithLifecycle()
+
+    ExpandingTransition(visible = state.value.images) {
+        SliderWithTitle(
+            value = state.value.imagesCornersRoundness to "pt",
+            fromValue = 0,
+            toValue = 16,
+            title = stringResource(id = R.string.images_corners_roundness_option),
+            onValueChange = {
+                mainModel.onEvent(
+                    MainEvent.OnChangeImagesCornersRoundness(it)
+                )
+            }
+        )
+    }
+}

app/src/main/java/ua/acclorite/book_story/presentation/settings/reader/images/components/ImagesOption.kt

@@ -10,18 +10,18 @@ import ua.acclorite.book_story.ui.main.MainEvent
 import ua.acclorite.book_story.ui.main.MainModel
 
 @Composable
-fun ShowImagesOption() {
+fun ImagesOption() {
     val mainModel = hiltViewModel<MainModel>()
     val state = mainModel.state.collectAsStateWithLifecycle()
 
     SwitchWithTitle(
-        selected = state.value.showImages,
+        selected = state.value.images,
-        title = stringResource(id = R.string.show_images_option),
+        title = stringResource(id = R.string.images_option),
-        description = stringResource(id = R.string.show_images_option_desc),
+        description = stringResource(id = R.string.images_option_desc),
         onClick = {
             mainModel.onEvent(
-                MainEvent.OnChangeShowImages(
+                MainEvent.OnChangeImages(
-                    !state.value.showImages
+                    !state.value.images
                 )
             )
         }

app/src/main/java/ua/acclorite/book_story/ui/main/MainEvent.kt

@@ -50,5 +50,6 @@ sealed class MainEvent {
     data class OnChangeHighlightedReading(val value: Boolean) : MainEvent()
     data class OnChangeHighlightedReadingThickness(val value: Int) : MainEvent()
     data class OnChangeChapterTitleAlignment(val value: String) : MainEvent()
-    data class OnChangeShowImages(val value: Boolean) : MainEvent()
+    data class OnChangeImages(val value: Boolean) : MainEvent()
+    data class OnChangeImagesCornersRoundness(val value: Int) : MainEvent()
 }

app/src/main/java/ua/acclorite/book_story/ui/main/MainModel.kt

@@ -423,11 +423,19 @@ class MainModel @Inject constructor(
                 }
             )
 
-            is MainEvent.OnChangeShowImages -> handleDatastoreUpdate(
+            is MainEvent.OnChangeImages -> handleDatastoreUpdate(
-                key = DataStoreConstants.SHOW_IMAGES,
+                key = DataStoreConstants.IMAGES,
                 value = event.value,
                 updateState = {
-                    it.copy(showImages = this)
+                    it.copy(images = this)
+                }
+            )
+
+            is MainEvent.OnChangeImagesCornersRoundness -> handleDatastoreUpdate(
+                key = DataStoreConstants.IMAGES_CORNERS_ROUNDNESS,
+                value = event.value,
+                updateState = {
+                    it.copy(imagesCornersRoundness = this)
                 }
             )
         }

app/src/main/java/ua/acclorite/book_story/ui/main/MainState.kt

@@ -93,7 +93,8 @@ data class MainState(
     val highlightedReading: Boolean = provideDefaultValue { false },
     val highlightedReadingThickness: Int = provideDefaultValue { 2 },
     val chapterTitleAlignment: ReaderTextAlignment = provideDefaultValue { ReaderTextAlignment.JUSTIFY },
-    val showImages: Boolean = provideDefaultValue { true },
+    val images: Boolean = provideDefaultValue { true },
+    val imagesCornersRoundness: Int = provideDefaultValue { 8 },
 
     // Browse Settings
     val browseFilesStructure: BrowseFilesStructure = provideDefaultValue {
@@ -312,9 +313,13 @@ data class MainState(
                         CHAPTER_TITLE_ALIGNMENT, convert = { toTextAlignment() }
                     ) { chapterTitleAlignment },
 
-                    showImages = provideValue(
+                    images = provideValue(
-                        SHOW_IMAGES
+                        IMAGES
-                    ) { showImages },
+                    ) { images },
+
+                    imagesCornersRoundness = provideValue(
+                        IMAGES_CORNERS_ROUNDNESS
+                    ) { imagesCornersRoundness },
                 )
             }
         }

app/src/main/java/ua/acclorite/book_story/ui/reader/ReaderScreen.kt

@@ -184,6 +184,9 @@ data class ReaderScreen(val bookId: Int) : Screen, Parcelable {
                 ReaderTextAlignment.END -> Alignment.End
             }
         }
+        val imagesCornersRoundness = remember(mainState.value.imagesCornersRoundness) {
+            (mainState.value.imagesCornersRoundness * 3).dp
+        }
 
         val layoutDirection = LocalLayoutDirection.current
         val cutoutInsets = WindowInsets.displayCutout
@@ -337,7 +340,8 @@ data class ReaderScreen(val bookId: Int) : Screen, Parcelable {
             bottomBarPadding = bottomBarPadding,
             backgroundColor = backgroundColor.value,
             fontColor = fontColor.value,
-            showImages = mainState.value.showImages,
+            images = mainState.value.images,
+            imagesCornersRoundness = imagesCornersRoundness,
             fontFamily = fontFamily,
             lineHeight = lineHeight,
             fontStyle = fontStyle,

app/src/main/res/values-uk/strings.xml

@@ -197,8 +197,9 @@
     <string name="highlighted_reading_option">Підсвічування слів</string>
     <string name="highlighted_reading_option_desc">Підсвічувати початок кожного слова</string>
     <string name="highlighted_reading_thickness_option">Товщина підсвічування</string>
-    <string name="show_images_option">Показувати зображення</string>
+    <string name="images_option">Зображення</string>
-    <string name="show_images_option_desc">Показати зображення разом із написами до них</string>
+    <string name="images_option_desc">Показувати зображення разом із написами до них</string>
+    <string name="images_corners_roundness_option">Округлість кутків</string>
 
     <!-- Browse -->
     <string name="browse_files_structure_option">Структура файлів</string>

app/src/main/res/values/strings.xml

@@ -252,8 +252,9 @@
     <string name="highlighted_reading_option">Highlight words</string>
     <string name="highlighted_reading_option_desc">Highlight the beginning of each word</string>
     <string name="highlighted_reading_thickness_option">Highlight thickness</string>
-    <string name="show_images_option">Show images</string>
+    <string name="images_option">Images</string>
-    <string name="show_images_option_desc">Display images along with their captions</string>
+    <string name="images_option_desc">Display images along with their captions</string>
+    <string name="images_corners_roundness_option">Corners roundness</string>
 
     <!-- Browse -->
     <string name="browse_files_structure_option">Files structure</string>