Merge pull request #42 from nixolas1/dev

Admin overhaul

js/admin.js

@@ -4,22 +4,25 @@ var pass_corr = "";
 function admin()
 {
 	adminTogg = !adminTogg;
-	if(!adminTogg) $("#playlist").height($("#playlist").height()+$("#adminPanel").outerHeight(true));
+	
+	if(adminTogg) $("#playlist").height($("#playlist").height()-210); //opening
+	if(!adminTogg)setTimeout(function(){$("#playlist").height($("#playlist").height()+210);},501); //closing
+
 	$("#adminPanel").toggleClass("hiddenAdmin");
-	if(adminTogg) $("#playlist").height($("#playlist").height()-$("#adminPanel").outerHeight(true));
 }
 
 
 function submitAdmin(form)
 {
-	voting = form.vote.checked,
-	addSongs = form.addSongs.checked,
-	longSongs = form.longSongs.checked,
-	frontpage = form.frontPage.checked,
-	allvideos = form.allvideos.checked,
-	removePlay = form.removePlay.checked,
+	voting = form.vote.value,
+	addSongs = form.addSongs.value,
+	longSongs = form.longSongs.value,
+	frontpage = form.frontPage.value,
+	allvideos = form.allvideos.value,
+	removePlay = form.removePlay.value,
 	adminpass = form.pass.value;
 	
+	
 	confRes = $.ajax({
 		type: "POST",
 		url: "php/change.php",
@@ -32,6 +35,15 @@ function submitAdmin(form)
 	}).responseText;
 	
 	pass_corr = confRes;
+
+	if(pass_corr=="correct"){
+		$("#adminPanel").addClass("success");
+	}else{ $("#adminPanel").addClass("fadeerror"); alert("Wrong password :(")}
+
 	console.log(pass_corr);
 	updateList();
+	setTimeout(function(){
+		$("#adminPanel").removeClass("success");
+		$("#adminPanel").removeClass("fadeerror");
+	},1500);
 }

js/list.js

@@ -34,7 +34,7 @@ function updateList()
 
 		$.each(list["songs"], function(j, listeID){
 
-			var video_title=listeID["title"].replace(/\\\'/g, "'").replace(/\\\"/g,"'");;
+			var video_title=listeID["title"].replace(/\\\'/g, "'").replace(/"/g,"'").replace(/&/g,"&");
 			var video_id = listeID["id"];
 			var video_thumb = "http://i.ytimg.com/vi/"+video_id+"/default.jpg";
 			var odd = ""; if(j%2==0)odd=" oddlist";
@@ -80,11 +80,17 @@ function updateList()
 		if(!adminTogg)
 		{
 			document.getElementsByName("vote")[0].checked = (conf["vote"] === "true");
+			document.getElementsByName("vote")[1].checked = (conf["vote"] === "false");
 			document.getElementsByName("addSongs")[0].checked = (conf["addsongs"] === "true");
+			document.getElementsByName("addSongs")[1].checked = (conf["addsongs"] === "false");
 			document.getElementsByName("longSongs")[0].checked = (conf["longsongs"] === "true");
+			document.getElementsByName("longSongs")[1].checked = (conf["longsongs"] === "false");
 			document.getElementsByName("frontPage")[0].checked = (conf["frontpage"] === "true");
+			document.getElementsByName("frontPage")[1].checked = (conf["frontpage"] === "false");
 			document.getElementsByName("allvideos")[0].checked = (conf["allvideos"] === "true");
+			document.getElementsByName("allvideos")[1].checked = (conf["allvideos"] === "false");
 			document.getElementsByName("removePlay")[0].checked = (conf["removeplay"] === "true");
+			document.getElementsByName("removePlay")[1].checked = (conf["removeplay"] === "false");
 		}
 	}, 2500);
 }

js/toggler.js

@@ -1,20 +0,0 @@
-/*var e = document.getElementById("filt-css"),
-    d = document.getElementById("filt-javascript"),
-    t = document.getElementById("switcher");
-
-e.addEventListener("click", function(){
-  t.checked = false;
-  e.classList.add("toggler--is-active");
-  d.classList.remove("toggler--is-active");
-});
-
-d.addEventListener("click", function(){
-  t.checked = true;
-  d.classList.add("toggler--is-active");
-  e.classList.remove("toggler--is-active");
-});
-
-t.addEventListener("click", function(){
-  d.classList.toggle("toggler--is-active");
-  e.classList.toggle("toggler--is-active");
-})*/

