Added some stying, and made player controls work again

index.php

@@ -44,11 +44,12 @@
                     </ul>
                     <form id="searchform">
                         <div>
-                            <input id="search" type="search" required title="Search for songs..." spellcheck="false" placeholder="Search" onsubmit="null;" autocomplete="off">
+                            <input id="search" class="search_input" type="search" required title="Search for songs..." spellcheck="false" placeholder="Search" onsubmit="null;" autocomplete="off">
                             <!--<label for="search"><i class="mdi-action-search"></i></label>
                             <i class="mdi-navigation-close"></i>-->
                         </div>
                     </form>
+                    <div id="results"></div>
                 </div>
             </nav>
         </div>
@@ -58,23 +59,35 @@
             <div class="col s12 m9 video-container">
                 <div id="player" class="ytplayer"></div>
                 <div id="controls">
-                  <div id="playpause"><i class="mdi-av-play-arrow"></i></div>
+                  <div id="playpause">
+                    <i id="play" class="mdi-av-play-arrow hide"></i>
+                    <i id="pause" class="mdi-av-pause"></i>
+                  </div>
                   <div id="duration">00:00 / 00:00</div>
-                  <div id="volume-button"><i class="mdi-av-volume-up"></i></div>
+                  <div id="volume-button">
-                  <div id="fullscreen"><i class="mdi-navigation-fullscreen"></i></div>
+                    <i id="v-mute" class="mdi-av-volume-off"></i>
+                    <i id="v-low" class="mdi-av-volume-mute"></i>
+                    <i id="v-medium" class="mdi-av-volume-down"></i>
+                    <i id="v-full" class="mdi-av-volume-up"></i>
+                  </div>
+                  <div id="volume"></div>
+                  <div id="fullscreen">
+                    <i class="mdi-navigation-fullscreen"></i>
+                  </div>
+                  <div id="bar"></div>
                 </div>
             </div>
             <div id="playlist" class="col s12 m3">
                 <div id="wrapper">
                     <div id="list-song-html">
                         <div id="list-song" class="card list-song">
-                            <a class="clickable votebg">
+                            <a class="clickable votebg" title="Vote!">
                                 <span class="card-image cardbg list-image"></span>
                             </a>
                             <span class="card-content">
                                 <span class="flow-text truncate list-title"></span>
-                                <span class="highlighted hide">Votes:&nbsp;</span>
+                                <span class="highlighted">Votes:&nbsp;</span>
-                                <span class="list-votes hide"></span>
+                                <span class="list-votes"></span>
                             </span>
                             <div class="card-action hide">
                                 <a id="del" onclick="vote('id','del')" class="clickable" class="waves-effect waves-orange btn-flat">Remove</a>

static/css/style.css

@@ -158,6 +158,24 @@ nav{
     height: 11%;
     float: left;
 }
+
 .list-song{background-color: rgba(255, 255, 255, 0.1);}
 .card .card-content{padding:0;}
-.list-title{display:block; color:white;}
+.list-title{display:block; color:white;font-size:1em; text-align:left;}
+.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;}
+#results{margin-top:-12px;background-color: rgba(0,0,0,0.6);}
+.result:hover {
+  background-color: rgba(0,0,0,0.4);}
+  .result {
+  border-bottom: solid 1px #E5E5E5;
+  text-align: left;
+  height: 70px;
+  cursor: pointer;
+  width:93%;
+}
+.result_info{margin-top:-36px;}
+
+#settings-button{color:white !important;}

static/js/lib/materialize.js

@@ -2791,269 +2791,6 @@ $(document).ready(function(){
   }
 
 }( jQuery ));
