layout improvements

app/src/main/java/com/github/libretube/ui/fragments/PlayerFragment.kt

@@ -629,6 +629,8 @@ class PlayerFragment : BaseFragment() {
     }
 
     private fun playVideo() {
+        playerBinding.exoProgress.clearSegments()
+
         lifecycleScope.launchWhenCreated {
             streams = try {
                 RetrofitInstance.api.getStreams(videoId!!)

app/src/main/java/com/github/libretube/ui/views/MarkableTimeBar.kt

@@ -10,13 +10,14 @@ import com.github.libretube.api.obj.Segment
 import com.google.android.exoplayer2.Player
 import com.google.android.exoplayer2.ui.DefaultTimeBar
 
+/**
+ * TimeBar that can be marked with SponsorBlock Segments
+ */
 class MarkableTimeBar(
     context: Context,
     attributeSet: AttributeSet? = null
 ) : DefaultTimeBar(context, attributeSet) {
 
-    private val HORIZONTAL_OFFSET = 5
-
     private var segments: List<Segment> = listOf(Segment(segment = listOf(1f, 10f)), Segment(segment = listOf(20f, 30f)))
     private var player: Player? = null
     private var length: Int = 0
@@ -30,14 +31,14 @@ class MarkableTimeBar(
         if (player == null) return
 
         canvas.save()
-        length = canvas.width
+        length = canvas.width - 2 * HORIZONTAL_OFFSET
 
         val marginY = canvas.height / 2 - 3
 
         segments.forEach {
             canvas.drawRect(
                 Rect(
-                    it.segment!!.first().toLength(),
+                    it.segment!!.first().toLength() + HORIZONTAL_OFFSET,
                     marginY,
                     it.segment.last().toLength(),
                     canvas.height - marginY
@@ -62,7 +63,15 @@ class MarkableTimeBar(
         this.segments = segments
     }
 
+    fun clearSegments() {
+        segments = listOf()
+    }
+
     fun setPlayer(player: Player) {
         this.player = player
     }
+
+    companion object {
+        const val HORIZONTAL_OFFSET = 8
+    }
 }

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

@@ -350,6 +350,8 @@
     <string name="added_to_playlist">Added to playlist</string>
     <string name="playing_queue">Playing queue</string>
     <string name="queue">Queue</string>
+    <string name="sb_markers">TimeBar Markers</string>
+    <string name="sb_markers_summary">Mark the segments on the time bar.</string>
 
     <!-- Notification channel strings -->
     <string name="download_channel_name">Download Service</string>