v1.0

- feedback button added - echonest "powered by" logo added - bugfix #47 Merge branch 'dev'
zebateira · Jun 6, 2014 · ef2e090 · ef2e090
2 parents c2be107 + a8d35f3
commit ef2e090
Show file tree

Hide file tree

Showing 20 changed files with 275 additions and 160 deletions.
diff --git a/README.md b/README.md
@@ -31,10 +31,9 @@ These are the contents of the script:
 ```sh
 $ mkdir ~/Spotify ; cd ~/Spotify
 $ rm -rf rama
-$ rm rama_v0.11.tar.gz
-$ curl https://github.com/carsy/rama-spotify/releases/download/v0.11/rama_v0.11.tar.gz
-$ tar -xvf rama_v0.11.tar.gz
-$ open spotify:app:rama
+$ rm rama_v1.0.tar.gz
+$ curl -L -O https://github.com/carsy/rama-spotify/releases/download/v1.0/rama_v1.0.tar.gz
+$ tar -xvf rama_v1.0.tar.gz
 ```
 
 You should now be in the app and seeing a graph thingy.
@@ -60,6 +59,11 @@ If not, restart Spotify and then open the app by typing spotify:app:rama in the
 [Releases]
 ----
 
+[v1.0] - 1.0
+  - feedback button added
+  - echonest "powered by" logo added
+  - bugfix #47
+
 [v0.11] - Drop and draw
   - Spotify items can now be dropped into the application to update the graph (closes #38)
   - tags can now be selected (closes #40)
@@ -126,7 +130,7 @@ If not, restart Spotify and then open the app by typing spotify:app:rama in the
 #### Author
 
 José Bateira
-[@zebateira]
+[@\_carsy\_]
 
 [carsy.github.io]
 
@@ -136,6 +140,7 @@ José Bateira
 [here]:https://github.com/carsy/rama-spotify/releases/latest
 [Releases]:https://github.com/carsy/rama-spotify/releases/latest
 [issues]:https://github.com/carsy/rama-spotify/issues
+[v1.0]:https://github.com/carsy/rama-spotify/releases/tag/v1.0
 [v0.11]:https://github.com/carsy/rama-spotify/releases/tag/v0.11
 [v0.10.6]:https://github.com/carsy/rama-spotify/releases/tag/v0.10.6
 [v0.10.5]:https://github.com/carsy/rama-spotify/releases/tag/v0.10.5

diff --git a/css/main.css b/css/main.css
@@ -294,17 +294,29 @@ a {
   border-bottom: 1px solid #5e6069;
   min-height: 60px;
 }
-/* line 17, ../sass/_header.scss */
+/* line 16, ../sass/_header.scss */
+#header .header-logo-en {
+  position: absolute;
+  right: 0;
+  top: 25%;
+  margin-right: 10px;
+  opacity: .6;
+}
+/* line 24, ../sass/_header.scss */
+#header .header-logo-en:hover {
+  opacity: 1;
+}
+/* line 30, ../sass/_header.scss */
 #header .header-text a {
   color: #dfe0e6;
 }
-/* line 22, ../sass/_header.scss */
+/* line 35, ../sass/_header.scss */
 #header .header-title {
   text-align: center;
   font-size: 3em;
   line-height: 60px;
 }
-/* line 28, ../sass/_header.scss */
+/* line 41, ../sass/_header.scss */
 #header .header-link {
   display: table;
   position: absolute;
@@ -316,12 +328,12 @@ a {
   background-color: #313336;
   margin-left: 10px;
 }
-/* line 41, ../sass/_header.scss */
+/* line 54, ../sass/_header.scss */
 #header .header-link a {
   display: table-cell;
   vertical-align: middle;
 }
-/* line 46, ../sass/_header.scss */
+/* line 59, ../sass/_header.scss */
 #header .header-link:after {
   content: url(../img/external_link-tiny-gray.png);
   display: inline-block;
@@ -331,7 +343,7 @@ a {
   margin-top: -5px;
 }
 @media (max-width: 500px) {
-  /* line 28, ../sass/_header.scss */
+  /* line 41, ../sass/_header.scss */
   #header .header-link {
     display: none;
   }
@@ -501,6 +513,7 @@ a {
 
 /* line 1, ../sass/_artistmenu.scss */
 #artistmenu {
+  z-index: 1;
   position: absolute;
   left: 0;
   top: 110px;
@@ -627,3 +640,41 @@ a {
 #tagsmenu .common-tag.selected {
   border-color: #95dc00;
 }
+
+/* line 1, ../sass/_feedback.scss */
+#feedback {
+  position: absolute;
+  z-index: 2;
+  bottom: 50px;
+  right: 0;
+  opacity: 0.9;
+  background-color: #222326;
+  border-color: #3e3e40;
+  border-width: 1px;
+  border-style: solid;
+  cursor: pointer;
+  margin: 10px;
+  padding: 2px 5px;
+  opacity: .6;
+}
+/* line 86, ../sass/main.scss */
+#feedback:hover {
+  opacity: 0.95;
+}
+/* line 90, ../sass/main.scss */
+#feedback:active {
+  border-color: #7fb701;
+  -webkit-transform: scale(0.98, 0.98);
+}
+/* line 15, ../sass/_feedback.scss */
+#feedback:hover {
+  opacity: 1;
+}
+/* line 19, ../sass/_feedback.scss */
+#feedback #feedback_form {
+  color: #a6a9b9;
+}
+/* line 22, ../sass/_feedback.scss */
+#feedback #feedback_form:hover {
+  color: #dfe0e6;
+}
diff --git a/deploy b/deploy
diff --git a/img/en_logo.png b/img/en_logo.png
diff --git a/index.html b/index.html
@@ -23,20 +23,23 @@
 
   <div id="view_container">
 
