Do not display play/pause button on iOS Device

iOS devices has a restriction that user has to click on the video
element to initiate playback. By visually disable the button, user will
be forced to click on the video itself, and everything will be worked as
expected.

Fixes https://www.pivotaltracker.com/story/show/30334381

static/coffee/spec/modules/video/video_control_spec.coffee

@@ -1,17 +1,16 @@
 describe 'VideoControl', ->
   beforeEach ->
     @player = jasmine.stubVideoPlayer @
+    $('.video-controls').html ''
 
   describe 'constructor', ->
-    beforeEach ->
-      @control = new VideoControl @player
-
     it 'render the video controls', ->
+      new VideoControl @player
       expect($('.video-controls').html()).toContain '''
         <div class="slider"></div>
         <div>
           <ul class="vcr">
-            <li><a class="video_control play">Play</a></li>
+            <li><a class="video_control play" href="#">Play</a></li>
             <li>
               <div class="vidtime">0:00 / 0:00</div>
             </li>
@@ -23,12 +22,33 @@ describe 'VideoControl', ->
       '''
 
     it 'bind player events', ->
-      expect($(@player)).toHandleWith 'play', @control.onPlay
-      expect($(@player)).toHandleWith 'pause', @control.onPause
-      expect($(@player)).toHandleWith 'ended', @control.onPause
+      control = new VideoControl @player
+      expect($(@player)).toHandleWith 'play', control.onPlay
+      expect($(@player)).toHandleWith 'pause', control.onPause
+      expect($(@player)).toHandleWith 'ended', control.onPause
 
     it 'bind the playback button', ->
-      expect($('.video_control')).toHandleWith 'click', @control.togglePlayback
+      control = new VideoControl @player
+      expect($('.video_control')).toHandleWith 'click', control.togglePlayback
+
+    describe 'when on a touch based device', ->
+      beforeEach ->
+        spyOn(window, 'onTouchBasedDevice').andReturn true
+
+      it 'does not add the play class to video control', ->
+        new VideoControl @player
+        expect($('.video_control')).not.toHaveClass 'play'
+        expect($('.video_control')).not.toHaveHtml 'Play'
+
+
+    describe 'when on a non-touch based device', ->
+      beforeEach ->
+        spyOn(window, 'onTouchBasedDevice').andReturn false
+
+      it 'add the play class to video control', ->
+        new VideoControl @player
+        expect($('.video_control')).toHaveClass 'play'
+        expect($('.video_control')).toHaveHtml 'Play'
 
   describe 'onPlay', ->
     beforeEach ->
@@ -54,20 +74,47 @@ describe 'VideoControl', ->
     beforeEach ->
       @control = new VideoControl @player
 
-    describe 'when the video is playing', ->
+    describe 'when the control does not have play or pause class', ->
       beforeEach ->
-        spyOn(@player, 'isPlaying').andReturn true
-        spyOnEvent @player, 'pause'
-        @control.togglePlayback jQuery.Event('click')
+        $('.video_control').removeClass('play').removeClass('pause')
 
-      it 'trigger the pause event', ->
-        expect('pause').toHaveBeenTriggeredOn @player
+      describe 'when the video is playing', ->
+        beforeEach ->
+          spyOn(@player, 'isPlaying').andReturn true
+          spyOnEvent @player, 'pause'
+          @control.togglePlayback jQuery.Event('click')
 
-    describe 'when the video is paused', ->
-      beforeEach ->
-        spyOn(@player, 'isPlaying').andReturn false
-        spyOnEvent @player, 'play'
-        @control.togglePlayback jQuery.Event('click')
+        it 'does not trigger the pause event', ->
+          expect('pause').not.toHaveBeenTriggeredOn @player
 
-      it 'trigger the play event', ->
-        expect('play').toHaveBeenTriggeredOn @player
+      describe 'when the video is paused', ->
+        beforeEach ->
+          spyOn(@player, 'isPlaying').andReturn false
+          spyOnEvent @player, 'play'
+          @control.togglePlayback jQuery.Event('click')
+
+        it 'does not trigger the play event', ->
+          expect('play').not.toHaveBeenTriggeredOn @player
+
+    for className in ['play', 'pause']
+      describe "when the control has #{className} class", ->
+        beforeEach ->
+          $('.video_control').addClass className
+
+        describe 'when the video is playing', ->
+          beforeEach ->
+            spyOn(@player, 'isPlaying').andReturn true
+            spyOnEvent @player, 'pause'
+            @control.togglePlayback jQuery.Event('click')
+
+          it 'trigger the pause event', ->
+            expect('pause').toHaveBeenTriggeredOn @player
+
+        describe 'when the video is paused', ->
+          beforeEach ->
+            spyOn(@player, 'isPlaying').andReturn false
+            spyOnEvent @player, 'play'
+            @control.togglePlayback jQuery.Event('click')
+
+          it 'trigger the play event', ->
+            expect('play').toHaveBeenTriggeredOn @player

static/coffee/src/modules/video/video_control.coffee

@@ -17,7 +17,7 @@ class @VideoControl
       <div class="slider"></div>
       <div>
         <ul class="vcr">
-          <li><a class="video_control play">Play</a></li>
+          <li><a class="video_control" href="#"></a></li>
           <li>
             <div class="vidtime">0:00 / 0:00</div>
           </li>
@@ -26,7 +26,10 @@ class @VideoControl
           <a href="#" class="add-fullscreen" title="Fill browser">Fill Browser</a>
         </div>
       </div>
-     """
+      """
+
+    unless onTouchBasedDevice()
+      @$('.video_control').addClass('play').html('Play')
 
   onPlay: =>
     @$('.video_control').removeClass('play').addClass('pause').html('Pause')
@@ -36,7 +39,8 @@ class @VideoControl
 
   togglePlayback: (event) =>
     event.preventDefault()
-    if @player.isPlaying()
-      $(@player).trigger('pause')
-    else
-      $(@player).trigger('play')
+    if $('.video_control').hasClass('play') || $('.video_control').hasClass('pause')
+      if @player.isPlaying()
+        $(@player).trigger('pause')
+      else
+        $(@player).trigger('play')