-;(function ($) {
-
-  $.fn.slider = function (options) {
-    var defaults = {
-      indicators: true,
-      height: 400,
-      transition: 500,
-      interval: 6000
-    }
-    options = $.extend(defaults, options);
-
-    return this.each(function() {
-
-      // For each slider, we want to keep track of
-      // which slide is active and its associated content
-      var $this = $(this);
-      var $slider = $this.find('ul.slides').first();
-      var $slides = $slider.find('li');
-      var $active_index = $slider.find('.active').index();
-      var $active;
-      if ($active_index != -1) { $active = $slides.eq($active_index); }
-
-      // Transitions the caption depending on alignment
-      function captionTransition(caption, duration) {
-        if (caption.hasClass("center-align")) {
-          caption.velocity({opacity: 0, translateY: -100}, {duration: duration, queue: false});
-        }
-        else if (caption.hasClass("right-align")) {
-          caption.velocity({opacity: 0, translateX: 100}, {duration: duration, queue: false});
-        }
-        else if (caption.hasClass("left-align")) {
-          caption.velocity({opacity: 0, translateX: -100}, {duration: duration, queue: false});
-        }
-      }
-
-      // This function will transition the slide to any index of the next slide
-      function moveToSlide(index) {
-        if (index >= $slides.length) index = 0;
-        else if (index < 0) index = $slides.length -1;
-
-        $active_index = $slider.find('.active').index();
-
-        // Only do if index changes
-        if ($active_index != index) {
-          $active = $slides.eq($active_index);
-          $caption = $active.find('.caption');
-
-          $active.removeClass('active');
-          $active.velocity({opacity: 0}, {duration: options.transition, queue: false, easing: 'easeOutQuad',
-                            complete: function() {
-                              $slides.not('.active').velocity({opacity: 0, translateX: 0, translateY: 0}, {duration: 0, queue: false});
-                            } });
-          captionTransition($caption, options.transition);
-
-
-          // Update indicators
-          if (options.indicators) {
-            $indicators.eq($active_index).removeClass('active');
-          }
-
-          $slides.eq(index).velocity({opacity: 1}, {duration: options.transition, queue: false, easing: 'easeOutQuad'});
-          $slides.eq(index).find('.caption').velocity({opacity: 1, translateX: 0, translateY: 0}, {duration: options.transition, delay: options.transition, queue: false, easing: 'easeOutQuad'});
-          $slides.eq(index).addClass('active');
-
-
-          // Update indicators
-          if (options.indicators) {
-            $indicators.eq(index).addClass('active');
-          }
-        }
-      }
-
-      // Set height of slider
-      if (options.height != 400) {
-        $this.height(options.height + 40);
-        $slider.height(options.height);
-      }
-
-      // Set initial positions of captions
-      $slides.find('.caption').each(function () {
-        captionTransition($(this), 0);
-      });
-
-      // Set initial dimensions of images
-      // $slides.find('img').each(function () {
-      //   $(this).load(function () {
-      //     if ($(this).width() < $(this).parent().width()) {
-      //       $(this).css({width: '100%', height: 'auto'});
-      //     }
-      //   });
-      // });
-
-      // Move img src into background-image
-      $slides.find('img').each(function () {
-        $(this).css('background-image', 'url(' + $(this).attr('src') + ')' );
-        $(this).attr('src', 'data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==');
-      });
-
-      // dynamically add indicators
-      if (options.indicators) {
-        var $indicators = $('<ul class="indicators"></ul>');
-        $slides.each(function( index ) {
-          var $indicator = $('<li class="indicator-item"></li>');
-
-          // Handle clicks on indicators
-          $indicator.click(function () {
-            var $parent = $slider.parent();
-            var curr_index = $parent.find($(this)).index();
-            moveToSlide(curr_index);
-
-            // reset interval
-            clearInterval($interval);
-            $interval = setInterval(
-              function(){
-                $active_index = $slider.find('.active').index();
-                if ($slides.length == $active_index + 1) $active_index = 0; // loop to start
-                else $active_index += 1;
-
-                moveToSlide($active_index);
-
-              }, options.transition + options.interval
-            );
-          });
-          $indicators.append($indicator);
-        });
-        $this.append($indicators);
-        $indicators = $this.find('ul.indicators').find('li.indicator-item');
-      }
-
-      if ($active) {
-        $active.show();
-      }
-      else {
-        $slides.first().addClass('active').velocity({opacity: 1}, {duration: options.transition, queue: false, easing: 'easeOutQuad'});
-
-        $active_index = 0;
-        $active = $slides.eq($active_index);
-
-        // Update indicators
-        if (options.indicators) {
-          $indicators.eq($active_index).addClass('active');
-        }
-      }
-
-      // Adjust height to current slide
-      $active.find('img').each(function() {
-        $active.find('.caption').velocity({opacity: 1, translateX: 0, translateY: 0}, {duration: options.transition, queue: false, easing: 'easeOutQuad'});
-      });
-
-      // auto scroll
-      $interval = setInterval(
-        function(){
-          $active_index = $slider.find('.active').index();
-          moveToSlide($active_index + 1);
-
-        }, options.transition + options.interval
-      );
-
-
-      // HammerJS, Swipe navigation
-
-      // Touch Event
-      var panning = false;
-      var swipeLeft = false;
-      var swipeRight = false;
-
-      $this.hammer({
-          prevent_default: false
-      }).bind('pan', function(e) {
-        if (e.gesture.pointerType === "touch") {
-
-          // reset interval
-          clearInterval($interval);
-
-          var direction = e.gesture.direction;
-          var x = e.gesture.deltaX;
-          var velocityX = e.gesture.velocityX;
-
-          $curr_slide = $slider.find('.active');
-          $curr_slide.velocity({ translateX: x
-              }, {duration: 50, queue: false, easing: 'easeOutQuad'});
-
-          // Swipe Left
-          if (direction === 4 && (x > ($this.innerWidth() / 2) || velocityX < -0.65)) {
-            swipeRight = true;
-          }
-          // Swipe Right
-          else if (direction === 2 && (x < (-1 * $this.innerWidth() / 2) || velocityX > 0.65)) {
-            swipeLeft = true;
-          }
-
-          // Make Slide Behind active slide visible
-          var next_slide;
-          if (swipeLeft) {
-            next_slide = $curr_slide.next();
-            if (next_slide.length === 0) {
-              next_slide = $slides.first();
-            }
-            next_slide.velocity({ opacity: 1
-                }, {duration: 300, queue: false, easing: 'easeOutQuad'});
-          }
-          if (swipeRight) {
-            next_slide = $curr_slide.prev();
-            if (next_slide.length === 0) {
-              next_slide = $slides.last();
-            }
-            next_slide.velocity({ opacity: 1
-                }, {duration: 300, queue: false, easing: 'easeOutQuad'});
-          }
-
-
-        }
-
-      }).bind('panend', function(e) {
-        if (e.gesture.pointerType === "touch") {
-
-          $curr_slide = $slider.find('.active');
-          panning = false;
-          curr_index = $slider.find('.active').index();
-
-          if (!swipeRight && !swipeLeft) {
-            // Return to original spot
-            $curr_slide.velocity({ translateX: 0
-                }, {duration: 300, queue: false, easing: 'easeOutQuad'});
-          }
-          else if (swipeLeft) {
-            moveToSlide(curr_index + 1);
-            $curr_slide.velocity({translateX: -1 * $this.innerWidth() }, {duration: 300, queue: false, easing: 'easeOutQuad',
-                                  complete: function() {
-                                    $curr_slide.velocity({opacity: 0, translateX: 0}, {duration: 0, queue: false});
-                                  } });
-          }
-          else if (swipeRight) {
-            moveToSlide(curr_index - 1);
-            $curr_slide.velocity({translateX: $this.innerWidth() }, {duration: 300, queue: false, easing: 'easeOutQuad',
-                                  complete: function() {
-                                    $curr_slide.velocity({opacity: 0, translateX: 0}, {duration: 0, queue: false});
-                                  } });
-          }
-          swipeLeft = false;
-          swipeRight = false;
-
-          // Restart interval
-          clearInterval($interval);
-          $interval = setInterval(
-            function(){
-              $active_index = $slider.find('.active').index();
-              if ($slides.length == $active_index + 1) $active_index = 0; // loop to start
-              else $active_index += 1;
-
-              moveToSlide($active_index);
-
-            }, options.transition + options.interval
-          );
-        }
-      });
-
-    });
-
-
-
-  };
-}( jQuery ));
 ;(function ($) {
   $(document).ready(function() {
 

static/js/list.js

@@ -78,21 +78,20 @@ function populate_list(msg)
 				{
 					player_name = "#jplayer";
 				}else player_name = "#player";
-				$("#playlist").css({height: $(".video-container").height()});
+				$("#playlist").css({height: $(".video-container").height()-5});
 				$("#playlist").css({overflow: "hidden"});
 				if(scroller === false)
 				{
 					myScroll = new IScroll('#playlist', {
 						mouseWheel: true,
-						scrollbars: true,
 						scrollY: true,
-						interactiveScrollbars: true,
-						fadeScrollbars: false
 					});
 					scroller = true;
+					myScroll.maxScrollY = myScroll.maxScrollY - 5;
 				}else
 				{
 					myScroll.refresh();
+					myScroll.maxScrollY = myScroll.maxScrollY - 5; //Hackish solution for not being able to scroll fully to the bottom, don't understand why this is fucked
 				}
 			}
 		}
@@ -102,10 +101,11 @@ function populate_list(msg)
 			//ytplayer.pauseVideo();
 		}else{
 			myScroll.refresh();
+			myScroll.maxScrollY = myScroll.maxScrollY - 5;
 		}
 
 		$("#settings").css("visibility", "visible");
-		$("#settings").css("opacity", "0.7");
+		$("#settings").css("opacity", "1");
 		$("#wrapper").css("opacity", "1");
 
 }

