feat(chapter): Add hover effect to chapters

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

@@ -80,11 +80,13 @@
       onChange (event) {
         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) || event.offsetX < 0 || event.offsetX > event.target.clientWidth) {
           this.thumbActive = false
@@ -97,6 +99,7 @@
         store.dispatch(store.actions.simulatePlaytime(this.duration * event.offsetX / event.target.clientWidth))
         store.dispatch(store.actions.enableGhostMode())
       },
+
       onMouseOut (event) {
         this.thumbActive = false
         store.dispatch(store.actions.disableGhostMode())

src/components/tabs/chapters/ChapterEntry.vue

@@ -1,5 +1,10 @@
 <template>
-  <div class="chapters--entry" :style="chapterStyle(theme, chapter)" @click="onChapterClick(index)">
+  <div class="chapters--entry"
+    :style="chapterStyle(theme, chapter, hover)"
+    @click="onChapterClick(index)"
+    @mouseover="hover = true"
+    @mouseleave="hover = false">
+
     <span class="index">{{index + 1}}</span>
     <span class="title truncate">{{chapter.title}}</span>
     <span class="timer">{{remainingTime(chapter, ghost.active ? ghost.time : playtime)}}</span>
@@ -13,15 +18,13 @@
   import store from 'store'
   import { secondsToTime } from 'utils/time'
 
-  const chapterStyle = (theme, chapter) => {
-    const style = {}
-
-    if (chapter.active) {
-      style['background-color'] = color(theme.tabs.body.backgroundActive).fade(0.9)
-      style['color'] = theme.tabs.body.textActives
-    }
+  const activeChapter = theme => ({
+    'background-color': color(theme.tabs.body.backgroundActive).fade(0.9),
+    color: theme.tabs.body.textActives
+  })
 
-    return style
+  const chapterStyle = (theme, chapter, hover) => {
+    return chapter.active || hover ? activeChapter(theme) : {}
   }
 
   const progressStyle = (theme, chapter, playtime) => {
@@ -55,7 +58,8 @@
         theme: this.$select('theme'),
         chapters: this.$select('chapters'),
         playtime: this.$select('playtime'),
-        ghost: this.$select('ghost')
+        ghost: this.$select('ghost'),
+        hover: false
       }
     },
     methods: {