KevinMidboe/zoff
1
0
Fork 0
mirror of https://github.com/KevinMidboe/zoff.git synced 2025-10-29 18:00:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

Stopped using jQuery UI

Browse Source
This commit is contained in:
Kasper Rynning-Tønnesen
2018-04-23 16:42:43 +02:00
parent 5adf770af0
commit daa5f16945
13 changed files with 388 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
server/handlers/db.js
View File

@@ -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");
});

82
server/public/assets/css/embed.css
View File

@@ -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;

91
server/public/assets/css/style.css
View File

@@ -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 */
}

3
server/public/assets/js/channel.js
View File

@@ -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();

2
server/public/assets/js/embed.js
View File

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

4
server/public/assets/js/functions.js
View File

@@ -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");

2
server/public/assets/js/hostcontroller.js
View File

@@ -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);

2
server/public/assets/js/listeners.js
View File

@@ -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;

31
server/public/assets/js/mobileremote.js
View File

@@ -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("<div class='volume-slid-remote'></div>");
$("#volume-control-remote").append("<div class='volume-handle-remote'></div>");
$(".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();
}
}
};

190
server/public/assets/js/playercontrols.js
View File

@@ -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("<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);
}
}
},

92
server/public/assets/js/remotecontroller.js
View File

@@ -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("<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;
},
};

2
server/public/layouts/client/main.handlebars
View File

@@ -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>

2
server/public/partials/remote/volume.handlebars
View File

@@ -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>