js/youtube.js

@@ -273,7 +273,7 @@ function getTitle()
 		success: function(data) {
 			viewers = $.parseJSON(data);
 			var outPutWord = viewers[5].length > 1 ? "viewers" : "viewer";
-			var title= viewers[4].replace(/\\\'/g, "'").replace(/\\\"/g,"'");
+			var title= viewers[4].replace(/\\\'/g, "'").replace(/"/g,"'").replace(/&/g,"&");
 			document.title = title + " • Zöff";
 			document.getElementsByName('v')[0].placeholder = title + " • " + viewers[5].length + " " + outPutWord;
 		}

lists/tritoen.json

@@ -1 +0,0 @@
-{"nowPlaying":{"FHCYHldJi_g":{"id":"FHCYHldJi_g","title":"Duke Dumont - I Got U (Official video) ft. Jax Jones","votes":0,"added":1414080930,"guids":[]}},"songs":{"VHoT4N43jK8":{"id":"VHoT4N43jK8","title":"Stromae - Alors On Danse","votes":0,"added":1414081170,"guids":[]},"eg5sRQNEwtg":{"id":"eg5sRQNEwtg","title":"Philter - Love","votes":0,"added":1414081389,"guids":[]},"oiKj0Z_Xnjc":{"id":"oiKj0Z_Xnjc","title":"Stromae - Papaoutai","votes":0,"added":1414081626,"guids":[]},"ublchJYzhao":{"id":"ublchJYzhao","title":"Stromae - ta f\u00eate","votes":0,"added":1414081830,"guids":[]},"5ryIHUSiOQA":{"id":"5ryIHUSiOQA","title":"Truls - The Next (Matoma Remix)","votes":0,"added":1414082020,"guids":[]},"Sb3XfrCtjVU":{"id":"Sb3XfrCtjVU","title":"The Notorious BIG ft. Ja Rule - Old Thing Back (Matoma Remix)","votes":0,"added":1414082346,"guids":[]},"YEx-QeYvE8Q":{"id":"YEx-QeYvE8Q","title":"L\u00f6wenherz & Freed - Tagtraum","votes":0,"added":1414082654,"guids":[]},"HAIDqt2aUek":{"id":"HAIDqt2aUek","title":"Porter Robinson - Sad Machine (Lyric Video)","votes":0,"added":1414082916,"guids":[]},"rvPGHb14__4":{"id":"rvPGHb14__4","title":"John Mayer - Waiting On The World To Change (Scheinizzl Remix)","votes":0,"added":1414083212,"guids":[]},"uhYMVwn3pJw":{"id":"uhYMVwn3pJw","title":"Bob Sinclar - Cinderella (She Said Her Name) - Official Video","votes":0,"added":1414083406,"guids":[]},"xi8_BuYT9UI":{"id":"xi8_BuYT9UI","title":"Mattafix - Big City Life (LEEX Remix)","votes":0,"added":1414083784,"guids":[]},"vMwFFENUOQk":{"id":"vMwFFENUOQk","title":"Mandeh - Sandbank","votes":0,"added":1414084019,"guids":[]},"V40EjCjP3VU":{"id":"V40EjCjP3VU","title":"Philter - The Seven Seas","votes":0,"added":1414084258,"guids":[]},"lCtozJkvyV8":{"id":"lCtozJkvyV8","title":"Sterk\u00f8l ","votes":0,"added":1414084517,"guids":[]},"FQvak0ZpfBA":{"id":"FQvak0ZpfBA","title":"Philter - The Protagonist","votes":0,"added":1414084765,"guids":[]},"nnjxb5NvAIk":{"id":"nnjxb5NvAIk","title":"Philter - Pi","votes":0,"added":1414084956,"guids":[]},"cV9dsOJXt3g":{"id":"cV9dsOJXt3g","title":"Notorious BIG  - Juicy (Sh\u00e8mce Remix)","votes":0,"added":1414085243,"guids":[]},"fkLEljSKY30":{"id":"fkLEljSKY30","title":"IZ -  Somewhere Over The Rainbow ( Thomas Jack Remix )","votes":0,"added":1414085626,"guids":[]},"lSooYPG-5Rg":{"id":"lSooYPG-5Rg","title":"Porter Robinson - Sea of Voices (Audio)","votes":0,"added":1414085929,"guids":[]},"CUJcEYOjXI8":{"id":"CUJcEYOjXI8","title":"Philter - Flutterby","votes":0,"added":1414087656,"guids":[]},"si81bIoZRJQ":{"id":"si81bIoZRJQ","title":"Porter Robinson - Divinity ft. Amy Millan","votes":0,"added":1414088644,"guids":[]},"S_xH7noaqTA":{"id":"S_xH7noaqTA","title":"Stromae - Formidable (ceci n'est pas une le\u00e7on)","votes":0,"added":1414088989,"guids":[]},"CAMWdvo71ls":{"id":"CAMWdvo71ls","title":"Stromae - Tous Les M\u00eames","votes":0,"added":1414089211,"guids":[]}},"conf":{"startTime":1414089211,"views":["ODYyMDk1"],"skips":[],"addsongs":"true","longsongs":"false","onlymusic":"true","removeplay":"false","adminpass":"$6$rounds=9001$tritoenFuck0ffuS$oTH4CCbgC3OKjtyx9eRmx5oh7DzwJDZe0w.nBaxyIC5aU.nutyG6FzybE4qb0uA3RQtub32Vy1rmE\/Q5CgRIl.","frontpage":"false","vote":"true","allvideos":"false"}}

php/footer.php

@@ -7,4 +7,3 @@
 <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/toggler.js"></script>

php/panel.php

@@ -1,14 +1,47 @@
 <b>Admin Panel</b>
-<br>
+
 <form id="adminForm" onsubmit="return false" name="ufo" action="" class="daform nomargin" id="base">
+    <div class="toggles">
+    <div class="toggler">
+        <label><input type="radio" class="radio"name="frontPage" value="true"><span>Display</span></label> / 
+        <label><input type="radio" class="radio"name="frontPage" value="false"><span>Hide</span></label>
+    </div>
 
-	<label>Only admin can vote 				<input type="checkbox" name="vote" value="1"></label>
-	<label>Only admin can add songs		<input type="checkbox" name="addSongs" value="1"></label>
-	<label>Allow long songs 			<input type="checkbox" name="longSongs" value="1"></label>
-	<label>Show playlist on frontpage 	<input type="checkbox" name="frontPage" value="1"></label>
-	<label>All Videos			<input type="checkbox" name="allvideos" value="1"></label>
-	<label>Remove song after playing 	<input type="checkbox" name="removePlay" value="1"></label>
-	<label>Admin Password <input type="password" name="pass"></label>
+    <div class="toggler">
+        <label><input type="radio" class="radio"name="vote" value="true"><span>Admin</span></label> / 
+        <label><input type="radio" class="radio"name="vote" value="false"><span>Anyone</span></label>
+    </div>
 
-	<input type="button" class="button" value="Save Settings" onclick="submitAdmin(this.form);">   
+    <div class="toggler">
+        <label><input type="radio" class="radio"name="addSongs" value="true"><span>Admin</span></label> / 
+        <label><input type="radio" class="radio"name="addSongs" value="false"><span>Anyone</span></label>
+    </div>
+
+    <div class="toggler">
+        <label><input type="radio" class="radio"name="longSongs" value="true"><span>Allow</span></label> / 
+        <label><input type="radio" class="radio"name="longSongs" value="false"><span>Block</span></label>
+    </div>
+
+    <div class="toggler">
+        <label><input type="radio" class="radio"name="allvideos" value="true"><span>All</span></label> / 
+        <label><input type="radio" class="radio"name="allvideos" value="false"><span>Song</span></label>
+    </div>
+
+    <div class="toggler">
+        <label><input type="radio" class="radio"name="removePlay" value="true"><span>Remove</span></label> / 
+        <label><input type="radio" class="radio"name="removePlay" value="false"><span>Keep</span></label>
+    </div>
+    </div>
+
+    <div class="toggtext">
+        playlist on frontpage<br>
+        can vote<br>
+        can add songs<br>
+        <span title="(>12 min)">long songs</span><br>
+        categories allowed<br>
+        songs after playing<br>
+    </div>
+
+	<input type="password" name="pass" id="passbox" class="passbox" placeholder="Channel password">
+	<input type="submit" class="button" value="Store" onclick="submitAdmin(this.form);">   
 </form>

static/style.css

@@ -7,7 +7,7 @@ body{background:#000; margin:0; }
 .vcent{position: relative; top: 50%; -webkit-transform: translateY(-50%);}
 .nochanvcent{position: relative; top: 46%; -webkit-transform: translateY(-54%);}
 /*#change{ display: table-cell; vertical-align: middle;}*/
-::-webkit-input-placeholder{color: #FEFEFE;}
+::-webkit-input-placeholder {color: #FEFEFE;}
 ::-moz-input-placeholder{color: #FEFEFE;}
 ::input-placeholder{color: #FEFEFE;}
 .innbox, .innbox a{
@@ -15,8 +15,9 @@ body{background:#000; margin:0; }
 	color:#f15; text-align: center;-webkit-transition:background 1s;-moz-transition:background 1s;-o-transition:background 1s; transition:background 1s;
     background-color: rgba(255, 255, 255, 0.22); 
 }
+.passbox{height: 24px;font-size: 15px;width: 42%;padding: 4px 0;margin: 5px 0;border-radius: 2px;border: none; text-align: center;}
 .success{animation: fadecol 1.5s; -moz-animation: fadecol 1.5s; -webkit-animation: fadecol 1.5s; -o-animation: fadecol 1.5s;}
-.error{animation: fadewrong 1.5s; -moz-animation: fadewrong 1.5s; -webkit-animation: fadewrong 1.5s; -o-animation: fadewrong 1.5s;}
+.fadeerror  {animation: fadered 1.5s; -moz-animation: fadered 1.5s; -webkit-animation: fadered 1.5s; -o-animation: fadered 1.5s;}
 .small{font-size: 5vw; color:#E2E2E2; text-decoration: none; }
 /*.small:hover{color: #CCC;}*/
 .big{font-size:180vh; position:absolute; top:-50%; color:#330A00 !important; z-index:-1; width: 100%; overflow: hidden; display: none;}
@@ -65,10 +66,20 @@ body{background:#000; margin:0; }
 #playlist{-webkit-transition: opacity 0.5s;transition: opacity 0.5s;}
 .nomargin{padding: 0;margin:0;}
 
-#adminForm{text-align:left;}
-#adminForm label{display: block; cursor: pointer;}
+#adminForm{text-align:left; padding-top: 15px;}
+#adminForm label{display: inline; cursor: pointer; color:#ccc;}
+
+input[type="radio"]{display: none;}
+.toggler label:hover{border-bottom: solid 1px white;}
+.radio:checked + span {
+  font-weight: bold;
+  color: #fff;
+}
+.toggles{display: inline; float: left; padding-right: 15px;}
+.toggtext{display: inline;}
 .adminBox{float:right;}
-#adminPanel{color:white; height:200px; padding: 10px; overflow:hidden; background-color: rgba(0,0,0,0.2);}
+
+#adminPanel{color:white; height:190px; padding: 10px; overflow:hidden; background-color: rgba(0,0,0,0.2); transition: height 0.5s;}
 .hiddenAdmin{padding:0 !important; margin:0 !important; height: 0 !important;}
 .button{background-color: rgba(255,255,255,0.2); border-radius: 4px; border: none;color: white;padding: 5px 15px; margin-top: 15px; transition: all 0.1s ease-in-out;}
 .button:hover{background-color: rgba(255,255,255,0.4); }
@@ -76,10 +87,34 @@ body{background:#000; margin:0; }
 
 
 @-webkit-keyframes fadein{from {opacity:0;}to{opacity:1;}}@keyframes fadein{from{opacity:0;}to{opacity:1;}}@-moz-keyframes fadein{from{opacity:0;}to{opacity:1;}}@-o-keyframes fadein{from{opacity:0;}to{opacity:1;}}
-@-webkit-keyframes fadecol{from {background-color:rgba(0,255,0,0.4);}to{background-color: rgba(255,255,255,0);}}@keyframes fadecol{background-color: rgba(0,255,0,0.4);}to{background-color: rgba(255,255,255,0);}}@-moz-keyframes fadecol{from{background-color: rgba(0,255,0,0.4);}to{background-color: rgba(255,255,255,0);}}@-o-keyframes fadecol{background-color: rgba(0,255,0,0.4);}to{background-color: rgba(255,255,255,0);}}
-@-webkit-keyframes fadewrong{from {background-color:rgba(255,0,0,0.4);}to{background-color: rgba(255,255,255,0);}}@keyframes fadewrong{background-color: rgba(255,0,0,0.4);}to{background-color: rgba(255,255,255,0);}}@-moz-keyframes fadewrong{from{background-color: rgba(255,0,0,0.4);}to{background-color: rgba(255,255,255,0);}}@-o-keyframes fadewrong{background-color: rgba(255,0,0,0.4);}to{background-color: rgba(255,255,255,0);}}
+@-webkit-keyframes fadecol{from {background-color:rgba(0,255,0,0.4);}to{background-color: rgba(255,255,255,0);}}@keyframes fadecol{background-color: rgba(0,255,0,0.4);}to{background-color: rgba(255,255,255,0);}}@-moz-keyframes fadecol{from{background-color: rgba(0,255,0,0.4);}to{background-color: rgba(255,255,255,0);}}@-o-keyframes fadecol{background-color: rgba(0,255,0,0.4);}to{background-color: rgba(255,255,255,0);}
+@-webkit-keyframes fadered{from {background-color:rgba(255,0,0,0.4);}to{background-color: rgba(255,255,255,0);}}@keyframes fadered{background-color: rgba(255,0,0,0.4);}to{background-color: rgba(255,255,255,0);}}@-moz-keyframes fadered{from{background-color: rgba(255,0,0,0.4);}to{background-color: rgba(255,255,255,0);}}@-o-keyframes fadered{background-color: rgba(255,0,0,0.4);}to{background-color: rgba(255,255,255,0);}
 
 
-/* imports */
-@import url("mobile.css");
-/*@import url("toggler.css");*/
+@media (max-width: 1000px) {
+    body{background-color: #fff;}
+    .bgimage{display: none;}
+    #player{width: 100%; height:45%; margin-bottom: 20px; box-shadow: none;}
+    .playlist{width: 100%;}
+    .lresult{font-size: 40px; height: 90px; font-size: 50px;}
+    .votes{float: right; background-color: rgba(0,0,0,0.9); margin-top: -1.5em;font-size: 42px; padding-right: 8px; height: 89px; line-height: 89px; padding-left: 20px; border-radius: 1px;}
+    .lthumb{height: 90px; box-shadow: none;}
+    .ltitle{height: 70px; color: #000;}
+    #plus,#minus{padding-left: 24px; margin-left: 0; padding-right: 24px;}
+    #plus{border-right:solid 3px rgb(172, 172, 172);}
+    #search{text-align: left; height: 100px; font-size: 40px; border: solid 2px #ccc;}
+    #buttons{text-align: center; height: 80px; margin: 0;}
+    .skip{height: 50px;}
+    .vcent{
+        top: inherit; 
+        -webkit-transform: translateY(0%);
+    }
+    #title{
+        font-size: 30px;
+        font-weight: bold;
+        overflow: hidden;
+        padding-left: 2%;
+        padding-top: 0;
+    }
+    .footer{font-size: 40px; margin-top: 150px;}
+}

static/toggler.css

@@ -1,62 +0,0 @@
-.toggle, .toggler {
-  display: inline-block;
-  vertical-align: middle;
-  margin: 10px;
-}
-
-.toggler {
-  color: slategray;
-  transition: .2s;
-}
-
-.toggler--is-active {
-  color: black;
-}
-
-.b {
-  display: block;
-}
-
-.toggle {
-  width: 100px;
-  height: 60px;
-  border-radius: 100px;
-  background-color: #2ecc71;
-  overflow: hidden;
-  box-shadow: inset 0 0 2px 1px rgba(0, 0, 0, 0.05);
-}
-
-.check {
-  position: absolute;
-  display: block;
-  cursor: pointer;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  opacity: 0;
-  z-index: 6;
-}
-
-.check:checked ~ .switch {
-  right: 2px;
-  left: 37.5%;
-  transition: 0.25s cubic-bezier(0.785, 0.135, 0.15, 0.86);
-  transition-property: left, right;
-  transition-delay: .08s, 0s;
-}
-
-.switch {
-  position: absolute;
-  left: 2px;
-  top: 2px;
-  bottom: 2px;
-  right: 37.5%;
-  background-color: #fff;
-  border-radius: 36px;
-  z-index: 1;
-  transition: 0.25s cubic-bezier(0.785, 0.135, 0.15, 0.86);
-  transition-property: left, right;
-  transition-delay: 0s, .08s;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
-}