Rebuild controls in JavaScript to reduce bandwidth

templates/coffee/src/modules/sequence.coffee

@@ -66,5 +66,3 @@ class window.Sequence
 
   mark_active: (position) ->
     @link_for(position).attr class: "seq_#{@elements[position - 1].type}_active"
-
-

templates/coffee/src/modules/video/video_caption.coffee

 class VideoCaption
   constructor: (@player, @youtubeId) ->
     @index = []
-    @fetchCaption()
+    @render()
     @bind()
 
   $: (selector) ->
@@ -12,39 +12,48 @@ class VideoCaption
     $(@player).bind('resize', @onWindowResize)
     $(@player).bind('updatePlayTime', @onUpdatePlayTime)
     @$('.hide-subtitles').click @toggle
-
-  fetchCaption: ->
-    $.getJSON @captionURL(), (captions) =>
-      @captions = captions.text
-      @start = captions.start
-      for index in [0...captions.start.length]
-        for time in [captions.start[index]..captions.end[index]]
-          @index[time] ||= []
-          @index[time].push(index)
-      @render()
+    @$('.subtitles').mouseenter(@onMouseEnter).mouseleave(@onMouseLeave)
+      .mousemove(@onMovement).bind('mousewheel', @onMovement)
+      .bind('DOMMouseScroll', @onMovement)
+    @$('.subtitles li[data-index]').click @seekPlayer
 
   captionURL: ->
     "/static/subs/#{@youtubeId}.srt.sjson"
 
   render: ->
-    container = $('<ol class="subtitles">')
-    container.css maxHeight: @$('.video-wrapper').height() - 5
+    @$('.video-wrapper').after """
+      <ol class="subtitles"><li>Attempting to load captions...</li></ol>
+      """
+    @$('.video-controls .secondary-controls').append """
+      <a href="#" class="hide-subtitles" title="Turn off captions">Captions</a>
+      """
+    @$('.subtitles').css maxHeight: @$('.video-wrapper').height() - 5
+    @fetchCaption()
+
+  renderCaption: ->
+    container = $('<ol>')
 
     $.each @captions, (index, text) =>
       container.append $('<li>').html(text).attr
         'data-index': index
         'data-start': @start[index]
 
-    @$('.subtitles').replaceWith(container)
-    @$('.subtitles').mouseenter(@onMouseEnter).mouseleave(@onMouseLeave)
-      .mousemove(@onMovement).bind('mousewheel', @onMovement)
-      .bind('DOMMouseScroll', @onMovement)
-    @$('.subtitles li[data-index]').click @seekPlayer
+    @$('.subtitles').html(container.html())
 
     # prepend and append an empty <li> for cosmatic reason
     @$('.subtitles').prepend($('<li class="spacing">').height(@topSpacingHeight()))
       .append($('<li class="spacing">').height(@bottomSpacingHeight()))
 
+  fetchCaption: ->
+    $.getJSON @captionURL(), (captions) =>
+      @captions = captions.text
+      @start = captions.start
+      for index in [0...captions.start.length]
+        for time in [captions.start[index]..captions.end[index]]
+          @index[time] ||= []
+          @index[time].push(index)
+      @renderCaption()
+
   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)

templates/coffee/src/modules/video/video_control.coffee

+class VideoControl
+  constructor: (@player) ->
+    @render()
+    @bind()
+
+  $: (selector) ->
+    @player.$(selector)
+
+  bind: ->
+    $(@player).bind('play', @onPlay)
+      .bind('pause', @onPause)
+      .bind('ended', @onPause)
+    @$('.video_control').click @togglePlayback
+
+  render: ->
+    @$('.video-controls').append """
+      <div class="slider"></div>
+      <div>
+        <ul class="vcr">
+          <li><a class="video_control play">Play</a></li>
+          <li>
+            <div class="vidtime">0:00 / 0:00</div>
+          </li>
+        </ul>
+        <div class="secondary-controls">
+          <a href="#" class="add-fullscreen" title="Fill browser">Fill Browser</a>
+        </div>
+      </div>
+     """
+
+  onPlay: =>
+    @$('.video_control').removeClass('play').addClass('pause').html('Pause')
+
+  onPause: =>
+    @$('.video_control').removeClass('pause').addClass('play').html('Play')
+
+  togglePlayback: (event) =>
+    event.preventDefault()
+    if $(event.target).hasClass('play')
+      $(@player).trigger('play')
+    else
+      $(@player).trigger('pause')

templates/coffee/src/modules/video/video_player.coffee

@@ -2,7 +2,7 @@ class VideoPlayer
   constructor: (@video) ->
     @currentTime = 0
     @element = $("#video_#{@video.id}")
