CHANGELOG.md

@@ -1,3 +1,27 @@
+<a name="4.1.6"></a>
+## [4.1.6](https://github.com/podlove/podlove-web-player/compare/v4.1.5...v4.1.6) (2018-09-30)
+
+
+### Bug Fixes
+
+* add FiraSans-Bold (fira sans v8 600) webfont to improve rendering of bold in safari, change scss for chapter links to explicitly use bold when active ([fe856a8](https://github.com/podlove/podlove-web-player/commit/fe856a8))
+* **chapters:** fix alt click interaction over the link part by making it based on the progressContainer vs. the event target ([f52e723](https://github.com/podlove/podlove-web-player/commit/f52e723))
+* **chapters:** remove wrong click guard on onChapterClick, change to use linkHover state to guard to be in line with what is displayed ([8e3a3e0](https://github.com/podlove/podlove-web-player/commit/8e3a3e0))
+* **package:** update detect-browser to version 3.0.1 ([e035721](https://github.com/podlove/podlove-web-player/commit/e035721))
+* **package:** update iframe-resizer to version 3.6.2 ([2fb175e](https://github.com/podlove/podlove-web-player/commit/2fb175e))
+* **package:** update lodash to version 4.17.11 ([df4cded](https://github.com/podlove/podlove-web-player/commit/df4cded))
+* **package:** update lunr to version 2.3.3 ([ba4042e](https://github.com/podlove/podlove-web-player/commit/ba4042e))
+* **package:** update mobile-detect to version 1.4.3 ([d1e74ba](https://github.com/podlove/podlove-web-player/commit/d1e74ba))
+* **package:** update vue-i18n to version 8.1.0 ([4a13ecb](https://github.com/podlove/podlove-web-player/commit/4a13ecb))
+* **tabs:** remove false 0.5 opacity of transcript icon, unify tab icon stroke widths and positions ([acc4fde](https://github.com/podlove/podlove-web-player/commit/acc4fde))
+
+
+### Features
+
+* **chapters:** add support for the "href" property in chapters by showing it in the chapters tab ([f7240f2](https://github.com/podlove/podlove-web-player/commit/f7240f2))
+
+
+
 <a name="4.1.5"></a>
 ## [4.1.5](https://github.com/podlove/podlove-web-player/compare/v4.1.4...v4.1.5) (2018-08-25)
 

assetsources/svg/optimize.sh

@@ -0,0 +1,7 @@
+#!/bin/sh
+# requires svgo: brew install svgo
+for f in *.svg; do 
+	echo $f":"; 
+	svgo --enable={sortAttrs} --multipass --pretty $f -o - | sed 's/svg /svg width="25" height="25" /g' | sed 's/fill="#fff"/:fill="color || '"'"'currentColor'"'"'"/g' | sed 's/stroke="#fff"/:stroke="color || '"'"'currentColor'"'"'"/g' 
+	echo; 
+done

build/blocks/entry.js

@@ -5,16 +5,14 @@ const prod = prefix => ({
   embed: path.resolve(sourceDir, 'embed', 'embed.js'),
   'extensions/external-events': path.resolve(sourceDir, 'extensions', 'external-events.js'),
   [prepend('window', prefix)]: path.resolve(sourceDir, 'embed', 'window.js'),
-  [prepend('share', prefix)]: path.resolve(sourceDir, 'embed', 'share.js'),
-  [prepend('vendor', prefix)]: path.resolve(sourceDir, 'vendor.js')
+  [prepend('share', prefix)]: path.resolve(sourceDir, 'embed', 'share.js')
 })
 
 const dev = () => ({
   embed: path.resolve(sourceDir, 'embed', 'embed.js'),
   'extensions/external-events': path.resolve(sourceDir, 'extensions', 'external-events.js'),
   window: path.resolve(sourceDir, 'embed', 'window.js'),
   share: path.resolve(sourceDir, 'embed', 'share.js'),
-  vendor: path.resolve(sourceDir, 'vendor.js'),
   example: path.resolve(sourceDir, 'statics', 'example', 'example.js')
 })
 

build/blocks/optimization.js

@@ -1,26 +1,23 @@
 const { prepend } = require('./dir')
+const ignoredChunks = ['embed', 'extensions/external-events']
 
-const ignoredAssets = ['embed', 'extensions/external-events']
-
-module.exports = prefix => ({
+module.exports = (prefix = '') => ({
   splitChunks: {
     cacheGroups: {
       default: false,
-      common: false,
+      vendors: false,
       vendor: {
+        name: 'vendor',
         chunks: chunk => ~[prepend('window', prefix), prepend('share', prefix)].indexOf(chunk.name),
-        name: prepend('vendor', prefix),
-        test: prepend('vendor', prefix),
-        enforce: true
+        test: /node_modules/
       },
       styles: {
-        name: prepend('style', prefix),
+        name: 'style',
         test: /\.(s?css|vue)$/,
         enforce: true,
-        chunks: chunk => !~ignoredAssets.indexOf(chunk.name),
+        chunks: chunk => chunk.name && !~ignoredChunks.indexOf(chunk.name),
         minChunks: 1
       }
     }
-  },
-  runtimeChunk: false
+  }
 })

build/blocks/output.js

@@ -1,7 +1,8 @@
-const { distDir } = require('./dir')
+const { distDir, prepend } = require('./dir')
 
-module.exports = publicPath => ({
+module.exports = (publicPath, prefix = '') => ({
   path: distDir,
   filename: '[name].js',
+  chunkFilename: prepend('[name].js', prefix),
   publicPath
 })

build/blocks/plugins.js

@@ -13,8 +13,8 @@ const { sourceDir, prepend } = require('./dir')
 
 const vue = () => new VueLoaderPlugin()
 
-const css = () => new MiniCssExtractPlugin({
-  filename: `[name].css`
+const css = (prefix = '') => new MiniCssExtractPlugin({
+  filename: prepend('[name].css', prefix)
 })
 
 const minifyCss = () => new OptimizeCSSAssetsPlugin({})

build/blocks/resolve.js

@@ -8,6 +8,7 @@ module.exports = () => ({
     utils: path.resolve(sourceDir, 'utils'),
     shared: path.resolve(sourceDir, 'components', 'shared'),
     icons: path.resolve(sourceDir, 'components', 'icons'),
+    components: path.resolve(sourceDir, 'components'),
     lang: path.resolve(sourceDir, 'lang'),
     core: path.resolve(sourceDir, 'core'),
     styles: path.resolve(sourceDir, 'styles')

build/blocks/rules.js

@@ -3,7 +3,7 @@ const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 const autoprefixer = require('autoprefixer')
 const cssClean = require('postcss-clean')
 
-const { prepend , sourceDir} = require('./dir')
+const {prepend, sourceDir} = require('./dir')
 
 const vue = () => ({
   test: /\.vue$/,

build/webpack.config.cdn.js

@@ -6,7 +6,7 @@ const { entry, output, resolve, optimization, rules, plugins } = require('./bloc
 module.exports = {
   mode: 'production',
   entry: entry.prod(version),
-  output: output(BASE),
+  output: output(BASE, version),
 
   optimization: optimization(version),
 
@@ -24,7 +24,7 @@ module.exports = {
 
   plugins: [
     plugins.vue(),
-    plugins.css(),
+    plugins.css(version),
     plugins.minifyCss(),
     plugins.version(),
     plugins.base(`${BASE}${version}`),

cypress/integration/tab-info.spec.js

@@ -1,8 +1,33 @@
 /* eslint-env mocha */
-/* globals cy */
+/* globals cy, expect */
 const { setState } = require('../helpers/state')
 const domSelectors = require('../selectors')
 
+const allowedMarkup = [
+  '<strong>bold text</strong>',
+  '<em>italic text</em>',
+  '<i>also italic text</i>',
+  '<br>',
+  '<p>A paragraph</p>',
+  '<ul>',
+  '<li>A unordered list item</li>',
+  '<li>Another unordered list item</li>',
+  '</ul>',
+  '<ol>',
+  '<li>An ordered list item</li>',
+  '<li>Another ordered list item</li>',
+  '</ol>',
+  {
+    test: '<a href="/path/to/somewhere">A link</a>',
+    expected: '<a target="_blank" href="/path/to/somewhere">A link</a>'
+  }
+]
+
+const prohibitedMarkup = [
+  '<script>foo</script>',
+  '<iframe />'
+]
+
 describe('Info Tab', () => {
   let selectors
 
@@ -88,6 +113,46 @@ describe('Info Tab', () => {
         cy.tab('info')
         selectors.tabs.info.episode.summary().should('not.exist')
       })
+
+      it(`allows custom markup`, function () {
+        this.episode.summary = allowedMarkup.map(input => {
+          if (typeof input === 'string') {
+            return input
+          }
+
+          return input.test
+        }).join('')
+
+        cy.window().then(setState(this.episode, this.audio, this.show, this.runtime))
+        cy.tab('info')
+        selectors.tabs.info.episode.summary().then($el => {
+          const summaryHtml = $el.html()
+          allowedMarkup.forEach(markup => {
+            let expected
+            if (typeof markup === 'string') {
+              expected = markup
+            } else {
+              expected = markup.expected
+            }
+
+            expect(summaryHtml).to.contain(expected)
+          })
+        })
+      })
+
+      it(`doesn't allow malicious markup`, function () {
+        this.episode.summary = ['foo', ...prohibitedMarkup].join('')
+
+        cy.window().then(setState(this.episode, this.audio, this.show, this.runtime))
+        cy.tab('info')
+        selectors.tabs.info.episode.summary().then($el => {
+          const summaryHtml = $el.html()
+
+          prohibitedMarkup.forEach(markup => {
+            expect(summaryHtml).not.to.contain(markup)
+          })
+        })
+      })
     })
 
     describe('Link', () => {
@@ -151,6 +216,46 @@ describe('Info Tab', () => {
         cy.tab('info')
         selectors.tabs.info.show.summary().should('not.exist')
       })
+
+      it(`allows custom markup`, function () {
+        this.show.show.summary = allowedMarkup.map(input => {
+          if (typeof input === 'string') {
+            return input
+          }
+
+          return input.test
+        }).join('')
+
+        cy.window().then(setState(this.episode, this.audio, this.show, this.runtime))
+        cy.tab('info')
+        selectors.tabs.info.show.summary().then($el => {
+          const summaryHtml = $el.html()
+          allowedMarkup.forEach(markup => {
+            let expected
+            if (typeof markup === 'string') {
+              expected = markup
+            } else {
+              expected = markup.expected
+            }
+
+            expect(summaryHtml).to.contain(expected)
+          })
+        })
+      })
+
+      it(`doesn't allow malicious markup`, function () {
+        this.show.show.summary = ['foo', ...prohibitedMarkup].join('')
+
+        cy.window().then(setState(this.episode, this.audio, this.show, this.runtime))
+        cy.tab('info')
+        selectors.tabs.info.show.summary().then($el => {
+          const summaryHtml = $el.html()
+
+          prohibitedMarkup.forEach(markup => {
+            expect(summaryHtml).not.to.contain(markup)
+          })
+        })
+      })
     })
 
     describe('Link', () => {

docs/.vuepress/components/PodloveWebPlayer.vue

@@ -5,9 +5,9 @@
 <script>
   export default {
     name: 'PodloveWebPlayer',
-    props: ['config', 'mode', 'id'],
+    props: ['config', 'mode', 'id', 'extend'],
     mounted: function () {
-      window.podlovePlayer(this.$el, this.config).then(store => {
+      window.podlovePlayer(this.$el, this.config, this.extend).then(store => {
         this.$emit('ready', store)
         return store
       }).then(window.registerExternalEvents(this.id))

docs/.vuepress/public/fixtures/chapters/fg55.json

@@ -14,7 +14,7 @@
   {
      "start":"00:01:15.911",
      "title":"Universit\u00e4ts-Sternwarte M\u00fcnchen",
-     "href":"",
+     "href":"https://www.usm.uni-muenchen.de",
      "image":""
   },
   {

docs/.vuepress/public/fixtures/example.json

@@ -73,7 +73,7 @@
     {
       "start": "00:52:04.099",
       "title": "SUBSCRIBE 9",
-      "href": "",
+      "href": "https://das-sendezentrum.de/subscribe/sub9/",
       "image": "https://picsum.photos/400/400/?random&image=5"
     },
     {
@@ -97,7 +97,7 @@
     {
       "start": "01:54:38.442",
       "title": "IPv6",
-      "href": "",
+      "href": "http://test.schrimpe.de/",
       "image": "https://picsum.photos/400/400/?random&image=9"
     },
     {
@@ -139,7 +139,7 @@
     {
       "start": "03:49:50.662",
       "title": "Blade Runner 2049",
-      "href": "",
+      "href": "https://en.wikipedia.org/wiki/Blade_Runner_2049",
       "image": ""
     },
     {

docs/config.md

@@ -57,6 +57,8 @@ navigation: 5
 |-----------|---------------------------------------|
 | start     | Chapter Start Time in Format hh:mm:ss |
 | title     | Chapter Title                         |
+| href      | Chapter Link URL (optional)           |
+| image     | Chapter Image URL (optional)          |
 
 _Not providing chapters will disable all chapter related functions._
 
@@ -67,8 +69,8 @@ _Not providing chapters will disable all chapter related functions._
       { start:"00:01:39", title: 'Begrüßung'},
       { start:"00:04:58", title: 'IETF Meeting Netzwerk'},
       { start:"00:18:37", title: 'Kalender'},
-      { start:"00:33:40", title: 'Freak Show Bingo'},
-      { start:"00:35:37", title: 'Wikipedia'},
+      { start:"00:33:40", title: 'Freak Show Bingo', image: 'https://picsum.photos/400/400/?random&image=6'},
+      { start:"00:35:37", title: 'Wikipedia', href: 'https://wikipedia.de'},
       { start:"01:17:26", title: 'iPhone Akkukalibration'},
       { start:"01:24:55", title: 'Alte iPads und iPod touches'},
       { start:"01:31:02", title: 'Find My Friends'},