static/js/playercontrols.js

@@ -1,85 +1,8 @@
-function initControls()
+function initYoutubeControls(player)
 {
-	setInterval(durationSetter, 1000);
-}
-
-function durationSetter()
-{
-	if(ytplayer !== undefined && ytplayer.getDuration() !== undefined)
-	{
-		duration = ytplayer.getDuration();
-		dMinutes = Math.floor(duration / 60);
-		dSeconds = duration - dMinutes * 60;
-		currDurr = ytplayer.getCurrentTime();
-		if(currDurr > duration)
-			currDurr = duration;
-		minutes = Math.floor(currDurr / 60);
-		seconds = currDurr - minutes * 60;
-		document.getElementById("duration").innerHTML = pad(minutes)+":"+pad(seconds)+" <span id='dash'>/</span> "+pad(dMinutes)+":"+pad(dSeconds);
-		per = (100 / duration) * currDurr;
-		if(per >= 100)
-			per = 100;
-		else if(duration == 0)
-			per = 0;
-		$("#bar").width(per+"%");
-	}
-}
-
-function pad(n)
-{
-	return n < 10 ? "0"+Math.floor(n) : Math.floor(n);
-}
-	/*
-	if(player !== undefined)
-	{
-		ytplayer = player;
-		//initSlider();
-		durationFixer = setInterval(durationSetter, 1000);
-	}else
-	{
-		tag = document.createElement('script');
-		tag.src = "https://www.youtube.com/iframe_api";
-		firstScriptTag = document.getElementsByTagName('script')[0];
-		firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
-	}
-	elems = Array("volume", "duration", "mute", "fullscreen", "q");
-	//elems = Array("volume", "duration", "fullscreen");
-	var container = document.getElementById("controls");
-	var newElem = document.createElement("div");
-	newElem.id = "playpause";
-	newElem.className = "play";
-	container.appendChild(newElem);
-	for(x = 0; x < elems.length; x++)
-	{
-		var newElemFor = document.createElement("div");
-		newElemFor.id = elems[x];
-		container.appendChild(newElemFor);
-	}
-	elems = Array("medium", "large", "hd1080", "auto");
-	elemName = Array("Low", "Medium", "High", "Auto");
-	newElem = document.createElement("div");
-	newElem.id = "qS";
-	newElem.className = "hide";
-
-	for(x = 0; x < elems.length; x++)
-	{
-		var newChild = document.createElement("div");
-		newChild.className = "qChange";
-		newChild.name = elems[x];
-		newChild.setAttribute("onclick", "changeQuality('"+elems[x]+"');");
-		newChild.innerHTML = elemName[x];
-		newElem.appendChild(newChild);
-	}
-	container.appendChild(newElem);
-
-	newElem = document.createElement("div");
-	newElem.id = "bar";
-
-	container.appendChild(newElem);
-
-	initControls();
 	fitToScreen();
-	$("#mute").hover(function(){hoverMute(true)}, function(){hoverMute(false)});
+	setInterval(durationSetter, 1000);
+	initControls();
 	$(window).resize(function(){
 		fitToScreen();
 	});
@@ -87,19 +10,9 @@ function pad(n)
 
 function initControls()
 {
-	document.getElementById("playpause").addEventListener("click", playPause);
+	document.getElementById("volume-button").addEventListener("click", mute_video);
-	document.getElementById("q").addEventListener("click", settings);
+	document.getElementById("playpause").addEventListener("click", play_pause);
-	document.getElementById("mute").addEventListener("click", volumeOptions);
+	document.getElementById("fullscreen").addEventListener("click", fullscreen);
-	document.getElementById("fullscreen").addEventListener("click", function()
-	{
-		document.getElementById("player").webkitRequestFullscreen();
-	});
-	//document.getElementById("controls").style.width= $(window).width()*0.6+"px";
-	var classname = document.getElementsByClassName("qChange");
-	/*for(var i=0; i< classname.length;i++)
-	{
-		classname[i].addEventListener("click", changeQuality);
-	}
 }
 
 function fitToScreen()
@@ -109,30 +22,56 @@ function fitToScreen()
 		player_name = "#jplayer";
 	}else player_name = "#player";
 	//document.getElementById("controls").style.top = document.getElementById("player").offsetTop + $("#player").height() + "px";
-	document.getElementById("controls").style.top = $(player_name).position()["top"] + $(player_name).height() + "px";
+	document.getElementById("controls").style.top = $(player_name).height() + "px";
 	//document.getElementById("controls").style.left = document.getElementById("player").offsetLeft + "px";
-	document.getElementById("controls").style.left = $(player_name).position()["left"] + "px";
+	//document.getElementById("controls").style.left = $(player_name).position()["left"] + "px";
 	//document.getElementById("controls").style.left = "10px";
 	$("#controls").width($(player_name).width());
-	document.getElementById("qS").style.top = "-80px";
+	//document.getElementById("qS").style.top = "-80px";
-	document.getElementById("qS").style.left =  $("#controls").width()-125+"px";
+	//document.getElementById("qS").style.left =  $("#controls").width()-125+"px";
 
 }
 
 function initSlider()
 {
+	if(localStorage.getItem("volume") !== undefined)
+	{
+		vol = localStorage.getItem("volume");
+	}else
+		vol = 100;
 	$("#volume").slider({
 	    min: 0,
 	    max: 100,
-	    value: ytplayer.getVolume(),
+	    value: vol,
-		range: "min",
+			range: "min",
-		animate: true,
+			animate: true,
 	    slide: function(event, ui) {
 	      setVolume(ui.value);
+				localStorage.setItem("volume", ui.value);
 	    }
 	});
-	//ytplayer.mute();
+	choose_button(vol, false);
-	$("#volume").slider("value", ytplayer.getVolume());
+	//$("#volume").slider("value", ytplayer.getVolume());
+}
+
+function fullscreen()
+{
+	var playerElement = document.getElementById("player");
+	var requestFullScreen = playerElement.requestFullScreen || playerElement.mozRequestFullScreen || playerElement.webkitRequestFullScreen;
+  if (requestFullScreen) {
+    requestFullScreen.bind(playerElement)();
+  }
+}
+
+function play_pause()
+{
+	if(ytplayer.getPlayerState() == 1)
+	{
+		ytplayer.pauseVideo();
+	}else if(ytplayer.getPlayerState() == 2 || ytplayer.getPlayerState() == 0)
+	{
+		ytplayer.playVideo();
+	}
 }
 
 function settings()
@@ -153,9 +92,16 @@ function changeQuality(wantedQ)
 	$("#qS").toggleClass("hide");
 }
 
+function mute_video()
+{
+	choose_button(0, true);
+	ytplayer.mute();
+}
+
 function setVolume(vol)
 {
 	ytplayer.setVolume(vol);
+	choose_button(vol, false);
 	//console.log(vol); //NO LOGS FOR U LOL
 	if(ytplayer.isMuted())
 		ytplayer.unMute();
@@ -167,6 +113,50 @@ function setVolume(vol)
 		$("#mute").css("background","no-repeat url(static/player.webp) -0px -806px");
 	}else if(vol > 66){
 		$("#mute").css("background","no-repeat url(static/player.webp) -0px -1829px");
+	}*/
+}
+
+function choose_button(vol, mute)
+{
+	if(!mute){
+		if(vol >= 0 && vol <= 33){
+			if(document.getElementById("v-full").className.split(" ").length == 1)
+				$("#v-full").toggleClass("hide");
+			if(document.getElementById("v-medium").className.split(" ").length == 1)
+				$("#v-medium").toggleClass("hide");
+			if(document.getElementById("v-low").className.split(" ").length == 2)
+				$("#v-low").toggleClass("hide");
+			if(document.getElementById("v-mute").className.split(" ").length == 1)
+				$("#v-mute").toggleClass("hide");
+		}else if(vol >= 34 && vol <= 66){
+			if(document.getElementById("v-full").className.split(" ").length == 1)
+				$("#v-full").toggleClass("hide");
+			if(document.getElementById("v-medium").className.split(" ").length == 2)
+				$("#v-medium").toggleClass("hide");
+			if(document.getElementById("v-low").className.split(" ").length == 1)
+				$("#v-low").toggleClass("hide");
+			if(document.getElementById("v-mute").className.split(" ").length == 1)
+				$("#v-mute").toggleClass("hide");
+		}else if(vol >= 67 && vol <= 100){
+			if(document.getElementById("v-full").className.split(" ").length == 2)
+				$("#v-full").toggleClass("hide");
+			if(document.getElementById("v-medium").className.split(" ").length == 1)
+				$("#v-medium").toggleClass("hide");
+			if(document.getElementById("v-low").className.split(" ").length == 1)
+				$("#v-low").toggleClass("hide");
+			if(document.getElementById("v-mute").className.split(" ").length == 1)
+				$("#v-mute").toggleClass("hide");
+		}
+	}else
+	{
+		if(document.getElementById("v-full").className.split(" ").length == 1)
+			$("#v-full").toggleClass("hide");
+		if(document.getElementById("v-medium").className.split(" ").length == 1)
+			$("#v-medium").toggleClass("hide");
+		if(document.getElementById("v-low").className.split(" ").length == 1)
+			$("#v-low").toggleClass("hide");
+		if(document.getElementById("v-mute").className.split(" ").length == 2)
+			$("#v-mute").toggleClass("hide");
 	}
 }
 
