Merge pull request #722 from tf/page-background-for-controls

Add css class to page background with controls

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>