diff --git a/css/player.css b/css/player.css
index 0ed2371..9afb08b 100644
--- a/css/player.css
+++ b/css/player.css
@@ -352,8 +352,21 @@ a {
.m-pbar {
position: relative;
- margin-top: 14px;
+
+}
+
+.m-pbar.play {
width: 80%;
+ margin-top: 14px;
+}
+
+.m-pbar.volume {
+ position: absolute;
+ right: 13px;
+ bottom: 11px;
+ float: right;
+ width: 56%;
+ margin-top: 0px;
}
.m-pbar .barbg, .m-pbar .cur, .m-pbar .rdy {
@@ -413,15 +426,13 @@ em, i {
.m-playbar .ctrl {
position: absolute;
right: 0px;
- bottom: 17px;
+ bottom: 48px;
z-index: 10;
- width: 110px;
+ width: 79px;
padding-left: 13px;
float: none;
}
-
-
.m-playbar .icn-add {
background-position: -25px 0px;
}
@@ -434,6 +445,14 @@ em, i {
background-position: -125px 0px;
}
+.m-playbar .icn-vol {
+ background-position: -175px 0px;
+}
+
+.m-playbar .icn-vol-mute {
+ background-position: -200px 0px;
+}
+
.m-playbar .icn-list:hover {
background-position: -125px -25px;
}
@@ -446,6 +465,13 @@ em, i {
background-position: -50px -25px;
}
+.m-playbar .icn-vol:hover {
+ background-position: -175px -25px;
+}
+
+.m-playbar .icn-vol-mute:hover {
+ background-position: -200px -25px;
+}
.m-playbar .icn-shuffle {
background-position: -150px 0px;
@@ -506,6 +532,13 @@ em, i {
background-position: -75px -25px;
}
+.volume-ctrl {
+ position: absolute;
+ right: 0px;
+ bottom: 16px;
+ width: 110px;
+}
+
li {
list-style: none;
}
diff --git a/images/player_small.png b/images/player_small.png
index 28b5503..d79cf4e 100644
Binary files a/images/player_small.png and b/images/player_small.png differ
diff --git a/js/app.js b/js/app.js
index c5ff23e..cb2443f 100644
--- a/js/app.js
+++ b/js/app.js
@@ -286,6 +286,7 @@
current.nowplaying_track_id = data;
localStorage.setObject('player-settings', current);
});
+
}]);
@@ -295,14 +296,15 @@
function($scope, $timeout, $log, $anchorScroll, $location, angularPlayer,
$http, $httpParamSerializerJQLike, $rootScope, Notification, loWeb){
$scope.menuHidden = true;
-
+ $scope.volume = angularPlayer.getVolume();
+ $scope.mute = angularPlayer.getMuteStatus();
$scope.settings = {"playmode": 0, "nowplaying_track_id": -1};
$scope.loadLocalSettings = function() {
- var defaultSettings = {"playmode": 0, "nowplaying_track_id": -1}
+ var defaultSettings = {"playmode": 0, "nowplaying_track_id": -1, "volume": 90};
var localSettings = localStorage.getObject('player-settings');
if (localSettings == null) {
- $scope.settings = {"playmode": 0, "nowplaying_track_id": -1};
+ $scope.settings = defaultSettings;
$scope.saveLocalSettings();
}
else {
@@ -319,6 +321,12 @@
if (angularPlayer.getShuffle() != shuffleSetting) {
angularPlayer.toggleShuffle();
}
+
+ $scope.volume = $scope.settings.volume;
+ if($scope.volume == null) {
+ $scope.volume = 90;
+ $scope.saveLocalSettings();
+ }
}
$scope.saveLocalSettings = function() {
@@ -350,6 +358,12 @@
$scope.saveLocalSettings();
};
+ $scope.$on('music:volume', function(event, data) {
+ $scope.$apply(function() {
+ $scope.volume = data;
+ });
+ });
+
$scope.$on('angularPlayer:ready', function(event, data) {
$log.debug('cleared, ok now add to playlist');
if (angularPlayer.getRepeatStatus() == false) {
@@ -400,6 +414,11 @@
}
};
+ $scope.toggleMuteStatus = function() {
+ // mute function is indeed toggle mute status.
+ angularPlayer.mute();
+ }
+
$scope.playmylist = function(list_id){
$timeout(function(){
angularPlayer.clearPlaylist(function(data) {
@@ -471,6 +490,10 @@
$scope.myProgress = data;
});
});
+
+ $scope.$on('music:mute', function (event, data) {
+ $scope.mute = data;
+ });
}]);
app.controller('InstantSearchController', ['$scope', '$http', '$timeout', 'angularPlayer', 'loWeb',
@@ -589,17 +612,58 @@
app.directive('draggable', ['angularPlayer', '$document', '$rootScope',
function(angularPlayer, $document, $rootScope) {
- return function(scope, element, attr) {
+ return function(scope, element, attrs) {
var x;
var container;
+ var mode = attrs.mode;
+
+ function onMyMousedown() {
+ if(mode == 'play') {
+ scope.changingProgress = true;
+ }
+ }
+
+ function onMyMouseup() {
+ if(mode == 'play') {
+ scope.changingProgress = false;
+ }
+ }
+
+ function onMyUpdateProgress(progress) {
+ if(mode == 'play') {
+ $rootScope.$broadcast('track:myprogress', progress*100);
+ }
+ if(mode == 'volume') {
+ angularPlayer.adjustVolumeSlider(progress*100);
+ if (angularPlayer.getMuteStatus() == true) {
+ angularPlayer.mute();
+ }
+ }
+ }
+
+ function onMyCommitProgress(progress) {
+ if(mode == 'play') {
+ if (angularPlayer.getCurrentTrack() === null) {
+ return;
+ }
+ var sound = soundManager.getSoundById(angularPlayer.getCurrentTrack());
+ var duration = sound.durationEstimate;
+ sound.setPosition(progress * duration);
+ }
+ if (mode == 'volume') {
+ var current = localStorage.getObject('player-settings');
+ current.volume = progress*100;
+ localStorage.setObject('player-settings', current);
+ }
+ }
element.on('mousedown', function(event) {
- scope.changingProgress = true;
- container = document.getElementById('progressbar').getBoundingClientRect();
+ onMyMousedown();
+ container = document.getElementById(attrs.id).getBoundingClientRect();
// Prevent default dragging of selected content
event.preventDefault();
x = event.clientX - container.left;
- setPosition();
+ updateProgress();
$document.on('mousemove', mousemove);
$document.on('mouseup', mouseup);
@@ -607,19 +671,22 @@
function mousemove(event) {
x = event.clientX - container.left;
- setPosition();
+ updateProgress();
}
- function changeProgress(progress) {
- if (angularPlayer.getCurrentTrack() === null) {
- return;
- }
- var sound = soundManager.getSoundById(angularPlayer.getCurrentTrack());
- var duration = sound.durationEstimate;
- sound.setPosition(progress * duration);
+ function mouseup() {
+ var progress = x / (container.right - container.left);
+ commitProgress(progress);
+ $document.off('mousemove', mousemove);
+ $document.off('mouseup', mouseup);
+ onMyMouseup();
}
- function setPosition() {
+ function commitProgress(progress) {
+ onMyCommitProgress(progress);
+ }
+
+ function updateProgress() {
if (container) {
if (x < 0) {
x = 0;
@@ -628,15 +695,7 @@
}
}
var progress = x / (container.right - container.left);
- $rootScope.$broadcast('track:myprogress', progress*100);
- }
-
- function mouseup() {
- var progress = x / (container.right - container.left);
- changeProgress(progress);
- $document.off('mousemove', mousemove);
- $document.off('mouseup', mouseup);
- scope.changingProgress = false;
+ onMyUpdateProgress(progress);
}
};
}]);
diff --git a/js/vendor/angular-soundmanager2.js b/js/vendor/angular-soundmanager2.js
index d947210..2bcda14 100644
--- a/js/vendor/angular-soundmanager2.js
+++ b/js/vendor/angular-soundmanager2.js
@@ -4938,7 +4938,7 @@ ngSoundManager.directive('soundManager', ['$filter', '$timeout', 'angularPlayer'
});
scope.$on('currentTrack:position', function(event, data) {
$timeout(function() {
- scope.currentPostion = $filter('humanTime')(data);
+ scope.currentPosition = $filter('humanTime')(data);
});
});
scope.$on('currentTrack:duration', function(event, data) {
diff --git a/listen1.html b/listen1.html
index 7eac918..0232f9c 100644
--- a/listen1.html
+++ b/listen1.html
@@ -275,15 +275,15 @@
-
-
+
+
-
{{ currentPostion }} / {{ currentDuration }}
+
{{ currentPosition }} / {{ currentDuration }}
@@ -296,6 +296,17 @@
+
+