From d9af601d5f09941691933b925c254de9f80262e3 Mon Sep 17 00:00:00 2001
From: "Nicolas A. Tonne" <nixatto@gmail.com>
Date: Sun, 19 Apr 2015 17:48:13 +0200
Subject: [PATCH] many good

---
 index.php                   |  28 +++----
 php/footer.php              |   6 +-
 php/nochan.php              |   4 +-
 static/css/controlstyle.css | 112 -------------------------
 static/css/style.css        | 163 +++++++++++++++++++++++++++++++++++-
 static/js/youtube.js        |  68 +++++++--------
 6 files changed, 218 insertions(+), 163 deletions(-)
 delete mode 100755 static/css/controlstyle.css
diff --git a/index.php b/index.php
index 4919bac8..1eb49538 100755
--- a/index.php
+++ b/index.php
@@ -10,32 +10,31 @@
 <html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://ogp.me/ns/fb#">
 <head>
 	<?php include("php/header.php"); ?>
-  <link rel="stylesheet" type="text/css" href="static/css/controlstyle.css" />
 </head>
 <body id="channelpage">
     <header>
       <div class="navbar-fixed">
         <nav id="nav">
             <div class="nav-wrapper">
-                <a href="/" class="brand-logo hide-on-small-only">
+                <a href="/" class="brand-logo hide-on-med-and-down">
                     <img id="zicon" src="static/images/squareicon_small.png" alt="zöff" title="Zöff">
                 </a>
                 <div class="brand-logo truncate zbrand">
-                    <a href="//zoff.no" class="hide-on-med-and-up">Zöff</a>
-                    <span class="hide-on-med-and-up">/</span>
+                    <a href="//zoff.no" class="hide-on-large-only">Zöff</a>
+                    <span class="hide-on-large-only">/</span>
                     <span id="chan" class="chan clickable" title="Show big URL" onclick="show()"><?php echo(ucfirst($list));?></span>
                 </div>
-                <div class="container">
-                    <ul class="row">
-                        <li class="col s6" id="song-title">
-                        </li>
-                        <!--<li>
-                            <input id="search" class="search_input" type="search" required title="Search for songs..." spellcheck="false" placeholder="Search" onsubmit="null;" autocomplete="off">
-                        </li>-->
-                    </ul>
-                </div>
+                
+                <ul class="title-container hide-on-med-and-down">
+                    <li class="col s9" id="song-title">
+                        Loading...
+                    </li>
+                    <li class="search-container">
+                        <input id="search" class="search_input" type="search" required title="Search for songs..." spellcheck="false" placeholder="Search" onsubmit="null;" autocomplete="off">
+                    </li>
+                </ul>
 
-                <ul class="right">
+                <ul class="right control-list">
                     <li>
                         <a class="nav-btn" href="#" id="search-btn" onclick="">
                             <i class="mdi-action-search"></i>
@@ -89,6 +88,7 @@
                   <div id="fullscreen">
                     <i class="mdi-navigation-fullscreen"></i>
                   </div>
+                  <div id="viewers"></div>
                   <div id="bar"></div>
                 </div>
             </div>
diff --git a/php/footer.php b/php/footer.php
index cf4f59f9..5db50e2d 100755
--- a/php/footer.php
+++ b/php/footer.php
@@ -56,15 +56,17 @@
     socket.emit('list', '<?php echo $list; ?>,'+guid);
 </script>
 
-<script type="text/javascript" src="static/js/lib/iscroll-min.js"></script>
+
 <script type="text/javascript" src="static/js/list.js"></script>
 <script type="text/javascript" src="static/js/searchlist.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/lib/color-thief.min.js"></script>
 <script type="text/javascript" src="static/js/lib/materialize.js"></script>
+<script type="text/javascript" src="static/js/lib/color-thief.min.js"></script>
+<script type="text/javascript" src="static/js/lib/iscroll-min.js"></script>
+
 <!-- Piwik tracking -->
 <script type="text/javascript">
   var _paq = _paq || [];
