Adding controlls

index.php

@@ -19,7 +19,6 @@
 			<div id="results"></div>
 			<div class="main">
 				<div id="player" class="ytplayer"></div>
-
 				<div class="playlist" >
 				<div id="buttons" class="">
 					<!--<a href="/php/admin.php?list=<?php echo $list; ?>" title="Channel settings" ><img src="/static/settings2.png" class="skip middle" alt="Settings"/></a>-->
@@ -34,6 +33,7 @@
 						</div>
 					</div>
 				</div>
+				<div id="controls"></div>
 			</div>
 		</div>
 		<?php include("php/footer.php"); ?>

js/playercontrols.js

@@ -0,0 +1,166 @@
+function initYoutubeControls(player)
+{
+	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", "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 newElem = document.createElement("div");
+		newElem.id = elems[x];
+		container.appendChild(newElem);
+	}
+	/*elems = Array("medium", "large", "hd1080", "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.innerHTML = elems[x];
+		newElem.appendChild(newChild);
+	}
+	container.appendChild(newElem);*/
+	initControls()
+	fitToScreen();
+	$(window).resize(function(){
+		fitToScreen();
+	});
+}
+
+function initControls()
+{
+	document.getElementById("playpause").addEventListener("click", playPause);
+	//document.getElementById("q").addEventListener("click", settings);
+	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()
+{
+	document.getElementById("controls").style.top = document.getElementById("player").offsetTop + $("#player").height() -30 + "px";
+	document.getElementById("controls").style.left = document.getElementById("player").offsetLeft + "px";
+}
+
+function initSlider()
+{
+	$("#volume").slider({
+	    min: 0,
+	    max: 100,
+	    value: ytplayer.getVolume(),
+		range: "min",
+		animate: true,
+	    slide: function(event, ui) {
+	      setVolume(ui.value);
+	    }
+	});
+}
+
+function settings()
+{
+	$("#qS").toggleClass("hide");
+}
+
+function changeQuality()
+{
+	wantedQ = this.getAttribute("name");
+	if(ytplayer.getPlaybackQuality != wantedQ)
+	{
+		ytplayer.setPlaybackQuality(wantedQ);
+	}
+}
+
+function setVolume(vol)
+{
+	ytplayer.setVolume(vol);
+	console.log(vol);
+	if(vol == 0){
+		console.log("no volume");
+	}else if(vol < 33){
+		console.log("low-volume");
+	}else if(vol > 33 && vol < 66){
+		console.log("medium-volume");
+	}else if(vol > 66){
+		console.log("full-volume");
+	}
+}
+
+function playPause()
+{
+	console.log("playPause");
+	state = ytplayer.getPlayerState();
+	console.log("state: "+state);
+	button = document.getElementById("playpause");
+	if(state == 1)
+	{
+		ytplayer.pauseVideo();
+		//button.innerHTML = "Resume";
+	}else if(state == 2)
+	{
+		ytplayer.playVideo();
+		//button.innerHTML = "Pause";
+	}
+}
+
+function durationSetter()
+{
+	duration = ytplayer.getDuration();
+	dMinutes = Math.floor(duration / 60);
+	dSeconds = duration - dMinutes * 60;
+	currDurr = ytplayer.getCurrentTime();
+	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);
+}
+
+function pad(n)
+{
+	return n < 10 ? "0"+Math.floor(n) : Math.floor(n);
+}
+
+function volumeOptions()
+{
+	console.log("volumeOptions");
+	button = document.getElementById("volume");
+	if(ytplayer.isMuted())
+	{
+		ytplayer.unMute();
+		button.innerHTML = "Mute";
+	}
+	else
+	{
+		ytplayer.mute();
+		button.innerHTML = "Unmute";
+	}
+}
+
+function logQ()
+{
+	console.log(ytplayer.getPlaybackQuality());
+}

js/youtube.js

