Updated find-div to say how many were found, and the current found in the array.

- Fixed bug where updating the searchtext when CTRL+F (find) didn't reset the search in the list
- Fixed bug where using the find function when a song is changed didn't reset the search

server/public/assets/css/style.css

@@ -837,6 +837,27 @@ hide mdi-action-visibility mdi-action-visibility-off
   color: white;
 }
 
+#find_form {
+  display: flex;
+  flex-direction: row;
+  align-content: center;
+  justify-content: center;
+}
+
+.num_of_found {
+  display: flex;
+  align-self: center;
+  color: white;
+  padding-left: 8px;
+}
+
+#close_find_form_button {
+  display: flex;
+  align-self: center;
+  padding-left: 10px;
+  color: white;
+}
+
 .highlight{
   background: rgba(255, 255, 255, 0.2) !important;
 }

server/public/assets/js/list.js

@@ -127,6 +127,8 @@ var List = {
 				if(full_playlist.length > 0) {
 					Player.sendNext({title: full_playlist[0].title, videoId: full_playlist[0].id});
 				}
+				found_array = [];
+				found_array_index = 0;
 				//if(!w_p) List.dragging(true);
 			break;
 		}

server/public/assets/js/listeners.js

@@ -59,6 +59,7 @@ var number_suggested 			= 0;
 var prev_chan_list 				= "";
 var prev_chan_player 			= "";
 var chromecastReady 			= false;
+var find_word = "";
 var found_array 				= [];
 var found_array_index 			= 0;
 var guid = "";
@@ -1693,6 +1694,7 @@ $(document).keydown(function(event) {
 			if(find_started){
 				$("#find_div").toggleClass("hide");
 				$("#find_input").focus();
+				find_word = "";
 			} else {
 				$("#find_div").toggleClass("hide");
 				$("#find_input").val("");
@@ -1700,6 +1702,7 @@ $(document).keydown(function(event) {
 				$(".highlight").removeClass("highlight");
 				found_array = [];
 				found_array_index = 0;
+				find_word = "";
 			}
 		} else if(event.keyCode == 32 && $(".search-container").hasClass("hide") && window.location.pathname != "/" &&
 		!$("#text-chat-input").is(":focus") &&
@@ -1728,6 +1731,19 @@ $(document).keydown(function(event) {
 	}
 });
 
+$(document).on("click", "#close_find_form_button", function(e) {
+	e.preventDefault();
+	find_start = false;
+	find_started = false;
+	$("#find_div").toggleClass("hide");
+	$("#find_input").val("");
+	$("#find_input").blur();
+	$(".highlight").removeClass("highlight");
+	found_array = [];
+	found_array_index = 0;
+	find_word = "";
+});
+
 $(document).keyup(function(event){
 	if((event.keyCode == 91 || event.keyCode == 17) && !find_started){
 		find_start = false;
@@ -1736,19 +1752,28 @@ $(document).keyup(function(event){
 
 $(document).on("submit", "#find_form", function(e){
 	e.preventDefault();
+	if(this.find_value.value != find_word) {
+		find_word = this.find_value.value;
+		found_array = [];
+		found_array_index = 0;
+	}
 	if(found_array.length == 0){
 		var that = this;
 		found_array_index = 0;
 		found_array = $.map(full_playlist, function(obj, index) {
-			if(obj.title.toLowerCase().indexOf(that.find_value.value.toLowerCase()) >= 0) {
+			if(obj.title.toLowerCase().indexOf(that.find_value.value.toLowerCase()) >= 0 && index != full_playlist.length-1) {
 				return index;
 			}
 		});
+		$("#num_found").text(found_array_index + 1);
+		$("#of_total_found").text(found_array.length);
 	} else {
 		found_array_index = found_array_index + 1;
 		if(found_array.length - 1 < found_array_index){
 			found_array_index = 0;
 		}
+		$("#num_found").text(found_array_index + 1);
+		$("#of_total_found").text(found_array.length);
 	}
 	if(found_array.length > 0 && found_array[found_array_index] != full_playlist.length - 1){
 		$(".highlight").removeClass("highlight");
@@ -1756,6 +1781,7 @@ $(document).on("submit", "#find_form", function(e){
 		$($("#wrapper").children()[found_array[found_array_index]]).addClass("highlight");
 		List.dynamicContentPageJumpTo(jump_to_page);
 	} else {
+		$(".highlight").removeClass("highlight");
 		Helper.log("none found");
 	}
 });

server/public/layouts/channel.handlebars

@@ -219,12 +219,16 @@
               </ul>
               <ul class="tabs playlist-tabs-loggedIn hide tabs-fixed-width" style="width: 96%;">
                 <li class="tab col s3"><a class="playlist-tab-links playlist-link active truncate" href="#wrapper">Playlist</a></li>
-                <li class="tab col s3"><a class="playlist-tab-links suggested-link truncate" href="#suggestions">Suggested<span class="new badge white hide"></a></li>
+                <li class="tab col s3"><a class="playlist-tab-links suggested-link truncate" href="#suggestions">Suggested<span class="new badge white hide"></span></a></li>
                 <li class="tab col s3"><a class="playlist-tab-links chat-link truncate" href="#chat">Chat<span class="new badge white hide"></span></a></li>
               </ul>
               <div id="find_div" class="hide">
                 <form id="find_form">
                   <input type="text" name="find_value" placeholder="Find.." id="find_input" autocomplete="off" />
+                  <div class="num_of_found">
+                        <span id="num_found">0</span>/<span id="of_total_found">0</span>
+                  </div>
+                  <a href="#" id="close_find_form_button"><i class="material-icons">clear</i></a>
                 </form>
               </div>
                 <div id="wrapper" class="tabs_height">