Toolvana: production-ready media tools platform (CodeIgniter 4)
- 134-tool registry with programmatic SEO (unique titles/H1/descriptions, JSON-LD graphs, sitemap index, canonical 301 enforcement via required filter) - DB-backed job queue (SKIP LOCKED) with drivers: Ffmpeg, Images (GD), Pdf (qpdf/gs/poppler), Youtube (thumbnails), Qr (server-side PNG) - Security: SSRF guard, MIME validation, rate limits, API-key auth, bcrypt admin login, security headers - Admin panel: dashboard, tools/categories/guides CRUD, SEO audit, analytics, job inspector with retry, system health, feature flags - Docker deployment (nginx + web/api FPM pools + scalable workers), PHPUnit suite (19 tests / 1139 assertions), PWA manifest + service worker
This commit is contained in:
deepseek
@@ -0,0 +1,58 @@
|
||||
/* Toolvana global JS — tiny, dependency-free. */
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
// mobile nav
|
||||
var toggle = document.getElementById('nav-toggle');
|
||||
var nav = document.getElementById('main-nav');
|
||||
if (toggle && nav) {
|
||||
toggle.addEventListener('click', function () {
|
||||
var open = nav.classList.toggle('open');
|
||||
toggle.setAttribute('aria-expanded', open ? 'true' : 'false');
|
||||
});
|
||||
}
|
||||
|
||||
// search suggest (progressive enhancement only)
|
||||
var input = document.querySelector('[data-suggest]');
|
||||
if (input && 'fetch' in window) {
|
||||
var box = null;
|
||||
function closeBox() { if (box) { box.remove(); box = null; } }
|
||||
input.addEventListener('input', function () {
|
||||
var q = input.value.trim();
|
||||
if (q.length < 2) { closeBox(); return; }
|
||||
fetch('/api/suggest?q=' + encodeURIComponent(q))
|
||||
.then(function (r) { return r.json(); })
|
||||
.then(function (data) {
|
||||
closeBox();
|
||||
if (!data.results || !data.results.length) return;
|
||||
box = document.createElement('div');
|
||||
box.className = 'suggest';
|
||||
box.setAttribute('role', 'listbox');
|
||||
data.results.forEach(function (r) {
|
||||
var a = document.createElement('a');
|
||||
a.href = r.url;
|
||||
a.textContent = r.name;
|
||||
a.setAttribute('role', 'option');
|
||||
a.style.cssText = 'display:block;padding:.55rem 1.1rem;color:var(--ink-900);font-size:.95rem;text-decoration:none';
|
||||
a.onmouseenter = function () { a.style.background = 'var(--brand-50)'; };
|
||||
a.onmouseleave = function () { a.style.background = 'none'; };
|
||||
box.appendChild(a);
|
||||
});
|
||||
Object.assign(box.style, {
|
||||
position: 'absolute', top: '100%', left: 0, right: 0, background: '#fff',
|
||||
borderRadius: '16px', boxShadow: 'var(--shadow-md)', zIndex: 60, overflow: 'hidden'
|
||||
});
|
||||
input.parentElement.style.position = 'relative';
|
||||
input.parentElement.appendChild(box);
|
||||
}).catch(function () {});
|
||||
});
|
||||
document.addEventListener('click', function (e) {
|
||||
if (box && !box.contains(e.target) && e.target !== input) closeBox();
|
||||
});
|
||||
}
|
||||
|
||||
// service worker (PWA shell caching)
|
||||
if ('serviceWorker' in navigator && location.protocol === 'https:') {
|
||||
navigator.serviceWorker.register('/service-worker.js').catch(function () {});
|
||||
}
|
||||
})();
|
||||
@@ -0,0 +1,214 @@
|
||||
/* Client-side text tools — everything computed locally, zero requests. */
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
var form = document.getElementById('tool-form');
|
||||
if (!form) return;
|
||||
var op = form.dataset.client;
|
||||
var input = document.getElementById('tool-input');
|
||||
var out = document.getElementById('client-result');
|
||||
|
||||
function render(text, extra) {
|
||||
out.innerHTML = '';
|
||||
var pre = document.createElement('textarea');
|
||||
pre.className = 'tool-area';
|
||||
pre.readOnly = true;
|
||||
pre.value = text;
|
||||
out.appendChild(pre);
|
||||
if (extra) {
|
||||
var p = document.createElement('p');
|
||||
p.className = 'hint';
|
||||
p.textContent = extra;
|
||||
out.appendChild(p);
|
||||
}
|
||||
var copy = document.createElement('button');
|
||||
copy.className = 'btn-primary';
|
||||
copy.type = 'button';
|
||||
copy.style.cssText = 'margin-top:.7rem;padding:.6rem 1.4rem;font-size:.92rem';
|
||||
copy.textContent = 'Copy result';
|
||||
copy.addEventListener('click', function () {
|
||||
navigator.clipboard.writeText(pre.value).then(function () { copy.textContent = 'Copied!'; setTimeout(function(){copy.textContent='Copy result';},1500); });
|
||||
});
|
||||
out.appendChild(copy);
|
||||
out.classList.add('show');
|
||||
}
|
||||
|
||||
form.addEventListener('submit', function (e) {
|
||||
e.preventDefault();
|
||||
var v = input.value;
|
||||
|
||||
// Server-rendered tools go through the job queue like uploads.
|
||||
if (op === 'qr_generate') {
|
||||
runQrJob(v);
|
||||
return;
|
||||
}
|
||||
|
||||
switch (op) {
|
||||
case 'hash_text': {
|
||||
Promise.all(['SHA-256', 'SHA-512', 'SHA-1'].map(function (alg) {
|
||||
return crypto.subtle.digest(alg, new TextEncoder().encode(v)).then(function (buf) {
|
||||
return [alg, Array.from(new Uint8Array(buf)).map(function (b) { return b.toString(16).padStart(2, '0'); }).join('')];
|
||||
});
|
||||
})).then(function (pairs) {
|
||||
var md5 = sparklessMd5(v);
|
||||
render(pairs.map(function (p) { return p[0] + '\n' + p[1]; }).join('\n\n') + '\n\nMD5\n' + md5);
|
||||
});
|
||||
break;
|
||||
}
|
||||
case 'uuid_gen': {
|
||||
var lines = [];
|
||||
for (var i = 0; i < 10; i++) lines.push(crypto.randomUUID());
|
||||
render(lines.join('\n'));
|
||||
break;
|
||||
}
|
||||
case 'json_format': {
|
||||
try {
|
||||
var obj = JSON.parse(v);
|
||||
render(JSON.stringify(obj, null, 2));
|
||||
} catch (err) {
|
||||
render('// JSON error: ' + err.message + '\n\n' + String(err).split('\n')[1] || '');
|
||||
}
|
||||
break;
|
||||
}
|
||||
case 'url_encode':
|
||||
try { render(encodeURIComponent(v)); } catch (e) { render(''); }
|
||||
break;
|
||||
case 'url_decode':
|
||||
try { render(decodeURIComponent(v.replace(/\+/g, ' '))); } catch (err) { showErrorBox('Invalid percent-encoding.'); }
|
||||
break;
|
||||
case 'timestamp_convert': {
|
||||
var n = Number(v.trim());
|
||||
var ms = !isNaN(n) && String(Math.trunc(n)).length <= 13 ? n : Date.parse(v);
|
||||
if (isNaN(ms)) { showErrorBox('Could not parse that timestamp.'); break; }
|
||||
var d = new Date(ms < 1e12 ? ms * 1000 : ms);
|
||||
render(
|
||||
'ISO 8601: ' + d.toISOString() + '\nUTC: ' + d.toUTCString() +
|
||||
'\nLocal: ' + d.toLocaleString() + '\nUnix seconds: ' + Math.floor(d.getTime() / 1000)
|
||||
);
|
||||
break;
|
||||
}
|
||||
case 'color_convert': {
|
||||
var hex = v.trim().replace('#', '');
|
||||
if (!/^[0-9a-f]{6}$/i.test(hex)) { showErrorBox('Enter a hex color like #7c3aed'); break; }
|
||||
var r = parseInt(hex.slice(0, 2), 16), g = parseInt(hex.slice(2, 4), 16), b = parseInt(hex.slice(4, 6), 16);
|
||||
var hsl = rgbToHsl(r, g, b);
|
||||
render('HEX: #' + hex.toUpperCase() + '\nRGB: rgb(' + r + ', ' + g + ', ' + b + ')\nHSL: hsl(' + hsl[0] + ', ' + hsl[1] + '%, ' + hsl[2] + '%)');
|
||||
break;
|
||||
}
|
||||
default:
|
||||
render('This tool runs in your browser. Output appears here.');
|
||||
}
|
||||
});
|
||||
|
||||
function showErrorBox(msg) {
|
||||
out.innerHTML = '<p class="notice error">' + msg + '</p>';
|
||||
out.classList.add('show');
|
||||
}
|
||||
|
||||
function rgbToHsl(r, g, b) {
|
||||
r /= 255; g /= 255; b /= 255;
|
||||
var max = Math.max(r, g, b), min = Math.min(r, g, b), h = 0, s = 0, l = (max + min) / 2;
|
||||
if (max !== min) {
|
||||
var dd = max - min;
|
||||
s = l > 0.5 ? dd / (2 - max - min) : dd / (max + min);
|
||||
h = max === r ? ((g - b) / dd + (g < b ? 6 : 0)) : max === g ? (b - r) / dd + 2 : (r - g) / dd + 4;
|
||||
h *= 60;
|
||||
}
|
||||
return [Math.round(h), Math.round(s * 100), Math.round(l * 100)];
|
||||
}
|
||||
|
||||
/* compact MD5 implementation (public-domain algorithm, RFC 1321) */
|
||||
function sparklessMd5(str) {
|
||||
function rl(n, c) { return (n << c) | (n >>> (32 - c)); }
|
||||
function add(a, b) { return (((a >> 16) + (b >> 16) + (((a & 65535) + (b & 65535)) >> 16)) << 16) | (((a & 65535) + (b & 65535)) & 65535); }
|
||||
function ff(a, b, c, d, x, s, t) { return add(rl(add(add(a, (b & c) | (~b & d)), add(x, t)), s), b); }
|
||||
function gg(a, b, c, d, x, s, t) { return add(rl(add(add(a, (b & d) | (c & ~d)), add(x, t)), s), b); }
|
||||
function hh(a, b, c, d, x, s, t) { return add(rl(add(add(a, b ^ c ^ d), add(x, t)), s), b); }
|
||||
function ii(a, b, c, d, x, s, t) { return add(rl(add(add(a, c ^ (b | ~d)), add(x, t)), s), b); }
|
||||
|
||||
var utf8 = unescape(encodeURIComponent(str));
|
||||
var n = utf8.length;
|
||||
var words = [];
|
||||
for (var i = 0; i < n; i++) words[i >> 2] = (words[i >> 2] || 0) | (utf8.charCodeAt(i) << ((i % 4) << 3));
|
||||
words[n >> 2] = (words[n >> 2] || 0) | (0x80 << ((n % 4) << 3));
|
||||
var len = (((n + 8) >> 6) + 1) * 16;
|
||||
for (i = n + 8; i < len; i++) words[i] = words[i] || 0;
|
||||
words[len - 2] = n * 8;
|
||||
|
||||
var a = 1732584193, b = -271733879, c = -1732584194, d = 271733878;
|
||||
for (i = 0; i < len; i += 16) {
|
||||
var oa = a, ob = b, oc = c, od = d;
|
||||
a=ff(a,b,c,d,words[i],7,-680876936); d=ff(d,a,b,c,words[i+1],12,-389564586); c=ff(c,d,a,b,words[i+2],17,606105819); b=ff(b,c,d,a,words[i+3],22,-1044525330);
|
||||
a=ff(a,b,c,d,words[i+4],7,-176418897); d=ff(d,a,b,c,words[i+5],12,1200080426); c=ff(c,d,a,b,words[i+6],17,-1473231341); b=ff(b,c,d,a,words[i+7],22,-45705983);
|
||||
a=ff(a,b,c,d,words[i+8],7,1770035416); d=ff(d,a,b,c,words[i+9],12,-1958414417); c=ff(c,d,a,b,words[i+10],17,-42063); b=ff(b,c,d,a,words[i+11],22,-1990404162);
|
||||
a=ff(a,b,c,d,words[i+12],7,1804603682); d=ff(d,a,b,c,words[i+13],12,-40341101); c=ff(c,d,a,b,words[i+14],17,-1502002290); b=ff(b,c,d,a,words[i+15],22,1236535329);
|
||||
a=gg(a,b,c,d,words[i+1],5,-165796510); d=gg(d,a,b,c,words[i+6],9,-1069501632); c=gg(c,d,a,b,words[i+11],14,643717713); b=gg(b,c,d,a,words[i],20,-373897302);
|
||||
a=gg(a,b,c,d,words[i+5],5,-701558691); d=gg(d,a,b,c,words[i+10],9,38016083); c=gg(c,d,a,b,words[i+15],14,-660478335); b=gg(b,c,d,a,words[i+4],20,-405537848);
|
||||
a=gg(a,b,c,d,words[i+9],5,568446438); d=gg(d,a,b,c,words[i+14],9,-1019803690); c=gg(c,d,a,b,words[i+3],14,-187363961); b=gg(b,c,d,a,words[i+8],20,1163531501);
|
||||
a=gg(a,b,c,d,words[i+13],5,-1444681467); d=gg(d,a,b,c,words[i+2],9,-51403784); c=gg(c,d,a,b,words[i+7],14,1735328473); b=gg(b,c,d,a,words[i+12],20,-1926607734);
|
||||
a=hh(a,b,c,d,words[i+5],4,-378558); d=hh(d,a,b,c,words[i+8],11,-2022574463); c=hh(c,d,a,b,words[i+11],16,1839030562); b=hh(b,c,d,a,words[i+14],23,-35309556);
|
||||
a=hh(a,b,c,d,words[i+1],4,-1530992060); d=hh(d,a,b,c,words[i+4],11,1272893353); c=hh(c,d,a,b,words[i+7],16,-155497632); b=hh(b,c,d,a,words[i+10],23,-1094730640);
|
||||
a=hh(a,b,c,d,words[i+13],4,681279174); d=hh(d,a,b,c,words[i],11,-358537222); c=hh(c,d,a,b,words[i+3],16,-722521979); b=hh(b,c,d,a,words[i+6],23,76029189);
|
||||
a=hh(a,b,c,d,words[i+9],4,-640364487); d=hh(d,a,b,c,words[i+12],11,-421815835); c=hh(c,d,a,b,words[i+15],16,530742520); b=hh(b,c,d,a,words[i+2],23,-995338651);
|
||||
a=ii(a,b,c,d,words[i],6,-198630844); d=ii(d,a,b,c,words[i+7],10,1126891415); c=ii(c,d,a,b,words[i+14],15,-1416354905); b=ii(b,c,d,a,words[i+5],21,-57434055);
|
||||
a=ii(a,b,c,d,words[i+12],6,1700485571); d=ii(d,a,b,c,words[i+3],10,-1894986606); c=ii(c,d,a,b,words[i+10],15,-1051523); b=ii(b,c,d,a,words[i+1],21,-2054922799);
|
||||
a=ii(a,b,c,d,words[i+8],6,1873313359); d=ii(d,a,b,c,words[i+15],10,-30611744); c=ii(c,d,a,b,words[i+6],15,-1560198380); b=ii(b,c,d,a,words[i+13],21,1309151649);
|
||||
a=ii(a,b,c,d,words[i+4],6,-145523070); d=ii(d,a,b,c,words[i+11],10,-1120210379); c=ii(c,d,a,b,words[i+2],15,718787259); b=ii(b,c,d,a,words[i+9],21,-343485551);
|
||||
a=add(a,oa); b=add(b,ob); c=add(c,oc); d=add(d,od);
|
||||
}
|
||||
function hex(num) {
|
||||
var s = '';
|
||||
for (var j = 0; j < 4; j++) s += ('0' + ((num >> (j * 8)) & 255).toString(16)).slice(-2);
|
||||
return s;
|
||||
}
|
||||
return hex(a) + hex(b) + hex(c) + hex(d);
|
||||
}
|
||||
/* QR generator: submit to the processing queue, poll, show PNG. */
|
||||
function runQrJob(content) {
|
||||
if (!content.trim()) { return; }
|
||||
var sizeSel = document.getElementById('qr-size');
|
||||
var lvlSel = document.getElementById('qr-level');
|
||||
out.innerHTML = '<p class="hint">Generating…</p>';
|
||||
out.classList.add('show');
|
||||
|
||||
fetch('/jobs/start', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
tool: 'qr-code-generator',
|
||||
content: content,
|
||||
size: sizeSel ? parseInt(sizeSel.value, 10) : 300,
|
||||
level: lvlSel ? lvlSel.value : 'M'
|
||||
})
|
||||
}).then(function (r) { return r.json(); }).then(function (data) {
|
||||
if (!data.ok) { throw new Error(data.error || 'Request failed'); }
|
||||
return pollJob(data.job_id);
|
||||
}).then(function (job) {
|
||||
if (job.status !== 'completed') { throw new Error(job.error || 'Generation failed'); }
|
||||
out.innerHTML = '';
|
||||
var img = document.createElement('img');
|
||||
img.src = '/preview/' + job.id + '.png';
|
||||
img.alt = 'QR code';
|
||||
img.width = 280; img.height = 280;
|
||||
out.appendChild(img);
|
||||
var dl = document.createElement('a');
|
||||
dl.className = 'btn-primary';
|
||||
dl.style.cssText = 'display:inline-block;margin-top:.8rem;padding:.6rem 1.4rem;font-size:.92rem;text-decoration:none';
|
||||
dl.href = '/download/' + job.id;
|
||||
dl.textContent = 'Download PNG';
|
||||
out.appendChild(dl);
|
||||
}).catch(function (err) {
|
||||
out.innerHTML = '<p class="notice error"></p>';
|
||||
out.querySelector('.notice').textContent = err.message;
|
||||
});
|
||||
}
|
||||
|
||||
function pollJob(id) {
|
||||
return fetch('/api/jobs/' + id).then(function (r) { return r.json(); }).then(function (d) {
|
||||
if (d.status === 'queued' || d.status === 'processing') {
|
||||
return new Promise(function (resolve) { setTimeout(resolve, 700); }).then(function () { return pollJob(id); });
|
||||
}
|
||||
return d;
|
||||
});
|
||||
}
|
||||
})();
|
||||
@@ -0,0 +1,194 @@
|
||||
/* Upload-tool flow: dropzone → upload → job → poll → download. */
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
var panel = document.getElementById('tool-panel');
|
||||
if (!panel) return;
|
||||
var slug = panel.dataset.tool;
|
||||
|
||||
var form = document.getElementById('tool-form');
|
||||
var zone = document.getElementById('dropzone');
|
||||
var fileInput = document.getElementById('file-input');
|
||||
var chip = document.getElementById('file-chip');
|
||||
var chipName = document.getElementById('chip-name');
|
||||
var chipSize = document.getElementById('chip-size');
|
||||
var chipRemove = document.getElementById('chip-remove');
|
||||
var submitBtn = document.getElementById('convert-btn');
|
||||
var statusFlow = document.getElementById('status-flow');
|
||||
var progressFill = document.getElementById('progress-fill');
|
||||
var resultPanel = document.getElementById('result-panel');
|
||||
var errorBox = document.getElementById('error-box');
|
||||
|
||||
var uploadedFile = null;
|
||||
var pollTimer = null;
|
||||
var currentJobId = null;
|
||||
|
||||
function fmtSize(bytes) {
|
||||
var units = ['B', 'KB', 'MB', 'GB'], i = 0, n = bytes;
|
||||
while (n >= 1024 && i < units.length - 1) { n /= 1024; i++; }
|
||||
return (Math.round(n * 10) / 10) + ' ' + units[i];
|
||||
}
|
||||
|
||||
function showError(msg) {
|
||||
errorBox.textContent = msg;
|
||||
errorBox.hidden = false;
|
||||
track('tool_failure', {});
|
||||
}
|
||||
|
||||
function hideError() { errorBox.hidden = true; }
|
||||
|
||||
function track(name, extra) {
|
||||
try {
|
||||
navigator.sendBeacon &&
|
||||
navigator.sendBeacon('/api/events', new Blob([JSON.stringify(Object.assign({ name: name, tool: slug }, extra))], { type: 'application/json' }));
|
||||
} catch (e) {}
|
||||
}
|
||||
|
||||
function setStage(stage, progress) {
|
||||
if (!statusFlow) return;
|
||||
statusFlow.hidden = false;
|
||||
document.querySelectorAll('.stages li').forEach(function (li) {
|
||||
li.classList.toggle('done', li.dataset.stage !== stage);
|
||||
li.classList.toggle('active', li.dataset.stage === stage);
|
||||
});
|
||||
if (typeof progress === 'number') progressFill.style.width = Math.max(6, progress) + '%';
|
||||
}
|
||||
|
||||
function acceptFile(file) {
|
||||
if (!file) return;
|
||||
hideError();
|
||||
chipName.textContent = file.name;
|
||||
chipSize.textContent = fmtSize(file.size);
|
||||
chip.hidden = false;
|
||||
submitBtn.disabled = false;
|
||||
}
|
||||
|
||||
// ---- dropzone interactions ----
|
||||
['dragover', 'dragenter'].forEach(function (ev) {
|
||||
zone.addEventListener(ev, function (e) { e.preventDefault(); zone.classList.add('dragover'); });
|
||||
});
|
||||
['dragleave', 'drop'].forEach(function (ev) {
|
||||
zone.addEventListener(ev, function (e) { e.preventDefault(); zone.classList.remove('dragover'); });
|
||||
});
|
||||
zone.addEventListener('drop', function (e) {
|
||||
fileInput.files = e.dataTransfer.files;
|
||||
acceptFile(fileInput.files[0]);
|
||||
});
|
||||
zone.addEventListener('click', function () { fileInput.click(); });
|
||||
zone.addEventListener('keydown', function (e) { if (e.key === 'Enter' || e.key === ' ') fileInput.click(); });
|
||||
fileInput.addEventListener('change', function () { acceptFile(fileInput.files[0]); });
|
||||
chipRemove.addEventListener('click', function () {
|
||||
fileInput.value = '';
|
||||
chip.hidden = true;
|
||||
submitBtn.disabled = true;
|
||||
});
|
||||
|
||||
// ---- submit → upload → start job ----
|
||||
form.addEventListener('submit', function (e) {
|
||||
e.preventDefault();
|
||||
if (!fileInput.files.length || !submitBtn.disabled === false) {
|
||||
if (!fileInput.files.length) return;
|
||||
}
|
||||
submitBtn.disabled = true;
|
||||
hideError();
|
||||
|
||||
var fd = new FormData();
|
||||
fd.append('tool', slug);
|
||||
fd.append('file', fileInput.files[0]);
|
||||
|
||||
setStage('preparing', 4);
|
||||
|
||||
fetch('/upload', { method: 'POST', body: fd })
|
||||
.then(function (r) { return r.json().then(function (j) { return { ok: r.ok, body: j }; }); })
|
||||
.then(function (res) {
|
||||
if (!res.ok) throw new Error(res.body.error || 'Upload failed.');
|
||||
uploadedFile = res.body.file;
|
||||
return startJob(res.body);
|
||||
})
|
||||
.catch(function (err) {
|
||||
showError(err.message || 'Upload failed. Please check the file and try again.');
|
||||
submitBtn.disabled = false;
|
||||
});
|
||||
});
|
||||
|
||||
function opt(id) {
|
||||
var el = document.getElementById(id);
|
||||
return el ? el.value : undefined;
|
||||
}
|
||||
|
||||
function startJob(uploadInfo) {
|
||||
var params = {};
|
||||
['format', 'bitrate', 'quality', 'width', 'height', 'start', 'end',
|
||||
'x', 'y', 'crop_width', 'crop_height', 'degrees', 'direction',
|
||||
'factor', 'fps', 'gain_db', 'level', 'preset', 'pages'].forEach(function (k) {
|
||||
var v = opt('opt-' + k);
|
||||
if (v !== undefined && v !== '') params[k] = isNaN(v) || v === '' ? v : Number(v);
|
||||
});
|
||||
|
||||
// map option ids to API param names where they differ
|
||||
if (params.quality !== undefined) params.quality = Number(params.quality); // level select feeds "level"
|
||||
if (opt('opt-level') !== undefined && opt('opt-level') !== '') { params.level = Number(opt('opt-level')); delete params.quality; }
|
||||
if (params.gain_db !== undefined) params.gain_db = Number(params.gain_db);
|
||||
|
||||
var fd = new FormData();
|
||||
fd.append('tool', slug);
|
||||
Object.keys(params).forEach(function (k) { fd.append(k, params[k]); });
|
||||
|
||||
return fetch('/jobs/start', { method: 'POST', body: fd })
|
||||
.then(function (r) { return r.json(); })
|
||||
.then(function (data) {
|
||||
if (!data.ok) throw new Error(data.error || 'Could not start processing.');
|
||||
currentJobId = data.job_id;
|
||||
track('conversion_format', { format: params.format || (document.getElementById('opt-format') || {}).value || '' });
|
||||
poll();
|
||||
});
|
||||
}
|
||||
|
||||
function poll() {
|
||||
if (!currentJobId) return;
|
||||
fetch('/api/jobs/' + currentJobId)
|
||||
.then(function (r) { return r.json(); })
|
||||
.then(function (data) {
|
||||
if (!data.ok) throw new Error('lost');
|
||||
var stageMap = { preparing: 'preparing', fetching: 'processing', processing: 'processing', converting: 'converting' };
|
||||
if (data.status === 'completed') {
|
||||
finish(data);
|
||||
return;
|
||||
}
|
||||
if (data.status === 'failed') {
|
||||
showError(data.message || 'Processing failed. Please try again.');
|
||||
submitBtn.disabled = false;
|
||||
return;
|
||||
}
|
||||
setStage(stageMap[data.stage] || 'processing', data.progress);
|
||||
pollTimer = setTimeout(poll, 1500);
|
||||
})
|
||||
.catch(function () { pollTimer = setTimeout(poll, 3000); });
|
||||
}
|
||||
|
||||
function finish(data) {
|
||||
setStage('complete', 100);
|
||||
clearTimeout(pollTimer);
|
||||
var ext = (data.output_name || '').split('.').pop() || 'file';
|
||||
var isMedia = /^(jpg|jpeg|png|webp|gif|mp4|webm|mp3|wav|m4a|pdf)$/.test(ext);
|
||||
|
||||
resultPanel.innerHTML =
|
||||
'<div class="result-meta">' +
|
||||
'<span class="badge">Done</span>' +
|
||||
'<strong>' + escapeHtml(data.output_name || 'result.' + ext) + '</strong>' +
|
||||
'<span class="hint">' + fmtSize(data.output_size || 0) + '</span>' +
|
||||
'<a class="btn-primary" style="text-decoration:none;padding:.55rem 1.3rem;font-size:.95rem" href="' + data.download_url + '" download>Download</a>' +
|
||||
'</div>' +
|
||||
(isMedia ? '<div style="margin-top:.9rem;text-align:center"><img src="' + data.preview_url + '" alt="Result preview" loading="lazy" style="max-height:260px;border-radius:10px"></div>'.replace('<img', ext.match(/^(mp4|webm)$/) ? '<video controls autoplay muted loop><source src="' + data.preview_url + '" type="video/mp4"></video><img style="display:none"' : '<img') : '');
|
||||
|
||||
resultPanel.classList.add('show');
|
||||
submitBtn.disabled = false;
|
||||
track('download', { format: ext });
|
||||
}
|
||||
|
||||
function escapeHtml(s) {
|
||||
var d = document.createElement('div');
|
||||
d.textContent = s;
|
||||
return d.innerHTML;
|
||||
}
|
||||
})();
|
||||
@@ -0,0 +1,98 @@
|
||||
/* URL-tool flow: paste link → instant info → job → poll → download. */
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
var panel = document.getElementById('tool-panel');
|
||||
if (!panel) return;
|
||||
var slug = panel.dataset.tool;
|
||||
|
||||
var form = document.getElementById('tool-form');
|
||||
var urlInput = document.getElementById('url-input');
|
||||
var infoPanel = document.getElementById('info-panel');
|
||||
var statusFlow = document.getElementById('status-flow');
|
||||
var progressFill = document.getElementById('progress-fill');
|
||||
var resultPanel = document.getElementById('result-panel');
|
||||
var errorBox = document.getElementById('error-box');
|
||||
|
||||
var pollTimer = null, currentJobId = null;
|
||||
|
||||
function track(name) {
|
||||
try {
|
||||
navigator.sendBeacon &&
|
||||
navigator.sendBeacon('/api/events', new Blob([JSON.stringify({ name: name, tool: slug })], { type: 'application/json' }));
|
||||
} catch (e) {}
|
||||
}
|
||||
|
||||
function showError(msg) { errorBox.textContent = msg; errorBox.hidden = false; track('tool_failure'); }
|
||||
|
||||
function setStage(stage, progress) {
|
||||
statusFlow.hidden = false;
|
||||
document.querySelectorAll('.stages li').forEach(function (li) {
|
||||
li.classList.toggle('done', li.dataset.stage !== stage);
|
||||
li.classList.toggle('active', li.dataset.stage === stage);
|
||||
});
|
||||
if (typeof progress === 'number') progressFill.style.width = Math.max(6, progress) + '%';
|
||||
}
|
||||
|
||||
form.addEventListener('submit', function (e) {
|
||||
e.preventDefault();
|
||||
hideError();
|
||||
resultPanel.classList.remove('show');
|
||||
|
||||
fetch('/api/jobs', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ tool: slug, url: urlInput.value })
|
||||
})
|
||||
.then(function (r) { return r.json().then(function (j) { return { status: r.status, body: j }; }); })
|
||||
.then(function (res) {
|
||||
if (!res.ok) throw new Error(res.body.message || res.body.error || 'Request failed.');
|
||||
currentJobId = res.body.job_id;
|
||||
setStage('preparing', 8);
|
||||
poll();
|
||||
})
|
||||
.catch(function (err) { showError(err.message || 'Something went wrong. Please try again.'); });
|
||||
});
|
||||
|
||||
function hideError() { errorBox.hidden = true; }
|
||||
|
||||
function poll() {
|
||||
if (!currentJobId) return;
|
||||
fetch('/api/jobs/' + currentJobId)
|
||||
.then(function (r) { return r.json(); })
|
||||
.then(function (data) {
|
||||
if (!data.ok) throw new Error('lost');
|
||||
if (data.status === 'completed') { finish(data); return; }
|
||||
if (data.status === 'failed') { showError(data.message || 'This video could not be processed.'); return; }
|
||||
var stageMap = { preparing: 'preparing', fetching: 'fetching', processing: 'processing', converting: 'converting' };
|
||||
setStage(stageMap[data.stage] || 'processing', data.progress);
|
||||
pollTimer = setTimeout(poll, 1600);
|
||||
})
|
||||
.catch(function () { pollTimer = setTimeout(poll, 3200); });
|
||||
}
|
||||
|
||||
function finish(data) {
|
||||
clearTimeout(pollTimer);
|
||||
setStage('complete', 100);
|
||||
resultPanel.innerHTML =
|
||||
'<div class="result-meta">' +
|
||||
'<span class="badge">Done</span>' +
|
||||
'<strong>' + escapeHtml(data.output_name || 'download') + '</strong>' +
|
||||
'<span>' + humanSize(data.output_size || 0) + '</span>' +
|
||||
'<a class="btn-primary" style="text-decoration:none;padding:.55rem 1.3rem;font-size:.95rem" href="' + data.download_url + '" download>Download</a>' +
|
||||
'</div>';
|
||||
resultPanel.classList.add('show');
|
||||
}
|
||||
|
||||
function humanSize(bytes) {
|
||||
var u = ['B', 'KB', 'MB', 'GB'], i = 0;
|
||||
while (bytes >= 1024 && i < u.length - 1) { bytes /= 1024; i++; }
|
||||
return (Math.round(bytes * 10) / 10) + ' ' + u[i];
|
||||
}
|
||||
|
||||
function escapeHtml(s) {
|
||||
var d = document.createElement('div');
|
||||
d.textContent = s;
|
||||
return d.innerHTML;
|
||||
}
|
||||
})();
|
||||
Reference in New Issue
Block a user