spiking full screen container

Author: mattjburrows

app/Player.jsx

@@ -4,6 +4,7 @@ import React, { Component } from 'react';
 import { Provider } from 'react-redux';
 
 import configureStore from './store/configurePlayerStore';
+import Fullscreen from './containers/Fullscreen.jsx';
 import PlaybackControls from './containers/PlaybackControls.jsx';
 import mapStoreToPlayer from './store/mapStoreToPlayer';
 
@@ -16,12 +17,12 @@ class Player extends Component {
 
   render() {
     return (<Provider store={store}>
-      <div>
+      <Fullscreen>
         <video ref="video">
           <source src={this.props.src} />
         </video>
         <PlaybackControls />
-      </div>
+      </Fullscreen>
     </Provider>);
   }
 }

app/containers/Fullscreen.jsx

@@ -0,0 +1,66 @@
+'use strict';
+
+import React, { Component } from 'react';
+
+import { bindActionCreators } from 'redux';
+import { connect } from 'react-redux';
+
+import { setFullscreen } from '../actions/setFullscreen';
+
+export class Fullscreen extends Component {
+  _getFullscreenClassName() {
+    const className = this.props.fullscreen ? 'is-fullscreen' : 'is-embedded';
+    return `fullscreen ${className}`;
+  }
+
+  _fullscreenChangeListener() {
+    const fullscreenElement = document.webkitFullscreenElement;
+
+    if (!fullscreenElement) {
+      this.props.setFullscreenAction(false);
+    }
+  }
+
+  componentWillMount() {
+    document.addEventListener('webkitfullscreenchange', this._fullscreenChangeListener.bind(this));
+  }
+
+  componentWillUnmount() {
+    document.removeEventListener('webkitfullscreenchange', this._fullscreenChangeListener);
+  }
+
+  componentWillUpdate() {
+    if (this.props.fullscreen) document.webkitCancelFullScreen();
+    else this.refs.fullscreen.webkitRequestFullscreen();
+  }
+
+  render() {
+    return (
+      <div className={this._getFullscreenClassName()} ref="fullscreen">{this.props.children}</div>
+    );
+  }
+}
+
+Fullscreen.propTypes = {
+  fullscreen: React.PropTypes.bool,
+  setFullscreenAction: React.PropTypes.func,
+  children: React.PropTypes.arrayOf(React.PropTypes.element)
+};
+
+function mapStateToProps(state) {
+  return {
+    fullscreen: state.playback.fullscreen,
+    fullscreenSource: state.playback.fullscreenSource
+  };
+}
+
+function mapDispatchToProps(dispatch) {
+  return {
+    setFullscreenAction: bindActionCreators(setFullscreen, dispatch)
+  };
+}
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(Fullscreen);

test/containers/Fullscreen.js

@@ -0,0 +1,22 @@
+'use strict';
+
+import React from 'react';
+import assert from 'assert';
+import { mount } from 'enzyme';
+import sinon from 'sinon';
+
+import { Fullscreen } from '../../app/containers/Fullscreen.jsx';
+
+describe('<Fullscreen />', () => {
+  it('renders the children that are passed in with the component');
+
+  describe('class names', () => {
+    it('adds is-fullscreen when the component is fullscreen');
+    it('adds is-embedded when the component is not fullscreen');
+  });
+
+  describe('event listeners', () => {
+    it('adds the fullscreenchange event when the component is rendered');
+    it('remove the fullscreenchange event when the component is removed');
+  });
+});

test/containers/PlaybackControls.js

@@ -62,7 +62,7 @@ describe('<PlaybackControls />', () => {
     });
   });
 
-  describe.only('fullscreen <Button />', () => {
+  describe('fullscreen <Button />', () => {
     it('sets "enter fullscreen" as the button text', () => {
       const wrapper = mount(<PlaybackControls isPlaying={true} fullscreen={false} />);