mobile support, fixes, improvements

vocawaves · Feb 20, 2022 · 7999ee2 · 7999ee2
1 parent 84e51e0
commit 7999ee2
Show file tree

Hide file tree

Showing 8 changed files with 55 additions and 13 deletions.
diff --git a/package.json b/package.json
@@ -16,8 +16,8 @@
         "bulma": "^0.9.3",
         "cookie-session": "^2.0.0",
         "eta": "^1.12.3",
-        "express": "^4.17.2",
-        "express-rate-limit": "^6.2.0",
+        "express": "^4.17.3",
+        "express-rate-limit": "^6.3.0",
         "ini": "^2.0.0",
         "leekslazylogger": "^4.1.4",
         "node-vlc-http": "^1.2.0",

diff --git a/src/modules/socket.js b/src/modules/socket.js
@@ -1,3 +1,5 @@
+const helpers = require('./helpers');
+
 module.exports = (io, vlc, refresh, config, log) => {
     const checkDisconnect = (socket) => {
         if (!socket.request.session.loggedIn && config.server.login_password !== 'NULL') {
@@ -101,9 +103,15 @@ module.exports = (io, vlc, refresh, config, log) => {
             for (let i = 0; i < amount; i++) {
                 let newVolume;
                 if (type === 'decrease') {
-                    newVolume = data[0].volume - 2;
+                    if (Math.round(data[0].volume / 2.56) === 0) { 
+                        break;
+                    }
+                    newVolume = data[0].volume - 2.56;
                 } else if (type === 'increase') {
-                    newVolume = data[0].volume + 2;
+                    if (Math.round(data[0].volume / 2.56) === 100) { 
+                        break;
+                    }
+                    newVolume = data[0].volume + 2.56;
                 }
                 vlc.setVolume(newVolume);
                 data[0].volume = newVolume;

diff --git a/src/public/assets/css/index.css b/src/public/assets/css/index.css
@@ -1,3 +1,7 @@
+body {
+    touch-action: pan-y;
+}
+
 .shortcut {
     background-color: #478ae2;
     border-radius: 12px;
@@ -16,6 +20,7 @@
 
 .controls {
     margin-bottom: 1.5rem;
+    margin-top: 1.5rem;
 }
 
 .modal-card {
@@ -32,7 +37,11 @@
         color: #ffffff;
     }
 
-    .title, .subtitle, .label, .modal-card-title, .modal-card-body {
+    .title,
+    .subtitle,
+    .label,
+    .modal-card-title,
+    .modal-card-body {
         color: #ffffff;
     }
 
@@ -46,7 +55,8 @@
         color: #ffffff !important;
     }
 
-    .modal-card-head, .modal-card-foot {
+    .modal-card-head,
+    .modal-card-foot {
         background-color: #363636;
     }
 
@@ -97,3 +107,18 @@
     margin-top: 10px;
     display: none;
 }
+
+@media only screen and (max-width: 600px) {
+    .shortcut {
+        width: 25%;
+        margin: auto;
+        margin-bottom: 10px;
+        padding: 20px;
+    }
+
+    .modal-card {
+        width: 75%;
+        margin: auto;
+        margin-top: 50px;
+    }
+}
diff --git a/src/public/assets/js/index.js b/src/public/assets/js/index.js
@@ -4,6 +4,7 @@ const updating = document.getElementById('updating');
 const submitbtn = document.getElementById('submitbtn');
 const modal = document.getElementsByClassName('modal')[0];
 const statusElement = document.getElementsByClassName('subtitle')[0];
+const volumeslider = document.getElementById('volumeslider');
 
 const showmodal = (type) => {
     document.getElementById('volume-title').innerText = type + ' Volume';
@@ -46,7 +47,7 @@ const submitmodal = () => {
     submitbtn.disabled = true;
 };
 
-document.getElementById('volumeslider').onchange = (e) => { 
+volumeslider.onchange = (e) => { 
     socket.emit('changevolumeexact', e.target.value);
 }
 

diff --git a/src/views/error.eta b/src/views/error.eta
@@ -1,7 +1,9 @@
 <!DOCTYPE html>
-<html>
+<html lang='en'>
 
 <head>
+    <meta charset='UTF-8'>
+    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
     <title>vlc-bgm error</title>
     <link rel='stylesheet' href='assets/css/bulma.min.css'>
     <link rel='stylesheet' href='assets/css/index.css'>

diff --git a/src/views/index.eta b/src/views/index.eta
@@ -1,7 +1,9 @@
 <!DOCTYPE html>
-<html>
+<html lang='en'>
 
 <head>
+    <meta charset='UTF-8'>
+    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
     <title>vlc-bgm interface</title>
     <link rel='stylesheet' href='assets/css/bulma.min.css'>
     <link rel='stylesheet' href='assets/css/index.css'>
@@ -38,7 +40,7 @@
                 <p class='subtitle'>Volume control</p>
                 <div class='volumecontrol'>
                     <span>0%</span>
-                    <input type='range' min='0' max='1000' value='50' step='10' name='volume' id='volumeslider'>
+                    <input type='range' min='0' max='100' step='5' name='volume' id='volumeslider' value='<%= it.volume %>'
                     <span>100%</span>
                 </div>
             </div>
@@ -71,7 +73,7 @@
                             <label for='amount'>Amount</label>
                             <br />
                             <span>1</span>
-                            <input type='range' min='0' max='500' value='50' step='10' name='amount' id='amount'>
+                            <input type='range' min='0' max='100' value='50' step='10' name='amount' id='amount'>
                             <span id='amountcurrent'>0 (50)</span>
                             <br />
                             <label for='speed'>Speed (ms)</label>

diff --git a/src/views/licenses.eta b/src/views/licenses.eta
@@ -1,7 +1,9 @@
 <!DOCTYPE html>
-<html>
+<html lang='en'>
 
 <head>
+    <meta charset='UTF-8'>
+    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
     <title>vlc-bgm licenses</title>
     <link rel='stylesheet' href='assets/css/bulma.min.css'>
     <link rel='stylesheet' href='assets/css/index.css'>

diff --git a/src/views/login.eta b/src/views/login.eta
@@ -1,7 +1,9 @@
 <!DOCTYPE html>
-<html>
+<html lang='en'>
 
 <head>
+    <meta charset='UTF-8'>
+    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
     <title>vlc-bgm login</title>
     <link rel='stylesheet' href='assets/css/bulma.min.css'>
     <link rel='stylesheet' href='assets/css/index.css'>