Merge pull request #593 from edx/valera/captions_keyboard_access_2

Valera/captions keyboard access 2

common/lib/xmodule/xmodule/css/videoalpha/display.scss

@@ -133,7 +133,6 @@ div.videoalpha {
             line-height: 46px;
             padding: 0 lh(.75);
             text-indent: -9999px;
-            @include transition(background-color 0.75s linear 0s, opacity 0.75s linear 0s);
             width: 14px;
             background: url('../images/vcr.png') 15px 15px no-repeat;
             outline: 0;
@@ -150,15 +149,15 @@ div.videoalpha {
             &.play {
               background-position: 17px -114px;
 
-              &:hover {
+              &:hover, &:focus {
                 background-color: #444;
               }
             }
 
             &.pause {
               background-position: 16px -50px;
 
-              &:hover {
+              &:hover, &:focus {
                 background-color: #444;
               }
             }
@@ -300,12 +299,15 @@ div.videoalpha {
 
           &.muted {
             &>a {
-              background: url('../images/mute.png') 10px center no-repeat;
+              background-image: url('../images/mute.png');
             }
           }
 
           > a {
-            background: url('../images/volume.png') 10px center no-repeat;
+            background-image: url('../images/volume.png');
+            background-position: 10px center;
+            background-repeat: no-repeat;
+
             border-right: 1px solid #000;
             box-shadow: 1px 0 0 #555, inset 1px 0 0 #555;
             @include clearfix();
@@ -382,7 +384,7 @@ div.videoalpha {
           @include transition(none);
           width: 30px;
 
-          &:hover {
+          &:hover, &:active, &:focus {
             background-color: #444;
             color: #fff;
             text-decoration: none;
@@ -403,7 +405,7 @@ div.videoalpha {
           @include transition(none);
           width: 30px;
 
-          &:hover {
+          &:hover, &:focus {
             background-color: #444;
             color: #fff;
             text-decoration: none;
@@ -419,7 +421,6 @@ div.videoalpha {
 
         a.hide-subtitles {
           background: url('../images/cc.png') center no-repeat;
-          display: block;
           float: left;
           font-weight: 800;
           line-height: 46px; //height of play pause buttons
@@ -432,7 +433,7 @@ div.videoalpha {
           -webkit-font-smoothing: antialiased;
           width: 30px;
 
-          &:hover {
+          &:hover, &:focus {
             background-color: #444;
             color: #fff;
             text-decoration: none;
@@ -442,9 +443,7 @@ div.videoalpha {
             opacity: 0.7;
           }
 
-          background-color: #444;
-          color: #fff;
-          text-decoration: none;
+          color: #797979;
         }
       }
     }
@@ -513,12 +512,6 @@ div.videoalpha {
       z-index: 1;
     }
 
-    article.video-wrapper section.video-controls div.secondary-controls a.hide-subtitles {
-        background-color: inherit;
-        color: #797979;
-        text-decoration: inherit;
-    }
-
     article.video-wrapper div.video-player-pre, article.video-wrapper div.video-player-post {
         height: 0px;
     }

common/lib/xmodule/xmodule/js/fixtures/video.html

@@ -2,8 +2,8 @@
   <div id="video_example">
     <div id="example">
       <div id="video_id" class="video"
-        data-youtube-id-0-75="slowerSpeedYoutubeId"
-        data-youtube-id-1-0="normalSpeedYoutubeId"
+        data-youtube-id-0-75="7tqY6eQzVhE"
+        data-youtube-id-1-0="cogebirgzzM"
         data-show-captions="true"
         data-start=""
         data-end=""

common/lib/xmodule/xmodule/js/fixtures/videoalpha.html

@@ -4,7 +4,7 @@
       <div
         id="video_id"
         class="videoalpha"
-        data-streams="0.75:slowerSpeedYoutubeId,1.0:normalSpeedYoutubeId"
+        data-streams="0.75:7tqY6eQzVhE,1.0:cogebirgzzM"
         data-show-captions="true"
         data-start=""
         data-end=""

common/lib/xmodule/xmodule/js/fixtures/videoalpha_all.html

@@ -8,7 +8,7 @@
         data-start=""
         data-end=""
         data-caption-asset-path="/static/subs/"
-        data-sub="test_name_of_the_subtitles"
+        data-sub="Z5KLxerq05Y"
         data-mp4-source="test_files/test.mp4"
         data-webm-source="test_files/test.webm"
         data-ogg-source="test_files/test.ogv"

common/lib/xmodule/xmodule/js/fixtures/videoalpha_html5.html

@@ -8,7 +8,7 @@
         data-start=""
         data-end=""
         data-caption-asset-path="/static/subs/"
-        data-sub="test_name_of_the_subtitles"
+        data-sub="Z5KLxerq05Y"
         data-mp4-source="test_files/test.mp4"
         data-webm-source="test_files/test.webm"
         data-ogg-source="test_files/test.ogv"

common/lib/xmodule/xmodule/js/fixtures/videoalpha_no_captions.html

@@ -4,7 +4,7 @@
       <div
         id="video_id"
         class="videoalpha"
-        data-streams="0.75:slowerSpeedYoutubeId,1.0:normalSpeedYoutubeId"
+        data-streams="0.75:7tqY6eQzVhE,1.0:cogebirgzzM"
         data-show-captions="false"
         data-start=""
         data-end=""

common/lib/xmodule/xmodule/js/spec/helper.coffee

@@ -12,6 +12,9 @@ window.STATUS = window.YT.PlayerState
 
 oldAjaxWithPrefix = window.jQuery.ajaxWithPrefix
 
+window.onTouchBasedDevice = ->
+    navigator.userAgent.match /iPhone|iPod|iPad/i
+
 jasmine.stubbedCaption =
       end: [3120, 6270, 8490, 21620, 24920, 25750, 27900, 34380, 35550, 40250]
       start: [1180, 3120, 6270, 14910, 21620, 24920, 25750, 27900, 34380, 35550]
@@ -36,7 +39,7 @@ jasmine.stubbedCaption =
 #
 # We will replace it with a function that does:
 #
-#     1.) Return a hard coded captions object if the file name contains 'test_name_of_the_subtitles'.
+#     1.) Return a hard coded captions object if the file name contains 'Z5KLxerq05Y'.
 #     2.) Behaves the same a as the origianl in all other cases.
 
 window.jQuery.ajaxWithPrefix = (url, settings) ->
@@ -46,7 +49,7 @@ window.jQuery.ajaxWithPrefix = (url, settings) ->
       success = settings.success
       data = settings.data
 
-  if url.match(/test_name_of_the_subtitles/g) isnt null or url.match(/slowerSpeedYoutubeId/g) isnt null or url.match(/normalSpeedYoutubeId/g) isnt null
+  if url.match(/Z5KLxerq05Y/g) isnt null or url.match(/7tqY6eQzVhE/g) isnt null or url.match(/cogebirgzzM/g) isnt null
     if window.jQuery.isFunction(success) is true
       success jasmine.stubbedCaption
     else if window.jQuery.isFunction(data) is true
@@ -60,11 +63,11 @@ window.WAIT_TIMEOUT = 1000
 jasmine.getFixtures().fixturesPath = 'xmodule/js/fixtures'
 
 jasmine.stubbedMetadata =
-  slowerSpeedYoutubeId:
-    id: 'slowerSpeedYoutubeId'
+  '7tqY6eQzVhE':
+    id: '7tqY6eQzVhE'
     duration: 300
-  normalSpeedYoutubeId:
-    id: 'normalSpeedYoutubeId'
+  'cogebirgzzM':
+    id: 'cogebirgzzM'
     duration: 200
   bogus:
     duration: 100
@@ -117,7 +120,7 @@ jasmine.stubVideoPlayer = (context, enableParts, createPlayer=true) ->
   loadFixtures 'video.html'
   jasmine.stubRequests()
   YT.Player = undefined
-  videosDefinition = '0.75:slowerSpeedYoutubeId,1.0:normalSpeedYoutubeId'
+  videosDefinition = '0.75:7tqY6eQzVhE,1.0:cogebirgzzM'
   context.video = new Video '#example', videosDefinition
   jasmine.stubYoutubePlayer()
   if createPlayer
@@ -135,7 +138,7 @@ jasmine.stubVideoPlayerAlpha = (context, enableParts, html5=false) ->
   YT.Player = undefined
   window.OldVideoPlayerAlpha = undefined
   jasmine.stubYoutubePlayer()
-  return new VideoAlpha '#example', '.75:slowerSpeedYoutubeId,1.0:normalSpeedYoutubeId'
+  return new VideoAlpha '#example', '.75:7tqY6eQzVhE,1.0:cogebirgzzM'
 
 
 # Stub jQuery.cookie

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

@@ -19,7 +19,7 @@ describe 'VideoCaption', ->
         @caption = @player.caption
 
       it 'set the youtube id', ->
-        expect(@caption.youtubeId).toEqual 'normalSpeedYoutubeId'
+        expect(@caption.youtubeId).toEqual 'cogebirgzzM'
 
       it 'create the caption element', ->
         expect($('.video')).toContain 'ol.subtitles'

common/lib/xmodule/xmodule/js/spec/video/display/video_player_spec.coffee

@@ -35,7 +35,7 @@ describe 'VideoPlayer', ->
         expect(window.VideoCaption.prototype.initialize).toHaveBeenCalled()
         expect(@player.caption).toBeDefined()
         expect(@player.caption.el).toBe @player.el
-        expect(@player.caption.youtubeId).toEqual 'normalSpeedYoutubeId'
+        expect(@player.caption.youtubeId).toEqual 'cogebirgzzM'
         expect(@player.caption.currentSpeed).toEqual '1.0'
         expect(@player.caption.captionAssetPath).toEqual '/static/subs/'
 
@@ -60,7 +60,7 @@ describe 'VideoPlayer', ->
             showinfo: 0
             enablejsapi: 1
             modestbranding: 1
-          videoId: 'normalSpeedYoutubeId'
+          videoId: 'cogebirgzzM'
           events:
             onReady: @player.onReady
             onStateChange: @player.onStateChange
@@ -290,7 +290,7 @@ describe 'VideoPlayer', ->
         @player.onSpeedChange {}, '0.75'
 
       it 'load the video', ->
-        expect(@player.player.loadVideoById).toHaveBeenCalledWith 'slowerSpeedYoutubeId', '80.000'
+        expect(@player.player.loadVideoById).toHaveBeenCalledWith '7tqY6eQzVhE', '80.000'
 
       it 'trigger updatePlayTime event', ->
         expect(@player.updatePlayTime).toHaveBeenCalledWith '80.000'
@@ -301,7 +301,7 @@ describe 'VideoPlayer', ->
         @player.onSpeedChange {}, '0.75'
 
       it 'cue the video', ->
-        expect(@player.player.cueVideoById).toHaveBeenCalledWith 'slowerSpeedYoutubeId', '80.000'
+        expect(@player.player.cueVideoById).toHaveBeenCalledWith '7tqY6eQzVhE', '80.000'
 
       it 'trigger updatePlayTime event', ->
         expect(@player.updatePlayTime).toHaveBeenCalledWith '80.000'

common/lib/xmodule/xmodule/js/spec/video/display_spec.coffee

@@ -5,14 +5,14 @@ describe 'Video', ->
     loadFixtures 'video.html'
     jasmine.stubRequests()
 
-    @slowerSpeedYoutubeId = 'slowerSpeedYoutubeId'
-    @normalSpeedYoutubeId = 'normalSpeedYoutubeId'
+    @['7tqY6eQzVhE'] = '7tqY6eQzVhE'
+    @['cogebirgzzM'] = 'cogebirgzzM'
     metadata =
-      slowerSpeedYoutubeId:
-        id: @slowerSpeedYoutubeId
+      '7tqY6eQzVhE':
+        id: @['7tqY6eQzVhE']
         duration: 300
-      normalSpeedYoutubeId:
-        id: @normalSpeedYoutubeId
+      'cogebirgzzM':
+        id: @['cogebirgzzM']
         duration: 200
 
   afterEach ->
@@ -38,8 +38,8 @@ describe 'Video', ->
 
       it 'parse the videos', ->
         expect(@video.videos).toEqual
-          '0.75': @slowerSpeedYoutubeId
-          '1.0': @normalSpeedYoutubeId
+          '0.75': @['7tqY6eQzVhE']
+          '1.0': @['cogebirgzzM']
 
       it 'fetch the video metadata', ->
         expect(@video.fetchMetadata).toHaveBeenCalled
@@ -102,12 +102,12 @@ describe 'Video', ->
 
     describe 'with speed', ->
       it 'return the video id for given speed', ->
-        expect(@video.youtubeId('0.75')).toEqual @slowerSpeedYoutubeId
-        expect(@video.youtubeId('1.0')).toEqual @normalSpeedYoutubeId
+        expect(@video.youtubeId('0.75')).toEqual @['7tqY6eQzVhE']
+        expect(@video.youtubeId('1.0')).toEqual @['cogebirgzzM']
 
     describe 'without speed', ->
       it 'return the video id for current speed', ->
-        expect(@video.youtubeId()).toEqual @normalSpeedYoutubeId
+        expect(@video.youtubeId()).toEqual @cogebirgzzM
 
   describe 'setSpeed', ->
     beforeEach ->
@@ -148,6 +148,6 @@ describe 'Video', ->
     it 'call the logger with valid parameters', ->
       expect(Logger.log).toHaveBeenCalledWith 'someEvent',
         id: 'id'
-        code: @normalSpeedYoutubeId
+        code: @cogebirgzzM
         currentTime: 25
         speed: '1.0'

common/lib/xmodule/xmodule/js/spec/videoalpha/general_spec.js

@@ -6,9 +6,9 @@
             jasmine.stubRequests();
             oldOTBD = window.onTouchBasedDevice;
             window.onTouchBasedDevice = jasmine.createSpy('onTouchBasedDevice').andReturn(false);
-            this.videosDefinition = '0.75:slowerSpeedYoutubeId,1.0:normalSpeedYoutubeId';
-            this.slowerSpeedYoutubeId = 'slowerSpeedYoutubeId';
-            this.normalSpeedYoutubeId = 'normalSpeedYoutubeId';
+            this.videosDefinition = '0.75:7tqY6eQzVhE,1.0:cogebirgzzM';
+            this['7tqY6eQzVhE'] = '7tqY6eQzVhE';
+            this['cogebirgzzM'] = 'cogebirgzzM';
         });
 
         afterEach(function () {
@@ -45,8 +45,8 @@
 
                     it('parse the videos', function () {
                         expect(this.state.videos).toEqual({
-                            '0.75': this.slowerSpeedYoutubeId,
-                            '1.0': this.normalSpeedYoutubeId
+                            '0.75': this['7tqY6eQzVhE'],
+                            '1.0': this['cogebirgzzM']
                         });
                     });
 
@@ -91,7 +91,7 @@
                     });
 
                     it('parse the videos if subtitles exist', function () {
-                        var sub = 'test_name_of_the_subtitles';
+                        var sub = 'Z5KLxerq05Y';
 
                         expect(state.videos).toEqual({
                             '0.75': sub,
@@ -165,14 +165,14 @@
 
             describe('with speed', function () {
                 it('return the video id for given speed', function () {
-                    expect(state.youtubeId('0.75')).toEqual(this.slowerSpeedYoutubeId);
-                    expect(state.youtubeId('1.0')).toEqual(this.normalSpeedYoutubeId);
+                    expect(state.youtubeId('0.75')).toEqual(this['7tqY6eQzVhE']);
+                    expect(state.youtubeId('1.0')).toEqual(this['cogebirgzzM']);
                 });
             });
 
             describe('without speed', function () {
                 it('return the video id for current speed', function () {
-                    expect(state.youtubeId()).toEqual(this.normalSpeedYoutubeId);
+                    expect(state.youtubeId()).toEqual(this.cogebirgzzM);
                 });
             });
         });

common/lib/xmodule/xmodule/js/spec/videoalpha/readme.md

@@ -1,7 +1,8 @@
 Jasmine JavaScript tests status
 -------------------------------
 
-As of 22.07.2013, all the tests in this directory pass. To disable each of them, change the top level "describe(" to "xdescribe(".
+As of 22.07.2013, all the tests in this directory pass. To enable a test file, change
+the top level "xdescribe(" to "describe(".
 
 PS: When you are running the tests in chrome locally, make sure that chrome is started
 with the option "--allow-file-access-from-files".