feat(visible components): Add ability to show/hide components

src/components/header/Info.vue

@@ -1,20 +1,20 @@
 <template>
   <div class="info" >
-    <div class="poster" v-if="episode.poster || show.poster">
+    <div class="poster" v-if="(episode.poster || show.poster) && visibleComponents.poster">
       <div class="poster-container" :style="posterStyle">
         <img class="poster-image" :src="episode.poster || show.poster">
       </div>
     </div>
     <div class="description">
-      <h2 class="show-title" :style="titleStyle" v-if="show.title">
+      <h2 class="show-title" :style="titleStyle" v-if="show.title && visibleComponents.showTitle">
         <a :href="show.link" target="_blank" class="truncate" v-if="display === 'embed' && show.link">{{show.title}}</a>
         <span class="truncate" v-else>{{show.title}}</span>
       </h2>
-      <h1 class="title" :style="titleStyle" v-if="episode.title">
+      <h1 class="title" :style="titleStyle" v-if="episode.title && visibleComponents.episodeTitle">
         <a :href="episode.link" target="_blank" class="truncate" v-if="display === 'embed' && episode.link">{{episode.title}}</a>
         <span class="truncate" v-else>{{episode.title}}</span>
       </h1>
-      <div class="subtitle" :style="subtitleStyle" v-if="episode.subtitle">{{episode.subtitle}}</div>
+      <div class="subtitle" :style="subtitleStyle" v-if="episode.subtitle && visibleComponents.subtitle">{{episode.subtitle}}</div>
     </div>
   </div>
 </template>
@@ -28,7 +28,8 @@
         episode: this.$select('episode'),
         show: this.$select('show'),
         theme: this.$select('theme'),
-        display: this.$select('display')
+        display: this.$select('display'),
+        visibleComponents: this.$select('visibleComponents')
       }
     },
     computed: {

src/components/player/Player.vue

@@ -2,7 +2,7 @@
   <div class="player" :style="backgroundStyle">
     <ControlBar></ControlBar>
     <transition name="progressbar">
-      <ProgressBar v-if="components.progressbar.visible" />
+      <ProgressBar v-if="components.progressbar && visibleComponents.progressbar" />
     </transition>
   </div>
 </template>
@@ -17,6 +17,7 @@
         playstate: this.$select('playstate'),
         reference: this.$select('reference'),
         theme: this.$select('theme'),
+        visibleComponents: this.$select('visibleComponents'),
         components: this.$select('components')
       }
     },

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

@@ -1,19 +1,19 @@
 <template>
   <div class="control-bar centered">
     <transition name="button">
-      <ChapterBackButton v-if="components.controls.chapters && chapters.length > 0"></ChapterBackButton>
+      <ChapterBackButton v-if="components.controls.chapters && visibleComponents.controlChapters"></ChapterBackButton>
     </transition>
     <transition name="button">
-      <StepBackButton v-if="components.controls.steppers"></StepBackButton>
+      <StepBackButton v-if="components.controls.steppers && visibleComponents.controlSteppers"></StepBackButton>
     </transition>
     <transition name="button">
-      <PlayButton v-if="components.controls.button.visible"></PlayButton>
+      <PlayButton></PlayButton>
     </transition>
     <transition name="button">
-      <StepForwardButton v-if="components.controls.steppers"></StepForwardButton>
+      <StepForwardButton v-if="components.controls.steppers && visibleComponents.controlSteppers"></StepForwardButton>
     </transition>
     <transition name="button">
-      <ChapterNextButton v-if="components.controls.chapters && chapters.length > 0"></ChapterNextButton>
+      <ChapterNextButton v-if="components.controls.chapters && visibleComponents.controlChapters"></ChapterNextButton>
     </transition>
   </div>
 </template>
