mirror of
https://github.com/MrUnknownDE/medien-dl.git
synced 2026-05-06 05:06:04 +02:00
remove server-sid history
This commit is contained in:
+278
-224
@@ -1,304 +1,358 @@
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const dom = {
|
||||
// Form & Main
|
||||
form: document.getElementById('upload-form'),
|
||||
urlInput: document.getElementById('url'),
|
||||
submitBtn: document.getElementById('submit-button'),
|
||||
platformInput: document.getElementById('input-platform'),
|
||||
|
||||
// Detection UI
|
||||
detectionArea: document.getElementById('detection-area'),
|
||||
detectedText: document.getElementById('detected-text'),
|
||||
detectedIcon: document.getElementById('detected-icon'),
|
||||
urlIcon: document.getElementById('url-icon'),
|
||||
|
||||
// Options
|
||||
optionsContainer: document.getElementById('options-container'),
|
||||
ytOptions: document.getElementById('youtube-options'),
|
||||
codecSection: document.getElementById('codec-options-section'),
|
||||
ytRadios: document.querySelectorAll('input[name="yt_format"]'),
|
||||
mp3Select: document.getElementById('mp3_bitrate'),
|
||||
mp4Select: document.getElementById('mp4_quality'),
|
||||
codecSwitch: document.getElementById('codec-switch'),
|
||||
codecPref: document.getElementById('codec_preference'),
|
||||
|
||||
// Views
|
||||
processView: document.getElementById('process-view'),
|
||||
resultView: document.getElementById('result-view'),
|
||||
formContainer: document.querySelector('.form-container'),
|
||||
|
||||
// Progress & Logs
|
||||
statusMsg: document.getElementById('status-message'),
|
||||
progressBar: document.getElementById('progress-bar'),
|
||||
logContent: document.getElementById('pseudo-log-content'),
|
||||
|
||||
// Result
|
||||
resultUrl: document.getElementById('result-url'),
|
||||
errorMsg: document.getElementById('error-message'),
|
||||
|
||||
// History
|
||||
historyTableBody: document.querySelector('#history-table tbody'),
|
||||
clearHistoryBtn: document.getElementById('clear-history-button')
|
||||
form: document.getElementById('upload-form'),
|
||||
urlInput: document.getElementById('url'),
|
||||
platformInput: document.getElementById('input-platform'),
|
||||
detectionArea: document.getElementById('detection-area'),
|
||||
detectedText: document.getElementById('detected-text'),
|
||||
detectedIcon: document.getElementById('detected-icon'),
|
||||
platformPulse: document.getElementById('platform-pulse'),
|
||||
platformBadge: document.getElementById('platform-badge'),
|
||||
urlIcon: document.getElementById('url-icon'),
|
||||
inputWrapper: document.getElementById('input-wrapper'),
|
||||
ytOptions: document.getElementById('youtube-options'),
|
||||
codecSection: document.getElementById('codec-options-section'),
|
||||
ytRadios: document.querySelectorAll('input[name="yt_format"]'),
|
||||
mp3Select: document.getElementById('mp3_bitrate'),
|
||||
mp4Select: document.getElementById('mp4_quality'),
|
||||
codecSwitch: document.getElementById('codec-switch'),
|
||||
codecPref: document.getElementById('codec_preference'),
|
||||
processView: document.getElementById('process-view'),
|
||||
resultView: document.getElementById('result-view'),
|
||||
formContainer: document.querySelector('.form-container'),
|
||||
statusMsg: document.getElementById('status-message'),
|
||||
progressBar: document.getElementById('progress-bar'),
|
||||
progressPct: document.getElementById('progress-pct'),
|
||||
logContent: document.getElementById('pseudo-log-content'),
|
||||
resultUrl: document.getElementById('result-url'),
|
||||
errorMsg: document.getElementById('error-message'),
|
||||
historyTbody: document.querySelector('#history-table tbody'),
|
||||
clearHistoryBtn:document.getElementById('clear-history-button'),
|
||||
};
|
||||
|
||||
let currentJobId = null;
|
||||
let pollingInterval = null;
|
||||
let pseudoLogInterval = null;
|
||||
let jobId = null;
|
||||
let pollTimer = null;
|
||||
let pseudoTimer = null;
|
||||
let lastLogIndex = 0;
|
||||
let realLogsActive = false;
|
||||
|
||||
const platforms = [
|
||||
{ name: 'SoundCloud', pattern: /soundcloud\.com/, icon: 'fa-soundcloud', color: '#ff5500' },
|
||||
{ name: 'YouTube', pattern: /(youtube\.com|youtu\.be)/, icon: 'fa-youtube', color: '#ff0000' },
|
||||
{ name: 'TikTok', pattern: /tiktok\.com/, icon: 'fa-tiktok', color: '#fe2c55' },
|
||||
{ name: 'Instagram', pattern: /instagram\.com/, icon: 'fa-instagram', color: '#E1306C' },
|
||||
{ name: 'Twitter', pattern: /(twitter\.com|x\.com)/, icon: 'fa-x-twitter', color: '#fff' }
|
||||
// ---- Platform definitions ----
|
||||
const PLATFORMS = [
|
||||
{ name:'SoundCloud', pattern:/soundcloud\.com/, icon:'fa-soundcloud', color:'#ff5500', rgb:'255,85,0' },
|
||||
{ name:'YouTube', pattern:/(youtube\.com|youtu\.be)/,icon:'fa-youtube', color:'#ff0000', rgb:'255,0,0' },
|
||||
{ name:'TikTok', pattern:/tiktok\.com/, icon:'fa-tiktok', color:'#fe2c55', rgb:'254,44,85' },
|
||||
{ name:'Instagram', pattern:/instagram\.com/, icon:'fa-instagram', color:'#E1306C', rgb:'225,48,108' },
|
||||
{ name:'Twitter', pattern:/(twitter\.com|x\.com)/, icon:'fa-x-twitter', color:'#1d9bf0', rgb:'29,155,240' },
|
||||
];
|
||||
|
||||
const pseudoLogs = [
|
||||
"Connecting to media node...",
|
||||
"Handshaking with API...",
|
||||
"Resolving stream URL...",
|
||||
"Allocating buffer...",
|
||||
"Starting download stream...",
|
||||
"Processing data chunks...",
|
||||
"Verifying integrity...",
|
||||
"Optimizing container...",
|
||||
"Finalizing upload..."
|
||||
const PSEUDO_LOGS = [
|
||||
'Connecting to media node...',
|
||||
'Handshaking with API endpoint...',
|
||||
'Resolving stream metadata...',
|
||||
'Allocating download buffer...',
|
||||
'Starting download stream...',
|
||||
'Processing data chunks...',
|
||||
'Verifying file integrity...',
|
||||
'Optimizing audio/video container...',
|
||||
'Preparing upload to storage...',
|
||||
'Syncing with remote bucket...',
|
||||
];
|
||||
|
||||
// ---- Init ----
|
||||
function init() {
|
||||
setupEvents();
|
||||
loadHistory();
|
||||
bindEvents();
|
||||
renderHistory();
|
||||
}
|
||||
|
||||
function setupEvents() {
|
||||
dom.urlInput.addEventListener('input', handleUrlInput);
|
||||
dom.form.addEventListener('submit', handleSubmit);
|
||||
|
||||
dom.ytRadios.forEach(r => r.addEventListener('change', updateYtOptions));
|
||||
if(dom.codecSwitch) {
|
||||
function bindEvents() {
|
||||
dom.urlInput.addEventListener('input', onUrlChange);
|
||||
dom.form.addEventListener('submit', onSubmit);
|
||||
dom.ytRadios.forEach(r => r.addEventListener('change', updateQualitySelect));
|
||||
if (dom.codecSwitch) {
|
||||
dom.codecSwitch.addEventListener('change', e => {
|
||||
dom.codecPref.value = e.target.checked ? 'h264' : 'original';
|
||||
});
|
||||
}
|
||||
|
||||
if(dom.clearHistoryBtn) dom.clearHistoryBtn.addEventListener('click', clearHistory);
|
||||
}
|
||||
|
||||
// --- Detection ---
|
||||
function handleUrlInput() {
|
||||
const url = dom.urlInput.value.trim();
|
||||
const detected = platforms.find(p => p.pattern.test(url));
|
||||
|
||||
if (detected) {
|
||||
dom.platformInput.value = detected.name;
|
||||
dom.detectedText.textContent = detected.name + " detected";
|
||||
dom.detectedIcon.className = `fab ${detected.icon}`;
|
||||
dom.detectionArea.style.opacity = '1';
|
||||
dom.detectionArea.style.transform = 'translateY(0)';
|
||||
|
||||
// Icon in Input
|
||||
dom.urlIcon.className = `fab ${detected.icon}`;
|
||||
dom.urlIcon.style.color = detected.color;
|
||||
|
||||
showOptions(detected.name);
|
||||
} else {
|
||||
if(url.length === 0) {
|
||||
dom.detectionArea.style.opacity = '0';
|
||||
dom.detectionArea.style.transform = 'translateY(-10px)';
|
||||
dom.urlIcon.className = 'fas fa-link';
|
||||
dom.urlIcon.style.color = '';
|
||||
}
|
||||
// Keep options hidden if no match
|
||||
if (dom.clearHistoryBtn) {
|
||||
dom.clearHistoryBtn.addEventListener('click', clearHistory);
|
||||
}
|
||||
}
|
||||
|
||||
function showOptions(platform) {
|
||||
// ---- URL detection ----
|
||||
function onUrlChange() {
|
||||
const val = dom.urlInput.value.trim();
|
||||
const match = PLATFORMS.find(p => p.pattern.test(val));
|
||||
|
||||
if (match) {
|
||||
applyPlatform(match);
|
||||
} else if (!val) {
|
||||
resetPlatform();
|
||||
}
|
||||
}
|
||||
|
||||
function applyPlatform(p) {
|
||||
dom.platformInput.value = p.name;
|
||||
dom.detectedText.textContent = p.name + ' detected';
|
||||
dom.detectedIcon.className = 'fab ' + p.icon;
|
||||
dom.urlIcon.innerHTML = `<i class="fab ${p.icon}"></i>`;
|
||||
dom.urlIcon.style.color = p.color;
|
||||
|
||||
// CSS vars for color theming
|
||||
document.documentElement.style.setProperty('--platform-color', p.color);
|
||||
document.documentElement.style.setProperty('--platform-rgb', p.rgb);
|
||||
|
||||
// Badge colors
|
||||
dom.platformBadge.style.borderColor = `rgba(${p.rgb}, 0.3)`;
|
||||
dom.platformBadge.style.background = `rgba(${p.rgb}, 0.1)`;
|
||||
dom.platformBadge.style.color = p.color;
|
||||
if (dom.platformPulse) {
|
||||
dom.platformPulse.style.background = p.color;
|
||||
dom.platformPulse.style.boxShadow = `0 0 8px ${p.color}`;
|
||||
}
|
||||
|
||||
// Input glow tint
|
||||
dom.inputWrapper.style.setProperty('--platform-glow', `rgba(${p.rgb}, 0.15)`);
|
||||
|
||||
dom.detectionArea.classList.add('visible');
|
||||
showOptions(p.name);
|
||||
}
|
||||
|
||||
function resetPlatform() {
|
||||
document.documentElement.style.setProperty('--platform-color', '#8b5cf6');
|
||||
dom.urlIcon.innerHTML = '<i class="fas fa-link"></i>';
|
||||
dom.urlIcon.style.color = '';
|
||||
dom.detectionArea.classList.remove('visible');
|
||||
}
|
||||
|
||||
function showOptions(name) {
|
||||
dom.ytOptions.classList.add('d-none');
|
||||
dom.codecSection.classList.add('d-none');
|
||||
|
||||
if (platform === 'YouTube') {
|
||||
if (name === 'YouTube') {
|
||||
dom.ytOptions.classList.remove('d-none');
|
||||
updateYtOptions();
|
||||
} else if (['TikTok', 'Instagram', 'Twitter'].includes(platform)) {
|
||||
updateQualitySelect();
|
||||
} else if (['TikTok','Instagram','Twitter'].includes(name)) {
|
||||
dom.codecSection.classList.remove('d-none');
|
||||
}
|
||||
}
|
||||
|
||||
function updateYtOptions() {
|
||||
const format = document.querySelector('input[name="yt_format"]:checked').value;
|
||||
if (format === 'mp3') {
|
||||
dom.mp3Select.classList.remove('d-none');
|
||||
dom.mp4Select.classList.add('d-none');
|
||||
} else {
|
||||
dom.mp3Select.classList.add('d-none');
|
||||
dom.mp4Select.classList.remove('d-none');
|
||||
}
|
||||
function updateQualitySelect() {
|
||||
const fmt = document.querySelector('input[name="yt_format"]:checked')?.value;
|
||||
dom.mp3Select.classList.toggle('d-none', fmt !== 'mp3');
|
||||
dom.mp4Select.classList.toggle('d-none', fmt === 'mp3');
|
||||
}
|
||||
|
||||
// --- Processing ---
|
||||
async function handleSubmit(e) {
|
||||
// ---- Submit ----
|
||||
async function onSubmit(e) {
|
||||
e.preventDefault();
|
||||
|
||||
// UI Switch
|
||||
|
||||
dom.formContainer.classList.add('d-none');
|
||||
dom.processView.classList.remove('d-none');
|
||||
dom.resultView.classList.add('d-none');
|
||||
dom.errorMsg.classList.add('d-none');
|
||||
|
||||
dom.logContent.innerHTML = '';
|
||||
|
||||
lastLogIndex = 0;
|
||||
realLogsActive = false;
|
||||
setProgress(0);
|
||||
dom.statusMsg.textContent = 'INITIALIZING...';
|
||||
|
||||
startPseudoLogs();
|
||||
|
||||
const formData = new FormData(dom.form);
|
||||
try {
|
||||
const res = await fetch('/start_download', { method: 'POST', body: formData });
|
||||
const res = await fetch('/start_download', { method:'POST', body: new FormData(dom.form) });
|
||||
const data = await res.json();
|
||||
|
||||
if (res.ok && data.job_id) {
|
||||
currentJobId = data.job_id;
|
||||
jobId = data.job_id;
|
||||
startPolling();
|
||||
} else {
|
||||
throw new Error(data.error || "Start failed");
|
||||
throw new Error(data.error || 'Failed to start job');
|
||||
}
|
||||
} catch (err) {
|
||||
showError(err.message);
|
||||
}
|
||||
}
|
||||
|
||||
// ---- Polling ----
|
||||
function startPolling() {
|
||||
pollingInterval = setInterval(async () => {
|
||||
pollTimer = setInterval(async () => {
|
||||
if (!jobId) return;
|
||||
try {
|
||||
if(!currentJobId) return;
|
||||
const res = await fetch(`/status?job_id=${currentJobId}`);
|
||||
if (res.status === 404) { showError("Job not found"); return; }
|
||||
|
||||
const status = await res.json();
|
||||
|
||||
// Update UI
|
||||
dom.progressBar.style.width = (status.progress || 0) + "%";
|
||||
if(status.message) dom.statusMsg.textContent = status.message.toUpperCase();
|
||||
const res = await fetch(`/status?job_id=${jobId}`);
|
||||
if (res.status === 404) { showError('Job not found'); return; }
|
||||
const s = await res.json();
|
||||
|
||||
if (status.status === 'completed') {
|
||||
finishJob(status.result_url);
|
||||
} else if (status.status === 'error' || status.error) {
|
||||
showError(status.error || status.message);
|
||||
setProgress(s.progress || 0);
|
||||
if (s.message) dom.statusMsg.textContent = s.message.toUpperCase();
|
||||
|
||||
// Show real server logs as they arrive
|
||||
if (Array.isArray(s.logs) && s.logs.length > lastLogIndex) {
|
||||
if (!realLogsActive) {
|
||||
realLogsActive = true;
|
||||
clearInterval(pseudoTimer);
|
||||
removeCursor();
|
||||
}
|
||||
s.logs.slice(lastLogIndex).forEach(line => addLine(line, 'is-real'));
|
||||
lastLogIndex = s.logs.length;
|
||||
}
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
|
||||
if (s.status === 'completed') {
|
||||
onJobDone(s.result_url);
|
||||
} else if (s.status === 'error' || s.error) {
|
||||
showError(s.error || s.message);
|
||||
}
|
||||
} catch {
|
||||
// network blip — keep polling
|
||||
}
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
function finishJob(url) {
|
||||
clearInterval(pollingInterval);
|
||||
clearInterval(pseudoLogInterval);
|
||||
|
||||
dom.processView.classList.add('d-none');
|
||||
dom.resultView.classList.remove('d-none');
|
||||
dom.resultUrl.href = url;
|
||||
|
||||
saveHistory(url);
|
||||
// ---- Terminal ----
|
||||
function addLine(text, cls = '') {
|
||||
removeCursor();
|
||||
|
||||
const el = document.createElement('div');
|
||||
el.className = 'terminal-line' + (cls ? ' ' + cls : '');
|
||||
el.textContent = (cls === 'is-real' ? '» ' : '> ') + text;
|
||||
|
||||
const cur = document.createElement('span');
|
||||
cur.className = 'term-cursor';
|
||||
el.appendChild(cur);
|
||||
|
||||
dom.logContent.appendChild(el);
|
||||
dom.logContent.scrollTop = dom.logContent.scrollHeight;
|
||||
}
|
||||
|
||||
function removeCursor() {
|
||||
dom.logContent.querySelectorAll('.term-cursor').forEach(c => c.remove());
|
||||
}
|
||||
|
||||
function startPseudoLogs() {
|
||||
let idx = 0;
|
||||
addLine(PSEUDO_LOGS[idx++]);
|
||||
pseudoTimer = setInterval(() => {
|
||||
if (realLogsActive) { clearInterval(pseudoTimer); return; }
|
||||
if (idx < PSEUDO_LOGS.length) addLine(PSEUDO_LOGS[idx++]);
|
||||
}, 2400);
|
||||
}
|
||||
|
||||
// ---- Progress ----
|
||||
function setProgress(val) {
|
||||
const pct = Math.min(100, Math.max(0, Math.round(val)));
|
||||
dom.progressBar.style.width = pct + '%';
|
||||
if (dom.progressPct) dom.progressPct.textContent = pct + '%';
|
||||
}
|
||||
|
||||
// ---- Finish ----
|
||||
function onJobDone(url) {
|
||||
clearInterval(pollTimer);
|
||||
clearInterval(pseudoTimer);
|
||||
removeCursor();
|
||||
|
||||
const done = document.createElement('div');
|
||||
done.className = 'terminal-line is-success';
|
||||
done.textContent = '✓ Upload complete. Your file is ready.';
|
||||
dom.logContent.appendChild(done);
|
||||
dom.logContent.scrollTop = dom.logContent.scrollHeight;
|
||||
|
||||
setProgress(100);
|
||||
|
||||
setTimeout(() => {
|
||||
dom.processView.classList.add('d-none');
|
||||
dom.resultView.classList.remove('d-none');
|
||||
if (url) dom.resultUrl.href = url;
|
||||
}, 700);
|
||||
|
||||
persistHistory(url);
|
||||
}
|
||||
|
||||
// ---- Error ----
|
||||
function showError(msg) {
|
||||
clearInterval(pollingInterval);
|
||||
clearInterval(pseudoLogInterval);
|
||||
|
||||
clearInterval(pollTimer);
|
||||
clearInterval(pseudoTimer);
|
||||
dom.processView.classList.add('d-none');
|
||||
dom.formContainer.classList.remove('d-none'); // Back to form
|
||||
dom.formContainer.classList.remove('d-none');
|
||||
dom.errorMsg.textContent = msg;
|
||||
dom.errorMsg.classList.remove('d-none');
|
||||
}
|
||||
|
||||
// --- Pseudo Logs (CLI Effect) ---
|
||||
function startPseudoLogs() {
|
||||
dom.logContent.innerHTML = '';
|
||||
let index = 0;
|
||||
|
||||
function addLine() {
|
||||
if (index >= pseudoLogs.length) index = 0; // Loop or stop
|
||||
const div = document.createElement('div');
|
||||
div.className = 'terminal-line';
|
||||
div.textContent = "> " + pseudoLogs[index];
|
||||
dom.logContent.appendChild(div);
|
||||
|
||||
// Auto scroll
|
||||
const win = document.querySelector('.terminal-window .terminal-body');
|
||||
win.scrollTop = win.scrollHeight;
|
||||
|
||||
index++;
|
||||
}
|
||||
|
||||
addLine(); // First one immediate
|
||||
pseudoLogInterval = setInterval(addLine, 2000);
|
||||
// ---- LocalStorage History ----
|
||||
const LS_KEY = 'mdl_history';
|
||||
const TTL = 7 * 24 * 60 * 60 * 1000; // 7 days
|
||||
|
||||
function persistHistory(resultUrl) {
|
||||
const entry = {
|
||||
url: resultUrl,
|
||||
source: dom.urlInput.value.trim(),
|
||||
platform: dom.platformInput.value,
|
||||
title: dom.platformInput.value + ' Download',
|
||||
ts: Date.now(),
|
||||
};
|
||||
let data = readHistory();
|
||||
data.unshift(entry);
|
||||
if (data.length > 30) data.length = 30;
|
||||
localStorage.setItem(LS_KEY, JSON.stringify(data));
|
||||
renderHistory();
|
||||
}
|
||||
|
||||
// --- Local History ---
|
||||
function loadHistory() {
|
||||
const raw = localStorage.getItem('mdl_history');
|
||||
if(!raw) {
|
||||
dom.historyTableBody.innerHTML = '<tr><td colspan="5" class="text-center text-white-50 py-3">No history available</td></tr>';
|
||||
function readHistory() {
|
||||
try {
|
||||
const raw = localStorage.getItem(LS_KEY);
|
||||
if (!raw) return [];
|
||||
const data = JSON.parse(raw).filter(i => Date.now() - i.ts < TTL);
|
||||
localStorage.setItem(LS_KEY, JSON.stringify(data));
|
||||
return data;
|
||||
} catch { return []; }
|
||||
}
|
||||
|
||||
function renderHistory() {
|
||||
const data = readHistory();
|
||||
if (!dom.historyTbody) return;
|
||||
|
||||
if (!data.length) {
|
||||
dom.historyTbody.innerHTML =
|
||||
'<tr><td colspan="5" style="text-align:center;padding:2rem;color:rgba(255,255,255,0.25);font-size:0.82rem">No downloads yet</td></tr>';
|
||||
return;
|
||||
}
|
||||
|
||||
let data = JSON.parse(raw);
|
||||
// Clean expired (>7 days)
|
||||
const now = Date.now();
|
||||
data = data.filter(i => (now - i.ts) < (7 * 24 * 60 * 60 * 1000));
|
||||
localStorage.setItem('mdl_history', JSON.stringify(data));
|
||||
|
||||
renderHistory(data);
|
||||
}
|
||||
|
||||
function renderHistory(data) {
|
||||
dom.historyTableBody.innerHTML = '';
|
||||
data.forEach(item => {
|
||||
const date = new Date(item.ts);
|
||||
const time = date.toLocaleTimeString([], {hour:'2-digit', minute:'2-digit'});
|
||||
|
||||
dom.historyTbody.innerHTML = '';
|
||||
data.forEach((item, i) => {
|
||||
const d = new Date(item.ts);
|
||||
const date = d.toLocaleDateString([], { month:'short', day:'numeric' });
|
||||
const time = d.toLocaleTimeString([], { hour:'2-digit', minute:'2-digit' });
|
||||
|
||||
const tr = document.createElement('tr');
|
||||
tr.className = 'history-row-enter';
|
||||
tr.style.animationDelay = (i * 0.04) + 's';
|
||||
tr.innerHTML = `
|
||||
<td class="ps-4 text-white-50 small font-monospace">${time}</td>
|
||||
<td class="text-center text-primary-light small">${item.platform}</td>
|
||||
<td class="text-truncate" style="max-width: 150px;">${item.title || 'Unknown'}</td>
|
||||
<td class="text-center">
|
||||
<a href="${item.source}" target="_blank" class="text-white-50" title="Open source: ${item.source}">
|
||||
<i class="fas fa-link"></i>
|
||||
</a>
|
||||
<td class="ps-4" style="font-family:var(--mono);font-size:0.72rem;color:rgba(255,255,255,0.35);white-space:nowrap">${date} ${time}</td>
|
||||
<td><span style="background:rgba(139,92,246,0.12);border:1px solid rgba(139,92,246,0.2);color:var(--accent);padding:2px 10px;border-radius:100px;font-size:0.7rem">${escHtml(item.platform)}</span></td>
|
||||
<td style="max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">${escHtml(item.title || 'Download')}</td>
|
||||
<td style="text-align:center">
|
||||
${item.source
|
||||
? `<a href="${escHtml(item.source)}" target="_blank" rel="noopener" title="${escHtml(item.source)}"><i class="fas fa-arrow-up-right-from-square fa-sm"></i></a>`
|
||||
: '<span style="color:rgba(255,255,255,0.2)">—</span>'}
|
||||
</td>
|
||||
<td class="text-end pe-4">
|
||||
<a href="${item.url}" target="_blank" class="text-primary-light" title="Download">
|
||||
<i class="fas fa-download"></i>
|
||||
<a href="${escHtml(item.url)}" target="_blank" rel="noopener"
|
||||
style="background:rgba(139,92,246,0.12);border:1px solid rgba(139,92,246,0.2);color:var(--accent);padding:3px 12px;border-radius:100px;font-size:0.72rem;text-decoration:none;white-space:nowrap">
|
||||
<i class="fas fa-download me-1"></i>Get
|
||||
</a>
|
||||
</td>
|
||||
`;
|
||||
dom.historyTableBody.appendChild(tr);
|
||||
</td>`;
|
||||
dom.historyTbody.appendChild(tr);
|
||||
});
|
||||
}
|
||||
|
||||
function saveHistory(resultUrl) {
|
||||
const pf = dom.platformInput.value;
|
||||
const sourceUrl = dom.urlInput.value; // Capture source URL
|
||||
|
||||
const entry = {
|
||||
url: resultUrl,
|
||||
source: sourceUrl,
|
||||
platform: pf,
|
||||
title: pf + " Download",
|
||||
ts: Date.now()
|
||||
};
|
||||
|
||||
let data = JSON.parse(localStorage.getItem('mdl_history') || '[]');
|
||||
data.unshift(entry);
|
||||
if(data.length > 20) data.pop(); // Max 20 entries
|
||||
localStorage.setItem('mdl_history', JSON.stringify(data));
|
||||
loadHistory();
|
||||
function clearHistory() {
|
||||
if (!confirm('Clear all download history?')) return;
|
||||
localStorage.removeItem(LS_KEY);
|
||||
renderHistory();
|
||||
}
|
||||
|
||||
function clearHistory() {
|
||||
if(confirm("Really clear history?")) {
|
||||
localStorage.removeItem('mdl_history');
|
||||
loadHistory();
|
||||
}
|
||||
function escHtml(s) {
|
||||
return String(s)
|
||||
.replace(/&/g,'&').replace(/</g,'<')
|
||||
.replace(/>/g,'>').replace(/"/g,'"');
|
||||
}
|
||||
|
||||
init();
|
||||
});
|
||||
});
|
||||
|
||||
+707
-198
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user