diff --git a/php/nochan.php b/php/nochan.php
index 54935d53..0f2b9443 100755
--- a/php/nochan.php
+++ b/php/nochan.php
@@ -143,7 +143,9 @@ if(isset($_GET['chan'])){
                                 </a>
                             </p>
                             <p>
-                                <img src="https://chart.googleapis.com/chart?chs=150x150&cht=qr&chl=http://zoff.no/<?php echo $list; ?>&choe=UTF-8&chld=L|1" alt="QRCode for link" title="QRCode">
+                            <a href="https://chart.googleapis.com/chart?chs=500x500&cht=qr&chl=http://zoff.no/<?php echo $list; ?>&choe=UTF-8&chld=L|1" >
+                                <img src="https://chart.googleapis.com/chart?chs=150x150&cht=qr&chl=http://zoff.no/<?php echo $list; ?>&choe=UTF-8&chld=L|1" alt="QRCode for link" title="QR code for this page, for easy sharing!">
+                            </a>
                             </p>
                         </li>
                     </ul>
diff --git a/static/css/controlstyle.css b/static/css/controlstyle.css
deleted file mode 100755
index 80983b71..00000000
--- a/static/css/controlstyle.css
+++ /dev/null
@@ -1,112 +0,0 @@
-
-#controls
-{
-	opacity:0;
-	height:5%;
-	background-color:rgba(255, 255, 255, 0.1);
-	width:100%;
-}
-
-#playpause, #duration, #volume-button
-{
-  float:left;
-  color:white;
-}
-
-#playpause, #volume-button
-{
-  margin-left:10px;
-}
-
-#playpause:hover, #volume-button:hover, #fullscreen:hover
-{
-	color:rgba(255,255,255,0.5);
-}
-
-#fullscreen
-{
-  float:right;
-  color:white;
-  margin-right:15px;
-}
-
-#duration
-{
-  margin-top:5px;
-  font-family:"Roboto", sans-serif;
-  font-weight:300;
-  margin-left:15px;
-}
-
-#play, #pause, #volume-button, #fullscreen
-{
-  font-size:20px;
-  cursor:pointer;
-}
-
-#volume {
-	cursor:pointer;
-  float:left;
-    position: relative;
-    left: 10px;
-    margin: 13px auto;
-    height:5px;
-    width: 75px;
-    background-color:rgba(0, 0, 0, 0.5);
-    border: none;
-    outline: none;
-    border-radius: 2px;
-}
-
-#volume .ui-slider-range-min {
-    height:5px;
-    width: 75px;
-    position: absolute;
-    background-color:rgba(255, 255, 255, 0.8);
-	border: none;
-	outline: none;
-	border-radius: 2px;
-}
-
-#volume .ui-slider-handle {
-    height:15px;
-    width:5px;
-    background-color:white;
-    position: absolute;
-    cursor: pointer;
-    outline: none;
-    border: none;
-    display: none;
-}
-
-.ui-slider-handle
-{
-	margin-top:-5px;
-}
-
-.play
-{
-	background-size: auto;
-	width: 55px;
-	height: 27px;
-}
-
-.pause
-{
-	background-size: auto;
-	width: 55px;
-	height: 27px;
-}
-
-.hide
-{
-	display:none !important;
-}
-
-#bar
-{
-	height:100%;
-	background-color:rgba(0,0,0,0.5);
-	-webkit-transition: width 1s ease;
-    transition: width 1s ease;
-}
diff --git a/static/css/style.css b/static/css/style.css
index e1e913d0..622f86cc 100755
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -50,6 +50,7 @@ input[type=text]:focus:not([readonly]), input[type=password]:focus:not([readonly
 
 nav .brand-logo{
     padding-left: 20px;
+    position: relative;
 }
 
 #fp-nav {
@@ -64,9 +65,11 @@ main {
 }
 
 nav .zbrand{
-    left:90px;
     max-width: 22%;
     overflow: hidden;
+    position: relative;
+    padding-left: 0;
+    margin-left: -10px;
 }
 
 .fullwidth{
@@ -92,6 +95,7 @@ nav .zbrand{
 .cardbg{
     background-repeat: no-repeat;
     background-size: 124%;
+    background-size: cover;
     background-position: 50% 50%;
     background-color: #171717;
     height: 120px;
@@ -190,6 +194,43 @@ hide mdi-action-visibility mdi-action-visibility-off
     padding:0px 15px;
 }
 
+.control-list{
+    position: fixed;
+    top:0;
+    right:0;
+}
+
+.title-container{
+    width: 65%;
+    width: calc(90% - 256px - 130px);
+    padding-left: 30px;
+    display: inline-block;
+    height: 100%;
+    overflow: hidden;
+}
+
+.title-container li{ 
+    height:100%;
+    height: 64px;
+    width: 500px;
+    padding: 0 15px;
+}
+
+.search-container{
+    width: 35% !important;
+    display: block;
+}
+
+#song-title{
+    font-size: 22px;
+    font-weight: 300;
+}
+
+#viewers{
+    width: initial;
+    padding-right: 3%;
+}
+
 #player{
   height:95%;
   position: relative;
@@ -333,3 +374,123 @@ hide mdi-action-visibility mdi-action-visibility-off
 .collapsible-body ul li.white-bg{
   background-color:white !important;
 }
+
+
+/************** Youtube controls **************/
+
+#controls
+{
+    opacity:0;
+    height:5%;
+    background-color:rgba(255, 255, 255, 0.1);
+    width:100%;
+  color:white;
+}
+
+#playpause, #duration, #volume-button
+{
+  float:left;
+  color:white;
+}
+
+#playpause, #volume-button
+{
+  margin-left:10px;
+}
+
+#playpause:hover, #volume-button:hover, #fullscreen:hover
+{
+    color:rgba(255,255,255,0.5);
+}
+
+#fullscreen
+{
+  float:right;
+  color:white;
+  margin-right:15px;
+}
+
+#duration, #viewers
+{
+  margin-top:5px;
+  font-family:"Roboto", sans-serif;
+  font-weight:300;
+  margin-left:15px;
+}
+
+#viewers{
+  float: right;
+}
+
+#play, #pause, #volume-button, #fullscreen
+{
+  font-size:20px;
+  cursor:pointer;
+}
+
+#volume {
+    cursor:pointer;
+  float:left;
+    position: relative;
+    left: 10px;
+    margin: 13px auto;
+    height:5px;
+    width: 75px;
+    background-color:rgba(0, 0, 0, 0.5);
+    border: none;
+    outline: none;
+    border-radius: 2px;
+}
+
+#volume .ui-slider-range-min {
+    height:5px;
+    width: 75px;
+    position: absolute;
+    background-color:rgba(255, 255, 255, 0.8);
+    border: none;
+    outline: none;
+    border-radius: 2px;
+}
+
+#volume .ui-slider-handle {
+    height:15px;
+    width:5px;
+    background-color:white;
+    position: absolute;
+    cursor: pointer;
+    outline: none;
+    border: none;
+    display: none;
+}
+
+.ui-slider-handle
+{
+    margin-top:-5px;
+}
+
+.play
+{
+    background-size: auto;
+    width: 55px;
+    height: 27px;
+}
+
+.pause
+{
+    background-size: auto;
+    width: 55px;
+    height: 27px;
+}
+
+.hide
+{
+    display:none !important;
+}
+
+#bar
+{
+    height:100%;
+    background-color:rgba(0,0,0,0.5);
+    -webkit-transition: width 1s ease;
+    transition: width 1s ease;
+}
diff --git a/static/js/youtube.js b/static/js/youtube.js
index 2b4e2e1b..d9bf0fc2 100755
--- a/static/js/youtube.js
+++ b/static/js/youtube.js
@@ -47,28 +47,34 @@ var playing = false;
 socket.on(chan.toLowerCase()+",np", function(obj)
 {
 	console.log(obj);
-	console.log("gotten new song");
-	video_id = obj[0][0]["id"];
-	conf = obj[1][0];
-	time = obj[2];
-	seekTo = time - conf["startTime"];
-	song_title = obj[0][0]["title"];
-	getTitle(song_title, viewers);
-	if(player_ready && !window.mobilecheck())
-	{
-		if(ytplayer.getVideoUrl().split('v=')[1] != video_id)
+	if(obj[0].length == 0){
+		console.log("Empty list");
+		document.getElementById('song-title').innerHTML = "Empty channel. Add some songs!"
+	}
+	else{
+		console.log("gotten new song");
+		video_id = obj[0][0]["id"];
+		conf = obj[1][0];
+		time = obj[2];
+		seekTo = time - conf["startTime"];
+		song_title = obj[0][0]["title"];
+		getTitle(song_title, viewers);
+		if(player_ready && !window.mobilecheck())
 		{
-			ytplayer.loadVideoById(video_id);
-			setBGimage(video_id);
-			notifyUser(video_id, song_title);
-			if(paused)
-				ytplayer.pauseVideo();
-		}else
-			console.log("like");
-		if(!paused)
-			ytplayer.playVideo();
-		if(ytplayer.getDuration() > seekTo)
-			ytplayer.seekTo(seekTo);
+			if(ytplayer.getVideoUrl().split('v=')[1] != video_id)
+			{
+				ytplayer.loadVideoById(video_id);
+				setBGimage(video_id);
+				notifyUser(video_id, song_title);
+				if(paused)
+					ytplayer.pauseVideo();
+			}else
+				console.log("like");
+			if(!paused)
+				ytplayer.playVideo();
+			if(ytplayer.getDuration() > seekTo)
+				ytplayer.seekTo(seekTo);
+		}
 	}
 });
 
