Playlist draft

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

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

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}")
 

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")?
+    # unless @.get("sm_obj")?
-      this.add_to_library(autoload: true, autoplay: false)
+    #   this.add_to_library(autoload: true, autoplay: false)
-    BH.Player.play(this)
+    # BH.Player.play(this)
     $(".artist-page .tracks li[data-id]").removeClass("now-playing").removeClass("paused")
     this.node().addClass("now-playing")
 

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()

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) ->

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")

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)
+

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;

app/assets/stylesheets/artist.css.scss

@@ -1,8 +1,10 @@
 .artist-page {
   h1 {
-    font-family: "Lobster Two", Georgia, serif;
+    font: {
-    font-weight: 700;
+      family: "Lobster Two", $helvetica;
-    font-size: 42px;
+      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: {
-        border-style: solid;
+          size: 1px;
-        border-color: rgba(255, 255, 255, .2);
+          style: solid;
-        border-radius: 5px;
+          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: {
-      font-weight: 700;
+        family: "Lobster Two", $helvetica;
-      font-size: 26px;
+        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: {
-        border-style: solid;
+          size: 1px;
-        border-color: rgba(255, 255, 255, .2);
+          style: solid;
-        border-radius: 5px;
+          color: rgba(255, 255, 255, .2);
+          radius: 5px;
+        }
         @include box-shadow(0 0 3px 1px hsla(0, 0%, 0%, 0.3));
         margin-bottom: 10px;
       }

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;
+  padding: 7px 0 3px 0;
-  background-color: red;
+  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;
       }
     }
   }

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