Missing page scrubber in PDF reader. Closes #113

Fixes “Darker gray background around PDF in dark mode”. Closes #59

Two Important nuances regarding PSPDFKIT:
Nuance #1.  Adjusting design of PSPDFKIT:
There are 2 ways to change colors of components in the PSPDFKIT - either dynamically at runtime via calls like “pdfThumbnailBar.thumbnailBorderColor” or statically via a “style” property in our app’s style library.
As I’ve discovered for some components color cannot be changed at all programmatically, even though the corresponding API is present (like in case of thumbnailBorderColor). In order not to waste time in the future I would highly advise first trying to change the UI of PSPDFKIT via styles, which seem consistent.

Nuance #2. Scrollbars.
As it turns out the “scrollbarsEnabled(true)” doesn’t really do much when passed via Configuration object to the PdfFragment. It probably works fine when dealing with PdfActivity, but that’s not our case.
Changing properties of parent view to account for the possibility of having a scrollable view child inside of it didn’t help. So the problem is not that the scrollbars are present, but slightly out of frame, nor is it because they are of transparent color.
As it turns out, we have to specifically declare PSPDFKIT style in our styles library and either completely setup all properties for the scrollbars ourselves, or point out to the PSPDFKIT’s own parent style. You would expect the PSPDFKIT kit to use some sensible defaults for the case where no style is specified, but for scrollbars this wasn’t the case.

Upping versionCode 49

app/src/main/java/org/zotero/android/pdf/reader/PdfReaderPspdfKitView.kt

@@ -3,13 +3,17 @@ package org.zotero.android.pdf.reader
 import android.content.res.Resources
 import android.net.Uri
 import android.util.TypedValue
+import android.view.Gravity
+import android.view.ViewGroup
+import android.widget.FrameLayout
 import androidx.appcompat.app.AppCompatActivity
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.viewinterop.AndroidView
 import androidx.fragment.app.FragmentContainerView
+import com.pspdfkit.ui.PdfThumbnailBar
 import org.zotero.android.R
 import org.zotero.android.architecture.ui.CustomLayoutSize
 
