Pr0 play button

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

@@ -2,7 +2,7 @@ class AsciiIo.Movie
   MIN_DELAY: 0.01
   SPEED: 1.0
 
-  constructor: (@model) ->
+  constructor: (@model, @autoPlay) ->
     @reset()
     @startTimeReporter()
     _.extend(this, Backbone.Events)
@@ -22,7 +22,8 @@ class AsciiIo.Movie
     @model.fetch
       success: =>
         @trigger('movie-loaded', @model)
-        @play()
+        if @autoPlay
+          @play()
 
   timing: ->
     @model.get('stdout_timing_data')

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

@@ -1,7 +1,7 @@
 class AsciiIo.PlayerView extends Backbone.View
 
   initialize: (options) ->
-    @movie = new AsciiIo.Movie(@model)
+    @movie = new AsciiIo.Movie(@model, options.autoPlay)
     @movie.load()
 
     @terminalView = new AsciiIo.TerminalView(
@@ -35,6 +35,8 @@ class AsciiIo.PlayerView extends Backbone.View
     @movie.on 'movie-loaded', (asciicast) =>
       @terminalView.hideLoadingIndicator()
       @hudView.setDuration(asciicast.get('duration'))
+      unless @options.autoPlay
+        @terminalView.showToggleOverlay()
 
     @movie.on 'movie-playback-paused', =>
       @hudView.onPause()

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

@@ -27,6 +27,7 @@ class AsciiIo.TerminalView extends Backbone.View
 
   onClick: ->
     @trigger('terminal-click')
+    @hideToggleOverlay()
 
   clearScreen: ->
     # this.lineData.length = 0;
@@ -51,6 +52,12 @@ class AsciiIo.TerminalView extends Backbone.View
   hideLoadingIndicator: ->
     @$('.loading').remove()
 
+  showToggleOverlay: ->
+    @$el.append('<div class="start-prompt">')
+
+  hideToggleOverlay: ->
+    @$('.start-prompt').remove()
+
   renderLine: (n, data, cursorX) ->
     html = []
     prevBrush = undefined

app/assets/stylesheets/player.css.scss

@@ -58,6 +58,18 @@ $color5: #EDC951;
       bottom: 0;
     }
 
+    .start-prompt {
+      background-image: url(image-path('play-button-1.png'));
+      background-repeat: no-repeat;
+      background-position: center;
+      z-index: 20;
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+    }
+
     .line {
       font-size: 12px;
       /* background-color: black;*/

app/helpers/asciicasts_helper.rb

@@ -26,7 +26,9 @@ module AsciicastsHelper
     time_ago_in_words(asciicast.created_at) + " ago"
   end
 
-  def player_script(asciicast)
+  def player_script(asciicast, options = {})
+    auto_play = options.key?(:auto_play) ? !!options[:auto_play] : false
+
     return <<EOS.html_safe
 <script>
   $(function() {
@@ -34,7 +36,8 @@ module AsciicastsHelper
       el: $('.player'),
       cols: #{asciicast.terminal_columns},
       lines: #{asciicast.terminal_lines},
-      model: new AsciiIo.Asciicast({ id: #{asciicast.id} })
+      model: new AsciiIo.Asciicast({ id: #{asciicast.id} }),
+      autoPlay: #{auto_play}
     });
   });
 </script>

app/views/asciicasts/_asciicast.html.erb

@@ -11,4 +11,4 @@
   <% end %>
 </div>
 
-<%= player_script(asciicast) %>
+<%= player_script(asciicast, :auto_play => local_assigns[:auto_play]) %>

app/views/home/show.html.erb

@@ -4,7 +4,7 @@
 
   <%= render :partial => 'asciicasts/asciicast',
              :object => @asciicast,
-             :locals => { :skip_description => true } %>
+             :locals => { :skip_description => true, :auto_play => false } %>
 
   <p>
     <%= link_to 'Use it!', installation_path, :class => "btn btn-primary btn-large" %>