abnvle
510 lines
21 KiB
JavaScript
510 lines
21 KiB
JavaScript
/**
|
|
* publicShare.js — client-side logic for /s/{token}.
|
|
* Drives the password / file / folder / expired states and renders the
|
|
* folder gallery against /api/s/{token}/contents and friends.
|
|
*/
|
|
|
|
import { uiFileTypes } from '../../app/uiFileTypes.js';
|
|
|
|
(() => {
|
|
// ── DOM refs ──────────────────────────────────────────────────
|
|
const $loading = document.getElementById('share-loading');
|
|
const $password = document.getElementById('share-password');
|
|
const $expired = document.getElementById('share-expired');
|
|
const $file = document.getElementById('share-file');
|
|
const $folder = document.getElementById('share-folder');
|
|
|
|
const $pwForm = document.getElementById('password-form');
|
|
const $pwInput = document.getElementById('password-input');
|
|
const $pwError = document.getElementById('password-error');
|
|
|
|
const $fileName = document.getElementById('file-name');
|
|
const $fileMeta = document.getElementById('file-meta');
|
|
const $fileDl = document.getElementById('file-download');
|
|
const $expiredMsg = document.getElementById('expired-message');
|
|
|
|
// ── Token from URL path (/s/{token}) ──────────────────────────
|
|
const pathParts = window.location.pathname.split('/');
|
|
const tokenIdx = pathParts.indexOf('s');
|
|
const TOKEN = tokenIdx !== -1 ? pathParts[tokenIdx + 1] : null;
|
|
if (!TOKEN) {
|
|
showState('expired');
|
|
if ($expiredMsg) $expiredMsg.textContent = 'Invalid share link.';
|
|
return;
|
|
}
|
|
const TOKEN_ENC = encodeURIComponent(TOKEN);
|
|
|
|
// ── State management ──────────────────────────────────────────
|
|
const VIEW_KEY = 'oxi.share.view';
|
|
let viewMode = 'grid';
|
|
try {
|
|
viewMode = localStorage.getItem(VIEW_KEY) || 'grid';
|
|
} catch (_) {
|
|
// localStorage unavailable
|
|
}
|
|
let rootDisplayName = 'Shared folder';
|
|
|
|
function showState(name) {
|
|
for (const el of [$loading, $password, $expired, $file, $folder]) {
|
|
if (el) el.classList.add('hidden');
|
|
}
|
|
const target = {
|
|
loading: $loading,
|
|
password: $password,
|
|
expired: $expired,
|
|
file: $file,
|
|
folder: $folder
|
|
}[name];
|
|
if (target) target.classList.remove('hidden');
|
|
document.body.classList.toggle('gallery-mode', name === 'folder');
|
|
}
|
|
|
|
// ── Utilities ─────────────────────────────────────────────────
|
|
function escapeHtml(s) {
|
|
return String(s == null ? '' : s).replace(
|
|
/[&<>"']/g,
|
|
(c) =>
|
|
({
|
|
'&': '&',
|
|
'<': '<',
|
|
'>': '>',
|
|
'"': '"',
|
|
"'": '''
|
|
})[c]
|
|
);
|
|
}
|
|
function formatSize(bytes) {
|
|
if (bytes == null || Number.isNaN(bytes)) return '';
|
|
if (bytes < 1024) return `${bytes} B`;
|
|
const units = ['KB', 'MB', 'GB', 'TB'];
|
|
let v = bytes / 1024;
|
|
let i = 0;
|
|
while (v >= 1024 && i < units.length - 1) {
|
|
v /= 1024;
|
|
i++;
|
|
}
|
|
return `${v < 10 ? v.toFixed(1) : Math.round(v)} ${units[i]}`;
|
|
}
|
|
function mediaKind(mime) {
|
|
const m = (mime || '').toLowerCase();
|
|
if (m.startsWith('image/')) return 'image';
|
|
if (m.startsWith('video/')) return 'video';
|
|
return null;
|
|
}
|
|
// ── Render share data ─────────────────────────────────────────
|
|
function renderShare(data) {
|
|
if (data.item_type === 'folder') {
|
|
rootDisplayName = data.item_name || 'Shared folder';
|
|
initFolderGallery();
|
|
} else {
|
|
$fileName.textContent = data.item_name || 'Shared File';
|
|
$fileMeta.textContent = data.item_name ? 'Shared file' : '';
|
|
$fileDl.href = `/api/s/${TOKEN_ENC}/download`;
|
|
showState('file');
|
|
}
|
|
}
|
|
|
|
function fetchShare() {
|
|
fetch(`/api/s/${TOKEN_ENC}`)
|
|
.then((res) => {
|
|
if (res.ok) return res.json();
|
|
if (res.status === 401) {
|
|
return res.json().then((body) => {
|
|
if (body?.requiresPassword) {
|
|
showState('password');
|
|
return null;
|
|
}
|
|
throw new Error('Unauthorized');
|
|
});
|
|
}
|
|
if (res.status === 410) {
|
|
showState('expired');
|
|
return null;
|
|
}
|
|
throw new Error(`HTTP ${res.status}`);
|
|
})
|
|
.then((data) => {
|
|
if (data) renderShare(data);
|
|
})
|
|
.catch(() => {
|
|
showState('expired');
|
|
if ($expiredMsg) {
|
|
$expiredMsg.textContent = 'This share link is no longer available.';
|
|
}
|
|
});
|
|
}
|
|
|
|
if ($pwForm) {
|
|
$pwForm.addEventListener('submit', (e) => {
|
|
e.preventDefault();
|
|
$pwError.classList.add('hidden');
|
|
const password = $pwInput.value;
|
|
if (!password) return;
|
|
fetch(`/api/s/${TOKEN_ENC}/verify`, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ password })
|
|
})
|
|
.then((res) => {
|
|
if (res.ok) return res.json();
|
|
if (res.status === 401) {
|
|
$pwError.textContent = 'Incorrect password. Please try again.';
|
|
$pwError.classList.remove('hidden');
|
|
return null;
|
|
}
|
|
throw new Error(`HTTP ${res.status}`);
|
|
})
|
|
.then((data) => {
|
|
if (data) renderShare(data);
|
|
})
|
|
.catch(() => {
|
|
$pwError.textContent = 'An error occurred. Please try again.';
|
|
$pwError.classList.remove('hidden');
|
|
});
|
|
});
|
|
}
|
|
|
|
// ── Folder gallery ────────────────────────────────────────────
|
|
|
|
let currentFolderId = null;
|
|
let currentFolderName = null;
|
|
|
|
function initFolderGallery() {
|
|
showState('folder');
|
|
const hashFolderId = parseHashFolderId();
|
|
if (hashFolderId) {
|
|
currentFolderId = hashFolderId;
|
|
currentFolderName = null;
|
|
loadAndRender(hashFolderId);
|
|
} else {
|
|
currentFolderId = null;
|
|
currentFolderName = null;
|
|
loadAndRender(null);
|
|
}
|
|
}
|
|
|
|
function parseHashFolderId() {
|
|
const h = window.location.hash;
|
|
if (!h) return null;
|
|
const m = h.match(/[#&]folder=([A-Za-z0-9-]{1,64})/);
|
|
return m ? m[1] : null;
|
|
}
|
|
|
|
function listingUrl(folderId) {
|
|
return folderId ? `/api/s/${TOKEN_ENC}/contents/${encodeURIComponent(folderId)}` : `/api/s/${TOKEN_ENC}/contents`;
|
|
}
|
|
function fileUrl(fileId) {
|
|
return `/api/s/${TOKEN_ENC}/file/${encodeURIComponent(fileId)}`;
|
|
}
|
|
function zipUrl(folderId) {
|
|
return folderId ? `/api/s/${TOKEN_ENC}/zip/${encodeURIComponent(folderId)}` : `/api/s/${TOKEN_ENC}/zip`;
|
|
}
|
|
|
|
let currentLoadController = null;
|
|
function loadAndRender(folderId) {
|
|
if (currentLoadController) currentLoadController.abort();
|
|
const controller = new AbortController();
|
|
currentLoadController = controller;
|
|
|
|
$folder.innerHTML = '<div class="gallery-loading"><div class="spinner"></div></div>';
|
|
fetch(listingUrl(folderId), { signal: controller.signal })
|
|
.then((res) => {
|
|
if (res.ok) return res.json();
|
|
if (res.status === 401) {
|
|
showState('password');
|
|
return null;
|
|
}
|
|
if (res.status === 410 || res.status === 404) {
|
|
showState('expired');
|
|
return null;
|
|
}
|
|
throw new Error(`HTTP ${res.status}`);
|
|
})
|
|
.then((listing) => {
|
|
if (controller.signal.aborted || !listing) return;
|
|
renderGallery(listing, folderId);
|
|
})
|
|
.catch((err) => {
|
|
if (err.name === 'AbortError') return;
|
|
$folder.innerHTML = '<div class="gallery-error">Failed to load contents. Try again.</div>';
|
|
console.error('share gallery load failed:', err);
|
|
});
|
|
}
|
|
|
|
function renderGallery(listing, folderId) {
|
|
const isSubfolder = folderId !== null;
|
|
const title = isSubfolder ? currentFolderName || 'Subfolder' : rootDisplayName;
|
|
const empty = (!listing.folders || listing.folders.length === 0) && (!listing.files || listing.files.length === 0);
|
|
|
|
const backHtml = isSubfolder ? '<a class="gallery-back" href="#" data-action="back"><i class="fas fa-arrow-left"></i> Back to share root</a>' : '';
|
|
|
|
const headerHtml = `<header class="gallery-header"><h2 class="gallery-title">${escapeHtml(title)}</h2><div class="gallery-actions">${backHtml}<div class="gallery-view-toggle" role="group"><button type="button" data-view="grid" aria-pressed="${viewMode === 'grid'}"><i class="fas fa-th-large"></i></button><button type="button" data-view="list" aria-pressed="${viewMode === 'list'}"><i class="fas fa-bars"></i></button></div><a class="gallery-zip btn-primary" href="${escapeHtml(zipUrl(folderId))}" download><i class="fas fa-file-archive"></i> Download ZIP</a></div></header>`;
|
|
|
|
const foldersHtml =
|
|
listing.folders && listing.folders.length > 0
|
|
? `<h3 class="gallery-section-title">Folders</h3><div class="gallery-folders">${listing.folders.map(folderCardHtml).join('')}</div>`
|
|
: '';
|
|
|
|
const filesHtml =
|
|
listing.files && listing.files.length > 0
|
|
? `<h3 class="gallery-section-title">Files</h3><div class="gallery-files">${listing.files.map((f) => fileCardHtml(f)).join('')}</div>`
|
|
: '';
|
|
|
|
const emptyHtml = empty ? '<div class="gallery-empty">This folder is empty.</div>' : '';
|
|
|
|
$folder.innerHTML = headerHtml + emptyHtml + foldersHtml + filesHtml;
|
|
document.body.dataset.shareView = viewMode;
|
|
|
|
wireGallery();
|
|
wireLazyVideos();
|
|
wireImageRetry();
|
|
}
|
|
|
|
function folderCardHtml(folder) {
|
|
return `<a class="folder-card" href="#" data-action="open-folder" data-id="${escapeHtml(folder.id)}" data-name="${escapeHtml(folder.name)}"><i class="fas fa-folder folder-icon"></i><div class="card-body"><div class="card-name">${escapeHtml(folder.name)}</div><div class="card-meta">Subfolder</div></div></a>`;
|
|
}
|
|
|
|
function fileCardHtml(file) {
|
|
const url = fileUrl(file.id);
|
|
const kind = mediaKind(file.mime_type);
|
|
let thumbInner;
|
|
if (kind === 'image') {
|
|
thumbInner = `<img src="${escapeHtml(url)}" alt="" decoding="async" />`;
|
|
} else if (kind === 'video') {
|
|
thumbInner = `<video data-lazy-src="${escapeHtml(url)}" preload="metadata" muted playsinline disablepictureinpicture></video><span class="video-marker" aria-hidden="true"></span>`;
|
|
} else {
|
|
thumbInner = `<i class="${escapeHtml(uiFileTypes.getIconClass(file.name))} file-type-icon"></i>`;
|
|
}
|
|
const mediaAttrs = kind ? ` data-mediakind="${kind}" data-src="${escapeHtml(url)}"` : '';
|
|
const dataAttrs = ` data-id="${escapeHtml(file.id)}" data-name="${escapeHtml(file.name)}" data-mime="${escapeHtml(file.mime_type || '')}"${mediaAttrs}`;
|
|
return `<a class="file-card" href="${escapeHtml(url)}"${dataAttrs}><div class="file-thumb">${thumbInner}</div><div class="card-body"><div class="card-name">${escapeHtml(file.name)}</div><div class="card-meta">${escapeHtml(formatSize(file.size))}</div></div></a>`;
|
|
}
|
|
|
|
function wireGallery() {
|
|
for (const btn of $folder.querySelectorAll('.gallery-view-toggle button')) {
|
|
btn.addEventListener('click', () => setViewMode(btn.dataset.view));
|
|
}
|
|
const backBtn = $folder.querySelector('[data-action="back"]');
|
|
if (backBtn) {
|
|
backBtn.addEventListener('click', (e) => {
|
|
e.preventDefault();
|
|
navigate(null, rootDisplayName);
|
|
});
|
|
}
|
|
for (const card of $folder.querySelectorAll('[data-action="open-folder"]')) {
|
|
card.addEventListener('click', (e) => {
|
|
if (e.metaKey || e.ctrlKey || e.shiftKey || e.button !== 0) return;
|
|
e.preventDefault();
|
|
navigate(card.dataset.id, card.dataset.name);
|
|
});
|
|
}
|
|
const mediaCards = Array.from($folder.querySelectorAll('.file-card[data-mediakind]'));
|
|
const items = mediaCards.map((el) => ({
|
|
kind: el.dataset.mediakind,
|
|
src: el.dataset.src,
|
|
name: el.dataset.name
|
|
}));
|
|
mediaCards.forEach((el, i) => {
|
|
el.addEventListener('click', (e) => {
|
|
if (e.metaKey || e.ctrlKey || e.shiftKey || e.button !== 0) return;
|
|
e.preventDefault();
|
|
openLightbox(items, i);
|
|
});
|
|
});
|
|
}
|
|
|
|
function setViewMode(v) {
|
|
const mode = v === 'list' ? 'list' : 'grid';
|
|
viewMode = mode;
|
|
try {
|
|
localStorage.setItem(VIEW_KEY, mode);
|
|
} catch (_) {
|
|
// ignore
|
|
}
|
|
document.body.dataset.shareView = mode;
|
|
for (const b of $folder.querySelectorAll('.gallery-view-toggle button')) {
|
|
b.setAttribute('aria-pressed', String(b.dataset.view === mode));
|
|
}
|
|
}
|
|
|
|
function navigate(folderId, folderName) {
|
|
currentFolderId = folderId;
|
|
currentFolderName = folderName;
|
|
const hash = folderId ? `#folder=${encodeURIComponent(folderId)}` : '';
|
|
history.pushState({ folderId, folderName }, '', window.location.pathname + hash);
|
|
loadAndRender(folderId);
|
|
}
|
|
|
|
window.addEventListener('popstate', (e) => {
|
|
if (!$folder || $folder.classList.contains('hidden')) return;
|
|
const state = e.state || {};
|
|
currentFolderId = state.folderId || parseHashFolderId();
|
|
currentFolderName = state.folderName || null;
|
|
loadAndRender(currentFolderId);
|
|
});
|
|
|
|
// ── Lazy video posters + image retry ──────────────────────────
|
|
function wireLazyVideos() {
|
|
const lazy = $folder.querySelectorAll('.file-thumb video[data-lazy-src]');
|
|
if (!lazy.length) return;
|
|
const start = (v) => {
|
|
v.addEventListener(
|
|
'loadedmetadata',
|
|
() => {
|
|
const t = Math.min(0.1, (v.duration || 1) * 0.1);
|
|
try {
|
|
v.currentTime = t;
|
|
} catch (_) {
|
|
// unsupported
|
|
}
|
|
},
|
|
{ once: true }
|
|
);
|
|
v.addEventListener(
|
|
'error',
|
|
() => {
|
|
if (v.dataset.retried === '1') return;
|
|
v.dataset.retried = '1';
|
|
const original = v.dataset.lazySrc;
|
|
setTimeout(() => {
|
|
const sep = original.indexOf('?') === -1 ? '?' : '&';
|
|
v.src = `${original}${sep}_r=${Date.now()}`;
|
|
}, 250);
|
|
},
|
|
{ once: true }
|
|
);
|
|
v.src = v.dataset.lazySrc;
|
|
};
|
|
if ('IntersectionObserver' in window) {
|
|
const obs = new IntersectionObserver(
|
|
(entries) => {
|
|
for (const e of entries) {
|
|
if (!e.isIntersecting) continue;
|
|
if (e.target.dataset.lazySrc && !e.target.src) start(e.target);
|
|
obs.unobserve(e.target);
|
|
}
|
|
},
|
|
{ rootMargin: '300px' }
|
|
);
|
|
for (const v of lazy) obs.observe(v);
|
|
} else {
|
|
for (const v of lazy) start(v);
|
|
}
|
|
}
|
|
|
|
function wireImageRetry() {
|
|
for (const img of $folder.querySelectorAll('.file-thumb img')) {
|
|
img.addEventListener('error', () => {
|
|
if (img.dataset.retried === '1') return;
|
|
img.dataset.retried = '1';
|
|
const original = img.src;
|
|
setTimeout(() => {
|
|
const sep = original.indexOf('?') === -1 ? '?' : '&';
|
|
img.src = `${original}${sep}_r=${Date.now()}`;
|
|
}, 250);
|
|
});
|
|
}
|
|
}
|
|
|
|
// ── Lightbox ──────────────────────────────────────────────────
|
|
let lb = null;
|
|
let lbItems = [];
|
|
let lbIndex = -1;
|
|
|
|
function ensureLightbox() {
|
|
if (lb) return lb;
|
|
const root = document.createElement('div');
|
|
root.className = 'lightbox hidden';
|
|
root.id = 'share-lightbox';
|
|
root.setAttribute('role', 'dialog');
|
|
root.innerHTML =
|
|
'<div class="lb-bar">' +
|
|
'<span class="lb-title"></span>' +
|
|
'<a class="lb-download" href="#" download title="Download"><i class="fas fa-download"></i></a>' +
|
|
'<button class="lb-close" type="button" title="Close"><i class="fas fa-times"></i></button>' +
|
|
'</div>' +
|
|
'<div class="lb-stage">' +
|
|
'<button class="lb-nav lb-prev" type="button" aria-label="Previous"><i class="fas fa-chevron-left"></i></button>' +
|
|
'<div class="lb-content"></div>' +
|
|
'<button class="lb-nav lb-next" type="button" aria-label="Next"><i class="fas fa-chevron-right"></i></button>' +
|
|
'</div>';
|
|
document.body.appendChild(root);
|
|
lb = {
|
|
root,
|
|
title: root.querySelector('.lb-title'),
|
|
download: root.querySelector('.lb-download'),
|
|
close: root.querySelector('.lb-close'),
|
|
stage: root.querySelector('.lb-stage'),
|
|
content: root.querySelector('.lb-content'),
|
|
prev: root.querySelector('.lb-prev'),
|
|
next: root.querySelector('.lb-next')
|
|
};
|
|
lb.close.addEventListener('click', closeLightbox);
|
|
lb.prev.addEventListener('click', () => stepLightbox(-1));
|
|
lb.next.addEventListener('click', () => stepLightbox(1));
|
|
lb.root.addEventListener('click', (e) => {
|
|
if (e.target === lb.root) closeLightbox();
|
|
});
|
|
document.addEventListener('keydown', (e) => {
|
|
if (lb.root.classList.contains('hidden')) return;
|
|
if (e.key === 'Escape') {
|
|
e.preventDefault();
|
|
closeLightbox();
|
|
} else if (e.key === 'ArrowLeft') {
|
|
e.preventDefault();
|
|
stepLightbox(-1);
|
|
} else if (e.key === 'ArrowRight') {
|
|
e.preventDefault();
|
|
stepLightbox(1);
|
|
}
|
|
});
|
|
return lb;
|
|
}
|
|
|
|
function openLightbox(items, index) {
|
|
ensureLightbox();
|
|
lbItems = items;
|
|
showLightboxItem(index);
|
|
}
|
|
function showLightboxItem(i) {
|
|
if (i < 0 || i >= lbItems.length) return;
|
|
lbIndex = i;
|
|
const item = lbItems[i];
|
|
lb.content.innerHTML = '';
|
|
if (item.kind === 'image') {
|
|
const img = document.createElement('img');
|
|
img.src = item.src;
|
|
img.alt = item.name || '';
|
|
lb.content.appendChild(img);
|
|
} else {
|
|
const v = document.createElement('video');
|
|
v.src = item.src;
|
|
v.controls = true;
|
|
v.autoplay = true;
|
|
v.preload = 'metadata';
|
|
lb.content.appendChild(v);
|
|
}
|
|
lb.title.textContent = item.name || '';
|
|
lb.download.href = item.src;
|
|
if (item.name) lb.download.setAttribute('download', item.name);
|
|
lb.prev.disabled = i === 0;
|
|
lb.next.disabled = i === lbItems.length - 1;
|
|
lb.root.classList.remove('hidden');
|
|
lb.root.setAttribute('aria-hidden', 'false');
|
|
}
|
|
function stepLightbox(delta) {
|
|
const next = lbIndex + delta;
|
|
if (next >= 0 && next < lbItems.length) showLightboxItem(next);
|
|
}
|
|
function closeLightbox() {
|
|
if (!lb) return;
|
|
lb.root.classList.add('hidden');
|
|
lb.root.setAttribute('aria-hidden', 'true');
|
|
lb.content.innerHTML = '';
|
|
lbIndex = -1;
|
|
}
|
|
|
|
// ── Init ──────────────────────────────────────────────────────
|
|
fetchShare();
|
|
})();
|