-    @buildPlayer()
+    @render()
     @bind()
 
   $: (selector) ->
@@ -10,11 +10,13 @@ class VideoPlayer
 
   bind: ->
     $(@).bind('seek', @onSeek)
-    $(@).bind('updatePlayTime', @onUpdatePlayTime)
-    $(@).bind('speedChange', @onSpeedChange)
+      .bind('updatePlayTime', @onUpdatePlayTime)
+      .bind('speedChange', @onSpeedChange)
+      .bind('play', @onPlay)
+      .bind('pause', @onPause)
+      .bind('ended', @onPause)
     $(document).keyup @bindExitFullScreen
 
-    @$('.video_control').click @togglePlayback
     @$('.add-fullscreen').click @toggleFullScreen
     @addToolTip unless onTouchBasedDevice()
 
@@ -22,7 +24,8 @@ class VideoPlayer
     if @element.hasClass('fullscreen') && event.keyCode == 27
       @toggleFullScreen(event)
 
-  buildPlayer: ->
+  render: ->
+    new VideoControl(this)
     new VideoCaption(this, @video.youtubeId('1.0'))
     new VideoSpeedControl(this, @video.speeds)
     new VideoProgressSlider(this)
@@ -53,26 +56,20 @@ class VideoPlayer
   onStateChange: (event) =>
     switch event.data
       when YT.PlayerState.PLAYING
-        if window.player && window.player != @player
-          window.player.pauseVideo()
-        window.player = @player
-        @onPlay()
+        $(@).trigger('play')
       when YT.PlayerState.PAUSED
-        if window.player == @player
-          window.player = null
-        @onPause()
+        $(@).trigger('pause')
       when YT.PlayerState.ENDED
-        if window.player == @player
-          window.player = null
-        @onPause()
+        $(@).trigger('ended')
 
-  onPlay: ->
-    @$('.video_control').removeClass('play').addClass('pause').html('Pause')
+  onPlay: =>
+    window.player.pauseVideo() if window.player && window.player != @player
+    window.player = @player
     unless @player.interval
       @player.interval = setInterval(@update, 200)
 
-  onPause: ->
-    @$('.video_control').removeClass('pause').addClass('play').html('Play')
+  onPause: =>
+    window.player = null if window.player == @player
     clearInterval(@player.interval)
     @player.interval = null
 
@@ -109,13 +106,6 @@ class VideoPlayer
       @$(".vidtime").html(progress)
       @progress = progress
 
-  togglePlayback: (event) =>
-    event.preventDefault()
-    if $(event.target).hasClass('play')
-      @play()
-    else
-      @pause()
-
   toggleFullScreen: (event) =>
     event.preventDefault()
     if @element.hasClass('fullscreen')

templates/coffee/src/modules/video/video_speed_control.coffee

 class VideoSpeedControl
   constructor: (@player, @speeds) ->
-    @build()
+    @render()
     @bind()
 
   $: (selector) ->
@@ -18,7 +18,17 @@ class VideoSpeedControl
         event.preventDefault()
         $(this).removeClass('open')
 
-  build: ->
+  render: ->
+    @$('.secondary-controls').prepend """
+      <div class="speeds">
+        <a href="#">
+          <h3>Speed</h3>
+          <p class="active"></p>
+        </a>
+        <ol class="video_speeds"></ol>
+      </div>
+      """
+
     $.each @speeds, (index, speed) =>
       link = $('<a>').attr(href: "#").html("#{speed}x")
       @$('.video_speeds').prepend($('<li>').attr('data-speed', speed).html(link))

templates/video.html

@@ -9,35 +9,8 @@
         <div id="${id}"></div>
       </section>
 
-      <section class="video-controls">
-        <div class="slider"></div>
-        <div>
-          <ul class="vcr">
-            <li><a class="video_control play">Play</a></li>
-            <li>
-              <div class="vidtime">0:00 / 0:00</div>
-            </li>
-          </ul>
-
-          <div class="secondary-controls">
-            <div class="speeds">
-              <a href="#">
-                <h3>Speed</h3>
-                <p class="active"></p>
-              </a>
-              <ol class="video_speeds"></ol>
-            </div>
-
-            <a href="#" class="add-fullscreen" title="Fill browser">Fill Browser</a>
-            <a href="#" class="hide-subtitles" title="Turn off captions">Captions</a>
-          </div>
-        </div>
-      </section>
+      <section class="video-controls"></section>
     </article>
-
-    <ol class="subtitles">
-      <li>Attempting to load captions...</li>
-    </ol>
   </div>
 </div>