diff --git a/server/handlers/db.js b/server/handlers/db.js index 82b2839e..833993d6 100644 --- a/server/handlers/db.js +++ b/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("timeout_api").createIndex({ "createdAt": 1 }, { expireAfterSeconds: 5 }); -db.collection("api_links").createIndex({ "createdAt": 1 }, { expireAfterSeconds: 86400 }); +db.collection("chat_logs").createIndex({ "createdAt": 1 }, { expireAfterSeconds: 600 }, function(){}); +db.collection("timeout_api").createIndex({ "createdAt": 1 }, { expireAfterSeconds: 5 }, function(){}); +db.collection("api_links").createIndex({ "createdAt": 1 }, { expireAfterSeconds: 86400 }, function(){}); db.on('connected', function(err) { console.log("connected"); }); diff --git a/server/public/assets/css/embed.css b/server/public/assets/css/embed.css index 3d6d659d..baa3ee50 100755 --- a/server/public/assets/css/embed.css +++ b/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 { - height:5px; - width: 75px; +#volume.vertical { + border-radius: 0px; +} + +#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; - border-radius: 2px; +} + +#volume .volume-handle { + 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; diff --git a/server/public/assets/css/style.css b/server/public/assets/css/style.css index b1d9e828..087089ec 100755 --- a/server/public/assets/css/style.css +++ b/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 { - height:5px; - width: 75px; - position: absolute; - background-color:rgba(255, 255, 255, 0.8); - border: none; - outline: none; - border-radius: 2px; +#volume.rc, #volume-control-remote { + width:100%; + margin-top: 30px; + background: darkgrey; } -#volume .ui-slider-handle { - height: 14px; - width: 14px; - background: #fff 50% 50% repeat-x; +#volume.vertical { + border-radius: 0px; +} + +#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; - margin-left: -7.5px; - margin-top: 0px; - border-radius: 1000px; +} + +#volume .volume-handle, #volume-control-remote .volume-handle-remote { + 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 .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+ */ - -ms-user-select: all !important; /* No support yet */ - user-select: all !important; /* Likely future */ + -moz-user-select: all !important; /* Firefox 43+ */ + -ms-user-select: all !important; /* No support yet */ + user-select: all !important; /* Likely future */ } diff --git a/server/public/assets/js/channel.js b/server/public/assets/js/channel.js index acedd4e9..14c91e98 100644 --- a/server/public/assets/js/channel.js +++ b/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(); diff --git a/server/public/assets/js/embed.js b/server/public/assets/js/embed.js index b53c44f9..a425f354 100755 --- a/server/public/assets/js/embed.js +++ b/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); } diff --git a/server/public/assets/js/functions.js b/server/public/assets/js/functions.js index c093705e..a9478d0c 100644 --- a/server/public/assets/js/functions.js +++ b/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"); diff --git a/server/public/assets/js/hostcontroller.js b/server/public/assets/js/hostcontroller.js index 90426494..61b70444 100755 --- a/server/public/assets/js/hostcontroller.js +++ b/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); diff --git a/server/public/assets/js/listeners.js b/server/public/assets/js/listeners.js index 05e63f12..bba59352 100755 --- a/server/public/assets/js/listeners.js +++ b/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; diff --git a/server/public/assets/js/mobileremote.js b/server/public/assets/js/mobileremote.js index a58b86c5..5423a006 100755 --- a/server/public/assets/js/mobileremote.js +++ b/server/public/assets/js/mobileremote.js @@ -39,16 +39,27 @@ var Mobile_remote = { }, initiate_volume: function() { - $("#volume-control-remote").slider({ - min: 0, - max: 100, - value: 100, - range: "min", - animate: true, - stop:function(event, ui) { - socket.emit("id", {id: Mobile_remote.id, type: "volume", value: ui.value}); - } - }); + var vol = 100; + $("#volume-control-remote").append("
"); + $("#volume-control-remote").append("
"); + $(".volume-slid-remote").css("width", vol + "%"); + $(".volume-handle-remote").css("left", "calc(" + vol + "% - 1px)"); + document.getElementById("volume-control-remote").onmousedown = function(e) { + e.preventDefault(); + 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(); + } } }; diff --git a/server/public/assets/js/playercontrols.js b/server/public/assets/js/playercontrols.js index 5115a20e..283be65f 100755 --- a/server/public/assets/js/playercontrols.js +++ b/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 = { - min: 0, - max: 100, - value: vol, - range: "min", - animate: true, - slide: function(event, ui) { - Playercontrols.setVolume(ui.value); - try{Crypt.set_volume(ui.value);}catch(e){} + try { + if(document.getElementsByClassName("volume-slid")) { + document.getElementById("volume").innerHTML = ""; } - }; + }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("
"); + $("#volume").append("
"); + 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); } } }, diff --git a/server/public/assets/js/remotecontroller.js b/server/public/assets/js/remotecontroller.js index e0e6da8c..17471587 100755 --- a/server/public/assets/js/remotecontroller.js +++ b/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, - max: 100, - value: 100, - range: "min", - animate: true, - stop:function(event, ui) { - socket.emit("id", {id: id, type: "volume", value: ui.value}); - } - }); + // + /*$("#volume-control").slider({ + min: 0, + max: 100, + value: 100, + range: "min", + animate: true, + stop:function(event, ui) { + socket.emit("id", {id: id, type: "volume", value: ui.value}); + } + //});*/ + + $("#volume").append("
"); + $("#volume").append("
"); + + $(".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; + + }, }; diff --git a/server/public/layouts/client/main.handlebars b/server/public/layouts/client/main.handlebars index 3dfb2aba..4111f7f6 100644 --- a/server/public/layouts/client/main.handlebars +++ b/server/public/layouts/client/main.handlebars @@ -87,9 +87,7 @@ - - {{#unless embed}} diff --git a/server/public/partials/remote/volume.handlebars b/server/public/partials/remote/volume.handlebars index 07c9fde5..c8ab2327 100644 --- a/server/public/partials/remote/volume.handlebars +++ b/server/public/partials/remote/volume.handlebars @@ -1,4 +1,4 @@