From 1a12c182973196c04ba066fe28f9c1a9644308ca Mon Sep 17 00:00:00 2001
From: Hector Leon Zarco Garcia <hector.zarco@king.com>
Date: Wed, 9 Sep 2015 13:08:02 +0200
Subject: [PATCH] Add search delay for improve network performance

---
 controllers/player.js | 16 +++++++++++++---
 index.html            |  3 ++-
 style.css             |  4 ++--
 3 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/controllers/player.js b/controllers/player.js
index e93c52f..99d4954 100644
--- a/controllers/player.js
+++ b/controllers/player.js
@@ -2,7 +2,10 @@
 
 	var module = angular.module('PlayerApp');
 
-	module.controller('PlayerController', function($scope, $rootScope, Auth, API, PlayQueue, Playback, $location) {
+	module.controller('PlayerController', function($scope, $rootScope, Auth, API, PlayQueue, Playback, $location, $timeout) {
+		var searchTimeoutId;
+		var searchDelay = 1000;
+		
 		$scope.view = 'welcome';
 		$scope.profileUsername = Auth.getUsername();
 		$scope.playlists = [];
@@ -11,6 +14,7 @@
 		$scope.duration = 4000;
 		$scope.trackdata = null;
 		$scope.currenttrack = '';
+		$scope.isSearching = false;
 
 		function updatePlaylists() {
 			if ($scope.profileUsername != '') {
@@ -81,8 +85,14 @@
 		$scope.query = '';
 
 		$scope.loadsearch = function() {
-			console.log('search for', $scope.query);
-			$location.path('/search').search({ q: $scope.query }).replace();
+			$timeout.cancel(searchTimeoutId);
+			$scope.isSearching = true;
+
+			searchTimeoutId = $timeout(function() {
+				console.log('search for', $scope.query);
+				$scope.isSearching = false;
+				$location.path('/search').search({ q: $scope.query }).replace();
+			}, searchDelay)
 		};
 
 
diff --git a/index.html b/index.html
index ab119a5..a85edce 100644
--- a/index.html
+++ b/index.html
@@ -34,7 +34,8 @@
 			<div ng-controller="PlayerController">
 				<div class="topgroup">
 					<div class="searchbox">
-						<input type="text" ng-model="query" ng-change="loadsearch()" ng-keyup="loadsearch()" placeholder="Search..." />
+						<input type="search" ng-model="query" ng-change="loadsearch()" ng-keyup="loadsearch()" placeholder="Search..." /> 
+						<span ng-hide="!isSearching">Searching...</span>
 					</div>
 					<div class="titlebox">
 						<a href="#/home">SAMPLE PLAYER APPLICATION</a>
diff --git a/style.css b/style.css
index 8ed9a42..946cd58 100644
--- a/style.css
+++ b/style.css
@@ -92,7 +92,7 @@ hr {
 	position: absolute;
 	left: 0px;
 	top: 0px;
-	width: 220px;
+	width: 300px;
 	box-sizing: border-box;
 	padding: 7px;
 }
@@ -102,7 +102,7 @@ hr {
 	padding: 5px 10px;
 	border-radius: 20px;
 	background-color: #ddd;
-	width: 100%;
+	width: 200px;
 	outline: none;
 }