feat(playtime): Prefix running progress and chapters with minus

src/components/player/progress-bar/Progress.vue

@@ -81,15 +81,17 @@
         store.dispatch(store.actions.updatePlaytime(event.target.value))
       },
       onInput (event) {
+        store.dispatch(store.actions.disableGhostMode())
         this.thumbPosition = relativePosition(interpolate(event.target.value), this.duration)
         store.dispatch(store.actions.updatePlaytime(event.target.value))
       },
       onMouseMove (event) {
-        if (event.offsetY < 13 && event.offsetY > 31) {
+        if ((event.offsetY < 13 && event.offsetY > 31) || event.offsetX < 0 || event.offsetX > event.target.clientWidth) {
           this.thumbActive = false
           store.dispatch(store.actions.disableGhostMode())
           return
         }
+
         this.thumbActive = true
         this.ghostPosition = relativePosition(event.offsetX, event.target.clientWidth)
         store.dispatch(store.actions.simulatePlaytime(this.duration * event.offsetX / event.target.clientWidth))
@@ -164,8 +166,6 @@
     width: $progress-thumb-width;
     pointer-events: none;
 
-    transition: all $animation-duration / 2;
-
     &.active {
       width: $progress-thumb-active-width;
       height: $progress-thumb-active-height;

src/components/player/progress-bar/Timer.vue

@@ -2,7 +2,7 @@
   <div class="timer-progress" :class="playstate" :style="timerStyle(theme)">
     <span class="current">{{ secondsToTime(ghost.active ? ghost.time : playtime) }}</span>
     <CurrentChapter class="chapter" />
-    <span class="time">{{ secondsToTime(duration - (ghost.active ? ghost.time : playtime)) }}</span>
+    <span class="time">-{{ secondsToTime(duration - (ghost.active ? ghost.time : playtime)) }}</span>
   </div>
 </template>
 

src/components/tabs/chapters/ChapterEntry.vue

@@ -39,7 +39,7 @@
 
   const remainingTime = (chapter, playtime) => {
     if (chapter.active) {
-      return secondsToTime(chapter.end - playtime)
+      return `-${secondsToTime(chapter.end - playtime)}`
     }
 
     return secondsToTime(chapter.end - chapter.start)
@@ -82,6 +82,7 @@
 
     .index {
       display: block;
+      text-align: center;
       width: 30px;
     }