Add track with drag-n-drop

app/assets/javascripts/player.coffee

@@ -49,30 +49,31 @@ class window.Player
         self.setTrack next
     false
   
-  addTrack: (item, autoplay) ->
+  addTrack: (track, autoplay) ->
-    if typeof item in ["number", "string"]
+    if typeof track in ["number", "string"]
-      item = @library[item]
+      track = @library[track]
     if not autoplay?
       autoplay = false
     initial_count = $('.playlist li').length
-    len = parseInt(item.length, 10)
+    $('.playlist').append this.generateTrackHtml track
-    m = Math.floor(len / 60)
+    $('.playlist').sortable "refresh"
-    s = len - Math.floor(len / 60) * 60
-    duration = m + ':' + (if s < 10 then '0' else '') + s
-    item_class = (if item.available == false then 'unavailable' else '')
-    $('.playlist').append "
-    <li id='i#{Math.round(Math.random() * 999999)}' data-id='#{item.id}' class='#{item_class}'>
-      <div class='song-duration'>#{duration}</div>
-      <div class='label important remove'>remove</div>
-      <div class='artist-name'><a class='data artist'>#{item.artist}</a></div>
-      <div class='song-title'>#{item.name}</div>
-    </li>"
-    _player.playlist.push item
-    $('.playlist').sortable axis: 'y', cursor: 'move'
     if initial_count == 0 and not _player.hasTrack()
       _player.setTrack($('.playlist li').first().attr('id').split('i')[1])
     false
   
+  generateTrackHtml: (track) ->
+    len = parseInt(track.length, 10)
+    m = Math.floor(len / 60)
+    s = len - Math.floor(len / 60) * 60
+    duration = m + ':' + (if s < 10 then '0' else '') + s
+    item_class = (if track.available == false then 'unavailable' else '')
+    "<li id='i#{Math.round(Math.random() * 999999)}' data-id='#{track.id}' class='#{item_class}'>
+      <div class='song-duration'>#{duration}</div>
+      <div class='label important remove'>remove</div>
+      <div class='artist-name'><a class='data artist'>#{track.artist}</a></div>
+      <div class='song-title'>#{track.name}</div>
+    </li>"
+  
   getDataFromLi: (obj) ->
     id = $(obj).attr 'data-id'
     track_name = $(obj).find('.trackname').html()
@@ -207,6 +208,9 @@ class window.Player
     if data.tracks?
       for track in data.tracks
         @library[track.id] = track
+    $('.track').draggable
+      helper: 'clone'
+      connectToSortable: '.playlist'
     false
 
 
@@ -242,6 +246,25 @@ $('.do_empty').live 'click', ->
 
 # Playlist Actions
 
+$ ->
+  $('.playlist').sortable
+    distance: 5
+    axis: 'y'
+    cursor: 'move'
+    stop: (e, ui) ->
+      if $(ui.item).prop("tagName") == "TR"
+        ui.item.replaceWith(_player.generateTrackHtml(_player.library[$(ui.item).find('.s-add').data('id')]))
+      false
+  $('.playlist').droppable
+    accept: '.track'
+    drop: (e, ui) ->
+      $(this).sortable "refresh"
+      window.setTimeout ->
+        $('.playlist tr.track').remove()
+      , 0
+      false
+  false
+
 $('.playlist li .remove').live 'click', (e) ->
   $li = $(this).parent()
   if $li.hasClass 'now'

app/assets/stylesheets/player.scss

@@ -80,6 +80,7 @@
 
 .playlist {
   margin: 20px 0 0 0;
+  min-height: 300px;
   li {
     list-style: none;
     background-color: #ffffff;
@@ -117,4 +118,11 @@
       }
     }
   }
+  tr.track {
+    display: block !important;
+    background-color: #fff;
+    width: 280px;
+    height: 47px;
+    visibility: hidden !important;
+  }
 }

app/views/artist/_page.html.haml

