feat(autoplay): Add autoplay as url parameter

src/embed/embed.js

@@ -5,7 +5,7 @@ import browser from 'detect-browser'
 
 import { findNode, createNode, appendNode, tag } from 'utils/dom'
 import requestConfig from 'utils/request'
-import { params } from 'utils/url'
+import { urlParameters } from 'utils/url'
 
 import { iframeResizer } from 'iframe-resizer'
 // eslint-disable-next-line
@@ -86,12 +86,19 @@ const renderPlayer = anchor => player => {
     .then(getPodloveStore)
 }
 
-const mergeConfig = (episode) =>
+const getConfig = (episode) =>
   Bluebird.resolve(episode)
     // 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
-    .then(config => Object.assign({}, config, params))
+
+const dispatchUrlParameters = store => {
+  store.dispatch({
+    type: 'SET_URL_PARAMS',
+    payload: urlParameters
+  })
+
+  return store
+}
 
 // Config Node
 const configNode = (config = {}) => tag('script', `window.PODLOVE = ${JSON.stringify(config)}`)
@@ -111,7 +118,7 @@ const playerEntry = tag('PodlovePlayer')
 window.podlovePlayer = (selector, episode) => {
   const anchor = typeof selector === 'string' ? head(findNode(selector)) : selector
 
-  return mergeConfig(episode)
+  return getConfig(episode)
     .then(config => Bluebird.all([
       playerEntry,
       configNode(config),
@@ -122,4 +129,5 @@ window.podlovePlayer = (selector, episode) => {
     ]))
     .then(result => result.join(''))
     .then(renderPlayer(anchor))
+    .then(dispatchUrlParameters)
 }

src/embed/share.js

@@ -1,10 +1,9 @@
 import 'babel-polyfill'
-import { params } from 'utils/url'
+import { urlParameters } from 'utils/url'
 import remoteConfig from 'utils/request'
 
 import app from '../app'
 
-remoteConfig(params.episode)
-  .then(config => Object.assign({}, config, params))
-  .then(config => Object.assign({}, config, {display: 'embed'}))
+remoteConfig(urlParameters.episode)
+  .then(config => ({ ...config, display: 'embed' }))
   .then(app)

src/store/effects/index.js

@@ -6,6 +6,7 @@ import idleEffects from './idle'
 import quantileEffects from './quantiles'
 import chapterEffects from './chapters'
 import volumeEffects from './volume'
+import urlEffects from './url'
 
 import storage from 'utils/storage'
 import keyhandler from 'utils/keyboard'
@@ -27,5 +28,6 @@ export default store => {
     volumeEffects(store, action)
     componentsEffects(store, action)
     playerEffects(store, action)
+    urlEffects(store, action)
   }
 }

src/store/effects/storage.episode.js

@@ -41,27 +41,23 @@ export default (storage, store, action) => {
       break
     case 'SET_PLAYTIME':
     case 'UPDATE_PLAYTIME':
-      if (!podloveStorage) {
-        return
-      }
-
-      podloveStorage.set('playtime', action.payload)
+      podloveStorage && podloveStorage.set('playtime', action.payload)
       break
     case 'TOGGLE_TAB':
       const tabs = get(store.getState(), 'tabs', {})
-      podloveStorage.set('tabs', tabs)
+      podloveStorage && podloveStorage.set('tabs', tabs)
       break
     case 'SET_QUANTILE':
       const quantiles = get(store.getState(), 'quantiles', [])
-      podloveStorage.set('quantiles', quantiles)
+      podloveStorage && podloveStorage.set('quantiles', quantiles)
       break
     case 'SET_VOLUME':
       const currentVolume = get(store.getState(), 'volume', 1)
-      podloveStorage.set('volume', currentVolume)
+      podloveStorage && podloveStorage.set('volume', currentVolume)
       break
     case 'SET_RATE':
       const currentRate = get(store.getState(), 'rate', 1)
-      podloveStorage.set('rate', currentRate)
+      podloveStorage && podloveStorage.set('rate', currentRate)
       break
   }
 }

