Fixed some dragging issues, and updated the embedded version

public/css/embed.css

@@ -191,6 +191,7 @@
 #playpause, #volume-button
 {
   margin-left:10px;
+  font-size: 23px;
 }
 
 #playpause:hover, #volume-button:hover, #fullscreen:hover
@@ -216,6 +217,8 @@
 
 #viewers{
   float: right;
+  display: flex;
+  align-items: center;
 }
 
 #play, #pause, #volume-button, #fullscreen
@@ -231,12 +234,12 @@
     left: 10px;
     margin: 13px auto;
     height:5px;
-    width: 60px;
+    width: 75px;
     /*background-color:rgba(0, 0, 0, 0.5);*/
     background:rgba(0, 0, 0, 0.5) 50% 50% repeat-x;
     border: none;
     outline: none;
-    /*border-radius: 2px;*/
+    border-radius: 2px;
 }
 
 #volume .ui-slider-range-min {
@@ -246,25 +249,33 @@
     background-color:rgba(255, 255, 255, 0.8);
     border: none;
     outline: none;
-    /*border-radius: 2px;*/
+    border-radius: 2px;
 }
 
 #volume .ui-slider-handle {
-    height:15px;
+  height: 14px;
-    width:5px;
+  width: 14px;
-    background:#fff 50% 50% repeat-x;
+  background: #fff 50% 50% repeat-x;
   position: absolute;
   cursor: pointer;
   outline: none;
   border: none;
-    display: none;
+  margin-left: -7.5px;
-    margin-left:-2.5px;
+  border-radius: 1000px;
-    margin-top:0px;
+  transition: background 0.2s ease, box-shadow 0.2s ease;
 }
 
+#volume .ui-state-active {
+  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.01), 0 0 0 7px rgba(255,255,255,0.3);
+  position: absolute;
+  width: 14px;
+  height: 14px;
+  border-radius: 21px;
+  background: #dadada;
+}
 .ui-slider-handle
 {
-    margin-top:-5px;
+    margin-top:-4px;
 }
 
 .play
@@ -291,3 +302,46 @@
     height:100%;
     background-color:rgba(0,0,0,0.5);
 }
+
+html {
+  overflow: hidden;
+}
+
+#pageButtons, #pageButtons a{
+  color:white !important;
+}
+
+#pageNumber{
+  cursor: default;
+  color: white;
+  padding:0;
+}
+
+.prev_page, .next_page, .last_page, .first_page{
+  cursor: pointer;
+}
+
+
+.prev_page_hide, .next_page_hide, .last_page_hide, .first_page_hide{
+  visibility: visible !important;
+  color:gray;
+  cursor:default;
+}
+
+.prev_page_hide, .prev_page, .first_page, .first_page_hide{
+  padding:0 10px;
+  float:left;
+}
+
+.next_page_hide, .next_page, .last_page, .last_page_hide{
+  padding:0 10px;
+  float:right;
+}
+
+.last_page, .last_page_hide, .first_page, .first_page_hide{
+  display: none !important;
+}
+
+#wrapper{
+  height: 94%;
+}

public/html/embed.html

@@ -5,47 +5,13 @@
 		<meta name="author" content="Nicolas 'Nixo' Almagro Tonne &amp; Kasper 'KasperRT' Rynning-Tønnesen"/>
 		<meta name="description" content="The Shared (free) YouTube radio. Being built around the YouTube search and video API it enables the creation of collaborative and shared live playlists, with billions of videos and songs to choose from, all for free and without registration. Enjoy!"/>
 		<meta charset="UTF-8"/>
+		<link type="text/css" rel="stylesheet" href="/public/css/materialize.min.css" />
 		<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
-		<style>
+		<script type="text/javascript" src="/public/dist/lib/jquery-2.1.3.min.js"></script>
-		#pageButtons, #pageButtons a{
+		<script type="text/javascript" src="/public/dist/lib/jquery-ui-1.10.3.min.js"></script>
-			color:white !important;
+		<script type="text/javascript" src="/public/dist/lib/socket.io.min.js"></script>
-		}
+		<link type="text/css" rel="stylesheet" href="/public/css/embed.css" />
-
+		<script src="public/dist/embed.min.js"></script>
-		#pageNumber{
-			cursor: default;
-			color: white;
-			padding:0;
-		}
-
-		.prev_page, .next_page, .last_page, .first_page{
-			cursor: pointer;
-		}
-
-
-		.prev_page_hide, .next_page_hide, .last_page_hide, .first_page_hide{
-			visibility: visible !important;
-			color:gray;
-			cursor:default;
-		}
-
-		.prev_page_hide, .prev_page, .first_page, .first_page_hide{
-		  padding:0 10px;
-		  float:left;
-		}
-
-		.next_page_hide, .next_page, .last_page, .last_page_hide{
-		  padding:0 10px;
-		  float:right;
-		}
-
-		.last_page, .last_page_hide, .first_page, .first_page_hide{
-			display: none !important;
-		}
-
-		#wrapper{
-			height: 94%;
-		}
-		</style>
 	</head>
 	<body>
 		<script>
