feat(cdn): Adds ability for dynamic base path

- Adds documentation for installation

build/webpack.config.dev.js

@@ -1,3 +1,4 @@
+const webpack = require('webpack')
 const {
   createConfig,
   devServer,
@@ -39,9 +40,14 @@ module.exports = createConfig([
 
   addPlugins([
     new Jarvis({ port: 1337 }),
+
     new BundleAnalyzerPlugin({
       analyzerMode: 'static',
       openAnalyzer: false
+    }),
+
+    new webpack.DefinePlugin({
+      BASE: JSON.stringify('.')
     })
   ])
 ])

build/webpack.config.prod.js

@@ -1,3 +1,5 @@
+const { get } = require('lodash')
+
 const webpack = require('webpack')
 const {
   createConfig,
@@ -36,11 +38,16 @@ module.exports = createConfig([
 
   addPlugins([
     new ExtractTextPlugin('style.css'),
+
     new webpack.optimize.CommonsChunkPlugin({
       name: 'vendor',
       filename: 'vendor.js',
       chunks: ['share', 'window'],
       minChunks: Infinity
+    }),
+
+    new webpack.DefinePlugin({
+      BASE: JSON.stringify(get(process.env, 'BASE', '.'))
     })
   ])
 ])

circle.yml

@@ -57,6 +57,8 @@ deployment:
       - yarn dist:clean
       - yarn build
       - yarn deploy:npm
+      - yarn dist:clean
+      - BASE="//cdn.podlove.org/web-player/" yarn build
       - yarn deploy:cdn
 
 

docs/advanced.md

@@ -1,7 +1,7 @@
 ---
 layout: page
 title: Advanced Usage
-navigation: 6
+navigation: 7
 ---
 
 # Advanced Usage

docs/config.md

@@ -1,7 +1,7 @@
 ---
 layout: page
 title: Config
-navigation: 4
+navigation: 5
 ---
 
 # Configuration

docs/embedding.md

@@ -1,7 +1,7 @@
 ---
 layout: page
 title: Embedding
-navigation: 2
+navigation: 3
 ---
 
 # Embedding

docs/error.md

@@ -1,7 +1,7 @@
 ---
 layout: page
 title: Error Handling
-navigation: 7
+navigation: 11
 ---
 
 # Error Handling

docs/installation.md

@@ -12,6 +12,35 @@ Podlove Webplayer can be integrated in different ways. We provide the always lat
 
 The easiest way to integrate the player is to simply integrate this script in your page:
 
+For https context:
+```html
+<script src="https://cdn.podlove.org/web-player/embed.js"></script>
 ```
 
+For http context:
+```html
+<script src="http://cdn.podlove.org/web-player/embed.js"></script>
+```
+
+Afterwards `podlovePlayer` should be available on the window object:
+
+```html
+<script>
+  podlovePlayer('#example', '/path/to/podcast/definition/or/object');
+</script>
+```
+
+Please be aware to __not__ set `reference.base` because this will break the binding to the cdn.
+
+
+## NPM
+
+If you want to serve a special player version you can find the player as the npm package [@podlove/podlove-web-player](https://www.npmjs.com/package/@podlove/podlove-web-player).
+
+To integrate the player you first have to install tha package:
+
+```javascript
+npm install @podlove/podlove-web-player --save
+```
 
+Afterwards move the player assets to a public folder of some webserver. By default the player will try to load further chunks from the webserver base. If the player files are located in a subpath you have to adapt the `reference.base` accordingly (see [config]({{ 'config.html' | relative_url }}))

docs/live.md

@@ -1,7 +1,7 @@
 ---
 layout: page
 title: Live
-navigation: 6
+navigation: 8
 ---
 
 # Live Mode

docs/persistence.md

@@ -1,7 +1,7 @@
 ---
 layout: page
 title: Player Persistence
-navigation: 5
+navigation: 6
 ---
 
 # Persistence

docs/playground.md

@@ -1,7 +1,7 @@
 ---
 layout: page
 title: Playground
-navigation: 7
+navigation: 9
 ---
 
 # Playground

docs/theme.md

@@ -1,7 +1,7 @@
 ---
 layout: page
 title: Theming
-navigation: 3
+navigation: 4
 ---
 
 # Theming

docs/transcripts.md

@@ -1,7 +1,7 @@
 ---
 layout: page
 title: Transcripts
-navigation: 7
+navigation: 10
 ---
 <script src="{{ 'embed.js' | relative_url }}"></script>
 

src/embed/embed.js

@@ -1,3 +1,5 @@
+/* globals BASE */
+
 import 'babel-polyfill'
 import { get, head, isString } from 'lodash'
 import Bluebird from 'bluebird'
@@ -104,9 +106,9 @@ const dispatchUrlParameters = store => {
 const configNode = (config = {}) => tag('script', `window.PODLOVE = ${JSON.stringify(config)}`)
 
 // Player Logic
-const styleBundle = config => tag('link', '', {rel: 'stylesheet', href: `${get(config.reference, 'base', '.')}/style.css`})
-const vendorBundle = config => tag('script', '', {type: 'text/javascript', src: `${get(config.reference, 'base', '.')}/vendor.js`})
-const appBundle = config => tag('script', '', {type: 'text/javascript', src: `${get(config.reference, 'base', '.')}/window.js`})
+const styleBundle = config => tag('link', '', {rel: 'stylesheet', href: `${get(config.reference, 'base', BASE)}/style.css`})
+const vendorBundle = config => tag('script', '', {type: 'text/javascript', src: `${get(config.reference, 'base', BASE)}/vendor.js`})
+const appBundle = config => tag('script', '', {type: 'text/javascript', src: `${get(config.reference, 'base', BASE)}/window.js`})
 
 // Dynamic resizer
 const dynamicResizer = tag('script', iframeResizerContentWindow)