From 51bdc79d34f0b4133ff9c64c5208ef9773c28b21 Mon Sep 17 00:00:00 2001
From: Bnyro <bnyro@tutanota.com>
Date: Sat, 5 Nov 2022 18:02:42 +0100
Subject: [PATCH] chapter timestamps

---
 .../libretube/ui/adapters/ChaptersAdapter.kt  | 13 ++++---
 .../libretube/ui/fragments/PlayerFragment.kt  |  5 +--
 app/src/main/res/layout/chapter_column.xml    | 38 ++++++++++++++++---
 3 files changed, 41 insertions(+), 15 deletions(-)

diff --git a/app/src/main/java/com/github/libretube/ui/adapters/ChaptersAdapter.kt b/app/src/main/java/com/github/libretube/ui/adapters/ChaptersAdapter.kt
index b0c65a972..16caf2ecc 100644
--- a/app/src/main/java/com/github/libretube/ui/adapters/ChaptersAdapter.kt
+++ b/app/src/main/java/com/github/libretube/ui/adapters/ChaptersAdapter.kt
@@ -1,6 +1,7 @@
 package com.github.libretube.ui.adapters
 
 import android.graphics.Color
+import android.text.format.DateUtils
 import android.view.LayoutInflater
 import android.view.ViewGroup
 import androidx.recyclerview.widget.RecyclerView
@@ -27,15 +28,15 @@ class ChaptersAdapter(
         holder.binding.apply {
             ImageHelper.loadImage(chapter.image, chapterImage)
             chapterTitle.text = chapter.title
+            timeStamp.text = chapter.start?.let { DateUtils.formatElapsedTime(it) }
 
-            if (selectedPosition == position) {
-                // get the color for highlighted controls
-                val color =
-                    ThemeHelper.getThemeColor(root.context, android.R.attr.colorControlHighlight)
-                chapterLL.setBackgroundColor(color)
+            val color = if (selectedPosition == position) {
+                ThemeHelper.getThemeColor(root.context, android.R.attr.colorControlHighlight)
             } else {
-                chapterLL.setBackgroundColor(Color.TRANSPARENT)
+                Color.TRANSPARENT
             }
+            chapterLL.setBackgroundColor(color)
+
             root.setOnClickListener {
                 updateSelectedPosition(position)
                 val chapterStart = chapter.start!! * 1000 // s -> ms
diff --git a/app/src/main/java/com/github/libretube/ui/fragments/PlayerFragment.kt b/app/src/main/java/com/github/libretube/ui/fragments/PlayerFragment.kt
index fd71d1b38..411150682 100644
--- a/app/src/main/java/com/github/libretube/ui/fragments/PlayerFragment.kt
+++ b/app/src/main/java/com/github/libretube/ui/fragments/PlayerFragment.kt
@@ -991,10 +991,7 @@ class PlayerFragment : BaseFragment(), OnlinePlayerOptions {
         binding.chaptersRecView.adapter = ChaptersAdapter(chapters, exoPlayer)
 
         // enable the chapters dialog in the player
-        val titles = mutableListOf<String>()
-        chapters.forEach {
-            titles += it.title!!
-        }
+        val titles = chapters.map { "${it.title} (${it.start?.let { DateUtils.formatElapsedTime(it) }})" }
         playerBinding.chapterLL.setOnClickListener {
             if (viewModel.isFullscreen.value!!) {
                 MaterialAlertDialogBuilder(requireContext())
diff --git a/app/src/main/res/layout/chapter_column.xml b/app/src/main/res/layout/chapter_column.xml
index 243941ae7..220f7990e 100644
--- a/app/src/main/res/layout/chapter_column.xml
+++ b/app/src/main/res/layout/chapter_column.xml
@@ -15,12 +15,40 @@
         android:orientation="vertical"
         android:paddingHorizontal="5dp">
 
-        <com.google.android.material.imageview.ShapeableImageView
-            android:id="@+id/chapter_image"
+        <FrameLayout
             android:layout_width="match_parent"
-            android:layout_height="55dp"
-            android:src="@mipmap/ic_launcher"
-            app:shapeAppearanceOverlay="@style/roundedImageViewRounded" />
+            android:layout_height="55dp">
+
+            <com.google.android.material.imageview.ShapeableImageView
+                android:id="@+id/chapter_image"
+                android:layout_width="match_parent"
+                android:layout_height="match_parent"
+                app:shapeAppearanceOverlay="@style/roundedImageViewRounded"
+                tools:src="@tools:sample/backgrounds/scenic" />
+
+            <androidx.cardview.widget.CardView
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:layout_gravity="bottom|end"
+                android:layout_marginEnd="5dp"
+                android:layout_marginBottom="5dp"
+                app:cardBackgroundColor="@color/duration_background_color"
+                app:cardCornerRadius="8dp"
+                app:cardElevation="0dp">
+
+                <TextView
+                    android:id="@+id/timeStamp"
+                    android:layout_width="wrap_content"
+                    android:layout_height="wrap_content"
+                    android:paddingHorizontal="2dp"
+                    android:textColor="@color/duration_text_color"
+                    android:textSize="10sp"
+                    tools:ignore="SmallSp"
+                    tools:text="05:36" />
+
+            </androidx.cardview.widget.CardView>
+
+        </FrameLayout>
 
         <TextView
             android:id="@+id/chapter_title"