timecursor would be a nice feature to help time travel in current file

[Neonunux]

[Neonunux]

diff --git a/js/Rendering/ProgressBarRender.js b/js/Rendering/ProgressBarRender.js
index d7ce372f337403423aeb9d56304673ea7122b20d..245b990d6e13bf70bc00038e6087b5a2afdcceda 100644
--- a/js/Rendering/ProgressBarRender.js
+++ b/js/Rendering/ProgressBarRender.js
@@ -1,4 +1,4 @@
-import { addDynamicSettingsToObj, getSetting } from '../settings/Settings.js'
+import { addDynamicSettingsToObj } from '../settings/Settings.js'
 import { drawRoundRect, formatTime, getCssVariable } from '../utils/Util.js'
 import { PROGRESS_BAR_CANVAS_HEIGHT } from './Render.js'
 /**
@@ -15,7 +15,7 @@ export class ProgressBarRender {
     )
     this.ctx.canvas.addEventListener(
       'mouseleave',
-      (ev) => {
+      () => {
         this.mouseX = -1000
       },
     )
@@ -73,10 +73,9 @@ export class ProgressBarRender {
       PROGRESS_BAR_CANVAS_HEIGHT,
     )
     ctx.globalAlpha = 1
-    // ctx.filter = "blur(5px)"

     ctx.fillStyle = this.progressBarGreen
-    const barHt = parseInt(this.progressBarHeight)
+    const barHt = parseInt(this.progressBarHeight, 10)
     const margin = PROGRESS_BAR_CANVAS_HEIGHT - barHt

     drawRoundRect(
@@ -84,7 +83,7 @@ export class ProgressBarRender {
       margin / 2,
       margin / 2,
       (this.renderDimensions.windowWidth - margin)
-        * Math.min(1, progressPercent),
+      * Math.min(1, progressPercent),
       barHt,
       barHt / 4,
       true,
@@ -100,9 +99,13 @@ export class ProgressBarRender {

     ctx.font = '14px Arial black'
     const showMilis = this._showMiliseconds
-    const text = `${formatTime(Math.min(time, end / 1000), showMilis)
-    } / ${
-      formatTime(end / 1000, showMilis)}`
+    const zeroText = `${formatTime(0, showMilis)}`
+    const endText = `${formatTime(end / 1000, showMilis)}`
+    const text = `${formatTime(Math.min(time, end / 1000), showMilis)}`
+    const zeroTextWidth = ctx.measureText(zeroText).width
+    const endTextWidth = ctx.measureText(endText).width
+    let isZeroTextCollided = false
+    let isEndTextCollided = false
     const wd = ctx.measureText(text).width
     const x = this.renderDimensions.windowWidth / 2 - wd / 2
     const y = PROGRESS_BAR_CANVAS_HEIGHT / 2 + 5
@@ -112,10 +115,19 @@ export class ProgressBarRender {
       ctx.lineCap = 'round'
       markers.forEach((marker) => {
         const xPos = (marker.timestamp / end) * this.renderDimensions.windowWidth
+        const txtWd = ctx.measureText(marker.text).width

-        if (Math.abs(xPos - this.mouseX) < 10) {
-          const txtWd = ctx.measureText(marker.text).width
+        if (parseInt(xPos, 10) - (txtWd / 2) < 10 + zeroTextWidth
+          && Math.abs(this.mouseX - parseInt(xPos, 10)) < 10) {
+          isZeroTextCollided = true
+        }
+        if (parseInt(xPos, 10) + (txtWd / 2)
+          > this.renderDimensions.windowWidth - 10 - endTextWidth
+          && Math.abs(this.mouseX - parseInt(xPos, 10)) < 10) {
+          isEndTextCollided = true
+        }

+        if (Math.abs(xPos - this.mouseX) < 10) {
           if (x - 3 - txtWd / 2 < xPos && x + wd + 3 + txtWd / 2 > xPos) {
             isShowingAMarker = true
           }
@@ -155,8 +167,35 @@ export class ProgressBarRender {
       })
     }
     if (!isShowingAMarker) {
+      const timeCursorText = (typeof this.mouseX !== 'undefined')
+        ? `${formatTime((this.mouseX / this.renderDimensions.windowWidth)
+          * (end / 1000), showMilis)}`
+        : ''
+
+      ctx.closePath()
+
       ctx.fillStyle = 'rgba(0,0,0,1)'
-      ctx.fillText(text, x, y)
+      if (!isZeroTextCollided) {
+        ctx.fillText(zeroText, 10, y)
+      }
+      if (!isEndTextCollided) {
+        ctx.fillText(endText, this.renderDimensions.windowWidth - endTextWidth - 10, y)
+      }
+      if (this.mouseX > -1) { // this.mouseX === -1000 if not hover
+        ctx.fillStyle = 'white'
+
+        ctx.fillText(timeCursorText, x, y)
+
+        ctx.beginPath()
+        ctx.moveTo(this.mouseX, 0)
+        ctx.lineTo(this.mouseX, PROGRESS_BAR_CANVAS_HEIGHT)
+        ctx.lineWidth = 2
+        ctx.strokeStyle = 'white'
+        ctx.stroke()
+        ctx.closePath()
+      } else {
+        ctx.fillText(text, x, y)
+      }
     }
   }
 }

[Bewelge]

Added a time cursor on drag. Didn't add start and end time though since I felt it looked to cluttered. Thanks for the suggestion!

[Bewelge]

And feel free to open another issue if this isn't what you imagined