You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
68 lines
1.6 KiB
CoffeeScript
68 lines
1.6 KiB
CoffeeScript
class AsciiIo.HudView extends Backbone.View
|
|
tagName: 'pre'
|
|
className: 'hud'
|
|
|
|
events:
|
|
'click .toggle': 'togglePlay'
|
|
|
|
initialize: (options) ->
|
|
@duration = undefined
|
|
@cols = options.cols
|
|
@lastArrowWidth = undefined
|
|
@calculateElementWidths()
|
|
@createChildViews()
|
|
|
|
calculateElementWidths: ->
|
|
@toggleWidth = 4
|
|
@timeWidth = 7
|
|
@progressWidth = @cols - @toggleWidth - @timeWidth
|
|
|
|
createChildViews: ->
|
|
toggle = '<span class="toggle"> <span class="play">=></span><span class="pause">||</span> '
|
|
progress = '<span class="progress">'
|
|
time = '<span class="time">'
|
|
|
|
@$el.append(toggle)
|
|
@$el.append(progress)
|
|
@$el.append(time)
|
|
|
|
setDuration: (@duration) ->
|
|
|
|
togglePlay: ->
|
|
@trigger('hud-play-click')
|
|
|
|
onPause: ->
|
|
@$('.toggle').addClass('paused')
|
|
|
|
onResume: ->
|
|
@$('.toggle').removeClass('paused')
|
|
|
|
updateTime: (time) ->
|
|
@$('.time').html(@formattedTime(time))
|
|
|
|
if @duration
|
|
progress = 100 * time / 1000 / @duration
|
|
@setProgress progress
|
|
|
|
setProgress: (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: (number) ->
|
|
if number < 10
|
|
'0' + number
|
|
else
|
|
number
|