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.
77 lines
1.9 KiB
CoffeeScript
77 lines
1.9 KiB
CoffeeScript
class AsciiIo.HudView extends Backbone.View
|
|
tagName: 'pre'
|
|
className: 'hud'
|
|
|
|
events:
|
|
'click .toggle': 'togglePlay'
|
|
'click .progress span': 'seek'
|
|
|
|
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('play-click')
|
|
|
|
seek: (e) ->
|
|
index = $(e.target).index()
|
|
percent = 100 * index / (@progressWidth - 2)
|
|
@trigger('seek-click', percent)
|
|
|
|
onPause: ->
|
|
@$('.toggle').addClass('paused')
|
|
|
|
onResume: ->
|
|
@$('.toggle').removeClass('paused')
|
|
|
|
updateTime: (time) ->
|
|
@$('.time').html(@formattedTime(time))
|
|
|
|
if @duration
|
|
progress = Math.round(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)
|
|
bar = arrow + filler
|
|
chars = _(bar.split('')).map (c) -> "<span>#{c}</span>"
|
|
html = chars.join('')
|
|
@$('.progress').html('[' + html + ']')
|
|
@lastArrowWidth = arrowWidth
|
|
|
|
formattedTime: (time) ->
|
|
secondsTotal = time / 1000
|
|
minutes = Math.floor(secondsTotal / 60)
|
|
seconds = Math.floor(secondsTotal % 60)
|
|
" #{@pad2(minutes)}:#{@pad2(seconds)} "
|
|
|
|
pad2: (number) ->
|
|
if number < 10
|
|
'0' + number
|
|
else
|
|
number
|