@@ -189,24 +179,21 @@ function playPause()
 
 function durationSetter()
 {
-	if(ytplayer !== undefined && ytplayer.getDuration() !== undefined)
+	duration = ytplayer.getDuration();
-	{
+	dMinutes = Math.floor(duration / 60);
-		duration = ytplayer.getDuration();
+	dSeconds = duration - dMinutes * 60;
-		dMinutes = Math.floor(duration / 60);
+	currDurr = ytplayer.getCurrentTime();
-		dSeconds = duration - dMinutes * 60;
+	if(currDurr > duration)
-		currDurr = ytplayer.getCurrentTime();
+		currDurr = duration;
-		if(currDurr > duration)
+	minutes = Math.floor(currDurr / 60);
-			currDurr = duration;
+	seconds = currDurr - minutes * 60;
-		minutes = Math.floor(currDurr / 60);
+	document.getElementById("duration").innerHTML = pad(minutes)+":"+pad(seconds)+" <span id='dash'>/</span> "+pad(dMinutes)+":"+pad(dSeconds);
-		seconds = currDurr - minutes * 60;
+	per = (100 / duration) * currDurr;
-		document.getElementById("duration").innerHTML = pad(minutes)+":"+pad(seconds)+" <span id='dash'>/</span> "+pad(dMinutes)+":"+pad(dSeconds);
+	if(per >= 100)
-		per = (100 / duration) * currDurr;
+		per = 100;
-		if(per >= 100)
+	else if(duration == 0)
-			per = 100;
+		per = 0;
-		else if(duration == 0)
+	$("#bar").width(per+"%");
-			per = 0;
-		$("#bar").width(per+"%");
-	}
 }
 
 function pad(n)
