Stopped using jQuery UI

server/handlers/db.js

@@ -11,9 +11,9 @@ var db = mongojs('mongodb://' + mongo_config.host + '/' + mongo_config.config);
 var connected_db = mongojs('mongodb://' + mongo_config.host + '/user_credentials');
 var ObjectId = mongojs.ObjectId;
 
-db.collection("chat_logs").createIndex({ "createdAt": 1 }, { expireAfterSeconds: 600 });
+db.collection("chat_logs").createIndex({ "createdAt": 1 }, { expireAfterSeconds: 600 }, function(){});
-db.collection("timeout_api").createIndex({ "createdAt": 1 }, { expireAfterSeconds: 5 });
+db.collection("timeout_api").createIndex({ "createdAt": 1 }, { expireAfterSeconds: 5 }, function(){});
-db.collection("api_links").createIndex({ "createdAt": 1 }, { expireAfterSeconds: 86400 });
+db.collection("api_links").createIndex({ "createdAt": 1 }, { expireAfterSeconds: 86400 }, function(){});
 db.on('connected', function(err) {
     console.log("connected");
 });

server/public/assets/css/embed.css

@@ -324,10 +324,10 @@
     top: -.3em;
     margin-left: -.6em;
 }
-
 #volume {
+    border-radius: 10px;
     cursor:pointer;
-  float:left;
+    float:left;
     position: relative;
     left: 10px;
     margin: 13px auto;
@@ -337,17 +337,52 @@
     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 {
+#volume.vertical {
-    height:5px;
+    border-radius: 0px;
-    width: 75px;
+}
+
+#volume .volume-slid {
+    border-radius: 10px;
+    background: white;
+    height: 5px;
+    width: 0%;
+}
+
+#volume .volume-slid.vertical {
+    width: 100%;
+    height: 0%;
+    border-radius: 0px;
+    bottom: 0px;
     position: absolute;
-    background-color:rgba(255, 255, 255, 0.8);
+}
-    border: none;
+
-    outline: none;
+#volume .volume-handle {
-    border-radius: 2px;
+    height: 15px;
+    width: 15px;
+    background: white;
+    border-radius: 15px;
+    border: 1px solid lightgrey;
+    margin-top: -9.75px;
+    position: absolute;
+    left: 0%;
+    margin-left: -5.75px;
+    transition: background 0.2s ease, box-shadow 0.2s ease;
+}
+
+#volume .volume-handle.vertical {
+    bottom: 0%;
+    display: none;
+}
+#volume .volume-handle.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;
 }
 
 #toast-container{
@@ -365,33 +400,6 @@
     cursor: pointer;
 }
 
-#volume .ui-slider-handle {
-  height: 14px;
-  width: 14px;
-  background: #fff 50% 50% repeat-x;
-  position: absolute;
-  cursor: pointer;
-  outline: none;
-  border: none;
-  margin-left: -7.5px;
-  margin-top: 0;
-  border-radius: 1000px;
-  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:-4px;
-}
-
 .play
 {
     background-size: auto;

server/public/assets/css/style.css

@@ -2466,7 +2466,8 @@ nav ul li:hover, nav ul li.active {
     margin-left: -.6em;
 }
 
-#volume {
+#volume, #volume-control-remote {
+    border-radius: 10px;
     cursor:pointer;
     float:left;
     position: relative;
@@ -2481,31 +2482,58 @@ nav ul li:hover, nav ul li.active {
     /*border-radius: 2px;*/
 }
 
-#volume .ui-slider-range-min {
+#volume.rc, #volume-control-remote {
-    height:5px;
+    width:100%;
-    width: 75px;
+    margin-top: 30px;
-    position: absolute;
+    background: darkgrey;
-    background-color:rgba(255, 255, 255, 0.8);
-    border: none;
-    outline: none;
-    border-radius: 2px;
 }
 
