From b7f0216cb8655a80d579c02fffdcc52b3a49ac80 Mon Sep 17 00:00:00 2001 From: Alexander Heimbuch Date: Thu, 2 Mar 2017 20:27:47 +0100 Subject: [PATCH] enable deep linking - only for single player - extend config by url - use ?playtime=hh:mm:ss --- src/embed/embed.js | 85 +++++++++++++++++++------------------------ src/embed/share.js | 9 +++++ src/embed/url.js | 25 ------------- src/utils/dom.js | 12 ++++++ src/utils/request.js | 8 ++++ src/utils/url.js | 16 ++++++++ src/webpack.config.js | 2 +- statics/share.html | 2 +- 8 files changed, 85 insertions(+), 74 deletions(-) create mode 100644 src/embed/share.js delete mode 100644 src/embed/url.js create mode 100644 src/utils/dom.js create mode 100644 src/utils/request.js create mode 100644 src/utils/url.js diff --git a/src/embed/embed.js b/src/embed/embed.js index b342b5042..e330b8473 100644 --- a/src/embed/embed.js +++ b/src/embed/embed.js @@ -1,22 +1,16 @@ import get from 'lodash/get' import Bluebird from 'bluebird' import browser from 'detect-browser' -import request from 'superagent' -import { iframeResizer } from 'iframe-resizer' -import iframeResizerContentWindow from 'raw-loader!iframe-resizer/js/iframeResizer.contentWindow.min.js' - -const findNode = selector => document.querySelectorAll(selector) -const createNode = tag => document.createElement(tag) -const appendNode = (node, child) => node.appendChild(child) -const tag = (tag, value = '', attributes = {}) => { - let attr = Object.keys(attributes).map(attribute => ` ${attribute}="${attributes[attribute]}"`) +import { findNode, createNode, appendNode, tag } from 'utils/dom' +import requestConfig from 'utils/request' +import urlConfig from 'utils/url' - attr = attr.join('') - return `<${tag}${attr}>${value}` -} +import { iframeResizer } from 'iframe-resizer' +import iframeResizerContentWindow from 'raw-loader!iframe-resizer/js/iframeResizer.contentWindow.min.js' -const sandbox = () => { +// Sandbox +const playerSandbox = () => { const frame = createNode('iframe') if (browser.name !== 'ios') { @@ -30,60 +24,57 @@ const sandbox = () => { return frame } -const sandboxDocument = iframe => get(iframe, ['contentWindow', 'document']) - +// Player renderer const renderPlayer = (config, player) => anchor => { - const injector = sandbox(config) + const sandbox = playerSandbox(config) - appendNode(anchor, injector) + appendNode(anchor, sandbox) - const injectorDoc = sandboxDocument(injector) + const sandboxDoc = get(sandbox, ['contentWindow', 'document']) - injectorDoc.open() - injectorDoc.write('') - injectorDoc.write('') - injectorDoc.write(' ') - injectorDoc.write(player) - injectorDoc.close() + sandboxDoc.open() + sandboxDoc.write('') + sandboxDoc.write('') + sandboxDoc.write(' ') + sandboxDoc.write(player) + sandboxDoc.close() iframeResizer({ checkOrigin: false, log: false - }, injector) + }, sandbox) } -const generateConfig = config => { - return Bluebird.resolve(tag('script', `window.PODLOVE = ${JSON.stringify(config)}`)) -} +// Config Handling +const createConfigNode = (config = {}) => + tag('script', `window.PODLOVE = ${JSON.stringify(config)}`) -const getConfig = config => { +const remoteConfig = (config = {}) => { if (typeof config === 'string') { - return request - .get(config) - .query({ format: 'json' }) - .set('Accept', 'application/json') - .then(res => res.body) - .then(generateConfig) + return requestConfig(config) } - if (typeof config === 'object') { - return generateConfig(config) - } + return Bluebird.resolve(config) } +// Bootstrap window.podlovePlayer = (selector, config) => { const anchor = typeof selector === 'string' ? findNode(selector) : [selector] - const logic = tag('script', '', {type: 'text/javascript', src: './window.bundle.js'}) + const appLogic = tag('script', '', {type: 'text/javascript', src: './window.bundle.js'}) const dynamicResizer = tag('script', iframeResizerContentWindow) const playerEntry = tag('PodlovePlayer') - getConfig(config).then(configObject => { - anchor.forEach(renderPlayer(config, [ - playerEntry, - configObject, - logic, - dynamicResizer - ].join(''))) - }) + remoteConfig(config) + // load parameters from url + .then(config => anchor.length > 1 ? config : Object.assign({}, config, urlConfig)) + .then(createConfigNode) + .then(configObject => { + anchor.forEach(renderPlayer(config, [ + playerEntry, + configObject, + appLogic, + dynamicResizer + ].join(''))) + }) } diff --git a/src/embed/share.js b/src/embed/share.js new file mode 100644 index 000000000..6696e1593 --- /dev/null +++ b/src/embed/share.js @@ -0,0 +1,9 @@ +import urlConfig from 'utils/url' +import remoteConfig from 'utils/request' + +import app from '../app' + +remoteConfig(urlConfig.episode) + .then(config => Object.assign({}, config, urlConfig)) + .then(config => Object.assign({}, config, {mode: 'share'})) + .then(app) diff --git a/src/embed/url.js b/src/embed/url.js deleted file mode 100644 index 718acc1a2..000000000 --- a/src/embed/url.js +++ /dev/null @@ -1,25 +0,0 @@ -import request from 'superagent' -import queryString from 'query-string' - -import app from '../app' - -const params = queryString.parse(window.location.search) - -const overload = params => config => { - config.mode = 'share' - - if (params.playtime) { - config.playtime = params.playtime - config.playstate = 'idle' - } - - return config -} - -request - .get(params.episode) - .query({ format: 'json' }) - .set('Accept', 'application/json') - .then(res => res.body) - .then(overload(params)) - .then(app) diff --git a/src/utils/dom.js b/src/utils/dom.js new file mode 100644 index 000000000..40a0e7673 --- /dev/null +++ b/src/utils/dom.js @@ -0,0 +1,12 @@ +import curry from 'lodash/fp/curry' + +export const findNode = selector => document.querySelectorAll(selector) +export const createNode = tag => document.createElement(tag) +export const appendNode = curry((node, child) => node.appendChild(child)) + +export const tag = curry((tag, value = '', attributes = {}) => { + let attr = Object.keys(attributes).map(attribute => ` ${attribute}="${attributes[attribute]}"`) + + attr = attr.join('') + return `<${tag}${attr}>${value}` +}) diff --git a/src/utils/request.js b/src/utils/request.js new file mode 100644 index 000000000..c9be46d06 --- /dev/null +++ b/src/utils/request.js @@ -0,0 +1,8 @@ +import request from 'superagent' + +export default episode => + request + .get(episode) + .query({ format: 'json' }) + .set('Accept', 'application/json') + .then(res => res.body) diff --git a/src/utils/url.js b/src/utils/url.js new file mode 100644 index 000000000..cbaef916f --- /dev/null +++ b/src/utils/url.js @@ -0,0 +1,16 @@ +import queryString from 'query-string' +import { timeToSeconds } from 'utils/time' + +const params = queryString.parse(window.location.search) + +const parsePlaytime = parameters => { + if (parameters.playtime) { + return { + playtime: timeToSeconds(parameters.playtime) + } + } + + return {} +} + +export default Object.assign({}, params, parsePlaytime(params)) diff --git a/src/webpack.config.js b/src/webpack.config.js index 07783f856..00b731868 100644 --- a/src/webpack.config.js +++ b/src/webpack.config.js @@ -6,7 +6,7 @@ const config = { entry: { embed: path.resolve(__dirname, 'embed', 'embed.js'), window: path.resolve(__dirname, 'embed', 'window.js'), - url: path.resolve(__dirname, 'embed', 'url.js') + share: path.resolve(__dirname, 'embed', 'share.js') }, output: { path: path.resolve('dist'), diff --git a/statics/share.html b/statics/share.html index 6752718a6..aae12f218 100644 --- a/statics/share.html +++ b/statics/share.html @@ -10,6 +10,6 @@ - +