Better background and positioning of the volumeslider for mobile

server/public/assets/css/style.css

@@ -2426,13 +2426,28 @@ nav ul li:hover, nav ul li.active {
       display: none;
     }*/
 
+    .volume-container {
+      position: absolute;
+      right: 0%;
+      width: 40px;
+      top: -127px;
+      height: 127px;
+      left: auto;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      background: #464646;
+    }
+
+    .volume-container-cast {
+      right: 10%;
+    }
+
     #volume {
       width: 10px;
       height: 100px;
-      position: absolute;
-      right: 13%;
-      top: -120px;
-      left: auto;
+      left: 0px;
     }
 
     #volume .ui-slider-range-min {
@@ -2440,7 +2455,7 @@ nav ul li:hover, nav ul li.active {
     }
 
     #volume .ui-slider-handle {
-      margin-left: 20%;
+      margin-left: 3px;
     }
 
     .ui-widget-header {

server/public/assets/js/listeners.js

@@ -502,6 +502,9 @@ initializeCastApi = function() {
         Helper.log(event.castState);
         if(event.castState == "NOT_CONNECTED"){
             $(".castButton").css("display", "block");
+            if(!$(".volume-container").hasClass("volume-container-cast")) {
+                $(".volume-container").addClass("volume-container-cast");
+            }
             cast_ready_connect = true;
             if(!localStorage.getItem("_chSeen") || localStorage.getItem("_chSeen") != "seen") {
                 $(".castButton").css("display", "block");
@@ -515,6 +518,7 @@ initializeCastApi = function() {
             }
         } else if(event.castState == "NO_DEVICES_AVAILABLE"){
             cast_ready_connect = false;
+            $(".volume-container").removeClass("volume-container-cast");
         }
     });
 

server/public/assets/js/playercontrols.js

@@ -35,7 +35,7 @@ var Playercontrols = {
         };
         if(Helper.mobilecheck()) {
             slider_values.orientation = "vertical";
-            $("#volume").toggleClass("hide");
+            $(".volume-container").toggleClass("hide");
         }
         $("#volume").slider(slider_values);
         Playercontrols.choose_button(vol, false);
@@ -110,7 +110,7 @@ var Playercontrols = {
 
     mute_video: function() {
         if(Helper.mobilecheck()) {
-            $("#volume").toggleClass("hide");
+            $(".volume-container").toggleClass("hide");
         } else {
             if(!Player.player.isMuted()) {
                 if(chromecastAvailable) castSession.sendMessage("urn:x-cast:zoff.me", {type: "mute"});

server/public/layouts/channel.handlebars

@@ -204,7 +204,9 @@
                     <i id="v-medium" class="material-icons">volume_down</i>
                     <i id="v-full" class="material-icons">volume_up</i>
                   </div>
+                  <div class="volume-container">
                       <div id="volume"></div>
+                  </div>
                   <div id="viewers" data-position="top"></div>
                   <div id="bar"></div>
                 </div>