Font Awesome, jbuilder templates, getting rid of beatparser

app/assets/javascripts/application.js

@@ -1,15 +0,0 @@
-//= require jquery
-//= require jquery_ujs
-//= require jquery.autocomplete
-//= require soundmanager
-//= require vk_music
-//= require mustache
-//= require hogan
-//= require underscore
-//= require backbone
-//= require backbone_rails_sync
-//= require backbone_datalink
-//= require backbone/beat_haven
-//= require bootstrap-dropdown
-//= require_tree .
-

app/assets/javascripts/application.js.coffee

@@ -0,0 +1,21 @@
+#= require jquery
+#= require jquery_ujs
+#= require jquery.autocomplete
+
+#= require soundmanager
+#= require vk_music
+
+#= require hogan
+
+#= require underscore
+#= require backbone
+#= require backbone_rails_sync
+#= require backbone_datalink
+#= require backbone/beat_haven
+
+#= require bootstrap-dropdown
+#= require bootstrap-tooltip
+#= require bootstrap-popover
+
+#= require_tree .
+

app/assets/javascripts/backbone/autocomplete.js.coffee

@@ -7,6 +7,6 @@ $ ->
     $(".player").animate(width: 518)
 
   window.desired = $(".navbar-search input").autocomplete
-    serviceUrl: "/api/search/complete"
+    serviceUrl: "/api/search/complete.json"
     onSelect: (selected) ->
       Backbone.history.navigate("/search/"+selected.replace(/\s/g, "+"), true)

app/assets/javascripts/backbone/beat_haven.js.coffee

@@ -14,6 +14,7 @@ window.BeatHaven =
   User: null
 
   init: ->
+    new BeatHaven.Routers.Main()
     new BeatHaven.Routers.Artist()
     new BeatHaven.Routers.Album()
     new BeatHaven.Routers.Search()
@@ -21,7 +22,7 @@ window.BeatHaven =
     @User = new BeatHaven.Models.User()
     @VK = new BeatHaven.Models.VK()
 
-    @VK.init()
+    # @VK.init()
 
     Backbone.history.start(pushState: true);
     $("a").live "click", (e) ->
@@ -30,6 +31,8 @@ window.BeatHaven =
         Backbone.history.navigate($(this).attr("href"), true)
       false
 
+    # Backbone.history.navigate("/tour", true)
+
   log: (data) ->
     console.log data
 

app/assets/javascripts/backbone/models/vk.js.coffee

@@ -2,6 +2,7 @@ class BeatHaven.Models.VK extends Backbone.Model
 
   session_length: 3600 # seconds
   Music: null
+  BITMASK: 8
 
   popup: ->
     alert(1)
@@ -13,12 +14,13 @@ class BeatHaven.Models.VK extends Backbone.Model
     BH.VK.auth()
     # VK.Widgets.Like("vk-like", {type: "mini", height: 20, pageUrl: "http://beathaven.org/", text: "Like"})
 
-  auth: ->
+  auth: (callback) ->
     BH.log "Requesting new Vkontakte session ..."
     window.VK.Auth.getLoginStatus (response) ->
       BH.VK.auth_info(response)
+      callback() if callback?
       false
-    , 8
+    , window.BH.VK.BITMASK
     false
 
   auth_info: (response) ->
@@ -38,6 +40,7 @@ class BeatHaven.Models.VK extends Backbone.Model
     else
       BH.log "Not authorized"
 
+
   set_favorites: ->
     window.VK.Api.call "audio.get", uid: BH.User.vk_id(), (response) ->
       BH.User.set_favorites(response.response)

app/assets/javascripts/backbone/routers/artist_router.js.coffee

@@ -3,7 +3,7 @@ class BeatHaven.Routers.Artist extends Backbone.Router
     "artist/:name": "show"
 
   show: (name) ->
-    artist = new BeatHaven.Models.Artist(id: name)
+    artist = new BeatHaven.Models.Artist(id: name.replace(/\s|%2BF/g, "+"))
     artist.fetch()
     view = new BeatHaven.Views.ArtistShow(model: artist)
     $("#main").html(view.render().el)

app/assets/javascripts/backbone/routers/main_router.js.coffee

@@ -0,0 +1,7 @@
+class BeatHaven.Routers.Main extends Backbone.Router
+  routes:
+    "tour": "tour"
+
+  tour: ->
+    view = new BeatHaven.Views.MainTour()
+    $(".tour").html(view.render().el)

app/assets/javascripts/backbone/templates/artist/show.hamstache_

