v0.3 - Equalizer graph added

Merge branch 'dev'

Conflicts:
	README.md
	deploy

.gitignore

@@ -8,8 +8,8 @@ bower_components
 # build files
 .tmp
 rama-spotify
-rama-spotify.zip
-rama-spotify.tar.gz
+*.zip
+*.tar.gz
 
 # BE GONE DAMMIT
 .DS_STORE

README.md

@@ -33,8 +33,8 @@ These are the contents of the script:
 ```sh
 $ mkdir ~/Spotify ; cd ~/Spotify
 $ rm -rf rama-spotify
-$ wget https://github.com/carsy/rama-spotify/releases/download/v0.2/rama-spotify_v0.2.tar.gz
-$ tar -xvf rama-spotify_v0.2.tar.gz
+$ wget https://github.com/carsy/rama-spotify/releases/download/v0.3/rama-spotify_v0.3.tar.gz
+$ tar -xvf rama-spotify_v0.3.tar.gz
 $ open spotify:app:rama-spotify
 ```
 You should now be in the app and seeing a graph thingy.
@@ -59,6 +59,9 @@ With no official release for the Spotify Desktop Client, there's nothing I can d
 [Releases]
 ----
 
+[v0.3] - Equalizer graph
+  - Equalizer added using spotify's buffer analyzer api
+
 [v0.2] - UI redesign
   - UI updated to darker theme
   - settings are kept when playing artist changes
@@ -80,8 +83,6 @@ With no official release for the Spotify Desktop Client, there's nothing I can d
 [v0.1.0] - First Release
   - graph depth 1 displayed on app load.
 
-It is still in alfa, so please bear with the lack of functionalities (none for now really...).
-
 
 #### Author
 
@@ -95,6 +96,7 @@ José Bateira
 [@\_carsy\_]:http://twitter.com/_carsy_
 [here]:https://github.com/carsy/rama-spotify/releases/latest
 [Releases]:https://github.com/carsy/rama-spotify/releases/latest
+[v0.3]:https://github.com/carsy/rama-spotify/releases/tag/v0.3
 [v0.2]:https://github.com/carsy/rama-spotify/releases/tag/v0.2
 [v0.1.3]:https://github.com/carsy/rama-spotify/releases/tag/v0.1.3
 [v0.1.2]:https://github.com/carsy/rama-spotify/releases/tag/v0.1.2

css/main.css

@@ -240,44 +240,41 @@ pre .regexp {
   color: #009926;
 }
 
-/* overrides */
 /* line 7, ../sass/main.scss */
-body, html {
-  margin: 0;
-}
-
-/* line 11, ../sass/main.scss */
 *, *:before, *:after {
   box-sizing: border-box;
 }
 
-/* line 31, ../sass/main.scss */
-a {
-  text-decoration: none;
-}
-
-/* line 35, ../sass/main.scss */
-html, body {
+/* overrides */
+/* line 32, ../sass/main.scss */
+body, html {
+  margin: 0;
   height: 100%;
   color: #a1a3a6;
+  overflow: hidden;
 }
 
-/* line 43, ../sass/main.scss */
+/* line 42, ../sass/main.scss */
+a {
+  text-decoration: none;
+}
+
+/* line 46, ../sass/main.scss */
 #view_container {
   height: calc(100% - 60px);
   background-color: #222326;
 }
-/* line 47, ../sass/main.scss */
+/* line 50, ../sass/main.scss */
 #view_container .view {
   height: 100%;
 }
 
-/* line 52, ../sass/main.scss */
+/* line 55, ../sass/main.scss */
 .sp-throbber-background {
   background-color: #ecebe8;
 }
 
-/* line 56, ../sass/main.scss */
+/* line 59, ../sass/main.scss */
 .sp-tabbar {
   display: none !important;
 }
@@ -427,3 +424,35 @@ html, body {
   margin-top: 5px;
   margin-left: 5px;
 }
