Hide the caption first when on the iOS browser

This prevent user from prematurely seeking the video.

static/coffee/spec/helper.coffee

@@ -11,12 +11,8 @@ jasmine.stubbedMetadata =
     duration: 300
 
 jasmine.stubbedCaption =
-  start: [0, 10000, 20000, 30000, 40000, 50000, 60000, 70000, 80000, 90000,
-    100000, 110000, 120000]
-  text: ['Caption at 0', 'Caption at 10000', 'Caption at 20000',
-  'Caption at 30000', 'Caption at 40000', 'Caption at 50000', 'Caption at 60000',
-  'Caption at 70000', 'Caption at 80000', 'Caption at 90000', 'Caption at 100000',
-  'Caption at 110000', 'Caption at 120000']
+  start: [0, 10000, 20000, 30000]
+  text: ['Caption at 0', 'Caption at 10000', 'Caption at 20000', 'Caption at 30000']
 
 jasmine.stubRequests = ->
   spyOn($, 'ajax').andCallFake (settings) ->

static/coffee/spec/modules/video/video_caption_spec.coffee

@@ -9,6 +9,9 @@ describe 'VideoCaption', ->
   describe 'constructor', ->
     beforeEach ->
       spyOn($, 'getWithPrefix').andCallThrough()
+
+    describe 'always', ->
+      beforeEach ->
         @caption = new VideoCaption @player, 'def456'
 
       it 'set the player', ->
@@ -26,21 +29,39 @@ describe 'VideoCaption', ->
       it 'fetch the caption', ->
         expect($.getWithPrefix).toHaveBeenCalledWith @caption.captionURL(), jasmine.any(Function)
 
+      it 'bind window resize event', ->
+        expect($(window)).toHandleWith 'resize', @caption.onWindowResize
+
+      it 'bind player resize event', ->
+        expect($(@player)).toHandleWith 'resize', @caption.onWindowResize
+
+      it 'bind player updatePlayTime event', ->
+        expect($(@player)).toHandleWith 'updatePlayTime', @caption.onUpdatePlayTime
+
+      it 'bind player play event', ->
+        expect($(@player)).toHandleWith 'play', @caption.onPlay
+
+      it 'bind the hide caption button', ->
+        expect($('.hide-subtitles')).toHandleWith 'click', @caption.toggle
+
+      it 'bind the mouse movement', ->
+        expect($('.subtitles')).toHandleWith 'mouseenter', @caption.onMouseEnter
+        expect($('.subtitles')).toHandleWith 'mouseleave', @caption.onMouseLeave
+        expect($('.subtitles')).toHandleWith 'mousemove', @caption.onMovement
+        expect($('.subtitles')).toHandleWith 'mousewheel', @caption.onMovement
+        expect($('.subtitles')).toHandleWith 'DOMMouseScroll', @caption.onMovement
+
+    describe 'when on a non touch-based device', ->
+      beforeEach ->
+        spyOn(window, 'onTouchBasedDevice').andReturn false
+        @caption = new VideoCaption @player, 'def456'
+
       it 'render the caption', ->
         expect($('.subtitles').html()).toMatch new RegExp('''
           <li data-index="0" data-start="0">Caption at 0</li>
           <li data-index="1" data-start="10000">Caption at 10000</li>
           <li data-index="2" data-start="20000">Caption at 20000</li>
           <li data-index="3" data-start="30000">Caption at 30000</li>
-        <li data-index="4" data-start="40000">Caption at 40000</li>
-        <li data-index="5" data-start="50000">Caption at 50000</li>
-        <li data-index="6" data-start="60000">Caption at 60000</li>
-        <li data-index="7" data-start="70000">Caption at 70000</li>
-        <li data-index="8" data-start="80000">Caption at 80000</li>
-        <li data-index="9" data-start="90000">Caption at 90000</li>
-        <li data-index="10" data-start="100000">Caption at 100000</li>
-        <li data-index="11" data-start="110000">Caption at 110000</li>
-        <li data-index="12" data-start="120000">Caption at 120000</li>
         '''.replace(/\n/g, ''))
 
       it 'add a padding element to caption', ->
@@ -51,24 +72,19 @@ describe 'VideoCaption', ->
         $('.subtitles li[data-index]').each (index, link) =>
           expect($(link)).toHandleWith 'click', @caption.seekPlayer
 
-    it 'bind window resize event', ->
-      expect($(window)).toHandleWith 'resize', @caption.onWindowResize
-
-    it 'bind player resize event', ->
-      expect($(@player)).toHandleWith 'resize', @caption.onWindowResize
+      it 'set rendered to true', ->
+        expect(@caption.rendered).toBeTruthy()
 
