Moved skip-button down

server/public/assets/css/style.css

@@ -2006,13 +2006,35 @@ nav ul li:hover, nav ul li.active {
     margin-top:-6px;
 }
 
+.playbar {
+    color: white;
+}
+
+.skip.playbar, .prev.playbar {
+  float:left;
+  font-size: 24px;
+}
+
+.playbar-btn {
+  transition: background-color .2s;
+}
+
+.playbar-btn:hover {
+  background-color: rgba(0,0,0,0.6);
+  color:rgba(255,255,255,0.5);
+}
+
 #playpause, #duration, #volume-button
 {
   float:left;
   color:white;
 }
 
-#playpause, #volume-button
+.prev.playbar, #playpause, .skip.playbar {
+  padding: 0 2.5px;
+}
+
+.prev.playbar, #playpause, #volume-button
 {
   margin-left:10px;
 }
@@ -2058,7 +2080,7 @@ nav ul li:hover, nav ul li.active {
 
 #play, #pause, #volume-button, #fullscreen
 {
-  font-size: 30px;
+  font-size: 24px;
   cursor:pointer;
   height: 33px;
   line-height: 31px;
@@ -2420,7 +2442,7 @@ nav ul li:hover, nav ul li.active {
       padding-left: 10px;
     }
 
-    #play, #pause, #volume-button i, #fullscreen i, .castButton-unactive i, .castButton-active i{
+    #play, #pause, #volume-button i, #fullscreen i, .castButton-unactive i, .castButton-active i, .playbar-btn i{
       font-size: 31px;
       font-size: 31px !important;
       margin-top: 8px;
@@ -2524,7 +2546,7 @@ nav ul li:hover, nav ul li.active {
     }
     .control-list{
         position: absolute !important;
-        width: 120px;
+        width: 88px;
     }
 
     .page-footer{

server/public/assets/js/listeners.js

@@ -297,11 +297,17 @@ function init(){
             tooltip: "Search"
         });
 
+        /*$("#prev").tooltip({
+            delay: 5,
+            position: "bottom",
+            tooltip: "Previous",
+        });
+
         $("#skip").tooltip({
             delay: 5,
             position: "bottom",
             tooltip: "Skip",
-        });
+        });*/
 
         $("#shuffle").tooltip({
             delay: 5,
@@ -749,7 +755,7 @@ function set_title_width(start){
         if(start){
             add_width = $(window).width()*0.15;
         }
-        var test_against_width = $(window).width() - $(".control-list").width() - add_width - 66;
+        var test_against_width = $(window).width() - $(".control-list").width() - add_width - 33;
         title_width = test_against_width;
         $(".title-container").width(title_width);
     } else {
@@ -1454,9 +1460,14 @@ $(document).on("click", ".chat-tab", function(){
     $("#text-chat-input").focus();
 });
 
-$(document).on("click", "#skip", function(e){
+$(document).on("click", ".prev", function(e){
     e.preventDefault();
-    List.skip();
+    List.skip(false);
+});
+
+$(document).on("click", ".skip", function(e){
+    e.preventDefault();
+    List.skip(true);
 });
 
 $(document).on("click", "#chan", function(e){
@@ -1854,7 +1865,8 @@ function onepage_load(){
             $('#fullscreen').tooltip("remove");
             $('#admin-lock').tooltip("remove");
             $("#search-btn").tooltip("remove");
-            $("#skip").tooltip("remove");
+            //$("#prev").tooltip("remove");
+            //$("#skip").tooltip("remove");
             $("#shuffle").tooltip("remove");
             $("#settings").tooltip("remove");
         }

server/public/layouts/channel.handlebars

@@ -43,12 +43,17 @@
                                 <!--<span class="hover-text">Find</span>-->
                             </a>
                         </li>
-                        <li>
-                            <a class="nav-btn" href="#skip" id="skip">
-                                <i class="material-icons">skip_next</i>
-                                <!--<span class="hover-text">Skip</span>-->
+                        <!--<li>
+                            <a class="nav-btn prev" href="#prev">
+                                <i class="material-icons">skip_previous</i>
                             </a>
                         </li>
+                        <li>
+                            <a class="nav-btn skip" href="#skip">
+                                <i class="material-icons">skip_next</i>
+                                <span class="hover-text">Skip</span>
+                            </a>
+                        </li>-->
                         <li>
                             <a class="nav-btn hide-on-small-only" href="#stir" id="shuffle">
                                 <i class="material-icons">shuffle</i>
@@ -188,10 +193,16 @@
                 </div>
             </div>
             <div id="controls" class="noselect">
-                <div id="playpause">
+                <!--<a class="playbar-btn prev playbar" href="#prev">
+                    <i class="material-icons">skip_previous</i>
+                </a>-->
+                <div id="playpause" class="playbar-btn">
                     <i id="play" class="material-icons hide">play_arrow</i>
                     <i id="pause" class="material-icons">pause</i>
                 </div>
+                <a class="playbar-btn skip playbar" href="#skip">
+                    <i class="material-icons">skip_next</i>
+                </a>
                 <div id="duration"></div>
                 <div id="fullscreen" class="hide-on-small-only">
                     <i class="material-icons">fullscreen</i>