Added custom find for playlist

index.php

@@ -42,6 +42,9 @@
 
 				</div>
 					<div class="result hiddenAdmin" id="adminPanel"><?php include("php/panel.php");?> </div>
+					<form id="findform">
+							<input id="findform-input" type="text" onsubmit="null;">
+					</form>
 					<div id="playlist">
 						<div id="wrapper">
 							<img src="static/ajax-loader.gif" id="loading" alt="loading">

js/admin.js

@@ -6,8 +6,11 @@ function admin()
 	adminTogg = !adminTogg;
 	if(adminTogg)
 	
-	if(adminTogg) $("#playlist").height($("#player").height()-270+30); //opening
-	if(!adminTogg)$("#playlist").height($("#player").height()+30);; //closing
+	if(find) extraHeight = 0;
+	else extraHeight = 30;
+
+	if(adminTogg) $("#playlist").height($("#player").height()-270+extraHeight); //opening
+	if(!adminTogg)$("#playlist").height($("#player").height()+extraHeight);; //closing
 
 	$("#adminPanel").toggleClass("hiddenAdmin");
 }

js/list.js

@@ -36,13 +36,14 @@ function updateList()
 		$("#wrapper").empty();
 
 		$.each(list.songs, function(j, listeID){
-
 			var video_title=listeID.title.replace(/\\\'/g, "'").replace(/"/g,"'").replace(/&/g,"&");
 			var video_id = listeID.id;
+			if(find && video_id != bright) brightness = "brightness";
+			else brightness = "";
 			var video_thumb = "http://i.ytimg.com/vi/"+video_id+"/mqdefault.jpg";
 			var odd = ""; if(j%2===0)odd=" oddlist";
 			var delsong = ""; if(pass_corr=="correct")delsong="<input id='del' title='Remove' type='button' class='button' value='X' onclick=\"vote('"+video_id+"','del')\">";
-			var finalhtml="<div id='result' class='"+video_id+" result lresult"+odd+"'>"+
+			var finalhtml="<div id='result' class='"+video_id+" result "+brightness+" lresult"+odd+"'>"+
 			"<img class='thumb lthumb' src='"+video_thumb+"'>"+
 			"<div class='ltitle'>"+video_title+"</div>"+
 			"<div class='votes'>"+listeID.votes+

php/footer.php

@@ -5,6 +5,7 @@
 <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
 <script type="text/javascript" src="static/js/iscroll-min.js"></script>  
 <script type="text/javascript" src="static/js/list.js"></script>  
+<script type="text/javascript" src="static/js/searchlist.js"></script>
 <script type="text/javascript" src="static/js/playercontrols.js"></script>
 <script type="text/javascript" src="static/js/youtube.js"></script>
 <script type="text/javascript" src="static/js/search.js"></script> 

static/style.css

@@ -8,6 +8,47 @@ body {
 /* WebKit/Blink Browsers */
 }
 
+.brightness {
+    -webkit-filter:brightness(50%);
+    filter:brightness(50%);
+    background-color:rgba(0,0,0,0);
+}
+
+.fullbrightness {
+    -webkit-filter:brightness(100%);
+    filter:brightness(100%);
+    background-color:rgba(0,0,0,0.5);
+}
+
+#findform {
+    /*position: absolute;
+    top:50%;
+    width:38%;
+    display:none;*/
+    overflow:hidden;
+    height:0px;
+    padding:0px;
+    margin:0px;
+    -webkit-transition:height 1s;
+}
+
+#findform-input {
+    color:#fff;
+    height:24px;
+    font-size:15px;
+    width:60%;
+    padding:5px;
+    margin:5px 0;
+    border-radius:2px;
+    border:none;
+    text-align:left;
+    background-color:rgba(255,255,255,0.2);
+}
+
+.display {
+    height:30px !important;
+}
+
 .top {
     font-family:'Open Sans',sans-serif;
     font-weight:300;
@@ -455,6 +496,8 @@ input[type="radio"] {
     overflow:hidden;
     background-color:rgba(0,0,0,0.2);
     transition:height .5s;
+    -webkit-filter:brightness(100%) !important;
+    filter:brightness(100%) !important;
 }
 
 .hiddenAdmin {