update url uploads

2026-07-12 18:46:09 +02:00
parent 06ced46db1
commit 6adfb55581
4 changed files with 589 additions and 17 deletions
--- a/public/s/css/upload.css
+++ b/public/s/css/upload.css
@@ -1480,3 +1480,229 @@
    to   { opacity: 1; transform: scale(1) translateY(0); }
 }

+
+/* =============================================
+   URL Upload Tracker — single persistent panel
+   ============================================= */
+
+#url-upload-tracker {
+    position: fixed;
+    bottom: 20px;
+    left: 20px;
+    z-index: 9998;
+    width: 320px;
+    background: var(--nav-bg, #1c1c1c);
+    border: 1px solid rgba(var(--accent-rgb, 120,120,120), 0.15);
+    overflow: hidden;
+    font-size: 0.8rem;
+    opacity: 0;
+    transform: translateY(10px);
+    transition: opacity 0.28s ease, transform 0.28s ease;
+    pointer-events: none;
+}
+
+#url-upload-tracker.uut-visible {
+    opacity: 1;
+    transform: translateY(0);
+    pointer-events: all;
+}
+
+/* ── Header ──────────────────────────────────────── */
+.uut-header {
+    display: flex;
+    align-items: center;
+    gap: 7px;
+    padding: 8px 10px 8px 12px;
+    background: rgba(var(--accent-rgb, 120,120,120), 0.07);
+    border-bottom: 1px solid rgba(var(--accent-rgb, 120,120,120), 0.1);
+    user-select: none;
+}
+
+.uut-header > .fa-solid {
+    color: var(--accent);
+    font-size: 11px;
+    opacity: 0.75;
+    flex-shrink: 0;
+}
+
+.uut-title {
+    flex: 1;
+    font-size: 0.74rem;
+    font-weight: 600;
+    color: var(--white, #fff);
+    letter-spacing: 0.01em;
+}
+
+.uut-badge {
+    background: var(--accent);
+    color: #fff;
+    font-size: 0.62rem;
+    font-weight: 700;
+    min-width: 16px;
+    height: 16px;
+    border-radius: 8px;
+    padding: 0 4px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.uut-actions { display: flex; gap: 2px; }
+
+.uut-btn {
+    background: none;
+    border: none;
+    cursor: pointer;
+    color: var(--white, #fff);
+    opacity: 0.3;
+    padding: 3px 6px;
+    border-radius: 4px;
+    font-size: 12px;
+    line-height: 1;
+    transition: opacity 0.15s, background 0.15s;
+}
+.uut-btn:hover { opacity: 0.8; background: rgba(var(--accent-rgb,120,120,120),0.12); }
+
+/* ── Body (scrollable) ───────────────────────────── */
+.uut-body {
+    max-height: 340px;
+    overflow-y: auto;
+    overflow-x: hidden;
+    scrollbar-width: thin;
+    scrollbar-color: rgba(var(--accent-rgb,120,120,120), 0.25) transparent;
+}
+
+/* ── Active job rows ─────────────────────────────── */
+.uut-job {
+    padding: 8px 12px 6px;
+    border-bottom: 1px solid rgba(var(--accent-rgb,120,120,120), 0.06);
+    transition: opacity 0.3s;
+}
+
+.uut-job--fading { opacity: 0; }
+
+.uut-job-row {
+    display: flex;
+    align-items: flex-start;
+    gap: 8px;
+}
+
+.uut-spinner {
+    width: 11px;
+    height: 11px;
+    flex-shrink: 0;
+    margin-top: 3px;
+    border: 1.5px solid rgba(var(--accent-rgb,120,120,120), 0.18);
+    border-top-color: var(--accent);
+    border-radius: 50%;
+    animation: uutSpin 0.75s linear infinite;
+}
+@keyframes uutSpin { to { transform: rotate(360deg); } }
+
+.uut-job-info { flex: 1; min-width: 0; }
+
+.uut-url {
+    display: block;
+    font-size: 0.72rem;
+    color: var(--white, #fff);
+    opacity: 0.65;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.uut-meta {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    margin-top: 2px;
+}
+
+.uut-stage {
+    font-size: 0.71rem;
+    color: var(--accent);
+    white-space: nowrap;
+}
+
+.uut-speed {
+    font-size: 0.67rem;
+    color: var(--white, #fff);
+    opacity: 0.38;
+    margin-left: auto;
+    white-space: nowrap;
+}
+
+/* Progress bar */
+.uut-bar {
+    height: 2px;
+    background: rgba(var(--accent-rgb,120,120,120), 0.1);
+    border-radius: 2px;
+    overflow: hidden;
+    margin-top: 6px;
+}
+
+.uut-bar-fill {
+    height: 100%;
+    background: var(--accent);
+    border-radius: 2px;
+    transition: width 0.65s ease;
+    background-image: linear-gradient(90deg, var(--accent) 0%, rgba(255,255,255,0.4) 50%, var(--accent) 100%);
+    background-size: 200% 100%;
+    animation: uutShimmer 1.6s linear infinite;
+}
+@keyframes uutShimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
+
+/* ── Divider between active + history ────────────── */
+.uut-divider {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 5px 12px;
+    opacity: 0.22;
+    font-size: 0.62rem;
+    font-weight: 700;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+    color: var(--white, #fff);
+}
+.uut-divider::before,
+.uut-divider::after { content: ''; flex: 1; height: 1px; background: currentColor; }
+
+/* ── History rows ────────────────────────────────── */
+.uut-hist-row {
+    display: flex;
+    align-items: center;
+    gap: 7px;
+    padding: 5px 12px;
+    border-bottom: 1px solid rgba(var(--accent-rgb,120,120,120), 0.05);
+    transition: background 0.15s;
+}
+.uut-hist-row:last-child { border-bottom: none; }
+.uut-hist-row:hover { background: rgba(var(--accent-rgb,120,120,120), 0.05); }
+
+.uut-ok  { color: #51cf66; font-size: 10px; flex-shrink: 0; }
+.uut-err { color: #ff5050; font-size: 10px; flex-shrink: 0; }
+
+.uut-hist-right { margin-left: auto; flex-shrink: 0; }
+
+.uut-link {
+    font-size: 0.69rem;
+    color: var(--accent);
+    text-decoration: none;
+    opacity: 0.8;
+    white-space: nowrap;
+    transition: opacity 0.15s;
+}
+.uut-link:hover { opacity: 1; text-decoration: underline; }
+
+.uut-errtxt {
+    font-size: 0.67rem;
+    color: #ff5050;
+    max-width: 90px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    display: block;
+    opacity: 0.8;
+}
+
--- a/public/s/js/f0ckm.js
+++ b/public/s/js/f0ckm.js
@@ -7200,6 +7200,12 @@ class NotificationSystem {
    // Render the active tab
    this._renderActiveTab();

+    // Notify URL upload tracker widget about completed/failed background uploads
+    const bgUploads = notifications.filter(n => n.type === 'upload_success' || n.type === 'upload_error');
+    if (bgUploads.length > 0) {
+      document.dispatchEvent(new CustomEvent('f0ck:upload_bg_update', { detail: bgUploads }));
+    }
+
    // Live update for History Page
    const historyContainer = document.querySelector('.notifications-list-full');
    if (historyContainer) {
--- a/public/s/js/upload.js
+++ b/public/s/js/upload.js
@@ -7,6 +7,224 @@ window.escapeHtmlUpload = window.escapeHtmlUpload || ((unsafe) => {
        .replace(/'/g, "&#039;");
 });

+// ============================================================
+// URL Upload Tracker — single persistent panel with queue + history
+// ============================================================
+(function () {
+    const POLL_INTERVAL  = 2000;
+    const MAX_HISTORY    = 10;
+    const STORAGE_KEY    = 'f0ck_url_upload_history';
+
+    // active jobs: jobId → { url, percent, stage, speed, eta, resolved, pollTimer }
+    const _active = new Map();
+
+    // history: [{ id, url, type, itemId, error, ts }]  — newest first
+    let _history = (() => {
+        try { return JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]'); } catch { return []; }
+    })();
+
+    let _collapsed = false;
+
+    // ── Panel DOM ─────────────────────────────────────────────────────────────
+    const _$ = id => document.getElementById(id);
+
+    const _ensurePanel = () => {
+        if (_$('url-upload-tracker')) return;
+        const el = document.createElement('div');
+        el.id = 'url-upload-tracker';
+        el.innerHTML = `
+            <div class="uut-header">
+                <i class="fa-solid fa-arrow-up-from-bracket"></i>
+                <span class="uut-title">URL Uploads</span>
+                <span class="uut-badge" id="uut-badge"></span>
+                <div class="uut-actions">
+                    <button class="uut-btn" id="uut-btn-clear" title="Clear history"><i class="fa-solid fa-broom"></i></button>
+                    <button class="uut-btn" id="uut-btn-toggle">−</button>
+                </div>
+            </div>
+            <div class="uut-body" id="uut-body">
+                <div id="uut-active-list"></div>
+                <div class="uut-divider" id="uut-divider"><span>Recent</span></div>
+                <div id="uut-history-list"></div>
+            </div>
+        `;
+        document.body.appendChild(el);
+        _$('uut-btn-toggle').addEventListener('click', () => {
+            _collapsed = !_collapsed;
+            _$('uut-body').style.display   = _collapsed ? 'none' : '';
+            _$('uut-btn-toggle').textContent = _collapsed ? '+' : '−';
+        });
+        _$('uut-btn-clear').addEventListener('click', () => {
+            _history = [];
+            try { localStorage.removeItem(STORAGE_KEY); } catch {}
+            _renderHistory();
+            _sync();
+        });
+    };
+
+    // ── Visibility + badge ────────────────────────────────────────────────────
+    const _sync = () => {
+        _ensurePanel();
+        const panel  = _$('url-upload-tracker');
+        const hasContent = _active.size > 0 || _history.length > 0;
+        panel.classList.toggle('uut-visible', hasContent);
+
+        const badge = _$('uut-badge');
+        if (badge) { badge.textContent = _active.size || ''; badge.style.display = _active.size ? '' : 'none'; }
+
+        const div = _$('uut-divider');
+        if (div) div.style.display = (_active.size > 0 && _history.length > 0) ? '' : 'none';
+
+        const clearBtn = _$('uut-btn-clear');
+        if (clearBtn) clearBtn.style.display = _history.length > 0 ? '' : 'none';
+    };
+
+    // ── Active job row ────────────────────────────────────────────────────────
+    const _renderJob = (jobId) => {
+        _ensurePanel();
+        const job = _active.get(jobId);
+        const list = _$('uut-active-list');
+        if (!list || !job) return;
+
+        let row = list.querySelector(`[data-jid="${CSS.escape(jobId)}"]`);
+        if (!row) {
+            row = document.createElement('div');
+            row.className = 'uut-job';
+            row.dataset.jid = jobId;
+            list.appendChild(row);
+        }
+
+        const pct = Math.min(Math.max(job.percent || 0, 0), 100);
+        const labels = { queued:'Queued', downloading:'Downloading', analyzing:'Analyzing', saving:'Saving', processing:'Processing', extracting:'Extracting' };
+        const label  = labels[job.stage] || job.stage || 'Processing';
+        const status = (job.stage === 'downloading' && pct > 0) ? `${label} ${pct.toFixed(1)}%` : label;
+        const speed  = (job.speed && job.eta) ? `${job.speed} · ETA ${job.eta}` : (job.speed || '');
+
+        row.innerHTML = `
+            <div class="uut-job-row">
+                <div class="uut-spinner"></div>
+                <div class="uut-job-info">
+                    <span class="uut-url" title="${window.escapeHtmlUpload(job.url)}">${window.escapeHtmlUpload(job.url)}</span>
+                    <div class="uut-meta">
+                        <span class="uut-stage">${status}</span>
+                        ${speed ? `<span class="uut-speed">${speed}</span>` : ''}
+                    </div>
+                </div>
+            </div>
+            <div class="uut-bar"><div class="uut-bar-fill" style="width:${pct}%"></div></div>
+        `;
+    };
+
+    // ── History ───────────────────────────────────────────────────────────────
+    const _saveHistory = () => { try { localStorage.setItem(STORAGE_KEY, JSON.stringify(_history)); } catch {} };
+
+    const _pushHistory = (entry) => {
+        _history.unshift(entry);
+        if (_history.length > MAX_HISTORY) _history.length = MAX_HISTORY;
+        _saveHistory();
+        _renderHistory();
+    };
+
+    const _renderHistory = () => {
+        _ensurePanel();
+        const list = _$('uut-history-list');
+        if (!list) return;
+        if (!_history.length) { list.innerHTML = ''; return; }
+        list.innerHTML = _history.map(h => {
+            const ok   = h.type === 'upload_success';
+            const icon = ok ? '<i class="fa-solid fa-check uut-ok"></i>' : '<i class="fa-solid fa-circle-xmark uut-err"></i>';
+            const right = ok && h.itemId
+                ? `<a class="uut-link" href="/${h.itemId}">View →</a>`
+                : (h.error ? `<span class="uut-errtxt" title="${window.escapeHtmlUpload(h.error)}">${window.escapeHtmlUpload(h.error)}</span>` : '');
+            return `<div class="uut-hist-row">${icon}<span class="uut-url" title="${window.escapeHtmlUpload(h.url)}">${window.escapeHtmlUpload(h.url)}</span><div class="uut-hist-right">${right}</div></div>`;
+        }).join('');
+    };
+
+    // ── Polling ───────────────────────────────────────────────────────────────
+    const _stopPoll = (jobId) => {
+        const j = _active.get(jobId);
+        if (j?.pollTimer) { clearTimeout(j.pollTimer); j.pollTimer = null; }
+    };
+
+    const _startPolling = (jobId) => {
+        const job = _active.get(jobId);
+        if (!job || !jobId) return;
+        const poll = async () => {
+            if (!_active.has(jobId) || job.resolved) return;
+            try {
+                const resp = await fetch(`/api/v2/upload-url/progress/${jobId}?t=${Date.now()}`, { cache: 'no-store' });
+                if (!resp.ok) { job.pollTimer = setTimeout(poll, POLL_INTERVAL); return; }
+                const state = await resp.json();
+                if (!state.success) { job.pollTimer = setTimeout(poll, POLL_INTERVAL); return; }
+                if (state.percent !== undefined) job.percent = state.percent;
+                if (state.stage)                job.stage   = state.stage;
+                if (state.speed !== undefined)  job.speed   = state.speed;
+                if (state.eta   !== undefined)  job.eta     = state.eta;
+                _renderJob(jobId);
+                if (state.done) {
+                    job.pollTimer = null;
+                    setTimeout(() => { if (!job.resolved) _resolveJob(jobId, { type: state.error ? 'upload_error' : 'upload_success', item_id: null, data: state.error ? { msg: state.error } : null }); }, 2000);
+                    return;
+                }
+            } catch {}
+            job.pollTimer = setTimeout(poll, POLL_INTERVAL);
+        };
+        job.pollTimer = setTimeout(poll, POLL_INTERVAL);
+    };
+
+    // ── Resolve ───────────────────────────────────────────────────────────────
+    const _resolveJob = (jobId, notif) => {
+        const job = _active.get(jobId);
+        if (!job || job.resolved) return;
+        job.resolved = true;
+        _stopPoll(jobId);
+
+        _pushHistory({ id: jobId, url: job.url, type: notif.type, itemId: notif.item_id || null, error: notif.data?.msg || (notif.type === 'upload_error' ? 'Upload failed' : null), ts: Date.now() });
+
+        // Fade out the active row then remove
+        const row = _$('uut-active-list')?.querySelector(`[data-jid="${CSS.escape(jobId)}"]`);
+        if (row) { row.classList.add('uut-job--fading'); setTimeout(() => row.remove(), 300); }
+        setTimeout(() => { _active.delete(jobId); _sync(); }, 350);
+    };
+
+    // ── Public API ────────────────────────────────────────────────────────────
+    const addJob = (url, jobId) => {
+        if (!jobId) jobId = `local_${Date.now()}`;
+        _ensurePanel();
+        _active.set(jobId, { url, percent: 0, stage: 'queued', speed: null, eta: null, resolved: false, pollTimer: null });
+        _renderJob(jobId);
+        _sync();
+        _startPolling(jobId);
+        return jobId;
+    };
+
+    const resolveByJobId = (jobId, notif) => { if (_active.has(jobId)) { _resolveJob(jobId, notif); return true; } return false; };
+    const resolveByUrl   = (notif, url)   => { for (const [id, j] of _active) { if (!j.resolved && j.url === url) { _resolveJob(id, notif); return true; } } return false; };
+    const resolveOldest  = (notif)        => { for (const [id, j] of _active) { if (!j.resolved) { _resolveJob(id, notif); return true; } } return false; };
+
+    // ── Notifications ─────────────────────────────────────────────────────────
+    document.addEventListener('f0ck:upload_bg_update', (e) => {
+        (e.detail || []).forEach(notif => {
+            let matched = false;
+            const jobId = notif.data?.jobId;
+            if (jobId) matched = resolveByJobId(jobId, notif);
+            if (!matched) { const url = notif.data?.url; if (url) matched = resolveByUrl(notif, url); }
+        });
+    });
+
+    // ── Init: render persisted history on load ────────────────────────────────
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', () => { if (_history.length) { _ensurePanel(); _renderHistory(); _sync(); } });
+    } else {
+        if (_history.length) { _ensurePanel(); _renderHistory(); _sync(); }
+    }
+
+    window.urlUploadTracker = { addJob, resolveByJobId, resolveByUrl, resolveOldest };
+})();
+
+
+
+
 // Throttled queue to capture the first frame of video files asynchronously without blocking the browser
 class VideoThumbnailQueue {
    constructor(concurrency = 3) {
@@ -2132,6 +2350,10 @@ window.initUploadForm = (selector) => {
                    if (data.success) {
                        successCount++;
                        lastData = data;
+                        // If this is a background URL upload, register it with the tracker widget
+                        if (data.pending && window.urlUploadTracker) {
+                            window.urlUploadTracker.addJob(url, data.jobId || null);
+                        }
                        if (data.itemid) {
                            try {
                                const ts = Date.now();
@@ -2160,9 +2382,9 @@ window.initUploadForm = (selector) => {
                if (dragModal) dragModal.classList.remove('show');
                if (window.resetGlobalScrollState) window.resetGlobalScrollState();
                if (window.hideAllModals) window.hideAllModals();
-                
+
                form._f0ckUploader.reset();
-                
+
                if (isShitpost) {
                    if (lastData?.manual_approval && typeof window.flashMessage === 'function') {
                        window.flashMessage(window.f0ckI18n?.upload_pending_approval_patient || 'Upload awaits approval', 3000, 'warning');
@@ -2172,6 +2394,9 @@ window.initUploadForm = (selector) => {
                        if (typeof window.flashMessage === 'function') {
                            window.flashMessage(window.f0ckI18n?.upload_pending_approval_patient || 'Upload awaits approval', 3000, 'warning');
                        }
+                    } else if (lastData?.pending) {
+                        // Background URL upload — tracker widget is already showing; just navigate home
+                        /* no additional message needed */
                    } else if (!dragModal && statusDiv) {
                        statusDiv.innerHTML = '✓ ' + (lastData?.msg || 'Upload successful');
                        statusDiv.className = 'upload-status success';
@@ -2181,7 +2406,7 @@ window.initUploadForm = (selector) => {
                setTimeout(() => {
                    if (typeof window.loadPageAjax === 'function') window.loadPageAjax('/');
                    else window.location.href = '/';
-                }, dragModal ? 0 : 1000);
+                }, dragModal ? 0 : (lastData?.pending ? 0 : 1000));
            } else {
                restoreBtn();
            }
@@ -2286,9 +2511,9 @@ window.initUploadForm = (selector) => {
                        successCount++;
                        lastData = res;
                        if (res.pending) {
-                            // Background URL download — show i18n toast
-                            if (typeof window.flashMessage === 'function') {
-                                window.flashMessage(window.f0ckI18n?.upload_url_queued_background || res.msg, 4000, 'info');
+                            // Background URL download — show tracker widget entry
+                            if (window.urlUploadTracker) {
+                                window.urlUploadTracker.addJob(item.url, res.jobId || null);
                            }
                        }
                        if (res.itemid) {