@@ -60,6 +26,6 @@
 
 			window.addEventListener("message", receiveMessage, false);
 		</script>
-		<div id="song-title"></div><div id="container" style="display:inline-flex;"><div id="player-container"><div id="player"></div><div id="controls" class="noselect"><div id="zoffbutton" title="Visit the channel!"></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 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="viewers"></div><div id="bar"></div></div></div><div id="playlist"><div id="wrapper"><div id="preloader" class="progress channel_preloader"><div class="indeterminate"></div></div><div id="list-song-html"><div id="list-song" class="card left-align list-song"><span class="clickable vote-container" title="Vote!"><a class="clickable center-align votebg"><div class="lazy card-image cardbg list-image" style=""></div></a><span class="card-content"><span class="flow-text truncate list-title"></span><span class="vote-span"><span class="list-votes"></span><span class="highlighted vote-text">&nbsp;votes</span></span></span></span></div></div></div></div></div><script type="text/javascript" src="/public/dist/lib/jquery-2.1.3.min.js"></script><script type="text/javascript" src="/public/dist/lib/jquery-ui-1.10.3.min.js"></script><script type="text/javascript" src="/public/dist/lib/socket.io.min.js"></script><script src="public/dist/embed.min.js"></script>
+		<div id="song-title"></div><div id="container" style="display:inline-flex;"><div id="player-container"><div id="player"></div><div id="controls" class="noselect"><div id="zoffbutton" title="Visit the channel!"></div><div id="playpause"><i id="play" class="material-icons hide">play_arrow</i><i id="pause" class="material-icons">pause</i></div><div id="duration">00:00 / 00:00</div><div id="volume-button"><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="viewers"></div><div id="bar"></div></div></div><div id="playlist"><div id="wrapper"><div id="preloader" class="progress channel_preloader"><div class="indeterminate"></div></div><div id="list-song-html"><div id="list-song" class="card left-align list-song"><span class="clickable vote-container" title="Vote!"><a class="clickable center-align votebg"><div class="lazy card-image cardbg list-image" style=""></div></a><span class="card-content"><span class="flow-text truncate list-title"></span><span class="vote-span"><span class="list-votes"></span><span class="highlighted vote-text">&nbsp;votes</span></span></span></span></div></div></div></div></div>
 	</body>
 </html>

public/js/embed.js

@@ -38,9 +38,6 @@ $(document).ready(function(){
 
 	color = "#" + hash[1];
 
-	$("head").append('<link type="text/css" rel="stylesheet" href="/public/css/embed.css" />');
-	$("head").append('<link type="text/css" rel="stylesheet" href="/public/css/materialize.min.css" />');
-
 	add = "https://zoff.me";
 	socket = io.connect(''+add+':8080', connection_options);
 

public/js/listeners.js

@@ -617,7 +617,10 @@ function change_offline(enabled, already_offline){
             });
 
 						$("#controls").on("mousedown", function(e) {
+							var acceptable = ["bar", "controls", "duration"];
+					    if(acceptable.indexOf($(e.target).attr("id")) >= 0) {
 								dragging = true;
+							}
 						});
 						$("#controls").on("mouseup", function(e) {
 							dragging = false;
@@ -721,7 +724,8 @@ function seekToMove(e){
         var _seconds = Helper.pad(Math.ceil(_time[1]));
         $("#seekToDuration").text(_minutes + ":" + _seconds);
 
-				if(dragging) {
+				var acceptable = ["bar", "controls", "duration"];
+		    if(acceptable.indexOf($(e.target).attr("id")) >= 0 && dragging) {
 					$("#bar").width(((100 / Player.player.getDuration()) * total) + "%");
 				}
     } catch(e){}