@@ -0,0 +1,36 @@
+.artist-page
+  %h1 {{ artist_title }}
+  .artist-info
+    .pic
+      %img{ src: "{{ artist_pic }}", alt: "{{ artist_title }}" }
+    .bio {{& artist_bio}}
+
+  .albums
+  {{#artist_albums}}
+    .album
+      .pic
+        %img{ src: "{{ album_pic }}", alt: "{{ album_title }}" }
+        %br
+        .bh-underlay-blue
+          %a.btn.btn-bh-dark.album-add{ href: "" }
+            %i.icon-plus.icon-white
+            Add to playlist
+        .bh-underlay-green
+          %a.btn.btn-bh-dark.album-play{ href: "" }
+            %i.icon-play.icon-white
+            Play
+
+      %h2.title {{ album_title }} ({{ album_year }})
+      %ul.tracks
+      {{# album_tracks }}
+        %li{ "data-id" => "{{ track_id }}" }
+          %a.btn.btn-round.track-play{ href: "" }
+            %i.icon-play
+          %a.btn.btn-round.track-pause{ href: "" }
+            %i.icon-pause
+          .title
+            .inner
+              %a.track-link{ href: "{{track_url}}" } {{ track_title }}
+          %span.length {{ track_length }}
+          %a.btn.btn-round.track-add{ href: "" }
+            %i.icon-plus

app/assets/javascripts/backbone/templates/artist/show.mustache

@@ -12,7 +12,7 @@
       <div class="pic">
         <img src="{{album_pic}}" alt="{{album_title}}"><br>
         <div class="bh-underlay-blue">
-          <a href="" class="btn btn-bh-dark album-add"><i class="icon-plus icon-white"></i> Add to playlist</a>
+          <a href="" class="btn btn-bh-dark album-add"><i class="icon-plus"></i> Add to playlist</a>
         </div>
         <div class="bh-underlay-green">
           <a href="" class="btn btn-bh-dark album-play"><i class="icon-play icon-white"></i> Play</a>

app/assets/javascripts/backbone/templates/main/tour.mustache

@@ -0,0 +1,63 @@
+<div class="hero-unit popup step step-1">
+  <h1>Привет!</h1>
+  <p></p>
+  <p>Это Битхейвен, сайт с музыкой. Наверное, ты у нас первый раз, так что давай я в двух словах расскажу что к чему.</p>
+  <p>Битхейвен не содержит музыки как таковой, он просто умеет хорошо и удобно ее проигрывать. А саму музыку он специально для тебя ищет на <strong>VK.com</strong>. Поэтому прошу тебя для начала авторизоваться через <strong>VK.com</strong>, а потом я покажу что делать дальше.</p>
+  <p>Авторизуемся?</p>
+  <p></p>
+  <p><a href="" class="btn btn-primary btn-large">Хорошо</a></p>
+</div>
+<div class="hero-unit popup step step-1a">
+  <h1>Ой!</h1>
+  <p></p>
+  <p>Авторизация не сработала.</p>
+  <p>Скорее всего так вышло из-за того, что ты не стал авторизовываться или разрешать приложению доступ. Напрасно, оно абсолютно безобидное и в принципе не может сделать тебе ничего плохого.</p>
+  <p>К сожалению, без авторизации <strong>VK.com</strong> я не смогу играть для тебя музыку, извини.</p>
+  <p>Попробуем еще раз или заглянешь позже?</p>
+  <p></p>
+  <p><a href="" class="btn btn-primary btn-large again">Еще раз</a></p>
+</div>
+<div class="hero-unit popup step step-2">
+  <h1>Отлично!</h1>
+  <p></p>
+  <p>Добро пожаловать домой, <span class="your-name-here"></span>!</p>
+  <p>Я заглянул в твои музыкальные записи и обратил внимание, что тебе нравится <strong class="your-favorite-artist-here"></strong>. Давай перейдем на страницу этого исполнителя и я покажу тебе куда нажимать.</p>
+  <p></p>
+  <p><a href="" class="btn btn-primary btn-large">Пошли!</a></p>
+</div>
+<div class="step step-3">
+  <div class="title">Это поиск</div>
+  <div class="content">
+    <p>Он твой лучший друг.</p>
+    <p>Начни вписывать в него название группы или альбома и он с первой же буквы постарается угадать что ты хочешь послушать.</p>
+    <p></p>
+    <a href="" class="btn btn-primary tour-step-3">Дальше!</a>
+  </div>
+</div>
+<div class="step step-4">
+  <div class="title">Музыка!</div>
+  <div class="content">
+    <p>Чтобы начать слушать музыку достаточно нажать на кнопку слева от любимой песни</p>
+    <p>Послушаем?</p>
+    <p></p>
+    <a href="" class="btn btn-primary tour-step-4">Давай!</a>
+  </div>
+</div>
+<div class="step step-5">
+  <div class="title">Прогресс-бар</div>
+  <div class="content">
+    <p>На нем всегда отображается название песни, которая играет в данный момент.</p>
+    <p>Еще с его помощью можно перематывать песню.</p>
+    <p></p>
+    <a href="" class="btn btn-primary tour-step-5">Понял</a>
+  </div>
+</div>
+<div class="step step-6">
+  <div class="title">Кнопочки</div>
+  <div class="content">
+    <p>Предыдущая и следующая песня, плей/пауза, все как обычно.</p>
+    <p>Думаю, ты уже достаточно освоился. Наслаждайся музыкой!</p>
+    <p></p>
+    <a href="" class="btn btn-primary tour-step-6">Спасибо!</a>
+  </div>
+</div>

app/assets/javascripts/backbone/views/artist/artist_show.js.coffee

@@ -1,5 +1,5 @@
 class BeatHaven.Views.ArtistShow extends Backbone.View
-  template: HoganTemplates["backbone/templates/artist/show"]
+  template: HoganTemplates["artist/show"]
 
   initialize: ->
     @model.on("change", @render, this)

app/assets/javascripts/backbone/views/main/main_tour.js.coffee

@@ -0,0 +1,7 @@
+class BeatHaven.Views.MainTour extends Backbone.View
+  template: HoganTemplates["backbone/templates/main/tour"]
+
+  render: ->
+    $(".fullscreen").show()
+    $(@el).html(@template.render())
+    this

app/assets/javascripts/bindings/tour.js.coffee

@@ -0,0 +1,75 @@
+window.tour_auth = ->
+  VK.Auth.login (response) ->
+    BH.VK.auth_info(response)
+    if response.session?
+      $(".tour .step").hide()
+      $(".tour .step-2").show()
+      $(".tour .step-2 .your-name-here").text("#{response.session.user.first_name}")
+      $(".tour .step-2 .your-favorite-artist-here").text("Foo Fighters")
+      Backbone.history.navigate("/artist/Foo+Fighters", true)
+    else
+      $(".tour .step").hide()
+      $(".tour .step-1a").show()
+  , BH.VK.BITMASK
+
+$ ->
+  $(".tour .step-1 a").live "click", (e) ->
+    e.preventDefault()
+    tour_auth()
+
+  $(".tour .step-1a a.again").live "click", (e) ->
+    e.preventDefault()
+    tour_auth()
+
+  $(".tour .step-2 a").live "click", (e) ->
+    e.preventDefault()
+    $(".tour").hide()
+    $(".fullscreen").css(opacity: .3)
+    $(".navbar .search-query").popover(
+      placement: "bottom"
+      title: $(".tour .step-3 .title")
+      content: $(".tour .step-3 .content").html()
+      html: true
+      trigger: "manual"
+    ).popover("show")
+
+  $("a.tour-step-3").live "click", (e) ->
+    e.preventDefault()
+    $(".navbar .search-query").popover("hide")
+    $(".artist-page .tracks li:first .track-play").popover(
+      placement: "top"
+      title: $(".tour .step-4 .title")
+      content: $(".tour .step-4 .content").html()
+      html: true
+      trigger: "manual"
+    ).popover("show")
+
+  $("a.tour-step-4").live "click", (e) ->
+    e.preventDefault()
+    $(".artist-page .tracks li:first .track-play").popover("hide").trigger("click")
+    $(".player .progress-bar").popover(
+      placement: "bottom"
+      title: $(".tour .step-5 .title")
+      content: $(".tour .step-5 .content").html()
+      html: true
+      trigger: "manual"
+    ).popover("show")
+
+  $("a.tour-step-5").live "click", (e) ->
+    e.preventDefault()
+    $(".player .progress-bar").popover("hide")
+    $(".player .controls").popover(
+      placement: "bottom"
+      title: $(".tour .step-6 .title")
+      content: $(".tour .step-6 .content").html()
+      html: true
+      trigger: "manual"
+    ).popover("show")
+
+  $("a.tour-step-6").live "click", (e) ->
+    e.preventDefault()
+    $(".player .controls").popover("hide")
+    $(".popover").remove()
+    $(".fullscreen").hide()
+
+

app/assets/stylesheets/album-track.css.scss

@@ -59,7 +59,7 @@
       border-radius: 50px;
 
       i {
-        margin: 3px 0 0 -1px;
+        margin: 6px 0 0 -2px;
       }
     }
 
@@ -102,6 +102,7 @@
             margin: 0;
             padding: 0;
             color: #808080;
+            text-shadow: none;
 
             .artist-page {
               color: #808080;
@@ -132,6 +133,10 @@
       top: 3px;
       right: 5px;
       display: none;
+
+      i {
+        margin-left: -3px;
+      }
     }
 
     // li:hover

app/assets/stylesheets/application.css.scss

@@ -1,5 +1,7 @@
 @import "bourbon";
-@import "bootstrap";
+@import "bootstrap_custom";
+@import "font-awesome";
+
 @import "noise";
 @import "buttons";
 @import "autocomplete";
@@ -7,6 +9,8 @@
 @import "album-track";
 @import "player";
 @import "auth";
+@import "popup";
+@import "tour";
 
 @import url(http://fonts.googleapis.com/css?family=Lobster+Two:400,400italic,700);
 @import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro);

app/assets/stylesheets/auth.css.scss

@@ -1,3 +1,14 @@
-.navbar .auth {
-  margin: 14px 10px 0 15px;
+.navbar {
+  .preferences {
+    margin: 14px 10px 0 15px;
+    font-size: 27px;
+    color: #e0e0e0;
+    text-shadow: 0 0 2px rgba(255, 255, 255, .6);
+      text-decoration: none;
+
+      &:hover {
+        color: #fafafa;
+        text-shadow: 0 0 4px rgba(255, 255, 255, .9);
+      }
+  }
 }

app/assets/stylesheets/bootstrap_custom.css.scss

@@ -0,0 +1,51 @@
+@import "bootstrap/variables"; // Modify this for custom colors, font-sizes, etc
+@import "bootstrap/mixins";
+
+// CSS Reset
+@import "bootstrap/reset";
+
+// Grid system and page structure
+@import "bootstrap/scaffolding";
+@import "bootstrap/grid";
+@import "bootstrap/layouts";
+
+// Base CSS
+@import "bootstrap/type";
+@import "bootstrap/code";
+@import "bootstrap/forms";
+// @import "bootstrap/tables";
+
+// Components: common
+// @import "bootstrap/sprites";
+// @import "bootstrap/dropdowns";
+// @import "bootstrap/wells";
+@import "bootstrap/component-animations";
+// @import "bootstrap/close";
+
+// Components: Buttons & Alerts
+@import "bootstrap/buttons";
+// @import "bootstrap/button-groups";
+@import "bootstrap/alerts"; // Note: alerts share common CSS with buttons and thus have styles in buttons.less
+
+// Components: Nav
+@import "bootstrap/navs";
+@import "bootstrap/navbar";
+// @import "bootstrap/breadcrumbs";
+// @import "bootstrap/pagination";
+// @import "bootstrap/pager";
+
+// Components: Popovers
+@import "bootstrap/modals";
+@import "bootstrap/tooltip";
+@import "bootstrap/popovers";
+
+// Components: Misc
+// @import "bootstrap/thumbnails";
+// @import "bootstrap/labels-badges";
+// @import "bootstrap/progress-bars";
+// @import "bootstrap/accordion";
+// @import "bootstrap/carousel";
+@import "bootstrap/hero-unit";
+
+// Utility classes
+@import "bootstrap/utilities"; // Has to be last to override when necessary

app/assets/stylesheets/buttons.css.scss

@@ -16,6 +16,7 @@
   background-position: 0 0 !important;
   color: #fafafa;
   text-shadow: 0 1px 1px rgba(0, 0, 0, .35);
+
   &:hover {
     color: #ffffff;
   }

app/assets/stylesheets/player.css.scss

@@ -6,7 +6,17 @@
     margin: 3px 0 0 -103px;
 
     a {
-      margin: 5px 6px 0 -9px;
+      @include inline-block;
+      margin: 11px 10px 0 0;
+      font-size: 27px;
+      color: #e0e0e0;
+      text-shadow: 0 0 2px rgba(255, 255, 255, .6);
+      text-decoration: none;
+
+      &:hover {
+        color: #fafafa;
+        text-shadow: 0 0 4px rgba(255, 255, 255, .9);
+      }
     }
 
     .pause {

app/assets/stylesheets/popup.css.scss

@@ -0,0 +1,19 @@
+.fullscreen {
+  display: none;
+  position: absolute;
+  z-index: 9999;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, .7);
+}
+.popup {
+  position: absolute;
+  z-index: 99999;
+  top: 50%;
+  left: 50%;
+  width: 640px;
+  height: 360px;
+  margin: -240px 0 0 -380px;
+}

app/assets/stylesheets/tour.css.scss

@@ -0,0 +1,13 @@
+.tour .step {
+  display: none;
+}
+.tour .step-1 {
+  display: block;
+}
+.popover {
+  z-index: 99999;
+
+  p {
+    margin: 8px 0;
+  }
+}