+
+/* line 2, ../sass/_eqbar.scss */
+meter {
+  box-shadow: 0 5px 5px -5px #999 inset;
+  background-image: linear-gradient(90deg, #8bcf69 5%, #e6d450 5%, #e6d450 15%, #f28f68 15%, #f28f68 55%, #cf82bf 55%, #cf82bf 95%, #719fd1 95%, #719fd1 100%);
+  background-size: 100% 100%;
+  -webkit-transform: rotate(-90deg);
+  margin-left: -48px;
+}
+
+/* line 22, ../sass/_eqbar.scss */
+#eqbar-wrapper {
+  position: absolute;
+  z-index: 1;
+  top: 0;
+  left: 0;
+  width: 100%;
+}
+
+/* line 30, ../sass/_eqbar.scss */
+#eqbar {
+  margin: 0 auto;
+  width: 400px;
+  opacity: 0.2;
+}
+/* line 35, ../sass/_eqbar.scss */
+#eqbar .bar {
+  float: left;
+  width: 3px;
+  min-height: 1px;
+  background-color: #dfe0e6;
+}

index.html

@@ -31,6 +31,10 @@
     <div id="search" class="view">
     </div>
 
+    <div id="eqbar-wrapper">
+      <div id="eqbar"></div>
+    </div>
+
   </div>
 
   <!-- build:js js/vendor.js -->

install.sh

@@ -1,6 +1,6 @@
 #!/bin/sh
 
-version="v0.2"
+version="v0.3"
 
 mkdir ~/Spotify ; cd ~/Spotify
 wget https://github.com/carsy/rama-spotify/releases/download/"$version"/rama-spotify_"$version".tar.gz

js/components/components.js

@@ -8,13 +8,15 @@
 var UI;
 var Header;
 var TabBar;