-    it 'bind player updatePlayTime event', ->
-      expect($(@player)).toHandleWith 'updatePlayTime', @caption.onUpdatePlayTime
+    describe 'when on a touch-based device', ->
+      beforeEach ->
+        spyOn(window, 'onTouchBasedDevice').andReturn true
+        @caption = new VideoCaption @player, 'def456'
 
-    it 'bind the hide caption button', ->
-      expect($('.hide-subtitles')).toHandleWith 'click', @caption.toggle
+      it 'show explaination message', ->
+        expect($('.subtitles li')).toHaveHtml "Caption will be displayed when you start playing the video."
 
-    it 'bind the mouse movement', ->
-      expect($('.subtitles')).toHandleWith 'mouseenter', @caption.onMouseEnter
-      expect($('.subtitles')).toHandleWith 'mouseleave', @caption.onMouseLeave
-      expect($('.subtitles')).toHandleWith 'mousemove', @caption.onMovement
-      expect($('.subtitles')).toHandleWith 'mousewheel', @caption.onMovement
-      expect($('.subtitles')).toHandleWith 'DOMMouseScroll', @caption.onMovement
+      it 'does not set rendered to true', ->
+        expect(@caption.rendered).toBeFalsy()
 
   describe 'mouse movement', ->
     beforeEach ->
@@ -145,8 +161,34 @@ describe 'VideoCaption', ->
       expect(@caption.search(9999)).toEqual 0
       expect(@caption.search(10000)).toEqual 1
       expect(@caption.search(15000)).toEqual 1
-      expect(@caption.search(120000)).toEqual 12
-      expect(@caption.search(120001)).toEqual 12
+      expect(@caption.search(30000)).toEqual 3
+      expect(@caption.search(30001)).toEqual 3
+
+  describe 'onPlay', ->
+    describe 'when the caption was not rendered', ->
+      beforeEach ->
+        spyOn(window, 'onTouchBasedDevice').andReturn true
+        @caption = new VideoCaption @player, 'def456'
+        @caption.onPlay()
+
+      it 'render the caption', ->
+        expect($('.subtitles').html()).toMatch new RegExp('''
+          <li data-index="0" data-start="0">Caption at 0</li>
+          <li data-index="1" data-start="10000">Caption at 10000</li>
+          <li data-index="2" data-start="20000">Caption at 20000</li>
+          <li data-index="3" data-start="30000">Caption at 30000</li>
+        '''.replace(/\n/g, ''))
+
+      it 'add a padding element to caption', ->
+        expect($('.subtitles li:first')).toBe '.spacing'
+        expect($('.subtitles li:last')).toBe '.spacing'
+
+      it 'bind all the caption link', ->
+        $('.subtitles li[data-index]').each (index, link) =>
+          expect($(link)).toHandleWith 'click', @caption.seekPlayer
+
+      it 'set rendered to true', ->
+        expect(@caption.rendered).toBeTruthy()
 
   describe 'onUpdatePlayTime', ->
     beforeEach ->

static/coffee/src/modules/video/video_caption.coffee

@@ -10,6 +10,7 @@ class @VideoCaption
     $(window).bind('resize', @onWindowResize)
     $(@player).bind('resize', @onWindowResize)
     $(@player).bind('updatePlayTime', @onUpdatePlayTime)
+    $(@player).bind('play', @onPlay)
     @$('.hide-subtitles').click @toggle
     @$('.subtitles').mouseenter(@onMouseEnter).mouseleave(@onMouseLeave)
       .mousemove(@onMovement).bind('mousewheel', @onMovement)
@@ -32,6 +33,10 @@ class @VideoCaption
     $.getWithPrefix @captionURL(), (captions) =>
       @captions = captions.text
       @start = captions.start
+
+      if onTouchBasedDevice()
+        $('.subtitles li').html "Caption will be displayed when you start playing the video."
+      else
         @renderCaption()
 
   renderCaption: ->
@@ -49,6 +54,8 @@ class @VideoCaption
     @$('.subtitles').prepend($('<li class="spacing">').height(@topSpacingHeight()))
       .append($('<li class="spacing">').height(@bottomSpacingHeight()))
 
+    @rendered = true
+
   search: (time) ->
     min = 0
     max = @start.length - 1
@@ -62,6 +69,9 @@ class @VideoCaption
 
     return min
 
+  onPlay: =>
+    @renderCaption() unless @rendered
+
   onUpdatePlayTime: (event, time) =>
     # This 250ms offset is required to match the video speed
     time = Math.round(Time.convert(time, @player.currentSpeed(), '1.0') * 1000 + 250)