ascribe/onion
1
0
Fork 0
mirror of https://github.com/ascribe/onion.git synced 2025-01-03 10:25:08 +01:00
Code Issues Releases Wiki Activity

Add fall back if client cannot load 3rd party libs

Browse Source
This commit is contained in:
vrde 2015-10-20 14:16:49 +02:00
parent 5a35e40a76
commit 1a6ddf67ac
2 changed files with 18 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.eslintrc
View File

@ -22,7 +22,7 @@
"react/jsx-sort-props": 0, "react/jsx-sort-props": 0,
"react/jsx-uses-react": 1, "react/jsx-uses-react": 1,
"react/jsx-uses-vars": 1, "react/jsx-uses-vars": 1,
"react/no-did-mount-set-state": 1, "react/no-did-mount-set-state": [1, "allow-in-func"],
"react/no-did-update-set-state": 1, "react/no-did-update-set-state": 1,
"react/no-multi-comp": 0, "react/no-multi-comp": 0,
"react/no-unknown-property": 1, "react/no-unknown-property": 1,

28
js/components/ascribe_media/media_player.js
View File

@ -103,14 +103,17 @@ let Video = React.createClass({
* ReactJS is responsible for DOM manipulation but VideoJS updates the DOM * ReactJS is responsible for DOM manipulation but VideoJS updates the DOM
* to install itself to display the video, therefore ReactJS complains that we are * to install itself to display the video, therefore ReactJS complains that we are
* changing the DOM under its feet. * changing the DOM under its feet.
* The component supports a fall-back to HTML5 video tag.
* *
* What we do is the following: * What we do is the following:
* 1) set `state.ready = false` * 1) set `state.libraryLoaded = null` (state.libraryLoaded can be in three states: `null`
* 2) render the cover using the `<Image />` component (because ready is false) * if we don't know anything about it, `true` if the external library has been loaded,
* `false` if we failed to load the external library)
* 2) render the cover using the `<Image />` component (because libraryLoaded is null)
* 3) on `componentDidMount`, we load the external `css` and `js` resources using * 3) on `componentDidMount`, we load the external `css` and `js` resources using
* the `InjectInHeadMixin`, attaching a function to `Promise.then` to change * the `InjectInHeadMixin`, attaching a function to `Promise.then` to change
* `state.ready` to true * `state.libraryLoaded` to true
* 4) when the promise is succesfully resolved, we change `state.ready` triggering * 4) when the promise is succesfully resolved, we change `state.libraryLoaded` triggering
* a re-render * a re-render
* 5) the new render calls `prepareVideoHTML` to get the raw HTML of the video tag * 5) the new render calls `prepareVideoHTML` to get the raw HTML of the video tag
* (that will be later processed and expanded by VideoJS) * (that will be later processed and expanded by VideoJS)
@ -129,18 +132,19 @@ let Video = React.createClass({
mixins: [InjectInHeadMixin], mixins: [InjectInHeadMixin],
getInitialState() { getInitialState() {
return { ready: false, videoMounted: false }; return { libraryLoaded: null, videoMounted: false };
}, },
componentDidMount() { componentDidMount() {
Q.all([ Q.all([
this.inject('//vjs.zencdn.net/4.12/video-js.css'), this.inject('//vjs.zencdn.net/4.12/video-js.css'),
this.inject('//vjs.zencdn.net/4.12/video.js') this.inject('//vjs.zencdn.net/4.12/video.js')])
]).then(this.ready); .then(() => this.setState({libraryLoaded: true}))
.fail(() => this.setState({libraryLoaded: false}));
}, },
componentDidUpdate() { componentDidUpdate() {
if (this.state.ready && !this.state.videoMounted) { if (this.state.libraryLoaded && !this.state.videoMounted) {
window.videojs('#mainvideo'); window.videojs('#mainvideo');
/* eslint-disable */ /* eslint-disable */
this.setState({videoMounted: true}); this.setState({videoMounted: true});
@ -149,11 +153,9 @@ let Video = React.createClass({
}, },
componentWillUnmount() { componentWillUnmount() {
if (this.state.videoMounted) {
window.videojs('#mainvideo').dispose(); window.videojs('#mainvideo').dispose();
}, }
ready() {
this.setState({ready: true, videoMounted: false});
}, },
prepareVideoHTML() { prepareVideoHTML() {
@ -171,7 +173,7 @@ let Video = React.createClass({
}, },
render() { render() {
if (this.state.ready) { if (this.state.libraryLoaded !== null) {
return ( return (
<div dangerouslySetInnerHTML={{__html: this.prepareVideoHTML() }}/> <div dangerouslySetInnerHTML={{__html: this.prepareVideoHTML() }}/>
); );