From 07ed368505aea1ddf5f1827823d4303d57569f82 Mon Sep 17 00:00:00 2001
From: polesye <s2pak.anton@gmail.com>
Date: Fri, 7 Mar 2014 13:16:36 +0200
Subject: [PATCH] BLD-905: Fix video resizing in Flash mode.

---
 .../xmodule/xmodule/js/fixtures/video.html    |  2 +-
 .../js/fixtures/video_no_captions.html        |  2 +-
 .../js/fixtures/video_yt_multiple.html        |  6 ++--
 common/lib/xmodule/xmodule/js/spec/helper.js  |  5 ++--
 .../xmodule/js/spec/video/resizer_spec.js     | 17 +++++++++--
 .../js/spec/video/video_control_spec.js       | 17 +----------
 .../js/spec/video/video_player_spec.js        | 28 +++++++++++++++++++
 .../xmodule/js/src/video/00_resizer.js        |  7 +++++
 .../xmodule/js/src/video/03_video_player.js   |  2 ++
 9 files changed, 61 insertions(+), 25 deletions(-)

diff --git a/common/lib/xmodule/xmodule/js/fixtures/video.html b/common/lib/xmodule/xmodule/js/fixtures/video.html
index c08b544bc1..e7144dd2c0 100644
--- a/common/lib/xmodule/xmodule/js/fixtures/video.html
+++ b/common/lib/xmodule/xmodule/js/fixtures/video.html
@@ -28,7 +28,7 @@
             <span tabindex="-1" class="btn-play is-hidden" aria-hidden="true" aria-label="${_('Play video')}"></span>
             <div class="video-player-pre"></div>
             <section class="video-player">
-              <div id="id"></div>
+              <iframe id="id"></iframe>
             </section>
             <div class="video-player-post"></div>
             <section class="video-controls is-hidden">
diff --git a/common/lib/xmodule/xmodule/js/fixtures/video_no_captions.html b/common/lib/xmodule/xmodule/js/fixtures/video_no_captions.html
index 1a28833f56..b3637f49c8 100644
--- a/common/lib/xmodule/xmodule/js/fixtures/video_no_captions.html
+++ b/common/lib/xmodule/xmodule/js/fixtures/video_no_captions.html
@@ -27,7 +27,7 @@
             <span tabindex="0" class="spinner" aria-hidden="false" aria-label="${_('Loading video player')}"></span>
             <span tabindex="-1" class="btn-play is-hidden" aria-hidden="true" aria-label="${_('Play video')}"></span>
             <section class="video-player">
-              <div id="id"></div>
+              <iframe id="id"></iframe>
             </section>
             <section class="video-controls is-hidden"></section>
           </article>
diff --git a/common/lib/xmodule/xmodule/js/fixtures/video_yt_multiple.html b/common/lib/xmodule/xmodule/js/fixtures/video_yt_multiple.html
index df512bd7ab..2b76a64a5b 100644
--- a/common/lib/xmodule/xmodule/js/fixtures/video_yt_multiple.html
+++ b/common/lib/xmodule/xmodule/js/fixtures/video_yt_multiple.html
@@ -28,7 +28,7 @@
             <span tabindex="-1" class="btn-play is-hidden" aria-hidden="true" aria-label="${_('Play video')}"></span>
             <div class="video-player-pre"></div>
             <section class="video-player">
-              <div id="id1"></div>
+              <iframe id="id1"></iframe>
             </section>
             <div class="video-player-post"></div>
             <section class="video-controls is-hidden">
@@ -95,7 +95,7 @@
           <article class="video-wrapper">
             <div class="video-player-pre"></div>
             <section class="video-player">
-              <div id="id2"></div>
+              <iframe id="id2"></iframe>
             </section>
             <div class="video-player-post"></div>
             <section class="video-controls">
@@ -160,7 +160,7 @@
           <article class="video-wrapper">
             <div class="video-player-pre"></div>
             <section class="video-player">
