Add voume control closes #2

Author: debugger22

README.md

@@ -5,7 +5,7 @@ Listen to music generated by events happening across GitHub
 
 __Imitation is the sincerest form of flattery.__ - *Oscar Wilde*
 
-But seriously, [listen-to-wikipedia](https://github.com/hatnote/listen-to-wikipedia) by [@mahmoud](https://github.com/mahmoud) is the new hotness, and this is a shameless rip off.
+But seriously, [listen-to-wikipedia](https://github.com/hatnote/listen-to-wikipedia) by [@mahmoud](https://github.com/mahmoud) is the hotness.
 
 
 Media

app/index.html

@@ -28,9 +28,11 @@
     <title>GitHub Audio</title>
     <link rel="mask-icon" href="/static/public/images/electric-guitar.svg" color="orange">
     <link rel="shortcut icon" type="image/png" href="/static/public/images/favicon.png"/>
-    <link rel="stylesheet" href="/static/public/css/main.css"/>
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/odometer/0.4.7/themes/odometer-theme-default.css" />
+    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/base/jquery-ui.min.css" />
+    <link rel="stylesheet" href="/static/public/css/main.css"/>
     <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
+    <script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
     <script src="//cdnjs.cloudflare.com/ajax/libs/howler/2.0.0/howler.min.js"></script>
     <script src="//cdnjs.cloudflare.com/ajax/libs/socket.io/1.4.8/socket.io.min.js"></script>
     <script src="//cdn.jsdelivr.net/odometer/0.4.7/odometer.min.js"></script>
@@ -47,6 +49,7 @@
       js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.7&appId=718063574909410";
       fjs.parentNode.insertBefore(js, fjs);
     }(document, 'script', 'facebook-jssdk'));</script>
+
     <header>
       <h1 class="header-text">
         GitHub Audio&nbsp;
@@ -55,14 +58,17 @@ <h1 class="header-text">
       <div class="events-remaining">
         <span class="events-remaining-value odometer"></span>&nbsp;
         <span class="events-remaining-text">events remaining in queue</span>&nbsp;
+        <div id="volumeSlider"></div>
+        <!-- <img id="cmdMute" src="/static/public/images/speaker.svg" alt="mute/unmute"/> -->
       </div>
-      <img id="cmdMute" src="/static/public/images/speaker.svg" alt="mute/unmute"/>
     </header>
+
     <div id="area">
       <div class="online-users-div">
-        <h2 class="online-users-text"><span class="possibly-text">possibly</span>&nbsp;<span class="odometer online-users-count"></span> people listening</h2>
+        <h2 class="online-users-text"><span class="odometer online-users-count"></span> people listening</h2>
       </div>
     </div>
+
     <footer>
       <div class="footer-left-text-block">
         this project is open source, you can view it on <a href="https://github.com/debugger22/github-audio" target="_blank">GitHub</a><br/>

app/public/css/main.css

@@ -81,6 +81,7 @@ header{
 .events-remaining{
 	float:right;
 	margin-right: 5%;
+    margin-top: 30px;
 }
 
 .events-remaining-text, .events-remaining-value{
@@ -98,6 +99,22 @@ header{
     right: 40px;
 }
 
+#volumeSlider{
+    cursor:pointer;
+    position: absolute;
+    top: 30px;
+    right: 40px;
+    width: 100px;
+    opacity: 0.3;
+    border-radius: 5px;
+}
+
+#volumeSlider:hover{
+    cursor:pointer;
+    opacity: 0.9;
+}
+
+
 #area{
 	width: 100%;
 	position: relative;
@@ -122,11 +139,13 @@ circle {
 
 .online-users-div{
 	text-align: center;
-	position: fixed;
-	bottom: 20px;
+	position: absolute;
+	bottom: 60px;
 	width: 100%;
 	margin: 0 auto;
+    font-size: 0.9em;
 	z-index: 1;
+    opacity: 0.5;
 }
 
 .online-users-text{
@@ -135,10 +154,6 @@ circle {
 	color: #E0E0E0;
 }
 
-.possibly-text{
-	visibility: false;
-}
-
 footer{
 	width: 100%;
 	height: 200px;
@@ -180,14 +195,15 @@ footer{
 
     .footer-right-text-block{
         width: 100%;
-        margin: 0 auto;
+        margin-left: 0 auto;
         line-height:1.3em;
         float: left;
         text-align: left;
         margin-top: 20px;
     }
 
     .online-users-div{
+        margin-left: 20px;
         text-align: left;
     }
 

app/public/js/main.js

@@ -5,6 +5,7 @@ var drawingArea;
 var width;
 var height;
 var mute = false;
+var volume = 0.6;
 
 var scale_factor = 6,
     note_overlap = 2,
@@ -50,7 +51,6 @@ socket.on('connect', function(){
       $('.offline-text').css('visibility', 'hidden');
       $('.events-remaining-text').css('visibility', 'hidden');
       $('.events-remaining-value').css('visibility', 'hidden');
-      $('.possibly-text').css('visibility', 'hidden');
     }
 });
 
@@ -61,7 +61,6 @@ socket.on('disconnect', function(){
       $('.offline-text').css('visibility', 'visible');
       $('.events-remaining-text').css('visibility', 'visible');
       $('.events-remaining-value').css('visibility', 'visible');
-      $('.possibly-text').css('visibility', 'visible');
 
     }
 });
@@ -73,7 +72,6 @@ socket.on('error', function(){
       $('.offline-text').css('visibility', 'visible');
       $('.events-remaining-text').css('visibility', 'visible');
       $('.events-remaining-value').css('visibility', 'visible');
-      $('.possibly-text').css('visibility', 'visible');
     }
 });
 
@@ -97,6 +95,20 @@ $(function(){
   $('svg').css('background-color', svg_background_color_online);
   $('header').css('background-color', svg_background_color_online);
   $('svg text').css('color', svg_text_color);
+  $('#volumeSlider').slider({
+    'max': 100,
+    'min': 0,
+    'value': volume*100,
+    'slide' : function(event, ui){
+      volume = ui.value/100.0;
+      Howler.volume(volume);
+    },
+    'change' : function(event, ui){
+      volume = ui.value/100.0;
+      Howler.volume(volume);
+    }
+  });
+
 
   // Main drawing area
   svg = d3.select("#area").append("svg");
@@ -167,7 +179,7 @@ $(function(){
       $('#cmdMute').attr('src', '/static/public/images/speaker-muted.svg');
     }
   });
-  Howler.volume(0.6);
+  Howler.volume(volume);
 
 });