Adding button to crop borders (only for webtoons) in reader bar

And because I can't cherry pick things, I spite myself by using a different icon for non cropped mode AND its having an animation to and from crop mode.

Co-Authored-By: arkon <4098258+arkon@users.noreply.github.com>

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

@@ -41,7 +41,7 @@ fun <T> com.tfcporciuncula.flow.Preference<T>.asImmediateFlow(scope: CoroutineSc
         .launchIn(scope)
 }
 
-fun Preference<Boolean>.invert(): Boolean = getOrDefault().let { set(!it); !it }
+fun com.tfcporciuncula.flow.Preference<Boolean>.toggle() = set(!get())
 
 private class DateFormatConverter : Preference.Adapter<DateFormat> {
     override fun get(key: String, preferences: SharedPreferences): DateFormat {

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

@@ -9,6 +9,7 @@ import android.content.res.ColorStateList
 import android.content.res.Configuration
 import android.graphics.Bitmap
 import android.graphics.Color
+import android.graphics.drawable.AnimatedVectorDrawable
 import android.graphics.drawable.LayerDrawable
 import android.os.Build
 import android.os.Bundle
@@ -36,6 +37,7 @@ import eu.kanade.tachiyomi.R
 import eu.kanade.tachiyomi.data.database.models.Chapter
 import eu.kanade.tachiyomi.data.database.models.Manga
 import eu.kanade.tachiyomi.data.preference.PreferencesHelper
+import eu.kanade.tachiyomi.data.preference.toggle
 import eu.kanade.tachiyomi.databinding.ReaderActivityBinding
 import eu.kanade.tachiyomi.source.model.Page
 import eu.kanade.tachiyomi.ui.base.MaterialMenuSheet
@@ -73,6 +75,7 @@ import eu.kanade.tachiyomi.util.system.openInBrowser
 import eu.kanade.tachiyomi.util.system.setThemeAndNight
 import eu.kanade.tachiyomi.util.system.toast
 import eu.kanade.tachiyomi.util.view.collapse
+import eu.kanade.tachiyomi.util.view.compatToolTipText
 import eu.kanade.tachiyomi.util.view.doOnApplyWindowInsets
 import eu.kanade.tachiyomi.util.view.gone
 import eu.kanade.tachiyomi.util.view.hide
@@ -349,13 +352,37 @@ class ReaderActivity :
                 else R.drawable.ic_book_open_variant_24dp
             )
         )
-        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
+        binding.chaptersSheet.doublePage.compatToolTipText =
-            binding.chaptersSheet.doublePage.tooltipText =
             getString(
                 if (isDoublePage) R.string.switch_to_single
                 else R.string.switch_to_double
             )
     }