-              <div id="id3"></div>
+              <iframe id="id3"></iframe>
             </section>
             <div class="video-player-post"></div>
             <section class="video-controls">
diff --git a/common/lib/xmodule/xmodule/js/spec/helper.js b/common/lib/xmodule/xmodule/js/spec/helper.js
index 2d81328d62..e69b952810 100644
--- a/common/lib/xmodule/xmodule/js/spec/helper.js
+++ b/common/lib/xmodule/xmodule/js/spec/helper.js
@@ -9,7 +9,7 @@
                     'getPlayerState', 'getVolume', 'setVolume',
                     'loadVideoById', 'getAvailablePlaybackRates', 'playVideo',
                     'pauseVideo', 'seekTo', 'getDuration', 'setPlaybackRate',
-                    'getPlaybackQuality'
+                    'getPlaybackQuality', 'destroy'
                 ]
             );
 
@@ -238,7 +238,8 @@
                     'alignByWidthOnly',
                     'alignByHeightOnly',
                     'setParams',
-                    'setMode'
+                    'setMode',
+                    'setElement'
                 ],
                 obj = {},
                 delta = {
diff --git a/common/lib/xmodule/xmodule/js/spec/video/resizer_spec.js b/common/lib/xmodule/xmodule/js/spec/video/resizer_spec.js
index a09508670e..0064e71a42 100644
--- a/common/lib/xmodule/xmodule/js/spec/video/resizer_spec.js
+++ b/common/lib/xmodule/xmodule/js/spec/video/resizer_spec.js
@@ -51,8 +51,7 @@ function (Resizer) {
         it('`alignByHeightOnly` works correctly', function () {
             var resizer = new Resizer(config).alignByHeightOnly(),
                 expectedHeight = container.height(),
-                realHeight = element.height(),
-                realWidth;
+                realHeight = element.height();
 
             expect(realHeight).toBe(expectedHeight);
         });
@@ -92,6 +91,20 @@ function (Resizer) {
             expect(realWidth).toBe(expectedWidth);
         });
 
+        it('`setElement` works correctly', function () {
+            container.append('<div ' +
+                'id="Another-el" ' +
+                'style="width:100px; height: 150px;"' +
+            '>');
+
+            var newElement = $('#Another-el'),
+                expectedHeight = container.height();
+
+            new Resizer(config).setElement(newElement).alignByHeightOnly();
+            expect(element.height()).not.toBe(expectedHeight);
+            expect(newElement.height()).toBe(expectedHeight);
+        });
+
         describe('Callbacks', function () {
             var resizer,
                 spiesList = [];
diff --git a/common/lib/xmodule/xmodule/js/spec/video/video_control_spec.js b/common/lib/xmodule/xmodule/js/spec/video/video_control_spec.js
index cdc43a7ae8..458eea166a 100644
--- a/common/lib/xmodule/xmodule/js/spec/video/video_control_spec.js
+++ b/common/lib/xmodule/xmodule/js/spec/video/video_control_spec.js
@@ -316,8 +316,6 @@
                 });
 
                 waitsFor(function () {
-                    c1 += 1;
-                    console.log('c1 = ', c1);
                     duration = state.videoPlayer.duration();
 
                     return isFinite(duration) && duration > 0 &&
@@ -325,21 +323,11 @@
                 }, 'duration is set', WAIT_TIMEOUT);
 
                 runs(function () {
-                    console.log('oiooio');
-                    console.log(state.videoProgressSlider.slider);
-                    console.log('0000');
-
                     expect($('.video-controls').find('.vidtime'))
                         .toHaveText('0:00 / 1:00');
 
-                    console.log('1111');
-
                     expect(true).toBe(true);
-
-                    console.log('1111');
-
-                    // expect(state.videoProgressSlider.slider.slider('option', 'value')).toBe(0);
-
+                    expect(state.videoProgressSlider.slider.slider('option', 'value')).toBe(0);
                     state.storage.clear();
                 });
             });