@@ -231,7 +218,7 @@ function volumeOptions()
 			$("#mute").css("background","no-repeat url(static/player.webp) -0px -1767px");
 		}else if(vol > 66){
 			$("#mute").css("background","no-repeat url(static/player.webp) -0px -2604px");
-		}
+		}*/
 	}
 	else
 	{
@@ -267,11 +254,11 @@ function hoverMute(foo)
 		}else if(vol > 66){
 			$("#mute").css("background","no-repeat url(static/player.webp) -0px -1829px");
 		}
-	}
+	}*/
 }
 //url(http://localhost/Kasperrt/static/player.webp) 0px -94px no-repeat
 
 function logQ()
 {
 	console.log(ytplayer.getPlaybackQuality());
-}*/
+}

static/js/search.js

@@ -144,9 +144,10 @@ function search(search_input){
 									<img src='"+video_thumb+"' class='thumb'>\
 									<div id='title'>"+data.title+"\
 										<div class='result_info'>"+views+" views • "+length+"</div>\
-										<input id='add' title='Add several songs' type='button' class='button' value='+' onclick=\"submit('"+data.id+"','"+video_title+"', false);\">\
+										</div>\
-									</div>\
 								</div>";
+								//<input id='add' title='Add several songs' type='button' class='button' value='+' onclick=\"submit('"+data.id+"','"+video_title+"', false);\">\
+							
 								//+data.uploader+" • "+
 								//$("#results").append(finalhtml);
 								wrapper += finalhtml;

static/js/youtube.js

@@ -150,11 +150,10 @@ function onPlayerStateChange(newState) {
 			break;
 		case 1:
 			playing = true;
-			/*if(document.getElementById("playpause").className == "play")
+			if(document.getElementById("play").className.split(" ").length == 1)
-			{
+				$("#play").toggleClass("hide");
-				$("#playpause").toggleClass("play");
+			if(document.getElementById("pause").className.split(" ").length == 2)
-				$("#playpause").toggleClass("pause");
+				$("#pause").toggleClass("hide");
-			}*/
 			if(paused)
 			{
 				socket.emit('pos');
@@ -163,11 +162,10 @@ function onPlayerStateChange(newState) {
 			break;
 		case 2:
 			paused = true;
-			/*if(document.getElementById("playpause").className == "pause")
+			if(document.getElementById("pause").className.split(" ").length == 1)
-			{
+				$("#pause").toggleClass("hide");
-				$("#playpause").toggleClass("play");
+			if(document.getElementById("play").className.split(" ").length == 2)
-				$("#playpause").toggleClass("pause");
+				$("#play").toggleClass("hide");
-			}*/
 			break;
 		case 3:
 			break;
@@ -206,8 +204,9 @@ function onPlayerReady(event) {
 			ytplayer.seekTo(seekTo);
 		}
 		readyLooks();
-		initControls();
+		initYoutubeControls(ytplayer);
-		//initSlider();
+		initSlider();
+		ytplayer.setVolume(localStorage.getItem("volume"));
 }
 
 function readyLooks()