@@ -40,7 +40,7 @@
         %small= " ("+album[:year].to_s+")"
       %table.zebra-striped.tracklist
         - album[:tracks].each do |track|
-          %tr{ class: (track[:available] == false ? "unavailable" : nil) }
+          %tr.track{ class: (track[:available] == false ? "unavailable" : nil) }
             %td.song-title= track[:name]
             %td.song-duration
               .s-duration= (track[:duration] != '0:00' ? track[:duration] : ' '.html_safe)

app/views/playlist/_tracks.html.haml

@@ -8,7 +8,7 @@
     %h3= @data[:name]
     %table.zebra-striped.tracklist
       - @data[:tracks].each do |track|
-        %tr{ class: (track[:available] == false ? "unavailable" : nil) }
+        %tr.track{ class: (track[:available] == false ? "unavailable" : nil) }
           %td.album-pic
             %img{ src: track[:album_pic]}
           %td.song-title

public/templates/about.html

@@ -1,3 +0,0 @@
-<div class="textpage">
-	Now back to the good part!
-</div>

public/templates/search.html

@@ -1,14 +0,0 @@
-<div class="search-container">
-	<form action="" method="post" id="search_form">
-		<input type="text" id="search_field"/>
-		<input type="submit" value="" id="search_button" class="button gray big" data-ls="SEARCH"/>
-	</form>
-	<img class="spinner" src="/images/loader.gif" alt=""/>
-	<div class="artist_loading failed" data-ls="ARTIST_LOADING_FAILED"></div>
-	<div class="artist_loading ok" data-ls="ARTIST_LOADING_IN_PROCESS"></div>
-	<div class="artist_pics"></div>
-	<div class="suggestions">
-		<div data-ls="MISSPELLED"></div>
-		<ul></ul>
-	</div>
-</div>

public/templates/settings.html

@@ -1,48 +0,0 @@
-<div class="settings-container">
-	<div class="tabs">
-		<div class="left-space"></div>
-		<div class="tab" data-fieldset="account" data-ls="SETTINGS_ACCOUNT"></div>
-		<div class="middle-space"></div>
-		<div class="tab" data-fieldset="lastfm" data-ls="SETTINGS_LASTFM"></div>
-	</div>
-	<div class="form-container"></div>
-	<div class="forms">
-		<div class="account">
-			<div class="form">
-				<div class="field">
-					<div class="label" data-ls="USERNAME"></div>
-					<div class="value"><input name="username" type="text"/></div>
-				</div>
-				<div class="field">
-					<div class="label" data-ls="EMAIL"></div>
-					<div class="value"><input name="email" type="text"/></div>
-				</div>
-				<div class="field">
-					<div class="label" data-ls="LANG"></div>
-					<div class="value">
-						<select name="lang">
-							<option value="ru">Русский</option>
-							<option value="en">English</option>
-						</select>
-					</div>
-				</div>
-				
-				<div class="save">
-					<div class="button gray" data-ls="USELESS_BUTTON"></div>
-				</div>
-			</div>
-			<div class="logout">
-				<div class="button red" id="vk_logout" data-ls="LOGOUT"></div>
-			</div>
-		</div>
-		<div class="lastfm">
-			<div class="form">
-				<div class="field">
-					<div class="label" data-ls="USERNAME"></div>
-					<div class="value"><input name="username" type="text" disabled="disabled" readonly="readonly" value="" data-ls="NOT_CONNECTED" /></div>
-					<div class="action-button"><div class="lastfm-connect button gray big" data-ls="CONNECT"></div></div>
-				</div>
-			</div>
-		</div>
-	</div>
-</div>

public/templates/whee.html

@@ -1,4 +0,0 @@
-<div id="error_page">
-	<h1>WHEE!</h1>
-	<span>We never known anything about this artist<br/>but now we found something interesting.<br/>Please come back in a minute.</span>
-</div>