This repository has been archived by the owner on May 24, 2021. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 69
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(loader): Adds loading indicator
- refactors embed javascript
- Loading branch information
1 parent
a1abe8a
commit f117dc6
Showing
10 changed files
with
358 additions
and
144 deletions.
There are no files selected for viewing
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,135 +1,54 @@ | ||
| /* globals BASE */ | ||
|
|
||
| import 'babel-polyfill' | ||
| import { get, head, isString } from 'lodash' | ||
| import Bluebird from 'bluebird' | ||
|
|
||
| import { findNode, createNode, appendNode, tag } from 'utils/dom' | ||
| import requestConfig from 'utils/request' | ||
| import { urlParameters } from 'utils/url' | ||
|
|
||
| import { get, compose } from 'lodash' | ||
| import { iframeResizer } from 'iframe-resizer' | ||
| // eslint-disable-next-line | ||
| import iframeResizerContentWindow from 'raw-loader!iframe-resizer/js/iframeResizer.contentWindow.js' | ||
|
|
||
| // Player renderer | ||
| const playerSandbox = anchor => { | ||
| const frame = createNode('iframe') | ||
|
|
||
| frame.setAttribute('width', anchor.offsetWidth) | ||
|
|
||
| frame.setAttribute('min-width', '100%') | ||
| frame.setAttribute('seamless', '') | ||
| frame.setAttribute('scrolling', 'no') | ||
| frame.setAttribute('frameborder', '0') | ||
|
|
||
| // Reset the width on viewport resize | ||
| window.addEventListener('resize', () => { | ||
| frame.setAttribute('width', anchor.offsetWidth) | ||
| }) | ||
|
|
||
| appendNode(anchor, frame) | ||
| return frame | ||
| } | ||
|
|
||
| const injectPlayer = (sandbox, player) => new Bluebird(resolve => { | ||
| const sandboxDoc = get(sandbox, ['contentWindow', 'document']) | ||
|
|
||
| const documentLoaded = () => { | ||
| if (sandboxDoc.readyState === 'complete') { | ||
| return resolve(sandbox) | ||
| } | ||
|
|
||
| return setTimeout(documentLoaded, 150) | ||
| } | ||
|
|
||
| sandboxDoc.open() | ||
| sandboxDoc.write('<!DOCTYPE html>') | ||
| sandboxDoc.write('<html>') | ||
| sandboxDoc.write('<head><meta charset="utf-8" /></head>') | ||
| sandboxDoc.write(player) | ||
| sandboxDoc.close() | ||
|
|
||
| return documentLoaded() | ||
| }) | ||
|
|
||
| const getPodloveStore = sandbox => | ||
| get(sandbox, ['contentWindow', 'PODLOVE_STORE', 'store']) | ||
| import { findNode, tag } from 'utils/dom' | ||
| import requestConfig from 'utils/request' | ||
| import { sandbox, sandboxWindow } from 'utils/sandbox' | ||
|
|
||
| const preloader = sandbox => ({ | ||
| init: () => { | ||
| sandbox.style.opacity = 0 | ||
| // maximum width player | ||
| sandbox.style['max-width'] = '768px' | ||
| sandbox.style.transition = 'all 500ms' | ||
| }, | ||
| done: () => { | ||
| sandbox.style.opacity = 1 | ||
| sandbox.style.height = 'auto' | ||
| } | ||
| }) | ||
| import loader from './loader' | ||
|
|
||
| const renderPlayer = anchor => player => { | ||
| const sandbox = playerSandbox(anchor) | ||
| const loader = preloader(sandbox) | ||
| const player = config => [ | ||
| // Config | ||
| tag('script', `window.PODLOVE = ${JSON.stringify(config)}`), | ||
|
|
||
| loader.init() | ||
| // Loader | ||
| loader(config), | ||
|
|
||
| return injectPlayer(sandbox, player) | ||
| .then(sandbox => { | ||
| iframeResizer({ | ||
| checkOrigin: false, | ||
| log: false | ||
| }, sandbox) | ||
| // Entry | ||
| tag('PodlovePlayer'), | ||
|
|
||
| loader.done() | ||
| }) | ||
| .return(sandbox) | ||
| .then(getPodloveStore) | ||
| } | ||
| // Bundles | ||
| tag('link', '', {rel: 'stylesheet', href: `${get(config.reference, 'base', BASE)}/style.css`}), | ||
| tag('script', '', {type: 'text/javascript', src: `${get(config.reference, 'base', BASE)}/vendor.js`}), | ||
| tag('script', '', {type: 'text/javascript', src: `${get(config.reference, 'base', BASE)}/window.js`}), | ||
|
|
||
| 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) | ||
| // iFrameResizer | ||
| tag('script', iframeResizerContentWindow) | ||
| ].join('') | ||
|
|
||
| const dispatchUrlParameters = store => { | ||
| store.dispatch({ | ||
| type: 'SET_URL_PARAMS', | ||
| payload: urlParameters | ||
| }) | ||
| const resizer = sandbox => { | ||
| iframeResizer({ | ||
| checkOrigin: false, | ||
| log: false | ||
| }, sandbox) | ||
|
|
||
| return store | ||
| return sandbox | ||
| } | ||
|
|
||
| // Config Node | ||
| const configNode = (config = {}) => tag('script', `window.PODLOVE = ${JSON.stringify(config)}`) | ||
|
|
||
| // Player Logic | ||
| 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) | ||
|
|
||
| // Transclusion point | ||
| const playerEntry = tag('PodlovePlayer') | ||
|
|
||
| // Bootstrap | ||
| window.podlovePlayer = (selector, episode) => { | ||
| const anchor = typeof selector === 'string' ? head(findNode(selector)) : selector | ||
|
|
||
| return getConfig(episode) | ||
| .then(config => Bluebird.all([ | ||
| playerEntry, | ||
| configNode(config), | ||
| styleBundle(config), | ||
| vendorBundle(config), | ||
| appBundle(config), | ||
| dynamicResizer | ||
| ])) | ||
| .then(result => result.join('')) | ||
| .then(renderPlayer(anchor)) | ||
| .then(dispatchUrlParameters) | ||
| } | ||
| const sandboxFromSelector = compose(sandbox, findNode) | ||
|
|
||
| window.podlovePlayer = (selector, episode) => | ||
| requestConfig(episode) | ||
| .then(player) | ||
| .then(sandboxFromSelector(selector)) | ||
| .then(resizer) | ||
| .then(sandboxWindow(['PODLOVE_STORE', 'store'])) | ||
| .catch(() => { | ||
| console.group(`Can't load player with config`) | ||
| console.error('selector', selector) | ||
| console.error('config', episode) | ||
| console.groupEnd() | ||
| }) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,35 @@ | ||
| import color from 'color' | ||
| import { get } from 'lodash' | ||
|
|
||
| import { tag } from 'utils/dom' | ||
| import css from 'css-loader!autoprefixer-loader!sass-loader!../styles/_loader.scss' | ||
|
|
||
| const style = tag('style', css.toString()) | ||
|
|
||
| const dom = ({ theme }) => { | ||
| const light = '#fff' | ||
| const dark = '#000' | ||
|
|
||
| const main = get(theme, 'main', '#2B8AC6') | ||
| const luminosity = color(main).luminosity() | ||
|
|
||
| const highlight = get(theme, 'highlight', luminosity < 0.25 ? light : dark) | ||
|
|
||
| return `<div class="loader" id="loader" style="background: ${main}"> | ||
| <div class="dot bounce1" style="background: ${highlight}"></div> | ||
| <div class="dot bounce2" style="background: ${highlight}"></div> | ||
| <div class="dot bounce3" style="background: ${highlight}"></div> | ||
| </div>` | ||
| } | ||
|
|
||
| const script = tag('script', ` | ||
| var loader = document.getElementById('loader') | ||
| window.addEventListener('load', function() { | ||
| loader.className += ' done' | ||
| setTimeout(loader.remove, 300) | ||
| }) | ||
| `) | ||
|
|
||
| export default config => ([style, dom(config), script].join('')) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,56 @@ | ||
| .loader { | ||
| width: 100%; | ||
| height: 100%; | ||
| position: fixed; | ||
| left: 0; | ||
| top: 0; | ||
| z-index: 999; | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| opacity: 1; | ||
| transition: opacity linear 300ms; | ||
|
|
||
| .dot { | ||
| width: 20px; | ||
| height: 20px; | ||
| margin: 3px; | ||
| border-radius: 100%; | ||
| display: inline-block; | ||
| animation: loader 1.4s ease-in-out 0s infinite both; | ||
| } | ||
|
|
||
| .bounce1 { | ||
| animation-delay: -0.32s; | ||
| } | ||
|
|
||
| .bounce2 { | ||
| animation-delay: -0.16s; | ||
| } | ||
|
|
||
| &.done { | ||
| opacity: 0; | ||
| } | ||
| } | ||
|
|
||
| @-webkit-keyframes loader { | ||
| 0%, | ||
| 80%, | ||
| 100% { | ||
| transform: scale(0); | ||
| } | ||
| 40% { | ||
| transform: scale(1); | ||
| } | ||
| } | ||
|
|
||
| @keyframes loader { | ||
| 0%, | ||
| 80%, | ||
| 100% { | ||
| transform: scale(0); | ||
| } | ||
| 40% { | ||
| transform: scale(1); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,8 +1,10 @@ | ||
| import request from 'superagent' | ||
|
|
||
| export default url => | ||
| request | ||
| .get(url) | ||
| .query({ format: 'json' }) | ||
| .set('Accept', 'application/json') | ||
| .then(res => res.body) | ||
| typeof url === 'string' | ||
| ? request | ||
| .get(url) | ||
| .query({ format: 'json' }) | ||
| .set('Accept', 'application/json') | ||
| .then(res => res.body) | ||
| : new Promise(resolve => resolve(url)) |
Oops, something went wrong.