implement volume slider which resolves #6

- remove slider animations
acm-uiuc · Apr 7, 2014 · 76d3516 · 76d3516
1 parent 47063d3
commit 76d3516
Show file tree

Hide file tree

Showing 4 changed files with 89 additions and 11 deletions.
diff --git a/beats.css b/beats.css
@@ -266,8 +266,7 @@ table.playlist {
       background-color: #B0B7C1;
       border-radius: 5px;
       height: 10px;
-      position: absolute;
-      transition: width 1s linear; }
+      position: absolute; }
     .control.bar .handle {
       background: linear-gradient(to bottom, #7e868c 0%, #374044 100%);
       border-radius: 8px;

diff --git a/beats.html b/beats.html
@@ -90,7 +90,7 @@
         <div class="control button" title="Pause" data-icon="&#xf04c;" ng-click="pauseSong()"></div>
         <div class="control button" title="Skip" data-icon="&#xf051;" ng-click="skipSong()"></div>
         <div class="control label" title="Volume" data-icon="&#xf028;"></div>
-        <div class="control bar volume" title="Volume">
+        <div class="control bar volume" bar-control="volume" bar-set="setVolume(volume)" bar-dragging="holdVolumeUpdate" bar-min="0" bar-max="100" title="Volume">
           <div class="cover" style="width: {{ volume }}%"></div>
           <div class="handle" style="left: {{ volume }}%"></div>
         </div>

diff --git a/beats.js b/beats.js
@@ -39,6 +39,73 @@ angular.module('BeatsApp', ['Beats.filters', 'ngCookies'])
         }
     };
 })
+.directive('barControl', function()
+{
+    // Directive for having bar slider based input controls
+    return {
+        link: function(scope, element, attrs)
+        {
+            // Get the parameters that determine how to set the value
+            var barMin = attrs.barMin | 0;
+            var barMax = attrs.barMax | 0;
+
+            var dragging = false;
+
+            var handleDragging = function(event)
+            {
+                if (dragging)
+                {
+                    // Prevent browser's default dragging behaviour
+                    event.preventDefault();
+
+                    // Determine ratio from 0 to 1 over the control
+                    var ratioX = (event.clientX - element[0].offsetLeft) / (element[0].offsetWidth);
+
+                    // Linearly map that ratio to between barMax and barMin
+                    scope[attrs.barControl] = ratioX * (barMax - barMin) + barMin;
+                    if (scope[attrs.barControl] < barMin)
+                    {
+                        scope[attrs.barControl] = barMin;
+                    }
+                    if (scope[attrs.barControl] > barMax)
+                    {
+                        scope[attrs.barControl] = barMax;
+                    }
+
+                    // Update the view
+                    scope.$digest();
+                }
+            };
+
+            var finishDragging = function()
+            {
+                if (dragging)
+                {
+                    // Call the callback for whenever the bar is set
+                    scope.$eval(attrs.barSet);
+                    dragging = false;
+
+                    // Indicate that dragging has stopped
+                    scope[attrs.barDragging] = false;
+                }
+            }
+
+            element[0].addEventListener('mousedown', function(event)
+            {
+                dragging = true;
+
+                // Indicate that dragging has started
+                scope[attrs.barDragging] = true;
+
+                handleDragging(event);
+            });
+
+            element[0].addEventListener('mouseup', finishDragging);
+            element[0].addEventListener('mouseleave', finishDragging);
+            element[0].addEventListener('mousemove', handleDragging);
+        }
+    };
+})
 .controller('BeatsController', ['$scope', '$http', '$interval', '$cookies', function($scope, $http, $interval, $cookies)
 {
     var backendBase = 'http://127.0.0.1:5000'
@@ -47,6 +114,7 @@ angular.module('BeatsApp', ['Beats.filters', 'ngCookies'])
     $scope.playlist = [];
     $scope.queue = [];
     $scope.volume = 100;
+    $scope.holdVolumeUpdate = false;
     $scope.playbackTime = 0;
     $scope.playbackDuration = 0;
 
@@ -78,7 +146,6 @@ angular.module('BeatsApp', ['Beats.filters', 'ngCookies'])
         })
         .success(function(data)
         {
-            console.log(data);
             $cookies['crowd.token_key'] = data['token'];
             $scope.requestUser();
         });
@@ -96,7 +163,6 @@ angular.module('BeatsApp', ['Beats.filters', 'ngCookies'])
 
     $scope.ensureLogin = function()
     {
-        console.log('crowd.token_key = ' + $cookies['crowd.token_key']);
         if (!$cookies['crowd.token_key']) {
             $scope.showDialog = true;
             $scope.usernameFocus = true;
@@ -172,6 +238,20 @@ angular.module('BeatsApp', ['Beats.filters', 'ngCookies'])
 
     $scope.randomSongs();
 
+    $scope.setVolume = function(volume)
+    {
+        // Set the volume on the client and send it to the server
+        if (!$scope.ensureLogin()) {
+            return;
+        }
+
+        $scope.volume = Math.round(volume); // Because of the bar control, this may be a fraction
+        $http.post(backendBase + '/v1/player/volume', 'volume=' + $scope.volume + '&token=' + $cookies['crowd.token_key'],
+        {
+            headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
+        });
+    };
+
     $scope.voteSong = function(song)
     {
         if (!$scope.ensureLogin()) {
@@ -181,10 +261,6 @@ angular.module('BeatsApp', ['Beats.filters', 'ngCookies'])
         $http.post(backendBase + '/v1/queue/add', 'id=' + song.id + '&token=' + $cookies['crowd.token_key'],
         {
             headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
-        })
-        .success(function(data)
-        {
-            console.log(data);
         });
     };
 
@@ -223,7 +299,11 @@ angular.module('BeatsApp', ['Beats.filters', 'ngCookies'])
                 $scope.playbackTime = 0;
                 $scope.playbackDuration = 0;
             }
-            $scope.volume = data['player_status']['volume'];
+            // Prevent setting the volume while the user is changing it
+            if (!$scope.holdVolumeUpdate)
+            {
+                $scope.volume = data['player_status']['volume'];
+            }
         });
 
         $http.get(backendBase + '/v1/queue')

diff --git a/beats.scss b/beats.scss
@@ -359,7 +359,6 @@ table.playlist {
             border-radius: 5px;
             height: 10px;
             position: absolute;
-            transition: width 1s linear;
         }
 
         .handle {