Gaps between pages in webtoon mode #833

app/build.gradle

@@ -82,7 +82,7 @@ afterEvaluate {
 }
 dependencies {
 	//noinspection GradleDependency
-	implementation('com.github.KotatsuApp:kotatsu-parsers:44ea9fe709') {
+	implementation('com.github.KotatsuApp:kotatsu-parsers:fb387dbcd9') {
 		exclude group: 'org.json', module: 'json'
 	}
 

app/src/main/kotlin/org/koitharu/kotatsu/core/prefs/AppSettings.kt

@@ -405,9 +405,13 @@ class AppSettings @Inject constructor(@ApplicationContext context: Context) {
 	val isRelatedMangaEnabled: Boolean
 		get() = prefs.getBoolean(KEY_RELATED_MANGA, true)
 
-	val isWebtoonZoomEnable: Boolean
+	val isWebtoonZoomEnabled: Boolean
 		get() = prefs.getBoolean(KEY_WEBTOON_ZOOM, true)
 
+	var isWebtoonGapsEnabled: Boolean
+		get() = prefs.getBoolean(KEY_WEBTOON_GAPS, false)
+		set(value) = prefs.edit { putBoolean(KEY_WEBTOON_GAPS, value) }
+
 	@get:FloatRange(from = 0.0, to = 0.5)
 	val defaultWebtoonZoomOut: Float
 		get() = prefs.getInt(KEY_WEBTOON_ZOOM_OUT, 0).coerceIn(0, 50) / 100f
@@ -618,6 +622,7 @@ class AppSettings @Inject constructor(@ApplicationContext context: Context) {
 		const val KEY_LOCAL_LIST_ORDER = "local_order"
 		const val KEY_HISTORY_ORDER = "history_order"
 		const val KEY_FAVORITES_ORDER = "fav_order"
+		const val KEY_WEBTOON_GAPS = "webtoon_gaps"
 		const val KEY_WEBTOON_ZOOM = "webtoon_zoom"
 		const val KEY_WEBTOON_ZOOM_OUT = "webtoon_zoom_out"
 		const val KEY_PREFETCH_CONTENT = "prefetch_content"

app/src/main/kotlin/org/koitharu/kotatsu/explore/ui/adapter/ExploreAdapterDelegates.kt

@@ -15,6 +15,7 @@ import org.koitharu.kotatsu.core.ui.list.AdapterDelegateClickListenerAdapter
 import org.koitharu.kotatsu.core.ui.list.OnListItemClickListener
 import org.koitharu.kotatsu.core.util.ext.enqueueWith
 import org.koitharu.kotatsu.core.util.ext.newImageRequest
+import org.koitharu.kotatsu.core.util.ext.recyclerView
 import org.koitharu.kotatsu.core.util.ext.setOnContextClickListenerCompat
 import org.koitharu.kotatsu.core.util.ext.setProgressIcon
 import org.koitharu.kotatsu.core.util.ext.source
@@ -64,6 +65,7 @@ fun exploreRecommendationItemAD(
 	val adapter = BaseListAdapter<MangaListModel>()
 		.addDelegate(ListItemType.MANGA_LIST, recommendationMangaItemAD(coil, itemClickListener, lifecycleOwner))
 	binding.pager.adapter = adapter
+	binding.pager.recyclerView?.isNestedScrollingEnabled = false
 	binding.dots.bindToViewPager(binding.pager)
 
 	bind {

app/src/main/kotlin/org/koitharu/kotatsu/reader/ui/ReaderViewModel.kt

@@ -130,6 +130,12 @@ class ReaderViewModel @Inject constructor(
 	val isWebtoonZooEnabled = observeIsWebtoonZoomEnabled()
 		.stateIn(viewModelScope + Dispatchers.Default, SharingStarted.Lazily, false)
 
+	val isWebtoonGapsEnabled = settings.observeAsStateFlow(
+		scope = viewModelScope + Dispatchers.Default,
+		key = AppSettings.KEY_WEBTOON_GAPS,
+		valueProducer = { isWebtoonGapsEnabled },
+	)
+
 	val defaultWebtoonZoomOut = observeIsWebtoonZoomEnabled().flatMapLatest {
 		if (it) {
 			observeWebtoonZoomOut()
@@ -455,7 +461,7 @@ class ReaderViewModel @Inject constructor(
 
 	private fun observeIsWebtoonZoomEnabled() = settings.observeAsFlow(
 		key = AppSettings.KEY_WEBTOON_ZOOM,
-		valueProducer = { isWebtoonZoomEnable },
+		valueProducer = { isWebtoonZoomEnabled },
 	)
 
 	private fun observeWebtoonZoomOut() = settings.observeAsFlow(

app/src/main/kotlin/org/koitharu/kotatsu/reader/ui/pager/webtoon/WebtoonGapsDecoration.kt

@@ -0,0 +1,30 @@
+package org.koitharu.kotatsu.reader.ui.pager.webtoon
+
+import android.content.Context
+import android.graphics.Rect
+import android.view.View
+import androidx.recyclerview.widget.RecyclerView
+import org.koitharu.kotatsu.R
+
+class WebtoonGapsDecoration : RecyclerView.ItemDecoration() {
+
+	private var gapSize = -1
+
+	override fun getItemOffsets(outRect: Rect, view: View, parent: RecyclerView, state: RecyclerView.State) {
+		super.getItemOffsets(outRect, view, parent, state)
+		val position = parent.getChildAdapterPosition(view)
+		if (position > 0) {
+			outRect.top = getGap(parent.context)
+		}
+	}
+
+	private fun getGap(context: Context): Int {
+		return if (gapSize == -1) {
+			context.resources.getDimensionPixelOffset(R.dimen.webtoon_pages_gap).also {
+				gapSize = it
+			}
+		} else {
+			gapSize
+		}
+	}
+}

app/src/main/kotlin/org/koitharu/kotatsu/reader/ui/pager/webtoon/WebtoonReaderFragment.kt

@@ -16,6 +16,7 @@ import org.koitharu.kotatsu.core.ui.list.lifecycle.RecyclerViewLifecycleDispatch
 import org.koitharu.kotatsu.core.util.ext.findCenterViewPosition
 import org.koitharu.kotatsu.core.util.ext.firstVisibleItemPosition
 import org.koitharu.kotatsu.core.util.ext.observe
+import org.koitharu.kotatsu.core.util.ext.removeItemDecoration
 import org.koitharu.kotatsu.databinding.FragmentReaderWebtoonBinding
 import org.koitharu.kotatsu.reader.domain.PageLoader
 import org.koitharu.kotatsu.reader.ui.ReaderState
@@ -59,6 +60,13 @@ class WebtoonReaderFragment : BaseReaderFragment<FragmentReaderWebtoonBinding>()
 		viewModel.defaultWebtoonZoomOut.take(1).observe(viewLifecycleOwner) {
 			binding.frame.zoom = 1f - it
 		}
+		viewModel.isWebtoonGapsEnabled.observe(viewLifecycleOwner) {
+			val rv = binding.recyclerView
+			rv.removeItemDecoration(WebtoonGapsDecoration::class.java)
+			if (it) {
+				rv.addItemDecoration(WebtoonGapsDecoration())
+			}
+		}
 		viewModel.readerSettings.observe(viewLifecycleOwner) {
 			it.applyBackground(binding.root)
 		}

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

@@ -43,6 +43,7 @@
 	<dimen name="explore_grid_width">120dp</dimen>
 	<dimen name="chapter_grid_width">80dp</dimen>
 	<dimen name="side_card_offset">8dp</dimen>
+	<dimen name="webtoon_pages_gap">24dp</dimen>
 
 	<dimen name="search_suggestions_manga_height">124dp</dimen>
 	<dimen name="search_suggestions_manga_spacing">4dp</dimen>

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

@@ -653,4 +653,6 @@
 	<string name="missing_storage_permission">There is no permission to access manga on external storage</string>
 	<string name="last_used">Last used</string>
 	<string name="show_updated">Show updated</string>
+	<string name="webtoon_gaps">Gaps in webtoon mode</string>
+	<string name="webtoon_gaps_summary">Show vertical gaps between pages in webtoon mode</string>
 </resources>

app/src/main/res/xml/pref_reader.xml

@@ -44,6 +44,12 @@
 		android:summary="@string/reader_zoom_buttons_summary"
 		android:title="@string/reader_zoom_buttons" />
 
+	<SwitchPreferenceCompat
+		android:defaultValue="false"
+		android:key="webtoon_gaps"
+		android:summary="@string/webtoon_gaps_summary"
+		android:title="@string/webtoon_gaps" />
+
 	<Preference
 		android:key="reader_tap_actions"
 		android:persistent="false"