Seek

owncloud · Mar 18, 2014 · 62533d6 · 62533d6
1 parent 8cec86b
commit 62533d6
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 9 deletions.
diff --git a/css/style-playerbar.css b/css/style-playerbar.css
@@ -134,19 +134,34 @@
 	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;
+	height: 15px;
 }
 
-#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 {
+	position: absolute;
+	left: 0;
+	top: 0;
+	height: 15px;
+	width: 0%;
+	background-color: #1d2d44;
+}
+
+#playerbar .buffer-bar {
+	position: absolute;
+	left: 0;
+	top: 0;
+	height: 15px;
 	width: 0%;
 	background-color: #1d2d44;
+	opacity: 0.1;
 }
 
 #shuffle, #repeat {

diff --git 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
@@ -102,8 +102,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() {
@@ -305,6 +306,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);
 				},
@@ -386,8 +393,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) {
@@ -421,6 +432,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
@@ -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>