ascribe
/
onion
mirror of https://github.com/ascribe/onion.git
1
0
Fork 0
Code Issues Releases Wiki Activity

Add fall back if client cannot load 3rd party libs

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

4
.eslintrc
View File

@ -22,7 +22,7 @@
"react/jsx-sort-props": 0,
"react/jsx-uses-react": 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-multi-comp": 0,
"react/no-unknown-property": 1,
@ -58,4 +58,4 @@
"superInFunctions": 1,
"templateStrings": 1
}
}
}

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