+var EQBar;
 
 var Components = {
   DEFAULT_PATH: '../views/',
 
   initConfig: function(config) {
     Header.init(config.header, Components.DEFAULT_PATH);
     TabBar.init(config.tabs, Components.DEFAULT_PATH);
+    EQBar.init(config.eqbar, Components.DEFAULT_PATH);
   },
   loadViews: function(config) {
     Components.spUI = UI.init({
@@ -24,12 +26,12 @@ var Components = {
     });
     Header.loadView();
     TabBar.loadView();
+    EQBar.loadView();
 
     Components.bindEvents(config.events);
   },
-  updateViews: function(tab) {
-    var tabID = tab.id || Components.spUI.activeView;
-
+  updateViews: function(data) {
+    var tabID = data.id || Components.spUI.activeView;
     Header.updateView();
     TabBar.updateView(tabID);
   },
@@ -69,12 +71,14 @@ var Components = {
 require([
   '$views/ui#UI',
   'js/components/header#header',
-  'js/components/tabbar#tabbar'
-], function(_ui, _header, _tabbar) {
+  'js/components/tabbar#tabbar',
+  'js/components/eqbar#eqbar'
+], function(_ui, _header, _tabbar, _eqbar) {
   UI = _ui;
 
   Header = _header;
   TabBar = _tabbar;
+  EQBar = _eqbar;
 
   exports.Components = Components;
 });

js/components/eqbar.js

@@ -0,0 +1,51 @@
+var EQBar = {};
+var audio;
+var models;
+
+require(['$api/audio', '$api/models'], function(_audio, _models) {
+  audio = _audio;
+  models = _models;
+
+  exports.eqbar = EQBar;
+});
+
+
+EQBar = {
+  init: function(config, defaultPath) {
+    if (!config)
+      return;
+
+    EQBar.selector = config.selector;
+    EQBar.numRows = config.numRows;
+    EQBar.step = 256 / EQBar.numRows;
+  },
+  loadView: function() {
+    var numRows = EQBar.numRows;
+    var bars = [];
+
+    for (var i = 0; i < numRows * 2; i++) {
+      var bar = document.createElement('div');
+      bar.className = 'bar';
+      bar.min = -1;
+      $(EQBar.selector).append(bar);
+
+      bars.push(bar);
+    }
+
+    var analyzer = audio.RealtimeAnalyzer.forPlayer(models.player);
+
+    analyzer.addEventListener('audio', function(evt) {
+      for (var i = 0; i < numRows; i++) {
+        bars[i * 2].style.height =
+          evt.audio.wave.left[EQBar.step * i] * 100 + 'px';
+        bars[i * 2 + 1].style.height =
+          evt.audio.wave.right[EQBar.step * i] * 100 + 'px';
+      }
+    });
+
+  },
+  updateView: function() {
+
+  },
+  reset: function() {}
+};

js/components/settings.js

@@ -1,58 +1,53 @@
+var Element;
+
 var Settings = function(config) {
   this.selector = config.selector || '.settings';
   this.viewpath = config.viewpath || '../views/settings.html';
 
   var self = this;
 
   this.form = {
-    selector: config.formSelector || this.selector + ' .settings-form'
-  };
-
-  this.form.getSelector = function(name) {
-    return self.form.selector + ' input[name=' + name + ']';
+    selector: config.formSelector || this.selector + ' .settings-form',
   };
 
-  this.form.inputs = {
-    branching: {
-      name: 'branching',
-      value: 'value',
-      selector: this.form.getSelector('branching')
-    },
-    depth: {
-      name: 'depth',
-      value: 'value',
-      selector: this.form.getSelector('depth')
-    },
-    treemode: {
-      name: 'treemode',
-      value: 'checked',
-      selector: this.form.getSelector('treemode')
-    }
-  };
+  for (var input in Settings.INPUTS) {
+    Settings.INPUTS[input].selector =
+      this.form.selector + ' input[name=' + input + ']';
+  }
 
   this.button = {
     selector: config.buttonSelector || this.selector + ' .settings-btn'
   };
+};
 
-  this.button.onclick = function(event) {
-    self.button.jelement.toggleClass('opened');
-    self.form.jelement.toggle();
-  };
-
+Settings.INPUTS = {
+  branching: {
+    value: 'value'
+  },
+  depth: {
+    value: 'value'
+  },
+  treemode: {
+    value: 'checked'
+  }
 };
 
 Settings.prototype = {
   loadView: function(events) {
     var self = this;
 
     $(this.selector).load(this.viewpath, function() {
+
       self.jelement = $(self.selector);
       self.element = self.jelement[0];
-      self.form.jelement = $(self.form.selector);
-      self.form.element = self.form.jelement[0];
-      self.button.jelement = $(self.button.selector);
-      self.button.element = self.button.jelement[0];
-      self.button.element.onclick = self.button.onclick;
+
+      self.form = new Element(self.form.selector);
+      self.button = new Element(self.button.selector);
+
+      self.button.element.onclick = function(event) {
+        self.button.jelement.toggleClass('opened');
+        self.form.jelement.toggle();
+      };
 
       _.each(events, function(eventHandler) {
         self[eventHandler.name](eventHandler);
@@ -63,18 +58,18 @@ Settings.prototype = {
   reset: function() {},
 
   // events 
-
   onChangeValue: function(eventHandler) {
-    _.each(this.form.inputs, function(input) {
+    _.each(Settings.INPUTS, function(input) {
       $(input.selector).on('change', function() {
-        eventHandler(input.name, this[input.value]);
+        eventHandler(this.name, this[input.value]);
       });
     });
   }
 };
 
 Settings.prototype.constructor = Settings;
 
-require(['$api/models'], function(_models) {
+require(['js/models/element#Element'], function(_element) {
+  Element = _element;
   exports.Settings = Settings;
 });

js/controllers/nowplaying.js

@@ -23,7 +23,7 @@ var NowPlaying = function(viewId, viewpath) {
       fontColor: '#ddd',
       fontFace: '',
       shape: 'box',
-      radius: 1,
+      radius: 1
     },
     edges: {
       color: {
@@ -65,9 +65,6 @@ NowPlaying.prototype = {
       if (this.artistGraph.throbber)
         this.artistGraph.throbber.setPosition('center', 'center');
     }
-
-
-
     return this;
   },
   events: {