@@ -110,8 +116,8 @@ $(document).ready(function()
 
 		if($("#chan").html().toLowerCase() == "jazz")
 		{
-			loadjsfile("static/js/jazzscript.js");
-			peis = true;
+			//loadjsfile("static/js/jazzscript.js");
+			//peis = true;
 		}
 	}
 });
@@ -141,8 +147,6 @@ function msieversion() {
 }
 
 function onYouTubeIframeAPIReady() {
-	$("#change").css("-webkit-transition", "opacity 1s");
-	$("#change").css("opacity", "1");
 	ytplayer = new YT.Player('player', {
 		height: window.height*0.75,
 		width: window.width*0.6,
@@ -156,9 +160,9 @@ function onYouTubeIframeAPIReady() {
 	});
 	if(peis)
 	{
-		jazz_setup();
+		//jazz_setup();
 	}
-	$("#player").css("opacity", "0");
+
 }
 
 function onPlayerStateChange(newState) {
@@ -200,14 +204,12 @@ function getTitle(titt, v)
 {
 	var outPutWord = v > 1 ? "viewers" : "viewer";
 	var title= decodeURIComponent(titt);
+	var elem = document.getElementById('song-title');
 	document.title = title + " • Zöff";
 	if(!window.mobilecheck()){
-		document.getElementById('song-title').innerHTML = title + " • " + v + " " + outPutWord;
-	}else
-	{
-		document.getElementById("mobileTitle").innerHTML = title;
-		document.getElementById('song-title').innerHTML = "Search • 1 " + v + " " + outPutWord;
-		//document.getElementById("viewers").innerHTML = viewers[5].length + " " + outPutWord;
+		elem.innerHTML = title;
+		document.getElementById('viewers').innerHTML = v + " " + outPutWord;
+		elem.title = title + " • " + v + " " + outPutWord;
 	}
 }
 
