feat(minimal-version): Harden player for minimal configuration

- new configuration for active and visible tabs

docs/config.md

@@ -177,3 +177,21 @@ _Not providing chapters will disable all chapter related functions._
       name: 'Denis Ahrens'
   }]
 ```
+
+#### Tabs
+
+| tabs.info     | toggle the info tab |
+| tabs.share    | toggle the share tab |
+| tabs.chapters | toggle the chapters tab |
+| tabs.audio    | toggle the audio tab |
+| tabs.download | toggle the download tab |
+| visibleTabs   | List of visible tabs, available: 'chapters', 'audio', 'share', 'download', 'info' |
+
+_Note: not providing visibleTabs enables all tabs_
+
+```javascript
+  tabs: {
+   info: true // will expand the info tab on load
+  },
+  visibleTabs: ['info', 'chapters'] // only info and chapter tabs are visible
+```

docs/playground.md

@@ -89,14 +89,22 @@ navigation: 7
             name: 'Tim Pritlove'
         }, {
             avatar: 'https://freakshow.fm/wp-content/cache/podlove/0f/9c18f5e825496b9060337f92814142/clemens-schrimpe_50x50.jpg',
-            name: '	Clemens Schrimpe'
+            name: 'Clemens Schrimpe'
         }, {
             avatar: 'https://freakshow.fm/wp-content/cache/podlove/8e/f30cbe274c3f5e43dc4a7219676f50/hukl_50x50.jpg',
             name: 'hukl'
         }, {
             avatar: 'https://freakshow.fm/wp-content/cache/podlove/b2/425e5c8f180ddf548c95be1c2d7bcf/denis-ahrens_50x50.jpg',
             name: 'Denis Ahrens'
-        }]
+        }],
+        tabs: {
+          chapters: false,
+          audio: false,
+          share: false,
+          download: false,
+          info: false
+        },
+        visibleTabs: ['chapters', 'audio', 'share', 'download', 'info']
     };
 
     function loadEditor(store) {

src/components/header/Header.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="header" :style="backgroundStyle">
+  <div class="header" :style="backgroundStyle" v-if="components.error || components.info">
     <PodloveError v-if="components.error"></PodloveError>
     <PodloveInfo v-if="components.info"></PodloveInfo>
   </div>

src/components/tabs/Tabs.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="tabs" :style="containerStyle">
+  <div class="tabs" :style="containerStyle" v-if="components.visibleTabs.length > 0">
     <TabHeaderComponent>
       <TabHeaderItemComponent :active="tabs.chapters" :click="toggleTab('chapters')" v-if="components.tabs.chapters">
         <ChaptersIcon slot="icon"></ChaptersIcon>

src/components/tabs/download/Download.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="download-tab">
-    <div class="show-info centered column">
+    <div class="show-info centered column" v-if="episode.poster || show.poster">
       <img class="episode-poster shadowed" v-if="episode.poster || show.poster" :src="episode.poster || show.poster">
       <ul class="episode-meta centered">
         <li class="meta centered" v-if="episode.publicationDate"><CalendarIcon class="icon"></CalendarIcon>{{ publicationDate }}</li>

src/components/tabs/share/ShareChannels.vue

@@ -4,7 +4,9 @@
     <li><ChannelFacebookComponent :link="shareLink"></ChannelFacebookComponent></li>
     <li><ChannelGooglePlusComponent :link="shareLink"></ChannelGooglePlusComponent></li>
     <li><ChannelMailComponent :text="shareText" :subject="shareSubject"></ChannelMailComponent></li>
-    <li v-if="type !== 'show'"><ChannelEmbedComponent :color="theme.tabs.share.platform.button"></ChannelEmbedComponent></li>
+    <li v-if="type !== 'show' && ((reference.config && reference.share) || reference.origin)">
+      <ChannelEmbedComponent :color="theme.tabs.share.platform.button"></ChannelEmbedComponent>
+    </li>
   </ul>
 </template>
 
@@ -27,7 +29,8 @@
         episode: this.$select('episode'),
         playtime: this.$select('playtime'),
         chapters: this.$select('chapters'),
-        theme: this.$select('theme')
+        theme: this.$select('theme'),
+        reference: this.$select('reference')
       }
     },
     computed: {

src/store/effects/components.js

@@ -1,6 +1,10 @@
 import { get } from 'lodash'
 import actions from '../actions'
 
+const hasChapters = chapters => chapters.length > 0
+const hasMeta = (show, episode) => episode.poster || show.poster || show.title || episode.title || episode.subtitle
+const hasFiles = files => files.length > 0
+
 export default (store, action) => {
   switch (action.type) {
     case 'LOADING':
@@ -29,22 +33,37 @@ export default (store, action) => {
     case 'INIT':
       const state = store.getState()
       const chapters = get(state, 'chapters', [])
-      const reference = get(state, 'reference', {})
       const downloadFiles = get(state, 'download.files', [])
+      const episode = get(state, 'episode', {})
+      const show = get(state, 'show', {})
+      const tabs = get(state, 'components.visibleTabs', [])
 
-      if (chapters.length > 0) {
+      // Tabs
+      if (tabs.includes('chapters') && hasChapters(chapters)) {
         store.dispatch(actions.toggleChaptersTab(true))
       }
 
-      if ((reference.config && reference.share) || reference.origin) {
+      if (tabs.includes('share')) {
         store.dispatch(actions.toggleShareTab(true))
       }
 
-      if (downloadFiles.length > 0) {
+      if (tabs.includes('info')) {
+        store.dispatch(actions.toggleInfoTab(true))
+      }
+
+      if (tabs.includes('download') && hasFiles(downloadFiles)) {
         store.dispatch(actions.toggleDownloadTab(true))
       }
 
-      store.dispatch(actions.toggleInfoTab(true))
+      if (tabs.includes('audio')) {
+        store.dispatch(actions.toggleAudioTab(true))
+      }
+
+      // Meta
+      if (hasMeta(show, episode)) {
+        store.dispatch(actions.toggleInfo(true))
+      }
+
       break
     case 'STOP':
       store.dispatch(actions.showReplayButton())

src/store/effects/components.test.js

@@ -3,26 +3,39 @@ import sinon from 'sinon'
 
 import components from './components'
 
-let store
+let store, state
 
 test.beforeEach(t => {
+  state = {
+    chapters: ['chapter 1', 'chapter 2'],
+    download: {
+      files: [{
+        url: 'http://foo.bar'
+      }, {
+        url: 'http://foo.baz'
+      }]
+    },
+    episode: {
+      url: 'http://foo.bar/episode',
+      poster: './img/src'
+    },
+    show: {
+      url: 'http://foo.bar',
+      poster: './img/src'
+    },
+    reference: {
+      config: 'reference-config',
+      share: 'reference-share',
+      origin: 'reference-origin'
+    },
+    components: {
+      visibleTabs: ['chapters', 'share', 'info', 'download', 'audio']
+    }
+  }
+
   store = {
     dispatch: sinon.stub(),
-    getState: sinon.stub().returns({
-      chapters: ['chapter 1', 'chapter 2'],
-      download: {
-        files: [{
-          url: 'http://foo.bar'
-        }, {
-          url: 'http://foo.baz'
-        }]
-      },
-      reference: {
-        config: 'reference-config',
-        share: 'reference-share',
-        origin: 'reference-origin'
-      }
-    })
+    getState: sinon.stub().returns(state)
   }
 })
 
@@ -106,7 +119,7 @@ test(`componentsEffect: it shows correct ui components for IDLE action`, t => {
   })
 })
 
-test(`componentsEffect: it shows correct ui components for restore INIT action`, t => {
+test(`componentsEffect: it shows correct ui components for INIT action`, t => {
   const testAction = {
     type: 'INIT'
   }
@@ -121,26 +134,82 @@ test(`componentsEffect: it shows correct ui components for restore INIT action`,
     payload: true
   })
   t.deepEqual(store.dispatch.getCall(2).args[0], {
+    type: 'TOGGLE_COMPONENT_TABS_INFO',
+    payload: true
+  })
+  t.deepEqual(store.dispatch.getCall(3).args[0], {
     type: 'TOGGLE_COMPONENT_TABS_DOWNLOAD',
     payload: true
   })
+  t.deepEqual(store.dispatch.getCall(4).args[0], {
+    type: 'TOGGLE_COMPONENT_TABS_AUDIO',
+    payload: true
+  })
+  t.deepEqual(store.dispatch.getCall(5).args[0], {
+    type: 'TOGGLE_COMPONENT_INFO',
+    payload: true
+  })
 })
 
-test(`componentsEffect: it shows correct ui components for INIT action`, t => {
+test(`componentsEffect: it respects the visibleTabs on INIT`, t => {
   const testAction = {
     type: 'INIT'
   }
 
-  store.getState = sinon.stub().returns({})
+  state.components.visibleTabs = []
+  store.getState = sinon.stub().returns(state)
 
   components(store, testAction)
-  t.is(store.dispatch.getCalls().length, 1)
   t.deepEqual(store.dispatch.getCall(0).args[0], {
-    type: 'TOGGLE_COMPONENT_TABS_INFO',
+    type: 'TOGGLE_COMPONENT_INFO',
+    payload: true
+  })
+})
+
+test(`componentsEffect: it shows the chapters tab only when chapters are available on INIT`, t => {
+  const testAction = {
+    type: 'INIT'
+  }
+
+  state.chapters = []
+  store.getState = sinon.stub().returns(state)
+
+  components(store, testAction)
+  t.deepEqual(store.dispatch.getCall(0).args[0], {
+    type: 'TOGGLE_COMPONENT_TABS_SHARE',
+    payload: true
+  })
+})
+
+test(`componentsEffect: it shows the download tab only when audio files are available on INIT`, t => {
+  const testAction = {
+    type: 'INIT'
+  }
+
+  state.download = []
+  store.getState = sinon.stub().returns(state)
+
+  components(store, testAction)
+  t.deepEqual(store.dispatch.getCall(3).args[0], {
+    type: 'TOGGLE_COMPONENT_TABS_AUDIO',
     payload: true
   })
 })
 
+test(`componentsEffect: it shows the info section only when meta available on INIT`, t => {
+  const testAction = {
+    type: 'INIT'
+  }
+
+  state.components.visibleTabs = []
+  state.show = {}
+  state.episode = {}
+  store.getState = sinon.stub().returns(state)
+
+  components(store, testAction)
+  t.is(store.dispatch.getCalls().length, 0)
+})
+
 test(`componentsEffect: it shows correct ui components for STOP action`, t => {
   const testAction = {
     type: 'STOP'

src/store/reducers/components.js

@@ -1,5 +1,7 @@
+import { get } from 'lodash'
+
 const INITIAL = {
-  info: true,
+  info: false,
   error: false,
   controls: {
     button: {
@@ -21,10 +23,11 @@ const INITIAL = {
   tabs: {
     chapters: false,
     share: false,
-    audio: true,
+    audio: false,
     download: false,
     info: false
-  }
+  },
+  visibleTabs: ['chapters', 'share', 'audio', 'download', 'info']
 }
 
 const buttonVariant = (state, variant, active) => {
@@ -55,6 +58,11 @@ const buttonVariant = (state, variant, active) => {
 
 const components = (state = INITIAL, action) => {
   switch (action.type) {
+    case 'INIT':
+      return {
+        ...INITIAL,
+        visibleTabs: get(action.payload, 'visibleTabs', INITIAL.visibleTabs)
+      }
     case 'TOGGLE_COMPONENT_INFO':
       return {
         ...state,

src/store/reducers/components.test.js

@@ -5,7 +5,7 @@ let uiState, compareState
 
 test.beforeEach(() => {
   uiState = {
-    info: true,
+    info: false,
     error: false,
     controls: {
       button: {
@@ -27,10 +27,11 @@ test.beforeEach(() => {
     tabs: {
       chapters: false,
       share: false,
-      audio: true,
+      audio: false,
       download: false,
       info: false
-    }
+    },
+    visibleTabs: ['chapters', 'share', 'audio', 'download', 'info']
   }
 
   compareState = Object.assign({}, uiState)

src/store/reducers/tabs.js

@@ -1,19 +1,30 @@
 const get = require('lodash/get')
 
 const INITIAL = {
-  'chapters': false,
-  'audio': false,
-  'share': false,
-  'download': false,
-  'info': false
+  chapters: false,
+  audio: false,
+  share: false,
+  download: false,
+  info: false
 }
 
 const tabs = (state = INITIAL, action) => {
+  let tabs
+
   switch (action.type) {
+    case 'INIT':
+      tabs = get(action.payload, 'tabs', null)
+
+      return {
+        ...INITIAL,
+        ...tabs
+      }
+
     case 'TOGGLE_TAB':
-      return Object.assign({}, INITIAL, {
+      return {
+        ...INITIAL,
         [action.payload]: !get(state, action.payload, false)
-      })
+      }
 
     case 'SET_TABS':
       return action.payload