@@ -29,7 +29,8 @@
     data () {
       return {
         chapters: this.$select('chapters'),
-        components: this.$select('components')
+        components: this.$select('components'),
+        visibleComponents: this.$select('visibleComponents')
       }
     },
     components: {

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

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

src/components/tabs/Tabs.vue

@@ -1,41 +1,41 @@
 <template>
-  <div class="tabs" :style="containerStyle" v-if="visibleTabs">
+  <div class="tabs" :style="containerStyle" v-if="hasTabs">
     <TabHeaderComponent>
-      <TabHeaderItemComponent v-if="components.tabs.info && components.tabs.info.visible" :active="tabs.info" :click="toggleTab('info')">
+      <TabHeaderItemComponent v-if="isVisibleTab.info" :active="tabs.info" :click="toggleTab('info')">
         <InfoIcon slot="icon"></InfoIcon>
         <span slot="title">{{ $t('INFO.TITLE') }}</span>
       </TabHeaderItemComponent>
-      <TabHeaderItemComponent v-if="components.tabs.chapters && components.tabs.chapters.visible" :active="tabs.chapters" :click="toggleTab('chapters')">
+      <TabHeaderItemComponent v-if="isVisibleTab.chapters" :active="tabs.chapters" :click="toggleTab('chapters')">
         <ChaptersIcon slot="icon"></ChaptersIcon>
         <span slot="title">{{ $t('CHAPTERS.TITLE') }}</span>
       </TabHeaderItemComponent>
-      <TabHeaderItemComponent v-if="components.tabs.share && components.tabs.share.visible" :active="tabs.share" :click="toggleTab('share')">
+      <TabHeaderItemComponent v-if="isVisibleTab.share" :active="tabs.share" :click="toggleTab('share')">
         <ShareIcon slot="icon"></ShareIcon>
         <span slot="title">{{ $t('SHARE.TITLE') }}</span>
       </TabHeaderItemComponent>
-      <TabHeaderItemComponent v-if="components.tabs.download && components.tabs.download.visible" :active="tabs.download" :click="toggleTab('download')">
+      <TabHeaderItemComponent v-if="isVisibleTab.download" :active="tabs.download" :click="toggleTab('download')">
         <DownloadIcon slot="icon"></DownloadIcon>
         <span slot="title">{{ $t('DOWNLOAD.TITLE') }}</span>
       </TabHeaderItemComponent>
-      <TabHeaderItemComponent v-if="components.tabs.audio && components.tabs.audio.visible" :active="tabs.audio" :click="toggleTab('audio')">
+      <TabHeaderItemComponent v-if="isVisibleTab.audio" :active="tabs.audio" :click="toggleTab('audio')">
         <AudioIcon slot="icon"></AudioIcon>
         <span slot="title">{{ $t('AUDIO.TITLE') }}</span>
       </TabHeaderItemComponent>
     </TabHeaderComponent>
 
-    <TabBodyComponent :active="tabs.info" v-if="components.tabs.info && components.tabs.info.visible">
+    <TabBodyComponent v-if="isVisibleTab.info" :active="tabs.info">
       <InfoTab></InfoTab>
     </TabBodyComponent>
-    <TabBodyComponent :active="tabs.chapters" v-if="components.tabs.chapters && components.tabs.chapters.visible">
+    <TabBodyComponent v-if="isVisibleTab.chapters" :active="tabs.chapters">
       <ChaptersTab></ChaptersTab>
     </TabBodyComponent>
-    <TabBodyComponent :active="tabs.share" v-if="components.tabs.share && components.tabs.share.visible">
+    <TabBodyComponent v-if="isVisibleTab.share" :active="tabs.share">
       <ShareTab></ShareTab>
     </TabBodyComponent>
-    <TabBodyComponent :active="tabs.download" v-if="components.tabs.download && components.tabs.download.visible">
+    <TabBodyComponent v-if="isVisibleTab.download" :active="tabs.download">
       <DownloadTab></DownloadTab>
     </TabBodyComponent>
-    <TabBodyComponent :active="tabs.audio" v-if="components.tabs.audio && components.tabs.audio.visible">
+    <TabBodyComponent v-if="isVisibleTab.audio" :active="tabs.audio">
       <AudioTab></AudioTab>
     </TabBodyComponent>
   </div>
@@ -68,6 +68,7 @@ export default {
       tabs: this.$select('tabs'),
       chapters: this.$select('chapters'),
       reference: this.$select('reference'),
+      visibleComponents: this.$select('visibleComponents'),
       components: this.$select('components')
     }
   },
@@ -77,14 +78,23 @@ export default {
         'background-color': this.theme.tabs.body.background
       }
     },
-    visibleTabs () {
-      return Object.keys(this.components.tabs)
+    isVisibleTab () {
+      return {
+        info: this.components.tabs.info && this.visibleComponents.tabInfo,
+        chapters: this.components.tabs.chapters && this.visibleComponents.tabChapters,
+        share: this.components.tabs.share && this.visibleComponents.tabShare,
+        download: this.components.tabs.download && this.visibleComponents.tabDownload,
+        audio: this.components.tabs.audio && this.visibleComponents.tabAudio
+      }
+    },
+    hasTabs () {
+      return Object.keys(this.isVisibleTab)
         .reduce((result, tab) => {
           if (result) {
             return true
           }
 
-          return get(this.components.tabs, [tab, 'visible'], false)
+          return this.isVisibleTab[tab]
         }, false)
     }
   },

