I AM THE MASTER OF CSS. also v3 api works

index.php

@@ -26,7 +26,7 @@
                     <span id="chan" class="chan clickable" title="Show big URL" onclick="show()"><?php echo(ucfirst($list));?></span>
                 </div>
 
-                <ul class="title-container hide-on-med-and-down">
+                <ul class="title-container">
                     <li class="song-title" id="song-title" onclick="showSearch();">
                         Loading...
                     </li>
@@ -64,15 +64,17 @@
                 <ul class="side-nav" id="settings-bar">
                     <?php include("php/panel.php");?>
                 </ul>
-                <div id="results"></div>
+                <div id="results" class="search_results">
+                    <div id="temp-results">
+                        <div id="result" class="result">
+                            <img class="thumb">
+                            <div id="title">
+                                <span class="search-title"></span>
+                                <div class="result_info"></div>
+                            </div>
+                        </div>
+                    </div>
                 </div>
-            <div class="nav-wrapper hide-on-large-only">
-                <ul class="second-title-container">
-                    <li class="song-title second-title" id="second-song-title" onclick="showSearch();" title="Loading">Loading</li>
-                    <li class="search-container hide" id="search-wrapper">
-                        <input id="search" class="search_input" type="search" required="" title="Search for songs..." spellcheck="false" placeholder="Find song on youtube" onsubmit="null;" autocomplete="off">
-                    </li>
-                </ul>
             </div>
         </nav>
       </div>

static/css/style.css

@@ -75,12 +75,12 @@ left: initial;
 display: inline;
 }
 
-@media only screen and (min-width: 992px) {
-    nav .zbrand {
-        display: inline-block;
+.title-container{
+    position: absolute;
+    margin-top: 64px;
+    width: 99%;
+    left: 0;
 }
-}
-
 .navbar-fixed {
     height: 128px;
 }
@@ -89,6 +89,16 @@ display: inline;
     .navbar-fixed {
         height: 64px;
     }
+    nav .zbrand {
+        display: inline-block;
+    }
+    .title-container{
+        position: initial;
+        margin-top: initial;
+        width: 65%;
+        width: calc(90% - 256px - 130px);
+        left: initial;
+    }
 }
 
 .fullwidth{
@@ -226,8 +236,6 @@ hide mdi-action-visibility mdi-action-visibility-off
 }
 
 .title-container{
-    width: 65%;
-    width: calc(90% - 256px - 130px);
     padding-left: 30px;
     display: inline-block;
     height: 100%;
@@ -333,11 +341,18 @@ hide mdi-action-visibility mdi-action-visibility-off
 }
 .card-image{cursor:pointer}
 .card{margin:5px 0 5px 0 !important;}
-#result img{float:left;padding-right:20px !important;}
-#result{height:100px;margin-left:40px;}
+.result img{
+    float:left;
+    height: 70px;
+    border-radius: 3px;
+    margin: 15px 20px;
+}
+.result{height:100px;margin-left:40px;}
 #results{
     background-color: rgba(0,0,0,0.6);
     margin-top: -27px;
+    max-height: 600px;
+    overflow: overlay;
 }
 .result:hover {
   background-color: rgba(0,0,0,0.4);
@@ -356,9 +371,7 @@ hide mdi-action-visibility mdi-action-visibility-off
 }
 
 .result {
-  border-bottom: solid 1px #E5E5E5;
-  text-align: left;
-  height: 70px;
+  border-bottom: solid 1px rgba(229, 229, 229, 0.5);
   cursor: pointer;
   width:93%;
 }
@@ -529,6 +542,6 @@ hide mdi-action-visibility mdi-action-visibility-off
 {
     height:100%;
     background-color:rgba(0,0,0,0.5);
-    -webkit-transition: width 1s ease;
-    transition: width 1s ease;
+    /*-webkit-transition: width 1s ease;
+    transition: width 1s ease;*/
 }

static/js/search.js

@@ -1,12 +1,15 @@
 var old_input="";
 var timer = 0;