-    <div id="graph"></div>
+    <div id="feedback"></div>
 
     <!-- the wrapper is used to center the equalizer horizontally -->
     <div id="eqbar"></div>
 
-    <div id="settings"></div>
 
     <div id="tracklist"></div>
 
     <div id="artistmenu"></div>
 
-    <!-- wrapper is used to center horizontally -->
-    <div id="tagsmenu_wrapper">
-      <div id="tagsmenu"></div>
+    <div class="loading-wrapper">
+      <div id="settings"></div>
+      <div id="graph"></div>
+      <!-- wrapper is used to center horizontally -->
+      <div id="tagsmenu_wrapper">
+        <div id="tagsmenu"></div>
+      </div>
     </div>
 
   </div>

diff --git a/install.sh b/install.sh
@@ -1,6 +1,6 @@
 #!/bin/bash
 
-version="v0.11"
+version="v1.0"
 
 mkdir ~/Spotify ; cd ~/Spotify
 rm -rf rama-spotify
@@ -10,7 +10,7 @@ curl -L -O https://github.com/carsy/rama-spotify/releases/download/"$version"/ra
 tar -xf rama_"$version".tar.gz
 
 unamestr=`uname`
-if [[ "$unamestr" == 'Drawin' ]]; then
+if [[ "$unamestr" == 'Darwin' ]]; then
    open spotify:app:rama
 elif [[ "$unamestr" == 'Linux' ]]; then
    xdg-open spotify:app:rama

diff --git a/js/controllers/artistmenu.js b/js/controllers/artistmenu.js
@@ -288,6 +288,8 @@ require([
     // Expand control button click event
     onBtnExpandClick: function(event) {
       this.graphcontroller.expandNode(this.artist);
+      this.graphcontroller.highlightArtist(this.artist);
+
       this.elements.controlExpand.jelement.hide();
     },
     // New control button click event

diff --git a/js/controllers/eqbar.js b/js/controllers/eqbar.js
@@ -12,7 +12,7 @@ require([
   var EQBar = function(name, config) {
     Controller.call(this, name, config);
 
-    this.barcolor = config.barcolor || "#7e7e7e";
+    this.barcolor = config.barcolor || '#7e7e7e';
 
     // number of rows for the equalizer
     this.numRows = config.numRows || 128;
@@ -50,39 +50,41 @@ require([
     // bind event listener to get the waves
     // to render the equalizer
     audio.RealtimeAnalyzer.forPlayer(models.player)
-      .addEventListener('audio', this.onRealtimeAudio.bind(this));
+      .addEventListener('audio', this.events.onRealtimeAudio.bind(this));
   };
 
   // event that processes the wave at each instant (in realtime)
-  EQBar.prototype.onRealtimeAudio = function(event) {
-    // the waves: left and right arrays
-    var left = event.audio.wave.left;
-    var right = event.audio.wave.right;
-
-    // at each frame clear the canvas
-    this.context.clearRect(0, 0,
-      this.canvas.width, this.canvas.height);
-
-    // draw the bars given the waves' values
-    for (var i = 0, x = 0; i < this.numRows; i++, x += this.barwidth + this.barmargin) {
-      // each value of wave.left and wave.right are
-      // values between -1.0 and 1.0 (smth like that) so
-      // by doing Math.abs(left[i]) we preserve the values
-      // even if they are negative.
-
-      // height of the bar to draw
-      var height =
-      // we are ignoring if it's a left or right wave.
-      // we just add them up and represent a bar with the left 
-      // and the right values
-      (Math.abs(left[i]) + Math.abs(right[i])) *
-      // we use the scale factor to make the values visible
-      this.barHeightFactor;
-
-      // each bar is draw always at y=0, with the same width
-      // the x value is updated give the same width and
-      // the this.barmargin
-      this.context.fillRect(x, 0, this.barwidth, height);
+  EQBar.prototype.events = {
+    onRealtimeAudio: function(event) {
+      // the waves: left and right arrays
+      var left = event.audio.wave.left;
+      var right = event.audio.wave.right;
+
+      // at each frame clear the canvas
+      this.context.clearRect(0, 0,
+        this.canvas.width, this.canvas.height);
+
+      // draw the bars given the waves' values
+      for (var i = 0, x = 0; i < this.numRows; i++, x += this.barwidth + this.barmargin) {
+        // each value of wave.left and wave.right are
+        // values between -1.0 and 1.0 (smth like that) so
+        // by doing Math.abs(left[i]) we preserve the values
+        // even if they are negative.
+
+        // height of the bar to draw
+        var height =
+        // we are ignoring if it's a left or right wave.
+        // we just add them up and represent a bar with the left 
+        // and the right values
+        (Math.abs(left[i]) + Math.abs(right[i])) *
+        // we use the scale factor to make the values visible
+        this.barHeightFactor;
+
+        // each bar is draw always at y=0, with the same width
+        // the x value is updated give the same width and
+        // the this.barmargin
+        this.context.fillRect(x, 0, this.barwidth, height);
+      }
     }
   };