mirror of
https://github.com/adelatour11/codebarr.git
synced 2025-12-30 03:29:55 -06:00
c7949c69e7
Refactor HTML structure and scripts for barcode scanner functionality, integrating ZXing library for barcode detection and improving service worker registration.
288 lines
10 KiB
HTML
288 lines
10 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 {
|
|
resetScanner();
|
|
addBtn.disabled = false;
|
|
startScanner();
|
|
}
|
|
});
|
|
|
|
// --- 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>
|