src/store/effects/storage.episode.test.js

@@ -114,8 +114,11 @@ test(`storageEffects: it sets the quantiles on INIT if stored`, t => {
   })
 })
 
-test(`storageEffects: it doesn't sets the playtime on INIT if not stored`, t => {
-  getStub = sinon.stub().returns(undefined)
+test(`storageEffects: it doesn't sets state on INIT if nothing is stored`, t => {
+  storage = sinon.stub().returns({
+    set: setStub,
+    get: sinon.stub().returns(undefined)
+  })
 
   storageEffects(storage, store, {
     type: 'INIT',
@@ -124,8 +127,7 @@ test(`storageEffects: it doesn't sets the playtime on INIT if not stored`, t =>
     }
   })
 
-  t.truthy(storage.called)
-  t.falsy(store.called)
+  t.falsy(store.dispatch.called)
 })
 
 test(`storageEffects: it persists the playtime on SET_PLAYTIME`, t => {

src/store/effects/storage.live.test.js

@@ -102,3 +102,19 @@ test(`storageEffects: it persists the tabs on TOGGLE_TAB`, t => {
     settings: true
   })
 })
+
+test(`storageEffects: it doesn't sets state on INIT if nothing is stored`, t => {
+  storage = sinon.stub().returns({
+    set: setStub,
+    get: sinon.stub().returns(undefined)
+  })
+
+  storageEffects(storage, store, {
+    type: 'INIT',
+    payload: {
+      foo: 'bar'
+    }
+  })
+
+  t.falsy(store.dispatch.called)
+})

src/store/effects/url.js

@@ -0,0 +1,16 @@
+import actions from '../actions'
+
+export default (store, { type, payload }) => {
+  switch (type) {
+    case 'SET_URL_PARAMS':
+      if (payload.playtime) {
+        store.dispatch(actions.setPlaytime(payload.playtime))
+        store.dispatch(actions.idle())
+      }
+
+      if (payload.autoplay) {
+        store.dispatch(actions.play())
+      }
+      break
+  }
+}

src/store/effects/url.test.js

@@ -0,0 +1,43 @@
+import test from 'ava'
+import sinon from 'sinon'
+
+import urlEffects from './url'
+
+let store
+
+test.beforeEach(t => {
+  store = {
+    dispatch: sinon.stub()
+  }
+})
+
+test(`storageEffects: it dispatches autoplay on SET_URL_PARAMS`, t => {
+  urlEffects(store, {
+    type: 'SET_URL_PARAMS',
+    payload: {
+      autoplay: true
+    }
+  })
+
+  t.deepEqual(store.dispatch.getCall(0).args[0], {
+    type: 'UI_PLAY'
+  })
+})
+
+test(`storageEffects: it dispatches playtime on SET_URL_PARAMS`, t => {
+  urlEffects(store, {
+    type: 'SET_URL_PARAMS',
+    payload: {
+      playtime: 10
+    }
+  })
+
+  t.deepEqual(store.dispatch.getCall(0).args[0], {
+    type: 'SET_PLAYTIME',
+    payload: 10
+  })
+
+  t.deepEqual(store.dispatch.getCall(1).args[0], {
+    type: 'IDLE'
+  })
+})

src/utils/url.js

@@ -1,7 +1,7 @@
 import queryString from 'query-string'
 import { timeToSeconds } from 'utils/time'
 
-const locationParams = queryString.parse(window.location.search)
+export const locationParams = queryString.parse(window.location.search)
 
 const parseParameters = parameters => {
   const parsed = {}
@@ -14,10 +14,14 @@ const parseParameters = parameters => {
     parsed.episode = parameters.episode
   }
 
+  if (parameters.autoplay) {
+    parsed.autoplay = true
+  }
+
   return parsed
 }
 
-export const params = Object.assign({}, parseParameters(locationParams))
+export const urlParameters = {...parseParameters(locationParams)}
 
 export const addQueryParameter = (url, additionalParameters = {}) => {
   const parser = document.createElement('a')