From 3a8388ec08fd459e9bfdbb6249660896612ab43c Mon Sep 17 00:00:00 2001 From: Kseniia Sokolova Date: Tue, 20 Nov 2018 13:57:07 +0300 Subject: [PATCH] [bugfix/PLAYER-4774] Play/Pause is not working on clicking the centre of player --- js/components/castPanel.js | 17 +---------------- js/views/endScreen.js | 16 +++++++++------- js/views/pauseScreen.js | 21 +++++++++++++-------- js/views/playingScreen.js | 18 ++++++++++-------- scss/components/_state-screen.scss | 5 ----- tests/components/castPanel-test.js | 13 ------------- tests/views/endScreen-test.js | 6 +++--- tests/views/pauseScreen-test.js | 8 ++++---- tests/views/playingScreen-test.js | 10 +++++----- 9 files changed, 45 insertions(+), 69 deletions(-) diff --git a/js/components/castPanel.js b/js/components/castPanel.js index c00fccfb6..d011752a3 100644 --- a/js/components/castPanel.js +++ b/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 (
@@ -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': {} }, }; diff --git a/js/views/endScreen.js b/js/views/endScreen.js index d620a57ce..319fefbe7 100644 --- a/js/views/endScreen.js +++ b/js/views/endScreen.js @@ -131,13 +131,15 @@ var EndScreen = createReactClass({ - + { + this.props.controller.state.cast.connected && + + }
- {this.props.controller.state.cast.connected &&
} + { + this.props.controller.state.cast.connected && +
+ } {!this.props.controller.videoVr && this.state.containsText &&
} @@ -332,13 +335,15 @@ class PauseScreen extends React.Component { - + { + this.props.controller.state.cast.connected && + + } {viewControlsVr} diff --git a/js/views/playingScreen.js b/js/views/playingScreen.js index c9ecef8b2..ebc7cd22e 100644 --- a/js/views/playingScreen.js +++ b/js/views/playingScreen.js @@ -424,14 +424,16 @@ class PlayingScreen extends React.Component { {vrIcon} - - + + { + this.props.controller.state.cast.connected && + + } {this.props.controller.state.buffering ? ( diff --git a/scss/components/_state-screen.scss b/scss/components/_state-screen.scss index 1f604f75d..d01c9485b 100644 --- a/scss/components/_state-screen.scss +++ b/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%; } diff --git a/tests/components/castPanel-test.js b/tests/components/castPanel-test.js index e62795931..7f4fd5260 100644 --- a/tests/components/castPanel-test.js +++ b/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); diff --git a/tests/views/endScreen-test.js b/tests/views/endScreen-test.js index e963f92f0..dd3973265 100644 --- a/tests/views/endScreen-test.js +++ b/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); }); diff --git a/tests/views/pauseScreen-test.js b/tests/views/pauseScreen-test.js index 60321fd42..f551d00b6 100644 --- a/tests/views/pauseScreen-test.js +++ b/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); diff --git a/tests/views/playingScreen-test.js b/tests/views/playingScreen-test.js index f20757a37..1e8e6a3ea 100644 --- a/tests/views/playingScreen-test.js +++ b/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);