+var result_html = $("#temp-results").html();
+$( "#results" ).empty();
+var time_regex = /P((([0-9]*\.?[0-9]*)Y)?(([0-9]*\.?[0-9]*)M)?(([0-9]*\.?[0-9]*)W)?(([0-9]*\.?[0-9]*)D)?)?(T(([0-9]*\.?[0-9]*)H)?(([0-9]*\.?[0-9]*)M)?(([0-9]*\.?[0-9]*)S)?)?/
+
 /*jshint multistr: true */
 
 $(document).ready(function()
 {
+
 	$( "#results" ).hover( function() { $("div.result").removeClass("hoverResults"); i = 0; }, function() { });
-
-
 	$("#search").focus();
 
 	$('#base').bind("keyup keypress", function(e) {
@@ -19,7 +22,8 @@ $(document).ready(function()
 
 	$(".search_input").focus();
 	$(".search_input").keyup(function(event) {
-		var search_input = $(this).val();
+		search_input = $(this).val();
+		console.log(search_input);
 		if(event.keyCode == 13 && search_input == "fireplace")
 		{
 			if(!peis)
@@ -114,6 +118,10 @@ $(document).keyup(function(e) {
 
 function showSearch(){
 	$("#search-wrapper").toggleClass("hide");
+	if(window.mobilecheck())
+	{
+		$(".search_input").focus();
+	}
 	$("#song-title").toggleClass("hide");
 	$("#search").focus();
 }
@@ -121,9 +129,9 @@ function showSearch(){
 function search(search_input){
 
 
-		$("#results").html('');
-		if(search_input !== ""){
-			var keyword= encodeURIComponent(search_input);
+		$(".search_results").html('');
+		if(window.search_input !== ""){
+			var keyword= encodeURIComponent(window.search_input);
 
 			//response= x
 			var yt_url = "https://www.googleapis.com/youtube/v3/search?key=***REMOVED***&videoEmbeddable=true&part=id&fields=items(id)&type=video&order=viewCount&safeSearch=none&maxResults=25";
@@ -152,10 +160,23 @@ function search(search_input){
 				success: function(response){
 					$.each(response.items, function(i,song)
 					{
-						var title=song.snippet.title;
+						var duration=song.contentDetails.duration;
+						secs=durationToSeconds(duration)
+						if(!longsongs || secs<720){
+							title=song.snippet.title;
+							enc_title=encodeURIComponent(title).replace(/'/g, "\\\'");
 							id=song.id;
-						duration=song.contentDetails.duration;
-						viewers=
+							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);
+							song.find(".thumb").attr("src", thumb);
+							song.attr("onclick", "submitAndClose('"+id+"','"+enc_title+"',"+secs+");");
+							song.attr("id",id);
+						}
 					});
 				}
 				});
@@ -190,3 +211,11 @@ function submit(id,title,type, duration){
 		$(".main").removeClass("clickthrough");
 	}
 }
+
+function durationToSeconds(duration) {
+    var matches = duration.match(time_regex);
+    hours= parseInt(matches[12])||0,
+    minutes= parseInt(matches[14])||0,
+    seconds= parseInt(matches[16])||0
+    return hours*60*60+minutes*60+seconds;
+}

static/js/youtube.js

@@ -75,6 +75,8 @@ socket.on(chan.toLowerCase()+",np", function(obj)
 			if(ytplayer.getDuration() > seekTo)
 				ytplayer.seekTo(seekTo);
 		}
+		else
+			getTitle(song_title, viewers);
 	}
 });
 
@@ -209,13 +211,13 @@ function getTitle(titt, v)
 {
 	var outPutWord = v > 1 ? "viewers" : "viewer";
 	var title= decodeURIComponent(titt);
-	var elem = $('#song-title');
+	var elem = document.getElementById('song-title');
+	
 	document.title = title + " • Zöff";
-	if(!window.mobilecheck()){
-		elem.text = title;
+		elem.innerHTML = title;
 		document.getElementById('viewers').innerHTML = v + " " + outPutWord;
 		elem.title = title + " • " + v + " " + outPutWord;
-	}
+
 }
 
 function errorHandler(newState)