src/components/tabs/audio/Audio.vue

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

src/store/actions/components.js

@@ -58,29 +58,12 @@ const showPauseButton = visibility => ({
 })
 
 // Tabs
-const toggleChaptersTab = visibility => ({
-  type: 'TOGGLE_COMPONENT_TABS_CHAPTERS',
-  payload: visibility
-})
-
-const toggleShareTab = visibility => ({
-  type: 'TOGGLE_COMPONENT_TABS_SHARE',
-  payload: visibility
-})
-
-const toggleAudioTab = visibility => ({
-  type: 'TOGGLE_COMPONENT_TABS_AUDIO',
-  payload: visibility
-})
-
-const toggleDownloadTab = visibility => ({
-  type: 'TOGGLE_COMPONENT_TABS_DOWNLOAD',
-  payload: visibility
-})
-
-const toggleInfoTab = visibility => ({
-  type: 'TOGGLE_COMPONENT_TABS_INFO',
-  payload: visibility
+const toggleComponentTab = (tab, visibility) => ({
+  type: 'TOGGLE_COMPONENT_TAB',
+  payload: {
+    tab,
+    visibility
+  }
 })
 
 // Audio Controls
@@ -111,11 +94,7 @@ export {
   showPlayingButton,
   showPauseButton,
 
-  toggleChaptersTab,
-  toggleShareTab,
-  toggleAudioTab,
-  toggleDownloadTab,
-  toggleInfoTab,
+  toggleComponentTab,
 
   toggleVolumeSlider,
   toggleRateSlider

src/store/actions/components.test.js

@@ -16,9 +16,7 @@ import {
   showPlayingButton,
   showPauseButton,
 
-  toggleChaptersTab,
-  toggleShareTab,
-  toggleAudioTab
+  toggleComponentTab
 } from './components'
 
 const toggleActions = [{
@@ -45,18 +43,6 @@ const toggleActions = [{
   name: 'toggleButtonControlAction',
   method: toggleButtonControl,
   type: 'TOGGLE_COMPONENT_CONTROLS_BUTTON'
-}, {
-  name: 'toggleChaptersTabAction',
-  method: toggleChaptersTab,
-  type: 'TOGGLE_COMPONENT_TABS_CHAPTERS'
-}, {
-  name: 'toggleShareTabAction',
-  method: toggleShareTab,
-  type: 'TOGGLE_COMPONENT_TABS_SHARE'
-}, {
-  name: 'toggleSettingsTabAction',
-  method: toggleAudioTab,
-  type: 'TOGGLE_COMPONENT_TABS_AUDIO'
 }]
 
 const voidActions = [{
@@ -112,3 +98,13 @@ voidActions.forEach(action => {
     })
   })
 })
+
+test(`toggleComponentTabAction: creates the TOGGLE_COMPONENT_TAB action`, t=> {
+  t.deepEqual(toggleComponentTab('foo', true), {
+    type: 'TOGGLE_COMPONENT_TAB',
+    payload: {
+      tab: 'foo',
+      visibility: true
+    }
+  })
+})

src/store/effects/components.js

@@ -47,11 +47,11 @@ export default (store, action) => {
 
       // Tabs
       if (hasChapters(chapters)) {
-        store.dispatch(actions.toggleChaptersTab(true))
+        store.dispatch(actions.toggleComponentTab('chapters', true))
       }
 
       if (hasFiles(downloadFiles)) {
-        store.dispatch(actions.toggleDownloadTab(true))
+        store.dispatch(actions.toggleComponentTab('download', true))
       }
 
       // Meta
@@ -65,9 +65,9 @@ export default (store, action) => {
       }
 
       // Everything else without conditions
-      store.dispatch(actions.toggleShareTab(true))
-      store.dispatch(actions.toggleInfoTab(true))
-      store.dispatch(actions.toggleAudioTab(true))
+      store.dispatch(actions.toggleComponentTab('share', true))
+      store.dispatch(actions.toggleComponentTab('info', true))
+      store.dispatch(actions.toggleComponentTab('audio', true))
       store.dispatch(actions.toggleRateSlider(true))
       break
     case 'END':