feat(chapters): Rework chapter interaction, introduce play icon in ch…

…apter

#400

src/components/icons/PlayIcon.vue

@@ -1,15 +1,15 @@
 <template>
-    <svg width="21px" height="24px" viewBox="0 0 21 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-      <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g transform="translate(-17.000000, -13.000000)" :fill="color">
-            <polygon points="17.2886 13.0896 37.4846 24.7496 17.2886 36.4096"></polygon>
-        </g>
+  <svg :width="size" :height="size * 1.142" viewBox="0 0 21 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+      <g transform="translate(-17.000000, -13.000000)" :fill="color">
+          <polygon points="17.2886 13.0896 37.4846 24.7496 17.2886 36.4096"></polygon>
       </g>
-    </svg>
+    </g>
+  </svg>
 </template>
 
 <script>
   export default {
-    props: ['color']
+    props: ['color', 'size']
   }
 </script>

src/components/player/control-bar/PlayButton.vue

@@ -8,30 +8,30 @@
             components.controls.button.variant.retry
     }">
       <span class="inner" v-if="components.controls.button.variant.loading">
-        <LoadingIndicator />
+        <LoadingIndicator></LoadingIndicator>
       </span>
 
-      <PauseIcon :color="theme.player.actions.icon" v-if="components.controls.button.variant.playing" />
+      <PauseIcon :color="theme.player.actions.icon" v-if="components.controls.button.variant.playing"></PauseIcon>
 
-      <PlayIcon :color="theme.player.actions.icon" class="reset" v-if="components.controls.button.variant.pause" />
+      <PlayIcon size="21" :color="theme.player.actions.icon" class="reset" v-if="components.controls.button.variant.pause"></PlayIcon>
 
       <span class="inner" v-if="components.controls.button.variant.remaining">
-        <PlayIcon :color="theme.player.actions.icon" />
+        <PlayIcon size="21" :color="theme.player.actions.icon"></PlayIcon>
         <span class="label" :style="textStyle(theme)">{{ secondsToTime(playtime) }}</span>
       </span>
 
       <span class="inner" v-if="components.controls.button.variant.duration">
-        <PlayIcon :color="theme.player.actions.icon" />
+        <PlayIcon size="21" :color="theme.player.actions.icon"></PlayIcon>
         <span class="label" :style="textStyle(theme)">{{ secondsToTime(duration) }}</span>
       </span>
 
       <span class="inner" v-if="components.controls.button.variant.replay">
-        <PlayIcon :color="theme.player.actions.icon" />
+        <PlayIcon size="21" :color="theme.player.actions.icon"></PlayIcon>
         <span class="label" :style="textStyle(theme)">{{ $t('PLAYER.REPLAY') }}</span>
       </span>
 
       <span class="inner" v-if="components.controls.button.variant.retry">
-        <ReloadIcon :color="theme.player.actions.icon" />
+        <ReloadIcon :color="theme.player.actions.icon"></ReloadIcon>
         <span class="label" :style="textStyle(theme)">{{ $t('PLAYER.RETRY') }}</span>
       </span>
     </span>

src/components/tabs/chapters/ChapterEntry.vue

@@ -5,7 +5,10 @@
     @mouseover="hover = true"
     @mouseleave="hover = false">
 
-    <span class="index">{{index + 1}}</span>
+    <span class="index" v-if="hover" @click="onPlayButtonClick(index)">
+      <PlayIcon size="12" :color="theme.tabs.body.icon"></PlayIcon>
+    </span>
+    <span class="index" v-else>{{index + 1}}</span>
     <span class="title truncate">{{chapter.title}}</span>
     <span class="timer">{{remainingTime(chapter, ghost.active ? ghost.time : playtime)}}</span>
 
@@ -18,13 +21,19 @@
   import store from 'store'
   import { secondsToTime } from 'utils/time'
 
+  import PlayIcon from 'icons/PlayIcon.vue'
+
   const activeChapter = theme => ({
     'background-color': color(theme.tabs.body.backgroundActive).fade(0.9),
-    color: theme.tabs.body.textActives
+    color: theme.tabs.body.textActive
   })
 
-  const chapterStyle = (theme, chapter, hover) => {
-    return chapter.active || hover ? activeChapter(theme) : {}
+  const chapterStyle = (theme, chapter, hover, even) => {
+    if (chapter.active || hover) {
+      return activeChapter(theme)
+    }
+
+    return {}
   }
 
   const progressStyle = (theme, chapter, playtime) => {
@@ -52,6 +61,11 @@
     store.dispatch(store.actions.setChapter(index))
   }
 
+  const onPlayButtonClick = index => {
+    store.dispatch(store.actions.setChapter(index))
+    store.dispatch(store.actions.play())
+  }
+
   export default {
     data () {
       return {
@@ -66,7 +80,11 @@
       chapterStyle,
       progressStyle,
       remainingTime,
-      onChapterClick
+      onChapterClick,
+      onPlayButtonClick
+    },
+    components: {
+      PlayIcon
     },
     props: ['chapter', 'index']
   }
@@ -87,7 +105,9 @@
     transition: background $animation-duration, color $animation-duration;
 
     .index {
-      display: block;
+      display: flex;
+      align-items: center;
+      justify-content: center;
       text-align: center;
       width: 30px;
     }
@@ -108,7 +128,6 @@
       left: 0;
       bottom: 0;
       height: 3px;
-      transition: width $animation-duration;
     }
   }
 </style>

src/components/tabs/chapters/Chapters.vue

@@ -1,6 +1,11 @@
 <template>
   <div class="chapters">
-    <ChapterEntryComponent v-for="(chapter, index) in chapters" :chapter="chapter" :index="index" :key="index"></ChapterEntryComponent>
+    <ChapterEntryComponent
+      v-for="(chapter, index) in chapters"
+      :chapter="chapter"
+      :index="index"
+      :key="index">
+    </ChapterEntryComponent>
   </div>
 </template>
 

src/media-player/extensions.js

@@ -6,19 +6,22 @@ export default (player, { onLoad }) => {
   // Maybe this could be a useful plugin
   const howlerPlay = player.play.bind(player)
   const howlerSeek = player.seek.bind(player)
-  let initialPlay = false
 
-  player.once('play', () => {
-    initialPlay = true
-  })
+  let loading = false
+
+  const loadPlayer = (sprite, internal) => {
+    onLoad()
+    howlerPlay(sprite, internal)
+    loading = true
+  }
 
   // Safe Play
   player.play = (sprite, internal) => {
-    if (!initialPlay) {
-      onLoad()
+    if (!loading) {
+      loadPlayer()
+    } else {
+      howlerPlay(sprite, internal)
     }
-
-    howlerPlay(sprite, internal)
   }
 
   // Load Hooks

src/store/reducers/theme.js

@@ -54,8 +54,9 @@ const themeColors = (colors = {}) => {
       body: {
         background: color(main).fade(0.9),
         text: grey,
-        textActive: negative ? main : dark,
-        progress: fallbackColor(highlight, negative ? main : dark)
+        textActive: dark,
+        progress: fallbackColor(highlight, negative ? main : dark),
+        icon: negative ? main : dark
       },
       slider: {
         thumb: main