NE Hub: Seafile, OnlyOffice, Plex, calendar and mail in one PWA
build-container / build (push) Canceled after 4m16s
build-container / build (push) Canceled after 4m16s
- Mobile-first PWA (phone tab bar with More menu, iPad/desktop rail) - Passkey (WebAuthn) sign-in gates the whole app; first passkey via setup code - Files: Seafile browse/upload/new doc/rename/move/share link/preview/delete - In-app OnlyOffice editing with JWT-signed configs and save-back to Seafile - Plex music player via plex.tv sign-in and a server-side proxy - Calendar agenda from private ICS links (recurrence + time zones) - Search, Home dashboard, webmail deep links, audiobooks frame - Dockerfile, compose, and a Gitea Actions workflow that builds the image Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
This commit is contained in:
nmemmertandClaude Sonnet 5.5 committed
commit
55e0c39171
22 files changed
+2341
No files matched your search
+840
@@ -0,0 +1,840 @@
|
||||
'use strict';
|
||||
// If the server says the passkey session is gone, go back to the sign-in page.
|
||||
const _fetch = window.fetch.bind(window);
|
||||
window.fetch = async (...a) => {
|
||||
const r = await _fetch(...a);
|
||||
if (r.status === 401 && r.headers.get('x-hub-auth') === 'required') location.replace('/login');
|
||||
return r;
|
||||
};
|
||||
const $ = s => document.querySelector(s);
|
||||
const esc = s => String(s).replace(/[&<>"']/g, c => ({ '&': '&', '<': '<', '>': '>', '"': '"', "'": ''' }[c]));
|
||||
const store = {
|
||||
get(k, d) { try { return JSON.parse(localStorage.getItem(k)) ?? d; } catch { return d; } },
|
||||
set(k, v) { try { localStorage.setItem(k, JSON.stringify(v)); } catch {} },
|
||||
del(k) { try { localStorage.removeItem(k); } catch {} },
|
||||
};
|
||||
|
||||
const ICONS = {
|
||||
home: '<path d="M3 11l9-8 9 8M5 10v10h14V10"/>',
|
||||
mail: '<rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 7l9 6 9-6"/>',
|
||||
files: '<path d="M3 7a2 2 0 012-2h4l2 2h8a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2z"/>',
|
||||
doc: '<path d="M7 3h7l5 5v13H7z"/><path d="M14 3v5h5M10 13h6M10 17h6"/>',
|
||||
cog: '<circle cx="12" cy="12" r="3"/><path d="M12 2v3M12 19v3M2 12h3M19 12h3M5 5l2 2M17 17l2 2M19 5l-2 2M7 17l-2 2"/>',
|
||||
chev: '<path d="M9 6l6 6-6 6"/>',
|
||||
back: '<path d="M15 6l-6 6 6 6"/>',
|
||||
edit: '<path d="M4 20h4L19 9l-4-4L4 16z"/>',
|
||||
up: '<path d="M12 16V4M7 9l5-5 5 5M5 20h14"/>',
|
||||
newdir: '<path d="M3 7a2 2 0 012-2h4l2 2h8a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2zM12 10v6M9 13h6"/>',
|
||||
file: '<path d="M7 3h7l5 5v13H7z"/><path d="M14 3v5h5"/>',
|
||||
dl: '<path d="M12 4v12M7 11l5 5 5-5M5 20h14"/>',
|
||||
audio: '<path d="M4 14v-2a8 8 0 0116 0v2"/><rect x="3" y="14" width="4" height="7" rx="1.5"/><rect x="17" y="14" width="4" height="7" rx="1.5"/>',
|
||||
copy: '<rect x="8" y="8" width="12" height="12" rx="2"/><path d="M16 8V6a2 2 0 00-2-2H6a2 2 0 00-2 2v8a2 2 0 002 2h2"/>',
|
||||
music: '<path d="M9 18V5l11-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="17" cy="16" r="3"/>',
|
||||
play: '<path d="M7 4l13 8-13 8z" fill="currentColor"/>',
|
||||
pause: '<path d="M7 4h3v16H7zM14 4h3v16h-3z" fill="currentColor"/>',
|
||||
next: '<path d="M6 5l10 7-10 7zM18 5v14"/>',
|
||||
prev: '<path d="M18 5L8 12l10 7zM6 5v14"/>',
|
||||
shuffle: '<path d="M3 7h3c4 0 5 10 9 10h6M3 17h3c1.5 0 2.5-1.5 3.5-3M15 7h6M18 4l3 3-3 3M18 14l3 3-3 3"/>',
|
||||
more: '<circle cx="5" cy="12" r="1.6" fill="currentColor"/><circle cx="12" cy="12" r="1.6" fill="currentColor"/><circle cx="19" cy="12" r="1.6" fill="currentColor"/>',
|
||||
cal: '<rect x="3" y="5" width="18" height="16" rx="2"/><path d="M3 10h18M8 3v4M16 3v4"/>',
|
||||
search: '<circle cx="11" cy="11" r="7"/><path d="M20 20l-4-4"/>',
|
||||
trash: '<path d="M4 7h16M9 7V4h6v3M6 7l1 13h10l1-13"/>',
|
||||
};
|
||||
const icon = (n, cls = '') => `<svg class="${cls}" viewBox="0 0 24 24">${ICONS[n]}</svg>`;
|
||||
|
||||
// ---- Email: providers block iframes and need OAuth apps for API access, so we deep-link to webmail.
|
||||
const MAIL = [
|
||||
{ id: 'gmail', name: 'Gmail', color: '#d9453a', inbox: 'https://mail.google.com/mail/u/0/#inbox', compose: 'https://mail.google.com/mail/?view=cm&fs=1' },
|
||||
{ id: 'outlook', name: 'Outlook.com', color: '#0a64c8', inbox: 'https://outlook.live.com/mail/0/inbox', compose: 'https://outlook.live.com/mail/0/deeplink/compose' },
|
||||
{ id: 'm365', name: 'Microsoft 365', color: '#d83b01', inbox: 'https://outlook.office.com/mail/inbox', compose: 'https://outlook.office.com/mail/deeplink/compose' },
|
||||
{ id: 'icloud', name: 'iCloud Mail', color: '#3b97e8', inbox: 'https://www.icloud.com/mail', compose: 'https://www.icloud.com/mail' },
|
||||
];
|
||||
|
||||
// Saved account addresses (browser-only, no passwords) are passed as sign-in hints so the provider opens the right mailbox.
|
||||
const mailHints = () => store.get('mail_hints', {});
|
||||
function mailUrl(m, kind) {
|
||||
const base = m[kind], hint = (mailHints()[m.id] || '').trim();
|
||||
if (!hint) return base;
|
||||
const u = new URL(base), q = encodeURIComponent(hint);
|
||||
if (m.id === 'gmail') { if (u.pathname.startsWith('/mail/u/')) u.pathname = '/mail/'; u.searchParams.set('authuser', hint); return u.toString(); }
|
||||
if (m.id === 'outlook' || m.id === 'm365') { u.searchParams.set('login_hint', hint); return u.toString(); }
|
||||
return base; // iCloud has no sign-in hint
|
||||
}
|
||||
|
||||
let cfg = { audiobooks: 'https://audiobooks.necloud.us', seafile: 'https://seafile.necloud.us', onlyoffice: 'https://onlyoffice.necloud.us' };
|
||||
|
||||
// ---- Seafile client (via same-origin proxy)
|
||||
const sf = {
|
||||
token: () => store.get('sf_token'),
|
||||
async req(path, opts = {}) {
|
||||
const headers = { Authorization: 'Token ' + sf.token(), ...(opts.headers || {}) };
|
||||
const r = await fetch('/sf' + path, { ...opts, headers });
|
||||
if (r.status === 401) { store.del('sf_token'); throw new Error('Session expired, sign in again'); }
|
||||
if (!r.ok) throw new Error((await r.text().catch(() => '')).slice(0, 200) || 'Request failed (' + r.status + ')');
|
||||
const t = await r.text();
|
||||
try { return JSON.parse(t); } catch { return t; }
|
||||
},
|
||||
async login(username, password, otp) {
|
||||
const headers = { 'Content-Type': 'application/x-www-form-urlencoded' };
|
||||
if (otp) headers['X-SEAFILE-OTP'] = otp;
|
||||
const r = await fetch('/sf/api2/auth-token/', { method: 'POST', headers, body: new URLSearchParams({ username, password }) });
|
||||
const j = await r.json().catch(() => ({}));
|
||||
if (!r.ok) {
|
||||
if (r.headers.get('x-seafile-otp') === 'required') throw Object.assign(new Error('Enter your 2FA code'), { otp: true });
|
||||
throw new Error((j.non_field_errors || [j.detail || j.error || 'Sign in failed']).join(' '));
|
||||
}
|
||||
store.set('sf_token', j.token);
|
||||
},
|
||||
};
|
||||
|
||||
const toast = (m) => { const t = $('#toast'); t.textContent = m; t.classList.add('on'); clearTimeout(toast.t); toast.t = setTimeout(() => t.classList.remove('on'), 2600); };
|
||||
const ext = n => (n.split('.').pop() || '').toLowerCase();
|
||||
const EDIT_EXT = new Set(['docx', 'doc', 'odt', 'rtf', 'xlsx', 'xls', 'ods', 'csv', 'pptx', 'ppt', 'odp', 'txt']);
|
||||
const OFFICE_EXT =new Set(['docx', 'doc', 'odt', 'rtf', 'xlsx', 'xls', 'ods', 'csv', 'pptx', 'ppt', 'odp', 'txt', 'pdf']);
|
||||
const fmtSize = b => b < 1024 ? b + ' B' : b < 1048576 ? (b / 1024).toFixed(0) + ' KB' : b < 1073741824 ? (b / 1048576).toFixed(1) + ' MB' : (b / 1073741824).toFixed(1) + ' GB';
|
||||
const fmtDate = s => new Date(s * 1000).toLocaleDateString(undefined, { month: 'short', day: 'numeric', year: 'numeric' });
|
||||
|
||||
// ---- Navigation
|
||||
const TABS = [['home', 'Home'], ['files', 'Files'], ['music', 'Music'], ['mail', 'Mail'], ['calendar', 'Calendar'], ['search', 'Search'], ['office', 'Office'], ['audio', 'Audio'], ['settings', 'Settings']];
|
||||
const TAB_ICON = { home: 'home', mail: 'mail', files: 'files', office: 'doc', audio: 'audio', music: 'music', settings: 'cog', calendar: 'cal', search: 'search' };
|
||||
const PRIMARY = ['home', 'files', 'music', 'mail']; // phone tab bar; the rest sit behind "More"
|
||||
const phone = matchMedia('(max-width: 767px)');
|
||||
let activeTab = 'home';
|
||||
|
||||
function renderNav(active = activeTab) {
|
||||
activeTab = active;
|
||||
const tab = ([id, label]) => `<a href="#/${id}" class="${id === active ? 'on' : ''}" ${id === active ? 'aria-current="page"' : ''}>${icon(TAB_ICON[id])}<span>${label}</span></a>`;
|
||||
const brand = `<div class="brand"><img src="/icon.svg" alt=""><span>NE Hub</span></div>`;
|
||||
if (phone.matches) {
|
||||
const more = !PRIMARY.includes(active);
|
||||
$('#nav').innerHTML = TABS.filter(t => PRIMARY.includes(t[0])).map(tab).join('') +
|
||||
`<a href="#" id="more" class="${more ? 'on' : ''}" role="button">${icon('more')}<span>More</span></a>`;
|
||||
$('#more').onclick = e => { e.preventDefault(); openMore(); };
|
||||
} else $('#nav').innerHTML = brand + TABS.map(tab).join('');
|
||||
}
|
||||
phone.addEventListener('change', () => renderNav());
|
||||
|
||||
function openMore() {
|
||||
const el = openSheet('More', '', `<div class="list">${TABS.filter(t => !PRIMARY.includes(t[0])).map(([id, label]) => `
|
||||
<a class="row" href="#/${id}">${icon(TAB_ICON[id])}<span class="grow"><b>${label}</b></span>${icon('chev', 'chev')}</a>`).join('')}</div>`);
|
||||
el.querySelectorAll('a.row').forEach(a => a.addEventListener('click', closeSheet));
|
||||
}
|
||||
|
||||
const routes = { home: viewHome, mail: viewMail, files: viewFiles, office: viewOffice, audio: viewAudio, music: viewMusic, search: viewSearch, calendar: viewCalendar, settings: viewSettings, edit: viewEdit };
|
||||
let editor;
|
||||
function route() {
|
||||
const [, id = 'home', ...rest] = location.hash.split('/');
|
||||
const name = routes[id] ? id : 'home';
|
||||
try { editor?.destroyEditor(); } catch {}
|
||||
editor = null;
|
||||
document.body.classList.toggle('editing', name === 'edit');
|
||||
renderNav(name === 'edit' ? 'files' : name);
|
||||
routes[name](rest.map(decodeURIComponent));
|
||||
$('#view').scrollTop = 0;
|
||||
}
|
||||
|
||||
function tile(href, color, ic, title, sub, external) {
|
||||
return `<a class="tile" href="${esc(href)}" ${external ? 'target="_blank" rel="noopener"' : ''}>
|
||||
<span class="ic" style="background:${color}">${icon(ic)}</span><b>${esc(title)}</b><small>${esc(sub)}</small></a>`;
|
||||
}
|
||||
|
||||
// ---- Views
|
||||
function viewHome() {
|
||||
const h = new Date().getHours();
|
||||
const greet = h < 5 ? 'Good night' : h < 12 ? 'Good morning' : h < 18 ? 'Good afternoon' : 'Good evening';
|
||||
const recents = store.get('recents', []).slice(0, 5);
|
||||
const t = typeof cur === 'function' ? cur() : null;
|
||||
$('#view').innerHTML = `<div class="wrap"><h1>${greet}</h1>
|
||||
<a class="searchbar" href="#/search">${icon('search')}<span>Search files, music, libraries</span></a>
|
||||
${t ? `<h2>Now playing</h2><button class="row card2" id="hnp"><img class="art" style="width:48px;height:48px;border-radius:8px" alt="" src="${px.art(t.thumb, 100)}"><span class="grow"><b>${esc(t.title)}</b><small>${esc(t.artist)}</small></span></button>` : ''}
|
||||
<div id="agenda"></div>
|
||||
${recents.length ? `<h2>Recent files</h2><div class="list">${recents.map((r, i) => `<button class="row" data-r="${i}"><span class="ic" style="background:${OFFICE_EXT.has(ext(r.name)) ? '#e0742b' : '#6a7280'}">${icon('file')}</span><span class="grow"><b>${esc(r.name)}</b><small>${esc(r.path.slice(0, r.path.lastIndexOf('/')) || '/')}</small></span></button>`).join('')}</div>` : ''}
|
||||
<h2>Apps</h2><div class="grid">
|
||||
${tile('#/files', '#2f9e6e', 'files', 'Files', 'Seafile')}
|
||||
${tile('#/music', '#e5a00d', 'music', 'Music', 'Plex')}
|
||||
${tile('#/calendar', '#d9453a', 'cal', 'Calendar', 'Agenda')}
|
||||
${tile('#/office', '#e0742b', 'doc', 'Office', 'OnlyOffice')}
|
||||
${tile('#/audio', '#8a5cf0', 'audio', 'Audio', 'Audiobooks')}
|
||||
${tile('#/mail', '#4f7cff', 'mail', 'Mail', '4 accounts')}
|
||||
</div>
|
||||
<h2>Mail</h2><div class="grid">
|
||||
${MAIL.map(m => tile(mailUrl(m, 'inbox'), m.color, 'mail', m.name, 'Open inbox', true)).join('')}
|
||||
</div></div>`;
|
||||
const np = $('#hnp'); if (np) np.onclick = openNow;
|
||||
$('#view').querySelectorAll('button[data-r]').forEach(b => b.onclick = () => {
|
||||
const r = recents[b.dataset.r]; openFile(r.repo, r.path, r.name, r.path.slice(0, r.path.lastIndexOf('/')) || '/');
|
||||
});
|
||||
if (typeof renderAgenda === 'function') renderAgenda($('#agenda'), 'today');
|
||||
}
|
||||
|
||||
// ---- Search: Seafile files + libraries and Plex music, all best-effort (a missing backend never blocks the others)
|
||||
function viewSearch() {
|
||||
$('#view').innerHTML = `<div class="wrap"><h1>Search</h1><input type="search" id="q" placeholder="Files, libraries, artists, albums, tracks" autocomplete="off" autocapitalize="off">
|
||||
<div id="res"></div></div>`;
|
||||
const q = $('#q'); q.focus();
|
||||
let timer, seq = 0;
|
||||
q.oninput = () => { clearTimeout(timer); timer = setTimeout(() => runSearch(q.value.trim(), ++seq), 350); };
|
||||
async function runSearch(term, mySeq) {
|
||||
const res = $('#res');
|
||||
if (term.length < 2) { res.innerHTML = ''; return; }
|
||||
res.innerHTML = '<p class="empty">Searching…</p>';
|
||||
const enc = encodeURIComponent;
|
||||
const [files, libs, music] = await Promise.allSettled([
|
||||
sf.token() ? sf.req(`/api2/search/?q=${enc(term)}&per_page=20`) : Promise.reject(new Error('signed out')),
|
||||
sf.token() ? sf.req('/api2/repos/') : Promise.reject(new Error('signed out')),
|
||||
jfetch('/api/plex/status').then(st => st.server ? px.get(`/hubs/search?query=${enc(term)}&limit=8`) : Promise.reject(new Error('no server'))),
|
||||
]);
|
||||
if (mySeq !== seq || !location.hash.startsWith('#/search')) return;
|
||||
const sec = (title, html) => html ? `<h2>${title}</h2><div class="list">${html}</div>` : '';
|
||||
const lower = term.toLowerCase();
|
||||
const libHtml = libs.status === 'fulfilled' ? libs.value.filter(r => r.name.toLowerCase().includes(lower)).map(r =>
|
||||
`<a class="row" href="#/files/${enc(r.id)}"><span class="ic" style="background:#2f9e6e">${icon('files')}</span><span class="grow"><b>${esc(r.name)}</b><small>Library</small></span></a>`).join('') : '';
|
||||
const fileHtml = files.status === 'fulfilled' ? (files.value.results || []).map(f => {
|
||||
const parent = f.fullpath.slice(0, f.fullpath.lastIndexOf('/')) || '/';
|
||||
return f.is_dir ? `<a class="row" href="#/files/${enc(f.repo_id)}${f.fullpath.split('/').filter(Boolean).map(x => '/' + enc(x)).join('')}"><span class="ic" style="background:#e0a82b">${icon('files')}</span><span class="grow"><b>${esc(f.name)}</b><small>${esc(f.repo_name || '')} ${esc(f.fullpath)}</small></span></a>`
|
||||
: `<button class="row" data-f="${esc(JSON.stringify([f.repo_id, f.fullpath, f.name, parent]))}"><span class="ic" style="background:#6a7280">${icon('file')}</span><span class="grow"><b>${esc(f.name)}</b><small>${esc(f.repo_name || '')} ${esc(parent)}</small></span></button>`;
|
||||
}).join('') : '';
|
||||
let musicHtml = '';
|
||||
if (music.status === 'fulfilled') {
|
||||
for (const hub of music.value.Hub || []) for (const m of hub.Metadata || []) {
|
||||
if (m.type === 'artist') musicHtml += `<a class="row" href="#/music/artist/${m.ratingKey}"><img class="art" style="width:40px;height:40px;border-radius:50%" alt="" src="${px.art(m.thumb, 80)}"><span class="grow"><b>${esc(m.title)}</b><small>Artist</small></span></a>`;
|
||||
else if (m.type === 'album') musicHtml += `<a class="row" href="#/music/album/${m.ratingKey}"><img class="art" style="width:40px;height:40px;border-radius:8px" alt="" src="${px.art(m.thumb, 80)}"><span class="grow"><b>${esc(m.title)}</b><small>Album · ${esc(m.parentTitle || '')}</small></span></a>`;
|
||||
else if (m.type === 'track') { const tr = mapTrack(m, {}); if (tr) musicHtml += `<button class="row" data-t="${esc(JSON.stringify(tr))}"><img class="art" style="width:40px;height:40px;border-radius:8px" alt="" src="${px.art(m.thumb || m.parentThumb, 80)}"><span class="grow"><b>${esc(m.title)}</b><small>Track · ${esc(m.grandparentTitle || '')}</small></span></button>`; }
|
||||
}
|
||||
}
|
||||
const note = files.status === 'rejected' && sf.token() ? '<p class="sub">File search is not available on your Seafile server (it needs Seafile\'s search index). Libraries and music still work.</p>' : '';
|
||||
res.innerHTML = sec('Libraries', libHtml) + sec('Files', fileHtml) + sec('Music', musicHtml) + note || '<p class="empty">No results</p>';
|
||||
if (!libHtml && !fileHtml && !musicHtml) res.innerHTML = '<p class="empty">No results</p>' + note;
|
||||
res.querySelectorAll('button[data-f]').forEach(b => b.onclick = () => { const [r, p, n, d] = JSON.parse(b.dataset.f); openFile(r, p, n, d); });
|
||||
res.querySelectorAll('button[data-t]').forEach(b => b.onclick = () => playQueue([JSON.parse(b.dataset.t)], 0));
|
||||
}
|
||||
}
|
||||
|
||||
// ---- Calendar: agenda built from private ICS links (managed here; fetched and parsed by the server)
|
||||
const ymd = d => `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
|
||||
async function loadAgenda(days) {
|
||||
const start = new Date(); start.setHours(0, 0, 0, 0);
|
||||
const end = new Date(start); end.setDate(end.getDate() + days);
|
||||
const last = new Date(end.getTime() - 1);
|
||||
const q = new URLSearchParams({ from: start.getTime(), to: end.getTime() - 1, fd: ymd(start), td: ymd(last) });
|
||||
const { events, errors } = await jfetch('/api/cal/events?' + q);
|
||||
const byDay = new Map();
|
||||
const put = (k, e) => { if (!byDay.has(k)) byDay.set(k, []); byDay.get(k).push(e); };
|
||||
for (const e of events) {
|
||||
if (e.allDay) { // spans start..end-1 (end exclusive)
|
||||
for (let d = new Date(e.start + 'T00:00:00'); ymd(d) < e.end; d.setDate(d.getDate() + 1)) { const k = ymd(d); if (k >= ymd(start) && k <= ymd(last)) put(k, e); }
|
||||
} else put(ymd(new Date(e.start)), e);
|
||||
}
|
||||
for (const list of byDay.values()) list.sort((a, b) => (b.allDay - a.allDay) || ((a.allDay ? 0 : a.start) - (b.allDay ? 0 : b.start)));
|
||||
return { byDay, errors, start };
|
||||
}
|
||||
const fmtTime = ms => new Date(ms).toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' });
|
||||
const evRow = e => `<div class="row"><span class="dot" style="background:${esc(e.color)}"></span><span class="grow"><b>${esc(e.title)}</b>
|
||||
<small>${e.allDay ? 'All day' : fmtTime(e.start) + ' – ' + fmtTime(e.end)}${e.location ? ' · ' + esc(e.location) : ''} · ${esc(e.cal)}</small></span></div>`;
|
||||
const dayLabel = k => { const d = new Date(k + 'T00:00:00'), t = ymd(new Date()); const tm = new Date(); tm.setDate(tm.getDate() + 1);
|
||||
return (k === t ? 'Today · ' : k === ymd(tm) ? 'Tomorrow · ' : '') + d.toLocaleDateString([], { weekday: 'long', month: 'short', day: 'numeric' }); };
|
||||
|
||||
async function renderAgenda(el, mode) { // Home card (today only)
|
||||
if (!el) return;
|
||||
try {
|
||||
const cals = await jfetch('/api/cal/list'); if (!cals.length) return;
|
||||
const { byDay } = await loadAgenda(1);
|
||||
const list = byDay.get(ymd(new Date())) || [];
|
||||
if (!document.body.contains(el)) return;
|
||||
el.innerHTML = `<h2>Today</h2><div class="list">${list.length ? list.slice(0, 6).map(evRow).join('') : '<div class="row"><small>Nothing on the calendar today</small></div>'}</div>`;
|
||||
} catch {}
|
||||
}
|
||||
|
||||
async function viewCalendar() {
|
||||
const range = store.get('cal_range', 7);
|
||||
const v = $('#view');
|
||||
v.innerHTML = `<div class="wrap"><h1>Calendar</h1><div class="seg">${[[1, 'Today'], [7, '7 days'], [30, '30 days']].map(([n, l]) => `<a href="#" data-n="${n}" class="${n === range ? 'on' : ''}">${l}</a>`).join('')}</div>
|
||||
<div id="ag"><p class="empty">Loading…</p></div><div class="bar"><button class="btn ghost" id="mc">Manage calendars</button></div></div>`;
|
||||
v.querySelectorAll('.seg a').forEach(a => a.onclick = e => { e.preventDefault(); store.set('cal_range', +a.dataset.n); viewCalendar(); });
|
||||
$('#mc').onclick = manageCalendars;
|
||||
try {
|
||||
const cals = await jfetch('/api/cal/list');
|
||||
if (!cals.length) { $('#ag').innerHTML = '<p class="empty">No calendars yet. Add a private calendar link to see your events here.</p><div class="bar" style="justify-content:center"><button class="btn" id="ac">Add a calendar</button></div>'; $('#ac').onclick = addCalendar; return; }
|
||||
const { byDay, errors } = await loadAgenda(range);
|
||||
if (!location.hash.startsWith('#/calendar')) return;
|
||||
const keys = [...byDay.keys()].sort();
|
||||
$('#ag').innerHTML = (keys.map(k => `<h2>${esc(dayLabel(k))}</h2><div class="list">${byDay.get(k).map(evRow).join('')}</div>`).join('') || '<p class="empty">Nothing coming up</p>')
|
||||
+ errors.map(e => `<p class="err">${esc(e)}</p>`).join('');
|
||||
} catch (e) { $('#ag').innerHTML = `<p class="err">${esc(e.message)}</p>`; }
|
||||
}
|
||||
|
||||
function addCalendar() {
|
||||
const el = openSheet('Add a calendar', '', `<form><label>Name</label><input type="text" id="cn" placeholder="Personal" autocomplete="off">
|
||||
<label>Private calendar link (ICS)</label><input type="url" id="cu2" placeholder="https://… or webcal://…" autocomplete="off" autocapitalize="off" required>
|
||||
<p class="sub" style="margin:10px 0 0">Google: Settings → your calendar → "Secret address in iCal format". Outlook.com / M365: Settings → Calendar → Shared calendars → Publish → copy the ICS link. iCloud: calendar's Share → Public Calendar → copy link. Anyone with the link can read that calendar, so keep it private.</p>
|
||||
<div class="bar"><button class="btn ghost" type="button" id="sx" style="flex:1;justify-content:center">Cancel</button><button class="btn" style="flex:1;justify-content:center">Add</button></div><div class="err" id="ce"></div></form>`);
|
||||
el.querySelector('#sx').onclick = closeSheet;
|
||||
el.querySelector('form').onsubmit = async e => {
|
||||
e.preventDefault(); const btn = el.querySelector('form .btn:not(.ghost)'); btn.disabled = true; el.querySelector('#ce').textContent = '';
|
||||
try { await jfetch('/api/cal/add', { method: 'POST', body: JSON.stringify({ name: el.querySelector('#cn').value.trim() || 'Calendar', url: el.querySelector('#cu2').value.trim() }) }); closeSheet(); toast('Calendar added'); viewCalendar(); }
|
||||
catch (err) { btn.disabled = false; el.querySelector('#ce').textContent = err.message; }
|
||||
};
|
||||
}
|
||||
async function manageCalendars() {
|
||||
const cals = await jfetch('/api/cal/list');
|
||||
const el = openSheet('Calendars', '', `<div class="list" style="background:var(--panel2);border:0">${cals.map(c => `<div class="row"><span class="dot" style="background:${esc(c.color)}"></span><span class="grow"><b>${esc(c.name)}</b></span>
|
||||
<button class="btn danger" data-id="${esc(c.id)}" style="min-height:36px">Remove</button></div>`).join('') || '<div class="row"><small>No calendars</small></div>'}</div>
|
||||
<div class="bar"><button class="btn" id="ac" style="flex:1;justify-content:center">Add a calendar</button><button class="btn ghost" id="sx" style="flex:1;justify-content:center">Close</button></div>`);
|
||||
el.querySelector('#sx').onclick = closeSheet; el.querySelector('#ac').onclick = addCalendar;
|
||||
el.querySelectorAll('button[data-id]').forEach(b => b.onclick = async () => { await jfetch('/api/cal/remove', { method: 'POST', body: JSON.stringify({ id: b.dataset.id }) }); closeSheet(); viewCalendar(); });
|
||||
}
|
||||
|
||||
function viewMail() {
|
||||
$('#view').innerHTML = `<div class="wrap"><h1>Mail</h1>
|
||||
<p class="sub">Opens each provider's own webmail in a new tab. Nothing is stored here.</p>
|
||||
<h2>Inboxes</h2><div class="list">${MAIL.map(m => `
|
||||
<a class="row" href="${esc(mailUrl(m, 'inbox'))}" target="_blank" rel="noopener">
|
||||
<span class="ic" style="background:${m.color}">${icon('mail')}</span>
|
||||
<span class="grow"><b>${esc(m.name)}</b><small>Inbox</small></span>${icon('chev', 'chev')}</a>`).join('')}</div>
|
||||
<h2>Compose</h2><div class="list">${MAIL.map(m => `
|
||||
<a class="row" href="${esc(mailUrl(m, 'compose'))}" target="_blank" rel="noopener">
|
||||
<span class="ic" style="background:${m.color}">${icon('edit')}</span>
|
||||
<span class="grow"><b>New message</b><small>from ${esc(m.name)}</small></span>${icon('chev', 'chev')}</a>`).join('')}</div></div>`;
|
||||
}
|
||||
|
||||
function viewOffice() {
|
||||
const url = cfg.onlyoffice;
|
||||
$('#view').innerHTML = `<div class="wrap"><h1>Office</h1>
|
||||
<p class="sub">OnlyOffice at ${esc(new URL(url).host)}. To edit a file from Seafile, open it in Files.</p>
|
||||
<div class="bar"><a class="btn" href="${esc(url)}" target="_blank" rel="noopener">Open in new tab</a>
|
||||
<a class="btn ghost" href="#/files">Go to Files</a></div>
|
||||
<iframe class="frame" src="${esc(url)}" title="OnlyOffice" allow="clipboard-read; clipboard-write; fullscreen"></iframe>
|
||||
<p class="sub" style="margin-top:8px">If the frame above is blank, your OnlyOffice server blocks embedding. Use the button, or allow this app's origin in its frame-ancestors / X-Frame-Options.</p></div>`;
|
||||
}
|
||||
|
||||
// ---- Audiobooks: embedded site. Sign-in details saved in Settings (this browser only) can be copied with one tap,
|
||||
// because a page can't type into another site's login form.
|
||||
const abCreds = () => store.get('ab_creds', { u: '', p: '' });
|
||||
function viewAudio() {
|
||||
const url = cfg.audiobooks, c = abCreds();
|
||||
$('#view').innerHTML = `<div class="wrap"><h1>Audio</h1>
|
||||
<p class="sub">${esc(new URL(url).host)}</p>
|
||||
<div class="bar"><a class="btn" href="${esc(url)}" target="_blank" rel="noopener">Open in new tab</a>
|
||||
${c.u ? `<button class="btn ghost" id="cu">${icon('copy')}Username</button>` : ''}
|
||||
${c.p ? `<button class="btn ghost" id="cp">${icon('copy')}Password</button>` : ''}
|
||||
${c.u || c.p ? '' : '<a class="btn ghost" href="#/settings">Save sign-in</a>'}</div>
|
||||
<iframe class="frame" src="${esc(url)}" title="Audiobooks" allow="autoplay; fullscreen; picture-in-picture; clipboard-write"></iframe></div>`;
|
||||
const copy = async (v, what) => { try { await navigator.clipboard.writeText(v); toast(what + ' copied. Paste it into the sign-in box.'); } catch { toast('Could not copy'); } };
|
||||
const cu = $('#cu'), cp = $('#cp');
|
||||
if (cu) cu.onclick = () => copy(c.u, 'Username');
|
||||
if (cp) cp.onclick = () => copy(c.p, 'Password');
|
||||
}
|
||||
|
||||
// ---- Plex Music (via the server's /plex proxy; sign-in goes through plex.tv, no password handled here)
|
||||
const jfetch = async (path, opts) => {
|
||||
const r = await fetch(path, opts); const j = await r.json().catch(() => ({}));
|
||||
if (!r.ok) throw Object.assign(new Error(j.error || 'Request failed (' + r.status + ')'), { status: r.status });
|
||||
return j;
|
||||
};
|
||||
const px = {
|
||||
sec: null,
|
||||
async get(path) {
|
||||
const r = await fetch('/plex' + path, { headers: { Accept: 'application/json' } });
|
||||
if (r.status === 401) throw Object.assign(new Error('Plex session expired'), { auth: true });
|
||||
if (!r.ok) throw new Error('Plex error ' + r.status);
|
||||
return (await r.json()).MediaContainer || {};
|
||||
},
|
||||
art: (thumb, w = 300) => thumb ? `/plex/photo/:/transcode?width=${w}&height=${w}&minSize=1&upscale=1&url=${encodeURIComponent(thumb)}` : 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==',
|
||||
async section() {
|
||||
if (px.sec) return px.sec;
|
||||
const d = (await px.get('/library/sections')).Directory || [];
|
||||
const m = d.find(x => x.type === 'artist');
|
||||
if (!m) throw new Error('No music library found on this Plex server');
|
||||
return (px.sec = m.key);
|
||||
},
|
||||
};
|
||||
const fmtDur = ms => { const s = Math.round((ms || 0) / 1000); return Math.floor(s / 60) + ':' + String(s % 60).padStart(2, '0'); };
|
||||
const mapTrack = (t, mc) => {
|
||||
const part = t.Media?.[0]?.Part?.[0];
|
||||
return part && { key: t.ratingKey, title: t.title, artist: t.grandparentTitle || t.originalTitle || mc.title1 || '',
|
||||
album: t.parentTitle || mc.title2 || '', thumb: t.thumb || t.parentThumb || mc.thumb, src: '/plex' + part.key, dur: t.duration || 0 };
|
||||
};
|
||||
|
||||
async function viewMusic(args) {
|
||||
const v = $('#view');
|
||||
v.innerHTML = '<div class="wrap"><h1>Music</h1><p class="empty">Loading…</p></div>';
|
||||
try {
|
||||
const st = await jfetch('/api/plex/status');
|
||||
if (!location.hash.startsWith('#/music')) return;
|
||||
if (!st.signedIn) return plexSignIn();
|
||||
if (!st.server) return plexPickServer();
|
||||
await musicRoute(args, st);
|
||||
} catch (e) {
|
||||
if (e.auth) return plexSignIn();
|
||||
v.innerHTML = `<div class="wrap"><h1>Music</h1><p class="err">${esc(e.message)}</p><div class="bar"><button class="btn ghost" id="rs">Change server</button></div></div>`;
|
||||
$('#rs').onclick = plexPickServer;
|
||||
}
|
||||
}
|
||||
|
||||
function plexSignIn(msg = '') {
|
||||
$('#view').innerHTML = `<div class="wrap"><h1>Music</h1><p class="sub">Play your Plex music library here.</p>
|
||||
<div class="card"><p style="margin-top:0">You'll sign in on plex.tv in a new tab. This app never sees your Plex password.</p>
|
||||
<div class="bar"><button class="btn" id="pl">Sign in with Plex</button></div><div class="err" id="pe">${esc(msg)}</div></div></div>`;
|
||||
$('#pl').onclick = async () => {
|
||||
const w = window.open('', '_blank'); // opened synchronously so popup blockers allow it
|
||||
try {
|
||||
const pin = await jfetch('/api/plex/pin', { method: 'POST' });
|
||||
if (w) w.location = pin.authUrl; else $('#pe').innerHTML = `<a href="${esc(pin.authUrl)}" target="_blank" rel="noopener" style="color:var(--accent)">Tap to open Plex sign-in</a>`;
|
||||
for (let i = 0; i < 150; i++) {
|
||||
await new Promise(r => setTimeout(r, 2000));
|
||||
if (!location.hash.startsWith('#/music')) return;
|
||||
const r = await jfetch(`/api/plex/pin?id=${pin.id}&code=${encodeURIComponent(pin.code)}`);
|
||||
if (r.ok) { try { w?.close(); } catch {} return route(); }
|
||||
}
|
||||
$('#pe').textContent = 'Timed out waiting for Plex. Try again.';
|
||||
} catch (e) { $('#pe').textContent = e.message; }
|
||||
};
|
||||
}
|
||||
|
||||
async function plexPickServer() {
|
||||
const v = $('#view');
|
||||
v.innerHTML = '<div class="wrap"><h1>Music</h1><p class="empty">Finding your Plex servers…</p></div>';
|
||||
try {
|
||||
const servers = await jfetch('/api/plex/servers');
|
||||
if (!servers.length) { v.innerHTML = '<div class="wrap"><h1>Music</h1><p class="err">No Plex servers found on this account.</p></div>'; return; }
|
||||
v.innerHTML = `<div class="wrap"><h1>Music</h1><p class="sub">Choose a server</p><div class="list">${servers.map(s => `
|
||||
<button class="row" data-id="${esc(s.id)}"><span class="ic" style="background:#e5a00d">${icon('music')}</span>
|
||||
<span class="grow"><b>${esc(s.name)}</b><small>${s.owned ? 'Yours' : 'Shared with you'}</small></span>${icon('chev', 'chev')}</button>`).join('')}</div><div class="err" id="pe"></div></div>`;
|
||||
v.querySelectorAll('button.row').forEach(b => b.onclick = async () => {
|
||||
b.disabled = true; $('#pe').textContent = '';
|
||||
try { await jfetch('/api/plex/server', { method: 'POST', body: JSON.stringify({ id: b.dataset.id }) }); px.sec = null; route(); }
|
||||
catch (e) { b.disabled = false; $('#pe').textContent = e.message; }
|
||||
});
|
||||
} catch (e) { if (e.status === 401) return plexSignIn(); v.innerHTML = `<div class="wrap"><h1>Music</h1><p class="err">${esc(e.message)}</p></div>`; }
|
||||
}
|
||||
|
||||
async function musicRoute([kind = 'albums', key], st) {
|
||||
const v = $('#view'), sec = await px.section();
|
||||
const tabs = ['albums', 'artists', 'playlists'];
|
||||
const seg = `<div class="seg">${tabs.map(t => `<a href="#/music/${t}" class="${t === kind ? 'on' : ''}">${t[0].toUpperCase() + t.slice(1)}</a>`).join('')}</div>`;
|
||||
const card = (href, thumb, title, sub, round) => `<a class="acard ${round ? 'round' : ''}" href="${href}" data-q="${esc((title + ' ' + sub).toLowerCase())}">
|
||||
<img class="art" loading="lazy" alt="" src="${px.art(thumb)}"><b>${esc(title)}</b><small>${esc(sub)}</small></a>`;
|
||||
const listing = (items, html) => {
|
||||
v.innerHTML = `<div class="wrap"><h1>Music</h1><p class="sub">${esc(st.server)}</p>${seg}<input type="search" id="mq" placeholder="Filter" autocomplete="off">
|
||||
<div class="agrid" style="margin-top:14px">${html || '<p class="empty">Nothing here</p>'}</div></div>`;
|
||||
$('#mq').oninput = e => { const q = e.target.value.toLowerCase(); v.querySelectorAll('.acard').forEach(c => c.style.display = c.dataset.q.includes(q) ? '' : 'none'); };
|
||||
};
|
||||
const big = '&X-Plex-Container-Start=0&X-Plex-Container-Size=3000&sort=titleSort';
|
||||
|
||||
if (kind === 'albums') { const mc = await px.get(`/library/sections/${sec}/all?type=9${big}`);
|
||||
return listing(0, (mc.Metadata || []).map(a => card('#/music/album/' + a.ratingKey, a.thumb, a.title, a.parentTitle || '')).join('')); }
|
||||
if (kind === 'artists') { const mc = await px.get(`/library/sections/${sec}/all?type=8${big}`);
|
||||
return listing(0, (mc.Metadata || []).map(a => card('#/music/artist/' + a.ratingKey, a.thumb, a.title, '', true)).join('')); }
|
||||
if (kind === 'playlists') { const mc = await px.get('/playlists?playlistType=audio');
|
||||
return listing(0, (mc.Metadata || []).map(a => card('#/music/playlist/' + a.ratingKey, a.composite, a.title, (a.leafCount || 0) + ' tracks')).join('')); }
|
||||
|
||||
if (kind === 'artist') {
|
||||
const mc = await px.get(`/library/metadata/${key}/children`);
|
||||
v.innerHTML = `<div class="wrap"><div class="bar"><a class="btn ghost" href="#/music/artists">${icon('back')}Artists</a></div><h1>${esc(mc.title2 || mc.parentTitle || 'Artist')}</h1>
|
||||
<h2>Albums</h2><div class="agrid">${(mc.Metadata || []).map(a => card('#/music/album/' + a.ratingKey, a.thumb, a.title, a.year || '')).join('')}</div></div>`;
|
||||
return;
|
||||
}
|
||||
if (kind === 'album' || kind === 'playlist') {
|
||||
const album = kind === 'album';
|
||||
const [mc, meta] = await Promise.all([px.get(album ? `/library/metadata/${key}/children` : `/playlists/${key}/items`),
|
||||
px.get(album ? `/library/metadata/${key}` : `/playlists/${key}`)]);
|
||||
const info = (meta.Metadata || [])[0] || {};
|
||||
const tracks = (mc.Metadata || []).map(t => mapTrack(t, mc)).filter(Boolean);
|
||||
const title = info.title || mc.title2 || '', sub = album ? (info.parentTitle || mc.title1 || '') : tracks.length + ' tracks';
|
||||
const thumb = info.thumb || info.composite || mc.thumb;
|
||||
v.innerHTML = `<div class="wrap"><div class="bar"><a class="btn ghost" href="#/music/${album ? 'albums' : 'playlists'}">${icon('back')}${album ? 'Albums' : 'Playlists'}</a></div>
|
||||
<div class="mhead"><img class="art" alt="" src="${px.art(thumb, 400)}"><div><h1>${esc(title)}</h1><p class="sub">${esc(sub)}</p></div></div>
|
||||
<div class="bar"><button class="btn" id="pa">${icon('play')}Play</button><button class="btn ghost" id="ps">${icon('shuffle')}Shuffle</button></div>
|
||||
<div class="list">${tracks.map((t, i) => `<button class="row" data-i="${i}"><span class="num">${i + 1}</span>
|
||||
<span class="grow"><b>${esc(t.title)}</b>${album ? '' : `<small>${esc(t.artist)}</small>`}</span><small>${fmtDur(t.dur)}</small></button>`).join('') || '<p class="empty">No playable tracks</p>'}</div></div>`;
|
||||
v.querySelectorAll('button.row').forEach(b => b.onclick = () => playQueue(tracks, +b.dataset.i));
|
||||
$('#pa').onclick = () => tracks.length && playQueue(tracks, 0);
|
||||
$('#ps').onclick = () => tracks.length && playQueue(shuffled(tracks), 0);
|
||||
markPlaying();
|
||||
return;
|
||||
}
|
||||
location.hash = '#/music/albums';
|
||||
}
|
||||
|
||||
// ---- Player: one <audio> element that lives outside the views, so music keeps playing as you move around.
|
||||
const shuffled = a => { const b = [...a]; for (let i = b.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)); [b[i], b[j]] = [b[j], b[i]]; } return b; };
|
||||
const pl = { q: [], i: -1, a: new Audio() };
|
||||
const cur = () => pl.q[pl.i];
|
||||
function playQueue(q, i = 0) { pl.q = q; pl.i = i; loadCur(); }
|
||||
function loadCur() {
|
||||
const t = cur(); if (!t) return;
|
||||
pl.a.src = t.src; pl.a.play().catch(() => toast('Tap play to start'));
|
||||
if ('mediaSession' in navigator) navigator.mediaSession.metadata = new MediaMetadata({ title: t.title, artist: t.artist, album: t.album, artwork: [{ src: px.art(t.thumb, 512), sizes: '512x512' }] });
|
||||
renderMini(); syncUI(); markPlaying();
|
||||
}
|
||||
const next = () => { if (pl.i < pl.q.length - 1) { pl.i++; loadCur(); } else { pl.a.pause(); } };
|
||||
const prev = () => { if (pl.a.currentTime > 3 || pl.i === 0) pl.a.currentTime = 0; else { pl.i--; loadCur(); } };
|
||||
const toggle = () => (pl.a.paused ? pl.a.play() : pl.a.pause());
|
||||
pl.a.addEventListener('ended', next);
|
||||
['play', 'pause', 'timeupdate', 'loadedmetadata'].forEach(e => pl.a.addEventListener(e, () => syncUI()));
|
||||
pl.a.addEventListener('error', () => toast('Could not play this track'));
|
||||
if ('mediaSession' in navigator) {
|
||||
const ms = navigator.mediaSession;
|
||||
ms.setActionHandler('play', () => pl.a.play()); ms.setActionHandler('pause', () => pl.a.pause());
|
||||
ms.setActionHandler('previoustrack', prev); ms.setActionHandler('nexttrack', next);
|
||||
try { ms.setActionHandler('seekto', d => { pl.a.currentTime = d.seekTime; }); } catch {}
|
||||
}
|
||||
function markPlaying() {
|
||||
const t = cur(); document.querySelectorAll('#view .row[data-i]').forEach(r => r.classList.toggle('playing', !!t && pl.q[+r.dataset.i]?.key === t.key));
|
||||
}
|
||||
function renderMini() {
|
||||
const t = cur(), el = $('#player'); if (!t) return (el.hidden = true);
|
||||
el.hidden = false;
|
||||
el.innerHTML = `<div class="mini"><div class="bar2"><i id="mp"></i></div><img class="art" alt="" src="${px.art(t.thumb, 100)}">
|
||||
<button class="meta" id="mo"><b>${esc(t.title)}</b><small>${esc(t.artist)}</small></button>
|
||||
<button class="ibtn" id="mt" aria-label="Play or pause"></button><button class="ibtn" id="mn" aria-label="Next">${icon('next')}</button></div>`;
|
||||
$('#mt').onclick = toggle; $('#mn').onclick = next; $('#mo').onclick = openNow;
|
||||
}
|
||||
function syncUI() {
|
||||
const a = pl.a, d = a.duration || (cur()?.dur || 0) / 1000, pct = d ? (a.currentTime / d) * 100 : 0;
|
||||
const ic = icon(a.paused ? 'play' : 'pause');
|
||||
const mt = $('#mt'); if (mt && mt.dataset.s !== String(a.paused)) { mt.innerHTML = ic; mt.dataset.s = a.paused; }
|
||||
const mp = $('#mp'); if (mp) mp.style.width = pct + '%';
|
||||
const nt = $('#npt'); if (nt && nt.dataset.s !== String(a.paused)) { nt.innerHTML = ic; nt.dataset.s = a.paused; }
|
||||
const sk = $('#npk'); if (sk && !sk.dataset.drag) { sk.max = d || 0; sk.value = a.currentTime; }
|
||||
const c = $('#npc'); if (c) c.textContent = fmtDur(a.currentTime * 1000);
|
||||
const dd = $('#npd'); if (dd) dd.textContent = fmtDur(d * 1000);
|
||||
}
|
||||
function openNow() {
|
||||
const t = cur(); if (!t) return;
|
||||
const el = openSheet('', '', `<div class="np"><img class="art" alt="" src="${px.art(t.thumb, 600)}"><h3 style="margin:0">${esc(t.title)}</h3>
|
||||
<p class="sub" style="margin:2px 0 12px">${esc(t.artist)}${t.album ? ' · ' + esc(t.album) : ''}</p>
|
||||
<input type="range" id="npk" min="0" step="1" value="0" aria-label="Seek"><div class="times"><span id="npc">0:00</span><span id="npd">0:00</span></div>
|
||||
<div class="ctl"><button class="ibtn" id="npp" aria-label="Previous">${icon('prev')}</button><button class="ibtn big" id="npt" aria-label="Play or pause"></button>
|
||||
<button class="ibtn" id="npn" aria-label="Next">${icon('next')}</button></div></div>`);
|
||||
const sk = el.querySelector('#npk');
|
||||
sk.oninput = () => { sk.dataset.drag = 1; el.querySelector('#npc').textContent = fmtDur(sk.value * 1000); };
|
||||
sk.onchange = () => { pl.a.currentTime = +sk.value; delete sk.dataset.drag; };
|
||||
el.querySelector('#npp').onclick = prev; el.querySelector('#npn').onclick = next; el.querySelector('#npt').onclick = toggle;
|
||||
syncUI();
|
||||
}
|
||||
|
||||
function viewSettings() {
|
||||
const signed = !!sf.token();
|
||||
$('#view').innerHTML = `<div class="wrap"><h1>Settings</h1>
|
||||
<h2>Passkeys</h2><div class="list" id="pks"><div class="row"><span class="grow"><small>Loading…</small></span></div></div>
|
||||
<div class="bar"><button class="btn ghost" id="addpk">Add a passkey</button><button class="btn danger" id="hubout">Sign out of NE Hub</button></div>
|
||||
<h2>Connections</h2><div class="list">
|
||||
<div class="row"><span class="grow"><b>Seafile</b><small>${esc(cfg.seafile)} · ${signed ? 'signed in' : 'signed out'}</small></span></div>
|
||||
<div class="row"><span class="grow"><b>Plex</b><small id="plexst">Checking…</small></span><button class="btn danger" id="plexout" hidden>Sign out</button></div>
|
||||
<div class="row"><span class="grow"><b>OnlyOffice</b><small>${esc(cfg.onlyoffice)}</small></span></div>
|
||||
</div>
|
||||
${signed ? '<div class="bar"><button class="btn danger" id="out">Sign out of Seafile</button></div>' : ''}
|
||||
<h2>Mail accounts</h2><p class="sub">Your address for each account, so its inbox and new-message buttons open the right mailbox. Stored only in this browser. Passwords are never saved here.</p>
|
||||
<div class="card" style="max-width:none">${MAIL.filter(m => m.id !== 'icloud').map(m => `<label for="h-${m.id}">${esc(m.name)}</label>
|
||||
<input type="email" id="h-${m.id}" data-id="${m.id}" placeholder="you@example.com" autocomplete="off" autocapitalize="off" value="${esc(mailHints()[m.id] || '')}">`).join('')}
|
||||
<p class="sub" style="margin-top:12px">iCloud Mail can't take a hint; use Keychain autofill or stay signed in.</p></div>
|
||||
<h2>Audiobooks sign-in</h2><p class="sub">Saved only in this browser, in plain text, so anyone with access to this device can read it. Leave blank to skip. Use the copy buttons on the Audio tab to paste them into the site's sign-in form.</p>
|
||||
<div class="card" style="max-width:none"><label for="ab-u">Username</label>
|
||||
<input type="text" id="ab-u" autocomplete="off" autocapitalize="off" value="${esc(abCreds().u)}">
|
||||
<label for="ab-p">Password</label>
|
||||
<input type="password" id="ab-p" autocomplete="new-password" value="${esc(abCreds().p)}"></div>
|
||||
<h2>Install</h2><p class="sub">iPhone/iPad: Share → Add to Home Screen. Desktop Chrome/Edge: install icon in the address bar.</p></div>`;
|
||||
document.querySelectorAll('input[data-id]').forEach(i => i.oninput = () => {
|
||||
const h = mailHints(); const v = i.value.trim(); if (v) h[i.dataset.id] = v; else delete h[i.dataset.id]; store.set('mail_hints', h);
|
||||
});
|
||||
const saveAb = () => store.set('ab_creds', { u: $('#ab-u').value, p: $('#ab-p').value });
|
||||
$('#ab-u').oninput = saveAb; $('#ab-p').oninput = saveAb;
|
||||
jfetch('/api/plex/status').then(st => {
|
||||
const el = $('#plexst'); if (!el) return;
|
||||
el.textContent = st.signedIn ? (st.server ? 'Signed in · ' + st.server : 'Signed in · no server chosen') : 'Signed out';
|
||||
if (st.signedIn) { const b = $('#plexout'); b.hidden = false; b.onclick = async () => { await jfetch('/api/plex/logout', { method: 'POST' }); pl.a.pause(); pl.q = []; pl.i = -1; renderMini(); toast('Signed out of Plex'); viewSettings(); }; }
|
||||
}).catch(() => { const el = $('#plexst'); if (el) el.textContent = 'Unavailable'; });
|
||||
const loadPks = async () => {
|
||||
try {
|
||||
const pks = await (await fetch('/api/auth/passkeys')).json();
|
||||
$('#pks').innerHTML = pks.map(k => `<div class="row"><span class="grow"><b>${esc(k.name)}</b><small>Added ${new Date(k.created).toLocaleDateString()}${k.lastUsed ? ' · used ' + new Date(k.lastUsed).toLocaleDateString() : ''}</small></span>
|
||||
<button class="btn danger" data-id="${esc(k.id)}" style="min-height:36px">Remove</button></div>`).join('') || '<div class="row"><small>No passkeys</small></div>';
|
||||
$('#pks').querySelectorAll('button[data-id]').forEach(b => b.onclick = () => confirmSheet('Remove passkey?', pks.length === 1 ? 'This is your only passkey. You would need the server setup code to enrol a new one.' : 'It will no longer sign in to NE Hub.', 'Remove', async () => {
|
||||
await authPost('/api/auth/passkeys', { id: b.dataset.id }, 'DELETE'); loadPks();
|
||||
}));
|
||||
} catch (e) { $('#pks').innerHTML = `<div class="row"><small class="err">${esc(e.message)}</small></div>`; }
|
||||
};
|
||||
loadPks();
|
||||
$('#addpk').onclick = () => textSheet('Add a passkey', 'Name this device', 'Create', async name => {
|
||||
try { await passkeyRegister('', name); toast('Passkey added'); loadPks(); } catch (e) { toast(e.name === 'NotAllowedError' ? 'Cancelled' : e.message); }
|
||||
});
|
||||
$('#hubout').onclick = async () => { await authPost('/api/auth/logout'); location.replace('/login'); };
|
||||
const out = $('#out'); if (out) out.onclick = () => { store.del('sf_token'); toast('Signed out'); viewSettings(); };
|
||||
}
|
||||
|
||||
// ---- In-app editor (OnlyOffice Document Server, config signed server-side with the JWT secret)
|
||||
async function viewEdit([repo, ...parts]) {
|
||||
const path = '/' + parts.join('/'), name = parts[parts.length - 1] || '';
|
||||
const back = '#/files/' + encodeURIComponent(repo) + parts.slice(0, -1).map(s => '/' + encodeURIComponent(s)).join('');
|
||||
const v = $('#view');
|
||||
v.innerHTML = `<div class="edbar"><a class="btn ghost" href="${back}">${icon('back')}Close</a><b>${esc(name)}</b></div>
|
||||
<div class="edwrap"><div id="oo"></div><p class="empty" id="oomsg">Opening…</p></div>`;
|
||||
if (!sf.token()) return (location.hash = '#/files');
|
||||
const fail = m => { const e = $('#oomsg'); if (e) { e.className = 'err'; e.textContent = m; } };
|
||||
try {
|
||||
const r = await fetch('/api/oo/config', { method: 'POST', headers: { Authorization: 'Token ' + sf.token() },
|
||||
body: JSON.stringify({ repo, path, mobile: innerWidth < 768 }) });
|
||||
const conf = await r.json();
|
||||
if (!r.ok) return fail(conf.error || 'Could not open document');
|
||||
if (!window.DocsAPI) await new Promise((ok, no) => {
|
||||
const s = document.createElement('script'); s.src = cfg.onlyoffice + '/web-apps/apps/api/documents/api.js';
|
||||
s.onload = ok; s.onerror = () => no(new Error('Could not load the OnlyOffice editor from ' + cfg.onlyoffice)); document.head.appendChild(s);
|
||||
});
|
||||
if (!location.hash.startsWith('#/edit/')) return;
|
||||
$('#oomsg').remove();
|
||||
conf.events = { onError: e => toast('Editor error: ' + (e.data?.errorDescription || e.data?.errorCode || '')) };
|
||||
editor = new DocsAPI.DocEditor('oo', conf);
|
||||
} catch (e) { fail(e.message); }
|
||||
}
|
||||
|
||||
// ---- Files
|
||||
function viewFiles([repo, ...parts]) {
|
||||
if (!sf.token()) return filesLogin();
|
||||
const dir = '/' + parts.join('/');
|
||||
$('#view').innerHTML = `<div class="wrap"><h1>Files</h1><div class="files ${repo ? 'open' : ''}" id="files">
|
||||
<div class="libs" id="libs"><p class="empty">Loading…</p></div><div class="main" id="fmain"></div></div></div>`;
|
||||
loadLibs(repo);
|
||||
if (repo) loadDir(repo, dir);
|
||||
}
|
||||
|
||||
function filesLogin(msg = '', needOtp = false) {
|
||||
$('#view').innerHTML = `<div class="wrap"><h1>Files</h1><p class="sub">Sign in to ${esc(new URL(cfg.seafile).host)}</p>
|
||||
<form class="card" id="lf"><label>Email / username</label><input type="text" name="u" autocomplete="username" autocapitalize="off" required>
|
||||
<label>Password</label><input type="password" name="p" autocomplete="current-password" required>
|
||||
${needOtp ? '<label>2FA code</label><input type="text" name="o" inputmode="numeric" autocomplete="one-time-code">' : ''}
|
||||
<div class="bar"><button class="btn" type="submit">Sign in</button></div><div class="err">${esc(msg)}</div></form></div>`;
|
||||
$('#lf').onsubmit = async e => {
|
||||
e.preventDefault();
|
||||
const f = new FormData(e.target);
|
||||
try { await sf.login(f.get('u'), f.get('p'), f.get('o')); route(); }
|
||||
catch (err) { filesLogin(err.message, !!err.otp || needOtp); }
|
||||
};
|
||||
}
|
||||
|
||||
async function loadLibs(active) {
|
||||
try {
|
||||
const repos = (await sf.req('/api2/repos/')).sort((a, b) => a.name.localeCompare(b.name));
|
||||
$('#libs').innerHTML = `<div class="bar" style="margin-top:0"><button class="btn ghost" id="nl">${icon('newdir')}New library</button></div><h2 style="margin-top:8px">Libraries</h2><div class="list">${repos.map(r => `
|
||||
<a class="row" href="#/files/${encodeURIComponent(r.id)}" ${r.id === active ? 'style="background:var(--panel2)"' : ''}>
|
||||
<span class="ic" style="background:#2f9e6e">${icon('files')}</span>
|
||||
<span class="grow"><b>${esc(r.name)}</b><small>${r.encrypted ? 'Encrypted · ' : ''}${esc(r.type === 'repo' ? 'Mine' : r.owner_name || r.owner || 'Shared')}</small></span>${icon('chev', 'chev')}</a>`).join('') || '<p class="empty">No libraries</p>'}</div>`;
|
||||
$('#nl').onclick = () => textSheet('New library', 'Library name', 'Create', async name => {
|
||||
try { const r = await sf.req('/api2/repos/', { method: 'POST', body: new URLSearchParams({ name }), headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }); location.hash = '#/files/' + encodeURIComponent(r.repo_id); }
|
||||
catch (e) { toast(e.message); }
|
||||
});
|
||||
if (!active) return;
|
||||
const r = repos.find(x => x.id === active);
|
||||
if (r && r.encrypted) $('#fmain').innerHTML = '<p class="empty">This library is encrypted. Unlock it in the Seafile web UI first.</p>';
|
||||
} catch (e) { $('#libs').innerHTML = `<p class="err">${esc(e.message)}</p>`; if (!sf.token()) setTimeout(route, 800); }
|
||||
}
|
||||
|
||||
async function loadDir(repo, dir) {
|
||||
const main = $('#fmain');
|
||||
const enc = encodeURIComponent;
|
||||
const hash = p => '#/files/' + enc(repo) + p.split('/').filter(Boolean).map(s => '/' + enc(s)).join('');
|
||||
const segs = dir.split('/').filter(Boolean);
|
||||
const crumbs = [`<button onclick="location.hash='#/files/${enc(repo)}'">Library</button>`].concat(segs.map((s, i) =>
|
||||
`<span>/</span><button onclick="location.hash='${hash('/' + segs.slice(0, i + 1).join('/'))}'">${esc(s)}</button>`)).join('');
|
||||
main.innerHTML = `<div class="bar">
|
||||
<a class="btn ghost backbtn" href="#/files">${icon('back')}Libraries</a>
|
||||
<label class="btn ghost" style="margin:0;color:var(--text)">${icon('up')}Upload<input id="up" type="file" multiple hidden></label>
|
||||
<button class="btn ghost" id="mk">${icon('newdir')}New…</button></div>
|
||||
<div class="crumbs">${crumbs}</div><div id="items"><p class="empty">Loading…</p></div>`;
|
||||
const create = async (path, op, extra = {}, kind = 'file') => {
|
||||
try { await sf.req(`/api2/repos/${enc(repo)}/${kind}/?p=${enc(path)}`, { method: 'POST', body: new URLSearchParams({ operation: op, ...extra }), headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }); loadDir(repo, dir); }
|
||||
catch (e) { toast(e.message); }
|
||||
};
|
||||
$('#mk').onclick = () => actionSheet('Create new', '', [
|
||||
{ label: 'Folder', icon: 'newdir', run: () => textSheet('New folder', 'Folder name', 'Create', n => create(joinP(dir, n), 'mkdir', {}, 'dir')) },
|
||||
...[['Document', 'docx'], ['Spreadsheet', 'xlsx'], ['Presentation', 'pptx'], ['Text file', 'txt']].map(([label, x]) => ({ label, icon: 'doc',
|
||||
run: () => textSheet('New ' + label.toLowerCase(), 'File name', 'Create', async n => {
|
||||
const name = n.toLowerCase().endsWith('.' + x) ? n : n + '.' + x;
|
||||
await create(joinP(dir, name), 'create');
|
||||
if (EDIT_EXT.has(x) && cfg.editor && x !== 'txt') openFile(repo, joinP(dir, name), name, dir);
|
||||
}) })),
|
||||
]);
|
||||
$('#up').onchange = async e => {
|
||||
const files = [...e.target.files]; if (!files.length) return;
|
||||
try {
|
||||
const link = await sf.req(`/api2/repos/${enc(repo)}/upload-link/?p=${enc(dir)}`);
|
||||
const u = new URL(link, cfg.seafile);
|
||||
for (const f of files) {
|
||||
toast('Uploading ' + f.name + '…');
|
||||
const fd = new FormData(); fd.append('parent_dir', dir); fd.append('file', f);
|
||||
const r = await fetch('/sf' + u.pathname + '?ret-json=1', { method: 'POST', body: fd });
|
||||
if (!r.ok) throw new Error('Upload failed: ' + f.name);
|
||||
}
|
||||
toast('Uploaded'); loadDir(repo, dir);
|
||||
} catch (err) { toast(err.message); }
|
||||
};
|
||||
try {
|
||||
const items = await sf.req(`/api2/repos/${enc(repo)}/dir/?p=${enc(dir)}`);
|
||||
items.sort((a, b) => (a.type === b.type ? a.name.localeCompare(b.name) : a.type === 'dir' ? -1 : 1));
|
||||
$('#items').innerHTML = items.length ? `<div class="list">${items.map((it, i) => it.type === 'dir'
|
||||
? `<div class="row it"><a class="rmain" href="${hash(joinP(dir, it.name))}"><span class="ic" style="background:#e0a82b">${icon('files')}</span><span class="grow"><b>${esc(it.name)}</b><small>${fmtDate(it.mtime)}</small></span></a><button class="ibtn" data-i="${i}" aria-label="Actions for ${esc(it.name)}">${icon('more')}</button></div>`
|
||||
: `<div class="row it"><button class="rmain" data-open="${i}"><span class="ic" style="background:${OFFICE_EXT.has(ext(it.name)) ? '#e0742b' : '#6a7280'}">${icon('file')}</span><span class="grow"><b>${esc(it.name)}</b><small>${fmtSize(it.size)} · ${fmtDate(it.mtime)}</small></span></button><button class="ibtn" data-i="${i}" aria-label="Actions for ${esc(it.name)}">${icon('more')}</button></div>`).join('')}</div>`
|
||||
: '<p class="empty">This folder is empty</p>';
|
||||
const itemSheet = it => it.type === 'dir' ? dirSheet(repo, joinP(dir, it.name), it.name, dir) : fileSheet(repo, joinP(dir, it.name), it.name, dir);
|
||||
$('#items').querySelectorAll('button[data-i]').forEach(b => b.onclick = () => itemSheet(items[b.dataset.i]));
|
||||
$('#items').querySelectorAll('button[data-open]').forEach(b => b.onclick = () => openFile(repo, joinP(dir, items[b.dataset.open].name), items[b.dataset.open].name, dir));
|
||||
} catch (e) { $('#items').innerHTML = `<p class="err">${esc(e.message)}</p>`; }
|
||||
}
|
||||
|
||||
const joinP = (d, n) => (d === '/' ? '' : d) + '/' + n;
|
||||
|
||||
// ---- Bottom sheet (dialog on tablet/desktop). Body content is built by the caller from trusted/escaped HTML.
|
||||
function openSheet(title, sub, bodyHtml) {
|
||||
closeSheet();
|
||||
const el = document.createElement('div');
|
||||
el.id = 'sheet';
|
||||
el.innerHTML = `<div class="scrim"></div><div class="sheet" role="dialog" aria-modal="true" aria-label="${esc(title)}">
|
||||
<div class="grip"></div><h3>${esc(title)}</h3>${sub ? `<p class="sub">${esc(sub)}</p>` : ''}${bodyHtml}</div>`;
|
||||
document.body.appendChild(el);
|
||||
el.querySelector('.scrim').onclick = closeSheet;
|
||||
requestAnimationFrame(() => el.classList.add('on'));
|
||||
return el;
|
||||
}
|
||||
function closeSheet() { document.getElementById('sheet')?.remove(); }
|
||||
addEventListener('keydown', e => { if (e.key === 'Escape') closeSheet(); });
|
||||
|
||||
function actionSheet(title, sub, actions) {
|
||||
const el = openSheet(title, sub, `<div class="list">${actions.map((a, i) => `
|
||||
<button class="row ${a.danger ? 'dng' : ''}" data-i="${i}">${icon(a.icon)}<span class="grow"><b>${esc(a.label)}</b></span></button>`).join('')}</div>
|
||||
<div class="bar"><button class="btn ghost" id="sx" style="flex:1;justify-content:center">Cancel</button></div>`);
|
||||
el.querySelector('#sx').onclick = closeSheet;
|
||||
el.querySelectorAll('button.row').forEach(b => b.onclick = () => { closeSheet(); actions[b.dataset.i].run(); });
|
||||
}
|
||||
|
||||
function textSheet(title, label, okLabel, onOk, initial = '') {
|
||||
const el = openSheet(title, '', `<form><label>${esc(label)}</label><input type="text" id="tv" autocapitalize="off" autocomplete="off" required value="${esc(initial)}">
|
||||
<div class="bar"><button class="btn ghost" type="button" id="sx" style="flex:1;justify-content:center">Cancel</button>
|
||||
<button class="btn" style="flex:1;justify-content:center">${esc(okLabel)}</button></div></form>`);
|
||||
el.querySelector('#sx').onclick = closeSheet;
|
||||
el.querySelector('form').onsubmit = e => { e.preventDefault(); const v = el.querySelector('#tv').value.trim(); if (v) { closeSheet(); onOk(v); } };
|
||||
setTimeout(() => { const t = el.querySelector('#tv'); t.focus(); const d = initial.lastIndexOf('.'); t.setSelectionRange(0, d > 0 ? d : initial.length); }, 50);
|
||||
}
|
||||
|
||||
function confirmSheet(title, sub, okLabel, onOk) {
|
||||
const el = openSheet(title, sub, `<div class="bar"><button class="btn ghost" id="sx" style="flex:1;justify-content:center">Cancel</button>
|
||||
<button class="btn" id="so" style="flex:1;justify-content:center;background:var(--danger);color:#fff">${esc(okLabel)}</button></div>`);
|
||||
el.querySelector('#sx').onclick = closeSheet;
|
||||
el.querySelector('#so').onclick = () => { closeSheet(); onOk(); };
|
||||
}
|
||||
|
||||
// ---- File actions
|
||||
const PREVIEW = { img: 'jpg jpeg png gif webp svg bmp heic', pdf: 'pdf', video: 'mp4 mov m4v webm', audio: 'mp3 m4a wav flac ogg aac' };
|
||||
const previewKind = n => Object.keys(PREVIEW).find(k => PREVIEW[k].split(' ').includes(ext(n)));
|
||||
const FORM = { 'Content-Type': 'application/x-www-form-urlencoded' };
|
||||
const encP = p => p.split('/').map(encodeURIComponent).join('/');
|
||||
const fileUrl = async (repo, path) => { const u = new URL(await sf.req(`/api2/repos/${encodeURIComponent(repo)}/file/?p=${encodeURIComponent(path)}&reuse=1`), cfg.seafile); return '/sf' + u.pathname; };
|
||||
|
||||
// Recently opened files, shown on Home (kept in this browser only).
|
||||
function addRecent(repo, path, name) {
|
||||
const r = store.get('recents', []).filter(x => !(x.repo === repo && x.path === path));
|
||||
r.unshift({ repo, path, name, t: Date.now() }); store.set('recents', r.slice(0, 12));
|
||||
}
|
||||
|
||||
// Default tap on a file: edit documents, preview media, otherwise show the actions.
|
||||
function openFile(repo, path, name, dir) {
|
||||
if (cfg.editor && EDIT_EXT.has(ext(name)) && ext(name) !== 'txt') { addRecent(repo, path, name); location.hash = '#/edit/' + encodeURIComponent(repo) + path.split('/').map(s => '/' + encodeURIComponent(s)).join(''); }
|
||||
else if (previewKind(name)) previewFile(repo, path, name);
|
||||
else fileSheet(repo, path, name, dir);
|
||||
}
|
||||
|
||||
async function previewFile(repo, path, name) {
|
||||
addRecent(repo, path, name);
|
||||
try {
|
||||
const url = (await fileUrl(repo, path)) + '?hubinline=1', kind = previewKind(name);
|
||||
const media = kind === 'img' ? `<img src="${url}" alt="${esc(name)}" style="max-width:100%;max-height:70dvh;border-radius:12px;display:block;margin:8px auto">`
|
||||
: kind === 'pdf' ? `<iframe src="${url}" title="${esc(name)}" style="width:100%;height:70dvh;border:0;border-radius:12px;background:#fff"></iframe>`
|
||||
: kind === 'video' ? `<video src="${url}" controls playsinline style="width:100%;max-height:70dvh;border-radius:12px;background:#000"></video>`
|
||||
: `<audio src="${url}" controls style="width:100%;margin:12px 0"></audio>`;
|
||||
const el = openSheet(name, '', `${media}<div class="bar"><a class="btn ghost" href="${url.replace('?hubinline=1', '')}" target="_blank" rel="noopener">${icon('dl')}Open</a><button class="btn ghost" id="sx">Close</button></div>`);
|
||||
el.querySelector('.sheet').classList.add('wide'); el.querySelector('#sx').onclick = closeSheet;
|
||||
} catch (e) { toast(e.message); }
|
||||
}
|
||||
|
||||
async function shareLink(repo, path, isDir) {
|
||||
const p = isDir ? path.replace(/\/?$/, '/') : path;
|
||||
try {
|
||||
let link;
|
||||
try { link = (await sf.req('/api/v2.1/share-links/', { method: 'POST', headers: FORM, body: new URLSearchParams({ repo_id: repo, path: p }) })).link; }
|
||||
catch { link = (await sf.req(`/api/v2.1/share-links/?repo_id=${encodeURIComponent(repo)}&path=${encodeURIComponent(p)}`))[0]?.link; }
|
||||
if (!link) throw new Error('Could not create a share link');
|
||||
const el = openSheet('Share link', p.split('/').filter(Boolean).pop() || '', `<input type="text" readonly id="sl" value="${esc(link)}" onfocus="this.select()">
|
||||
<div class="bar"><button class="btn" id="cp1" style="flex:1;justify-content:center">${icon('copy')}Copy</button>${navigator.share ? '<button class="btn ghost" id="sh1" style="flex:1;justify-content:center">Share…</button>' : ''}</div>`);
|
||||
el.querySelector('#cp1').onclick = async () => { try { await navigator.clipboard.writeText(link); toast('Link copied'); closeSheet(); } catch { el.querySelector('#sl').select(); toast('Press copy on the selected link'); } };
|
||||
const sh = el.querySelector('#sh1'); if (sh) sh.onclick = () => navigator.share({ url: link }).catch(() => {});
|
||||
} catch (e) { toast(e.message); }
|
||||
}
|
||||
|
||||
function renameItem(repo, path, name, dir, isDir) {
|
||||
textSheet('Rename', 'New name', 'Rename', async n => {
|
||||
try { await sf.req(`/api2/repos/${encodeURIComponent(repo)}/${isDir ? 'dir' : 'file'}/?p=${encodeURIComponent(path)}`, { method: 'POST', headers: FORM, body: new URLSearchParams({ operation: 'rename', newname: n }) }); toast('Renamed'); loadDir(repo, dir); }
|
||||
catch (e) { toast(e.message); }
|
||||
}, name);
|
||||
}
|
||||
|
||||
// Folder picker for Move (same library).
|
||||
function moveItem(repo, name, dir) {
|
||||
let at = dir;
|
||||
const el = openSheet('Move to…', name, '<div id="pf"></div>');
|
||||
const draw = async () => {
|
||||
const box = el.querySelector('#pf');
|
||||
box.innerHTML = '<p class="empty">Loading…</p>';
|
||||
try {
|
||||
const subs = (await sf.req(`/api2/repos/${encodeURIComponent(repo)}/dir/?p=${encodeURIComponent(at)}`)).filter(x => x.type === 'dir' && joinP(at, x.name) !== joinP(dir, name));
|
||||
box.innerHTML = `<p class="sub" style="word-break:break-all">${esc(at)}</p><div class="list" style="background:var(--panel2);border:0;max-height:40dvh;overflow:auto">
|
||||
${at !== '/' ? `<button class="row" data-up="1">${icon('back')}<span class="grow"><b>Up</b></span></button>` : ''}
|
||||
${subs.map(x => `<button class="row" data-d="${esc(x.name)}">${icon('files')}<span class="grow"><b>${esc(x.name)}</b></span>${icon('chev', 'chev')}</button>`).join('')}</div>
|
||||
<div class="bar"><button class="btn ghost" id="sx" style="flex:1;justify-content:center">Cancel</button><button class="btn" id="mv" style="flex:1;justify-content:center"${at === dir ? ' disabled' : ''}>Move here</button></div>`;
|
||||
box.querySelectorAll('[data-d]').forEach(b => b.onclick = () => { at = joinP(at, b.dataset.d); draw(); });
|
||||
const up = box.querySelector('[data-up]'); if (up) up.onclick = () => { at = at.slice(0, at.lastIndexOf('/')) || '/'; draw(); };
|
||||
box.querySelector('#sx').onclick = closeSheet;
|
||||
box.querySelector('#mv').onclick = async () => {
|
||||
try { await sf.req('/api/v2.1/repos/sync-batch-move-item/', { method: 'POST', headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ src_repo_id: repo, src_parent_dir: dir, dst_repo_id: repo, dst_parent_dir: at, src_dirents: [name] }) });
|
||||
closeSheet(); toast('Moved'); loadDir(repo, dir); } catch (e) { toast(e.message); }
|
||||
};
|
||||
} catch (e) { box.innerHTML = `<p class="err">${esc(e.message)}</p>`; }
|
||||
};
|
||||
draw();
|
||||
}
|
||||
|
||||
function fileSheet(repo, path, name, dir) {
|
||||
const enc = encodeURIComponent, acts = [];
|
||||
if (previewKind(name)) acts.push({ label: 'Preview', icon: 'doc', run: () => previewFile(repo, path, name) });
|
||||
if (cfg.editor && EDIT_EXT.has(ext(name))) acts.push({ label: 'Edit here', icon: 'edit', run: () => { addRecent(repo, path, name); location.hash = '#/edit/' + enc(repo) + path.split('/').map(s => '/' + enc(s)).join(''); } });
|
||||
if (OFFICE_EXT.has(ext(name))) acts.push({ label: 'Open in Seafile', icon: 'doc', run: () => window.open(`${cfg.seafile}/lib/${enc(repo)}/file${path.split('/').map(enc).join('/')}`, '_blank', 'noopener') });
|
||||
acts.push({ label: 'Share link', icon: 'copy', run: () => shareLink(repo, path, false) });
|
||||
acts.push({ label: 'Rename', icon: 'edit', run: () => renameItem(repo, path, name, dir, false) });
|
||||
acts.push({ label: 'Move', icon: 'files', run: () => moveItem(repo, name, dir) });
|
||||
acts.push({ label: 'Download', icon: 'dl', run: async () => {
|
||||
try { const url = await sf.req(`/api2/repos/${enc(repo)}/file/?p=${enc(path)}&reuse=1`); window.open(url, '_blank', 'noopener'); }
|
||||
catch (e) { toast(e.message); } } });
|
||||
acts.push({ label: 'Delete', icon: 'trash', danger: true, run: () =>
|
||||
confirmSheet('Delete file?', name, 'Delete', async () => {
|
||||
try { await sf.req(`/api2/repos/${enc(repo)}/file/?p=${enc(path)}`, { method: 'DELETE' }); toast('Deleted'); loadDir(repo, dir); }
|
||||
catch (e) { toast(e.message); } }) });
|
||||
actionSheet(name, '', acts);
|
||||
}
|
||||
|
||||
function dirSheet(repo, path, name, dir) {
|
||||
actionSheet(name, 'Folder', [
|
||||
{ label: 'Share link', icon: 'copy', run: () => shareLink(repo, path, true) },
|
||||
{ label: 'Rename', icon: 'edit', run: () => renameItem(repo, path, name, dir, true) },
|
||||
{ label: 'Move', icon: 'files', run: () => moveItem(repo, name, dir) },
|
||||
{ label: 'Delete', icon: 'trash', danger: true, run: () => confirmSheet('Delete folder?', name + ' and everything in it', 'Delete', async () => {
|
||||
try { await sf.req(`/api2/repos/${encodeURIComponent(repo)}/dir/?p=${encodeURIComponent(path)}`, { method: 'DELETE' }); toast('Deleted'); loadDir(repo, dir); }
|
||||
catch (e) { toast(e.message); } }) },
|
||||
]);
|
||||
}
|
||||
|
||||
// ---- Boot
|
||||
(async () => {
|
||||
try { cfg = { ...cfg, ...(await (await fetch('/api/config')).json()) }; } catch {}
|
||||
addEventListener('hashchange', route);
|
||||
route();
|
||||
if ('serviceWorker' in navigator) navigator.serviceWorker.register('/sw.js').catch(() => {});
|
||||
})();
|
||||
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><rect width="512" height="512" fill="#4f7cff"/><g fill="#fff"><rect x="120" y="120" width="120" height="120" rx="28"/><rect x="272" y="120" width="120" height="120" rx="28" opacity=".7"/><rect x="120" y="272" width="120" height="120" rx="28" opacity=".7"/><rect x="272" y="272" width="120" height="120" rx="28"/></g></svg>
|
||||
|
After Width: | Height: | Size: 385 B |
@@ -0,0 +1,26 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
|
||||
<meta name="theme-color" content="#0f1115">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<meta name="mobile-web-app-capable" content="yes">
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
|
||||
<meta name="apple-mobile-web-app-title" content="NE Hub">
|
||||
<link rel="manifest" href="/manifest.webmanifest">
|
||||
<link rel="icon" href="/icon.svg">
|
||||
<link rel="apple-touch-icon" href="/icon.svg">
|
||||
<link rel="stylesheet" href="/style.css">
|
||||
<title>NE Hub</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="shell">
|
||||
<nav id="nav" aria-label="Main"></nav>
|
||||
<div id="main"><main id="view"></main><div id="player" hidden></div></div>
|
||||
</div>
|
||||
<div id="toast" role="status"></div>
|
||||
<script src="/webauthn.js"></script>
|
||||
<script src="/app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,30 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
|
||||
<meta name="theme-color" content="#0f1115">
|
||||
<link rel="icon" href="/icon.svg">
|
||||
<link rel="apple-touch-icon" href="/icon.svg">
|
||||
<link rel="stylesheet" href="/style.css">
|
||||
<title>Sign in · NE Hub</title>
|
||||
<style>
|
||||
body { display: grid; place-items: center; min-height: 100dvh; padding: 24px; }
|
||||
.box { width: 100%; max-width: 380px; text-align: center; }
|
||||
.box img { width: 72px; height: 72px; border-radius: 18px; margin-bottom: 16px; }
|
||||
.box .btn { width: 100%; justify-content: center; min-height: 52px; font-size: 17px; }
|
||||
.box form { text-align: left; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="box">
|
||||
<img src="/icon.svg" alt="">
|
||||
<h1>NE Hub</h1>
|
||||
<p class="sub" id="sub"> </p>
|
||||
<div id="ui"></div>
|
||||
<div class="err" id="err" role="alert"></div>
|
||||
</div>
|
||||
<script src="/webauthn.js"></script>
|
||||
<script src="/login.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,30 @@
|
||||
const $ = s => document.querySelector(s);
|
||||
const fail = e => { $('#err').textContent = e && e.name === 'NotAllowedError' ? 'Cancelled. Try again.' : (e.message || String(e)); };
|
||||
|
||||
async function signIn() {
|
||||
$('#err').textContent = '';
|
||||
try { await passkeyLogin(); location.replace('/'); } catch (e) { fail(e); }
|
||||
}
|
||||
|
||||
async function init() {
|
||||
if (!window.PublicKeyCredential) { $('#sub').textContent = ''; return fail(new Error('This browser does not support passkeys.')); }
|
||||
const st = await (await fetch('/api/auth/state')).json();
|
||||
if (st.authed) return location.replace('/');
|
||||
if (st.registered) {
|
||||
$('#sub').textContent = 'Sign in with your passkey';
|
||||
$('#ui').innerHTML = '<button class="btn" id="go">Sign in with passkey</button>';
|
||||
$('#go').onclick = signIn;
|
||||
signIn(); // prompt straight away; the button is there if it's dismissed
|
||||
} else {
|
||||
$('#sub').textContent = 'First-time setup: create a passkey for this device';
|
||||
$('#ui').innerHTML = `<form id="f"><label for="sc">Setup code (from the server log or HUB_SETUP_CODE)</label>
|
||||
<input type="text" id="sc" autocomplete="off" autocapitalize="off" required>
|
||||
<label for="nm">Name this passkey</label><input type="text" id="nm" value="${/iPad|iPhone/.test(navigator.userAgent) ? 'iPhone/iPad' : 'This device'}" autocomplete="off">
|
||||
<div class="bar"><button class="btn">Create passkey</button></div></form>`;
|
||||
$('#f').onsubmit = async e => {
|
||||
e.preventDefault(); $('#err').textContent = '';
|
||||
try { await passkeyRegister($('#sc').value.trim(), $('#nm').value.trim() || 'Passkey'); location.replace('/'); } catch (err) { fail(err); }
|
||||
};
|
||||
}
|
||||
}
|
||||
init().catch(fail);
|
||||
@@ -0,0 +1,11 @@
|
||||
{
|
||||
"name": "NE Hub",
|
||||
"short_name": "NE Hub",
|
||||
"start_url": "/",
|
||||
"display": "standalone",
|
||||
"background_color": "#0f1115",
|
||||
"theme_color": "#0f1115",
|
||||
"icons": [
|
||||
{ "src": "/icon.svg", "sizes": "any", "type": "image/svg+xml", "purpose": "any maskable" }
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,193 @@
|
||||
:root {
|
||||
--bg: #f5f6f8; --panel: #fff; --panel2: #eef0f4; --text: #14171c; --muted: #6a7280;
|
||||
--line: #e0e3e9; --accent: #3d6bf0; --accent-t: #fff; --danger: #d4392f;
|
||||
--nav-h: 58px; --rail-w: 76px;
|
||||
--sat: env(safe-area-inset-top); --sab: env(safe-area-inset-bottom);
|
||||
--sal: env(safe-area-inset-left); --sar: env(safe-area-inset-right);
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root { --bg: #0f1115; --panel: #181b21; --panel2: #20242c; --text: #eceef2; --muted: #8b93a3; --line: #272c35; --accent: #6a8cff; --accent-t: #0b1020; --danger: #ff6b60; }
|
||||
}
|
||||
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
|
||||
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text);
|
||||
font: 16px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
|
||||
button, input, select { font: inherit; color: inherit; }
|
||||
button { cursor: pointer; }
|
||||
a { color: inherit; text-decoration: none; }
|
||||
svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
|
||||
|
||||
/* Mobile first: content on top, tab bar at the bottom */
|
||||
#shell { display: flex; flex-direction: column; height: 100dvh; }
|
||||
#view { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
|
||||
padding: calc(var(--sat) + 16px) calc(var(--sar) + 16px) 24px calc(var(--sal) + 16px); }
|
||||
#nav { order: 2; display: flex; background: var(--panel); border-top: 1px solid var(--line);
|
||||
padding: 0 var(--sar) var(--sab) var(--sal); }
|
||||
#nav a { flex: 1; min-height: var(--nav-h); display: flex; flex-direction: column; align-items: center;
|
||||
justify-content: center; gap: 2px; font-size: 11px; color: var(--muted); }
|
||||
#nav a.on { color: var(--accent); }
|
||||
.brand { display: none; }
|
||||
|
||||
h1 { font-size: 28px; margin: 0 0 4px; letter-spacing: -.02em; }
|
||||
h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 28px 0 10px; }
|
||||
.sub { color: var(--muted); margin: 0 0 8px; }
|
||||
.wrap { max-width: 1100px; margin: 0 auto; }
|
||||
|
||||
.grid { display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); }
|
||||
.tile { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 16px;
|
||||
display: flex; flex-direction: column; gap: 10px; min-height: 108px; text-align: left; }
|
||||
.tile:active, .row:active { background: var(--panel2); }
|
||||
.tile .ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: #fff; }
|
||||
.tile b { font-weight: 600; }
|
||||
.tile small { color: var(--muted); font-size: 13px; word-break: break-all; }
|
||||
|
||||
.list { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
|
||||
.row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; min-height: 56px; width: 100%;
|
||||
background: none; border: 0; border-bottom: 1px solid var(--line); text-align: left; }
|
||||
.row:last-child { border-bottom: 0; }
|
||||
.row .grow { flex: 1; min-width: 0; }
|
||||
.row .grow b, .row .grow small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.row small { color: var(--muted); }
|
||||
.row .ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: #fff; flex: none; }
|
||||
.chev { color: var(--muted); width: 18px; height: 18px; }
|
||||
|
||||
.btn { background: var(--accent); color: var(--accent-t); border: 0; border-radius: 12px; padding: 0 16px;
|
||||
min-height: 44px; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; }
|
||||
.btn.ghost { background: var(--panel2); color: var(--text); }
|
||||
.btn.danger { background: transparent; color: var(--danger); border: 1px solid var(--line); }
|
||||
.bar { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0; }
|
||||
|
||||
[hidden] { display: none !important; }
|
||||
input[type=text], input[type=password], input[type=url], input[type=email] { width: 100%; min-height: 48px; padding: 0 14px;
|
||||
border-radius: 12px; border: 1px solid var(--line); background: var(--panel); font-size: 16px; }
|
||||
label { display: block; font-size: 13px; color: var(--muted); margin: 14px 0 6px; }
|
||||
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 18px; max-width: 460px; }
|
||||
.err { color: var(--danger); margin-top: 10px; }
|
||||
|
||||
.crumbs { display: flex; gap: 6px; align-items: center; overflow-x: auto; white-space: nowrap; margin: 8px 0 12px; scrollbar-width: none; }
|
||||
.crumbs button { background: none; border: 0; padding: 6px 4px; color: var(--accent); min-height: 36px; }
|
||||
.crumbs span { color: var(--muted); }
|
||||
.empty { color: var(--muted); padding: 32px 16px; text-align: center; }
|
||||
|
||||
.frame { width: 100%; height: calc(100dvh - var(--nav-h) - var(--sat) - var(--sab) - 150px); min-height: 360px;
|
||||
border: 1px solid var(--line); border-radius: 16px; background: var(--panel); }
|
||||
|
||||
/* Files: master/detail */
|
||||
.files { display: block; }
|
||||
.files .libs { display: block; }
|
||||
.files.open .libs { display: none; }
|
||||
.files .main { display: none; }
|
||||
.files.open .main { display: block; }
|
||||
.backbtn { display: inline-flex; }
|
||||
|
||||
#toast { position: fixed; left: 50%; bottom: calc(var(--nav-h) + var(--sab) + 16px); transform: translate(-50%, 20px);
|
||||
background: var(--text); color: var(--bg); padding: 10px 16px; border-radius: 12px; opacity: 0; pointer-events: none;
|
||||
transition: .2s; max-width: 90vw; z-index: 10; }
|
||||
#toast.on { opacity: 1; transform: translate(-50%, 0); }
|
||||
|
||||
/* Tablet / iPad (incl. 12.9" portrait 1024 + landscape 1366) and desktop: side rail */
|
||||
@media (min-width: 768px) {
|
||||
#shell { flex-direction: row; }
|
||||
#nav { order: 0; flex-direction: column; width: var(--rail-w); border-top: 0; border-right: 1px solid var(--line);
|
||||
padding: calc(var(--sat) + 12px) 0 12px var(--sal); gap: 4px; }
|
||||
#nav a { flex: none; min-height: 64px; }
|
||||
.brand { display: block; width: 36px; height: 36px; margin: 4px auto 12px; }
|
||||
.brand img { width: 36px; height: 36px; border-radius: 10px; display: block; }
|
||||
.brand span { display: none; }
|
||||
#nav .spacer { flex: 1; }
|
||||
#view { padding: calc(var(--sat) + 28px) 32px 40px; }
|
||||
.grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
|
||||
#toast { bottom: 24px; }
|
||||
.frame { height: calc(100dvh - 190px); }
|
||||
}
|
||||
@media (min-width: 1024px) {
|
||||
:root { --rail-w: 220px; }
|
||||
#nav { padding: calc(var(--sat) + 16px) 12px 16px; }
|
||||
#nav a { flex-direction: row; justify-content: flex-start; gap: 12px; padding: 0 14px; border-radius: 12px; font-size: 15px; min-height: 48px; }
|
||||
#nav a.on { background: var(--panel2); }
|
||||
.brand { display: flex; align-items: center; gap: 10px; width: auto; height: auto; margin: 0 0 16px 6px; font-weight: 700; font-size: 18px; }
|
||||
.brand span { display: inline; }
|
||||
.brand img { width: 32px; height: 32px; border-radius: 9px; }
|
||||
.grid { grid-template-columns: repeat(4, 1fr); }
|
||||
.files { display: grid; grid-template-columns: 300px 1fr; gap: 24px; align-items: start; }
|
||||
.files .libs, .files.open .libs, .files .main, .files.open .main { display: block; }
|
||||
.backbtn { display: none; }
|
||||
}
|
||||
@media (hover: hover) { .tile:hover, .row:hover { background: var(--panel2); } }
|
||||
|
||||
/* Bottom sheet (mobile) / centered dialog (tablet+) */
|
||||
#sheet { position: fixed; inset: 0; z-index: 20; }
|
||||
#sheet .scrim { position: absolute; inset: 0; background: rgba(0,0,0,.5); opacity: 0; transition: opacity .2s; }
|
||||
#sheet .sheet { position: absolute; left: 0; right: 0; bottom: 0; background: var(--panel); border-radius: 20px 20px 0 0;
|
||||
padding: 8px 16px calc(var(--sab) + 16px); transform: translateY(100%); transition: transform .22s ease; max-height: 85dvh; overflow-y: auto; }
|
||||
#sheet.on .scrim { opacity: 1; }
|
||||
#sheet.on .sheet { transform: none; }
|
||||
#sheet .grip { width: 40px; height: 4px; border-radius: 2px; background: var(--line); margin: 4px auto 12px; }
|
||||
#sheet h3 { margin: 0 0 4px; font-size: 18px; word-break: break-all; }
|
||||
#sheet .list { background: var(--panel2); border: 0; margin-top: 8px; }
|
||||
#sheet .row.dng { color: var(--danger); }
|
||||
@media (min-width: 768px) {
|
||||
#sheet .sheet { left: 50%; right: auto; bottom: auto; top: 50%; width: 420px; border-radius: 20px;
|
||||
padding: 20px; transform: translate(-50%, -46%); opacity: 0; transition: .18s; }
|
||||
#sheet.on .sheet { transform: translate(-50%, -50%); opacity: 1; }
|
||||
#sheet .grip { display: none; }
|
||||
}
|
||||
|
||||
/* Full-bleed editor: hide the tab bar/rail so the editor gets the screen */
|
||||
body.editing #nav { display: none; }
|
||||
body.editing #view { padding: 0; display: flex; flex-direction: column; }
|
||||
.edbar { display: flex; align-items: center; gap: 12px; padding: calc(var(--sat) + 8px) calc(var(--sar) + 12px) 8px calc(var(--sal) + 12px); background: var(--panel); border-bottom: 1px solid var(--line); }
|
||||
.edbar b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.edwrap { flex: 1; min-height: 0; position: relative; }
|
||||
.edwrap iframe, .edwrap #oo { width: 100%; height: 100%; border: 0; }
|
||||
|
||||
/* Music */
|
||||
#main { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
|
||||
.seg { display: flex; gap: 6px; margin: 12px 0; overflow-x: auto; }
|
||||
.seg a { padding: 8px 16px; border-radius: 999px; background: var(--panel2); color: var(--muted); white-space: nowrap; min-height: 40px; display: flex; align-items: center; }
|
||||
.seg a.on { background: var(--accent); color: var(--accent-t); font-weight: 600; }
|
||||
.agrid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
|
||||
.acard { display: block; min-width: 0; }
|
||||
.acard .art { width: 100%; aspect-ratio: 1; border-radius: 12px; background: var(--panel2); object-fit: cover; display: block; }
|
||||
.acard.round .art { border-radius: 50%; }
|
||||
.acard b, .acard small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 6px; }
|
||||
.acard small { color: var(--muted); margin-top: 0; font-size: 13px; }
|
||||
.mhead { display: flex; gap: 16px; align-items: flex-end; margin-bottom: 8px; }
|
||||
.mhead .art { width: 38vw; max-width: 200px; aspect-ratio: 1; border-radius: 14px; background: var(--panel2); object-fit: cover; flex: none; }
|
||||
.mhead h1 { font-size: 24px; word-break: break-word; }
|
||||
.num { width: 28px; text-align: right; color: var(--muted); flex: none; font-variant-numeric: tabular-nums; }
|
||||
.row.playing b { color: var(--accent); }
|
||||
input[type=search] { width: 100%; min-height: 44px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); font-size: 16px; }
|
||||
|
||||
#player { background: var(--panel); border-top: 1px solid var(--line); }
|
||||
#player[hidden] { display: none; }
|
||||
.mini { display: flex; align-items: center; gap: 10px; padding: 8px 12px 8px calc(var(--sal) + 12px); position: relative; }
|
||||
.mini .art { width: 44px; height: 44px; border-radius: 8px; background: var(--panel2); object-fit: cover; flex: none; }
|
||||
.mini .meta { flex: 1; min-width: 0; text-align: left; background: none; border: 0; padding: 0; }
|
||||
.mini .meta b, .mini .meta small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.mini .meta small { color: var(--muted); }
|
||||
.ibtn { background: none; border: 0; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; }
|
||||
.ibtn:active { background: var(--panel2); }
|
||||
.ibtn.big { width: 64px; height: 64px; background: var(--accent); color: var(--accent-t); }
|
||||
.ibtn.big svg { width: 30px; height: 30px; }
|
||||
.mini .bar2 { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--line); }
|
||||
.mini .bar2 i { display: block; height: 100%; background: var(--accent); width: 0; }
|
||||
.np { text-align: center; }
|
||||
.np .art { width: min(72vw, 300px); aspect-ratio: 1; border-radius: 16px; object-fit: cover; background: var(--panel2); margin: 8px auto 16px; display: block; }
|
||||
.np input[type=range] { width: 100%; accent-color: var(--accent); }
|
||||
.np .times { display: flex; justify-content: space-between; color: var(--muted); font-size: 13px; }
|
||||
.np .ctl { display: flex; justify-content: center; align-items: center; gap: 12px; margin-top: 8px; }
|
||||
|
||||
/* File rows with an actions button */
|
||||
.row.it { padding: 4px 4px 4px 16px; }
|
||||
.row.it .rmain { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; background: none; border: 0; padding: 8px 0; text-align: left; min-height: 48px; }
|
||||
.row.it .rmain .grow b, .row.it .rmain .grow small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
#sheet .sheet.wide { max-height: 92dvh; }
|
||||
@media (min-width: 768px) { #sheet .sheet.wide { width: min(720px, 92vw); } }
|
||||
#sheet input[readonly] { margin-top: 8px; }
|
||||
|
||||
.searchbar { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 14px; margin: 12px 0 4px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); color: var(--muted); }
|
||||
.card2 { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; }
|
||||
.card2 .art { object-fit: cover; }
|
||||
.row .art { object-fit: cover; flex: none; background: var(--panel2); }
|
||||
|
||||
.dot { width: 12px; height: 12px; border-radius: 50%; flex: none; }
|
||||
@@ -0,0 +1,20 @@
|
||||
// App-shell cache only; Seafile/API traffic always goes to the network.
|
||||
const CACHE = 'hub-v3';
|
||||
const SHELL = ['/', '/style.css', '/app.js', '/icon.svg', '/manifest.webmanifest'];
|
||||
|
||||
self.addEventListener('install', e => {
|
||||
e.waitUntil(caches.open(CACHE).then(c => c.addAll(SHELL)));
|
||||
self.skipWaiting();
|
||||
});
|
||||
self.addEventListener('activate', e => {
|
||||
e.waitUntil(caches.keys().then(ks => Promise.all(ks.filter(k => k !== CACHE).map(k => caches.delete(k)))));
|
||||
self.clients.claim();
|
||||
});
|
||||
self.addEventListener('fetch', e => {
|
||||
const u = new URL(e.request.url);
|
||||
if (e.request.method !== 'GET' || u.origin !== location.origin || u.pathname.startsWith('/sf/') || u.pathname.startsWith('/plex/') || u.pathname.startsWith('/api/')) return;
|
||||
e.respondWith(fetch(e.request).then(r => {
|
||||
if (r.ok) { const copy = r.clone(); caches.open(CACHE).then(c => c.put(e.request, copy)); }
|
||||
return r;
|
||||
}).catch(() => caches.match(e.request)));
|
||||
});
|
||||
@@ -0,0 +1,36 @@
|
||||
// Shared passkey helpers (sign-in page + Settings).
|
||||
const b64u = {
|
||||
enc: buf => btoa(String.fromCharCode(...new Uint8Array(buf))).replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, ''),
|
||||
dec: s => Uint8Array.from(atob(s.replace(/-/g, '+').replace(/_/g, '/') + '='.repeat((4 - s.length % 4) % 4)), c => c.charCodeAt(0)),
|
||||
};
|
||||
async function authPost(path, body, method = 'POST') {
|
||||
const r = await fetch(path, { method, headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body || {}) });
|
||||
const j = await r.json().catch(() => ({}));
|
||||
if (!r.ok) throw new Error(j.error || 'Request failed (' + r.status + ')');
|
||||
return j;
|
||||
}
|
||||
async function passkeyRegister(setupCode, name) {
|
||||
const { cid, options } = await authPost('/api/auth/register/options', { setupCode });
|
||||
options.challenge = b64u.dec(options.challenge);
|
||||
options.user.id = b64u.dec(options.user.id);
|
||||
(options.excludeCredentials || []).forEach(c => { c.id = b64u.dec(c.id); });
|
||||
const cred = await navigator.credentials.create({ publicKey: options });
|
||||
await authPost('/api/auth/register/verify', { cid, name, response: {
|
||||
id: cred.id, rawId: b64u.enc(cred.rawId), type: cred.type,
|
||||
response: { clientDataJSON: b64u.enc(cred.response.clientDataJSON), attestationObject: b64u.enc(cred.response.attestationObject),
|
||||
transports: cred.response.getTransports ? cred.response.getTransports() : [] },
|
||||
clientExtensionResults: cred.getClientExtensionResults(), authenticatorAttachment: cred.authenticatorAttachment,
|
||||
} });
|
||||
}
|
||||
async function passkeyLogin() {
|
||||
const { cid, options } = await authPost('/api/auth/login/options');
|
||||
options.challenge = b64u.dec(options.challenge);
|
||||
(options.allowCredentials || []).forEach(c => { c.id = b64u.dec(c.id); });
|
||||
const a = await navigator.credentials.get({ publicKey: options });
|
||||
await authPost('/api/auth/login/verify', { cid, response: {
|
||||
id: a.id, rawId: b64u.enc(a.rawId), type: a.type,
|
||||
response: { clientDataJSON: b64u.enc(a.response.clientDataJSON), authenticatorData: b64u.enc(a.response.authenticatorData),
|
||||
signature: b64u.enc(a.response.signature), userHandle: a.response.userHandle ? b64u.enc(a.response.userHandle) : undefined },
|
||||
clientExtensionResults: a.getClientExtensionResults(),
|
||||
} });
|
||||
}
|
||||
Reference in new issue
Block a user