Playback performance improvement

* no use of angular bindings to update duration and position.
owncloud · Mar 19, 2014 · de85928 · de85928
1 parent 6817398
commit de85928
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 28 deletions.
diff --git a/js/app/controllers/playercontroller.js b/js/app/controllers/playercontroller.js
@@ -21,8 +21,8 @@
 
 
 angular.module('Music').controller('PlayerController',
-	['$scope', '$rootScope', 'playlistService', 'Audio', 'Artists', 'Restangular', 'gettext', 'gettextCatalog',
-	function ($scope, $rootScope, playlistService, Audio, Artists, Restangular, gettext, gettextCatalog) {
+	['$scope', '$rootScope', 'playlistService', 'Audio', 'Artists', 'Restangular', 'gettext', 'gettextCatalog', '$filter',
+	function ($scope, $rootScope, playlistService, Audio, Artists, Restangular, gettext, gettextCatalog, $filter) {
 
 	$scope.playing = false;
 	$scope.buffering = false;
@@ -37,6 +37,8 @@ angular.module('Music').controller('PlayerController',
 	$scope.shuffle = false;
 
 	$scope.eventsBeforePlaying = 2;
+	$scope.$playBar = $('.play-bar');
+	$scope.$buffer = $('.buffer');
 
 	// will be invoked by the audio factory
 	$rootScope.$on('SoundManagerReady', function() {
@@ -319,17 +321,8 @@ angular.module('Music').controller('PlayerController',
 
 	// only call from external script
 	$scope.setTime = function(position, duration) {
-		// determine if already inside of an $apply or $digest
-		// see http://stackoverflow.com/a/12859093
-		if($scope.$$phase) {
-			$scope.duration = duration;
-			$scope.position = position;
-		} else {
-			$scope.$apply(function(){
-				$scope.duration = duration;
-				$scope.position = position;
-			});
-		}
+		$scope.$playBar.css('width', (position / duration * 100) + '%');
+		$scope.$buffer.text($filter('playTime')(position) + ' / ' + $filter('playTime')(duration));
 	};
 
 	$scope.toggle = function(forcePlay) {

diff --git a/js/public/app.js b/js/public/app.js
@@ -87,8 +87,8 @@ angular.module('Music').controller('MainController',
 }]);
 
 angular.module('Music').controller('PlayerController',
-	['$scope', '$rootScope', 'playlistService', 'Audio', 'Artists', 'Restangular', 'gettext', 'gettextCatalog',
-	function ($scope, $rootScope, playlistService, Audio, Artists, Restangular, gettext, gettextCatalog) {
+	['$scope', '$rootScope', 'playlistService', 'Audio', 'Artists', 'Restangular', 'gettext', 'gettextCatalog', '$filter',
+	function ($scope, $rootScope, playlistService, Audio, Artists, Restangular, gettext, gettextCatalog, $filter) {
 
 	$scope.playing = false;
 	$scope.buffering = false;
@@ -103,6 +103,8 @@ angular.module('Music').controller('PlayerController',
 	$scope.shuffle = false;
 
 	$scope.eventsBeforePlaying = 2;
+	$scope.$playBar = $('.play-bar');
+	$scope.$buffer = $('.buffer');
 
 	// will be invoked by the audio factory
 	$rootScope.$on('SoundManagerReady', function() {
@@ -385,17 +387,8 @@ angular.module('Music').controller('PlayerController',
 
 	// only call from external script
 	$scope.setTime = function(position, duration) {
-		// determine if already inside of an $apply or $digest
-		// see http://stackoverflow.com/a/12859093
-		if($scope.$$phase) {
-			$scope.duration = duration;
-			$scope.position = position;
-		} else {
-			$scope.$apply(function(){
-				$scope.duration = duration;
-				$scope.position = position;
-			});
-		}
+		$scope.$playBar.css('width', (position / duration * 100) + '%');
+		$scope.$buffer.text($filter('playTime')(position) + ' / ' + $filter('playTime')(duration));
 	};
 
 	$scope.toggle = function(forcePlay) {

diff --git a/templates/main.php b/templates/main.php
@@ -40,11 +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="muted">{{ position | playTime }} / {{ duration | playTime }}</span>
+				<span ng-hide="buffering" class="buffer" muted"></span>
 				<span ng-show="buffering" class="muted" translate>Loading ...</span>
 				<div class="progress">
 					<div class="seek-bar">
-						<div class="play-bar" style="width: {{ position / duration * 100 }}%;"></div>
+						<div class="play-bar"></div>
 					</div>
 				</div>
 			</div>