From 306c1619abfb8eb75d92af7f3244937d37baad97 Mon Sep 17 00:00:00 2001 From: Marcin Kulik Date: Sun, 11 Mar 2012 10:30:21 +0100 Subject: [PATCH] Pr0 play button --- app/assets/images/play-button-1.png | Bin 0 -> 5428 bytes app/assets/javascripts/player/movie.js.coffee | 5 +++-- .../javascripts/player/player_view.js.coffee | 4 +++- .../javascripts/player/terminal_view.js.coffee | 7 +++++++ app/assets/stylesheets/player.css.scss | 12 ++++++++++++ app/helpers/asciicasts_helper.rb | 7 +++++-- app/views/asciicasts/_asciicast.html.erb | 2 +- app/views/home/show.html.erb | 2 +- 8 files changed, 32 insertions(+), 7 deletions(-) create mode 100644 app/assets/images/play-button-1.png diff --git a/app/assets/images/play-button-1.png b/app/assets/images/play-button-1.png new file mode 100644 index 0000000000000000000000000000000000000000..bc81f5f9e28c3334afac0b1dc7ad57b796b4ca5f GIT binary patch literal 5428 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 W9pC1?MF_dV2{6<()~N+K#r_}YfQ3T< literal 0 HcmV?d00001 diff --git a/app/assets/javascripts/player/movie.js.coffee b/app/assets/javascripts/player/movie.js.coffee index 563a9ce..c7f7e94 100644 --- a/app/assets/javascripts/player/movie.js.coffee +++ b/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') diff --git a/app/assets/javascripts/player/player_view.js.coffee b/app/assets/javascripts/player/player_view.js.coffee index c4e287b..d09ee83 100644 --- a/app/assets/javascripts/player/player_view.js.coffee +++ b/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() diff --git a/app/assets/javascripts/player/terminal_view.js.coffee b/app/assets/javascripts/player/terminal_view.js.coffee index 0031e73..07d208a 100644 --- a/app/assets/javascripts/player/terminal_view.js.coffee +++ b/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('
') + + hideToggleOverlay: -> + @$('.start-prompt').remove() + renderLine: (n, data, cursorX) -> html = [] prevBrush = undefined diff --git a/app/assets/stylesheets/player.css.scss b/app/assets/stylesheets/player.css.scss index 6e90c07..2385c55 100644 --- a/app/assets/stylesheets/player.css.scss +++ b/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;*/ diff --git a/app/helpers/asciicasts_helper.rb b/app/helpers/asciicasts_helper.rb index fae75eb..3f7cbc0 100644 --- a/app/helpers/asciicasts_helper.rb +++ b/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 < $(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} }); }); diff --git a/app/views/asciicasts/_asciicast.html.erb b/app/views/asciicasts/_asciicast.html.erb index 5e50352..e49804f 100644 --- a/app/views/asciicasts/_asciicast.html.erb +++ b/app/views/asciicasts/_asciicast.html.erb @@ -11,4 +11,4 @@ <% end %>
-<%= player_script(asciicast) %> +<%= player_script(asciicast, :auto_play => local_assigns[:auto_play]) %> diff --git a/app/views/home/show.html.erb b/app/views/home/show.html.erb index 1b68ed0..9f1e9cd 100644 --- a/app/views/home/show.html.erb +++ b/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 } %>

<%= link_to 'Use it!', installation_path, :class => "btn btn-primary btn-large" %>