Add support for margins in Webtoon view

On larger tablets, matching the page width to the screen width in
webtoon mode causes eye strain due to the image looking so magnified.
Adding a page margin to the image can resolve this by effectively
scaling the image down.

app/src/main/java/eu/kanade/tachiyomi/data/preference/PreferenceKeys.kt

@@ -51,6 +51,8 @@ object PreferenceKeys {
 
     const val readWithVolumeKeysInverted = "reader_volume_keys_inverted"
 
+    const val webtoonMarginRatio = "margin_ratio"
+
     const val portraitColumns = "pref_library_columns_portrait_key"
 
     const val landscapeColumns = "pref_library_columns_landscape_key"

app/src/main/java/eu/kanade/tachiyomi/data/preference/PreferencesHelper.kt

@@ -79,6 +79,8 @@ class PreferencesHelper(val context: Context) {
 
     fun readWithVolumeKeysInverted() = rxPrefs.getBoolean(Keys.readWithVolumeKeysInverted, false)
 
+    fun marginRatio() = rxPrefs.getInteger(Keys.webtoonMarginRatio, 0)
+
     fun portraitColumns() = rxPrefs.getInteger(Keys.portraitColumns, 0)
 
     fun landscapeColumns() = rxPrefs.getInteger(Keys.landscapeColumns, 0)

app/src/main/java/eu/kanade/tachiyomi/ui/reader/ReaderSettingsSheet.kt

@@ -82,6 +82,7 @@ class ReaderSettingsSheet(private val activity: ReaderActivity) : BottomSheetDia
     private fun initWebtoonPreferences() {
         webtoon_prefs_group.visible()
         crop_borders_webtoon.bindToPreference(preferences.cropBordersWebtoon())
+        margin_ratio_webtoon.bindToPreference(preferences.marginRatio())
     }
 
     /**

app/src/main/java/eu/kanade/tachiyomi/ui/reader/viewer/webtoon/WebtoonConfig.kt

@@ -34,6 +34,9 @@ class WebtoonConfig(preferences: PreferencesHelper = Injekt.get()) {
     var doubleTapAnimDuration = 500
         private set
 
+    var marginRatio = 0f
+        private set
+
     init {
         preferences.readWithTapping()
             .register({ tappingEnabled = it })
@@ -52,6 +55,23 @@ class WebtoonConfig(preferences: PreferencesHelper = Injekt.get()) {
 
         preferences.readWithVolumeKeysInverted()
             .register({ volumeKeysInverted = it })
+
+        preferences.marginRatio()
+            .register({ marginFromPreference(it) }, { imagePropertyChangedListener?.invoke() })
+    }
+
+    private fun marginFromPreference(position: Int) {
+        marginRatio = when (position) {
+            1 -> PageMargin.TEN_PERCENT
+            2 -> PageMargin.TWENTY_FIVE_PERCENT
+            else -> PageMargin.NO_MARGIN
+        }
+    }
+
+    object PageMargin {
+        const val NO_MARGIN = 0f
+        const val TEN_PERCENT = 0.1f
+        const val TWENTY_FIVE_PERCENT = 0.25f
     }
 
     fun unsubscribe() {

app/src/main/java/eu/kanade/tachiyomi/ui/reader/viewer/webtoon/WebtoonPageHolder.kt

@@ -2,11 +2,13 @@ package eu.kanade.tachiyomi.ui.reader.viewer.webtoon
 
 import android.annotation.SuppressLint
 import android.content.Intent
+import android.content.res.Resources
 import android.graphics.drawable.Drawable
 import android.net.Uri
 import android.support.v7.widget.AppCompatButton
 import android.support.v7.widget.AppCompatImageView
 import android.view.Gravity
+import android.view.View
 import android.view.ViewGroup
 import android.view.ViewGroup.LayoutParams.MATCH_PARENT
 import android.view.ViewGroup.LayoutParams.WRAP_CONTENT
@@ -111,7 +113,7 @@ class WebtoonPageHolder(
     private var readImageHeaderSubscription: Subscription? = null
 
     init {
-        frame.layoutParams = FrameLayout.LayoutParams(MATCH_PARENT, WRAP_CONTENT)
+        refreshLayoutParams()
     }
 
     /**
@@ -120,6 +122,15 @@ class WebtoonPageHolder(
     fun bind(page: ReaderPage) {
         this.page = page
         observeStatus()
+        refreshLayoutParams()
+    }
+
+    private fun refreshLayoutParams() {
+        frame.layoutParams = FrameLayout.LayoutParams(MATCH_PARENT, WRAP_CONTENT).apply {
+            val margin = Resources.getSystem().displayMetrics.widthPixels * viewer.config.marginRatio
+            marginEnd = margin.toInt()
+            marginStart = margin.toInt()
+        }
     }
 
     /**

app/src/main/java/eu/kanade/tachiyomi/ui/reader/viewer/webtoon/WebtoonViewer.kt

@@ -110,6 +110,8 @@ class WebtoonViewer(val activity: ReaderActivity) : BaseViewer {
 
         frame.layoutParams = ViewGroup.LayoutParams(MATCH_PARENT, MATCH_PARENT)
         frame.addView(recycler)
+
+        config.imagePropertyChangedListener = { adapter.notifyDataSetChanged() }
     }
 
     /**

app/src/main/java/eu/kanade/tachiyomi/ui/setting/PreferenceDSL.kt

@@ -3,6 +3,7 @@ package eu.kanade.tachiyomi.ui.setting
 import android.support.graphics.drawable.VectorDrawableCompat
 import android.support.v4.graphics.drawable.DrawableCompat
 import android.support.v7.preference.*
+import eu.kanade.tachiyomi.widget.preference.FloatListPreference
 import eu.kanade.tachiyomi.widget.preference.IntListPreference
 
 @DslMarker
@@ -37,6 +38,10 @@ inline fun PreferenceGroup.intListPreference(block: (@DSL IntListPreference).()
     return initThenAdd(IntListPreference(context), block).also(::initDialog)
 }
 
+inline fun PreferenceGroup.floatListPreference(block: (@DSL FloatListPreference).() -> Unit): FloatListPreference {
+    return initThenAdd(FloatListPreference(context), block).also(::initDialog)
+}
+
 inline fun PreferenceGroup.multiSelectListPreference(block: (@DSL MultiSelectListPreference).() -> Unit): MultiSelectListPreference {
     return initThenAdd(MultiSelectListPreference(context), block).also(::initDialog)
 }

app/src/main/java/eu/kanade/tachiyomi/ui/setting/SettingsReaderController.kt

@@ -112,6 +112,16 @@ class SettingsReaderController : SettingsController() {
                 titleRes = R.string.pref_crop_borders
                 defaultValue = false
             }
+
+            floatListPreference {
+                key = Keys.webtoonMarginRatio
+                titleRes = R.string.pref_reader_theme
+                entriesRes = arrayOf(R.string.webtoon_margin_ratio_0,
+                        R.string.webtoon_margin_ratio_10, R.string.webtoon_margin_ratio_25)
+                entryValues = arrayOf("0", "1", "2")
+                defaultValue = "0"
+                summary = "%s"
+            }
         }
         preferenceCategory {
             titleRes = R.string.pref_reader_navigation

app/src/main/java/eu/kanade/tachiyomi/widget/preference/FloatListPreference.kt

@@ -0,0 +1,26 @@
+package eu.kanade.tachiyomi.widget.preference
+
+import android.content.Context
+import android.support.v7.preference.ListPreference
+import android.util.AttributeSet
+
+class FloatListPreference @JvmOverloads constructor(context: Context, attrs: AttributeSet? = null) :
+        ListPreference(context, attrs) {
+
+    override fun persistString(value: String?): Boolean {
+        return value != null && persistFloat(value.toFloat())
+    }
+
+    override fun getPersistedString(defaultReturnValue: String?): String? {
+        // When the underlying preference is using a PreferenceDataStore, there's no way (for now)
+        // to check if a value is in the store, so we use a most likely unused value as workaround
+        val defaultIntValue = Float.NEGATIVE_INFINITY
+
+        val value = getPersistedFloat(defaultIntValue)
+        return if (value != defaultIntValue) {
+            value.toString()
+        } else {
+            defaultReturnValue
+        }
+    }
+}

app/src/main/res/layout/reader_settings_sheet.xml

@@ -240,6 +240,25 @@
         android:textColor="?android:attr/textColorSecondary"
         app:layout_constraintTop_toBottomOf="@id/webtoon_prefs" />
 
+    <TextView
+        android:id="@+id/margin_ratio_text"
+        android:layout_width="0dp"
+        android:layout_height="wrap_content"
+        android:text="@string/pref_reader_margin"
+        app:layout_constraintLeft_toLeftOf="parent"
+        app:layout_constraintRight_toLeftOf="@id/verticalcenter"
+        app:layout_constraintBaseline_toBaselineOf="@id/margin_ratio_webtoon"/>
+
+    <android.support.v7.widget.AppCompatSpinner
+        android:id="@+id/margin_ratio_webtoon"
+        android:layout_width="0dp"
+        android:layout_height="wrap_content"
+        android:layout_marginTop="16dp"
+        android:entries="@array/margin_ratio"
+        app:layout_constraintLeft_toRightOf="@id/verticalcenter"
+        app:layout_constraintRight_toRightOf="@id/spinner_end"
+        app:layout_constraintTop_toBottomOf="@id/crop_borders_webtoon"/>
+
     <!-- Groups of preferences -->
 
     <android.support.constraint.Group
@@ -255,7 +274,7 @@
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:visibility="gone"
-        app:constraint_referenced_ids="webtoon_prefs,crop_borders_webtoon" />
+        app:constraint_referenced_ids="webtoon_prefs,crop_borders_webtoon,margin_ratio_text,margin_ratio_webtoon" />
 
     <android.support.constraint.Guideline
         android:id="@+id/verticalcenter"

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

@@ -53,6 +53,12 @@
         <item>@string/scale_type_smart_fit</item>
     </string-array>
 
+    <string-array name="margin_ratio">
+        <item>@string/webtoon_margin_ratio_0</item>
+        <item>@string/webtoon_margin_ratio_10</item>
+        <item>@string/webtoon_margin_ratio_25</item>
+    </string-array>
+
     <string-array name="image_scale_type_values">
         <item>1</item>
         <item>2</item>

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

@@ -196,6 +196,7 @@
     <string name="pref_read_with_tapping">Tapping</string>
     <string name="pref_read_with_long_tap">Long tap dialog</string>
     <string name="pref_reader_theme">Background color</string>
+    <string name="pref_reader_margin">Margin ratio</string>
     <string name="white_background">White</string>
     <string name="black_background">Black</string>
     <string name="pref_viewer_type">Default viewer</string>
@@ -230,6 +231,9 @@
     <string name="color_filter_g_value">G</string>
     <string name="color_filter_b_value">B</string>
     <string name="color_filter_a_value">A</string>
+    <string name="webtoon_margin_ratio_0">No margin</string>
+    <string name="webtoon_margin_ratio_10">10%</string>
+    <string name="webtoon_margin_ratio_25">25%</string>
 
 
       <!-- Downloads section -->