Merge pull request #3824 from edx/anton/fix-transcript-on-ipad

Video: Fix transcript displaying on iPad.

CHANGELOG.rst

@@ -5,6 +5,8 @@ These are notable changes in edx-platform.  This is a rolling list of changes,
 in roughly chronological order, most recent first.  Add your entries at or near
 the top.  Include a label indicating the component affected.
 
+Blades: Fix displaying transcripts on touch devices. BLD-1033.
+
 Blades: Tolerance expressed in percentage now computes correctly. BLD-522.
 
 Studio: Support add, delete and duplicate on the container page. STUD-1490.

common/lib/xmodule/xmodule/js/spec/video/video_caption_spec.js

@@ -236,18 +236,18 @@
 
                 it('render the caption', function () {
                     runs(function () {
-                        var captionsData;
+                        var captionsData = jasmine.stubbedCaption,
+                        items = $('.subtitles li[data-index]');
 
-                        captionsData = jasmine.stubbedCaption;
-                        $('.subtitles li[data-index]').each(
-                            function (index, link) {
+                        _.each(captionsData.text, function (text, index) {
+                            var item = items.eq(index);
 
-                            expect($(link)).toHaveData('index', index);
-                            expect($(link)).toHaveData(
+                            expect(item).toHaveData('index', index);
+                            expect(item).toHaveData(
                                 'start', captionsData.start[index]
                             );
-                            expect($(link)).toHaveAttr('tabindex', 0);
-                            expect($(link)).toHaveText(captionsData.text[index]);
+                            expect(item).toHaveAttr('tabindex', 0);
+                            expect(item).toHaveText(text);
                         });
                     });
                 });
@@ -324,13 +324,39 @@
                     $.fn.scrollTo.reset();
                 });
 
-                it('show explaination message', function () {
+                it('show explanation message', function () {
                     expect($('.subtitles li')).toHaveHtml(
                         'Caption will be displayed when you start playing ' +
                         'the video.'
                     );
                 });
 
+                it('show captions on play', function () {
+                    runs(function () {
+                        state.el.trigger('play');
+                    });
+
+                    waitsFor(function () {
+                        return state.videoCaption.rendered;
+                    }, 'Captions are not rendered', WAIT_TIMEOUT);
+
+                    runs(function () {
+                        var captionsData = jasmine.stubbedCaption,
+                        items = $('.subtitles li[data-index]');
+
+                        _.each(captionsData.text, function (text, index) {
+                            var item = items.eq(index);
+
+                            expect(item).toHaveData('index', index);
+                            expect(item).toHaveData(
+                                'start', captionsData.start[index]
+                            );
+                            expect(item).toHaveAttr('tabindex', 0);
+                            expect(item).toHaveText(text);
+                        });
+                    });
+                });
+
                 it('does not set rendered to true', function () {
                     expect(state.videoCaption.rendered).toBeFalsy();
                 });

common/lib/xmodule/xmodule/js/src/video/09_video_caption.js

@@ -119,10 +119,10 @@ function (Sjson, AsyncProcess) {
                     'caption:update': function (event, time) {
                         self.updatePlayTime(time);
                     },
-                    'ended': this.pause,
+                    'ended': this.pause.bind(this),
                     'fullscreen': this.onResize.bind(this),
-                    'pause': this.pause,
-                    'play': this.play,
+                    'pause': this.pause.bind(this),
+                    'play': this.play.bind(this)
                 });
 
             if ((state.videoType === 'html5') && (state.config.autohideHtml5)) {