@@ -96,11 +96,12 @@ function onYouTubeIframeAPIReady() {
 		height: window.height*0.75,
 		width: window.width*0.6,
 		videoId: response,
-		playerVars: { controls: "1" , iv_load_policy: "3", theme:"light", rel:"0", color:"white" },
+		playerVars: { rel:"0", wmode:"transparent", controls: "0" , iv_load_policy: "3", theme:"light", rel:"0", color:"white"},
 		events: {
 			'onReady': onPlayerReady,
 			'onStateChange': onPlayerStateChange,
-			'onError': errorHandler
+			'onError': errorHandler,
+			'onPlaybackQualityChange': logQ
 		}
 	});
 }
@@ -142,6 +143,11 @@ function onPlayerStateChange(newState) {
 		wasPaused = true;
 		beginning = false;
 	}
+	if(newState.data == 1 || newState.data == 2)
+	{
+		$("#playpause").toggleClass("play");
+		$("#playpause").toggleClass("pause");
+	}
 }
 
 function checkEnd()
@@ -316,8 +322,11 @@ function onPlayerReady(event) {
 	  //ytplayer.addEventListener("onError", "errorHandler");
 		getTime();
 		ytplayer.playVideo();
+		initYoutubeControls(ytplayer)
 		getTitle();
 		setBGimage(response);
+		initSlider();
+		durationFixer = setInterval(durationSetter, 1000);
 	}
 
 function setBGimage(id){

php/footer.php

@@ -2,8 +2,10 @@
     &copy; 2014 <a class="anim" href="//nixo.no">Nixo</a> &amp; <a class="anim" href="//kasperrt.no">KasperRT </a>
 </div>
 <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
+<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
 <script type="text/javascript" src="static/js/iscroll.js"></script>  
 <script type="text/javascript" src="static/js/list.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> 
-<script type="text/javascript" src="static/js/admin.js"></script>
+<script type="text/javascript" src="static/js/admin.js"></script>

php/header.php

@@ -3,4 +3,5 @@
 <link rel="stylesheet" type="text/css" href="static/style.css" title="Default" />
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <link rel="icon" type="image/png" href="static/favicon.png"/>
-<link href='http://fonts.googleapis.com/css?family=Open+Sans:300' rel='stylesheet' type='text/css'>
+<link href='http://fonts.googleapis.com/css?family=Open+Sans:300' rel='stylesheet' type='text/css'>
+<link rel="stylesheet" type="text/css" href="static/controlstyle.css">/

static/controlstyle.css

@@ -0,0 +1,161 @@
+
+#controls
+{
+	height:30px;
+	background-color:rgba(255, 255, 255, 0.40);
+	position:absolute;
+	width:54%;
+}
+
+#q, #fullscreen, #playpause
+{
+	-webkit-filter:brightness(300%);
+}
+
+#q
+{
+	cursor:pointer;
+	float:right;
+	background: no-repeat url(//s.ytimg.com/yts/imgbin/player-lighthh-vflueFmNN.webp) 0 -1023px;
+	background-size: auto;
+	width: 30px;
+	height: 27px;
+}
+
+#qS
+{
+	display: block;
+	background-color: white;
+	position: relative;
+	float: right;
+	left: 55px;
+	/* margin-left: -10px; */
+	/* margin-top: -10px; */
+	top: -280%;
+	width:125px;
+}
+
+.qChange
+{
+	font-family:helvetica;
+	padding-left:5px;
+	padding-right:5px;
+	padding-bottom:3px;
+	cursor:pointer;
+	background-color:rgba(0, 0, 0, 0.54);
+}
+
+.qChange:hover
+{
+	background-color:#ED207F;
+}
+
+#fullscreen
+{
+	cursor:pointer;
+	background: no-repeat url(//s.ytimg.com/yts/imgbin/player-lighthh-vflueFmNN.webp) 0 -1054px;
+	background-size: auto;
+	width: 30px;
+	height: 27px;
+	float:right;
+}
+
+#duration
+{
+	float:left;
+	margin-top:9px;
+	font-family:helvetica;
+	font-size:12px;
+}
+
+#dash
+{
+	font-weight:bolder;
+}
+
+#volume {
+	cursor:pointer;
+    position: absolute;
+    left: 200px;
+    margin: 12px auto;
+    height:4.5px;
+    width: 75px;
+    background-color:grey;
+    border: none;
+    outline: none;
+}
+
+#volume .ui-slider-range-min {
+    height:4.5px;
+    width: 75px;
+    position: absolute;
+    background-color:#ED207F;
+	border: none;
+	outline: none;
+}
+
+#volume .ui-slider-handle {
+    height:15px;
+    width:5px;
+    background-color:white;
+    position: absolute;
+    cursor: pointer;
+    outline: none;
+    border: none;
+}
+
+.ui-slider-handle
+{
+	margin-top:-5px;
+}
+
+#playpause
+{
+	cursor:pointer;
+	float:left;
+}
+
+.play
+{
+	background: no-repeat url(//s.ytimg.com/yts/imgbin/player-lighthh-vflueFmNN.webp) 0 -496px;
+	background-size: auto;
+	width: 55px;
+	height: 27px;
+}
+
+.pause
+{
+	background: no-repeat url(//s.ytimg.com/yts/imgbin/player-lighthh-vflueFmNN.webp) 0 -2139px;
+	background-size: auto;
+	width: 55px;
+	height: 27px;
+}
+
+.hide
+{
+	display:none !important;
+}
+
+.bgimage{
+	z-index: -100;
+background-size: 180%;
+background-repeat: no-repeat;
+background-position: center center;
+background-color: #000;
+background-image: url(bg.jpg);
+-webkit-filter: blur(50px) brightness(0.8);
+-moz-filter: blur(50px) brightness(0.8);
+-ms-filter: blur(50px) brightness(0.8);
+-o-filter: blur(50px) brightness(0.8);
+filter: blur(50px) brightness(0.8);
+position: absolute;
+top: 0px;
+left: 0;
+width: 100%;
+height: 100%;
+}
+
+body
+{
+	background-color:#000;
+}

static/style.css

@@ -22,7 +22,7 @@ body{background:#000; margin:0; }
 /*.small:hover{color: #CCC;}*/
 .big{font-size:180vh; position:absolute; top:-50%; color:#330A00 !important; z-index:-1; width: 100%; overflow: hidden; display: none;}
 .footer a{color:rgba(254, 254, 254, 0.42); text-decoration: none;}.footer a:hover {color:#ed207f;} 
-.footer{font-size: 15px;  position: absolute; width:99%;color:rgba(192, 192, 192, 0.42) !important; margin-top: 0px; word-spacing: 2px;}
+.footer{font-size: 15px;  position: absolute; width:99%;color:rgba(192, 192, 192, 0.42) !important; margin-top: 13px; word-spacing: 2px;}
 .bottom{bottom:10px;}
 #channels{width:40%; min-width: 300px; padding-top: 4%; font-size: 25px;}
 .channel{padding: 7px; display: inline-block; font-weight: bold; color: #C4C4C4 !important;font-size: 18px;}
@@ -65,7 +65,7 @@ body{background:#000; margin:0; }
 #add{font-weight: normal; margin-right: 5%; margin-top: -36px;font-size: 30px;padding: 3px 45px; }
 #add:hover{color:red;}
 
-#player{height: 68%; height: calc(87% - 183px); width: 60%; border-radius: 3px; box-shadow: 0 8px 11px -4px black;}
+#player{height: 68%; height: calc(87% - 213px); width: 60%; border-radius: 3px; box-shadow: 0 8px 11px -4px black;}
 #playlist{-webkit-transition: opacity 0.5s;transition: opacity 0.5s;}
 .nomargin{padding: 0;margin:0;}
 
@@ -95,6 +95,7 @@ input[type="radio"]{display: none;}
 
 
 @media (max-width: 1000px) {
+	#controls{display:none;}
     body{background-color: #2F2F2F;}
     .bgimage{display: none;}
     #player{width: 100%; height:45%; margin-bottom: 20px; box-shadow: none;}