Lazily build video slider when on iOS device

This will fix the problem when user trying to click the seek button on
the iOS, as the video need to be started first before it can be
seekable.

static/coffee/spec/modules/video/video_progress_slider_spec.coffee

@@ -3,34 +3,51 @@ describe 'VideoProgressSlider', ->
     @player = jasmine.stubVideoPlayer @
 
   describe 'constructor', ->
-    beforeEach ->
-      spyOn($.fn, 'slider').andCallThrough()
-      @slider = new VideoProgressSlider @player
+    describe 'on a non-touch based device', ->
+      beforeEach ->
+        spyOn($.fn, 'slider').andCallThrough()
+        spyOn(window, 'onTouchBasedDevice').andReturn false
+        @slider = new VideoProgressSlider @player
+
+      it 'build the slider', ->
+        expect(@slider.slider).toBe '.slider'
+        expect($.fn.slider).toHaveBeenCalledWith
+          range: 'min'
+          change: @slider.onChange
+          slide: @slider.onSlide
+          stop: @slider.onStop
+
+      it 'build the seek handle', ->
+        expect(@slider.handle).toBe '.ui-slider-handle'
+        expect($.fn.qtip).toHaveBeenCalledWith
+          content: "0:00"
+          position:
+            my: 'bottom center'
+            at: 'top center'
+            container: @slider.handle
+          hide:
+            delay: 700
+          style:
+            classes: 'ui-tooltip-slider'
+            widget: true
+
+      it 'bind player events', ->
+        expect($(@player)).toHandleWith 'updatePlayTime', @slider.onUpdatePlayTime
+        expect($(@player)).toHandleWith 'ready', @slider.onReady
+        expect($(@player)).toHandleWith 'play', @slider.onPlay
+
+    describe 'on a touch-based device', ->
+      beforeEach ->
+        spyOn($.fn, 'slider').andCallThrough()
+        spyOn(window, 'onTouchBasedDevice').andReturn true
+        @slider = new VideoProgressSlider @player
+
+      it 'does not build the slider', ->
+        expect(@slider.slider).toBeUndefined
+        expect($.fn.slider).not.toHaveBeenCalled()
 
-    it 'build the slider', ->
-      expect(@slider.slider).toBe '.slider'
-      expect($.fn.slider).toHaveBeenCalledWith
-        range: 'min'
-        change: @slider.onChange
-        slide: @slider.onSlide
-        stop: @slider.onStop
-
-    it 'build the seek handle', ->
-      expect(@slider.handle).toBe '.ui-slider-handle'
-      expect($.fn.qtip).toHaveBeenCalledWith
-        content: "0:00"
-        position:
-          my: 'bottom center'
-          at: 'top center'
-          container: @slider.handle
-        hide:
-          delay: 700
-        style:
-          classes: 'ui-tooltip-slider'
-          widget: true
-
-    it 'bind player events', ->
-      expect($(@player)).toHandleWith 'updatePlayTime', @slider.onUpdatePlayTime
+      it 'bind player events', ->
+        expect($(@player)).toHandleWith 'updatePlayTime', @slider.onUpdatePlayTime
 
   describe 'onReady', ->
     beforeEach ->
@@ -41,6 +58,45 @@ describe 'VideoProgressSlider', ->
     it 'set the max value to the length of video', ->
       expect(@slider.slider.slider('option', 'max')).toEqual 120
 
+  describe 'onPlay', ->
+    beforeEach ->
+      @slider = new VideoProgressSlider @player
+      spyOn($.fn, 'slider').andCallThrough()
+
+    describe 'when the slider was already built', ->
+      beforeEach ->
+        @slider.onPlay()
+
+      it 'does not build the slider', ->
+        expect($.fn.slider).not.toHaveBeenCalled
+
+    describe 'when the slider was not already built', ->
+      beforeEach ->
+        @slider.slider = null
+        @slider.onPlay()
+
+      it 'build the slider', ->
+        expect(@slider.slider).toBe '.slider'
+        expect($.fn.slider).toHaveBeenCalledWith
+          range: 'min'
+          change: @slider.onChange
+          slide: @slider.onSlide
+          stop: @slider.onStop
+
+      it 'build the seek handle', ->
+        expect(@slider.handle).toBe '.ui-slider-handle'
+        expect($.fn.qtip).toHaveBeenCalledWith
+          content: "0:00"
+          position:
+            my: 'bottom center'
+            at: 'top center'
+            container: @slider.handle
+          hide:
+            delay: 700
+          style:
+            classes: 'ui-tooltip-slider'
+            widget: true
+
   describe 'onUpdatePlayTime', ->
     beforeEach ->
       @slider = new VideoProgressSlider @player

static/coffee/src/modules/video/video_progress_slider.coffee

 class @VideoProgressSlider
   constructor: (@player) ->
-    @buildSlider()
-    @buildHandle()
+    @buildSlider() unless onTouchBasedDevice()
     $(@player).bind('updatePlayTime', @onUpdatePlayTime)
     $(@player).bind('ready', @onReady)
+    $(@player).bind('play', @onPlay)
 
   $: (selector) ->
     @player.$(selector)
@@ -14,6 +14,7 @@ class @VideoProgressSlider
       change: @onChange
       slide: @onSlide
       stop: @onStop
+    @buildHandle()
 
   buildHandle: ->
     @handle = @$('.ui-slider-handle')
@@ -30,10 +31,13 @@ class @VideoProgressSlider
         widget: true
 
   onReady: =>
-    @slider.slider('option', 'max', @player.duration())
+    @slider.slider('option', 'max', @player.duration()) if @slider
+
+  onPlay: =>
+    @buildSlider() unless @slider
 
   onUpdatePlayTime: (event, currentTime) =>
-    if !@frozen
+    if @slider && !@frozen
       @slider.slider('option', 'max', @player.duration())
       @slider.slider('value', currentTime)