From 5b24129e12de36f2d628009fe8342a9045e95bbc Mon Sep 17 00:00:00 2001
From: leizh <leizh@free.fr>
Date: Tue, 18 Mar 2014 15:41:22 +0100
Subject: [PATCH] Seek in playerbar

---
 css/style-playerbar.css                | 18 +++++++++++++++---
 js/app/controllers/playercontroller.js | 20 ++++++++++++++++++--
 js/public/app.js                       | 20 ++++++++++++++++++--
 templates/main.php                     |  5 +++--
 4 files changed, 54 insertions(+), 9 deletions(-)

diff --git a/css/style-playerbar.css b/css/style-playerbar.css
index fa3c5072f..4004ee539 100644
--- a/css/style-playerbar.css
+++ b/css/style-playerbar.css
@@ -134,19 +134,31 @@
 	line-height: 30px;
 }
 
-#playerbar .progress, #playerbar .seek-bar, #playerbar .play-bar {
+#playerbar .progress, #playerbar .seek-bar {
 	width: 100%;
 	height: 15px;
+	position: relative;
 	background-color: #ccc;
 }
 
-#playerbar.started .progress, #playerbar.started .seek-bar, #playerbar.started .play-bar {
+#playerbar.started .progress, #playerbar.started .seek-bar, #playerbar.started .play-bar, #playerbar .buffer-bar {
 	display: block;
 }
 
-#playerbar .play-bar {
+#playerbar .play-bar, #playerbar .buffer-bar {
+	position: absolute;
+	left: 0;
+	top: 0;
+	height: 15px;
 	width: 0%;
 	background-color: #1d2d44;
+	cursor: pointer;
+}
+
+#playerbar .buffer-bar {
+	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)";
+	filter: alpha(opacity = 10);
+	opacity: 0.1;
 }
 
 #shuffle, #repeat {
diff --git a/js/app/controllers/playercontroller.js b/js/app/controllers/playercontroller.js
index 7b4a7c71c..d3d5394a4 100644
--- a/js/app/controllers/playercontroller.js
+++ b/js/app/controllers/playercontroller.js
@@ -37,8 +37,9 @@ angular.module('Music').controller('PlayerController',
 	$scope.shuffle = false;
 
 	$scope.eventsBeforePlaying = 2;
+	$scope.$playPosition = $('.play-position');
+	$scope.$bufferBar = $('.buffer-bar');
 	$scope.$playBar = $('.play-bar');
-	$scope.$buffer = $('.buffer');
 
 	// will be invoked by the audio factory
 	$rootScope.$on('SoundManagerReady', function() {
@@ -240,6 +241,12 @@ angular.module('Music').controller('PlayerController',
 				whileplaying: function() {
 					$scope.setTime(this.position/1000, this.durationEstimate/1000);
 				},
+				whileloading: function() {
+					var position = this.buffered.reduce(function(prevBufferEnd, buffer) {
+						return buffer.end > prevBufferEnd ? buffer.end : prevBuffer.end;
+					}, 0);
+					$scope.setBuffer(position/1000, this.durationEstimate/1000);
+				},
 				onstop: function() {
 					$scope.setPlay(false);
 				},
@@ -321,8 +328,12 @@ angular.module('Music').controller('PlayerController',
 
 	// only call from external script
 	$scope.setTime = function(position, duration) {
+		$scope.$playPosition.text($filter('playTime')(position) + ' / ' + $filter('playTime')(duration));
 		$scope.$playBar.css('width', (position / duration * 100) + '%');
-		$scope.$buffer.text($filter('playTime')(position) + ' / ' + $filter('playTime')(duration));
+	};
+	
+	$scope.setBuffer = function(position, duration) {
+		$scope.$bufferBar.css('width', (position / duration * 100) + '%');
 	};
 
 	$scope.toggle = function(forcePlay) {
@@ -356,6 +367,11 @@ angular.module('Music').controller('PlayerController',
 		}
 	};
 
+	$scope.seek = function($event) {
+		var sound = $scope.player.sounds.ownCloudSound;
+		sound.setPosition($event.offsetX * sound.durationEstimate / $event.currentTarget.clientWidth);
+	};
+	
 	playlistService.subscribe('play', function(){
 		// fetch track and start playing
 		$scope.next();
diff --git a/js/public/app.js b/js/public/app.js
index 318f64a55..4945f634c 100644
--- a/js/public/app.js
+++ b/js/public/app.js
@@ -103,8 +103,9 @@ angular.module('Music').controller('PlayerController',
 	$scope.shuffle = false;
 
 	$scope.eventsBeforePlaying = 2;
+	$scope.$playPosition = $('.play-position');
+	$scope.$bufferBar = $('.buffer-bar');
 	$scope.$playBar = $('.play-bar');
-	$scope.$buffer = $('.buffer');
 
 	// will be invoked by the audio factory
 	$rootScope.$on('SoundManagerReady', function() {
@@ -306,6 +307,12 @@ angular.module('Music').controller('PlayerController',
 				whileplaying: function() {
 					$scope.setTime(this.position/1000, this.durationEstimate/1000);
 				},
+				whileloading: function() {
+					var position = this.buffered.reduce(function(prevBufferEnd, buffer) {
+						return buffer.end > prevBufferEnd ? buffer.end : prevBuffer.end;
+					}, 0);
+					$scope.setBuffer(position/1000, this.durationEstimate/1000);
+				},
 				onstop: function() {
 					$scope.setPlay(false);
 				},
@@ -387,8 +394,12 @@ angular.module('Music').controller('PlayerController',
 
 	// only call from external script
 	$scope.setTime = function(position, duration) {
+		$scope.$playPosition.text($filter('playTime')(position) + ' / ' + $filter('playTime')(duration));
 		$scope.$playBar.css('width', (position / duration * 100) + '%');
-		$scope.$buffer.text($filter('playTime')(position) + ' / ' + $filter('playTime')(duration));
+	};
+	
+	$scope.setBuffer = function(position, duration) {
+		$scope.$bufferBar.css('width', (position / duration * 100) + '%');
 	};
 
 	$scope.toggle = function(forcePlay) {
@@ -422,6 +433,11 @@ angular.module('Music').controller('PlayerController',
 		}
 	};
 
+	$scope.seek = function($event) {
+		var sound = $scope.player.sounds.ownCloudSound;
+		sound.setPosition($event.offsetX * sound.durationEstimate / $event.currentTarget.clientWidth);
+	};
+	
 	playlistService.subscribe('play', function(){
 		// fetch track and start playing
 		$scope.next();
diff --git a/templates/main.php b/templates/main.php
index f7c804eb1..952cffa2f 100644
--- a/templates/main.php
+++ b/templates/main.php
@@ -40,10 +40,11 @@
 				<span class="artist" title="{{ currentArtist.name }}">{{ currentArtist.name }}</span>
 			</div>
 			<div ng-show="currentTrack.title" class="progress-info">
-				<span ng-hide="buffering" class="buffer" muted"></span>
+				<span ng-hide="buffering" class="play-position muted" muted">&nbsp;</span>
 				<span ng-show="buffering" class="muted" translate>Loading ...</span>
 				<div class="progress">
-					<div class="seek-bar">
+					<div class="seek-bar" ng-click="seek($event)">
+						<div class="buffer-bar"></div>
 						<div class="play-bar"></div>
 					</div>
 				</div>