-#volume .ui-slider-handle {
+#volume.vertical {
-    height: 14px;
+    border-radius: 0px;
-    width: 14px;
+}
-    background: #fff 50% 50% repeat-x;
+
+#volume .volume-slid, #volume-control-remote .volume-slid-remote {
+    border-radius: 10px;
+    background: white;
+    height: 5px;
+    width: 0%;
+}
+
+#volume.rc .volume-slid, #volume-control-remote .volume-slid-remote {
+    background: black;
+}
+
+#volume .volume-slid.vertical {
+    width: 100%;
+    height: 0%;
+    border-radius: 0px;
+    bottom: 0px;
     position: absolute;
-    cursor: pointer;
+}
-    outline: none;
+
-    border: none;
+#volume .volume-handle, #volume-control-remote .volume-handle-remote {
-    margin-left: -7.5px;
+    height: 15px;
-    margin-top: 0px;
+    width: 15px;
-    border-radius: 1000px;
+    background: white;
+    border-radius: 15px;
+    border: 1px solid lightgrey;
+    margin-top: -9.75px;
+    position: absolute;
+    left: 0%;
+    margin-left: -5.75px;
     transition: background 0.2s ease, box-shadow 0.2s ease;
 }
 
-#volume .ui-state-active {
+#volume.rc .volume-handle, #volume-control-remote .volume-handle-remote {
+    background: black;
+}
+
+#volume .volume-handle.vertical {
+    bottom: 0%;
+    display: none;
+}
+
+#volume .volume-handle.ui-state-active, #volume .volume-handle-remote.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;
@@ -2514,6 +2542,10 @@ nav ul li:hover, nav ul li.active {
     background: #dadada;
 }
 
+#volume.rc .volume-handle.ui-state-active, #volume .volume-handle-remote.ui-state-active {
+    background: #2d2d2d;
+}
+
 #volume-control-remote .ui-state-active, #volume-control .ui-state-active {
     box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.01), 0 0 0 15px rgba(1,1,1,0.15);
     position: absolute;
@@ -2523,11 +2555,6 @@ nav ul li:hover, nav ul li.active {
     background: #464646 !important;
 }
 
