ascribe/onion
1
0
Fork 0
mirror of https://github.com/ascribe/onion.git synced 2024-12-22 17:33:14 +01:00
Code Issues Releases Wiki Activity

First iteration

Browse Source
This commit is contained in:
vrde 2015-07-29 18:00:49 +02:00
parent 658f4c36e1
commit ef61470b5f
2 changed files with 38 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,6 +3,8 @@
import React from 'react';
import Q from 'q';
import { escapeHTML } from '../../utils/general_utils';
import InjectInHeadMixin from '../../mixins/inject_in_head_mixin';
import Panel from 'react-bootstrap/lib/Panel';
import ProgressBar from 'react-bootstrap/lib/ProgressBar';
@ -97,7 +99,7 @@ let Video = React.createClass({
mixins: [InjectInHeadMixin],
getInitialState() {
return { ready: false };
return { ready: false, videoMounted: false };
},
componentDidMount() {
@ -108,24 +110,38 @@ let Video = React.createClass({
},
componentDidUpdate() {
if (this.state.ready && !this.state.videojs) {
window.videojs(React.findDOMNode(this.refs.video));
if (this.state.ready && !this.state.videoMounted) {
window.videojs('#mainvideo');
this.setState({videoMounted: true});
}
},
componentWillUnmount() {
window.videojs('#mainvideo').dispose();
},
ready() {
this.setState({ready: true, videojs: false});
this.setState({ready: true, videoMounted: false});
},
prepareVideoHTML() {
let sources = this.props.extraData.map((data) => '<source type="video/' + data.type + '" src="' + escapeHTML(data.url) + '" />');
let html = [
'<video id="mainvideo" class="video-js vjs-default-skin" poster="' + escapeHTML(this.props.preview) + '"',
'controls preload="none" width="auto" height="auto">',
sources.join('\n'),
'</video>'];
return html.join('\n');
},
shouldComponentUpdate(nextProps, nextState) {
return nextState.videoMounted === false;
},
render() {
if (this.state.ready) {
return (
<video ref="video" className="video-js vjs-default-skin" poster={this.props.preview}
controls preload="none" width="auto" height="auto">
{this.props.extraData.map((data, i) =>
<source key={i} type={'video/' + data.type} src={data.url} />
)}
</video>
<div dangerouslySetInnerHTML={{__html: this.prepareVideoHTML() }}/>
);
} else {
return (

12
js/utils/general_utils.js
View File

@ -166,3 +166,15 @@ function _mergeOptions(obj1, obj2) {
}
return obj3;
}
/**
* Escape HTML in a string so it can be injected safely using
* React's `dangerouslySetInnerHTML`
*
* @param s the string to be sanitized
*
* Taken from: http://stackoverflow.com/a/17546215/597097
*/
export function escapeHTML(s) {
return document.createElement('div').appendChild(document.createTextNode(s)).parentNode.innerHTML;
}