@@ -367,7 +355,6 @@
                         .toHaveText('0:00 / 1:00');
 
                     expect(state.videoProgressSlider.slider.slider('option', 'value')).toBe(0);
-
                     state.storage.clear();
                 });
             });
@@ -396,7 +383,6 @@
                         .toHaveText('0:00 / 1:00');
 
                     expect(state.videoProgressSlider.slider.slider('option', 'value')).toBe(0);
-
                     state.storage.clear();
                 });
             });
@@ -427,7 +413,6 @@
                         .toHaveText('0:10 / 1:00');
 
                     expect(state.videoProgressSlider.slider.slider('option', 'value')).toBe(10);
-
                     state.storage.clear();
                 });
             });
diff --git a/common/lib/xmodule/xmodule/js/spec/video/video_player_spec.js b/common/lib/xmodule/xmodule/js/spec/video/video_player_spec.js
index 55c1cc4a53..51b1bd5287 100644
--- a/common/lib/xmodule/xmodule/js/spec/video/video_player_spec.js
+++ b/common/lib/xmodule/xmodule/js/spec/video/video_player_spec.js
@@ -102,6 +102,34 @@ function (VideoPlayer) {
                 });
             });
 
+            it('create Flash player', function () {
+                var player;
+
+                state = jasmine.initializePlayerYouTube();
+                state.videoEl = state.el.find('video, iframe').width(100);
+                player = state.videoPlayer.player;
+                player.getAvailablePlaybackRates.andReturn([1]);
+                state.currentPlayerMode = 'html5';
+                spyOn(window.YT, 'Player').andCallThrough();
+                state.videoPlayer.onReady();
+
+                expect(YT.Player).toHaveBeenCalledWith('id', {
+                    playerVars: {
+                        controls: 0,
+                        wmode: 'transparent',
+                        rel: 0,
+                        showinfo: 0,
+                        enablejsapi: 1,
+                        modestbranding: 1
+                    },
+                    videoId: 'abcdefghijkl',
+                    events: jasmine.any(Object)
+                });
+
+                expect(state.resizer.setElement).toHaveBeenCalled();
+                expect(state.resizer.align).toHaveBeenCalled();
+            });
+
             // We can't test the invocation of HTML5Video because it is not
             // available globally. It is defined within the scope of Require
             // JS.
diff --git a/common/lib/xmodule/xmodule/js/src/video/00_resizer.js b/common/lib/xmodule/xmodule/js/src/video/00_resizer.js
index edff5a9163..cbf7df47ee 100644
--- a/common/lib/xmodule/xmodule/js/src/video/00_resizer.js
+++ b/common/lib/xmodule/xmodule/js/src/video/00_resizer.js
@@ -126,6 +126,12 @@ function () {
             return module;
         };
 
+        var setElement = function (element) {
+            config.element = element;
+
+            return module;
+        };
+
         var addCallback = function (func) {
             if ($.isFunction(func)) {
                 callbacksList.push(func);
@@ -202,6 +208,7 @@ function () {
             alignByHeightOnly: alignByHeightOnly,
             setParams: initialize,
             setMode: setMode,
+            setElement: setElement,
             callbacks: {
                 add: addCallback,
                 once: addOnceCallback,
diff --git a/common/lib/xmodule/xmodule/js/src/video/03_video_player.js b/common/lib/xmodule/xmodule/js/src/video/03_video_player.js
index 7678a2db1e..0a5acd87da 100644
--- a/common/lib/xmodule/xmodule/js/src/video/03_video_player.js
+++ b/common/lib/xmodule/xmodule/js/src/video/03_video_player.js
@@ -270,6 +270,8 @@ function (HTML5Video, Resizer) {
                     .onPlaybackQualityChange
             }
         });
+
+        state.resizer.setElement(state.el.find('iframe')).align();
     }
 
     // ***************************************************************