Add 'playing' / 'paused' class to player element

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

@@ -4,15 +4,11 @@ class AsciiIo.PlayerView extends Backbone.View
 
   initialize: (options) ->
     @createMainWorker()
-    @prepareSelfView()
     @createRendererView()
     @showLoadingIndicator()
     @createHudView() if options.hud
     @fetchModel()
 
-  prepareSelfView: ->
-    @$el.addClass('not-started')
-
   createRendererView: ->
     @rendererView = new @options.rendererClass(
       cols:  @options.cols
@@ -69,12 +65,22 @@ class AsciiIo.PlayerView extends Backbone.View
     @movie = new AsciiIo.MovieWorkerProxy @worker, 'movie'
 
   bindEvents: ->
+    @movie.on 'started', => @$el.addClass 'playing'
+    @movie.on 'finished', => @$el.removeClass 'playing'
+
+    @movie.on 'paused', =>
+      @$el.addClass 'paused'
+      @$el.removeClass 'playing'
+      @hudView.onPause() if @options.hud
+
+    @movie.on 'resumed', =>
+      @$el.addClass 'playing'
+      @$el.removeClass 'paused'
+      @hudView.onResume() if @options.hud
+
     if @options.hud
-      @movie.on 'paused', => @hudView.onPause()
-      @movie.on 'resumed', => @hudView.onResume()
       @movie.on 'time', (time) => @hudView.updateTime(time)
 
-    @movie.on 'started', => @$el.removeClass('not-started')
     @movie.on 'render', (state) => @rendererView.render state
 
     @vt.on 'cursor:blink:restart', => @rendererView.restartCursorBlink()

app/assets/stylesheets/player/player.css.scss

@@ -28,18 +28,6 @@ $color5: #EDC951;
   margin: 0 auto;
   position: relative;
 
-  &.not-started .hud .toggle {
-    background-color: $color4;
-
-    .play {
-      display: inline;
-    }
-
-    .pause {
-      display: none;
-    }
-  }
-
   .terminal, .font-sample, .hud {
     @include terminal-font;
 
@@ -128,23 +116,11 @@ $color5: #EDC951;
       cursor: pointer;
 
       .play {
-        display: none;
-      }
-
-      .pause {
         display: inline;
       }
 
-      &.paused {
-        background-color: $color4;
-
-        .play {
-          display: inline;
-        }
-
-        .pause {
-          display: none;
-        }
+      .pause {
+        display: none;
       }
 
     }
@@ -164,6 +140,20 @@ $color5: #EDC951;
     }
   }
 
+  &.playing {
+    .hud .toggle {
+      background-color: $color4;
+
+      .play {
+        display: none;
+      }
+
+      .pause {
+        display: inline;
+      }
+    }
+  }
+
   &:hover .hud {
     opacity: 1.0;
   }
@@ -180,5 +170,4 @@ $color5: #EDC951;
   .fg13 { font-weight: bold }
   .fg14 { font-weight: bold }
   .fg15 { font-weight: bold }
-
 }