feat(extensions): Adds extensions

build/blocks/entry.js

@@ -3,6 +3,7 @@ const { sourceDir, prepend } = require('./dir')
 
 module.exports = 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')

build/blocks/optimization.js

@@ -1,5 +1,7 @@
 const { prepend } = require('./dir')
 
+const ignoredAssets = ['embed', 'extensions/external-events']
+
 module.exports = prefix => ({
   splitChunks: {
     cacheGroups: {
@@ -15,7 +17,7 @@ module.exports = prefix => ({
         name: prepend('style', prefix),
         test: /\.(s?css|vue)$/,
         enforce: true,
-        chunks: chunk => chunk.name !== 'embed',
+        chunks: chunk => !~ignoredAssets.indexOf(chunk.name),
         minChunks: 1
       }
     }

docs/extensions.md

@@ -0,0 +1,50 @@
+---
+layout: page
+title: Extensions
+navigation: 8
+---
+
+# Extensions
+
+## External Event Handling
+
+External event handling gives you the ability to control the player from other dom elements.
+
+### Installation
+
+```javascript
+  <script src="extensions/external-events.js"></script>
+  <div id="player-id"></div>
+  <script>
+    podlovePlayer('#player-id', 'path/to/config')
+      .then(registerExternalEvents('player-id'));
+  </script>
+```
+
+### Usage
+
+```javascript
+  <a
+    href="javascript:void(0)"
+    rel="podlove-web-player" // Registeres event handler
+    data-ref="player-id"     // ID of player to control, if undefined all players without an ID are controlled
+    data-action="play|pause" // Action that is triggered on click (optional)
+    data-time="00:10:10.500" // Time in simple time format that is selected (optional)
+    data-tab="info|chapters|transcripts|share|download|audio" // Tab that is selected on interaction (optional)
+  >External Element</a>
+```
+### Example
+
+<button class="button" rel="podlove-web-player" data-ref="example-player" data-action="play">play</button>
+<button class="button" rel="podlove-web-player" data-ref="example-player" data-action="pause">pause</button>
+<button class="button" rel="podlove-web-player" data-ref="example-player" data-time="00:10:00">set time</button>
+<button class="button" rel="podlove-web-player" data-ref="example-player" data-tab="download">activate download tab</button>
+<button class="button" rel="podlove-web-player" data-ref="example-player" data-action="play" data-time="00:10:00" data-tab="download">all combined</button>
+
+<p id="example-player" class="section"></p>
+<script src="{{ 'embed.js' | relative_url }}"></script>
+<script src="{{ 'extensions/external-events.js' | relative_url }}"></script>
+<script>
+    podlovePlayer('#example-player', './fixtures/example.json').then(registerExternalEvents('example-player'));
+</script>
+

src/extensions/external-events.js

@@ -0,0 +1,46 @@
+import { compose, get } from 'lodash/fp'
+import { toPlayerTime } from 'utils/time'
+import actions from 'store/actions'
+
+const isPlayerInstance = id => (data = {}) => data.ref === id ? data : {}
+
+const handleAction = store => (data = {}) => {
+  const action = actions[data.action]
+  action && store.dispatch(action())
+  return data
+}
+
+const handleTab = store => (data = {}) => {
+  data.tab && store.dispatch(actions.toggleTab(data.tab))
+  return data
+}
+
+const handleTime = store => (data = {}) => {
+  data.time && store.dispatch(actions.setPlaytime(toPlayerTime(data.time)))
+  return data
+}
+
+const eventHandler = (id, store) =>
+  compose(
+    handleTime(store),
+    handleTab(store),
+    handleAction(store),
+    isPlayerInstance(id),
+    get('target.dataset')
+  )
+
+/**
+ * External Events registry
+ *
+ * rel="podlove-web-player"
+ *   data-ref="web-player-id"
+ *   data-action="play|pause"
+ *   data-tab="info"
+ *   data-time="00:10:12"
+ */
+window.registerExternalEvents = id => store => {
+  const references = [...document.querySelectorAll('[rel="podlove-web-player"]')]
+  references.forEach(ref => ref.addEventListener('click', eventHandler(id, store)))
+
+  return store
+}