Refactor PlayerView and introduce Player

app/assets/javascripts/player.js

@@ -7,6 +7,7 @@
 //= require_tree ./player/views/renderers
 //= require player/views/hud_view
 //= require player/data_unpacker
+//= require player/player
 //= require player/views/player_view
 //= require player/workers/worker_object_proxy
 //= require player/workers/worker_proxy

app/assets/javascripts/player/player.js.coffee

@@ -0,0 +1,84 @@
+class AsciiIo.Player
+
+  constructor: (@options) ->
+    @model = @options.model
+
+    @createWorkerProxy()
+
+    @createView()
+    @createVT()
+    @createMovie()
+
+    @fetchModel()
+
+  createWorkerProxy: ->
+    @workerProxy = new AsciiIo.WorkerProxy(window.mainWorkerPath)
+
+  createView: ->
+    @view = new AsciiIo.PlayerView
+      el: @options.el
+      model: @model
+      cols: @options.cols
+      lines: @options.lines
+      hud: @options.hud
+      rendererClass: @options.rendererClass
+      snapshot: @options.snapshot
+
+  createVT: ->
+    @vt = @workerProxy.getObjectProxy 'vt'
+
+  createMovie: ->
+    @movie = @workerProxy.getObjectProxy 'movie'
+
+  fetchModel: ->
+    @model.fetch success: @onModelFetched
+
+  onModelFetched: =>
+    data = @model.get('escaped_stdout_data')
+    unpacker = new AsciiIo.DataUnpacker
+    unpacker.unpack data, @onModelDataUnpacked
+
+  onModelDataUnpacked: (data) =>
+    @model.set stdout_data: data
+    @onModelReady()
+
+  onModelReady: ->
+    @initWorkerProxy()
+    @bindEvents()
+    @view.onModelReady()
+
+    if @options.autoPlay
+      @movie.call 'play'
+    else
+      @view.showPlayOverlay()
+
+  initWorkerProxy: ->
+    @workerProxy.init
+      timing: @model.get 'stdout_timing_data'
+      stdout_data: @model.get 'stdout_data'
+      duration: @model.get 'duration'
+      speed: @options.speed
+      benchmark: @options.benchmark
+      cols: @options.cols
+      lines: @options.lines
+
+  bindEvents: ->
+    @view.on 'play-clicked', => @movie.call 'togglePlay'
+    @view.on 'seek-clicked', (percent) => @movie.call 'seek', percent
+
+    @vt.on 'cursor-visibility', (show) => @view.showCursor show
+
+    @movie.on 'started', => @view.onStateChanged 'playing'
+    @movie.on 'paused', => @view.onStateChanged 'paused'
+    @movie.on 'finished', => @view.onStateChanged 'finished'
+    @movie.on 'resumed', => @view.onStateChanged 'resumed'
+    @movie.on 'wakeup', => @view.restartCursorBlink()
+    @movie.on 'time', (time) => @view.updateTime time
+    @movie.on 'render', (state) => @view.renderState state
+
+    if @options.benchmark
+      @movie.on 'started', => @startedAt = (new Date).getTime()
+
+      @movie.on 'finished', =>
+        now = (new Date).getTime()
+        console.log "finished in #{(now - @startedAt) / 1000.0}s"

app/assets/javascripts/player/views/player_view.js.coffee

@@ -3,11 +3,9 @@ class AsciiIo.PlayerView extends Backbone.View
     'click .start-prompt': 'onStartPromptClick'
 
   initialize: (options) ->
-    @createMainWorker()
     @createRendererView()
-    @showLoadingIndicator()
     @createHudView() if options.hud
-    @fetchModel()
+    @showLoadingOverlay()
 
   createRendererView: ->
     @rendererView = new @options.rendererClass(
@@ -15,104 +13,70 @@ class AsciiIo.PlayerView extends Backbone.View
       lines: @options.lines
     )
 
-    @$el.append(@rendererView.$el)
+    @$el.append @rendererView.$el
     @rendererView.afterInsertedToDom()
     @rendererView.renderSnapshot @options.snapshot
 
   createHudView: ->
     @hudView = new AsciiIo.HudView(cols: @options.cols)
-    @$el.append @hudView.$el
-
-  fetchModel: ->
-    @model.fetch success: => @onModelFetched()
 
-  onModelFetched: ->
-    data = @model.get('escaped_stdout_data')
-    unpacker = new AsciiIo.DataUnpacker
-    unpacker.unpack data, @onDataUnpacked
+    @hudView.on 'play-click', => @onPlayClicked()
+    @hudView.on 'seek-click', (percent) => @onSeekClicked()
 
-  onDataUnpacked: (data) =>
-    @model.set stdout_data: data
-    @onModelReady()
+    @$el.append @hudView.$el
 
   onModelReady: ->
