Merge pull request #2855 from edx/anton/fix-fullscreen-in-flash

Fix video resizing in Flash mode.

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">

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>

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">

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 = {

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 = [];

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();
                 });
             });

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.

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,

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();
     }
 
     // ***************************************************************