Creative size

elements/bulbs-video/components/revealed.js

@@ -79,6 +79,8 @@ export default class Revealed extends React.Component {
       dimensions
     );
 
+
+
     // Making assignment copies here so we can mutate object structure.
     let videoMeta = Object.assign({}, this.props.video);
     videoMeta.hostChannel = hostChannel;
@@ -169,9 +171,11 @@ export default class Revealed extends React.Component {
 
     let vastTestId = this.vastTest(window.location.search);
     let type;
+    // Allowing creativeSize to be passed in in root.js
+    let creativeSize = this.props.creativeSize || '640x480';
 
     // See docs (https://support.google.com/dfp_premium/answer/1068325?hl=en) for param info
-    baseUrl += '?sz=640x480';
+    baseUrl += `?sz=${creativeSize}`;
     baseUrl += `&iu=/4246/${window.Bulbs.settings.DFP_SITE_CODE}`;
     baseUrl += '&impl=s';
     baseUrl += '&gdfp_req=1';
@@ -361,6 +365,7 @@ Revealed.propTypes = {
   autoplay: PropTypes.bool,
   autoplayInView: PropTypes.string,
   autoplayNext: PropTypes.bool,
+  creativeSize: PropTypes.string,
   controller: PropTypes.object.isRequired,
   defaultCaptions: PropTypes.bool,
   disableAds: PropTypes.bool,

elements/bulbs-video/components/revealed.test.js

@@ -41,6 +41,10 @@ describe('<bulbs-video> <Revealed>', () => {
       expect(subject.muted).to.eql(PropTypes.bool);
     });
 
+    it('accepts creativeSize string', () => {
+      expect(subject.creativeSize).to.eql(PropTypes.string);
+    });
+
     it('accepts disableAds boolean', () => {
       expect(subject.disableAds).to.eql(PropTypes.bool);
     });
@@ -609,6 +613,16 @@ describe('<bulbs-video> <Revealed>', () => {
         delete window.Bulbs;
       });
 
+      it('defaults to 640x480 if creativeSize is not overridden', () => {
+        let vastUrl = Revealed.prototype.vastUrl.call({
+          cacheBuster: cacheBusterStub,
+          vastTest: vastTestStub,
+          props: {},
+        }, videoMeta);
+        let parsed = url.parse(vastUrl, true);
+        expect(parsed.query.sz).to.eql('640x480');
+      });
+
       it('returns the vast url', function () {
         let vastUrl = Revealed.prototype.vastUrl.call({
           cacheBuster: cacheBusterStub,
@@ -688,6 +702,20 @@ describe('<bulbs-video> <Revealed>', () => {
       });
     });
 
+    context('overrides', () => {
+      it('allows creativeSize to be overridden', () => {
+        let vastUrl = Revealed.prototype.vastUrl.call({
+          cacheBuster: cacheBusterStub,
+          vastTest: vastTestStub,
+          props: {
+            creativeSize: '400x300',
+          },
+        }, videoMeta);
+        let parsed = url.parse(vastUrl, true);
+        expect(parsed.query.sz).to.eql('400x300');
+      });
+    });
+
     context('when a test link is provided', () => {
       beforeEach(() => {
         window.Bulbs = {

elements/bulbs-video/elements/rail-player/components/root.js

@@ -32,6 +32,7 @@ export default class Root extends React.Component {
           <Revealed
             disableSharing={true}
             muted={true}
+            creativeSize='400x300'
             targetHostChannel='right_rail'
             defaultCaptions={true}
             {...this.props}

elements/bulbs-video/elements/rail-player/components/root.test.js

@@ -68,6 +68,7 @@ describe('<rail-player> <RailPlayerRoot>', () => {
             <Revealed
               muted={true}
               disableSharing={true}
+              creativeSize='400x300'
               targetHostChannel='right_rail'
               targetCampaignId='12345'
               targetSpecialCoverage='fun-special-coverage'