-    @hideLoadingIndicator()
-    @hudView.setDuration @model.get('duration') if @options.hud
-    @setupMainWorker()
-    @bindEvents()
-
-    if @options.autoPlay
-      @movie.call 'play'
-    else
-      @showToggleOverlay()
-
-  createMainWorker: ->
-    @workerProxy = new AsciiIo.WorkerProxy(window.mainWorkerPath)
-
-  setupMainWorker: ->
-    @workerProxy.init
-      timing: @model.get 'stdout_timing_data'
-      stdout_data: @model.get 'stdout_data'
-      duration: @model.get 'duration'
-      speed: @options.speed
-      benchmark: @options.benchmark
-      cols: @options.cols
-      lines: @options.lines
+    @hideLoadingOverlay()
+    @hudView.setDuration @model.get('duration') if @hudView
 
-    @movie = @workerProxy.getObjectProxy 'movie'
-    @vt = @workerProxy.getObjectProxy 'vt'
-
-  bindEvents: ->
-    @movie.on 'started', => @$el.addClass 'playing'
+  onStartPromptClick: ->
+    @hidePlayOverlay()
+    @onPlayClicked()
 
-    @movie.on 'finished', =>
-      @$el.removeClass 'playing'
-      @rendererView.stopCursorBlink()
+  onPlayClicked: ->
+    @trigger 'play-clicked'
 
-    @movie.on 'paused', =>
-      @$el.addClass 'paused'
-      @$el.removeClass 'playing'
-      @hudView.onPause() if @options.hud
+  onSeekClicked: (percent) ->
+    @trigger 'seek-clicked', percent
 
-    @movie.on 'resumed', =>
-      @$el.addClass 'playing'
-      @$el.removeClass 'paused'
-      @hudView.onResume() if @options.hud
+  showLoadingOverlay: ->
+    @$el.append('<div class="loading">')
 
-    @movie.on 'wakeup', => @rendererView.restartCursorBlink()
+  hideLoadingOverlay: ->
+    @$('.loading').remove()
 
-    if @options.hud
-      @movie.on 'time', (time) => @hudView.updateTime(time)
+  showPlayOverlay: ->
+    @$el.append('<div class="start-prompt"><div class="play-button"><div class="arrow">►</div></div></div>')
 
-    @movie.on 'render', (state) => @rendererView.push state
+  hidePlayOverlay: ->
+    @$('.start-prompt').remove()
 
-    @vt.on 'cursor:show', => @rendererView.showCursor true
-    @vt.on 'cursor:hide', => @rendererView.showCursor false
+  onStateChanged: (state) ->
+    @$el.removeClass('playing paused')
 
-    if @options.hud
-      @hudView.on 'play-click', => @movie.call 'togglePlay'
-      @hudView.on 'seek-click', (percent) => @movie.call 'seek', percent
+    switch state
+      when 'playing'
+        @$el.addClass 'playing'
 
-    if @options.benchmark
-      @movie.on 'started', =>
-        @startedAt = (new Date).getTime()
+      when 'finished'
+        @rendererView.stopCursorBlink()
 
-      @movie.on 'finished', =>
-        now = (new Date).getTime()
-        console.log "finished in #{(now - @startedAt) / 1000.0}s"
+      when 'paused'
+        @$el.addClass 'paused'
+        @hudView.onPause() if @hudView
 
-  onStartPromptClick: ->
-    @hideToggleOverlay()
-    @movie.call 'togglePlay'
+      when 'resumed'
+        @$el.addClass 'playing'
+        @hudView.onResume() if @hudView
 
-  showLoadingIndicator: ->
-    @$el.append('<div class="loading">')
+  renderState: (state) ->
+    @rendererView.push state
 
-  hideLoadingIndicator: ->
-    @$('.loading').remove()
+  updateTime: (time) ->
+    @hudView.updateTime time if @hudView
 
-  showToggleOverlay: ->
-    @$el.append('<div class="start-prompt"><div class="play-button"><div class="arrow">►</div></div></div>')
+  restartCursorBlink: ->
+    @rendererView.restartCursorBlink()
 
-  hideToggleOverlay: ->
-    @$('.start-prompt').remove()
+  showCursor: (show) ->
+    @rendererView.showCursor show

app/assets/javascripts/player/vt/vt.js.coffee

@@ -315,10 +315,10 @@ class AsciiIo.VT
   # ------ Cursor control
 
   showCursor: ->
-    @trigger 'cursor:show'
+    @trigger 'cursor-visibility', true
 
   hideCursor: ->
-    @trigger 'cursor:hide'
+    @trigger 'cursor-visibility', false
 
   # ----- Scroll control
 

app/helpers/asciicasts_helper.rb

@@ -15,7 +15,7 @@ module AsciicastsHelper
     return <<EOS.html_safe
 <script>
   $(function() {
-    window.player = new AsciiIo.PlayerView({
+    window.player = new AsciiIo.Player({
       el: $('.player'),
       cols: #{asciicast.terminal_columns},
       lines: #{asciicast.terminal_lines},