Adding in the fullscreen button in the playback controls container

Author: mattjburrows

app/containers/PlaybackControls.jsx

@@ -9,6 +9,7 @@ import { connect } from 'react-redux';
 import { isPlaying } from '../actions/isPlaying';
 import { hasStopped } from '../actions/hasStopped';
 import { setVolume } from '../actions/setVolume';
+import { setFullscreen } from '../actions/setFullscreen';
 
 import Button from '../components/Button.jsx';
 import Volume from '../components/Volume.jsx';
@@ -23,6 +24,10 @@ export class PlaybackControls extends Component {
     this.props.hasStoppedAction(true);
   }
 
+  _onFullscreenButtonClick() {
+    this.props.setFullscreenAction(!this.props.fullscreen);
+  }
+
   _onVolumeChange(event) {
     const volumeValue = _.get(event, 'target.value');
     this.props.setVolumeAction(volumeValue);
@@ -31,12 +36,14 @@ export class PlaybackControls extends Component {
   render() {
     const playPauseButtonText = this.props.isPlaying ? 'pause' : 'play';
     const stopButtonText = 'stop';
+    const fullscreenText = 'fullscreen';
 
     return (
       <div>
         <Progress currentTime={this.props.currentTime} duration={this.props.duration} />
         <Button onClick={this._onPlayButtonClick.bind(this)} text={playPauseButtonText} />
         <Button onClick={this._onStopButtonClick.bind(this)} text={stopButtonText} />
+        <Button onClick={this._onFullscreenButtonClick.bind(this)} text={fullscreenText} />
         <Volume onChange={this._onVolumeChange.bind(this)} />
       </div>
     );
@@ -45,26 +52,30 @@ export class PlaybackControls extends Component {
 
 PlaybackControls.propTypes = {
   isPlaying: React.PropTypes.bool,
+  duration: React.PropTypes.number,
+  currentTime: React.PropTypes.number,
+  fullscreen: React.PropTypes.bool,
   isPlayingAction: React.PropTypes.func,
   hasStoppedAction: React.PropTypes.func,
   setVolumeAction: React.PropTypes.func,
-  duration: React.PropTypes.number,
-  currentTime: React.PropTypes.number
+  setFullscreenAction: React.PropTypes.func
 };
 
 function mapStateToProps(state) {
   return {
     isPlaying: state.playback.isPlaying,
     duration: state.playback.duration,
-    currentTime: state.playback.currentTime
+    currentTime: state.playback.currentTime,
+    fullscreen: state.playback.fullscreen
   };
 }
 
 function mapDispatchToProps(dispatch) {
   return {
     isPlayingAction: bindActionCreators(isPlaying, dispatch),
     hasStoppedAction: bindActionCreators(hasStopped, dispatch),
-    setVolumeAction: bindActionCreators(setVolume, dispatch)
+    setVolumeAction: bindActionCreators(setVolume, dispatch),
+    setFullscreenAction: bindActionCreators(setFullscreen, dispatch)
   };
 }
 

test/containers/PlaybackControls.js

@@ -8,9 +8,9 @@ import sinon from 'sinon';
 import { PlaybackControls } from '../../app/containers/PlaybackControls.jsx';
 
 describe('<PlaybackControls />', () => {
-  it('should render 2 <Button /> components', () => {
+  it('should render 3 <Button /> components', () => {
     const wrapper = mount(<PlaybackControls />);
-    assert.equal(wrapper.find('Button').length, 2);
+    assert.equal(wrapper.find('Button').length, 3);
   });
 
   describe('<Progress />', () => {
@@ -62,6 +62,22 @@ describe('<PlaybackControls />', () => {
     });
   });
 
+  describe('fullscreen <Button />', () => {
+    it('sets fullscreen as the button text', () => {
+      const wrapper = mount(<PlaybackControls isPlaying={true} />);
+
+      assert.equal(wrapper.find('Button').get(2).props.text, 'fullscreen');
+    });
+
+    it('calls the setFullscreen with true when the button is clicked', () => {
+      const setFullscreenSpy = sinon.spy();
+      const wrapper = mount(<PlaybackControls fullscreen={false} setFullscreenAction={setFullscreenSpy} />);
+
+      wrapper.find('Button').at(2).simulate('click');
+      assert(setFullscreenSpy.calledWith(true));
+    });
+  });
+
   describe('<Volume />', () => {
     it('calls the setVolumeAction', () => {
       const setVolumeActionSpy = sinon.spy();