diff --git a/app/assets/images/loader.gif b/app/assets/images/loader.gif new file mode 100644 index 0000000..ba07179 Binary files /dev/null and b/app/assets/images/loader.gif differ diff --git a/app/assets/javascripts/player/player_view.js.coffee b/app/assets/javascripts/player/player_view.js.coffee index a0ca2e0..c4e287b 100644 --- a/app/assets/javascripts/player/player_view.js.coffee +++ b/app/assets/javascripts/player/player_view.js.coffee @@ -17,6 +17,7 @@ class AsciiIo.PlayerView extends Backbone.View createChildViews: -> @$el.append(@terminalView.$el) @terminalView.afterInsertedToDom() + @terminalView.showLoadingIndicator() @hudView = new AsciiIo.HudView() @$el.append(@hudView.$el) @@ -32,6 +33,7 @@ class AsciiIo.PlayerView extends Backbone.View @movie.seek(percent) @movie.on 'movie-loaded', (asciicast) => + @terminalView.hideLoadingIndicator() @hudView.setDuration(asciicast.get('duration')) @movie.on 'movie-playback-paused', => diff --git a/app/assets/javascripts/player/terminal_view.js.coffee b/app/assets/javascripts/player/terminal_view.js.coffee index 7fac04f..0031e73 100644 --- a/app/assets/javascripts/player/terminal_view.js.coffee +++ b/app/assets/javascripts/player/terminal_view.js.coffee @@ -45,6 +45,12 @@ class AsciiIo.TerminalView extends Backbone.View height = @$el.height() @$el.css(width: width + 'px', height: height + 'px') + showLoadingIndicator: -> + @$el.append('
') + + hideLoadingIndicator: -> + @$('.loading').remove() + renderLine: (n, data, cursorX) -> html = [] prevBrush = undefined diff --git a/app/assets/stylesheets/asciicasts.css.scss b/app/assets/stylesheets/asciicasts.css.scss index eaff551..4fbb50a 100644 --- a/app/assets/stylesheets/asciicasts.css.scss +++ b/app/assets/stylesheets/asciicasts.css.scss @@ -50,6 +50,18 @@ $color5: #EDC951; overflow-x: hidden; cursor: pointer; + .loading { + background-image: url(image-path('loader.gif')); + background-repeat: no-repeat; + background-position: center; + z-index: 10; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + } + .line { font-size: 12px; /* background-color: black;*/