@@ -22,18 +26,32 @@ fun PdfReaderPspdfKitView(uri: Uri, viewModel: PdfReaderViewModel) {
     AndroidView(
         modifier = Modifier.fillMaxSize(),
         factory = { context ->
+            val frameLayout = FrameLayout(context)
+
             val containerId = R.id.container
             val fragmentContainerView = FragmentContainerView(context).apply {
                 id = containerId
             }
+            frameLayout.addView(fragmentContainerView)
+
+            val pdfThumbnailBar = PdfThumbnailBar(context)
+            val thumbnailBarLayoutParams = FrameLayout.LayoutParams(
+                ViewGroup.LayoutParams.MATCH_PARENT,
+                ViewGroup.LayoutParams.WRAP_CONTENT
+            )
+            thumbnailBarLayoutParams.gravity = Gravity.BOTTOM
+            pdfThumbnailBar.layoutParams = thumbnailBarLayoutParams
+            frameLayout.addView(pdfThumbnailBar)
+
             viewModel.init(
                 isTablet = layoutType.isTablet(),
                 uri = uri,
                 containerId = fragmentContainerView.id,
                 fragmentManager = fragmentManager,
+                pdfThumbnailBar = pdfThumbnailBar,
                 annotationMaxSideSize = annotationMaxSideSize
             )
-            fragmentContainerView
+            frameLayout
         },
         update = { _ ->
         }

app/src/main/java/org/zotero/android/pdf/reader/PdfReaderViewModel.kt

@@ -5,6 +5,8 @@ import android.graphics.PointF
 import android.graphics.RectF
 import android.net.Uri
 import android.os.Handler
+import android.view.MotionEvent
+import androidx.core.view.isVisible
 import androidx.fragment.app.FragmentManager
 import androidx.fragment.app.commit
 import androidx.lifecycle.viewModelScope
@@ -31,6 +33,7 @@ import com.pspdfkit.document.PdfDocumentLoader
 import com.pspdfkit.listeners.DocumentListener
 import com.pspdfkit.preferences.PSPDFKitPreferences
 import com.pspdfkit.ui.PdfFragment
+import com.pspdfkit.ui.PdfThumbnailBar
 import com.pspdfkit.ui.special_mode.controller.AnnotationCreationController
 import com.pspdfkit.ui.special_mode.controller.AnnotationSelectionController
 import com.pspdfkit.ui.special_mode.controller.AnnotationTool
@@ -155,6 +158,7 @@ class PdfReaderViewModel @Inject constructor(
     private val onSearchStateFlow = MutableStateFlow("")
     private val onCommentChangeFlow = MutableStateFlow<Pair<String, String>?>(null)
     private lateinit var fragmentManager: FragmentManager
+    private lateinit var pdfThumbnailBar: PdfThumbnailBar
     private var isTablet: Boolean = false
 
     private val handler = Handler(context.mainLooper)
@@ -284,9 +288,11 @@ class PdfReaderViewModel @Inject constructor(
         containerId: Int,
         fragmentManager: FragmentManager,
         isTablet: Boolean,
+        pdfThumbnailBar: PdfThumbnailBar,
     ) {
         this.isTablet = isTablet
         this.fragmentManager = fragmentManager
+        this.pdfThumbnailBar = pdfThumbnailBar
         this.containerId = containerId
         this.annotationMaxSideSize = annotationMaxSideSize
 
@@ -311,7 +317,20 @@ class PdfReaderViewModel @Inject constructor(
             override fun onDocumentLoaded(document: PdfDocument) {
                 this@PdfReaderViewModel.onDocumentLoaded(document)
             }
+
+            override fun onPageClick(
+                document: PdfDocument,
+                pageIndex: Int,
+                event: MotionEvent?,
+                pagePosition: PointF?,
+                clickedAnnotation: Annotation?
+            ): Boolean {
+                pdfThumbnailBar.isVisible = !pdfThumbnailBar.isVisible
+                return false
+            }
         })
+
+        this@PdfReaderViewModel.fragment.addDocumentListener(pdfThumbnailBar.documentListener)
         this.fragment.addOnAnnotationCreationModeChangeListener(object:
             AnnotationManager.OnAnnotationCreationModeChangeListener {
             override fun onEnterAnnotationCreationMode(p0: AnnotationCreationController) {
@@ -420,6 +439,8 @@ class PdfReaderViewModel @Inject constructor(
         fragment.addOnAnnotationDeselectedListener { annotation, _ ->
             deselectSelectedAnnotation(annotation)
         }
+        pdfThumbnailBar.setOnPageChangedListener { _, pageIndex: Int -> fragment.pageIndex = pageIndex }
+        pdfThumbnailBar.setDocument(document, fragment.configuration)
     }
 
     private fun initState() {
@@ -1559,7 +1580,6 @@ class PdfReaderViewModel @Inject constructor(
     }
 
     private fun generatePdfConfiguration(pdfSettings: PDFSettings): PdfConfiguration {
-
         if (!PSPDFKitPreferences.get(context).isAnnotationCreatorSet) {
             PSPDFKitPreferences.get(context).setAnnotationCreator(viewState.displayName)
         }
@@ -1598,6 +1618,7 @@ class PdfReaderViewModel @Inject constructor(
 //            .disableAnnotationRotation()
 //            .setSelectedAnnotationResizeEnabled(false)
             .autosaveEnabled(false)
+            .scrollbarsEnabled(true)
             .build()
     }
 
@@ -1873,7 +1894,18 @@ class PdfReaderViewModel @Inject constructor(
                 }
 
             }
+            override fun onPageClick(
+                document: PdfDocument,
+                pageIndex: Int,
+                event: MotionEvent?,
+                pagePosition: PointF?,
+                clickedAnnotation: Annotation?
+            ): Boolean {
+                pdfThumbnailBar.isVisible = !pdfThumbnailBar.isVisible
+                return false
+            }
         })
+        this@PdfReaderViewModel.fragment.addDocumentListener(pdfThumbnailBar.documentListener)
         this.fragment.addOnAnnotationCreationModeChangeListener(object:
             AnnotationManager.OnAnnotationCreationModeChangeListener {
             override fun onEnterAnnotationCreationMode(p0: AnnotationCreationController) {

app/src/main/res/values-night-v23/styles.xml

@@ -11,5 +11,11 @@
         <item name="checkboxColor">@color/checkbox_dark</item>
         <item name="chatTextColor">@color/white</item>
         <item name="elevationOverlayEnabled">false</item>
+
+        <item name="pspdf__documentViewStyle">@style/CustomPspdfDocumentViewStyleDark</item>
+        <item name="pspdf__thumbnailBarStyle">@style/CustomPspdfThumbnailBarStyle</item>
+        <item name="pspdf__backgroundColor">@color/pdf_view_background_color</item>
+    </style>
+    <style name="CustomPspdfDocumentViewStyleDark" parent="@style/PSPDFKit.DocumentView.Dark">
     </style>
 </resources>

app/src/main/res/values-night/colors.xml

@@ -29,4 +29,6 @@
     <color name="pdf_annotations_topbar_background">#282828</color>
     <color name="zoteroDefaultBlue">#FF4072E5</color>
     <color name="zoteroBlueWithDarkMode">#FF335BB8</color>
+    <color name="pdf_scrubber_background">#FF2D2D2D</color>
+    <color name="pdf_view_background_color">#FF1C1C1E</color>
 </resources>

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

@@ -62,4 +62,6 @@
     <color name="pdf_annotations_divider_background">#E4E4E7</color>
     <color name="pdf_annotations_body_text">#77767B</color>
     <color name="pdf_annotations_topbar_background">#FAFAFD</color>
+    <color name="pdf_scrubber_background">#FFE8E8ED</color>
+    <color name="pdf_view_background_color">#FFF2F2F7</color>
 </resources>

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

@@ -33,6 +33,17 @@
 
     <style name="AppTheme" parent="BaseTheme">
         <!-- Customize your theme here. -->
+        <item name="pspdf__documentViewStyle">@style/CustomPspdfDocumentViewStyle</item>
+        <item name="pspdf__thumbnailBarStyle">@style/CustomPspdfThumbnailBarStyle</item>
+        <item name="pspdf__backgroundColor">@color/pdf_view_background_color</item>
+    </style>
+
+    <style name="CustomPspdfThumbnailBarStyle" parent="@style/PSPDFKit.ThumbnailBar">
+        <item name="pspdf__thumbnailSelectedBorderColor">#FF0A84FF</item>
+        <item name="pspdf__backgroundColor">@color/pdf_scrubber_background</item>
+    </style>
+
+    <style name="CustomPspdfDocumentViewStyle" parent="@style/PSPDFKit.DocumentView">
     </style>
 
     <style name="ShapeAppearance.Custom.SmallComponent" parent="ShapeAppearance.MaterialComponents.SmallComponent">

buildSrc/src/main/kotlin/BuildConfig.kt

@@ -4,7 +4,7 @@ object BuildConfig {
     const val compileSdkVersion = 34
     const val targetSdk = 33
 
-    val versionCode = 48 // Must be updated on every build
+    val versionCode = 49 // Must be updated on every build
     val version = Version(
         major = 1,
         minor = 0,