-.ui-slider-handle
-{
-    margin-top:-5px;
-}
-
 .play
 {
     background-size: auto;
@@ -3034,13 +3061,6 @@ nav ul li:hover, nav ul li.active {
         left: 0px;
     }
 
-    #volume .ui-slider-range-min {
-        width: 10px;
-    }
-
-    #volume .ui-slider-handle {
-        margin-left: 3px;
-    }
 
     .ui-widget-header {
         background: rgb(255,255,255);
@@ -3072,6 +3092,7 @@ nav ul li:hover, nav ul li.active {
         padding-left: 3px;
         height: 51px;
         padding-top: 0px;
+        width: 37px;
     }
 
     #fullscreen{
@@ -3743,7 +3764,7 @@ input:not([type]):focus:not([readonly])+label, input[type=text]:not(.browser-def
 
 .select-all {
     -webkit-user-select: all !important;  /* Chrome 49+ */
-  -moz-user-select: all !important;     /* Firefox 43+ */
+    -moz-user-select: all !important;     /* Firefox 43+ */
-  -ms-user-select: all !important;      /* No support yet */
+    -ms-user-select: all !important;      /* No support yet */
-  user-select: all !important;          /* Likely future */
+    user-select: all !important;          /* Likely future */
 }

server/public/assets/js/channel.js

@@ -53,6 +53,7 @@ var Channel = {
             menuWidth: 310,
             edge: side,
             closeOnClick: false,
+            draggable: false,
             onOpenStart: function(el) {
                 if(!$(".hamburger-sidenav").hasClass("open")) {
                     $(".hamburger-sidenav").addClass("open");
@@ -229,7 +230,7 @@ var Channel = {
                 Mobile_remote.initiate_volume();
             }
             $(".close-settings").addClass("hide");
-        }	else {
+            }	else {
             $('input#chan_description').characterCounter();
             if(!client) {
                 Channel.window_width_volume_slider();

server/public/assets/js/embed.js

@@ -147,7 +147,7 @@ function setup_list_listener() {
 }
 
 function setVolume(val) {
-    $("#volume").slider('value', val);
+    Playercontrols.visualVolume(val);
     Playercontrols.setVolume(val);
 }
 

server/public/assets/js/functions.js

@@ -67,7 +67,7 @@ function hide_native(way) {
                 $("#pause").toggleClass("hide");
             }
         } else {
-            $("#volume").slider("value", 100);
+            Playercontrols.visualVolume(100);
         }
         if(Helper.mobilecheck()) {
             if(!$("#player_overlay").hasClass("hide")) {
@@ -110,7 +110,7 @@ function hide_native(way) {
         Player.durationSetter();
         if(!Helper.mobilecheck()){
             Player.player.setVolume(Crypt.get_volume());
-            $("#volume").slider("value", Crypt.get_volume());
+            Playercontrols.visualVolume(Crypt.get_volume());
         }
         $("#player_overlay").addClass("hide");
         $("#player_overlay_text").toggleClass("hide");

server/public/assets/js/hostcontroller.js

@@ -33,7 +33,7 @@ var Hostcontroller = {
     host_on_action: function(arr) {
         if(enabled){
             if(arr.type == "volume") {
-                $("#volume").slider("value", arr.value);
+                Playercontrols.visualVolume(arr.value);
                 Player.setVolume(arr.value);
                 localStorage.setItem("volume", arr.value);
                 Playercontrols.choose_button(arr.value, false);

server/public/assets/js/listeners.js

@@ -17,7 +17,7 @@ var end_programmatically = false;
 var music 			   	  		= 0;
 var was_stopped = false;
 var timed_remove_check;
-var slider_type = "horizontal";
+var slider_type = Helper.mobilecheck() ? "vertical" : "horizontal";
 var programscroll = false;
 var lastCommand;
 var tried_again = false;

server/public/assets/js/mobileremote.js

@@ -39,16 +39,27 @@ var Mobile_remote = {
 	},
 
 	initiate_volume: function() {
-		$("#volume-control-remote").slider({
+		var vol = 100;
-			min: 0,
+        $("#volume-control-remote").append("<div class='volume-slid-remote'></div>");
-			max: 100,
+        $("#volume-control-remote").append("<div class='volume-handle-remote'></div>");
-			value: 100,
+            $(".volume-slid-remote").css("width", vol + "%");
-			range: "min",
+            $(".volume-handle-remote").css("left", "calc(" + vol + "% - 1px)");
-			animate: true,
+        document.getElementById("volume-control-remote").onmousedown = function(e) {
-			stop:function(event, ui) {
+			e.preventDefault();
-				socket.emit("id", {id: Mobile_remote.id, type: "volume", value: ui.value});
+			Playercontrols.dragMouseDown(e);
-			}
+		}
-		});
+        document.getElementById("volume-control-remote").touchstart = function(e) {
+			e.preventDefault();
+			Playercontrols.dragMouseDown(e);
+		}
+		document.getElementById("volume-control-remote").touchmove = function(e) {
+			e.preventDefault();
+			Playercontrols.dragMouseDown(e);
+		}
+        document.getElementById("volume-control-remote").onclick = function(e) {
+			Playercontrols.elementDrag(e);
+			Playercontrols.closeDragElement();
+		}
 	}
 
 };

server/public/assets/js/playercontrols.js

@@ -2,6 +2,7 @@ var Playercontrols = {
 
     stopInterval: false,
 
+
     initYoutubeControls: function() {
         Playercontrols.initControls();
     },
@@ -15,31 +16,149 @@ var Playercontrols = {
     },
 
     initSlider: function() {
+        window.visualVolume = Playercontrols.visualVolume;
         try {
-            vol = (Crypt.get_volume());
-            $("#volume").slider("destroy");
-        } catch(e){
 
+            vol = (Crypt.get_volume());
+            //$("#volume").slider("destroy");
+        } catch(e){
+            vol = 100;
         }
-        var slider_values = {
+        try {
-            min: 0,
+            if(document.getElementsByClassName("volume-slid")) {
-            max: 100,
+                document.getElementById("volume").innerHTML = "";
-            value: vol,
-            range: "min",
-            animate: true,
-            slide: function(event, ui) {
-                Playercontrols.setVolume(ui.value);
-                try{Crypt.set_volume(ui.value);}catch(e){}
             }
-        };
+        }catch(e){}
         if(Helper.mobilecheck() || slider_type == "vertical") {
             slider_values.orientation = "vertical";
             if(!$(".volume-container").hasClass("hide")) {
                 $(".volume-container").toggleClass("hide");
             }
         }
-        $("#volume").slider(slider_values);
+        $("#volume").append("<div class='volume-slid " + slider_type + "'></div>");
+        $("#volume").append("<div class='volume-handle " + slider_type + "'></div>");
+        window.player = Player.player;
+        if(slider_type != "vertical") {
+            if($("#volume").hasClass("vertical")) {
+                $("#volume").removeClass("vertical");
+            }
+            $(".volume-slid").css("width", vol + "%");
+            $(".volume-handle").css("left", "calc(" + vol + "% - 1px)");
+        } else {
+            if(!$("#volume").hasClass("vertical")) {
+                $("#volume").addClass("vertical");
+            }
+            $(".volume-slid").css("height", vol + "%");
+            $(".volume-handle").css("bottom", "calc(" + vol + "% - 1px)");
+
+        }
         Playercontrols.choose_button(vol, false);
+        //document.getElementsByClassName("volume-handle")[0].onmousedown = Playercontrols.dragMouseDown;
+        //Playercontrols.visualVolume(slider_values);
+        //document.getElementsByClassName("volume-slid")[0].onmousedown = Playercontrols.dragMouseDown;
+        document.getElementById("volume").onmousedown = function(e) {
+            Playercontrols.dragMouseDown(e, "player");
+        }
+        document.getElementById("volume").touchstart = function(e) {
+            e.preventDefault();
+            Playercontrols.dragMouseDown(e, "player");
+        }
+        document.getElementById("volume").onclick = function(e) {
+            Playercontrols.elementDrag(e, "player");
+            Playercontrols.closeDragElement("player");
+        }
+    },
+
+    dragMouseDown: function(e, element) {
+        e = e || window.event;
+        // get the mouse cursor position at startup:
+        document.onmouseup = function() {
+            Playercontrols.closeDragElement(element);
+        }
+        document.touchend = function() {
+            Playercontrols.closeDragElement(element);
+        }
+        // call a function whenever the cursor moves:
+        document.onmousemove = function(e) {
+            Playercontrols.elementDrag(e, element);
+        }
+        document.touchmove = function(e) {
+            Playercontrols.elementDrag(e, element);
+        }
+    },
+
+    elementDrag: function(e, element) {
+        var elmnt;
+        var cmp_elmnt;
+        var slid_elmnt;
+        if(element == "player") {
+            elmnt = document.getElementsByClassName("volume-handle")[0];
+            cmp_elmnt = document.getElementById("volume");
+            slid_elmnt = document.getElementsByClassName("volume-slid")[0];
+        } else {
+            elmnt = document.getElementsByClassName("volume-handle-remote")[0];
+            cmp_elmnt = document.getElementById("volume-control-remote");
+            slid_elmnt = document.getElementsByClassName("volume-slid-remote")[0];
+        }
+        e = e || window.event;
+
+        var pos3 = e.clientX;
+        var pos4 = e.clientY;
+        var volume = 0;
+        if(slider_type != "vertical" || element != "player") {
+            if(elmnt.className.indexOf("ui-state-active") == -1) {
+                elmnt.className += " ui-state-active";
+            }
+            var pos = pos3 - cmp_elmnt.offsetLeft;
+            if(pos > -1 && pos < cmp_elmnt.offsetWidth + 1) {
+                elmnt.style.left = pos + "px";
+                volume = pos / cmp_elmnt.offsetWidth;
+            } else if(pos < 1) {
+                elmnt.style.left = 0 + "px";
+                volume = 0;
+            } else {
+                elmnt.style.left = cmp_elmnt.offsetWidth + "px";
+                volume = 1;
+            }
+
+            slid_elmnt.style.width = volume * 100 + "%";
+            if(element == "player") Playercontrols.setVolume(volume * 100);
+            else socket.emit("id", {id: Mobile_remote.id, type: "volume", value: volume * 100});
+        } else {
+            var pos = pos4 - cmp_elmnt.offsetTop;
+            var pos0 = window.innerHeight - pos - 14;
+
+            if(pos0 > 64 && pos0 < 164) {
+                volume = (pos0 - 64) / 100;
+            } else if(pos0 < 65) {
+                volume = 0;
+            } else {
+                volume = 1;
+            }
+            slid_elmnt.style.height = volume * 100 + "%";
+            Playercontrols.setVolume(volume * 100);
+
+        }
+        try{Crypt.set_volume(volume * 100);}catch(e){
+        }
+    },
+
+    closeDragElement: function(element) {
+        /* stop moving when mouse button is released:*/
+        var elmnt;
+        if(element == "player") {
+            elmnt = document.getElementsByClassName("volume-handle")[0];
+        } else {
+            elmnt = document.getElementsByClassName("volume-handle-remote")[0];
+        }
+        if(elmnt.className.indexOf("ui-state-active") > -1) {
+            setTimeout(function(){
+                elmnt.classList.remove("ui-state-active");
+            }, 1);
+        }
+        document.onmouseup = null;
+        document.onmousemove = null;
+
     },
 
     fullscreen: function() {
@@ -216,15 +335,54 @@ var Playercontrols = {
         }
     },
 
+    visualVolume: function(val) {
+        var elmnt = document.getElementsByClassName("volume-handle")[0];
+        var cmp_elmnt = document.getElementById("volume");
+        var slid_elmnt = document.getElementsByClassName("volume-slid")[0];
+
+
+        if(slider_type != "vertical") {
+            var pos = (cmp_elmnt.offsetWidth / 100) * val;
+            var volume = 0;
+            //var pos = pos3 - cmp_elmnt.offsetLeft;
+            if(pos > -1 && pos < cmp_elmnt.offsetWidth + 1) {
+                elmnt.style.left = pos + "px";
+                volume = pos / cmp_elmnt.offsetWidth;
+            } else if(pos < 1) {
+                elmnt.style.left = 0 + "px";
+                volume = 0;
+            } else {
+                elmnt.style.left = cmp_elmnt.offsetWidth + "px";
+                volume = 1;
+            }
+
+            slid_elmnt.style.width = volume * 100 + "%";
+            Playercontrols.setVolume(volume * 100);
+        } else {
+            var pos = val;
+            var pos0 = window.innerHeight - pos - 14;
+            var volume = 0;
+            if(pos0 > 64 && pos0 < 164) {
+                volume = (pos0 - 64) / 100;
+            } else if(pos0 < 65) {
+                volume = 0;
+            } else {
+                volume = 1;
+            }
+            slid_elmnt.style.height = volume * 100 + "%";
+            Playercontrols.setVolume(volume * 100);
+        }
+    },
+
     volumeOptions: function() {
         if(!chromecastAvailable) {
             if(Player.player.isMuted()) {
                 Player.player.unMute();
                 vol = Player.player.getVolume();
-                $("#volume").slider("value", Player.player.getVolume());
+                Playercontrols.visualVolume(Player.player.getVolume());
             } else {
                 Player.player.mute();
-                $("#volume").slider("value", 0);
+                Playercontrols.visualVolume(0);
             }
         }
     },

server/public/assets/js/remotecontroller.js

@@ -69,20 +69,90 @@ var Remotecontroller = {
             document.getElementById("search").setAttribute("maxlength", "18");
             $("#forsearch").html("Type new channel name to change to");
 
-            $("#volume-control").slider({
+            //
-                min: 0,
+            /*$("#volume-control").slider({
-                max: 100,
+            min: 0,
-                value: 100,
+            max: 100,
-                range: "min",
+            value: 100,
-                animate: true,
+            range: "min",
-                stop:function(event, ui) {
+            animate: true,
-                    socket.emit("id", {id: id, type: "volume", value: ui.value});
+            stop:function(event, ui) {
-                }
+                socket.emit("id", {id: id, type: "volume", value: ui.value});
-            });
+            }
+            //});*/
+
+            $("#volume").append("<div class='volume-slid'></div>");
+            $("#volume").append("<div class='volume-handle'></div>");
+
+            $(".volume-slid").css("width", "100%");
+            $(".volume-handle").css("left", "calc(100% - 1px)");
+            //document.getElementsByClassName("volume-handle")[0].onmousedown = Remotecontroller.dragMouseDown;
+            //$("#volume").slider(slider_values);
+            //document.getElementsByClassName("volume-slid")[0].onmousedown = Remotecontroller.dragMouseDown;
+            document.getElementById("volume").onmousedown = Remotecontroller.dragMouseDown;
+            document.getElementById("volume").touchstart = function(e) {
+                e.preventDefault();
+                Remotecontroller.dragMouseDown(e);
+            }
+            document.getElementById("volume").onclick = function(e) {
+                Remotecontroller.elementDrag(e);
+                Remotecontroller.closeDragElement();
+            }
         } else {
             socket.emit("id", {id: id, type: "channel", value: $("#search").val().toLowerCase()});
             $("#search").val("");
         }
 
-    }
+    },
+
+
+    dragMouseDown: function(e) {
+        e = e || window.event;
+        // get the mouse cursor position at startup:
+        document.onmouseup = Remotecontroller.closeDragElement;
+        document.touchend = Remotecontroller.closeDragElement;
+        // call a function whenever the cursor moves:
+        document.onmousemove = Remotecontroller.elementDrag;
+        document.touchmove = Remotecontroller.elementDrag;
+    },
+
+    elementDrag: function(e) {
+        var elmnt = document.getElementsByClassName("volume-handle")[0];
+        e = e || window.event;
+
+        var pos3 = e.clientX;
+
+        if(elmnt.className.indexOf("ui-state-active") == -1) {
+            elmnt.className += " ui-state-active";
+        }
+        var pos = pos3 - document.getElementById("volume").offsetLeft;
+        if(pos > -1 && pos < document.getElementById("volume").offsetWidth + 1) {
+            elmnt.style.left = pos + "px";
+            var volume = pos / document.getElementById("volume").offsetWidth;
+            document.getElementsByClassName("volume-slid")[0].style.width = volume * 100 + "%";
+        } else if(pos < 0) {
+            var volume = 0;
+            document.getElementsByClassName("volume-slid")[0].style.width = volume * 100 + "%";
+        } else {
+            var volume = 1;
+            document.getElementsByClassName("volume-slid")[0].style.width = volume * 100 + "%";
+        }
+
+        socket.emit("id", {id: id, type: "volume", value: volume * 100});
+
+        try{Crypt.set_volume(volume * 100);}catch(e){}
+    },
+
+    closeDragElement: function() {
+        /* stop moving when mouse button is released:*/
+        var elmnt = document.getElementsByClassName("volume-handle")[0];
+        if(elmnt.className.indexOf("ui-state-active") > -1) {
+            setTimeout(function(){
+                elmnt.classList.remove("ui-state-active");
+            }, 1);
+        }
+        document.onmouseup = null;
+        document.onmousemove = null;
+
+    },
 };

server/public/layouts/client/main.handlebars

@@ -87,9 +87,7 @@
         <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>
         <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.1.0/socket.io.slim.js"></script>
-        <script type="text/javascript" src="/assets/dist/lib/jquery-ui.min.js"></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/spectrum/1.8.0/spectrum.min.js"></script>
-        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
         <script type="text/javascript" src="/assets/dist/{{javascript_file}}"></script>
         {{#unless embed}}
             <script type="text/javascript" src="https://www.gstatic.com/cv/js/sender/v1/cast_sender.js?loadCastFramework=1"></script>

server/public/partials/remote/volume.handlebars

@@ -1,4 +1,4 @@
 <div class="volume-elements" style="display: none;">
-    <div class="rc" id="volume-control" title="Volume"></div>
+    <div class="rc" id="volume" title="Volume"></div>
     <i class="material-icons slider-vol rc">volume_up</i>
 </div>