Approximate reading time preview

app/src/main/kotlin/org/koitharu/kotatsu/details/ui/DetailsFragment.kt

@@ -201,10 +201,26 @@ class DetailsFragment :
 
 	private fun onChaptersChanged(chapters: List<ChapterListItem>?) {
 		val infoLayout = requireViewBinding().infoLayout
+		val tv = requireViewBinding().approximateReadTime
 		if (chapters.isNullOrEmpty()) {
 			infoLayout.textViewChapters.isVisible = false
+			tv.text = "..."
 		} else {
 			val count = chapters.countChaptersByBranch()
+
+			// FIXME MAXIMUM HARDCODE!!! To do calculation with user's page read speed and his favourites/history mangas average pages in chapter
+			// Impossible task, I guess. Good luck on this.
+			val averageTime: Int = 20 * 10 * (count) // 20 pages, 10 seconds per page
+			val hours = averageTime / 3600
+			val minutes = averageTime % 3600 / 60
+
+			tv.text = buildString {
+				append(resources.getQuantityString(R.plurals.hour, hours, hours))
+				append(" ")
+				append(resources.getQuantityString(R.plurals.minute, minutes, minutes))
+			}
+
+			// Info
 			infoLayout.textViewChapters.isVisible = true
 			val chaptersText = resources.getQuantityString(R.plurals.chapters, count, count)
 			infoLayout.textViewChapters.text = chaptersText

app/src/main/res/drawable-v23/tabs_background.xml

@@ -4,7 +4,7 @@
 	<item>
 		<shape
 			android:shape="rectangle">
-			<solid android:color="?attr/colorOutline"/>
+			<solid android:color="?attr/colorSurfaceVariant"/>
 		</shape>
 	</item>
 	<!-- ..., then draws a rectangle with the container color to cover the area not for the divider. -->

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

@@ -0,0 +1,11 @@
+<vector
+	xmlns:android="http://schemas.android.com/apk/res/android"
+	android:width="24dp"
+	android:height="24dp"
+	android:tint="#000000"
+	android:viewportWidth="24"
+	android:viewportHeight="24">
+	<path
+		android:fillColor="@android:color/white"
+		android:pathData="M16.24,7.75c-1.17,-1.17 -2.7,-1.76 -4.24,-1.76v6l-4.24,4.24c2.34,2.34 6.14,2.34 8.49,0 2.34,-2.34 2.34,-6.14 -0.01,-8.48zM12,1.99c-5.52,0 -10,4.48 -10,10s4.48,10 10,10 10,-4.48 10,-10 -4.48,-10 -10,-10zM12,19.99c-4.42,0 -8,-3.58 -8,-8s3.58,-8 8,-8 8,3.58 8,8 -3.58,8 -8,8z" />
+</vector>

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

@@ -4,7 +4,7 @@
 	<item>
 		<shape
 			android:shape="rectangle">
-			<solid android:color="@color/kotatsu_outline"/>
+			<solid android:color="@color/kotatsu_surfaceVariant"/>
 		</shape>
 	</item>
 	<!-- ..., then draws a rectangle with the container color to cover the area not for the divider. -->

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

@@ -139,6 +139,51 @@
 			app:layout_constraintStart_toStartOf="parent"
 			app:layout_constraintTop_toBottomOf="@+id/info_layout" />
 
+		<LinearLayout
+			android:id="@+id/approximate_read_time_layout"
+			android:layout_width="0dp"
+			android:layout_height="wrap_content"
+			android:layout_marginTop="@dimen/margin_normal"
+			android:gravity="center_vertical"
+			android:orientation="horizontal"
+			android:paddingHorizontal="16dp"
+			app:layout_constraintEnd_toEndOf="parent"
+			app:layout_constraintStart_toStartOf="parent"
+			app:layout_constraintTop_toBottomOf="@id/chips_tags">
+
+			<ImageView
+				android:layout_width="wrap_content"
+				android:layout_height="wrap_content"
+				android:src="@drawable/ic_timelapse"
+				app:tint="?attr/colorControlNormal" />
+
+			<LinearLayout
+				android:layout_width="match_parent"
+				android:layout_height="wrap_content"
+				android:layout_marginStart="16dp"
+				android:orientation="vertical">
+
+				<TextView
+					android:layout_width="match_parent"
+					android:layout_height="wrap_content"
+					android:ellipsize="end"
+					android:maxLines="1"
+					android:paddingVertical="2dp"
+					android:text="@string/approximate_reading_time"
+					android:textAppearance="?attr/textAppearanceBodyLarge" />
+
+				<TextView
+					android:id="@+id/approximate_read_time"
+					android:layout_width="match_parent"
+					android:layout_height="wrap_content"
+					android:paddingVertical="2dp"
+					android:textAppearance="?attr/textAppearanceBodySmall"
+					tools:text="12 minutes" />
+
+			</LinearLayout>
+
+		</LinearLayout>
+
 		<TextView
 			android:id="@+id/textView_description_title"
 			android:layout_width="0dp"
@@ -153,7 +198,7 @@
 			android:textAppearance="@style/TextAppearance.Kotatsu.SectionHeader"
 			app:layout_constraintEnd_toStartOf="@id/button_description_more"
 			app:layout_constraintStart_toStartOf="parent"
-			app:layout_constraintTop_toBottomOf="@id/chips_tags" />
+			app:layout_constraintTop_toBottomOf="@id/approximate_read_time_layout" />
 
 		<Button
 			android:id="@+id/button_description_more"

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

@@ -28,4 +28,12 @@
 		<item quantity="one">%1$d month ago</item>
 		<item quantity="other">%1$d months ago</item>
 	</plurals>
+	<plurals name="hour">
+		<item quantity="one">%1$d hour</item>
+		<item quantity="other">%1$d hours</item>
+	</plurals>
+	<plurals name="minute">
+		<item quantity="one">%1$d minute</item>
+		<item quantity="other">%1$d minutes</item>
+	</plurals>
 </resources>

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

@@ -559,4 +559,5 @@
     <string name="mark_as_completed">Mark as completed</string>
     <string name="mark_as_completed_prompt">Mark selected manga as completely read?\n\nWarning: current reading progress will be lost.</string>
 	<string name="category_hidden_done">This category was hidden from the main screen and is accessible through Menu → Manage categories</string>
+	<string name="approximate_reading_time">Approximate reading time</string>
 </resources>