Merge pull request #1159 from ooyala/bugfix/PLAYER-4774

[bugfix/PLAYER-4774] Play/Pause is not working on clicking the centre of player

js/components/castPanel.js

@@ -9,26 +9,13 @@ const utils = require('./utils');
  */
 class CastPanel extends React.Component {
 
-  /**
-   * Prevent update if connection status not changed
-   * @param {Object} nextProps - list of props
-   * @returns {boolean} to update or not
-   */
-  shouldComponentUpdate(nextProps) {
-    return nextProps.connected !== this.props.connected;
-  }
-
   render() {
     const connectedText = utils.getLocalizedString(
       this.props.language,
       CONSTANTS.SKIN_TEXT.CONNECTED_TO,
       this.props.localizableStrings
     );
-    const castPanelClass = ClassNames({
-      'oo-info-panel-cast': true,
-      'oo-inactive': !this.props.connected
-    },
-    this.props.className);
+    const castPanelClass = ClassNames('oo-info-panel-cast', this.props.className);
 
     return (
       <div className={castPanelClass}>
@@ -40,14 +27,12 @@ class CastPanel extends React.Component {
 
 CastPanel.propTypes = {
   device: PropTypes.string,
-  connected: PropTypes.bool,
   language: PropTypes.string,
   localizableStrings: PropTypes.object,
 };
 
 CastPanel.defaultProps = {
   device: '',
-  connected: false,
   language: 'en',
   localizableStrings: { 'en': {} },
 };

js/views/endScreen.js

@@ -131,13 +131,15 @@ var EndScreen = createReactClass({
           <Icon {...this.props} icon="replay" style={actionIconStyle} />
         </button>
 
-        <CastPanel
-          language={this.props.language}
-          localizableStrings={this.props.localizableStrings}
-          device={this.props.controller.state.cast.device}
-          connected={this.props.controller.state.cast.connected}
-          className={castPanelClass}
-        />
+        {
+          this.props.controller.state.cast.connected &&
+          <CastPanel
+            language={this.props.language}
+            localizableStrings={this.props.localizableStrings}
+            device={this.props.controller.state.cast.device}
+            className={castPanelClass}
+          />
+        }
 
         <div className="oo-interactive-container">
           <ControlBar

js/views/pauseScreen.js

@@ -300,7 +300,10 @@ class PauseScreen extends React.Component {
 
     return (
       <div className="oo-state-screen oo-pause-screen">
-        {this.props.controller.state.cast.connected && <div className={stateScreenPosterClass} style={posterStyle}></div>}
+        {
+          this.props.controller.state.cast.connected &&
+          <div className={stateScreenPosterClass} style={posterStyle} />
+        }
 
         {!this.props.controller.videoVr && this.state.containsText && <div className={fadeUnderlayClass} />}
 
@@ -332,13 +335,15 @@ class PauseScreen extends React.Component {
           <Icon {...this.props} icon="pause" style={actionIconStyle} />
         </button>
 
-        <CastPanel
-          language={this.props.language}
-          localizableStrings={this.props.localizableStrings}
-          device={this.props.controller.state.cast.device}
-          connected={this.props.controller.state.cast.connected}
-          className={castPanelClass}
-        />
+        {
+          this.props.controller.state.cast.connected &&
+          <CastPanel
+            language={this.props.language}
+            localizableStrings={this.props.localizableStrings}
+            device={this.props.controller.state.cast.device}
+            className={castPanelClass}
+          />
+        }
 
         {viewControlsVr}
 

js/views/playingScreen.js

@@ -424,14 +424,16 @@ class PlayingScreen extends React.Component {
         {vrIcon}
 
         <Watermark {...this.props} controlBarVisible={this.props.controller.state.controlBarVisible} />
-
-        <CastPanel
-          language={this.props.language}
-          localizableStrings={this.props.localizableStrings}
-          device={this.props.controller.state.cast.device}
-          connected={this.props.controller.state.cast.connected}
-          className={castPanelClass}
-        />
+
+        {
+          this.props.controller.state.cast.connected &&
+          <CastPanel
+            language={this.props.language}
+            localizableStrings={this.props.localizableStrings}
+            device={this.props.controller.state.cast.device}
+            className={castPanelClass}
+          />
+        }
 
         {this.props.controller.state.buffering ? (
           <Spinner loadingImage={this.props.skinConfig.general.loadingImage.imageResource.url} />

scss/components/_state-screen.scss

@@ -144,11 +144,6 @@
     border-radius: 3px;
     width: 100%;
 
-    &.oo-inactive {
-      opacity: 0;
-      transform: translate(-50%, -90%);
-    }
-
     &.oo-info-panel-cast-bottom {
       top: 70%;
     }

tests/components/castPanel-test.js

@@ -23,19 +23,6 @@ describe('CastPanel', function(){
         expect(panel).toBeTruthy();
     });
 
-    it('Should render a hidden cast panel', function(){
-        const panel = renderComponent();
-        expect(panel.getDOMNode().classList.contains('oo-inactive')).toBe(true);
-    });
-
-    it('Should render and show a cast panel', function(){
-        const panel = renderComponent();
-        expect(panel.getDOMNode().classList.contains('oo-inactive')).toBe(true);
-        panel.setProps({connected:true});
-        expect(panel.getDOMNode().classList.contains('oo-inactive')).toBe(false);
-        expect(panel.find('p span').text()).toBe('Test Panel');
-    });
-
     it('Should render a cast panel with a given className', function(){
         const panel = renderComponent('my-class-test');
         expect(panel.getDOMNode().classList.contains('my-class-test')).toBe(true);

tests/views/endScreen-test.js

@@ -136,18 +136,18 @@ describe('EndScreen', function() {
   it('[Chromecast] should not display cast panel', function(){
     const wrapper = Enzyme.mount(getEndScreen());
     const castPanel = wrapper.find(CastPanel);
-    expect(castPanel.props().connected).toBe(false);
+    expect(castPanel.exists()).toBe(false);
   });
 
   it('[Chromecast] should display the cast panel located near to the bottom', function(){
     mockController.state.cast = {
       connected: true,
       device: "PlayerTV"
-    }
+    };
     mockSkinConfig.skipControls.enabled = true;
     const wrapper = Enzyme.mount(getEndScreen());
     const castPanel = wrapper.find(CastPanel);
-    expect(castPanel.props().connected).toBe(true);
+    expect(castPanel.exists()).toBe(true);
     expect(castPanel.props().device).toBe("PlayerTV");
     expect(wrapper.find('.oo-info-panel-cast.oo-info-panel-cast-bottom').length).toBe(1);
   });

tests/views/pauseScreen-test.js

@@ -214,7 +214,7 @@ describe('PauseScreen', function() {
     mockSkinConfig.skipControls.enabled = false;
     const wrapper = Enzyme.mount(getPauseScreen());
     const castPanel = wrapper.find(CastPanel);
-    expect(castPanel.props().connected).toBe(false);
+    expect(castPanel.exists()).toBe(false);
   });
 
   it('[Chromecast] should display cast panel with poster image and blur effect', function(){
@@ -236,10 +236,10 @@ describe('PauseScreen', function() {
     mockController.state.cast = {
       connected: true,
       device: "PlayerTV"
-    }
+    };
     wrapper = Enzyme.mount(component);
     const castPanel = wrapper.find(CastPanel);
-    expect(castPanel.props().connected).toBe(true);
+    expect(castPanel.exists()).toBe(true);
     expect(castPanel.props().device).toBe("PlayerTV");
     expect(wrapper.find('.oo-state-screen-poster.oo-blur').length).toBe(1);
   });
@@ -266,7 +266,7 @@ describe('PauseScreen', function() {
     mockSkinConfig.skipControls.enabled = true;
     const wrapper = Enzyme.mount(component);
     const castPanel = wrapper.find(CastPanel);
-    expect(castPanel.props().connected).toBe(true);
+    expect(castPanel.exists()).toBe(true);
     expect(castPanel.props().device).toBe("PlayerTV");
     expect(wrapper.find('.oo-info-panel-cast.oo-info-panel-cast-bottom').length).toBe(1);
     expect(wrapper.find('.oo-state-screen-poster.oo-blur').length).toBe(1);

tests/views/playingScreen-test.js

@@ -631,17 +631,17 @@ describe('PlayingScreen', function() {
   it('[Chromecast] should not display cast panel', function(){
     const wrapper = renderPlayingScreen();
     const castPanel = wrapper.find(CastPanel);
-    expect(castPanel.props().connected).toBe(false);
+    expect(castPanel.exists()).toBe(false);
   });
 
   it('[Chromecast] should display cast panel with poster image and blur effect', function(){
     mockController.state.cast = {
       connected: true,
       device: "PlayerTV"
-    }
+    };
     const wrapper = renderPlayingScreen();
     const castPanel = wrapper.find(CastPanel);
-    expect(castPanel.props().connected).toBe(true);
+    expect(castPanel.exists()).toBe(true);
     expect(castPanel.props().device).toBe("PlayerTV");
     expect(wrapper.find('.oo-state-screen-poster.oo-blur').length).toBe(1);
   });
@@ -650,11 +650,11 @@ describe('PlayingScreen', function() {
     mockController.state.cast = {
       connected: true,
       device: "PlayerTV"
-    }
+    };
     mockSkinConfig.skipControls.enabled = true;
     const wrapper = renderPlayingScreen();
     const castPanel = wrapper.find(CastPanel);
-    expect(castPanel.props().connected).toBe(true);
+    expect(castPanel.exists()).toBe(true);
     expect(castPanel.props().device).toBe("PlayerTV");
     expect(wrapper.find('.oo-info-panel-cast.oo-info-panel-cast-bottom').length).toBe(1);
     expect(wrapper.find('.oo-state-screen-poster.oo-blur').length).toBe(1);