adaptive qr code, dark mode and more

- Dark mode is set based on user browser info
- QR Code changes colours based on dark or light mode
- "DUP" controlPerm for preventing duplicates in the future
  - Fully implemented in the server but not yet the client
This commit is contained in:
Kristy Fournier 2026-01-29 16:51:01 -05:00
parent cda152852c
commit 62caee7fd8
2 changed files with 24 additions and 16 deletions

View file

@ -8,6 +8,9 @@ const VALID_FILE_EXT = ["mp3","flac","wav"];
const params = new URLSearchParams(location.search);
let darkmodetemp = getCookie("darkmode");
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
darkmodetemp = "true";
}
if(darkmodetemp === "") {
darkmodetemp = params.get("darkmode")
}
@ -64,7 +67,7 @@ async function getFromServer(bodyInfo, source="",password=adminPass) {
} catch(e) {
// console.log("error print here:");
// console.log(e);
if (e == "TypeError: Failed to fetch"){
if (e.toString().contains("TypeError: Failed to fetch")){
alertText("Error: Can't Connect to Server (is the ip set?)")
} else {
alertText("Error: " + e);
@ -195,6 +198,10 @@ function alertTimeSet(time) {
function ipSetEnter(e){
if (e.key == "Enter") {
e.preventDefault();
// why on gosh's green earth am i sending a value here?
// im gonna get rid of all these individual "enter" dectectors and do something
// like i did for the keyboard selection of elements
// basically just if(e==click || e.key == enter)
ipSetter(document.getElementById("iptextbox").value)
}
}
@ -222,13 +229,16 @@ function ipSetter(){
function qrCodeGenerate() {
let tempURL = "http://" + document.location.href.split("/")[2] + "/?ip=" + ip;
document.getElementById("qrcode").innerHTML = ""
document.getElementById("qrcode").innerHTML = "";
// get the current foreground and background
let dark = window.getComputedStyle(document.body).getPropertyValue("--text-color");
let light = window.getComputedStyle(document.body).getPropertyValue("--bg-main");
new QRCode(document.getElementById("qrcode"), {
text: tempURL,
width: 256,
height: 256,
colorDark : "#000000",
colorLight : "#eeeeee",
colorDark : dark,
colorLight : light,
correctLevel : QRCode.CorrectLevel.H
});
}
@ -349,8 +359,8 @@ async function submitSong(songid) {
let returncode = await getFromServer({song: songid}, "songadd");
if(returncode == ERR_NO_ADMIN) {
// right now the error is alerted in getFromServer, maybe will change that
} else if(returncode["error"]=="song-in-queue") {
alertText("That song's about to play! Hang on!")
} else if(returncode["status"]!==200) {
alertText("That song's already in the queue! Hang on!")
} else {
alertText("Added to Queue");
}
@ -382,7 +392,7 @@ function toggleDark(e) {
document.getElementById("darkmode-button").innerHTML = "Off";
x.remove("dark-mode");
}
qrCodeGenerate();
}
async function sha256(message) {

View file

@ -28,7 +28,8 @@ controlPerms = {
"SK":True,
"AS":True,
"PM":True,
"VOL":True
"VOL":True,
"DUP":True # Not implemented, allow duplicate songs in queue
}
fileofDB = sql.connect("songDatabase.db")
@ -215,12 +216,9 @@ def songadd():
try:
if (ADMIN_PASS == recieveData['password']) or controlPerms["AS"]:
# Password exists and is correct, or it's not restricted
# if (recieveData['song'] in playlist):
# return {"error":"song-in-queue"}
# else:
# Right now the above is disabled since i want to make it optional first
# probably with a checkbox like the other admin controls
if True:
if not(controlPerms["DUP"]) and (recieveData['song'] in playlist) and not(ADMIN_PASS == recieveData['password']):
return {"error":"This song is already in the queue, hang on!","data":None},409
else:
queueSong(recieveData['song'])
return ERR_200
else: