Merge pull request #361 from alexander-heimbuch/fix/publisher-integra…

…tion

fix(publisher-integration): Several adaptions for web player integration

package.json

@@ -3,7 +3,7 @@
   "title": "PodloveWebPlayer",
   "description": "a Podcast-optimized, HTML5-based video and audio player with Flash fallback. It can be used as a WordPress plugin or within a static HTML/JavaScript context.",
   "license": "BSD-2-Clause",
-  "version": "4.0.0-proto",
+  "version": "4.0.0-alpha",
   "homepage": "https://github.com/podlove/podlove-web-player",
   "contributors": [],
   "repository": "https://github.com/podlove/podlove-web-player.git",

src/app.js

@@ -1,6 +1,7 @@
 import Vue from 'vue'
 import head from 'lodash/head'
 
+import debug from 'utils/debug'
 import registerDirectives from './directives'
 
 registerDirectives(Vue)
@@ -12,6 +13,9 @@ import store from 'store'
 import App from './components/App.vue'
 
 export default config => {
+  // Enhance config with app debug information
+  config = Object.assign({}, config, { debug })
+
   // Initialize meta for store
   store.dispatch(store.actions.init(config))
 

src/components/info/Info.vue

@@ -3,7 +3,7 @@
     <div class="podlove-info--header">
       <div class="podlove-player--download"></div>
       <div class="podlove-info--poster">
-        <img class="podlove-info--poster--image" :src="poster" :style="posterStyle(theme)"/>
+        <img class="podlove-info--poster--image" v-if="poster" :src="poster" :style="posterStyle(theme)"/>
       </div>
       <div class="podlove-player--share"><ShareButton /></div>
     </div>

src/components/player/Player.vue

@@ -3,7 +3,7 @@
     <div class="podlove-player--control">
       <div class="podlove-player--download"></div>
       <ControlBar class="podlove-player--control-bar"/>
-      <div class="podlove-player--share"><ShareButton /></div>
+      <div class="podlove-player--share" v-if="reference.share && reference.config"><ShareButton /></div>
     </div>
     <ProgressBar />
     <Timer />
@@ -20,7 +20,8 @@
   export default {
     data() {
       return {
-        playstate: this.$select('playstate')
+        playstate: this.$select('playstate'),
+        reference: this.$select('reference')
       }
     },
     components: {

src/components/tabs/settings/Settings.vue

@@ -1,6 +1,8 @@
 <template>
   <div class="podlove-settings">
-    <a :href="exportStore()" download="podlove-web-player-debug.json">export debug state</a>
+    <div class="podlove-settings__footer">
+      <a class="podlove-settings__version" title="Export Debug State" :href="exportStore()" download="podlove-web-player-debug.json">Podlove Web Player v{{version}}</a>
+    </div>
   </div>
 </template>
 
@@ -12,6 +14,11 @@
   }
 
   export default {
+    data() {
+      return {
+         version: this.$select('debug.version')
+      }
+    },
     methods: {
       exportStore
     }
@@ -23,7 +30,15 @@
 
   .podlove-settings {
     width: 100%;
-    padding: $padding 0;
-    text-align: center;
+    padding: $padding;
+  }
+
+  .podlove-settings__footer {
+    text-align: right;
+  }
+
+  .podlove-settings__version {
+    font-size: 0.8rem;
+    color: #444;
   }
 </style>

src/embed/embed.js

@@ -85,7 +85,7 @@ const configNode = (config = {}) =>
   Bluebird.resolve(config)
     // If the config is a string, lets assume that this will point to the remote config json
     .then(config => isString(config) ? requestConfig(config) : config)
-    // load parameters from url
+    // Load parameters from url
     .then(config => Object.assign({}, config, urlConfig))
     // Finally return the node
     .then(config => tag('script', `window.PODLOVE = ${JSON.stringify(config)}`))
@@ -102,7 +102,6 @@ const playerEntry = tag('PodlovePlayer')
 // Bootstrap
 window.podlovePlayer = (selector, config) => {
   const anchor = typeof selector === 'string' ? head(findNode(selector)) : selector
-
   return Bluebird.all([
     playerEntry,
     configNode(config),

src/store/reducers/chapters.js

@@ -27,7 +27,7 @@ const setActive = playtime => chapter => {
 const chapters = (state = [], action) => {
   switch (action.type) {
     case 'INIT':
-      const chapters = get(action.payload, 'chapters', [])
+      const chapters = get(action.payload, 'chapters') || []
 
       return chapters
         .reduce(parseChapters(action.payload.duration), [])

src/store/reducers/init.js

@@ -48,10 +48,20 @@ const reference = (state = {}, action) => {
   }
 }
 
+const debug = (state = {}, action) => {
+  switch (action.type) {
+    case 'INIT':
+      return get(action.payload, 'debug', state)
+    default:
+      return state
+  }  
+}
+
 export {
   poster,
   subtitle,
   title,
   reference,
-  mode
+  mode,
+  debug
 }

src/utils/debug.js

@@ -0,0 +1,7 @@
+import { version } from '../../package.json'
+import browser from 'detect-browser'
+
+export default ({
+    version,
+    browser: `${browser.name}:${browser.version}`
+})