Wire up fullscreen button. Requires react-sdk with sync flag to dispatcher.

This commit is contained in:
David Baker 2015-10-20 11:03:32 +01:00
parent 078134d481
commit 34ad48a5d3
2 changed files with 21 additions and 1 deletions

View File

@ -18,6 +18,7 @@ limitations under the License.
var React = require('react'); var React = require('react');
var sdk = require('matrix-react-sdk') var sdk = require('matrix-react-sdk')
var dis = require('matrix-react-sdk/lib/dispatcher')
var CallHandler = require('matrix-react-sdk/lib/CallHandler'); var CallHandler = require('matrix-react-sdk/lib/CallHandler');
var MatrixClientPeg = require('matrix-react-sdk/lib/MatrixClientPeg'); var MatrixClientPeg = require('matrix-react-sdk/lib/MatrixClientPeg');
@ -37,6 +38,10 @@ module.exports = React.createClass({
return this.refs.name_edit.getDOMNode().value; return this.refs.name_edit.getDOMNode().value;
}, },
onFullscreenClick: function() {
dis.dispatch({action: 'video_fullscreen'}, true);
},
render: function() { render: function() {
var EditableText = sdk.getComponent("atoms.EditableText"); var EditableText = sdk.getComponent("atoms.EditableText");
var RoomAvatar = sdk.getComponent('atoms.RoomAvatar'); var RoomAvatar = sdk.getComponent('atoms.RoomAvatar');

View File

@ -19,12 +19,17 @@ limitations under the License.
var React = require('react'); var React = require('react');
var sdk = require('matrix-react-sdk') var sdk = require('matrix-react-sdk')
var dis = require('matrix-react-sdk/lib/dispatcher')
var VideoViewController = require('matrix-react-sdk/lib/controllers/molecules/voip/VideoView') var VideoViewController = require('matrix-react-sdk/lib/controllers/molecules/voip/VideoView')
module.exports = React.createClass({ module.exports = React.createClass({
displayName: 'VideoView', displayName: 'VideoView',
mixins: [VideoViewController], mixins: [VideoViewController],
componentWillMount: function() {
dis.register(this.onAction);
},
getRemoteVideoElement: function() { getRemoteVideoElement: function() {
return this.refs.remote.getDOMNode(); return this.refs.remote.getDOMNode();
}, },
@ -33,10 +38,20 @@ module.exports = React.createClass({
return this.refs.local.getDOMNode(); return this.refs.local.getDOMNode();
}, },
onAction: function(payload) {
switch (payload.action) {
case 'video_fullscreen':
var element = this.refs.container.getDOMNode();
var requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullscreen;
requestMethod.call(element);
break;
}
},
render: function() { render: function() {
var VideoFeed = sdk.getComponent('atoms.voip.VideoFeed'); var VideoFeed = sdk.getComponent('atoms.voip.VideoFeed');
return ( return (
<div className="mx_VideoView"> <div className="mx_VideoView" ref="container">
<div className="mx_VideoView_remoteVideoFeed"> <div className="mx_VideoView_remoteVideoFeed">
<VideoFeed ref="remote"/> <VideoFeed ref="remote"/>
</div> </div>