From 3ea894ea683a3bdaa1589acccf9001abab8a32ff Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kasper=20Rynning-T=C3=B8nnesen?= <kasper@kasperrt.no>
Date: Fri, 8 May 2015 21:40:02 +0200
Subject: [PATCH] testing

---
 index.php            | 45 ++++++++++++++++++++++++++++++++++++++++++++
 static/css/style.css |  9 +++++++++
 static/js/search.js  | 10 +++++++++-
 3 files changed, 63 insertions(+), 1 deletion(-)

diff --git a/index.php b/index.php
index 25603f5f..59a7d3c2 100755
--- a/index.php
+++ b/index.php
@@ -34,6 +34,51 @@
                 </ul>
 
                 <ul class="right control-list">
+                  <li id="search_loader" class="valign-wrapper hide">
+                      <div class="valign">
+                         <div class="preloader-wrapper small active">
+                          <div class="spinner-layer spinner-blue">
+                            <div class="circle-clipper left">
+                              <div class="circle"></div>
+                            </div><div class="gap-patch">
+                              <div class="circle"></div>
+                            </div><div class="circle-clipper right">
+                              <div class="circle"></div>
+                            </div>
+                          </div>
+
+                          <div class="spinner-layer spinner-red">
+                            <div class="circle-clipper left">
+                              <div class="circle"></div>
+                            </div><div class="gap-patch">
+                              <div class="circle"></div>
+                            </div><div class="circle-clipper right">
+                              <div class="circle"></div>
+                            </div>
+                          </div>
+
+                          <div class="spinner-layer spinner-yellow">
+                            <div class="circle-clipper left">
+                              <div class="circle"></div>
+                            </div><div class="gap-patch">
+                              <div class="circle"></div>
+                            </div><div class="circle-clipper right">
+                              <div class="circle"></div>
+                            </div>
+                          </div>
+
+                          <div class="spinner-layer spinner-green">
+                            <div class="circle-clipper left">
+                              <div class="circle"></div>
+                            </div><div class="gap-patch">
+                              <div class="circle"></div>
+                            </div><div class="circle-clipper right">
+                              <div class="circle"></div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                      </li>
                     <li>
                         <a class="nav-btn" href="#find" id="search-btn" onclick="showSearch();">
                             <i class="mdi-action-search"></i>
diff --git a/static/css/style.css b/static/css/style.css
index 3c5d2173..572da27d 100755
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -192,6 +192,15 @@ hide mdi-action-visibility mdi-action-visibility-off
 
 /*------------------- Channel page ---------------------------------------------------------------------------- */
 
+#search_loader {
+  height:64px;
+  padding: 0 15px;
+}
+
+#search_loader:hover {
+  background-color:rgba(0,0,0,0);
+}
+
 #player_overlay{
   background-color:black;
   position: absolute;
diff --git a/static/js/search.js b/static/js/search.js
index fec649f1..393525a1 100755
--- a/static/js/search.js
+++ b/static/js/search.js
@@ -158,6 +158,9 @@ function search(search_input){
 
 			var vid_url = "https://www.googleapis.com/youtube/v3/videos?part=contentDetails,snippet,id&key="+api_key+"&id=";
 
+			if(contains($("#search_loader").attr("class").split(" "), "hide"))
+				$("#search_loader").removeClass("hide");
+
 			$.ajax({
 				type: "GET",
 				url: yt_url,
@@ -187,7 +190,7 @@ function search(search_input){
 							duration = duration.replace("PT","").replace("H","h ").replace("M","m ").replace("S","s")
 							thumb=song.snippet.thumbnails.medium.url;
 
-							$("#results").append(result_html);
+
 							var song = $("#result");
 							song.find(".search-title").text(title);
 							song.find(".result_info").text(duration);
@@ -198,6 +201,11 @@ function search(search_input){
 						}
 					});
 
+					$("#results").append(result_html);
+
+					if(!contains($("#search_loader").attr("class").split(" "), "hide"))
+						$("#search_loader").addClass("hide");
+
 					$(".add-many").click(function(e) {
 					    e.preventDefault();
 					    e.stopPropagation();