Add player.currentWidth and player.currentHeight* methods for getting computed style

src/js/component.js

@@ -1091,6 +1091,64 @@ class Component {
     return parseInt(this.el_['offset' + toTitleCase(widthOrHeight)], 10);
   }
 
+  /**
+   * Get width or height of computed style
+   * @param  {String} widthOrHeight  'width' or 'height'
+   * @return {Number|Boolean} The bolean false if nothing was set
+   * @method currentDimension
+   */
+  currentDimension(widthOrHeight) {
+    let computedWidthOrHeight = 0;
+
+    if (widthOrHeight !== 'width' && widthOrHeight !== 'height') {
+      throw new Error('currentDimension only accepts width or height value');
+    }
+
+    if (typeof window.getComputedStyle === 'function') {
+      const computedStyle = window.getComputedStyle(this.el_);
+      computedWidthOrHeight = computedStyle.getPropertyValue(widthOrHeight) || computedStyle[ widthOrHeight ];
+    } else if (this.el_.currentStyle) {
+      // ie 8 doesn't support computed style, shim it
+      // return clientWidth or clientHeight instead for better accuracy
+      const rule = `offset${toTitleCase(widthOrHeight)}`;
+      computedWidthOrHeight = this.el_[rule];
+    }
+
+    // remove 'px' from variable and parse as integer
+    computedWidthOrHeight = parseFloat(computedWidthOrHeight);
+    return computedWidthOrHeight;
+  }
+
+  /**
+   * Get an object which contains width and height values of computed style
+   * @return {Object} The dimensions of element
+   * @method currentDimensions
+   */
+  currentDimensions() {
+    return {
+      width: this.currentDimension('width'),
+      height: this.currentDimension('height')
+    };
+  }
+
+  /**
+   * Get width of computed style
+   * @return {Integer}
+   * @method currentWidth
+   */
+  currentWidth() {
+    return this.currentDimension('width');
+  }
+
+  /**
+   * Get height of computed style
+   * @return {Integer}
+   * @method currentHeight
+   */
+  currentHeight() {
+    return this.currentDimension('height');
+  }
+
   /**
    * Emit 'tap' events when touch events are supported
    * This is used to support toggling the controls through a tap on the video.

test/unit/component.test.js

@@ -572,6 +572,34 @@ test('should change the width and height of a component', function(){
   ok(comp.height() === 0, 'forced height was removed');
 });
 
+test('should get the computed dimensions', function(){
+  const container = document.createElement('div');
+  const comp = new Component(getFakePlayer(), {});
+  const el = comp.el();
+  const fixture = document.getElementById('qunit-fixture');
+
+  const computedWidth = '500px';
+  const computedHeight = '500px';
+
+  fixture.appendChild(container);
+  container.appendChild(el);
+  // Container of el needs dimensions or the component won't have dimensions
+  container.style.width = '1000px';
+  container.style.height = '1000px';
+
+  comp.width('50%');
+  comp.height('50%');
+
+  equal(comp.currentWidth() + 'px', computedWidth, 'matches computed width');
+  equal(comp.currentHeight() + 'px', computedHeight, 'matches computed height');
+
+  equal(comp.currentDimension('width') + 'px', computedWidth, 'matches computed width');
+  equal(comp.currentDimension('height') + 'px', computedHeight, 'matches computed height');
+
+  equal(comp.currentDimensions()['width'] + 'px', computedWidth, 'matches computed width');
+  equal(comp.currentDimensions()['height'] + 'px', computedHeight, 'matches computed width');
+
+});
 
 test('should use a defined content el for appending children', function(){
   class CompWithContent extends Component {}