diff --git a/js/controller.js b/js/controller.js index 0c9083e9b..cbcca4b37 100644 --- a/js/controller.js +++ b/js/controller.js @@ -1474,6 +1474,13 @@ OO.plugin("Html5Skin", function (OO, _, $, W) { this.mb.publish(OO.EVENTS.SAVE_PLAYER_SETTINGS, this.state.persistentSettings); }, + /** + * Used to enable or disable the CSS workaround that prevents anamorphic videos from + * being distorted on Firefox. The fix will only be enabled if ots_stretch_to_output + * is set to true in the player attributes. + * Note that currently the oo-anamorphic class has effect only on Firefox. + * @param {boolen} enabled A value that determines whether to enable or disable the anamorphic videos CSS fix. + */ trySetAnamorphicFixState: function(enabled) { if (!this.state || !this.state.mainVideoInnerWrapper) { return; diff --git a/package.json b/package.json index 9a0d50735..8f9d17320 100644 --- a/package.json +++ b/package.json @@ -51,6 +51,7 @@ "react-addons-test-utils": "0.14.7", "react-tools": "*", "reactify": "1.1.1", + "sinon": "^2.1.0", "underscore": "1.3.3", "vinyl-buffer": "^1.0.0", "vinyl-source-stream": "^1.0.0", diff --git a/tests/controller-test.js b/tests/controller-test.js index 0436e4f08..634c22bfc 100644 --- a/tests/controller-test.js +++ b/tests/controller-test.js @@ -8,6 +8,7 @@ jest.dontMock('underscore'); jest.dontMock('jquery'); var CONSTANTS = require('../js/constants/constants'); +var sinon = require('sinon'); /** * Mock OO @@ -245,7 +246,6 @@ OO = { Html5Skin.onPlayerCreated.call(controllerMock, 'customerUi', elementId, {skin:{config:{}}}, persistentSettings); Html5Skin.onSkinMetaDataFetched.call(controllerMock, 'customerUi', {}); Html5Skin.onAttributesFetched.call(controllerMock, 'customerUi', {"attributes":{"provider":{"ots_stretch_to_output":"true"}}}); - Html5Skin.trySetAnamorphicFixState.call(controllerMock, true); Html5Skin.loadConfigData.call(controllerMock, 'customerUi', {skin:{config:{}}}, {}, {}, {}); Html5Skin.loadConfigData.call(controllerMock, 'customerUi', {skin:{config:[]}}, {}, {}, {}); //invalid Html5Skin.loadConfigData.call(controllerMock, 'customerUi', {skin:{inline:{}}}, {}, {}, {}); @@ -579,6 +579,57 @@ OO = { }); }); + describe('Controller testing Anamorphic videos fix', function() { + var addClassSpy = null; + var removeClassSpy = null; + var attributesParam = null; + var attributesState = JSON.parse(JSON.stringify(controllerMock.state.attributes)); + + beforeEach(function() { + attributesParam = { + provider: { + 'ots_stretch_to_output': true + } + }; + addClassSpy = sinon.spy(controllerMock.state.mainVideoInnerWrapper, 'addClass'); + removeClassSpy = sinon.spy(controllerMock.state.mainVideoInnerWrapper, 'removeClass'); + }); + + afterEach(function() { + controllerMock.state.mainVideoInnerWrapper.addClass.restore(); + controllerMock.state.mainVideoInnerWrapper.removeClass.restore(); + controllerMock.state.attributes = attributesState; + }); + + it('should apply anamorphic CSS fix when ots_stretch_to_output is true', function() { + Html5Skin.onAttributesFetched.call(controllerMock, 'customerUi', attributesParam); + Html5Skin.trySetAnamorphicFixState.call(controllerMock, true); + expect(addClassSpy.callCount).toEqual(1); + expect(removeClassSpy.callCount).toEqual(0); + }); + + it('should not apply anamorphic CSS fix when ots_stretch_to_output isn\'t true', function() { + attributesParam.provider = {}; + Html5Skin.onAttributesFetched.call(controllerMock, 'customerUi', attributesParam); + Html5Skin.trySetAnamorphicFixState.call(controllerMock, true); + attributesParam.provider = { 'ots_stretch_to_output': false }; + Html5Skin.onAttributesFetched.call(controllerMock, 'customerUi', attributesParam); + Html5Skin.trySetAnamorphicFixState.call(controllerMock, true); + expect(addClassSpy.callCount).toEqual(0); + expect(removeClassSpy.callCount).toEqual(0); + }); + + it('should disable anamorphic CSS fix when passing false', function() { + Html5Skin.onAttributesFetched.call(controllerMock, 'customerUi', attributesParam); + Html5Skin.trySetAnamorphicFixState.call(controllerMock, true); + expect(addClassSpy.callCount).toEqual(1); + Html5Skin.onWillPlayAds.call(controllerMock, 'customerUi'); + Html5Skin.trySetAnamorphicFixState.call(controllerMock, false); + expect(addClassSpy.callCount).toEqual(1); + expect(removeClassSpy.callCount).toEqual(1); + }); + }); + //test destroy functions last Html5Skin.onEmbedCodeChanged.call(controllerMock, 'customerUi', 'RmZW4zcDo6KqkTIhn1LnowEZyUYn5Tb2', {}); Html5Skin.onAssetChanged.call(controllerMock, 'customerUi', {content: {streams: [{is_live_stream: true}], title: 'Title', posterImages: [{url:'www.ooyala.com'}]}});