'
- time = '
'
+ toggle = ' =>|| '
+ progress = ''
+ time = ''
@$el.append(toggle)
@$el.append(progress)
@@ -37,13 +45,20 @@ class AsciiIo.HudView extends Backbone.View
@setProgress progress
setProgress: (percent) ->
- @$('.gutter').width("#{percent}%")
+ arrowWidth = Math.floor((percent / 100.0) * (@progressWidth - 3))
+ arrowWidth = 1 if arrowWidth < 1
+
+ if arrowWidth != @lastArrowWidth
+ arrow = '='.times(arrowWidth) + '>'
+ filler = ' '.times(@progressWidth - 3 - arrowWidth)
+ @$('.progress').text('[' + arrow + filler + ']')
+ @lastArrowWidth = arrowWidth
formattedTime: (time) ->
secondsTotal = time / 1000
minutes = (secondsTotal / 60).toFixed(0)
seconds = (secondsTotal % 60).toFixed(0)
- "#{@pad2(minutes)}:#{@pad2(seconds)}"
+ " #{@pad2(minutes)}:#{@pad2(seconds)} "
pad2: (number) ->
if number < 10
diff --git a/app/assets/javascripts/player/player_view.js.coffee b/app/assets/javascripts/player/player_view.js.coffee
index ebfccc1..f5200d4 100644
--- a/app/assets/javascripts/player/player_view.js.coffee
+++ b/app/assets/javascripts/player/player_view.js.coffee
@@ -21,15 +21,17 @@ class AsciiIo.PlayerView extends Backbone.View
@createChildViews()
createChildViews: ->
+ @$el.addClass('not-started')
@$el.append(@rendererView.$el)
@rendererView.afterInsertedToDom()
@showLoadingIndicator()
- @hudView = new AsciiIo.HudView()
+ @hudView = new AsciiIo.HudView(cols: this.options.cols)
@$el.append(@hudView.$el)
onStartPromptClick: ->
@hideToggleOverlay()
+ @$el.removeClass('not-started')
@movie.togglePlay()
onMovieLoaded: (asciicast) ->
diff --git a/app/assets/stylesheets/player.css.scss b/app/assets/stylesheets/player.css.scss
index ffd239f..69877dc 100644
--- a/app/assets/stylesheets/player.css.scss
+++ b/app/assets/stylesheets/player.css.scss
@@ -33,7 +33,19 @@ $color5: #EDC951;
// margin: 0px 0px 30px 20px;
position: relative;
- .terminal, .font-sample {
+ &.not-started .hud .toggle {
+ background-color: $color4;
+
+ .play {
+ display: inline;
+ }
+
+ .pause {
+ display: none;
+ }
+ }
+
+ .terminal, .font-sample, .hud {
font-family: 'Bitstream Vera Sans Mono', 'Courier New', monospace;
font-size: 12px;
line-height: inherit;
@@ -89,51 +101,53 @@ $color5: #EDC951;
}
.hud {
- background-color: #333;
+ padding: 0;
+ margin: 0;
+ border: 0;
+ background-color: #eee;
opacity: 0;
position: absolute;
- left: 0px;
- right: 0px;
- bottom: 0px;
- height: 30px;
- color: white;
- font-weight: bold;
- font-family: monospace;
+ left: 2px;
+ right: 2px;
+ bottom: 2px;
+ color: black;
-webkit-transition: opacity 0.3s ease-in-out;
.toggle {
- background-color: $color1;
- width: 30px;
- height: 100%;
- float: left;
+ background-color: black;
+ color: white;
cursor: pointer;
+ .play {
+ display: none;
+ }
+
+ .pause {
+ display: inline;
+ }
+
&.paused {
background-color: $color4;
+
+ .play {
+ display: inline;
+ }
+
+ .pause {
+ display: none;
+ }
}
+
}
.progress {
- background-color: $color2;
- width: 60%;
- // height: 100%;
- float: left;
- // cursor: pointer;
-
- // .gutter {
- // background-color: $color5;
- // width: 0px;
- // height: 100%;
- // }
+ color: black;
}
.time {
- background-color: $color3;
- width: 30%;
- height: 100%;
- float: left;
- text-align: center;
+ background-color: black;
+ color: white;
}
}