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.

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",
 

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
+  });
 }

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');
+  });
+});

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>

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>