diff --git a/app/assets/javascripts/application.js.coffee b/app/assets/javascripts/application.js.coffee index a57a518..512174f 100644 --- a/app/assets/javascripts/application.js.coffee +++ b/app/assets/javascripts/application.js.coffee @@ -13,6 +13,7 @@ #= require backbone_datalink #= require backbone/beat_haven #= require locale/en +#= require locale/ru #= require bootstrap-dropdown #= require bootstrap-tooltip diff --git a/app/assets/javascripts/backbone/beat_haven.js.coffee b/app/assets/javascripts/backbone/beat_haven.js.coffee index 0b1c311..054c7f0 100644 --- a/app/assets/javascripts/backbone/beat_haven.js.coffee +++ b/app/assets/javascripts/backbone/beat_haven.js.coffee @@ -1,6 +1,8 @@ #= require_self +#= require_tree ./modules #= require_tree ./templates #= require_tree ./models +#= require_tree ./collections #= require_tree ./views #= require_tree ./routers #= require ./i18n diff --git a/app/assets/javascripts/backbone/models/player.js.coffee b/app/assets/javascripts/backbone/models/player.js.coffee index 23db47f..07ba2ac 100644 --- a/app/assets/javascripts/backbone/models/player.js.coffee +++ b/app/assets/javascripts/backbone/models/player.js.coffee @@ -6,9 +6,13 @@ class BeatHaven.Models.Player extends Backbone.Model move_it_mousedown: false initialize: -> - @playlist = new BeatHaven.Collections.Tracklist() + @playlist = new BeatHaven.Modules.Playlist() @tracks = new BeatHaven.Collections.Tracklist() + # + # Actions + # + play: (track) -> unless track? if @current_track? @@ -61,6 +65,20 @@ class BeatHaven.Models.Player extends Backbone.Model return false unless nodes.length > 0 @tracks.get(parseInt($(nodes[0]).data("id"), 10)).play() + # + # Playlist + # + + add_track_to_playlist: (track) -> + @playlist.add(track).render() + + remove_track_from_playlist: (track) -> + @playlist.remove(track).render() + + # + # Supportive + # + update_title: (params) -> $(".player .progress-bar .title").html("#{params.artists.join(', ')} — #{params.track}") diff --git a/app/assets/javascripts/backbone/models/track.js.coffee b/app/assets/javascripts/backbone/models/track.js.coffee index 9fa24cc..583473d 100644 --- a/app/assets/javascripts/backbone/models/track.js.coffee +++ b/app/assets/javascripts/backbone/models/track.js.coffee @@ -15,9 +15,9 @@ class BeatHaven.Models.Track extends Backbone.Model artists: @.get("artists") track: @.get("title") ) - unless @.get("sm_obj")? - this.add_to_library(autoload: true, autoplay: false) - BH.Player.play(this) + # unless @.get("sm_obj")? + # this.add_to_library(autoload: true, autoplay: false) + # BH.Player.play(this) $(".artist-page .tracks li[data-id]").removeClass("now-playing").removeClass("paused") this.node().addClass("now-playing") diff --git a/app/assets/javascripts/backbone/i18n.js.coffee b/app/assets/javascripts/backbone/modules/i18n.js.coffee similarity index 100% rename from app/assets/javascripts/backbone/i18n.js.coffee rename to app/assets/javascripts/backbone/modules/i18n.js.coffee diff --git a/app/assets/javascripts/backbone/modules/playlist.js.coffee b/app/assets/javascripts/backbone/modules/playlist.js.coffee new file mode 100644 index 0000000..2e68ff1 --- /dev/null +++ b/app/assets/javascripts/backbone/modules/playlist.js.coffee @@ -0,0 +1,6 @@ +class BeatHaven.Modules.Playlist + selector: ".playlist" + tracks: null + + initialize: -> + @tracks = new BeatHaven.Collections.Tracklist() diff --git a/app/assets/javascripts/backbone/autocomplete.js.coffee b/app/assets/javascripts/bindings/autocomplete.js.coffee similarity index 100% rename from app/assets/javascripts/backbone/autocomplete.js.coffee rename to app/assets/javascripts/bindings/autocomplete.js.coffee diff --git a/app/assets/javascripts/bindings/player.js.coffee b/app/assets/javascripts/bindings/player.js.coffee index 9cc2c86..dd4a1a8 100644 --- a/app/assets/javascripts/bindings/player.js.coffee +++ b/app/assets/javascripts/bindings/player.js.coffee @@ -7,6 +7,8 @@ $ -> BH.Player.pause() $(".player .controls .next").live "click", (e) -> BH.Player.next() + $(".player .controls .playlist-toggle").live "click", (e) -> + $(".playlist").toggle() $(".player .move-it") .live "mousedown", (e) -> diff --git a/app/assets/javascripts/bindings/playlist.js.coffee b/app/assets/javascripts/bindings/playlist.js.coffee new file mode 100644 index 0000000..ae905be --- /dev/null +++ b/app/assets/javascripts/bindings/playlist.js.coffee @@ -0,0 +1,5 @@ +$ -> + $(".album-play").live "mouseup", (e) -> + $(this).parents(".album").find(".tracks li:first .track-play").trigger("mouseup") + $(".album-add").live "mouseup", (e) -> + $(this).parents(".album").find(".tracks li .track-add").trigger("mouseup") diff --git a/app/assets/javascripts/bindings/track.js.coffee b/app/assets/javascripts/bindings/track.js.coffee index 7aa5dd7..1efadb2 100644 --- a/app/assets/javascripts/bindings/track.js.coffee +++ b/app/assets/javascripts/bindings/track.js.coffee @@ -1,9 +1,16 @@ $ -> - $(".track-play").live "click", (e) -> + $(".track-play").live "mouseup", (e) -> e.preventDefault() id = parseInt($(this).parent().data("id"), 10) + BH.Player.playlist_on = false BH.Player.tracks.get(id).play() - $(".track-pause").live "click", (e) -> + + $(".track-pause").live "mouseup", (e) -> e.preventDefault() id = parseInt($(this).parent().data("id"), 10) BH.Player.tracks.get(id).pause() + + $(".track-add").live "mouseup", (e) -> + e.preventDefault() + id = parseInt($(this).parent().data("id"), 10) + diff --git a/app/assets/stylesheets/application.css.scss b/app/assets/stylesheets/application.css.scss index 0dc7d61..b561cd2 100644 --- a/app/assets/stylesheets/application.css.scss +++ b/app/assets/stylesheets/application.css.scss @@ -38,7 +38,7 @@ body { } a.brand { margin-top: 1px; - font-family: "Lobster Two", $georgia; + font-family: "Lobster Two", $helvetica; font-style: italic; font-size: 24px; color: #fafafa; diff --git a/app/assets/stylesheets/artist.css.scss b/app/assets/stylesheets/artist.css.scss index 2f5185b..caae2ae 100644 --- a/app/assets/stylesheets/artist.css.scss +++ b/app/assets/stylesheets/artist.css.scss @@ -1,8 +1,10 @@ .artist-page { h1 { - font-family: "Lobster Two", Georgia, serif; - font-weight: 700; - font-size: 42px; + font: { + family: "Lobster Two", $helvetica; + weight: 700; + size: 42px; + } line-height: 64px; letter-spacing: 1px; text-shadow: 0 0 1px rgba(0, 0, 0, .3); @@ -18,16 +20,18 @@ img { width: 250px; margin-top: 5px; - border-size: 1px; - border-style: solid; - border-color: rgba(255, 255, 255, .2); - border-radius: 5px; + border: { + size: 1px; + style: solid; + color: rgba(255, 255, 255, .2); + radius: 5px; + } @include box-shadow(0 0 3px 1px hsla(0, 0%, 0%, 0.3)); } } .bio { margin-left: 270px; - font-family: "Source Sans Pro", Helvetica, sans-serif; + font-family: "Source Sans Pro", $helvetica; font-size: 22px; line-height: 26px; text-shadow: 1px 1px 0 rgba(0, 0, 0, .1); @@ -39,9 +43,11 @@ margin-bottom: 30px; h2 { - font-family: "Lobster Two", Georgia, Serif; - font-weight: 700; - font-size: 26px; + font: { + family: "Lobster Two", $helvetica; + weight: 700; + size: 26px; + } text-shadow: 0 0 1px rgba(0, 0, 0, .3); } .pic { @@ -54,10 +60,12 @@ width: 250px; height: 250px; margin-top: 5px; - border-size: 1px; - border-style: solid; - border-color: rgba(255, 255, 255, .2); - border-radius: 5px; + border: { + size: 1px; + style: solid; + color: rgba(255, 255, 255, .2); + radius: 5px; + } @include box-shadow(0 0 3px 1px hsla(0, 0%, 0%, 0.3)); margin-bottom: 10px; } diff --git a/app/assets/stylesheets/playlist.css.scss b/app/assets/stylesheets/playlist.css.scss index 2709720..8650236 100644 --- a/app/assets/stylesheets/playlist.css.scss +++ b/app/assets/stylesheets/playlist.css.scss @@ -1,16 +1,35 @@ .playlist { - display: block; + display: none; position: absolute; - top: 50px; + top: 41px; right: 50%; width: 618px; margin-right: -430px; - padding: 5px 0; - background-color: red; + padding: 7px 0 3px 0; + background-color: #124ba8; + border: { + width: 1px; + color: #123b98; + style: solid; + bottom-right-radius: 6px; + bottom-left-radius: 6px; + } + @include box-shadow(inset 0 0 4px rgba(0, 0, 0, .5)); li { display: block; overflow: hidden; + color: #d0d0d0; + line-height: 20px; + + &.active { + color: #ffffff; + background-color: rgba(255, 255, 255, .3); + } + &:hover { + background-color: rgba(255, 255, 255, .1); + cursor: pointer; + } .inner { width: 10000px; @@ -26,7 +45,7 @@ } .length { position: absolute; - left: 580px; + right: 9391px; } } } diff --git a/app/views/application/_playlist.html.haml b/app/views/application/_playlist.html.haml index 8b4bcb7..ed12d24 100644 --- a/app/views/application/_playlist.html.haml +++ b/app/views/application/_playlist.html.haml @@ -4,7 +4,7 @@ %span.artists Foo Fighters %span.title This Is a Call %span.length 3:53 - %li + %li.active .inner %span.artists Foo Fighters %span.title I'll Stick Around