From 2050121e6db64f097df01fed109c72845462546e Mon Sep 17 00:00:00 2001
From: Tim Fischbach <tfischbach@codevise.de>
Date: Thu, 9 Feb 2017 17:24:55 +0100
Subject: [PATCH] Add css class to page background with controls

Allow displaying the slim control's shadow along the bottom for pages
with player controls. The old solution causes the shadow to be applied
twice on audio pages with background video.
---
 .../default/player_controls/vjs_mapping.scss  |  2 +-
 .../src/components/PageBackground.jsx         | 30 +++++++++++++------
 .../__spec__/PageBackground-spec.jsx          | 30 +++++++++++++++++++
 .../components/Page.jsx                       |  2 +-
 node_package/src/media/components/Page.jsx    |  2 +-
 5 files changed, 54 insertions(+), 12 deletions(-)
 create mode 100644 node_package/src/components/__spec__/PageBackground-spec.jsx

diff --git a/app/assets/stylesheets/pageflow/themes/default/player_controls/vjs_mapping.scss b/app/assets/stylesheets/pageflow/themes/default/player_controls/vjs_mapping.scss
index 002ca81c05..f9b8b74e84 100644
--- a/app/assets/stylesheets/pageflow/themes/default/player_controls/vjs_mapping.scss
+++ b/app/assets/stylesheets/pageflow/themes/default/player_controls/vjs_mapping.scss
@@ -3,7 +3,7 @@
 $vjs-selector-mapping: (
   page_with_progress_bar: ".audioPage, .videoPage",
 
-  background: ".videoWrapper, .audioPage .backgroundArea",
+  background: ".page_background-for_page_with_player_controls",
 
   background-idle: ".is_idle .videoWrapper, .audioPage.is_idle .backgroundArea",
 
diff --git a/node_package/src/components/PageBackground.jsx b/node_package/src/components/PageBackground.jsx
index 58fd085435..1e4502138b 100644
--- a/node_package/src/components/PageBackground.jsx
+++ b/node_package/src/components/PageBackground.jsx
@@ -1,20 +1,32 @@
-import {Component} from 'react';
+import classNames from 'classnames';
 
 /**
  * @desc Use inside {@link
  * pageflow.react.components.PageWrapper|PageWrapper} to build the
  * default page structure.
  *
+ * @prop pageHasPlayerControls
+ *   Set to true if player controls are present on the page. This can
+ *   be used by themes to apply different styles to the background.
+ *
  * @alias pageflow.react.components.PageBackground
  * @class
  * @since 0.1
  */
-export default class extends Component {
-  render() {
-    return (
-      <div className="backgroundArea">
-        {this.props.children}
-      </div>
-    );
-  }
+export default function PageBackground(props) {
+  return (
+    <div className={className(props)}>
+      {props.children}
+    </div>
+  );
+}
+
+PageBackground.propTypes = {
+  pageHasPlayerControls: React.PropTypes.bool
+};
+
+function className({pageHasPlayerControls}) {
+  return classNames('backgroundArea page_background', {
+    'page_background-for_page_with_player_controls': pageHasPlayerControls
+  });
 }
diff --git a/node_package/src/components/__spec__/PageBackground-spec.jsx b/node_package/src/components/__spec__/PageBackground-spec.jsx
new file mode 100644
index 0000000000..ec547bc56e
--- /dev/null
+++ b/node_package/src/components/__spec__/PageBackground-spec.jsx
@@ -0,0 +1,30 @@
+import PageBackground from '../PageBackground';
+
+import {expect} from 'support/chai';
+import {shallow} from 'enzyme';
+
+describe('PageBackground', () => {
+  it('has backgroundArea class', () => {
+    const wrapper = shallow(<PageBackground />);
+
+    expect(wrapper).to.have.className('backgroundArea');
+  });
+
+  it('has page_background class', () => {
+    const wrapper = shallow(<PageBackground />);
+
+    expect(wrapper).to.have.className('page_background');
+  });
+
+  it('does not have page_background-for_page_with_player_controls by default', () => {
+    const wrapper = shallow(<PageBackground />);
+
+    expect(wrapper).not.to.have.className('page_background-for_page_with_player_controls');
+  });
+
+  it('has page_background-for_page_with_player_controls if pageHasPlayerControls is true', () => {
+    const wrapper = shallow(<PageBackground pageHasPlayerControls={true} />);
+
+    expect(wrapper).to.have.className('page_background-for_page_with_player_controls');
+  });
+});
diff --git a/node_package/src/interactivePageBackground/components/Page.jsx b/node_package/src/interactivePageBackground/components/Page.jsx
index d08ced8950..4a2284c30e 100644
--- a/node_package/src/interactivePageBackground/components/Page.jsx
+++ b/node_package/src/interactivePageBackground/components/Page.jsx
@@ -62,7 +62,7 @@ class PageWithInteractiveBackground extends React.Component {
                  onQualityMenuItemClick={this.props.onQualityMenuItemClick}
                  hiddenOnPhone={this.props.textHasBeenHidden && !this.props.textIsHidden} />
 
-        <PageBackground>
+        <PageBackground pageHasPlayerControls={true}>
           <div className="videoWrapper">
             {this.props.children}
           </div>
diff --git a/node_package/src/media/components/Page.jsx b/node_package/src/media/components/Page.jsx
index e55fd7c988..d4d53f9fea 100644
--- a/node_package/src/media/components/Page.jsx
+++ b/node_package/src/media/components/Page.jsx
@@ -36,7 +36,7 @@ export function MediaPage(props) {
                                                 willAutoplay(props),
                                                 props.textTracks,
                                                 playerState)}>
-      <PageBackground>
+      <PageBackground pageHasPlayerControls={true}>
         {props.children}
         <PageShadow page={page} className={playerStateClassNames(playerState)} />
       </PageBackground>