bugfixes, refactor, code removal

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "fm-dx-webserver",
-  "version": "1.1.7",
+  "version": "1.1.8",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "fm-dx-webserver",
-      "version": "1.1.7",
+      "version": "1.1.8",
       "license": "ISC",
       "dependencies": {
         "@mapbox/node-pre-gyp": "1.0.11",
@@ -14,14 +14,13 @@
         "ejs": "3.1.9",
         "express": "4.18.3",
         "express-session": "1.18.0",
-        "ffmpeg-static": "^5.2.0",
+        "ffmpeg-static": "5.2.0",
         "http": "0.0.1-security",
         "http-proxy": "1.18.1",
         "https": "1.0.0",
         "koffi": "2.7.2",
         "net": "1.0.2",
         "serialport": "12.0.0",
-        "wrtc": "0.4.7",
         "ws": "8.14.2"
       }
     },
@@ -659,16 +658,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/domexception": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/domexception/-/domexception-1.0.1.tgz",
-      "integrity": "sha512-raigMkn7CJNNo6Ihro1fzG7wr3fHuYVytzquZKX5n0yizGsTcYgzdIUwj1X9pK0VvjeihV+XiclP+DjwbsSKug==",
-      "deprecated": "Use your platform's native DOMException instead",
-      "optional": true,
-      "dependencies": {
-        "webidl-conversions": "^4.0.2"
-      }
-    },
     "node_modules/ee-first": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
@@ -1893,12 +1882,6 @@
         "node": ">= 0.8"
       }
     },
-    "node_modules/webidl-conversions": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-4.0.2.tgz",
-      "integrity": "sha512-YQ+BmxuTgd6UXZW3+ICGfyqRyHXVlD5GtQr5+qjiNW7bF0cqrzX500HVXPBOvgXb5YnzDd+h0zqyv61KUD7+Sg==",
-      "optional": true
-    },
     "node_modules/whatwg-url": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
@@ -1926,24 +1909,6 @@
       "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
       "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ=="
     },
