feat(tabs): Optimise tab title truncation

- #439

docs/config.md

@@ -192,3 +192,37 @@ _Not providing chapters will disable all chapter related functions._
    info: true // will expand the info tab on load
   }
 ```
+
+#### Visible Components
+
+List of components that are visible in the player. if nothing is provided all components are visible.
+
+| showTitle         | Header show title     |
+| episodeTitle      | Header episode title  |
+| subtitle          | Header subtitle       |
+| progressbar       | Play progress         |
+| controlSteppers   | Steppers controls     |
+| controlChapters   | Chapters controls     |
+| poster            | Poster in Head        |
+| tabChapters       | Chapters Tab          |
+| tabDownload       | Download Tab          |
+| tabAudio          | Audio Tab             |
+| tabShare          | Share Tab             |
+
+
+```javascript
+  visualComponents: [
+    'tabInfo',
+    'tabChapters',
+    'tabDownload',
+    'tabAudio',
+    'tabShare',
+    'poster',
+    'showTitle',
+    'episodeTitle',
+    'subtitle',
+    'progressbar',
+    'controlSteppers',
+    'controlChapters'
+  ]
+```

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

@@ -1,6 +1,6 @@
 <template>
   <div class="timer-chapter truncate">
-    <span class="chapter-title" v-marquee
+    <span class="chapter-title"
       :style="chapterStyle"
       v-if="currentChapterIndex(chapters) > -1">
         {{chapterTitle}}

src/components/shared/TabHeader.vue

@@ -1,5 +1,5 @@
 <template>
-  <ul class="tab-header">
+  <ul class="tab-header" :class="{ overflows }">
     <span class="header-shadow" :style="headerShadowStyle"></span>
     <slot></slot>
   </ul>
@@ -10,6 +10,7 @@
   export default {
     data () {
       return {
+        overflows: false,
         theme: this.$select('theme')
       }
     },
@@ -19,6 +20,18 @@
           background: `linear-gradient(to bottom, ${color(this.theme.tabs.header.backgroundActive).fade(0)} 0%, ${color(this.theme.tabs.header.backgroundActive).fade(1)} 100%)`
         }
       }
+    },
+    mounted (el) {
+      const resizeHandler = () => {
+        if (this.$el.scrollWidth > this.$el.clientWidth) {
+          this.overflows = true
+        } else {
+          this.overflows = false
+        }
+      }
+
+      window.addEventListener('resize', resizeHandler)
+      resizeHandler()
     }
   }
 </script>
@@ -28,6 +41,8 @@
   .tab-header {
     position: relative;
     width: 100%;
+    overflow-x: auto;
+    overflow-y: hidden;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -48,5 +63,9 @@
       height: $padding;
       z-index: $tab-shadow;
     }
+
+    &.overflows .tab-header-item .title {
+      display: none;
+    }
   }
 </style>

src/components/shared/TabHeaderItem.vue

@@ -2,7 +2,7 @@
   <li class="tab-header-item" :style="tabStyle" :class="{active}">
     <a href="javascript:void(0);" @click.prevent="click()" class="caption">
       <span class="icon" :style="{fill: iconColor(active)}"><slot name="icon"></slot></span>
-      <span class="title truncate"><slot name="title"></slot></span>
+      <span class="title"><slot name="title"></slot></span>
       <CloseIcon class="close" :color="iconColor(true)" v-if="active"></CloseIcon>
     </a>
   </li>
@@ -71,7 +71,6 @@
     margin: 0;
     height: $tabs-header-height;
     transition: all $animation-duration;
-    overflow: hidden;
 
     .caption {
       display: flex;

src/components/tabs/Tabs.vue

@@ -43,7 +43,6 @@
 
 <script>
 import store from 'store'
-import { get } from 'lodash'
 
 import TabHeaderComponent from 'shared/TabHeader.vue'
 import TabHeaderItemComponent from 'shared/TabHeaderItem.vue'

src/components/tabs/audio/Audio.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="audio-tab">
-    <AudioVolumeComponent class="seperator" v-if="components.audio.volume"></AudioVolumeComponent>
-    <AudioRateComponent class="seperator" v-if="components.audio.rate"></AudioRateComponent>
+    <AudioVolumeComponent class="seperator" v-if="components.audio.volumeControl"></AudioVolumeComponent>
+    <AudioRateComponent class="seperator" v-if="components.audio.rateControl"></AudioRateComponent>
     <FooterComponent></FooterComponent>
   </div>
 </template>

src/components/tabs/share/Share.vue

@@ -39,8 +39,9 @@
         }
       },
       hasLink () {
-        return (this.share.content === 'show' && this.show.link) ||
-        (this.share.content !== 'show') && this.episode.link
+        const hasShowLink = this.share.content === 'show' && this.show.link
+        const hasShareLink = this.share.content !== 'show' && this.episode.link
+        return hasShowLink || hasShareLink
       }
     },
     components: {

src/core/directives/index.js

@@ -1,9 +1,7 @@
 import clipboard from './directives/clipboard'
-import marquee from './directives/marquee'
 
 const registerDirectives = context => {
   context.Renderer.directive('clipboard', clipboard)
-  context.Renderer.directive('marquee', marquee)
 
   return context
 }

src/store/actions/components.test.js

@@ -99,7 +99,7 @@ voidActions.forEach(action => {
   })
 })
 
-test(`toggleComponentTabAction: creates the TOGGLE_COMPONENT_TAB action`, t=> {
+test(`toggleComponentTabAction: creates the TOGGLE_COMPONENT_TAB action`, t => {
   t.deepEqual(toggleComponentTab('foo', true), {
     type: 'TOGGLE_COMPONENT_TAB',
     payload: {

src/styles/_utils.scss

@@ -6,11 +6,6 @@
   text-overflow: ellipsis;
 }
 
-.marquee {
-  transform: translateX(0);
-  animation: stop-and-scroll 15s linear infinite;
-}
-
 .text-left {
   text-align: left;
 }

src/utils/time.js

@@ -16,7 +16,7 @@ export const calcMinutes = (time = 0) => parseInt(time / 60) % 60
 export const calcHours = (time = 0) => parseInt(time / 3600) % 24
 
 export const localeDate = (timestamp, locale) => new Date(timestamp).toLocaleDateString(locale)
-export const localeTime = (timestamp, locale) => new Date(timestamp).toLocaleTimeString(locale, {hour: '2-digit', minute:'2-digit'})
+export const localeTime = (timestamp, locale) => new Date(timestamp).toLocaleTimeString(locale, {hour: '2-digit', minute: '2-digit'})
 
 const leadingZero = (time) => time > 9 ? `${time}` : `0${time}`