Render in webkitRequestAnimationFrame callback

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

@@ -80,14 +80,13 @@ class AsciiIo.PlayerView extends Backbone.View
     if @options.hud
       @movie.on 'time', (time) => @hudView.updateTime(time)
 
-    @movie.on 'render', (state) => @rendererView.render state
+    @movie.on 'render', (state) => @rendererView.push state
 
     @vt.on 'cursor:blink:restart', => @rendererView.restartCursorBlink()
     @vt.on 'cursor:blink:stop', => @rendererView.stopCursorBlink()
     @vt.on 'cursor:show', => @rendererView.showCursor true
     @vt.on 'cursor:hide', => @rendererView.showCursor false
 
-<<<<<<< HEAD
     if @options.hud
       @hudView.on 'play-click', => @movie.call 'togglePlay'
       @hudView.on 'seek-click', (percent) => @movie.call 'seek', percent

app/assets/javascripts/player/views/renderers/base.js.coffee

@@ -7,15 +7,34 @@ class AsciiIo.Renderer.Base extends Backbone.View
     @lines = options.lines
     @showCursor true
     @startCursorBlink()
+    @clearState()
+    webkitRequestAnimationFrame @render
+
+  clearState: ->
+    @state =
+      changes: {}
+      cursorX: undefined
+      cursorY: undefined
+      dirty: false
 
   onClick: ->
     @trigger('terminal-click')
 
-  render: (state) ->
-    for n, fragments of state.changes
-      c = if parseInt(n) is state.cursorY then state.cursorX else undefined
+  push: (state) ->
+    _(@state.changes).extend state.changes
+    @state.cursorX = state.cursorX
+    @state.cursorY = state.cursorY
+    @state.dirty = true
+
+  render: =>
+    webkitRequestAnimationFrame @render
+
+    for n, fragments of @state.changes
+      c = if parseInt(n) is @state.cursorY then @state.cursorX else undefined
       @renderLine n, fragments || [], c
 
+    @clearState()
+
   renderLine: (n, data, cursorX) ->
     throw '#renderLine not implemented'
 

app/assets/javascripts/player/views/renderers/pre.js.coffee

@@ -23,9 +23,11 @@ class AsciiIo.Renderer.Pre extends AsciiIo.Renderer.Base
 
     @$el.css(width: width + 'px', height: height + 'px')
 
-  render: (state) ->
-    @$el.find('.cursor').removeClass('cursor')
-    super state
+  render: ->
+    if @state.dirty
+      @$el.find('.cursor').removeClass('cursor')
+
+    super
 
   renderLine: (n, fragments, cursorX) ->
     html = []

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

@@ -47,7 +47,7 @@ addEventListener 'message', (e) =>
 
     now = (new Date()).getTime()
 
-    if now - lastRenderTime > 40
+    if true #or now - lastRenderTime > 40
       state = vt.state()
       vt.clearChanges()
       movie.trigger 'render', state