mirror of
https://github.com/adelatour11/codebarr.git
synced 2025-12-30 11:39:54 -06:00
3cfa63c9de
Refactor album addition process to improve error handling and add countdown reset functionality.
301 lines
11 KiB
HTML
301 lines
11 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Lidarr Barcode Scanner</title>
|
|
<link rel="icon" type="image/x-icon" href="static/icons/icon-192.png">
|
|
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700&display=swap" rel="stylesheet">
|
|
<script src="https://unpkg.com/@zxing/browser@latest"></script>
|
|
|
|
<script>
|
|
if ('serviceWorker' in navigator) {
|
|
navigator.serviceWorker.register('/static/service-worker.js')
|
|
.then(() => console.log("✅ Service worker registered"))
|
|
.catch(err => console.error("Service worker error:", err));
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
* { font-family: inherit; }
|
|
html, body { font-family: 'Roboto', 'Open Sans', sans-serif; font-weight: 100; }
|
|
body { background: #202020; color: #eee; text-align: center; padding: 20px; }
|
|
h1 { color: #5c9d4e; margin-bottom: 10px; font-weight: 300; }
|
|
#lidarr-logo { max-width: 128px; margin: 10px auto; display: block; }
|
|
#status { margin: 10px 0; font-weight: 300; }
|
|
#preview-container { position: relative; width: 100%; max-width: 500px; margin: 20px auto; border: 2px solid #5c9d4e; border-radius: 4px; overflow: hidden; background: #000; height: 300px; }
|
|
#scanner-guides::before { content: ""; position: absolute; top: 20%; left: 10%; right: 10%; height: 60%; border: 2px dashed rgba(92,157,78,0.7); }
|
|
.button-group { display: flex; gap: 10px; justify-content: center; margin: 15px 0; }
|
|
.button-group button { flex: 1; padding: 10px; border: none; border-radius: 4px; background: #5c9d4e; color: #fff; font-weight: 300; cursor: pointer; }
|
|
.button-group button:hover { background: #4b8440; }
|
|
#toggle-container { display: flex; justify-content: center; gap: 10px; margin: 10px 0; }
|
|
#toggle-container button { padding: 10px; border-radius: 4px; border: none; background: #888; color: #fff; cursor: pointer; flex: 1; font-weight: 300;}
|
|
#barcode { padding: 8px; width: 200px; margin: 10px 0; border-radius: 4px; border: 1px solid #5c9d4e; }
|
|
.progress-container { width: 80%; height: 20px; background: #333; border-radius: 10px; margin: 10px auto; overflow: hidden; }
|
|
.progress-bar { height: 100%; width: 0%; background: #5c9d4e; transition: width 0.3s; }
|
|
#debug-info { margin-top: 10px; color: #ccc; }
|
|
#album-info { margin-top: 10px; font-weight: 300;}
|
|
#add-album-btn { padding: 10px 20px; margin-top: 10px; border-radius: 4px; border: none; background: #5c9d4e; color: #fff; font-weight: 300; cursor: pointer; display: none; }
|
|
#add-album-btn:hover { background: #4b8440; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<img id="lidarr-logo" src="static/icons/icon-192.png" alt="Lidarr Logo">
|
|
<h1>Lidarr Barcode Scanner</h1>
|
|
<div id="status">Scanner stopped.</div>
|
|
|
|
<div id="preview-container">
|
|
<div id="preview"></div>
|
|
<div id="scanner-guides"></div>
|
|
</div>
|
|
|
|
<div class="button-group">
|
|
<button id="start-scanner">Start Scanner</button>
|
|
<button id="stop-scanner">Stop Scanner</button>
|
|
</div>
|
|
|
|
<div id="toggle-container">
|
|
<button id="reset-scanner">Reset</button>
|
|
</div>
|
|
|
|
<input type="text" id="barcode" placeholder="EAN-13 or UPC barcode or enter manually">
|
|
<div id="album-info"></div>
|
|
<button id="add-album-btn">Add Album to Lidarr</button>
|
|
|
|
<div class="progress-container">
|
|
<div id="progress-bar" class="progress-bar"></div>
|
|
</div>
|
|
|
|
<div id="debug-info"></div>
|
|
|
|
<div id="app-control" style="margin-top: 20px;">
|
|
<button id="stop-app-btn" style="padding: 10px 20px; border-radius: 4px; border: none; background: #c0392b; color: #fff; font-weight: 300; cursor: pointer;">Stop App</button>
|
|
</div>
|
|
|
|
<script>
|
|
let scannerRunning = false;
|
|
let codeReader = null;
|
|
let currentBarcode = null;
|
|
let detectionHandled = false; // Flag to track if detection is already handled
|
|
|
|
|
|
|
|
|
|
// --- UTILS ---
|
|
function updateStatus(msg) {
|
|
document.getElementById('status').innerText = msg;
|
|
}
|
|
|
|
function updateProgress(percent) {
|
|
document.getElementById('progress-bar').style.width = percent + "%";
|
|
}
|
|
|
|
// --- SCANNER ---
|
|
|
|
async function startScanner() {
|
|
if (scannerRunning) return;
|
|
scannerRunning = true;
|
|
detectionHandled = false; // Reset the flag
|
|
updateStatus("Initializing scanner...");
|
|
|
|
codeReader = new ZXingBrowser.BrowserMultiFormatReader();
|
|
const videoElement = document.createElement("video");
|
|
videoElement.setAttribute("playsinline", true);
|
|
videoElement.style.width = "100%";
|
|
videoElement.style.height = "100%";
|
|
const preview = document.getElementById("preview");
|
|
preview.innerHTML = "";
|
|
preview.appendChild(videoElement);
|
|
|
|
try {
|
|
const stream = await navigator.mediaDevices.getUserMedia({
|
|
video: { facingMode: "environment", width: { ideal: 640 }, height: { ideal: 480 } },
|
|
});
|
|
videoElement.srcObject = stream;
|
|
|
|
await codeReader.decodeFromVideoDevice(
|
|
null,
|
|
videoElement,
|
|
async (result, err) => {
|
|
if (result && !detectionHandled) {
|
|
detectionHandled = true; // Mark detection as handled
|
|
const code = result.getText();
|
|
currentBarcode = code;
|
|
document.getElementById("barcode").value = code;
|
|
updateStatus(`📀 Barcode detected: ${code}`);
|
|
await fetchAlbumInfo(code);
|
|
}
|
|
}
|
|
);
|
|
updateStatus("Scanner ready. Align barcode inside the guides.");
|
|
} catch (e) {
|
|
console.error(e);
|
|
updateStatus("❌ Camera error");
|
|
scannerRunning = false;
|
|
}
|
|
}
|
|
|
|
|
|
function stopScanner() {
|
|
if (!scannerRunning) return;
|
|
const videoElement = document.querySelector("#preview video");
|
|
if (videoElement && videoElement.srcObject) {
|
|
const stream = videoElement.srcObject;
|
|
stream.getTracks().forEach(track => track.stop());
|
|
}
|
|
if (videoElement) {
|
|
videoElement.pause();
|
|
videoElement.srcObject = null;
|
|
videoElement.remove();
|
|
}
|
|
scannerRunning = false;
|
|
updateStatus("Scanner stopped.");
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function resetScanner() {
|
|
stopScanner();
|
|
detectionHandled = false; // Reset the flag
|
|
currentBarcode = null;
|
|
document.getElementById("barcode").value = "";
|
|
document.getElementById("album-info").innerHTML = "";
|
|
document.getElementById("add-album-btn").style.display = "none";
|
|
updateProgress(0);
|
|
updateStatus("Scanner reset.");
|
|
}
|
|
|
|
|
|
|
|
|
|
document.getElementById('start-scanner').addEventListener('click', startScanner);
|
|
document.getElementById('stop-scanner').addEventListener('click', stopScanner);
|
|
document.getElementById('reset-scanner').addEventListener('click', resetScanner);
|
|
|
|
// --- FETCH ALBUM INFO ---
|
|
async function fetchAlbumInfo(barcode) {
|
|
const infoDiv = document.getElementById('album-info');
|
|
infoDiv.innerHTML = "Fetching album info...";
|
|
try {
|
|
const resp = await fetch(`https://musicbrainz.org/ws/2/release/?query=barcode:${barcode}&fmt=json`);
|
|
const data = await resp.json();
|
|
if (!data.releases || data.releases.length === 0) {
|
|
infoDiv.innerHTML = "❌ No album found for this barcode";
|
|
document.getElementById('add-album-btn').style.display = 'none';
|
|
return false;
|
|
}
|
|
const release = data.releases[0];
|
|
const artist = release['artist-credit'][0].name;
|
|
const album = release.title;
|
|
infoDiv.innerHTML = `<strong>${album}</strong> by <strong>${artist}</strong>`;
|
|
document.getElementById('add-album-btn').style.display = 'inline-block';
|
|
currentBarcode = barcode;
|
|
return true;
|
|
} catch (err) {
|
|
console.error(err);
|
|
infoDiv.innerHTML = "❌ Error fetching album info";
|
|
document.getElementById('add-album-btn').style.display = 'none';
|
|
return false;
|
|
}
|
|
}
|
|
|
|
// --- MANUAL ENTRY ---
|
|
document.getElementById('barcode').addEventListener('keydown', async (event) => {
|
|
if (event.key === 'Enter') {
|
|
event.preventDefault();
|
|
const code = event.target.value.trim();
|
|
if (!code) return;
|
|
event.target.disabled = true;
|
|
updateStatus(`⏳ Searching for ${code}...`);
|
|
const found = await fetchAlbumInfo(code);
|
|
if (found) updateStatus(`Manual entry: ${code}`);
|
|
else updateStatus(`❌ No album found for ${code}`);
|
|
event.target.disabled = false;
|
|
event.target.focus();
|
|
}
|
|
});
|
|
|
|
// --- ADD ALBUM TO LIDARR ---
|
|
document.getElementById('add-album-btn').addEventListener('click', async () => {
|
|
if (!currentBarcode) return;
|
|
const addBtn = document.getElementById('add-album-btn');
|
|
addBtn.disabled = true;
|
|
updateStatus("Starting album add process...");
|
|
updateProgress(0);
|
|
|
|
try {
|
|
const response = await fetch("/submit", {
|
|
method: "POST",
|
|
headers: {'Content-Type':'application/x-www-form-urlencoded'},
|
|
body: `barcode=${currentBarcode}`
|
|
});
|
|
|
|
const reader = response.body.getReader();
|
|
const decoder = new TextDecoder();
|
|
let buffer = "";
|
|
|
|
await reader.read().then(function process({done, value}) {
|
|
if (done) return;
|
|
buffer += decoder.decode(value, {stream:true});
|
|
const lines = buffer.split("\n\n");
|
|
buffer = lines.pop();
|
|
for (const line of lines) {
|
|
if (line.trim()) {
|
|
try {
|
|
const data = JSON.parse(line);
|
|
updateStatus(data.status);
|
|
updateProgress(data.progress);
|
|
} catch(e) {
|
|
console.error(e);
|
|
}
|
|
}
|
|
}
|
|
return reader.read().then(process);
|
|
});
|
|
|
|
updateStatus("✅ Album processed");
|
|
} catch(err) {
|
|
console.error(err);
|
|
updateStatus("❌ Error adding album");
|
|
} finally {
|
|
addBtn.disabled = false;
|
|
startCountdownReset(5); // Start 5-second countdown
|
|
}
|
|
});
|
|
|
|
function startCountdownReset(seconds) {
|
|
let remaining = seconds;
|
|
const countdownInterval = setInterval(() => {
|
|
updateStatus(`Resetting in ${remaining}...`);
|
|
remaining--;
|
|
if (remaining < 0) {
|
|
clearInterval(countdownInterval);
|
|
resetScanner();
|
|
startScanner(); // Restart the scanner after reset
|
|
}
|
|
}, 1000);
|
|
}
|
|
|
|
|
|
// --- STOP APP ---
|
|
document.getElementById("stop-app-btn").addEventListener("click", () => {
|
|
if(confirm("Are you sure you want to stop Codebarr?")) {
|
|
updateStatus("Stopping Flask server...");
|
|
fetch("/shutdown", { method: "POST" })
|
|
.then(resp => resp.text())
|
|
.then(txt => {
|
|
updateStatus(txt);
|
|
updateProgress(100);
|
|
})
|
|
.catch(err => {
|
|
updateStatus("❌ Error stopping app");
|
|
console.error(err);
|
|
});
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|