Better autocomplete for channelsearch + descriptions on frontpage

public/css/style.css

@@ -594,7 +594,13 @@ display: inline-flex;
 
 .card .card-action {
     padding: 0;
+    background: white;
 }
+
+.description_text:first-letter{
+  text-transform: uppercase;
+}
+
 .card .card-action a {
   padding: 0;
   margin: 0;
@@ -994,6 +1000,44 @@ hide mdi-action-visibility mdi-action-visibility-off
   max-height: 400px;
 }
 
+.autocomplete-content.dropdown-content{
+  position:absolute;
+  width:100% !important;
+  margin-left: 0px !important;
+  top: 57px;
+}
+
+.card-title{
+  text-transform: capitalize;
+}
+
+.card .card-reveal {
+    padding: 10px;
+    transition: transform .1s;
+    display:none;
+    transform: translateY(0%);
+}
+
+.room-namer.autocomplete{
+  margin-left:0px !important;
+}
+
+.channel-finder .input-field{
+  display: flex;
+  width: 100%;
+}
+
+.channel-finder .input-field .prefix{
+  color:white;
+  font-size:17px;
+  left: 30px;
+  top: -8px;
+}
+
+.autocomplete-content li .highlight {
+    color: orange;
+}
+
 #thumbnail_image{
   text-align: center;
 }
@@ -1829,6 +1873,10 @@ nav ul li:hover, nav ul li.active {
 }
 
 @media only screen and (max-width: 736px) and (max-width:600px), only screen and (max-device-width: 736px)  and (orientation: landscape){
+    .autocomplete-content.dropdown-content{
+      width:95vw !important;
+    }
+
     #playbar{
       display:block;
       position: fixed;

public/js/frontpage.js

@@ -44,7 +44,6 @@ var Frontpage = {
 
   populate_channels: function(lists)
   {
-      var output = "";
       var num = 0;
       var pinned;
       if(lists[0].pinned == 1){
@@ -72,10 +71,12 @@ var Frontpage = {
           {
             var id = lists[x].id;
             var viewers = lists[x].viewers;
+            var description = lists[x].description;
             var img = "background-image:url('https://img.youtube.com/vi/"+id+"/hqdefault.jpg');";
             if(lists[x].thumbnail){
               img = "background-image:url('" + lists[x].thumbnail + "');";
             }
+
             var song_count = lists[x].count;
 
             //$("#channels").append(channel_list);
@@ -98,6 +99,14 @@ var Frontpage = {
             card.find(".chan-bg").attr("style", img);
             card.find(".chan-link").attr("href", chan);
 
+            if(description != ""){
+              card.find(".card-title").html(chan);
+              card.find(".description_text").html(description);
+            } else {
+              card.find(".card-reveal").remove();
+              card.find(".card").removeClass("sticky-action")
+            }
+
             $("#channels").append(card.html());
 
             //$("#channels").append(card);
@@ -108,17 +117,25 @@ var Frontpage = {
       var options_list = lists.slice();
 
       options_list = options_list.sort(Frontpage.sortFunction_active);
+      var data = {};
       //num = 0;
       for(var x in options_list){
-        if(options_list[x].count > 5 && Math.floor((new Date).getTime()/1000) - options_list[x].accessed < 604800){
+        //if(options_list[x].count > 5 && Math.floor((new Date).getTime()/1000) - options_list[x].accessed < 604800){
-          var chan = options_list[x].channel;
+          /*var chan = options_list[x].channel;
-          output+="<option value='"+chan+"'> ";
+          output+="<option value='"+chan+"'> ";*/
-        }
+          data[options_list[x].channel] = null;
+        //}
       }
 
+      var to_autocomplete = "input.desktop-search";
+      if(Helper.mobilecheck()) to_autocomplete = "input.mobile-search";
+
+      $(to_autocomplete).autocomplete({
+        data: data,
+        limit: 5, // The max amount of results that can be shown at once. Default: Infinity.
+      });
+
       document.getElementById("preloader").style.display = "none";
-      document.getElementById("searches").innerHTML = output;
-      document.getElementById("searches_mobile").innerHTML = output;
       //Materialize.fadeInImage('#channels');
       $("#channels").fadeIn(800);
       $("#searchFrontpage").focus();

public/js/listeners.js

@@ -634,9 +634,9 @@ window.disable_debug = disable_debug;
 $(document).keyup(function(e) {
   	if(event.keyCode == 27){
     	$("#results").html("");
-    	if(!Helper.contains($("#search-wrapper").attr("class").split(" "), "hide"))
+    	if($("#search-wrapper").length != 0 && !Helper.contains($("#search-wrapper").attr("class").split(" "), "hide"))
       		$("#search-wrapper").toggleClass("hide");
-    	if(Helper.contains($("#song-title").attr("class").split(" "), "hide"))
+    	if($("#song-title").length != 0 && Helper.contains($("#song-title").attr("class").split(" "), "hide"))
       		$("#song-title").toggleClass("hide");
 
     	if($("#search-btn i").html() == "close")
@@ -644,12 +644,28 @@ $(document).keyup(function(e) {
       		//$("#search-btn i").html("mdi-navigation-close");
       		$("#search-btn i").html("search");
     	}
-        if(!Helper.contains($(".search-container").attr("class").split(" "), "hide")){
+        if($(".search-container").length != 0 && !Helper.contains($(".search-container").attr("class").split(" "), "hide")){
             $("#results").toggleClass("hide");
         }
   	}
 });
 
+$(document).on("mouseenter", ".card.sticky-action", function(e){
+    var that = this;
+    $(that).find(".card-reveal").attr("style", "display: block;");
+    setTimeout(function(){
+        $(that).find(".card-reveal").attr("style", "display: block;transform: translateY(-100%);");
+    }, 50);
+});
+
+$(document).on("mouseleave", ".card.sticky-action", function(e){
+    var that = this;
+    $(that).find(".card-reveal").attr("style", "display: block;transform: translateY(0%);");
+    setTimeout(function(){
+        $(that).find(".card-reveal").attr("style", "display: none;");
+    }, 100);
+});
+
 $(document).on("click", "#offline-mode", function(e){
 	e.preventDefault();
     if(!Crypt.get_offline()){

public/js/remotecontroller.js

@@ -16,7 +16,7 @@ $(document).ready(function (){
 
     $("#about").modal();
     $("#contact").modal();
-    
+
     if(window.location.hostname == "remote.zoff.no") add = "https://zoff.no";
     else add = "localhost";
     socket = io.connect(add + ':8080', connection_options);
@@ -101,7 +101,6 @@ var Remotecontroller = {
           },*/
           stop:function(event, ui) {
             socket.emit("id", {id: id, type: "volume", value: ui.value});
-            //console.log(ui.value);
           }
       });
     }else

public/php/frontpage.php

@@ -81,24 +81,25 @@ if(isset($_GET['chan'])){
         <div id="mega-background"></div>
         <h5>Create a radio channel, collaborate and listen</h5>
             <form class="channel-finder">
-                <p class="prething">zoff.no/</p>
+                    <div class="input-field">
-                <input
+                      <p class="prefix">zoff.no/</p>
-                    class="input-field room-namer"
+                      <input
-                    type="text"
+                          class="room-namer autocomplete desktop-search"
-                    id="searchFrontpage"
+                          type="text"
-                    name="chan"
+                          id="autocomplete-input"
-                    placeholder="chill"
+                          name="chan"
-                    title="Type channel name here to create or listen to a channel. Only alphanumerical chars. [a-zA-Z0-9]+"
+                          placeholder="chill"
-                    autocomplete="off"
+                          title="Type channel name here to create or listen to a channel. Only alphanumerical chars. [a-zA-Z0-9]+"
-                    autofocus=""
+                          autocomplete="off"
-                    list="searches"
+                          autofocus="on"
-                    required
+                          list="searches"
-                    pattern="[a-zA-Z0-9]+"
+                          required
-                    spellcheck="false"
+                          pattern="[a-zA-Z0-9]+"
-                    maxlength="18"
+                          spellcheck="false"
-                />
+                          maxlength="18"
-                <datalist id="searches"></datalist>
+                      />
-                <button class="listen-button">Listen</button>
+                    <button class="listen-button col s2">Listen</button>
+                  </div>
             </form>
             <div class="pitch outline">
                 <div>Live &amp; democratic playlists with YouTube Music</div>
@@ -110,9 +111,9 @@ if(isset($_GET['chan'])){
             <form class="channel-finder-mobile row" id="base">
                     <div class="input-field col s12">
                         <input
-                            class="input-field"
+                            class="autocomplete mobile-search"
                             type="text"
-                            id="search-mobile"
+                            id="searchFrontpage"
                             name="chan"
                             title="Type channel name here to create or listen to a channel. Only alphanumerical chars. [a-zA-Z0-9]+"
                             autocomplete="off"
@@ -139,7 +140,7 @@ if(isset($_GET['chan'])){
             <div id="channel-list-container">
             <ul class="row" id="channels">
                     <li id="chan-card" class="col s6 m4 l3">
-                        <div class="card">
+                        <div class="card sticky-action">
                             <a class="chan-link">
                                 <div class="chan-bg card-image cardbg"></div>
                                 <div class="card-content">
@@ -157,6 +158,10 @@ if(isset($_GET['chan'])){
                                 <div class="card-action noselect">
                                     <span class="chan-link waves-effect waves-orange btn-flat">Listen</span>
                                 </div>
+                                <div class="card-reveal">
+                                  <span class="card-title grey-text text-darken-4"></span>
+                                  <p class="description_text"></p>
+                                </div>
                             </a>
                         </div>
                     </li>