-    "node_modules/wrtc": {
-      "version": "0.4.7",
-      "resolved": "https://registry.npmjs.org/wrtc/-/wrtc-0.4.7.tgz",
-      "integrity": "sha512-P6Hn7VT4lfSH49HxLHcHhDq+aFf/jd9dPY7lDHeFhZ22N3858EKuwm2jmnlPzpsRGEPaoF6XwkcxY5SYnt4f/g==",
-      "bundleDependencies": [
-        "node-pre-gyp"
-      ],
-      "hasInstallScript": true,
-      "dependencies": {
-        "node-pre-gyp": "^0.13.0"
-      },
-      "engines": {
-        "node": "^8.11.2 || >=10.0.0"
-      },
-      "optionalDependencies": {
-        "domexception": "^1.0.1"
-      }
-    },
     "node_modules/ws": {
       "version": "8.14.2",
       "resolved": "https://registry.npmjs.org/ws/-/ws-8.14.2.tgz",

package.json

@@ -1,7 +1,7 @@
 {
   "name": "fm-dx-webserver",
-  "version": "1.1.7",
+  "version": "1.1.8",
-  "description": "",
+  "description": "FM DX Webserver",
   "main": "index.js",
   "scripts": {
     "debug": "node index.js --debug",
@@ -17,14 +17,13 @@
     "ejs": "3.1.9",
     "express": "4.18.3",
     "express-session": "1.18.0",
-    "ffmpeg-static": "^5.2.0",
+    "ffmpeg-static": "5.2.0",
     "http": "0.0.1-security",
     "http-proxy": "1.18.1",
     "https": "1.0.0",
     "koffi": "2.7.2",
     "net": "1.0.2",
     "serialport": "12.0.0",
-    "wrtc": "0.4.7",
     "ws": "8.14.2"
   }
 }

server/index.js

@@ -34,7 +34,7 @@ console.log(`\x1b[32m
 |_|   |_|  |_|     |____/_/\\_\\    \\_/\\_/ \\___|_.__/|___/\\___|_|    \\_/ \\___|_|                                                
 `);
 console.log('\x1b[0mFM-DX-Webserver', pjson.version);
-console.log('\x1b[90m======================================================');
+console.log('\x1b[90m―――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――');
 
 // Start ffmpeg
 require('./stream/index');
@@ -83,7 +83,7 @@ function connectToSerial() {
       serialport.write('C0\n');
       serialport.write('I0,0\n');     
       
-      if(serverConfig.defaultFreq) {
+      if(serverConfig.defaultFreq && serverConfig.enableDefaultFreq === true) {
         serialport.write('T' + Math.round(serverConfig.defaultFreq * 1000) +'\n');
         dataHandler.initialData.freq = Number(serverConfig.defaultFreq).toFixed(3);
         dataHandler.dataToSend.freq = Number(serverConfig.defaultFreq).toFixed(3);
@@ -160,7 +160,9 @@ function connectToXdrd() {
             
             if (authFlags.authMsg && authFlags.firstClient) {
               client.write('x\n');
-              client.write(serverConfig.defaultFreq ? 'T' + Math.round(serverConfig.defaultFreq * 1000) + '\n' : 'T87500\n');
+              client.write(serverConfig.defaultFreq && serverConfig.enableDefaultFreq === true ? 'T' + Math.round(serverConfig.defaultFreq * 1000) + '\n' : 'T87500\n');
+              dataHandler.initialData.freq = serverConfig.defaultFreq && serverConfig.enableDefaultFreq === true ? (serverConfig.defaultFreq).toFixed(3) : (87.5).toFixed(3);
+              dataHandler.dataToSend.freq = serverConfig.defaultFreq && serverConfig.enableDefaultFreq === true ? (serverConfig.defaultFreq).toFixed(3) : (87.5).toFixed(3);
               client.write('A0\n');
               client.write(serverConfig.audio.startupVolume ? 'Y' + (serverConfig.audio.startupVolume * 100).toFixed(0) + '\n' : 'Y100\n');
               client.off('data', authDataHandler);

server/stream/3las.server.js

@@ -39,54 +39,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const fs_1 = require("fs");
 const child_process_1 = require("child_process");
 const ws = __importStar(require("ws"));
-const wrtc = require('wrtc');
 const Settings = JSON.parse((0, fs_1.readFileSync)('server/stream/settings.json', 'utf-8'));
 const FFmpeg_command = ffmpegStaticPath;
-class RtcProvider {
-    constructor() {
-        this.RtcDistributePeer = new wrtc.RTCPeerConnection(Settings.RtcConfig);
-        this.RtcDistributePeer.addTransceiver('audio');
-        this.RtcDistributePeer.ontrack = this.OnTrack.bind(this);
-        this.RtcDistributePeer.onicecandidate = this.OnIceCandidate_Distribute.bind(this);
-        this.RtcSourcePeer = new wrtc.RTCPeerConnection(Settings.RtcConfig);
-        this.RtcSourceMediaSource = new wrtc.nonstandard.RTCAudioSource();
-        this.RtcSourceTrack = this.RtcSourceMediaSource.createTrack();
-        this.RtcSourcePeer.addTrack(this.RtcSourceTrack);
-        this.RtcSourcePeer.onicecandidate = this.OnIceCandidate_Source.bind(this);
-        this.Init();
-    }
-    Init() {
-        return __awaiter(this, void 0, void 0, function* () {
-            let offer = yield this.RtcSourcePeer.createOffer();
-            yield this.RtcSourcePeer.setLocalDescription(new wrtc.RTCSessionDescription(offer));
-            yield this.RtcDistributePeer.setRemoteDescription(offer);
-            let answer = yield this.RtcDistributePeer.createAnswer();
-            yield this.RtcDistributePeer.setLocalDescription(new wrtc.RTCSessionDescription(answer));
-            yield this.RtcSourcePeer.setRemoteDescription(new wrtc.RTCSessionDescription(answer));
-        });
-    }
-    OnTrack(event) {
-        this.RtcDistributeTrack = event.track;
-    }
-    OnIceCandidate_Distribute(e) {
-        if (!e.candidate)
-            return;
-        (() => __awaiter(this, void 0, void 0, function* () { return yield this.RtcSourcePeer.addIceCandidate(e.candidate); }))();
-    }
-    OnIceCandidate_Source(e) {
-        if (!e.candidate)
-            return;
-        (() => __awaiter(this, void 0, void 0, function* () { return yield this.RtcDistributePeer.addIceCandidate(e.candidate); }))();
-    }
-    InsertMediaData(data) {
-        if (!this.RtcSourceMediaSource)
-            return;
-        this.RtcSourceMediaSource.onData(data);
-    }
-    GetTrack() {
-        return this.RtcDistributeTrack;
-    }
-}
 class StreamClient {
     constructor(server, socket) {
         this.Server = server;
@@ -102,10 +56,7 @@ class StreamClient {
         try {
             let request = JSON.parse(message.toString());
             if (request.type == "answer") {
-                (() => __awaiter(this, void 0, void 0, function* () { return yield this.RtcPeer.setRemoteDescription(new wrtc.RTCSessionDescription(request.data)); }))();
+                
-            }
-            else if (request.type == "webrtc") {
-                this.Server.SetWebRtc(this);
             }
             else if (request.type == "fallback") {
                 this.Server.SetFallback(this, request.data);
@@ -137,17 +88,6 @@ class StreamClient {
         }
         catch (ex) {
         }
-        if (this.RtcSender && this.RtcPeer)
-            this.RtcPeer.removeTrack(this.RtcSender);
-        if (this.RtcSender)
-            this.RtcSender = null;
-        if (this.RtcTrack)
-            this.RtcTrack = null;
-        if (this.RtcPeer) {
-            this.RtcPeer.close();
-            delete this.RtcPeer;
-            this.RtcPeer = null;
-        }
     }
     SendBinary(buffer) {
         if (this.Socket.readyState != ws.OPEN) {
@@ -163,28 +103,6 @@ class StreamClient {
         }
         this.Socket.send(text);
     }
-    StartRtc(track) {
-        return __awaiter(this, void 0, void 0, function* () {
-            this.RtcPeer = new wrtc.RTCPeerConnection(Settings.RtcConfig);
-            this.RtcTrack = track;
-            this.RtcSender = this.RtcPeer.addTrack(this.RtcTrack);
-            this.RtcPeer.onconnectionstatechange = this.OnConnectionStateChange.bind(this);
-            this.RtcPeer.onicecandidate = this.OnIceCandidate.bind(this);
-            let offer = yield this.RtcPeer.createOffer();
-            yield this.RtcPeer.setLocalDescription(new wrtc.RTCSessionDescription(offer));
-            this.SendText(JSON.stringify({
-                "type": "offer",
-                "data": offer
-            }));
-        });
-    }
-    OnConnectionStateChange(e) {
-        if (!this.RtcPeer)
-            return;
-        let state = this.RtcPeer.connectionState;
-        if (state != "new" && state != "connecting" && state != "connected")
-            this.OnError(null);
-    }
     OnIceCandidate(e) {
         if (e.candidate) {
             this.SendText(JSON.stringify({
@@ -199,9 +117,7 @@ class StreamServer {
         this.Port = port;
         this.Channels = channels;
         this.SampleRate = sampleRate;
-        this.RtcProvider = new RtcProvider();
         this.Clients = new Set();
-        this.RtcClients = new Set();
         this.FallbackClients = {
             "wav": new Set(),
             "mp3": new Set()
@@ -246,7 +162,6 @@ class StreamServer {
                     "channelCount": this.Channels,
                     "numberOfFrames": this.SamplesCount,
                 };
-                this.RtcProvider.InsertMediaData(data);
                 this.Samples = new Int16Array(this.Channels * this.SamplesCount);
                 this.SamplesPosition = 0;
             }
@@ -266,30 +181,22 @@ class StreamServer {
         this.FallbackClients[format].add(client);
         this.FallbackProvider[format].PrimeClient(client);
     }
-    SetWebRtc(client) {
-        this.RtcClients.add(client);
-        client.StartRtc(this.RtcProvider.GetTrack());
-    }
     DestroyClient(client) {
         this.FallbackClients["mp3"].delete(client);
         this.FallbackClients["wav"].delete(client);
-        this.RtcClients.delete(client);
         this.Clients.delete(client);
         client.Destroy();
     }
     GetStats() {
-        let rtc = this.RtcClients.size;
         let fallback = {
             "wav": (this.FallbackClients["wav"] ? this.FallbackClients["wav"].size : 0),
             "mp3": (this.FallbackClients["mp3"] ? this.FallbackClients["mp3"].size : 0),
         };
-        let total = rtc;
         for (let format in fallback) {
             total += fallback[format];
         }
         return {
             "Total": total,
-            "Rtc": rtc,
             "Fallback": fallback,
         };
     }

server/stream/index.js

@@ -8,7 +8,7 @@ function enableAudioStream() {
     var ffmpegParams;
     var ffmpegCommand;
     serverConfig.webserver.webserverPort = Number(serverConfig.webserver.webserverPort);
-const ffmpegPath = "\"" + ffmpeg.replace(/\\/g, '\\\\') + "\"";
+
     const flags = `-fflags +nobuffer+flush_packets -flags low_delay -rtbufsize 6192 -probesize 32`;
     const codec = `-acodec pcm_s16le -ar 48000 -ac ${serverConfig.audio.audioChannels}`;
     const output = `-f s16le -fflags +nobuffer+flush_packets -packetsize 384 -flush_packets 1 -bufsize 960`;
@@ -23,11 +23,12 @@ const ffmpegPath = "\"" + ffmpeg.replace(/\\/g, '\\\\') + "\"";
         ffmpegParams = `${flags} -f alsa -i "${serverConfig.audio.softwareMode && serverConfig.audio.softwareMode == true ? 'plug' : ''}${serverConfig.audio.audioDevice}" ${codec} ${output} pipe:1 | node server/stream/3las.server.js -port ${serverConfig.webserver.webserverPort + 10} -samplerate 48000 -channels ${serverConfig.audio.audioChannels}`;
     } 
 
-    consoleCmd.logInfo("Using audio device: " + serverConfig.audio.audioDevice);
+    logInfo("Trying to start audio stream on device: \x1b[35m" + serverConfig.audio.audioDevice);
-    consoleCmd.logInfo(`Launching audio stream on internal port ${serverConfig.webserver.webserverPort + 10}.`);
+    logInfo(`Using internal audio network port ${serverConfig.webserver.webserverPort + 10}.`);
 
     // If an audio device is configured, start the stream
     if(serverConfig.audio.audioDevice.length > 2) {
+        let startupSuccess = false;
         const childProcess = spawn(ffmpegCommand, [ffmpegParams], { shell: true });
 
         childProcess.stdout.on('data', (data) => {
@@ -36,6 +37,13 @@ const ffmpegPath = "\"" + ffmpeg.replace(/\\/g, '\\\\') + "\"";
 
         childProcess.stderr.on('data', (data) => {
             logFfmpeg(`stderr: ${data}`);
+            if(data.includes('I/O error')) {
+                logError('Audio device \x1b[35m' + serverConfig.audio.audioDevice + '\x1b[0m failed to start. Start server with the command \x1b[33mnode . --ffmpegdebug \x1b[0mfor more info.')
+            }
+            if(data.includes('size=') && startupSuccess === false) {
+                logInfo('Audio stream started up successfully.');
+                startupSuccess = true;
+            }
         });
     
         childProcess.on('close', (code) => {

web/css/buttons.css

@@ -143,7 +143,6 @@ input[type="range"]::-moz-range-track {
     border: 0;
 }
 
-/* Thumb: webkit */
 input[type="range"]::-webkit-slider-thumb {
     /* removing default appearance */
     -webkit-appearance: none;
@@ -151,11 +150,14 @@ input[type="range"]::-webkit-slider-thumb {
     /* creating a custom design */
     height: 48px;
     width: 48px;
-    background-color: var(--color-4);
+    background: url('../images/speaker.svg') center no-repeat, var(--color-5);
-    border-radius: 10px;
+    background-position: center;
-    border: 2px solid var(--color-4);
+    background-size: 20px;
+    border-radius: 30px;
+    outline: 4px solid var(--color-5);
+    outline-offset: -3px;
     /*  slider progress trick  */
-    box-shadow: -407px 0 0 400px var(--color-4);
+    box-shadow: -420px 0 0 400px var(--color-4);
 }
 
 /* Thumb: Firefox */

web/css/helpers.css

@@ -217,7 +217,7 @@
     .text-big {
         font-size: 40px;
         display: block;
-        margin-top: -25px;
+        margin-top: 0;
     }
     .text-big#data-ps {
         margin: 0;

web/index.ejs

@@ -7,12 +7,12 @@
     <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" type="text/css" rel="stylesheet">
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
 
-    <link rel="icon" type="image/png" href="favicon2.png" />
+    <link rel="icon" type="image/png" href="favicon.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1">
 
     <meta property="og:title" content="FM-DX WebServer [<%= tunerName %>]">
     <meta property="og:type" content="website">
-    <meta property="og:image" content="favicon2.png">
+    <meta property="og:image" content="favicon.png">
     <meta property="og:description" content="Server description: <%= tunerDescMeta %>.">
     
     <script src="js/init.js"></script>
@@ -26,22 +26,9 @@
     <script src="js/3las/fallback/formats/3las.formatreader.wav.js"></script>
     <script src="js/3las/util/3las.websocketclient.js"></script>
     <script src="js/3las/fallback/3las.fallback.js"></script>
-    <script src="js/3las/3las.webrtc.js"></script>
     <script src="js/3las/3las.js"></script>
     <script src="js/3las/main.js"></script>
     <script type="text/javascript">
-            var RtcConfig = {	
-				iceServers: [
-					{
-						urls: "turns:turnserver.example.org",
-					},
-					{
-						urls: "stun.l.google.com:19302"
-					}
-				]
-				
-			};
-            var AudioTagId = "audioTag";
 			window.addEventListener('load', Init, false);
 			document.ontouchmove  = function(e){ 
 				e.preventDefault(); 
@@ -49,7 +36,6 @@
     </script>
 </head>
 <body>
-    <audio id="audioTag"></audio>
     <div id="wrapper">
         <div class="panel-100 no-bg tuner-info">
             <h1 id="tuner-name"><%= tunerName %> 
@@ -169,7 +155,7 @@
                                     <input type="range" id="volumeSlider" min="0" max="1" step="0.01" value="1"  aria-label="Volume slider">
                                 </span>
                             <% } else { %>
-                                <span class="panel-100 m-0" style="margin-right: 15px !important;">
+                                <span class="panel-100 m-0" style="margin-right: 15px !important;height: 48px;">
                                     <input type="range" id="volumeSlider" min="0" max="1" step="0.01" value="1"  aria-label="Volume slider">
                                 </span>
                             <% } %>
@@ -442,10 +428,10 @@
             </div>
         </div>
         <div class="modal-panel-content">
-            <div class="hover-brighten br-0" style="height: 50px;padding:12px;" onclick="window.open('https://buymeacoffee.com/noobish')">
+            <div class="hover-brighten br-0 bg-color-1" style="height: 50px;padding:12px;" onclick="window.open('https://buymeacoffee.com/noobish')">
                 <strong>Support</strong> the developer!
             </div>
-            <div class="hover-brighten br-0" style="height: 50px;padding:12px;" onclick="window.open('https://discord.com/invite/ZAVNdS74mC')">
+            <div class="hover-brighten br-0 bg-color-1" style="height: 50px;padding:12px;" onclick="window.open('https://discord.com/invite/ZAVNdS74mC')">
                 Join our <strong>OpenRadio Discord</strong> community!
             </div>
         </div>
@@ -459,7 +445,7 @@
                     <input type="text" id="chat-nickname" name="chat-nickname" placeholder="Nickname">
                     <button class="br-0 w-100 top-10" style="height: 44px" id="chat-nickname-save">Save</button>
                 <p style="margin: 5px;">
-                    Current identity: <span style="color: lime;" id="chat-admin"></span> <strong id="chat-identity-nickname">Anonymous User</strong> 
+                    Current identity: <span style="color: #bada55;" id="chat-admin"></span> <strong id="chat-identity-nickname">Anonymous User</strong> 
                 </p>
             </div>
 

web/js/3las/3las.js

@@ -2,7 +2,6 @@ var _3LAS_Settings = /** @class */ (function () {
     function _3LAS_Settings() {
         this.SocketHost = document.location.hostname ? document.location.hostname : "127.0.0.1";
         this.SocketPath = "/";
-        this.WebRTC = new WebRTC_Settings();
         this.Fallback = new Fallback_Settings();
     }
     return _3LAS_Settings;
@@ -14,24 +13,16 @@ var _3LAS = /** @class */ (function () {
             this.Logger = new Logging(null, null);
         }
         this.Settings = settings;
+
         try {
-            this.WebRTC = new WebRTC(this.Logger, this.Settings.WebRTC);
+            this.Fallback = new Fallback(this.Logger, this.Settings.Fallback);
-            this.WebRTC.ActivityCallback = this.OnActivity.bind(this);
+            this.Fallback.ActivityCallback = this.OnActivity.bind(this);
-            this.WebRTC.DisconnectCallback = this.OnSocketDisconnect.bind(this);
         }
-        catch (_a) {
+        catch (_b) {
-            this.WebRTC = null;
+            this.Fallback = null;
         }
-        if (this.WebRTC == null || this.WebRTC !== null) {
+
-            try {
+        if (this.Fallback == null) {
-                this.Fallback = new Fallback(this.Logger, this.Settings.Fallback);
-                this.Fallback.ActivityCallback = this.OnActivity.bind(this);
-            }
-            catch (_b) {
-                this.Fallback = null;
-            }
-        }
-        if (this.WebRTC == null && this.Fallback == null) {
             this.Logger.Log('3LAS: Browser does not support either media handling methods.');
             throw new Error();
         }
@@ -41,31 +32,20 @@ var _3LAS = /** @class */ (function () {
     }
     Object.defineProperty(_3LAS.prototype, "Volume", {
         get: function () {
-            if (this.WebRTC)
-                return this.WebRTC.Volume;
-            else
                 return this.Fallback.Volume;
         },
         set: function (value) {
-            if (this.WebRTC)
-                this.WebRTC.Volume = value;
-            else
                 this.Fallback.Volume = value;
         },
         enumerable: false,
         configurable: true
     });
     _3LAS.prototype.CanChangeVolume = function () {
-        if (this.WebRTC)
-            return this.WebRTC.CanChangeVolume();
-        else
             return true;
     };
     _3LAS.prototype.Start = function () {
         this.ConnectivityFlag = false;
-        // This is stupid, but required for iOS/iPadOS... thanks Apple :(
+
-        if (this.Settings && this.Settings.WebRTC && this.Settings.WebRTC.AudioTag)
-            this.Settings.WebRTC.AudioTag.play();
         // This is stupid, but required for Android.... thanks Google :(
         if (this.WakeLock)
             this.WakeLock.Begin();
@@ -100,14 +80,6 @@ var _3LAS = /** @class */ (function () {
                 this.Logger.Log("WakeLock stopped.");
             }
 
-            // Reset WebRTC if it exists
-            if (this.WebRTC) {
-                this.WebRTC.OnSocketDisconnect();
-                this.WebRTC.Reset();
-                this.WebRTC.Stop();
-                this.Logger.Log("WebRTC reset.");
-            }
-
             // Reset Fallback if it exists
             if (this.Fallback) {
                 this.Fallback.OnSocketDisconnect();
@@ -141,31 +113,16 @@ var _3LAS = /** @class */ (function () {
     // Callback function from socket connection
     _3LAS.prototype.OnSocketError = function (message) {
         this.Logger.Log("Network error: " + message);
-        if (this.WebRTC)
+        this.Fallback.OnSocketError(message);
-            this.WebRTC.OnSocketError(message);
-        else
-            this.Fallback.OnSocketError(message);
     };
     _3LAS.prototype.OnSocketConnect = function () {
         this.Logger.Log("Established connection with server.");
-        if (this.WebRTC)
-            this.WebRTC.OnSocketConnect();
-        else
             this.Fallback.OnSocketConnect();
-        if (this.WebRTC)
-            this.WebRTC.Init(this.WebSocket);
-        else
             this.Fallback.Init(this.WebSocket);
     };
     _3LAS.prototype.OnSocketDisconnect = function () {
         this.Logger.Log("Lost connection to server.");
-        if (this.WebRTC)
-            this.WebRTC.OnSocketDisconnect();
-        else
             this.Fallback.OnSocketDisconnect();
-        if (this.WebRTC)
-            this.WebRTC.Reset();
-        else
             this.Fallback.Reset();
         if (this.ConnectivityFlag) {
             this.ConnectivityFlag = false;
@@ -175,10 +132,7 @@ var _3LAS = /** @class */ (function () {
         this.Start();
     };
     _3LAS.prototype.OnSocketDataReady = function (data) {
-        if (this.WebRTC)
+        this.Fallback.OnSocketDataReady(data);
-            this.WebRTC.OnSocketDataReady(data);
-        else
-            this.Fallback.OnSocketDataReady(data);
     };
     return _3LAS;
 }());

web/js/3las/3las.webrtc.js

@@ -1,177 +0,0 @@
-/*
-    RTC live audio is part of 3LAS (Low Latency Live Audio Streaming)
-    https://github.com/JoJoBond/3LAS
-*/
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
-    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (_) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-    }
-};
-var WebRTC_Settings = /** @class */ (function () {
-    function WebRTC_Settings() {
-    }
-    return WebRTC_Settings;
-}());
-var WebRTC = /** @class */ (function () {
-    function WebRTC(logger, settings) {
-        this.Logger = logger;
-        if (!this.Logger) {
-            this.Logger = new Logging(null, null);
-        }
-        this.AudioTag = settings.AudioTag;
-        // Create RTC peer connection
-        if (typeof RTCPeerConnection !== "undefined")
-            this.RtcPeer = new RTCPeerConnection(settings.RtcConfig);
-        else if (typeof webkitRTCPeerConnection !== "undefined")
-            this.RtcPeer = new webkitRTCPeerConnection(settings.RtcConfig);
-        else if (typeof mozRTCPeerConnection !== "undefined")
-            this.RtcPeer = new mozRTCPeerConnection(settings.RtcConfig);
-        else {
-            this.Logger.Log('3LAS: Browser does not support "WebRTC".');
-            throw new Error();
-        }
-        this.Logger.Log("Using WebRTC");
-        this.RtcPeer.addTransceiver('audio');
-        this.RtcPeer.ontrack = this.OnTrack.bind(this);
-        this.RtcPeer.oniceconnectionstatechange = this.OnConnectionStateChange.bind(this);
-    }
-    Object.defineProperty(WebRTC.prototype, "Volume", {
-        get: function () {
-            if (!this.CanChangeVolume()) {
-                if (this.AudioTag.muted == true)
-                    return 0.0;
-                else
-                    return 1.0;
-            }
-            return this.AudioTag.volume;
-        },
-        set: function (value) {
-            if (!this.CanChangeVolume()) {
-                if (value <= 0.0)
-                    this.AudioTag.muted = true;
-                else
-                    this.AudioTag.muted = false;
-                return;
-            }
-            this.AudioTag.volume = value;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    WebRTC.prototype.CanChangeVolume = function () {
-        return !(isIOS || isIPadOS);
-    };
-    WebRTC.prototype.Init = function (webSocket) {
-        this.WebSocket = webSocket;
-        this.WebSocket.Send(JSON.stringify({
-            "type": "webrtc",
-            "data": null
-        }));
-        this.ActivityTimer = setInterval(this.OnActivityTimerTick.bind(this), 1000);
-    };
-    WebRTC.prototype.OnActivityTimerTick = function () {
-        if ((this.RtcPeer.iceConnectionState == "connected" || this.RtcPeer.iceConnectionState == "completed") && this.ActivityCallback)
-            this.ActivityCallback();
-    };
-    WebRTC.prototype.OnConnectionStateChange = function () {
-        if ((this.RtcPeer.iceConnectionState == "closed" ||
-            this.RtcPeer.iceConnectionState == "disconnected" ||
-            this.RtcPeer.iceConnectionState == "failed") && this.DisconnectCallback)
-            this.DisconnectCallback();
-    };
-    WebRTC.prototype.OnTrack = function (event) {
-        if (event.streams != null && event.streams.length > 0)
-            this.AudioTag.srcObject = event.streams[0];
-        else if (event.track != null)
-            this.AudioTag.srcObject = new MediaStream([event.track]);
-        this.AudioTag.play();
-    };
-    WebRTC.prototype.OnSocketError = function (message) {
-    };
-    WebRTC.prototype.OnSocketConnect = function () {
-    };
-    WebRTC.prototype.OnSocketDisconnect = function () {
-    };
-    WebRTC.prototype.Reset = function () {
-        if (this.ActivityTimer) {
-            clearInterval(this.ActivityTimer);
-            this.ActivityTimer = 0;
-        }
-        if (this.RtcPeer) {
-            this.RtcPeer.close();
-            delete this.RtcPeer;
-            this.RtcPeer = null;
-        }
-        this.WebSocket = null;
-    };
-    WebRTC.prototype.OnSocketDataReady = function (data) {
-        return __awaiter(this, void 0, void 0, function () {
-            var message, answer;
-            var _this = this;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0:
-                        message = JSON.parse(data.toString());
-                        if (!(message.type == "offer")) return [3 /*break*/, 4];
-                        return [4 /*yield*/, this.RtcPeer.setRemoteDescription(new RTCSessionDescription(message.data))];
-                    case 1:
-                        _a.sent();
-                        return [4 /*yield*/, this.RtcPeer.createAnswer()];
-                    case 2:
-                        answer = _a.sent();
-                        return [4 /*yield*/, this.RtcPeer.setLocalDescription(new RTCSessionDescription(answer))];
-                    case 3:
-                        _a.sent();
-                        this.WebSocket.Send(JSON.stringify({
-                            "type": "answer",
-                            "data": answer
-                        }));
-                        return [3 /*break*/, 5];
-                    case 4:
-                        if (message.type == "candidate") {
-                            (function () { return __awaiter(_this, void 0, void 0, function () { return __generator(this, function (_a) {
-                                switch (_a.label) {
-                                    case 0: return [4 /*yield*/, this.RtcPeer.addIceCandidate(message.data)];
-                                    case 1: return [2 /*return*/, _a.sent()];
-                                }
-                            }); }); })();
-                        }
-                        _a.label = 5;
-                    case 5: return [2 /*return*/];
-                }
-            });
-        });
-    };
-    return WebRTC;
-}());

web/js/3las/main.js

@@ -1,57 +1,42 @@
-var Stream;
+const DefaultVolume = 0.5;
-var DefaultVolume = 0.5;
+let Stream;
+
 function Init(_ev) {
-    // Load default settings
-    var settings = new _3LAS_Settings();
-    if (typeof RtcConfig == 'undefined')
-        RtcConfig = {};
-    settings.WebRTC.RtcConfig = RtcConfig;
-    if (typeof SocketPort != 'undefined')
-        settings.SocketPort = SocketPort;
-    if (typeof SocketPath != 'undefined')
-        settings.SocketPath = SocketPath;
-    if (typeof AudioTagId == 'undefined')
-        settings.WebRTC.AudioTag = null;
-    else
-        settings.WebRTC.AudioTag = document.getElementById(AudioTagId);
     try {
+        const settings = new _3LAS_Settings();
         Stream = new _3LAS(null, settings);
-    }
+    } catch (error) {
-    catch (_ex) {
+        console.log(error);
-        console.log(_ex);
         return;
     }
+
     Stream.ConnectivityCallback = OnConnectivityCallback;
     $(".playbutton").on('click', OnPlayButtonClick);
-    $("#volumeSlider").on("change", updateVolume);
+    $("#volumeSlider").on("input", updateVolume);
 }
 
 function OnConnectivityCallback(isConnected) {
-    if (isConnected) {
+    Stream.Volume = isConnected ? 1.0 : DefaultVolume;
-        Stream.Volume = 1.0;
-    }
 }
 
 function OnPlayButtonClick(_ev) {
     try {
         if (Stream.ConnectivityFlag) {
             Stream.Stop();
-            $('.playbutton').find('.fa-solid').removeClass('fa-pause').addClass('fa-play');
         } else {
             Stream.Start();
-            $('.playbutton').find('.fa-solid').removeClass('fa-play').addClass('fa-stop');
+            const $playbutton = $('.playbutton');
-            $('.playbutton').addClass('bg-gray');
+            $playbutton.find('.fa-solid').toggleClass('fa-play fa-stop');
-            $('.playbutton').prop('disabled', true);
+            $playbutton.addClass('bg-gray').prop('disabled', true);
-
+            setTimeout(() => {
-            setTimeout(function() {
+                $playbutton.removeClass('bg-gray').prop('disabled', false);
-                $('.playbutton').removeClass('bg-gray');
-                $('.playbutton').prop('disabled', false);
             }, 3000);
         }
-    }
+    } catch (error) {
-    catch (_ex) {
+        console.error(error);
     }
 }
+
 function updateVolume() {
     Stream.Volume = $(this).val();
-}
+}

web/js/chat.js

@@ -1,105 +1,88 @@
-var chatUrl = new URL('chat', window.location.href);
-chatUrl.protocol = chatUrl.protocol.replace('http', 'ws');
-var chatSocketAddress = chatUrl.href;
-var chatSocket = new WebSocket(chatSocketAddress);
-let chatMessageCount = 0;
-
 $(document).ready(function() {
-  chatSocket.onopen = function() {
+  const chatSocket = new WebSocket(`ws://${window.location.host}/chat`);
-  };
+  let chatMessageCount = 0;
+  const chatMessages = $('#chat-chatbox');
+  const chatMessagesCount = $('.chat-messages-count');
+  const chatButton = $('.chatbutton');
+  const chatSendInput = $('#chat-send-message');
+  const chatIdentityNickname = $('#chat-identity-nickname');
+  const chatNicknameInput = $('#chat-nickname');
+  const chatNicknameSave = $('#chat-nickname-save');
 
   chatSocket.onmessage = function(event) {
-    var messages = $('#chat-chatbox');
+      const messageData = JSON.parse(event.data);
-    let messageData = JSON.parse(event.data); // Parse event.data to access its properties
+      const isAdmin = messageData.admin ? '<span style="color: lime">[ADMIN]</span>' : '';
-  
-    let isAdmin = messageData.admin ? '<span style="color: lime">[ADMIN]</span>' : ''; // Add '[ADMIN] ' if messageData.admin is true, otherwise empty string
-    // Check if the message type is 'clientIp'
-    if (messageData.type === 'clientIp') {
-      // Fill the client IP into the element with ID #chat-ip
-      $('#chat-admin').html(isAdmin);
-      $('#chat-identity-nickname').attr('title', messageData.ip)
-    } else {
-        let chatMessage = `
-        <span class="color-2">[${messageData.time}]</span>
-        ${isAdmin} <strong class="color-5" title="IP Address: ${messageData.ip}">${messageData.nickname}</strong>: <span style="color: var(--color-text-2);">${$('<div/>').text(messageData.message).html()}</span><br>
-      `;   
       
-      messages.append(chatMessage);
+      if (messageData.type === 'clientIp') {
-  
+          chatIdentityNickname.html(isAdmin + " " + savedNickname.length > 0 ? savedNickname : 'Anonymous User');
-      if($('#chat-chatbox').is(':visible')) { 
+          chatIdentityNickname.attr('title', messageData.ip);
-        setTimeout(function() {
-          $('#chat-chatbox').scrollTop($('#chat-chatbox')[0].scrollHeight);
-        }, 100)
       } else {
-          if(messageData.history !== true) {
+          const chatMessage = `
-              chatMessageCount++;
+              <span class="color-2">[${messageData.time}]</span>
-              $('.chat-messages-count').text(chatMessageCount);
+              ${isAdmin} <strong class="color-5" title="IP Address: ${messageData.ip}">${messageData.nickname}</strong>: 
-              $('.chatbutton').removeClass('bg-color-2').addClass('bg-color-4');
+              <span style="color: var(--color-text-2);">${$('<div/>').text(messageData.message).html()}</span><br>
+          `;
+          chatMessages.append(chatMessage);
+
+          if (chatMessages.is(':visible')) {
+              setTimeout(function() {
+                  chatMessages.scrollTop(chatMessages[0].scrollHeight);
+              }, 100);
+          } else {
+              if (!messageData.history) {
+                  chatMessageCount++;
+                  chatMessagesCount.text(chatMessageCount);
+                  chatButton.removeClass('bg-color-2').addClass('bg-color-4');
+              }
           }
       }
-    }
+  };
-  };  
 
-  $('.chat-send-message-btn').click(function() {
+  $('.chat-send-message-btn').click(sendMessage);
-    sendMessage();
+  chatNicknameSave.click(function() {
+      const currentNickname = chatNicknameInput.val();
+      localStorage.setItem('nickname', currentNickname);
+      chatIdentityNickname.text(currentNickname.length > 0 ? currentNickname : 'Anonymous User');
+      chatNicknameInput.blur();
+  });
+  
+  chatButton.click(function() {
+      chatMessageCount = 0;
+      chatMessagesCount.text(chatMessageCount);
+      chatButton.removeClass('bg-color-4').addClass('bg-color-2');
+      chatSendInput.focus();
+
+      setTimeout(function() {
+          chatMessages.scrollTop(chatMessages[0].scrollHeight);
+      }, 100);
   });
 
-  $('#chat-nickname-save').click(function() {
+  chatNicknameInput.keypress(function(event) {
-    let currentNickname = $('#chat-nickname').val();
+      if (event.which === 13) {
-    localStorage.setItem('nickname', currentNickname);
+          chatNicknameSave.trigger('click');
-    $('#chat-identity-nickname').text(localStorage.getItem('nickname'));
+      }
-    $('#chat-nickname').blur();
   });
 
-  $('.chatbutton').click(function() {
+  chatSendInput.keypress(function(event) {
-    chatMessageCount = 0;
+      if (event.which === 13) {
-    $('.chat-messages-count').text(chatMessageCount);
+          sendMessage();
-    $('.chatbutton').removeClass('bg-color-4').addClass('bg-color-2');
+      }
-    $('#chat-send-message').focus();
-
-    setTimeout(function() {
-      $('#chat-chatbox').scrollTop($('#chat-chatbox')[0].scrollHeight);
-    }, 100)
   });
 
-  $('#chat-nickname').keypress(function(event) {
+  // Load nickname from localStorage on page load
-    if (event.which == 13) { // 13 is the keycode for Enter key
+  const savedNickname = localStorage.getItem('nickname');
-        $('#chat-nickname-save').trigger('click');
+  if (savedNickname) {
-    }
+      chatNicknameInput.val(savedNickname);
-  });
-
-  $('#chat-send-message').keypress(function(event) {
-    if (event.which == 13) { // 13 is the keycode for Enter key
-        sendMessage();
-    }
-  });
-
-  if(localStorage.getItem('nickname')) {
-    $('#chat-nickname').val(localStorage.getItem('nickname'));
-    $('#chat-identity-nickname').text(localStorage.getItem('nickname'));
   }
-
 });
 
 function sendMessage() {
-    var input = $('#chat-send-message');
+  const nickname = chatNicknameInput.val().trim() || 'Anonymous user';
-    var nickname = localStorage.getItem('nickname');
+  const message = chatSendInput.val().trim();
-    if (nickname && nickname.length > 1) {
+
-        // Only assign the nickname if it exists in localStorage and is longer than one character
+  if (message) {
-        nickname = nickname;
+      const messageData = { nickname, message };
-    } else {
-        // Otherwise, use the default nickname
-        nickname = 'Anonymous user';
-    }
-    
-  
-    if (input.val().trim() !== '') {
-      var messageData = {
-        nickname: nickname,
-        message: input.val()
-      };
-  
       chatSocket.send(JSON.stringify(messageData));
-      input.val('');
+      chatSendInput.val('');
-    }
+  }
-  }  
+}

web/js/dropdown.js

@@ -52,7 +52,5 @@ const closeDropdownFromOutside = (event) => {
 
 // Event Listeners
 $(document).on('click', closeDropdownFromOutside);
-
 $listOfOptions.on('click', selectOption);
-
 $dropdowns.on('click', toggleDropdown);

web/js/init.js

@@ -1,3 +1,10 @@
+var currentDate = new Date('March 25, 2024 23:00:00');
+var day = currentDate.getDate();
+var month = currentDate.getMonth() + 1; // Months are zero-indexed, so add 1
+var year = currentDate.getFullYear();
+var formattedDate = day + '/' + month + '/' + year;
+var currentVersion = 'v1.1.8 [' + formattedDate + ']';
+
 getInitialSettings();
 
 function getInitialSettings() {

web/js/main.js

@@ -139,7 +139,6 @@ $(document).ready(function () {
     var piCodeContainer = $('#pi-code-container')[0];
     var freqContainer = $('#freq-container')[0];
     var txContainer = $('#data-station-container')[0];
-    var stereoContainer = $('#stereo-container')[0];
 
     $("#data-eq").click(function () {
         toggleButtonState("eq");

web/js/modal.js

@@ -3,54 +3,49 @@ $(document).ready(function() {
   var modal = $("#myModal");
   var modalPanel = $(".modal-panel");
   var chatPanel = $(".modal-panel-chat");
-  var chatOpenBtn = $(".chatbutton");
   var openBtn = $("#settings");
   var closeBtn = $(".closeModal, .closeModalButton");
 
   // Function to open the modal
-  function openModal() {
+  function openModal(panel) {
     modal.css("display", "block");
-    modalPanel.css("display", "block");
+    panel.css("display", "block");
     setTimeout(function() {
       modal.css("opacity", 1);
     }, 10);
   }
 
-  function openChat() {
+  // Function to close the modal
-    modal.css("display", "block");
+  function closeModal() {
-    chatPanel.css("display", "block");
+    modal.css("opacity", 0);
     setTimeout(function() {
-      modal.css("opacity", 1);
+      modal.css("display", "none");
-    }, 10);
+      modalPanel.add(chatPanel).css("display", "none");
+    }, 300);
   }
 
+  // Event listeners for the open and close buttons
+  openBtn.on("click", function() {
+    openModal(modalPanel);
+  });
 
-// Function to close the modal
+  $(".chatbutton").on("click", function() {
-function closeModal() {
+    openModal(chatPanel);
-  modal.css("opacity", 0);
+  });
-  setTimeout(function() {
-    modal.css("display", "none");
-    modalPanel.css("display", "none");
-    chatPanel.css("display", "none");
-  }, 300);
-}
 
-// Event listeners for the open and close buttons
+  closeBtn.on("click", closeModal);
-openBtn.on("click", openModal);
-chatOpenBtn.on("click", openChat);
-closeBtn.on("click", closeModal);
 
-// Close the modal when clicking outside of it
+  // Close the modal when clicking outside of it
-$(document).on("click", function(event) {
+  $(document).on("click", function(event) {
-  if ($(event.target).is(modal)) {
+    if ($(event.target).is(modal)) {
-    closeModal();
+      closeModal();
-  }
+    }
-});
+  });
 
-// Close the modal when pressing ESC key
+  // Close the modal when pressing ESC key
-$(document).on("keydown", function(event) {
+  $(document).on("keydown", function(event) {
-  if (event.key === "Escape") {
+    if (event.key === "Escape") {
-    closeModal();
+      closeModal();
-  }
+    }
-});
+  });
 });

web/js/settings.js

@@ -1,189 +1,181 @@
-var currentDate = new Date('March 24, 2024 19:00:00');
+/**
-var day = currentDate.getDate();
+* Themes
-var month = currentDate.getMonth() + 1; // Months are zero-indexed, so add 1
+* @param first color
-var year = currentDate.getFullYear();
+* @param second color
-var formattedDate = day + '/' + month + '/' + year;
+* @param text color
-var currentVersion = 'v1.1.7 [' + formattedDate + ']';
+*/
+const themes = {
+    theme1: ['rgba(32, 34, 40, 1)', 'rgba(88, 219, 171, 1)', 'rgba(255, 255, 255, 1)' ], // Retro (Default)
+    theme2: [ 'rgba(21, 32, 33, 1)', 'rgba(203, 202, 165, 1)', 'rgba(255, 255, 255, 1)' ], // Cappuccino
+    theme3: [ 'rgba(18, 18, 12, 1)', 'rgba(169, 255, 112, 1)', 'rgba(255, 255, 255, 1)' ], // Nature
+    theme4: [ 'rgba(12, 28, 27, 1)', 'rgba(104, 247, 238, 1)', 'rgba(255, 255, 255, 1)' ], // Ocean
+    theme5: [ 'rgba(23, 17, 6, 1)', 'rgba(245, 182, 66, 1)', 'rgba(255, 255, 255, 1)' ], // Terminal
+    theme6: [ 'rgba(33, 9, 29, 1)', 'rgba(250, 82, 141, 1)', 'rgba(255, 255, 255, 1)' ], // Nightlife
+    theme7: [ 'rgba(13, 11, 26, 1)', 'rgba(128, 105, 250, 1)', 'rgba(255, 255, 255, 1)' ], // Blurple
+    theme8: [ 'rgba(252, 186, 3, 1)', 'rgba(0, 0, 0, 1)', 'rgba(0, 0, 0, 1)' ], // Construction
+    theme9: [ 'rgba(0, 0, 0, 1)', 'rgba(204, 204, 204, 1)', 'rgba(255, 255, 255, 1)' ], // AMOLED
+};      
 
+// Signal Units
+const signalUnits = {
+    dbf: ['dBf'],
+    dbuv: ['dBµV'],
+    dbm: ['dBm'],
+};
+
+$(document).ready(() => {
+    // Theme Selector
+    const themeSelector = $('#theme-selector');
+    const savedTheme = localStorage.getItem('theme');
+    const defaultTheme = localStorage.getItem('defaultTheme');
+    const savedUnit = localStorage.getItem('signalUnit');
     
-    /**
+    if(defaultTheme && themes[defaultTheme]) {
-    * Themes
+        setTheme(defaultTheme);
-    * @param first color
+    }
-    * @param second color
-    * @param text color
-    */
-    const themes = {
-        theme1: ['rgba(32, 34, 40, 1)', 'rgba(88, 219, 171, 1)', 'rgba(255, 255, 255, 1)' ], // Retro (Default)
-        theme2: [ 'rgba(21, 32, 33, 1)', 'rgba(203, 202, 165, 1)', 'rgba(255, 255, 255, 1)' ], // Cappuccino
-        theme3: [ 'rgba(18, 18, 12, 1)', 'rgba(169, 255, 112, 1)', 'rgba(255, 255, 255, 1)' ], // Nature
-        theme4: [ 'rgba(12, 28, 27, 1)', 'rgba(104, 247, 238, 1)', 'rgba(255, 255, 255, 1)' ], // Ocean
-        theme5: [ 'rgba(23, 17, 6, 1)', 'rgba(245, 182, 66, 1)', 'rgba(255, 255, 255, 1)' ], // Terminal
-        theme6: [ 'rgba(33, 9, 29, 1)', 'rgba(250, 82, 141, 1)', 'rgba(255, 255, 255, 1)' ], // Nightlife
-        theme7: [ 'rgba(13, 11, 26, 1)', 'rgba(128, 105, 250, 1)', 'rgba(255, 255, 255, 1)' ], // Blurple
-        theme8: [ 'rgba(252, 186, 3, 1)', 'rgba(0, 0, 0, 1)', 'rgba(0, 0, 0, 1)' ], // Construction
-        theme9: [ 'rgba(0, 0, 0, 1)', 'rgba(204, 204, 204, 1)', 'rgba(255, 255, 255, 1)' ], // AMOLED
-    };      
     
-    // Signal Units
+    if (savedTheme && themes[savedTheme]) {
-    const signalUnits = {
+        setTheme(savedTheme);
-        dbf: ['dBf'],
+        themeSelector.find('input').val(themeSelector.find('.option[data-value="' + savedTheme + '"]').text());
-        dbuv: ['dBµV'],
+    }
-        dbm: ['dBm'],
-    };
     
-    $(document).ready(() => {
+    themeSelector.on('click', '.option', (event) => {
-        // Theme Selector
+        const selectedTheme = $(event.target).data('value');
-        const themeSelector = $('#theme-selector');
+        setTheme(selectedTheme);
-        const savedTheme = localStorage.getItem('theme');
+        themeSelector.find('input').val($(event.target).text()); // Set the text of the clicked option to the input
-        const defaultTheme = localStorage.getItem('defaultTheme');
+        localStorage.setItem('theme', selectedTheme);
-        const savedUnit = localStorage.getItem('signalUnit');
-
-        if(defaultTheme && themes[defaultTheme]) {
-            setTheme(defaultTheme);
-        }
-
-        if (savedTheme && themes[savedTheme]) {
-            setTheme(savedTheme);
-            themeSelector.find('input').val(themeSelector.find('.option[data-value="' + savedTheme + '"]').text());
-        }
-        
-        themeSelector.on('click', '.option', (event) => {
-            const selectedTheme = $(event.target).data('value');
-            setTheme(selectedTheme);
-            themeSelector.find('input').val($(event.target).text()); // Set the text of the clicked option to the input
-            localStorage.setItem('theme', selectedTheme);
-            setBg();
-        });
-        
-        // Signal Selector
-        const signalSelector = $('#signal-selector');
-        
-        if (localStorage.getItem('signalUnit')) {
-            signalSelector.find('input').val(signalSelector.find('.option[data-value="' + savedUnit + '"]').text());
-        }
-        
-        signalSelector.on('click', '.option', (event) => {
-            const selectedSignalUnit = $(event.target).data('value');
-            signalSelector.find('input').val($(event.target).text()); // Set the text of the clicked option to the input
-            localStorage.setItem('signalUnit', selectedSignalUnit);
-        });
-        
-        $('#login-form').submit(function (event) {
-            event.preventDefault();
-            
-            // Perform an AJAX request to the /login endpoint
-            $.ajax({
-                type: 'POST',
-                url: './login',
-                data: $(this).serialize(),
-                success: function (data) {
-                    // Update the content on the page with the message from the response
-                    $('#login-message').text(data.message);
-                    setTimeout(function () {
-                        location.reload(true);
-                    }, 1750);
-                },
-                error: function (xhr, status, error) {
-                    // Handle error response
-                    if (xhr.status === 403) {
-                        // Update the content on the page with the message from the error response
-                        $('#login-message').text(xhr.responseJSON.message);
-                    } else {
-                        // Handle other types of errors if needed
-                        console.error('Error:', status, error);
-                    }
-                }
-            });
-        });    
-        
-        // Assuming you have an anchor tag with id 'logout-link'
-        $('.logout-link').click(function (event) {
-            event.preventDefault();
-            
-            // Perform an AJAX request to the /logout endpoint
-            $.ajax({
-                type: 'GET',  // Assuming the logout is a GET request, adjust accordingly
-                url: './logout',
-                success: function (data) {
-                    // Update the content on the page with the message from the response
-                    $('#login-message').text(data.message);
-                    setTimeout(function () {
-                        location.reload(true);
-                    }, 1750);
-                },
-                error: function (xhr, status, error) {
-                    // Handle error response
-                    if (xhr.status === 403) {
-                        // Update the content on the page with the message from the error response
-                        $('#login-message').text(xhr.responseJSON.message);
-                    } else {
-                        // Handle other types of errors if needed
-                        console.error('Error:', status, error);
-                    }
-                }
-            });
-        });
-        
-        var extendedFreqRange = localStorage.getItem("extendedFreqRange");
-        if (extendedFreqRange === "true") {
-            $("#extended-frequency-range").prop("checked", true);
-        }
-        
-        // Save the value of the checkbox into local storage when its state changes
-        $("#extended-frequency-range").change(function() {
-            var isChecked = $(this).is(":checked");
-            localStorage.setItem("extendedFreqRange", isChecked);
-        });
-        
-        var extendedFreqRange = localStorage.getItem("psUnderscores");
-        if (extendedFreqRange === "true") {
-            $("#ps-underscores").prop("checked", true);
-        }
-
-        var smoothSignal = localStorage.getItem("smoothSignal");
-        if (smoothSignal === "true") {
-            $("#smooth-signal").prop("checked", true);
-        }
-        
-        // Save the value of the checkbox into local storage when its state changes
-        $("#ps-underscores").change(function() {
-            var isChecked = $(this).is(":checked");
-            localStorage.setItem("psUnderscores", isChecked);
-        });
-
-        $("#smooth-signal").change(function() {
-            var isChecked = $(this).is(":checked");
-            localStorage.setItem("smoothSignal", isChecked);
-        });
-        
-        $('.version-string').text(currentVersion);
-
         setBg();
     });
     
+    // Signal Selector
+    const signalSelector = $('#signal-selector');
     
-    function setTheme(themeName) {
+    if (localStorage.getItem('signalUnit')) {
-        const themeColors = themes[themeName];
+        signalSelector.find('input').val(signalSelector.find('.option[data-value="' + savedUnit + '"]').text());
-        if (themeColors) {
-            // Extracting the RGBA components and opacity value
-            const rgbaComponents = themeColors[2].match(/(\d+(\.\d+)?)/g);
-            const opacity = parseFloat(rgbaComponents[3]);
-            // Calculating 80% of the opacity
-            const newOpacity = opacity * 0.75;
-            // Constructing the new RGBA string with the adjusted opacity
-            const textColor2 = `rgba(${rgbaComponents[0]}, ${rgbaComponents[1]}, ${rgbaComponents[2]}, ${newOpacity})`;
-            
-            $(':root').css('--color-main', themeColors[0]);
-            $(':root').css('--color-main-bright', themeColors[1]);
-            $(':root').css('--color-text', themeColors[2]);
-            $(':root').css('--color-text-2', textColor2);
-        }
     }
     
-    function setBg() {
+    signalSelector.on('click', '.option', (event) => {
-        if(localStorage.getItem('bgImage').length > 1 && localStorage.getItem('theme') != 'theme8') {
+        const selectedSignalUnit = $(event.target).data('value');
-            $('body').css('background', 'url(' + localStorage.getItem('bgImage') + ') top center / cover fixed no-repeat var(--color-main)');
+        signalSelector.find('input').val($(event.target).text()); // Set the text of the clicked option to the input
-        } else {
+        localStorage.setItem('signalUnit', selectedSignalUnit);
-            $('body').css('background', 'var(--color-main)');
+    });
-        }
+    
-    }
+    $('#login-form').submit(function (event) {
+        event.preventDefault();
+        
+        // Perform an AJAX request to the /login endpoint
+        $.ajax({
+            type: 'POST',
+            url: './login',
+            data: $(this).serialize(),
+            success: function (data) {
+                // Update the content on the page with the message from the response
+                $('#login-message').text(data.message);
+                setTimeout(function () {
+                    location.reload(true);
+                }, 1750);
+            },
+            error: function (xhr, status, error) {
+                // Handle error response
+                if (xhr.status === 403) {
+                    // Update the content on the page with the message from the error response
+                    $('#login-message').text(xhr.responseJSON.message);
+                } else {
+                    // Handle other types of errors if needed
+                    console.error('Error:', status, error);
+                }
+            }
+        });
+    });    
+    
+    // Assuming you have an anchor tag with id 'logout-link'
+    $('.logout-link').click(function (event) {
+        event.preventDefault();
+        
+        // Perform an AJAX request to the /logout endpoint
+        $.ajax({
+            type: 'GET',  // Assuming the logout is a GET request, adjust accordingly
+            url: './logout',
+            success: function (data) {
+                // Update the content on the page with the message from the response
+                $('#login-message').text(data.message);
+                setTimeout(function () {
+                    location.reload(true);
+                }, 1750);
+            },
+            error: function (xhr, status, error) {
+                // Handle error response
+                if (xhr.status === 403) {
+                    // Update the content on the page with the message from the error response
+                    $('#login-message').text(xhr.responseJSON.message);
+                } else {
+                    // Handle other types of errors if needed
+                    console.error('Error:', status, error);
+                }
+            }
+        });
+    });
+    
+    var extendedFreqRange = localStorage.getItem("extendedFreqRange");
+    if (extendedFreqRange === "true") {
+        $("#extended-frequency-range").prop("checked", true);
+    }
+    
+    // Save the value of the checkbox into local storage when its state changes
+    $("#extended-frequency-range").change(function() {
+        var isChecked = $(this).is(":checked");
+        localStorage.setItem("extendedFreqRange", isChecked);
+    });
+    
+    var extendedFreqRange = localStorage.getItem("psUnderscores");
+    if (extendedFreqRange === "true") {
+        $("#ps-underscores").prop("checked", true);
+    }
+    
+    var smoothSignal = localStorage.getItem("smoothSignal");
+    if (smoothSignal === "true") {
+        $("#smooth-signal").prop("checked", true);
+    }
+    
+    // Save the value of the checkbox into local storage when its state changes
+    $("#ps-underscores").change(function() {
+        var isChecked = $(this).is(":checked");
+        localStorage.setItem("psUnderscores", isChecked);
+    });
+    
+    $("#smooth-signal").change(function() {
+        var isChecked = $(this).is(":checked");
+        localStorage.setItem("smoothSignal", isChecked);
+    });
+    
+    $('.version-string').text(currentVersion);
+    
+    setBg();
+});
+
+
+function setTheme(themeName) {
+    const themeColors = themes[themeName];
+    if (themeColors) {
+        // Extracting the RGBA components and opacity value
+        const rgbaComponents = themeColors[2].match(/(\d+(\.\d+)?)/g);
+        const opacity = parseFloat(rgbaComponents[3]);
+        // Calculating 80% of the opacity
+        const newOpacity = opacity * 0.75;
+        // Constructing the new RGBA string with the adjusted opacity
+        const textColor2 = `rgba(${rgbaComponents[0]}, ${rgbaComponents[1]}, ${rgbaComponents[2]}, ${newOpacity})`;
+        
+        $(':root').css('--color-main', themeColors[0]);
+        $(':root').css('--color-main-bright', themeColors[1]);
+        $(':root').css('--color-text', themeColors[2]);
+        $(':root').css('--color-text-2', textColor2);
+    }
+}
+
+function setBg() {
+    if(localStorage.getItem('bgImage').length > 1 && localStorage.getItem('theme') != 'theme8') {
+        $('body').css('background', 'url(' + localStorage.getItem('bgImage') + ') top center / cover fixed no-repeat var(--color-main)');
+    } else {
+        $('body').css('background', 'var(--color-main)');
+    }
+}

web/setup.ejs

@@ -8,7 +8,7 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
     <link href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.min.css" type="text/css" rel="stylesheet">
     <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.min.js"></script>
-    <link rel="icon" type="image/png" href="favicon2.png" />
+    <link rel="icon" type="image/png" href="favicon.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1">
 </head>
 <body>

web/wizard.ejs

@@ -8,7 +8,7 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
     <link href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.min.css" type="text/css" rel="stylesheet">
     <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.min.js"></script>
-    <link rel="icon" type="image/png" href="favicon2.png" />
+    <link rel="icon" type="image/png" href="favicon.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1">
 </head>
 <body>