ascribe/onion
1
0
Fork 0
mirror of https://github.com/ascribe/onion.git synced 2024-11-15 01:25:17 +01:00
Code Issues Releases Wiki Activity

Comment the solution

Browse Source
This commit is contained in:
vrde 2015-07-29 18:19:04 +02:00
parent ef61470b5f
commit 8f52d8bf87
1 changed files with 23 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -88,7 +88,28 @@ let Audio = React.createClass({
}
});
let Video = React.createClass({
/**
* The solution here is a bit convoluted.
* ReactJS is responsible for DOM manipulation but VideoJS updates the DOM
* to instal itself to display the video.
*
* What we do is the following:
* 1) set `state.ready = false`
* 2) render the cover using the `<Image />` component (because ready is false)
* 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
* 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)
* 6) `componentDidUpdate` is called after `render`, setting `state.videoMounted` to true,
* to avoid re-installing the VideoJS library
* 7) to close the lifecycle, `componentWillUnmount` is called removing VideoJS from the DOM.
*/
propTypes: {
preview: React.PropTypes.string.isRequired,
url: React.PropTypes.string.isRequired,
@ -112,7 +133,9 @@ let Video = React.createClass({
componentDidUpdate() {
if (this.state.ready && !this.state.videoMounted) {
window.videojs('#mainvideo');
/* eslint-disable */
this.setState({videoMounted: true});
/* eslint-enable*/
}
},