+
+    private fun updateCropBordersShortcut() {
+        val isPagerType = viewer is PagerViewer || (viewer as? WebtoonViewer)?.hasMargins == true
+        val enabled = if (isPagerType) {
+            preferences.cropBorders().get()
+        } else {
+            preferences.cropBordersWebtoon().get()
+        }
+
+        with(binding.chaptersSheet.cropBordersSheetButton) {
+            setImageResource(
+                if (enabled) {
+                    R.drawable.free_to_crop
+                } else {
+                    R.drawable.crop_to_free
+                }
+            )
+            val animDrawable = drawable as AnimatedVectorDrawable
+            animDrawable.start()
+            compatToolTipText =
+                getString(
+                    if (enabled) R.string.remove_crop
+                    else R.string.crop_borders
+                )
+        }
     }
 
     /**
@@ -500,6 +527,20 @@ class ReaderActivity :
                 preferences.pageLayout().set(1 - preferences.pageLayout().get())
             }
         }
+        binding.chaptersSheet.cropBordersSheetButton.setOnClickListener {
+            (viewer as? WebtoonViewer)?.let {
+                val pref = if (it.hasMargins) preferences.cropBorders() else preferences.cropBordersWebtoon()
+                pref.toggle()
+            }
+        }
+
+        listOf(preferences.cropBorders(), preferences.cropBordersWebtoon())
+            .forEach { pref ->
+                pref.asFlow()
+                    .onEach { updateCropBordersShortcut() }
+                    .launchIn(scope)
+            }
+
         binding.chaptersSheet.shiftPageButton.setOnClickListener {
             shiftDoublePages()
         }
@@ -708,7 +749,6 @@ class ReaderActivity :
         val prevViewer = viewer
         val noDefault = manga.viewer == -1
         val mangaViewer = presenter.getMangaViewer()
-        invalidateOptionsMenu()
         val newViewer = when (mangaViewer) {
             RIGHT_TO_LEFT -> R2LPagerViewer(this)
             VERTICAL -> VerticalPagerViewer(this)
@@ -745,6 +785,7 @@ class ReaderActivity :
         }
         viewer = newViewer
         binding.chaptersSheet.doublePage.isVisible = viewer is PagerViewer
+        binding.chaptersSheet.cropBordersSheetButton.isVisible = viewer !is PagerViewer
         binding.viewerContainer.addView(newViewer.getView())
 
         if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
@@ -780,6 +821,7 @@ class ReaderActivity :
         binding.pleaseWait.visible()
         binding.pleaseWait.startAnimation(AnimationUtils.loadAnimation(this, R.anim.fade_in_long))
         invalidateOptionsMenu()
+        updateCropBordersShortcut()
     }
 
     override fun onPause() {

app/src/main/res/drawable/crop_to_free.xml

@@ -0,0 +1,45 @@
+<animated-vector
+    xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:aapt="http://schemas.android.com/aapt">
+    <aapt:attr name="android:drawable">
+        <vector
+            android:name="vector"
+            android:width="24dp"
+            android:height="24dp"
+            android:viewportWidth="24"
+            android:viewportHeight="24">
+            <path
+                android:name="path"
+                android:pathData="M 19 7 C 19 5.9 18.1 5 17 5 L 9 5 L 9 7 L 17 7 L 17 15 L 17 15 L 19 15 L 19 7 M 7 1 L 5 1 L 5 5 L 1 5 L 1 7 L 5 7 L 5 17 C 5 18.1 5.9 19 7 19 L 17 19 L 17 23 L 19 23 L 19 19 L 23 19 L 23 17 L 7 17 L 7 17 L 7 1"
+                android:fillColor="#000000"/>
+            <path
+                android:name="path_1"
+                android:pathData="M 19 19 L 15 19 L 15 21 L 19 21 C 20.1 21 21 20.1 21 19 L 21 15 L 19 15 M 3 5 L 3 9 L 5 9 L 5 5 L 9 5 L 9 3 L 5 3 C 3.9 3 3 3.9 3 5 Z"
+                android:fillColor="#000000"
+                android:fillAlpha="0"/>
+        </vector>
+    </aapt:attr>
+    <target android:name="path">
+        <aapt:attr name="android:animation">
+            <objectAnimator
+                android:propertyName="pathData"
+                android:duration="300"
+                android:valueFrom="M 19 7 C 19 5.9 18.1 5 17 5 L 9 5 L 9 7 L 17 7 L 17 15 L 17 15 L 19 15 L 19 7 M 7 1 L 5 1 L 5 5 L 1 5 L 1 7 L 5 7 L 5 17 C 5 18.1 5.9 19 7 19 L 17 19 L 17 23 L 19 23 L 19 19 L 23 19 L 23 17 L 7 17 L 7 17 L 7 1"
+                android:valueTo="M 21 5 C 21 3.9 20.1 3 19 3 L 15 3 L 15 5 L 19 5 L 19 9 L 19 9 L 21 9 L 21 5 M 5 15 L 3 15 L 3 16.481 L 3 16.481 L 3 17.649 L 3 17.649 L 3 19 C 3 20.1 3.9 21 5 21 L 6.195 21 L 6.779 21 L 7.753 21 L 8.134 21 L 9 21 L 9 19 L 5 19 L 5 19 L 5 19"
+                android:valueType="pathType"
+                android:interpolator="@android:interpolator/fast_out_slow_in"/>
+        </aapt:attr>
+    </target>
+    <target android:name="path_1">
+        <aapt:attr name="android:animation">
+            <objectAnimator
+                android:propertyName="fillAlpha"
+                android:startOffset="100"
+                android:duration="200"
+                android:valueFrom="0"
+                android:valueTo="1"
+                android:valueType="floatType"
+                android:interpolator="@android:interpolator/fast_out_slow_in"/>
+        </aapt:attr>
+    </target>
+</animated-vector>

app/src/main/res/drawable/free_to_crop.xml

@@ -0,0 +1,43 @@
+<animated-vector
+    xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:aapt="http://schemas.android.com/aapt">
+    <aapt:attr name="android:drawable">
+        <vector
+            android:name="vector"
+            android:width="24dp"
+            android:height="24dp"
+            android:viewportWidth="24"
+            android:viewportHeight="24">
+            <path
+                android:name="path"
+                android:pathData="M 3 5 L 3 9 L 5 9 L 5 5 L 9 5 L 9 3 L 5 3 C 3.9 3 3 3.9 3 5 Z M 5 15 L 3 15 L 3 19 C 3 20.1 3.9 21 5 21 L 9 21 L 9 19 L 5 19 L 5 15 Z M 19 19 L 15 19 L 15 21 L 19 21 C 20.1 21 21 20.1 21 19 L 21 15 L 19 15 L 19 19 Z M 19 3 L 15 3 L 15 5 L 19 5 L 19 9 L 21 9 L 21 5 C 21 3.9 20.1 3 19 3 Z"
+                android:fillColor="#000000"/>
+            <path
+                android:name="path_1"
+                android:pathData="M 19 19 L 15 19 L 15 21 L 19 21 C 20.1 21 21 20.1 21 19 L 21 15 L 19 15 M 3 5 L 3 9 L 5 9 L 5 5 L 9 5 L 9 3 L 5 3 C 3.9 3 3 3.9 3 5 Z"
+                android:fillColor="#000000"/>
+        </vector>
+    </aapt:attr>
+    <target android:name="path">
+        <aapt:attr name="android:animation">
+            <objectAnimator
+                android:propertyName="pathData"
+                android:duration="300"
+                android:valueFrom="M 21 5 C 21 3.9 20.1 3 19 3 L 15 3 L 15 5 L 19 5 L 19 9 L 19 9 L 21 9 L 21 5 M 5 15 L 3 15 L 3 16.481 L 3 16.481 L 3 17.649 L 3 17.649 L 3 19 C 3 20.1 3.9 21 5 21 L 6.195 21 L 6.779 21 L 7.753 21 L 8.134 21 L 9 21 L 9 19 L 5 19 L 5 19 L 5 19"
+                android:valueTo="M 19 7 C 19 5.9 18.1 5 17 5 L 9 5 L 9 7 L 17 7 L 17 15 L 17 15 L 19 15 L 19 7 M 7 1 L 5 1 L 5 5 L 1 5 L 1 7 L 5 7 L 5 17 C 5 18.1 5.9 19 7 19 L 17 19 L 17 23 L 19 23 L 19 19 L 23 19 L 23 17 L 7 17 L 7 17 L 7 1"
+                android:valueType="pathType"
+                android:interpolator="@android:interpolator/fast_out_slow_in"/>
+        </aapt:attr>
+    </target>
+    <target android:name="path_1">
+        <aapt:attr name="android:animation">
+            <objectAnimator
+                android:propertyName="fillAlpha"
+                android:duration="200"
+                android:valueFrom="1"
+                android:valueTo="0"
+                android:valueType="floatType"
+                android:interpolator="@android:interpolator/fast_out_slow_in"/>
+        </aapt:attr>
+    </target>
+</animated-vector>

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

@@ -58,10 +58,28 @@
             app:layout_constraintHorizontal_chainStyle="spread"
             app:layout_constraintBottom_toBottomOf="parent"
             app:layout_constraintStart_toEndOf="@id/chapters_button"
-            app:layout_constraintEnd_toStartOf="@id/double_page"
+            app:layout_constraintEnd_toStartOf="@id/crop_borders_sheet_button"
             app:layout_constraintTop_toTopOf="parent"
             app:srcCompat="@drawable/ic_open_in_webview_24dp" />
 
+        <ImageButton
+            android:id="@+id/crop_borders_sheet_button"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:background="?selectableItemBackgroundBorderless"
+            android:contentDescription="@string/open_in_webview"
+            android:padding="@dimen/material_layout_keylines_screen_edge_margin"
+            app:tint="?actionBarTintColor"
+            android:tooltipText="@string/crop_borders"
+            app:layout_constraintHorizontal_chainStyle="spread"
+            app:layout_constraintBottom_toBottomOf="parent"
+            android:visibility="gone"
+            app:layout_constraintStart_toEndOf="@id/webview_button"
+            app:layout_constraintEnd_toStartOf="@id/double_page"
+            app:layout_constraintTop_toTopOf="parent"
+            tools:visibility="visible"
+            app:srcCompat="@drawable/crop_to_free" />
+
         <ImageButton
             android:id="@+id/double_page"
             android:layout_width="wrap_content"
@@ -73,7 +91,7 @@
             app:layout_constraintHorizontal_chainStyle="spread"
             android:tooltipText="@string/double_pages"
             app:layout_constraintBottom_toBottomOf="parent"
-            app:layout_constraintStart_toEndOf="@id/webview_button"
+            app:layout_constraintStart_toEndOf="@id/crop_borders_sheet_button"
             app:layout_constraintTop_toTopOf="parent"
             app:layout_constraintEnd_toStartOf="@id/shift_page_button"
             app:srcCompat="@drawable/ic_book_open_variant_24dp" />
@@ -93,7 +111,8 @@
             app:layout_constraintStart_toEndOf="@id/double_page"
             app:layout_constraintTop_toTopOf="parent"
             app:layout_constraintEnd_toStartOf="@id/display_options"
-            app:srcCompat="@drawable/ic_page_next_outline_24dp" />
+            app:srcCompat="@drawable/ic_page_next_outline_24dp"
+            tools:visibility="visible" />
 
         <ImageButton
             android:id="@+id/display_options"

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

@@ -329,6 +329,7 @@
         performance</string>
     <string name="invert_double_pages">Invert double pages</string>
     <string name="crop_borders">Crop borders</string>
+    <string name="remove_crop">Remove crop</string>
     <string name="use_custom_brightness">Use custom brightness</string>
     <string name="use_custom_color_filter">Use custom color filter</string>
     <string name="color_filter_blend_mode">Color filter blend mode</string>