From 361933e1bb7736db1d0e6c6ba985cc036ce9471d Mon Sep 17 00:00:00 2001 From: Dan Barber Date: Mon, 9 Dec 2013 16:57:42 +0000 Subject: [PATCH] Add scrubber. --- assets/css/controls.css.sass | 18 -------------- assets/css/mpd-client.css.sass | 2 +- assets/css/queue.css.sass | 8 +++++++ assets/css/transport.css.sass | 42 +++++++++++++++++++++++++++++++++ assets/js/constructs/events.js | 3 +++ assets/js/controls/queue.js | 11 +++++---- assets/js/controls/transport.js | 7 +++++- assets/js/helpers/time.js | 10 ++++++++ assets/js/mpd-client.js | 1 + models/song.rb | 3 ++- mpd_client.rb | 2 +- public/views/queue.ejs | 1 + public/views/transport.ejs | 11 ++++++++- 13 files changed, 92 insertions(+), 27 deletions(-) delete mode 100644 assets/css/controls.css.sass create mode 100644 assets/css/transport.css.sass create mode 100644 assets/js/helpers/time.js diff --git a/assets/css/controls.css.sass b/assets/css/controls.css.sass deleted file mode 100644 index e0cbea5..0000000 --- a/assets/css/controls.css.sass +++ /dev/null @@ -1,18 +0,0 @@ -#transport - position: fixed - bottom: 0 - width: 20em - background: rgba(248, 248, 248, 0.9) - border-top: 1px solid rgba(0, 0, 0, 0.1) - text-align: center - button - @extend .icon - font-size: 2em - width: 23% - padding: 0.5em - text-align: center - border: none - background: none - color: black - &:hover, &:focus - text-shadow: 0 0 10px rgba(255, 255, 255, 1) diff --git a/assets/css/mpd-client.css.sass b/assets/css/mpd-client.css.sass index a38c4fc..cc80617 100644 --- a/assets/css/mpd-client.css.sass +++ b/assets/css/mpd-client.css.sass @@ -3,5 +3,5 @@ @import 'includes/fonts' @import 'includes/colours' @import 'common' -@import 'controls' +@import 'transport' @import 'queue' diff --git a/assets/css/queue.css.sass b/assets/css/queue.css.sass index d98232e..a549fe8 100644 --- a/assets/css/queue.css.sass +++ b/assets/css/queue.css.sass @@ -16,6 +16,12 @@ white-space: nowrap overflow: hidden text-overflow: ellipsis + .length + position: absolute + font-size: 0.8em + padding: 0.6em 0 + right: 10px + top: 10px li position: relative padding: 10px @@ -39,3 +45,5 @@ top: 10px padding: 0.3em content: "playing" + .length + display: none diff --git a/assets/css/transport.css.sass b/assets/css/transport.css.sass new file mode 100644 index 0000000..d240d7c --- /dev/null +++ b/assets/css/transport.css.sass @@ -0,0 +1,42 @@ +#transport + position: fixed + bottom: 0 + width: 20em + background: rgba(248, 248, 248, 0.95) + border-top: 1px solid rgba(0, 0, 0, 0.1) + text-align: center + button + @extend .icon + font-size: 2em + width: 23% + padding: 0.5em + text-align: center + border: none + background: none + color: black + &:hover, &:focus + text-shadow: 0 0 10px rgba(255, 255, 255, 1) + + .scrubber + @include clearfix + padding: 0.5em 25px 0 + .time + font-size: 0.8em + .elapsed + float: left + .total + float: right + + .track + position: relative + width: 70% + margin: 0.25em auto + height: 7px + background: rgba(127, 127, 127, 0.2) + .marker + position: absolute + background: #FD2D57 + margin-left: -1px + margin-top: -4px + width: 2px + height: 15px diff --git a/assets/js/constructs/events.js b/assets/js/constructs/events.js index 99cf920..c164285 100644 --- a/assets/js/constructs/events.js +++ b/assets/js/constructs/events.js @@ -14,6 +14,9 @@ var Events = can.Construct.extend({ case 'queue': queue.replace(response.data); break; + case 'time': + status.attr('time', response.data); + break; } } diff --git a/assets/js/controls/queue.js b/assets/js/controls/queue.js index d355565..3fcc815 100644 --- a/assets/js/controls/queue.js +++ b/assets/js/controls/queue.js @@ -1,10 +1,13 @@ var Queue = can.Control.extend({ init: function(element, options) { - element.html(can.view('views/queue.ejs', { - queueSongs: options.queueSongs, - status: options.status - })); + element.html( + can.view('views/queue.ejs', { + queueSongs: options.queueSongs, + status: options.status + }, + { formatLength: timeHelpers.formatLength } + )); }, playSong: function(pos) { diff --git a/assets/js/controls/transport.js b/assets/js/controls/transport.js index bcc8a9c..e4a1dcf 100644 --- a/assets/js/controls/transport.js +++ b/assets/js/controls/transport.js @@ -2,7 +2,12 @@ var Transport = can.Control.extend({ init: function(element, options) { this.status = options.status; - element.html(can.view('views/transport.ejs', { status: this.status })); + element.html( + can.view( + 'views/transport.ejs', { status: this.status }, + { formatLength: timeHelpers.formatLength } + ) + ); }, updateStatus: function(status) { diff --git a/assets/js/helpers/time.js b/assets/js/helpers/time.js new file mode 100644 index 0000000..0c60b5b --- /dev/null +++ b/assets/js/helpers/time.js @@ -0,0 +1,10 @@ +window.timeHelpers = { + formatLength: function(length) { + var minutes = Math.floor(length / 60); + var seconds = length % 60; + if (seconds < 10) { + seconds = '0' + seconds; + } + return minutes + ':' + seconds; + } +} diff --git a/assets/js/mpd-client.js b/assets/js/mpd-client.js index 76ec831..aac311c 100644 --- a/assets/js/mpd-client.js +++ b/assets/js/mpd-client.js @@ -3,6 +3,7 @@ //= require ./libs/can.ejs.js //= require_tree ./models/ +//= require_tree ./helpers/ //= require_tree ./controls/ //= require_tree ./constructs/ //= require ./router.js diff --git a/models/song.rb b/models/song.rb index 6b78e3f..331a8c3 100644 --- a/models/song.rb +++ b/models/song.rb @@ -1,12 +1,13 @@ require './models/mpd_connection' -class Song < Struct.new(:id, :artist, :album, :title, :pos, :playing) +class Song < Struct.new(:id, :artist, :album, :title, :length, :pos, :playing) def initialize(song, pos: nil, playing: false) self.id = song.id self.artist = song.artist self.album = song.album self.title = song.title + self.length = song.time self.pos = pos self.playing = playing end diff --git a/mpd_client.rb b/mpd_client.rb index 4ec3612..bc16042 100644 --- a/mpd_client.rb +++ b/mpd_client.rb @@ -39,7 +39,7 @@ class MPDClient < Sinatra::Base end def self.send_time(elapsed, total) - response = JSON({ type: 'time', data: { elapsed: elapsed, total: total } }) + response = JSON({ type: 'time', data: [elapsed, total] }) settings.connections.each { |out| out << "data: #{response}\n\n" } end diff --git a/public/views/queue.ejs b/public/views/queue.ejs index 39c3710..8674709 100644 --- a/public/views/queue.ejs +++ b/public/views/queue.ejs @@ -3,6 +3,7 @@
  • >

    <%= song.attr('title') %>

    <%= song.attr('artist') %>

    +

    <%= formatLength(song.attr('length')) %>

    • <% }) %> diff --git a/public/views/transport.ejs b/public/views/transport.ejs index 68aaaab..08b556f 100644 --- a/public/views/transport.ejs +++ b/public/views/transport.ejs @@ -1,4 +1,13 @@ -