From fe849dedd91f62c41dc8231ee1e4082ff8f1f35e Mon Sep 17 00:00:00 2001
From: Prem Sichanugrist <psichanugrist@thoughtbot.com>
Date: Thu, 31 May 2012 16:28:19 -0400
Subject: [PATCH] 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
---
 .../modules/video/video_control_spec.coffee   | 89 ++++++++++++++-----
 .../src/modules/video/video_control.coffee    | 16 ++--
 2 files changed, 78 insertions(+), 27 deletions(-)

diff --git a/static/coffee/spec/modules/video/video_control_spec.coffee b/static/coffee/spec/modules/video/video_control_spec.coffee
index a912abb2d0..0c8615b8f7 100644
--- a/static/coffee/spec/modules/video/video_control_spec.coffee
+++ b/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
diff --git a/static/coffee/src/modules/video/video_control.coffee b/static/coffee/src/modules/video/video_control.coffee
index c9bbf95c0a..0c303fc4ad 100644
--- a/static/coffee/src/modules/video/video_control.coffee
+++ b/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')